[theme-market] bottomSheet 관련 구조 변경 (#195)

wafflestudio · Dec 25, 2024 · de13ee4 · de13ee4
1 parent 446957a
commit de13ee4
Show file tree

Hide file tree

Showing 34 changed files with 377 additions and 147 deletions.
diff --git a/apps/theme-market/package.json b/apps/theme-market/package.json
@@ -12,7 +12,8 @@
     "classnames": "^2.5.1",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx b/apps/theme-market/src/app/(routes)/(main)/(bottomsheet)/index.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { BottomSheet } from "@/app/_components/BottomSheet";
+import { ThemeDetail } from "@/app/_pages/Main/BottomSheet/ThemeDetail";
+import { useThemeStore } from "@/app/_providers/ThemeProvider";
+
+export default function MainBottomSheet() {
+  const { theme, setTheme } = useThemeStore((state) => state);
+
+  return (
+    <>
+      <BottomSheet
+        title={"title"}
+        isOpen={!!theme}
+        onCancel={() => setTheme(null)}
+      >
+        {theme && <ThemeDetail theme={theme} />}
+      </BottomSheet>
+      {/* )} */}
+    </>
+  );
+}
diff --git a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/(.)theme/[id]/page.tsx b/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/(.)theme/[id]/page.tsx
diff --git a/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/default.ts b/apps/theme-market/src/app/(routes)/(main)/@bottomsheet/default.ts
diff --git a/apps/theme-market/src/app/(routes)/(main)/index.module.css b/apps/theme-market/src/app/(routes)/(main)/index.module.css
@@ -1,5 +1,7 @@
 .layout {
+  height: 100vh;
+  position: relative;
   background-color: var(--palette-gray);
 
-  font-family: "AppleSDGothicNeo";
+  z-index: 5;
 }
diff --git a/apps/theme-market/src/app/(routes)/(main)/layout.tsx b/apps/theme-market/src/app/(routes)/(main)/layout.tsx
@@ -1,32 +1,17 @@
-import "@/app/_styles/reset.css";
-import "@/app/_styles/palette.css";
-import "@/app/_styles/theme.css";
-import "@/app/_styles/font.css";
-
-import type { Metadata } from "next";
-import { cookies } from "next/headers";
 import { ReactNode } from "react";
+import MainBottomSheet from "./(bottomsheet)";
 
 import styles from "./index.module.css";
 
-export const metadata: Metadata = {
-  title: "SNUTT 테마 마켓",
-};
-
 interface Props {
   children: ReactNode;
-  bottomsheet: ReactNode;
 }
 
-export default function RootLayout({ children, bottomsheet }: Props) {
-  const themeMode = cookies().get("theme")?.value ?? "light";
-
+export default function MainLayout({ children }: Props) {
   return (
-    <html lang="ko" data-theme={themeMode}>
-      <body className={styles.layout}>
-        {children}
-        {bottomsheet}
-      </body>
-    </html>
+    <>
+      <div className={styles.layout}>{children}</div>
+      <MainBottomSheet />
+    </>
   );
 }
diff --git a/apps/theme-market/src/app/(routes)/index.module.css b/apps/theme-market/src/app/(routes)/index.module.css
@@ -0,0 +1,5 @@
+.layout {
+  background-color: var(--palette-gray);
+
+  font-family: "AppleSDGothicNeo";
+}
diff --git a/apps/theme-market/src/app/(routes)/layout.tsx b/apps/theme-market/src/app/(routes)/layout.tsx
@@ -0,0 +1,32 @@
+import "@/app/_styles/reset.css";
+import "@/app/_styles/palette.css";
+import "@/app/_styles/theme.css";
+import "@/app/_styles/font.css";
+
+import type { Metadata } from "next";
+import { ReactNode } from "react";
+
+import styles from "./index.module.css";
+import { cookieService } from "@/services/CookieService";
+import { ThemeStoreProvider } from "@/app/_providers/ThemeProvider";
+
+export const metadata: Metadata = {
+  title: "SNUTT 테마 마켓",
+};
+
+interface Props {
+  children: ReactNode;
+  bottomsheet: ReactNode;
+}
+
+export default async function RootLayout({ children }: Props) {
+  const themeMode = cookieService.get("theme", "light");
+
+  return (
+    <html lang="ko" data-theme={themeMode}>
+      <body className={styles.layout}>
+        <ThemeStoreProvider>{children}</ThemeStoreProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/theme-market/src/app/_components/BottomSheet/index.module.css b/apps/theme-market/src/app/_components/BottomSheet/index.module.css
@@ -26,6 +26,11 @@
   bottom: 0;
 
   background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+
+  &.hide {
+    z-index: 0;
+  }
 }
 
 .bottomSheet {
@@ -40,6 +45,11 @@
 
   border-radius: 10px 10px 0px 0px;
   background-color: var(--palette-gray);
+  display: block;
+
+  &.hide {
+    display: none;
+  }
 }
 
 .header {

diff --git a/apps/theme-market/src/app/_components/BottomSheet/index.tsx b/apps/theme-market/src/app/_components/BottomSheet/index.tsx
@@ -2,20 +2,26 @@
 
 import { useRouter } from "next/navigation";
 import styles from "./index.module.css";
+import classNames from "classnames";
 
 interface Props {
   children?: React.ReactNode;
+  isOpen: boolean;
+  title: string;
+  onCancel?: () => void;
 }
 
-export const BottomSheet = ({ children }: Props) => {
+export const BottomSheet = ({ children, title, isOpen, onCancel }: Props) => {
   const router = useRouter();
 
   return (
-    <div className={styles.wrapper}>
-      <section className={styles.bottomSheet}>
+    <div className={classNames(styles.wrapper, { [styles.hide]: !isOpen })}>
+      <section
+        className={classNames(styles.bottomSheet, { [styles.hide]: !isOpen })}
+      >
         <div className={styles.header}>
-          <span onClick={() => router.back()}>취소</span>
-          <span className={styles.title}>테마 다운로드</span>
+          <span onClick={() => onCancel?.()}>취소</span>
+          <span className={styles.title}>{title}</span>
           <span>담기</span>
         </div>
         <div>{children}</div>

diff --git a/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.tsx b/apps/theme-market/src/app/_pages/Main/BottomSheet/Theme/index.tsx