[theme-market] 검색/ 베스트 리스트 뷰 추가 (#199)

apps/theme-market/package.json

@@ -13,6 +13,7 @@
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-intersection-observer": "^9.15.1",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BottomSheet } from "@/app/_components/BottomSheet";
-import { ThemeDetail } from "@/app/_pages/Main/BottomSheet/ThemeDetail";
+import { ThemeDetail } from "@/app/_pages/BottomSheet/ThemeDetail";
 import { useThemeStore } from "@/app/_providers/ThemeProvider";
 import { useUserStore } from "@/app/_providers/UserProvider";
 import { themeService } from "@/services/ThemeService";

apps/theme-market/src/app/(routes)/(main)/download/best/page.tsx

@@ -0,0 +1,5 @@
+import { BestPage } from "@/app/_pages/Main/ThemeDownload/Best";
+
+export default async function DownloadBestPageRoute() {
+  return <BestPage />;
+}

apps/theme-market/src/app/(routes)/(main)/search/[query]/page.tsx

@@ -0,0 +1,10 @@
+import { SearchPage } from "@/app/_pages/Search";
+
+interface Props {
+  params: Promise<{ query: string }>;
+}
+
+export default async function SearchPageRoute({ params }: Props) {
+  const query = decodeURIComponent((await params).query);
+  return <SearchPage query={query} />;
+}

apps/theme-market/src/app/_components/Error/NotFound.tsx

@@ -2,7 +2,6 @@ import Image from "next/image";
 import styles from "./index.module.css";
 
 import SvgCat from "@/assets/icons/svgCat.svg";
-import { ReactNode } from "react";
 
 interface Props {
   message?: string;

apps/theme-market/src/app/_components/Input/index.tsx

@@ -1,11 +1,30 @@
-import { InputHTMLAttributes } from "react";
+"use client";
+
+import { InputHTMLAttributes, useState } from "react";
 import styles from "./index.module.css";
 import classNames from "classnames";
 
-interface Props extends InputHTMLAttributes<HTMLInputElement> {}
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  onComplete?: (value: string) => void;
+}
+
+export const Input = ({
+  onComplete,
+  className,
+  defaultValue,
+  ...props
+}: Props) => {
+  const [value, setValue] = useState<string>((defaultValue || "").toString());
 
-export const Input = (props: Props) => {
   return (
-    <input {...props} className={classNames(props.className, styles.input)} />
+    <input
+      {...props}
+      className={classNames(className, styles.input)}
+      value={value}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") onComplete?.(value);
+      }}
+      onChange={(e) => setValue(e.target.value)}
+    />
   );
 };

apps/theme-market/src/app/_components/Theme/List/ThemeInfoList.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ThemeInfo } from "@/app/_components/Theme/Info";
+import { Theme } from "@/entities/Theme";
+
+import styles from "./index.module.css";
+
+interface Props {
+  themes: Theme[];
+}
+export const ThemeInfoList = ({ themes }: Props) => {
+  return (
+    <div className={styles.wrapper}>
+      {themes.map((theme) => {
+        return <ThemeInfo key={theme.id} theme={theme} />;
+      })}
+    </div>
+  );
+};

apps/theme-market/src/app/_components/Theme/List/ThemeListWithInfiniteScroll.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+
+import { ThemeInfo } from "@/app/_components/Theme/Info";
+import { useUserStore } from "@/app/_providers/UserProvider";
+import { themeService } from "@/services/ThemeService";
+import { Theme } from "@/entities/Theme";
+
+import styles from "./index.module.css";
+
+interface Props {
+  defaultThemes: Theme[];
+}
+
+const DEFAULT_PAGE = 2;
+
+export const ThemeListWithInifiniteScorll = ({ defaultThemes }: Props) => {
+  const [themes, setThemes] = useState<Theme[]>(defaultThemes);
+  const [page, setPage] = useState<number>(DEFAULT_PAGE);
+
+  const { ref, inView } = useInView();
+
+  const { accessToken } = useUserStore((state) => state);
+
+  const loadThemes = useCallback(async () => {
+    const { content: themes } = await themeService.getBestThemes(
+      page,
+      accessToken
+    );
+
+    setThemes((prev) => [...prev, ...themes]);
+    setPage((prev) => prev + 1);
+  }, [accessToken, page]);
+
+  useEffect(() => {
+    if (inView) loadThemes();
+  }, [inView, loadThemes]);
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        {themes.map((theme) => {
+          return <ThemeInfo key={theme.id} theme={theme} />;
+        })}
+      </div>
+      <div ref={ref} />
+    </>
+  );
+};

apps/theme-market/src/app/_components/Theme/List/index.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx → apps/theme-market/src/app/_pages/BottomSheet/ThemeDetail/index.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { Theme } from "@/entities/Theme";
-import styles from "./index.module.css";
-import { Preview } from "./Preview";
 import classNames from "classnames";
 
