[theme-market] 테마 다운로드 기능 추가

wafflestudio · Jan 26, 2025 · 73d2e4d · 73d2e4d
1 parent 2acfafe
commit 73d2e4d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 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
@@ -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
@@ -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
@@ -4,29 +4,26 @@ 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>
           <span className={styles.creator}>{theme.publishInfo.authorName}</span>
         </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
@@ -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
@@ -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
@@ -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 });
+  },
 };