From 73d2e4debb3760cc13dc6f57d28239f3f65e6abd Mon Sep 17 00:00:00 2001
From: ars-ki-00 <dkwanm1@snu.ac.kr>
Date: Sun, 26 Jan 2025 15:27:11 +0900
Subject: [PATCH] =?UTF-8?q?[theme-market]=20=ED=85=8C=EB=A7=88=20=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(routes)/(main)/(bottomsheet)/index.tsx   | 30 +++++++++++++++----
 .../Main/BottomSheet/ThemeDetail/index.tsx    | 24 ++++++++-------
 .../ThemeList/ThemeInfo/index.tsx             | 11 +++----
 apps/theme-market/src/entities/Theme.ts       |  1 +
 .../src/repositories/ThemeRepository.ts       | 10 +++++++
 .../theme-market/src/services/ThemeService.ts |  4 +++
 6 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx b/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx
index f09565f..bafaf67 100644
--- a/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx
+++ b/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx
@@ -11,9 +11,7 @@ export default function MainBottomSheet() {
   const [isAnonymous, setIsAnonymous] = useState<boolean>(false);
 
   const { theme, setTheme } = useThemeStore((state) => state);
-
-  const { accessToken } = useUserStore((state) => state);
-  console.log(theme);
+  const { user, accessToken } = useUserStore((state) => state);
 
   const updateIsAnonymous = () => {
     setIsAnonymous((current) => !current);
@@ -30,14 +28,34 @@ export default function MainBottomSheet() {
       themeService.publishTheme(theme.id, theme.name, isAnonymous, accessToken);
   };
 
+  const downloadTheme = () => {
+    if (!theme) return;
+
+    const isConfirm = window.confirm(`해당 테마를 다운로드 하시겠습니까?`);
+
+    if (isConfirm) themeService.downloadTheme(theme.id, accessToken);
+  };
+
+  const isMyTheme = user.nickname.nickname === theme?.publishInfo.authorName;
+
+  const bottomSheetProps = isMyTheme
+    ? {
+        title: "내 테마 올리기",
+        confirmText: "등록",
+        onConfirm: () => publishTheme(),
+      }
+    : {
+        title: "테마 다운로드",
+        confirmText: "담기",
+        onConfirm: () => downloadTheme(),
+      };
+
   return (
     <>
       <BottomSheet
-        title="내 테마 올리기"
-        confirmText="등록"
         isOpen={!!theme}
         onCancel={() => setTheme(null)}
-        onConfirm={() => publishTheme()}
+        {...bottomSheetProps}
       >
         {theme && (
           <ThemeDetail
diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx
index f622027..40d2114 100644
--- a/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx
+++ b/apps/theme-market/src/app/_pages/Main/BottomSheet/ThemeDetail/index.tsx
@@ -33,17 +33,19 @@ export const ThemeDetail = ({
           </div>
         ))}
       </div>
-      <div className={styles.anonymous}>
-        <span>익명으로 올리기</span>
-        <label className={styles.switch}>
-          <input
-            type="checkbox"
-            checked={isAnonymous}
-            onClick={() => updateIsAnonymous()}
-          />
-          <span className={classNames(styles.slider, styles.round)} />
-        </label>
-      </div>
+      {theme.status != "PUBLISHED" && (
+        <div className={styles.anonymous}>
+          <span>익명으로 올리기</span>
+          <label className={styles.switch}>
+            <input
+              type="checkbox"
+              checked={isAnonymous}
+              onChange={() => updateIsAnonymous()}
+            />
+            <span className={classNames(styles.slider, styles.round)} />
+          </label>
+        </div>
+      )}
       <Preview colors={theme.colors} />
     </section>
   );
diff --git a/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx b/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx
index ac6a620..fc9aa3b 100644
--- a/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx
+++ b/apps/theme-market/src/app/_pages/Main/ThemeDownload/ThemeList/ThemeInfo/index.tsx
@@ -4,21 +4,18 @@ import Image from "next/image";
 import styles from "./index.module.css";
 
 import SvgDownload from "@/assets/icons/svgDownload.svg";
-import { useRouter } from "next/navigation";
 import { Theme } from "@/entities/Theme";
+import { useThemeStore } from "@/app/_providers/ThemeProvider";
 
 interface Props {
   theme: Theme;
 }
 
 export const ThemeInfo = ({ theme }: Props) => {
-  const router = useRouter();
+  const { setTheme } = useThemeStore((state) => state);
 
   return (
-    <article
-      className={styles.wrapper}
-      onClick={() => router.push(`/theme/${theme.id}`)}
-    >
+    <article className={styles.wrapper} onClick={() => setTheme(theme)}>
       <div className={styles.metadata}>
         <div className={styles.info}>
           <h2 className={styles.title}>{theme.publishInfo.publishName}</h2>
@@ -26,7 +23,7 @@ export const ThemeInfo = ({ theme }: Props) => {
         </div>
         <div className={styles.download}>
           <Image src={SvgDownload} alt="download" />
-          <span>10</span>
+          <span>{theme.publishInfo.downloads || 0}</span>
         </div>
       </div>
       <div className={styles.colorList}>
diff --git a/apps/theme-market/src/entities/Theme.ts b/apps/theme-market/src/entities/Theme.ts
index 039c16b..7b95f30 100644
--- a/apps/theme-market/src/entities/Theme.ts
+++ b/apps/theme-market/src/entities/Theme.ts
@@ -4,6 +4,7 @@ export type Theme = {
   colors: ThemeColorInfo[];
   publishInfo: ThemePublishInfo;
   isCustom: Boolean;
+  status: string;
 };
 
 export type ThemeColorInfo = {
diff --git a/apps/theme-market/src/repositories/ThemeRepository.ts b/apps/theme-market/src/repositories/ThemeRepository.ts
index c6331ff..8efe450 100644
--- a/apps/theme-market/src/repositories/ThemeRepository.ts
+++ b/apps/theme-market/src/repositories/ThemeRepository.ts
@@ -37,6 +37,13 @@ type ThemeRepository = {
     isAnonymous: boolean;
     accessToken?: string;
   }) => Promise<void>;
+  downloadTheme: ({
+    themeId,
+    accessToken,
+  }: {
+    themeId: string;
+    accessToken: string;
+  }) => Promise<void>;
 };
 
 const DEFAULT_PAGE = 1;
@@ -82,4 +89,7 @@ export const themeRepositry: ThemeRepository = {
       accessToken
     );
   },
+  downloadTheme: async ({ themeId, accessToken }) => {
+    await httpClient.post(`/v1/themes/${themeId}/download`, {}, accessToken);
+  },
 };
diff --git a/apps/theme-market/src/services/ThemeService.ts b/apps/theme-market/src/services/ThemeService.ts
index a28c4ec..b313bb0 100644
--- a/apps/theme-market/src/services/ThemeService.ts
+++ b/apps/theme-market/src/services/ThemeService.ts
@@ -13,6 +13,7 @@ type ThemeService = {
     isAnonymous: boolean,
     accessToken?: string
   ) => Promise<void>;
+  downloadTheme: (themeId: string, accessToken: string) => Promise<void>;
 };
 
 export const themeService: ThemeService = {
@@ -43,4 +44,7 @@ export const themeService: ThemeService = {
       accessToken,
     });
   },
+  downloadTheme: async (themeId: string, accessToken: string) => {
+    await themeRepositry.downloadTheme({ themeId, accessToken });
+  },
 };