+import { Theme } from "@/entities/Theme";
+import { Preview } from "./Preview";
+import styles from "./index.module.css";
 interface Props {
   theme: Theme;
   isAnonymous: boolean;

apps/theme-market/src/app/_pages/Main/Header/MainHeader.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { MENU } from "@/entities/Menu";
+
+import { TabContent } from "@/app/_components/Tab/TabContent";
+import { Tab } from "@/app/_components/Tab";
+import { Input } from "@/app/_components/Input";
+
+import styles from "./index.module.css";
+
+interface Props {
+  menu: MENU;
+}
+
+export const MainHeader = ({ menu }: Props) => {
+  const router = useRouter();
+
+  return (
+    <section className={styles.header}>
+      <div className={styles.inputWrapper}>
+        <Input
+          className={styles.input}
+          placeholder="테마를 검색해보세요"
+          type="search"
+          onComplete={(value: String) => router.push(`/search/${value}`)}
+        />
+      </div>
+      <Tab>
+        <TabContent selected={menu === "DOWNLOAD"}>
+          <Link href="/download" replace>
+            테마 다운로드
+          </Link>
+        </TabContent>
+        <TabContent selected={menu === "MY_THEME"}>
+          <Link href="/my" replace>
+            내 테마 올리기
+          </Link>
+        </TabContent>
+      </Tab>
+    </section>
+  );
+};

apps/theme-market/src/app/_pages/Main/Header/index.module.css

@@ -0,0 +1,21 @@
+.header {
+  background-color: var(--color-bg-default);
+}
+
+.inputWrapper {
+  width: 100%;
+  height: 80px;
+
+  padding: 20px 18.5px;
+}
+
+.input {
+  width: 100%;
+  height: 40px;
+
+  padding-left: 40px;
+
+  background-image: url("/static/icons/svgSearch.svg");
+  background-position: 7px 7px;
+  background-repeat: no-repeat;
+}

apps/theme-market/src/app/_pages/Main/ThemeDownload/Best/index.module.css

@@ -0,0 +1,25 @@
+.main {
+  padding: 17px 18px 0;
+}
+
+.prev {
+  padding-left: 3px;
+
+  display: flex;
+  flex-direction: row;
+
+  height: 14px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 12.6px;
+
+  color: var(--palette-gray-2);
+}
+
+.themes {
+  margin-top: 12px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

apps/theme-market/src/app/_pages/Main/ThemeDownload/Best/index.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+
+import { cookieService } from "@/services/CookieService";
+import { MainHeader } from "@/app/_pages/Main/Header/MainHeader";
+import { themeService } from "@/services/ThemeService";
+import SvgChevronLeft from "@/assets/icons/svgChevronLeft.svg";
+
+import styles from "./index.module.css";
+import { DEFAULT_PAGE } from "@/repositories/ThemeRepository";
+import { ThemeListWithInifiniteScorll } from "@/app/_components/Theme/List/ThemeListWithInfiniteScroll";
+import Link from "next/link";
+
+export const BestPage = async () => {
+  const accessToken = cookieService.getAccessToken();
+  const { content: themes } = await themeService.getBestThemes(
+    DEFAULT_PAGE,
+    accessToken
+  );
+
+  return (
+    <>
+      <MainHeader menu="DOWNLOAD" />
+      <section className={styles.main}>
+        <Link className={styles.prev} href="/download">
+          <Image src={SvgChevronLeft} alt="<" width="16" height="16.6" />
+          <span>돌아가기</span>
+        </Link>
+        <div className={styles.themes}>
+          <ThemeListWithInifiniteScorll defaultThemes={themes} />
+        </div>
+      </section>
+    </>
+  );
+};

apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/index.tsx

@@ -1,11 +1,14 @@
 import Image from "next/image";
 import styles from "./index.module.css";
-import { ThemeInfo } from "./ThemeInfo";
+import Link from "next/link";
 
-import SvgChevronLeft from "@/assets/icons/svgChevronLeft.svg";
 import { NotFound } from "@/app/_components/Error/NotFound";
+import { ThemeInfoList } from "@/app/_components/Theme/List/ThemeInfoList";
+
 import { Theme } from "@/entities/Theme";
 
+import SvgChevronRight from "@/assets/icons/svgChevronRight.svg";
+
 interface Props {
   title: string;
   themes: Theme[];
@@ -20,14 +23,12 @@ export const ThemeList = ({ title, themes }: Props) => {
       {themeExists ? (
         <>
           <div className={styles.themeList}>
-            {themes.map((theme) => {
-              return <ThemeInfo key={theme.id} theme={theme} />;
-            })}
+            <ThemeInfoList themes={themes} />
           </div>
-          <div className={styles.more}>
+          <Link className={styles.more} href="/download/best">
             <span>전체 보기</span>
-            <Image src={SvgChevronLeft} alt=">" />
-          </div>
+            <Image src={SvgChevronRight} alt=">" />
+          </Link>
         </>
       ) : (
         <div className={styles.notFound}>

apps/theme-market/src/app/_pages/Main/ThemeDownload/index.tsx

@@ -2,11 +2,15 @@ import { themeService } from "@/services/ThemeService";
 
 import { ThemeList } from "./ThemeList";
 import { cookieService } from "@/services/CookieService";
+import { DEFAULT_PAGE } from "@/repositories/ThemeRepository";
 
 export const ThemeDownload = async () => {
   const accessToken = cookieService.getAccessToken();
 
-  const bestThemes = await themeService.getBestThemes(accessToken);
+  const { content: bestThemes } = await themeService.getBestThemes(
+    DEFAULT_PAGE,
+    accessToken
+  );
   const friendsThemes = await themeService.getFriendsThemes(accessToken);
 
   return (

apps/theme-market/src/app/_pages/Main/index.module.css

@@ -1,25 +1,3 @@
-.header {
-  background-color: var(--color-bg-default);
-}
-
-.inputWrapper {
-  width: 100%;
-  height: 80px;
-
-  padding: 20px 18.5px;
-}
-
-.input {
-  width: 100%;
-  height: 40px;
-
-  padding-left: 40px;
-
-  background-image: url("/static/icons/svgSearch.svg");
-  background-position: 7px 7px;
-  background-repeat: no-repeat;
-}
-
 .main {
-  padding: 17px 18px 0;
+  padding: 21px 18px 0;
 }