[theme-market] 내 테마 리스트 api 연동 (#191)

- [theme-market] 내 테마 리스트 api 연동
wafflestudio · Nov 16, 2024 · 77e4c1c · 77e4c1c
1 parent 39b1415
commit 77e4c1c
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 67 deletions.
diff --git a/.../Main/MyTheme/ThemeList/Theme/Preview.tsx → ...n/MyTheme/ThemeList/ThemeInfo/Preview.tsx b/.../Main/MyTheme/ThemeList/Theme/Preview.tsx → ...n/MyTheme/ThemeList/ThemeInfo/Preview.tsx
diff --git a/.../MyTheme/ThemeList/Theme/index.module.css → ...heme/ThemeList/ThemeInfo/index.module.css b/.../MyTheme/ThemeList/Theme/index.module.css → ...heme/ThemeList/ThemeInfo/index.module.css
diff --git a/...es/Main/MyTheme/ThemeList/Theme/index.tsx → ...ain/MyTheme/ThemeList/ThemeInfo/index.tsx b/...es/Main/MyTheme/ThemeList/Theme/index.tsx → ...ain/MyTheme/ThemeList/ThemeInfo/index.tsx
@@ -10,7 +10,7 @@ interface Props {
   colors: string[];
 }
 
-export const Theme = ({ title, colors }: Props) => {
+export const ThemeInfo = ({ title, colors }: Props) => {
   const router = useRouter();
 
   return (

diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx b/apps/theme-market/src/app/_pages/Main/MyTheme/ThemeList/index.tsx
@@ -1,67 +1,21 @@
+import { Theme } from "@/entities/Theme";
+
 import styles from "./index.module.css";
-import { Theme } from "./Theme";
+import { ThemeInfo } from "./ThemeInfo";
+import { themeService } from "@/services/ThemeService";
+
+interface Props {
+  themes: Theme[];
+}
 
-export const ThemeList = () => {
+export const ThemeList = ({ themes }: Props) => {
   return (
     <div className={styles.wrapper}>
-      <Theme title="1" colors={["#1BD0C8"]} />
-      <Theme title="2" colors={["#1BD0C8", "#FAC42D"]} />
-      <Theme title="3" colors={["#1BD0C8", "#FAC42D", "#E54459"]} />
-      <Theme title="4" colors={["#1BD0C8", "#FAC42D", "#A6D930", "#E54459"]} />
-      <Theme
-        title="5"
-        colors={["#1BD0C8", "#FAC42D", "#A6D930", "#E54459", "#4F48C4"]}
-      />
-      <Theme
-        title="6"
-        colors={[
-          "#1BD0C8",
-          "#FAC42D",
-          "#A6D930",
-          "#E54459",
-          "#4F48C4",
-          "#AF56B3",
-        ]}
-      />
-      <Theme
-        title="7"
-        colors={[
-          "#1BD0C8",
-          "#FAC42D",
-          "#A6D930",
-          "#E54459",
-          "#4F48C4",
-          "#AF56B3",
-          "#F58D3D",
-        ]}
-      />
-      <Theme
-        title="8"
-        colors={[
-          "#1BD0C8",
-          "#FAC42D",
-          "#A6D930",
-          "#E54459",
-          "#4F48C4",
-          "#AF56B3",
-          "#F58D3D",
-          "#1D99E8",
-        ]}
-      />
-      <Theme
-        title="9"
-        colors={[
-          "#1BD0C8",
-          "#FAC42D",
-          "#A6D930",
-          "#E54459",
-          "#4F48C4",
-          "#AF56B3",
-          "#F58D3D",
-          "#1D99E8",
-          "#123456",
-        ]}
-      />
+      {themes.map((theme) => {
+        const colors = theme.colors.map((color) => color.bg);
+
+        return <ThemeInfo key={theme.id} title={theme.name} colors={colors} />;
+      })}
     </div>
   );
 };
diff --git a/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx b/apps/theme-market/src/app/_pages/Main/MyTheme/index.tsx
@@ -1,13 +1,25 @@
+import { cookies } from "next/headers";
 import styles from "./index.module.css";
 import { ThemeList } from "./ThemeList";
+import { ACCESS_TOKEN_KEY } from "@/clients/HttpClient";
+import { themeService } from "@/services/ThemeService";
+import { NotFound } from "@/app/_components/Error/NotFound";
+
+export const MyTheme = async () => {
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get(ACCESS_TOKEN_KEY)?.value;
+
+  const myThemes = await themeService.getMyThemes(accessToken);
 
-export const MyTheme = () => {
   return (
     <div className={styles.wrapper}>
       <span className={styles.title}>나의 커스텀 테마</span>
       <div className={styles.box}>
-        <ThemeList />
-        {/* <NotFound message="만든 커스텀 테마가 아직 없어요." /> */}
+        {myThemes.length > 0 ? (
+          <ThemeList themes={myThemes} />
+        ) : (
+          <NotFound message="만든 커스템 테마가 아직 없어요." />
+        )}
       </div>
       <p className={styles.description}>
         <strong>{"더보기 > 커스텀 테마"}</strong>

diff --git a/apps/theme-market/src/app/_pages/Main/index.tsx b/apps/theme-market/src/app/_pages/Main/index.tsx
@@ -40,9 +40,6 @@ export const MainPage = ({ menu }: Props) => {
       <section className={styles.main}>
         {menu === "DOWNLOAD" ? <ThemeDownload /> : <MyTheme />}
       </section>
-      {/* <BottomSheet>
-        <Theme title="pastel" />
-      </BottomSheet> */}
     </>
   );
 };
diff --git a/apps/theme-market/src/entities/Theme.ts b/apps/theme-market/src/entities/Theme.ts
@@ -3,6 +3,7 @@ export type Theme = {
   name: string;
   colors: ThemeColorInfo[];
   publishInfo: ThemePublishInfo;
+  isCustom: Boolean;
 };
 
 export type ThemeColorInfo = {

diff --git a/apps/theme-market/src/repositories/ThemeRepository.ts b/apps/theme-market/src/repositories/ThemeRepository.ts
@@ -4,6 +4,7 @@ import { PageResponse } from "@/entities/Page";
 import { Theme } from "@/entities/Theme";
 
 type ThemeRepository = {
+  getMyThemes: ({ accessToken }: { accessToken?: string }) => Promise<Theme[]>;
   getBestThemes: ({
     page,
     accessToken,
@@ -23,6 +24,10 @@ type ThemeRepository = {
 const DEFAULT_PAGE = 1;
 
 export const themeRepositry: ThemeRepository = {
+  getMyThemes: async ({ accessToken }) => {
+    const res = await httpClient.get<Theme[]>("/v1/themes", accessToken);
+    return res;
+  },
   getBestThemes: async ({ page, accessToken }) => {
     const params = new URLSearchParams({
       page: (page || DEFAULT_PAGE).toString(),

diff --git a/apps/theme-market/src/services/ThemeService.ts b/apps/theme-market/src/services/ThemeService.ts
@@ -3,11 +3,17 @@ import { Theme } from "@/entities/Theme";
 import { themeRepositry } from "@/repositories/ThemeRepository";
 
 type ThemeService = {
+  getMyThemes: (accessToken?: string) => Promise<Theme[]>;
   getBestThemes: (accessToken?: string) => Promise<Theme[]>;
   getFriendsThemes: (accessToken?: string) => Promise<Theme[]>;
 };
 
 export const themeService: ThemeService = {
+  getMyThemes: async (accessToken?: string) => {
+    return (await themeRepositry.getMyThemes({ accessToken })).filter(
+      (theme) => theme.isCustom
+    );
+  },
   getBestThemes: async (accessToken?: string) => {
     return await themeRepositry.getBestThemes({ accessToken });
   },