feat: add introduce Modal

SSOCK · Sep 25, 2024 · 1bd0dd9 · 1bd0dd9
1 parent 74be58a
commit 1bd0dd9
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 87 deletions.
diff --git a/app/(landing)/_components/IntroButtonSection.tsx b/app/(landing)/_components/IntroButtonSection.tsx
@@ -1,15 +1,61 @@
 'use client';
 
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
 import useModal from '@/shared/hooks/useModal';
 
 const IntroButtonSection = () => {
   const { onOpen } = useModal();
 
   return (
-    <Button className="pointer-events-auto" onClick={() => onOpen('Intro')}>
-      Get Started
-    </Button>
+    <div className="flex flex-col items-center justify-center gap-4">
+      <Button className="pointer-events-auto" onClick={() => onOpen('Intro')}>
+        소개
+      </Button>
+      <Drawer>
+        <DrawerTrigger className="pointer-events-auto rounded bg-primary p-2 px-4 text-sm text-white">
+          시작하기
+        </DrawerTrigger>
+        <DrawerContent className="p-4">
+          <DrawerHeader>
+            <DrawerTitle></DrawerTitle>
+            <DrawerDescription></DrawerDescription>
+          </DrawerHeader>
+          <div className="flex w-full flex-col items-center justify-center gap-4">
+            <Button className="w-1/2" variant="outline">
+              구글로 로그인
+            </Button>
+            <Button className="w-1/2" variant="outline">
+              네이버로 로그인
+            </Button>
+            <Button className="w-1/2" variant="outline">
+              카카오로 로그인
+            </Button>
+            <Button
+              onClick={() => onOpen('Guest')}
+              className="w-1/2"
+              variant="outline"
+            >
+              게스트로 로그인
+            </Button>
+          </div>
+          <DrawerFooter className="flex items-center justify-center ">
+            <DrawerClose className="w-1/3 rounded-md bg-primary py-2 text-white">
+              Cancel
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </div>
   );
 };
 

diff --git a/app/globals.css b/app/globals.css
@@ -1,76 +1,97 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
 
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
+}
+
+html {
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+}
+
+/* 스크롤바 숨기기 */
+.no-scrollbar {
+  max-height: 75svh;
+  overflow: scroll;
+  scrollbar-width: none; /* Firefox */
+
+  /* Chrome, Safari */
+}
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.3.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.164.1",
     "vaul": "^0.9.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/shared/components/modals/IntroduceModal.tsx b/shared/components/modals/IntroduceModal.tsx
@@ -13,24 +13,72 @@ import {
 import { Button } from '@/components/ui/button';
 
 const IntroduceModal = () => {
-  const { isOpen, onClose } = useModal();
+  const { isOpen, onClose, type } = useModal();
 
-  if (!isOpen) {
+  if (!isOpen || type !== 'Intro') {
     return null;
   }
 
   return (
     <Dialog open={isOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogContent className="no-scrollbar">
+        <DialogHeader className="flex flex-col items-center justify-center">
+          <DialogTitle>🎅스노우볼 속 내 마음🎅</DialogTitle>
           <DialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            📌스노우볼은 최대 5️⃣개까지 생성 가능해요👍
+            <br />
+            📌한 스노우볼에 편지는 최대 30개까지 담겨요💌
           </DialogDescription>
         </DialogHeader>
+        <section>
+          <p>👆스노우볼 클릭</p>
+          <p>
+            🔺확대한 스노우볼에서는 받은 편지들을 장식으로 확인할 수 있어요🎁
+          </p>
+          <p>🔺장식 클릭으로 편지를 확인할 수 있어요👀</p>
+          <p>
+            🔺스노우볼을 다시 작게 보고 싶을 때는 왼쪽 위 &lt; 표시를
+            눌러주세요🎄
+          </p>
+        </section>
+
+        <section>
+          <p>🔒비공개 스노우볼 설정</p>
+          <p>
+            🔺로그인 후 자물쇠를 눌러서 스노우볼의 공개 여부를 설정할 수
+            있어요🔓
+          </p>
+          <p>
+            🔺비공개 스노우볼의 경우 스노우볼의 주인만 편지들을 열람할 수
+            있어요📮
+          </p>
+          <p>🔺생성한 스노우볼별로 비공개 설정이 가능해요🔮</p>
+        </section>
+
+        <section>
+          <p>❗아직 확인하지 않은 편지</p>
+          <p>안 읽은 편지들을 확인할 수 있어요☃️</p>
+        </section>
+
+        <section>
+          <p>🎉편지 AI 감정분석</p>
+          <p>눈과 함께 편지의 감정들이 떨어져요❄️</p>
+          <p>감정의 크기에 따라 사이즈가 달라요💫</p>
+          <p>❤️긍정의 감정이 가득해요😊</p>
+          <p>⭐온화한 감정으로 작성됐어요😌</p>
+          <p>💧슬픈 내용이 들어있어요😢</p>
+        </section>
+
+        <section className="flex flex-col items-center">
+          <p>🚨버그 및 신고는</p>
+          <p>[email protected]</p>
+          <p>로 부탁드립니다🙇</p>
+        </section>
+
         <DialogFooter>
-          <Button onClick={() => onClose()}>Cancel</Button>
+          <Button className="w-full" onClick={() => onClose()}>
+            Close
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

diff --git a/shared/components/ui/UISection.tsx b/shared/components/ui/UISection.tsx
@@ -1,4 +1,4 @@
-import ModalProvider from '@/shared/provider/ModalProvider';
+import ModalProvider from '@/shared/components/providers/ModalProvider';
 
 const UISection = ({ children }: { children: React.ReactNode }) => {
   return (

diff --git a/shared/provider/ModalProvider.tsx b/shared/provider/ModalProvider.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -75,7 +75,7 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('tailwind-scrollbar-hide')],
 } satisfies Config;
 
 export default config;