From 334b710da5f21355f17d298acc308e4aec07d5ce Mon Sep 17 00:00:00 2001 From: yeyounging <133792082+yeyounging@users.noreply.github.com> Date: Thu, 28 Nov 2024 00:10:30 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8C=9D=EC=97=85=EC=8A=AC=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=20(#37)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/bg-modal.svg | 39 ++++++++ src/app/globals.css | 16 ++++ src/app/home/components/ModalContent.tsx | 23 +++++ src/app/home/components/ModalContent2.tsx | 18 ++++ src/app/home/components/NoTimePiece.tsx | 103 +++++++++++++++++++++- src/app/home/home.css | 4 - src/app/home/page.tsx | 1 - src/components/Icons/IconClose.tsx | 29 ++++++ src/components/Icons/SplashLogoNew.tsx | 10 +-- src/components/Icons/index.tsx | 1 + src/components/common/Modal/index.tsx | 9 +- 11 files changed, 237 insertions(+), 16 deletions(-) create mode 100644 public/images/bg-modal.svg create mode 100644 src/app/home/components/ModalContent.tsx create mode 100644 src/app/home/components/ModalContent2.tsx delete mode 100644 src/app/home/home.css create mode 100644 src/components/Icons/IconClose.tsx diff --git a/public/images/bg-modal.svg b/public/images/bg-modal.svg new file mode 100644 index 0000000..89f6433 --- /dev/null +++ b/public/images/bg-modal.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index c1ae261..f3f4d71 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -36,3 +36,19 @@ input[type='number']::-webkit-inner-spin-button { .rounded-main { border-radius: 12px; } + +.red-gradient { + border-radius: 0px 0px 20px 20px; + background: linear-gradient(180deg, #fff 0%, #fffafa 34.96%, #ffdcd7 100%); +} + +.red-gradient-2 { + border-radius: 16px; + background: linear-gradient( + 180deg, + #ff4f38 -70.88%, + #ffd2cc 30.2%, + #ffedea 96.73%, + #fff 100% + ); +} diff --git a/src/app/home/components/ModalContent.tsx b/src/app/home/components/ModalContent.tsx new file mode 100644 index 0000000..08dd059 --- /dev/null +++ b/src/app/home/components/ModalContent.tsx @@ -0,0 +1,23 @@ +import { Logo } from '@/components' + +export default function ModalContent() { + return ( +
+
+ +
+
+

시간조각이란?

+

+ 조각조각에서는{' '} + + 자투리 시간 + + 을 +
+ ‘시간 조각'이라고 불러요. +

+
+
+ ) +} diff --git a/src/app/home/components/ModalContent2.tsx b/src/app/home/components/ModalContent2.tsx new file mode 100644 index 0000000..f8ced51 --- /dev/null +++ b/src/app/home/components/ModalContent2.tsx @@ -0,0 +1,18 @@ +import Image from 'next/image' + +export default function ModalContent2() { + return ( +
+
+ bg +
+
+

시간조각에는,

+

+ 휴식, 건강, 엔터테인먼트, +
문화/예술, 소셜, 자기개발 총 6가지가 있어요. +

+
+
+ ) +} diff --git a/src/app/home/components/NoTimePiece.tsx b/src/app/home/components/NoTimePiece.tsx index 8515062..46763dd 100644 --- a/src/app/home/components/NoTimePiece.tsx +++ b/src/app/home/components/NoTimePiece.tsx @@ -1,16 +1,51 @@ -import Div from '@/components/common/Div' +import { Div, IconClose } from '@/components' +import Modal from '@/components/common/Modal' import Image from 'next/image' +import { useState } from 'react' +import { cn } from '@/util' +import ModalContent from './ModalContent' +import ModalContent2 from './ModalContent2' export default function NoTimePiece() { + const [isModalOpen, setIsModalOpen] = useState(true) + const [currentSlide, setCurrentSlide] = useState(0) + + const modalContents = [ + { + id: 0, + component: , + }, + { + id: 1, + component: , + }, + ] + + const handleNext = () => { + if (currentSlide < modalContents.length - 1) { + setCurrentSlide((prev) => prev + 1) + } + } + + const handlePrevious = () => { + if (currentSlide > 0) { + setCurrentSlide((prev) => prev - 1) + } + } + return ( -
+
아직 자투리 시간에
모은 시간 조각이 없어요! - + home-img + + setIsModalOpen(false)} + > + setIsModalOpen(false)} + /> + +
+ {modalContents.map(({ id, component }) => ( +
+ {component} +
+ ))} +
+ +
+ {currentSlide > 0 && ( + + )} + +
+ {modalContents.map(({ id }) => ( +
+ ))} +
+ + {currentSlide < modalContents.length - 1 && ( + + )} +
+
) } diff --git a/src/app/home/home.css b/src/app/home/home.css deleted file mode 100644 index 594bacb..0000000 --- a/src/app/home/home.css +++ /dev/null @@ -1,4 +0,0 @@ -.red-gradient { - border-radius: 0px 0px 20px 20px; - background: linear-gradient(180deg, #fff 0%, #fffafa 34.96%, #ffdcd7 100%); -} diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index c17851e..472152f 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -8,7 +8,6 @@ import { QuickBox } from './components/QuickBox' import NoQuickBox from './components/NoQuickBox' import NoTimePiece from './components/NoTimePiece' import TimePiece from './components/TimePiece' -import './home.css' export default function Home() { const { quickStart, totalSavedTime, activities } = useHomeContext() diff --git a/src/components/Icons/IconClose.tsx b/src/components/Icons/IconClose.tsx new file mode 100644 index 0000000..9783aa7 --- /dev/null +++ b/src/components/Icons/IconClose.tsx @@ -0,0 +1,29 @@ +import { SVGProps } from 'react' + +export default function IconClose({ ...props }: SVGProps) { + return ( + + + + + ) +} diff --git a/src/components/Icons/SplashLogoNew.tsx b/src/components/Icons/SplashLogoNew.tsx index b28b0f6..0d32b68 100644 --- a/src/components/Icons/SplashLogoNew.tsx +++ b/src/components/Icons/SplashLogoNew.tsx @@ -19,11 +19,11 @@ export default function SplashLogoNew({ > )} -
{children}
+
{children}
)