From 1bd0dd96376b1db0deb9e437d61b43b67313396c Mon Sep 17 00:00:00 2001 From: kcwww Date: Wed, 25 Sep 2024 12:02:21 +0900 Subject: [PATCH] feat: add introduce Modal --- .../_components/IntroButtonSection.tsx | 52 ++++++- app/globals.css | 129 ++++++++++-------- package.json | 1 + pnpm-lock.yaml | 8 ++ shared/components/modals/IntroduceModal.tsx | 64 +++++++-- shared/components/ui/UISection.tsx | 2 +- shared/provider/ModalProvider.tsx | 20 --- tailwind.config.ts | 2 +- 8 files changed, 191 insertions(+), 87 deletions(-) delete mode 100644 shared/provider/ModalProvider.tsx diff --git a/app/(landing)/_components/IntroButtonSection.tsx b/app/(landing)/_components/IntroButtonSection.tsx index 84cb7d5..66da71d 100644 --- a/app/(landing)/_components/IntroButtonSection.tsx +++ b/app/(landing)/_components/IntroButtonSection.tsx @@ -1,5 +1,15 @@ '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'; @@ -7,9 +17,45 @@ const IntroButtonSection = () => { const { onOpen } = useModal(); return ( - +
+ + + + 시작하기 + + + + + + +
+ + + + +
+ + + Cancel + + + + +
); }; diff --git a/app/globals.css b/app/globals.css index b0e6fff..642baf6 100644 --- 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 newline at end of file +.no-scrollbar::-webkit-scrollbar { + display: none; +} diff --git a/package.json b/package.json index 803b7ab..232ca4f 100644 --- 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 index 5fa901f..ff1261b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: tailwind-merge: specifier: ^2.3.0 version: 2.3.0 + tailwind-scrollbar-hide: + specifier: ^1.1.7 + version: 1.1.7 tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.13)(typescript@5.4.5))) @@ -6047,6 +6050,9 @@ packages: tailwind-merge@2.3.0: resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==} + tailwind-scrollbar-hide@1.1.7: + resolution: {integrity: sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==} + tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -13957,6 +13963,8 @@ snapshots: dependencies: '@babel/runtime': 7.24.6 + tailwind-scrollbar-hide@1.1.7: {} + tailwindcss-animate@1.0.7(tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.12.13)(typescript@5.4.5))): dependencies: tailwindcss: 3.4.3(ts-node@10.9.2(@types/node@20.12.13)(typescript@5.4.5)) diff --git a/shared/components/modals/IntroduceModal.tsx b/shared/components/modals/IntroduceModal.tsx index da7f900..31b4161 100644 --- 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 ( - - - Are you absolutely sure? + + + 🎅스노우볼 속 내 마음🎅 - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. + 📌스노우볼은 최대 5️⃣개까지 생성 가능해요👍 +
+ 📌한 스노우볼에 편지는 최대 30개까지 담겨요💌 +
+

👆스노우볼 클릭

+

+ 🔺확대한 스노우볼에서는 받은 편지들을 장식으로 확인할 수 있어요🎁 +

+

🔺장식 클릭으로 편지를 확인할 수 있어요👀

+

+ 🔺스노우볼을 다시 작게 보고 싶을 때는 왼쪽 위 < 표시를 + 눌러주세요🎄 +

+
+ +
+

🔒비공개 스노우볼 설정

+

+ 🔺로그인 후 자물쇠를 눌러서 스노우볼의 공개 여부를 설정할 수 + 있어요🔓 +

+

+ 🔺비공개 스노우볼의 경우 스노우볼의 주인만 편지들을 열람할 수 + 있어요📮 +

+

🔺생성한 스노우볼별로 비공개 설정이 가능해요🔮

+
+ +
+

❗아직 확인하지 않은 편지

+

안 읽은 편지들을 확인할 수 있어요☃️

+
+ +
+

🎉편지 AI 감정분석

+

눈과 함께 편지의 감정들이 떨어져요❄️

+

감정의 크기에 따라 사이즈가 달라요💫

+

❤️긍정의 감정이 가득해요😊

+

⭐온화한 감정으로 작성됐어요😌

+

💧슬픈 내용이 들어있어요😢

+
+ +
+

🚨버그 및 신고는

+

kimbukaem@gmail.com

+

로 부탁드립니다🙇

+
+ - + diff --git a/shared/components/ui/UISection.tsx b/shared/components/ui/UISection.tsx index e1e073b..8cfde96 100644 --- 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 deleted file mode 100644 index e643f97..0000000 --- a/shared/provider/ModalProvider.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; -import IntroduceModal from '@/shared/components/modals/IntroduceModal'; - -const ModalProvider = () => { - const [isMounted, setIsMounted] = useState(false); - - useEffect(() => { - setIsMounted(true); - }, []); - - if (!isMounted) { - return null; - } - - return ; -}; - -export default ModalProvider; diff --git a/tailwind.config.ts b/tailwind.config.ts index a7d34b6..e8ed90d 100644 --- 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;