[feat] 팝업슬라이드 구현

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%
+  );
+}

src/app/home/components/ModalContent.tsx

@@ -0,0 +1,23 @@
+import { Logo } from '@/components'
+
+export default function ModalContent() {
+  return (
+    <div className="flex flex-col h-full bg-white rounded-16">
+      <div className="w-full flex justify-center items-center py-5">
+        <Logo width={120} height={160} />
+      </div>
+      <div className="flex-grow rounded-b-16 bg-primary_foundation-100 flex flex-col justify-center items-center text-white gap-4">
+        <p className="text-20">시간조각이란?</p>
+        <p className="text-14 text-primary_foundation-20 text-center weight-[400]">
+          조각조각에서는{' '}
+          <span className="underline font-bold underline-offset-2">
+            자투리 시간
+          </span>
+          을
+          <br />
+          ‘시간 조각&apos;이라고 불러요.
+        </p>
+      </div>
+    </div>
+  )
+}

src/app/home/components/ModalContent2.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image'
+
+export default function ModalContent2() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="w-full flex justify-center items-center h-170 red-gradient-2 relative">
+        <Image alt="bg" src="/images/bg-modal.svg" layout="fill" />
+      </div>
+      <div className="flex-grow rounded-b-16 bg-primary_foundation-100 flex flex-col justify-center items-center text-white gap-4">
+        <p className="text-20">시간조각에는,</p>
+        <p className="text-14 text-primary_foundation-20 text-center weight-[400]">
+          휴식, 건강, 엔터테인먼트,
+          <br /> 문화/예술, 소셜, 자기개발 총 6가지가 있어요.
+        </p>
+      </div>
+    </div>
+  )
+}

src/app/home/components/NoTimePiece.tsx

@@ -1,23 +1,118 @@
-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: <ModalContent />,
+    },
+    {
+      id: 1,
+      component: <ModalContent2 />,
+    },
+  ]
+
+  const handleNext = () => {
+    if (currentSlide < modalContents.length - 1) {
+      setCurrentSlide((prev) => prev + 1)
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentSlide > 0) {
+      setCurrentSlide((prev) => prev - 1)
+    }
+  }
+
   return (
-    <Div className="h-185 bg-primary_foundation_10 flex flex-col justify-center rounded-main relative mt-12">
+    <Div className="h-185 bg-primary_foundation_10 flex flex-col justify-center items-start rounded-main relative mt-12">
       <span>
         아직 자투리 시간에
         <br /> 모은 시간 조각이 없어요!
       </span>
-      <span className="mt-8 underline text-primary_foundation_60 underline-offset-[3.5px]">
+      <button
+        type="button"
+        onClick={() => setIsModalOpen(true)}
+        className="mt-8 underline text-primary_foundation_60 underline-offset-[3.5px]"
+      >
         시간 조각이 뭔가요?
-      </span>
+      </button>
       <Image
         src="images/home-img.svg"
         alt="home-img"
         width={155}
         height={155}
         className="absolute top-0 right-0"
       />
+
+      <Modal
+        bgClassName="backdrop-blur"
+        className="bg-transparent"
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      >
+        <IconClose
+          className="absolute top-7 right-0 cursor-pointer"
+          onClick={() => setIsModalOpen(false)}
+        />
+
+        <div className="relative w-full aspect-square flex items-center justify-center bg-white rounded-16">
+          {modalContents.map(({ id, component }) => (
+            <div
+              key={id}
+              className={cn(
+                'absolute w-full h-full opacity-0',
+                currentSlide === id && 'opacity-100',
+              )}
+            >
+              {component}
+            </div>
+          ))}
+        </div>
+
+        <div className="absolute bottom-[-30px] left-8 right-8 flex justify-between items-center px-8">
+          {currentSlide > 0 && (
+            <button
+              type="button"
+              className="text-white font-semibold pr-10"
+              onClick={handlePrevious}
+            >
+              이전
+            </button>
+          )}
+
+          <div className="absolute bottom-14 left-0 right-0 flex justify-center gap-4">
+            {modalContents.map(({ id }) => (
+              <div
+                key={id}
+                className={cn(
+                  'h-2 w-24 rounded-full bg-[#8a8a8d] transition-all duration-500',
+                  currentSlide === id && ' bg-white',
+                )}
+              />
+            ))}
+          </div>
+
+          {currentSlide < modalContents.length - 1 && (
+            <button
+              type="button"
+              className="text-white font-semibold ml-auto pl-10"
+              onClick={handleNext}
+            >
+              다음
+            </button>
+          )}
+        </div>
+      </Modal>
     </Div>
   )
 }

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()

src/components/Icons/IconClose.tsx

@@ -0,0 +1,29 @@
+import { SVGProps } from 'react'
+
+export default function IconClose({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M24 8L8 24"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 8L24 24"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}

src/components/Icons/SplashLogoNew.tsx

@@ -19,11 +19,11 @@ export default function SplashLogoNew({
     >
       <path
         d="M0.388184 173.804C4.37262 173.769 8.42695 173.7 12.4463 173.492V166.321H16.99V173.215C21.1492 172.903 25.2385 172.453 29.0481 171.725V175.882C20.2055 177.545 10.0347 177.892 0.388184 177.961V173.804ZM1.43672 168.122V163.965C6.12018 163.445 12.4463 158.768 12.4463 154.473V153.503H1.78623V149.415H27.6501V153.503H16.99V154.473C16.99 158.422 23.1763 162.06 27.9996 162.094V166.251C23.5958 166.251 17.5143 163.688 14.823 160.016C12.2366 164.311 5.84057 167.706 1.43672 168.122Z"
-        fill={pieceColor}
+        fill={pieceColor || '#1A1A25'}
       />
       <path
         d="M30.4435 162.163C37.6434 162.163 43.3754 158.11 43.3754 153.71V153.364H31.1425V149.415H47.919V152.532C47.919 161.02 39.8803 166.113 30.4435 166.113V162.163ZM31.8415 175.29V171.263C36.3519 171.263 48.9326 167.914 57.0064 166.113V179H52.4627V171.032C45.8569 172.21 37.5479 174.791 31.8415 175.29ZM52.4627 165.628V148.722H57.0064V154.958H60.5015V159.115H57.0064V164.692C55.5384 165.074 53.8607 165.385 52.4627 165.628Z"
-        fill={pieceColor}
+        fill={pieceColor || '#1A1A25'}
       />
       <path
         d="M60.4987 173.804C64.4832 173.769 68.5375 173.7 72.5569 173.492V166.321H77.1005V173.215C81.2597 172.903 85.349 172.453 89.1587 171.725V175.882C80.3161 177.545 70.1453 177.892 60.4987 177.961V173.804ZM61.5473 168.122V163.965C66.2307 163.445 72.5569 158.768 72.5569 154.473V153.503H61.8968V149.415H87.7607V153.503H77.1005V154.473C77.1005 158.422 83.2869 162.06 88.1102 162.094V166.251C83.7063 166.251 77.6248 163.688 74.9336 160.016C72.3472 164.311 65.9511 167.706 61.5473 168.122Z"
@@ -39,23 +39,23 @@ export default function SplashLogoNew({
         rx="29.6462"
         ry="13.3882"
         transform="matrix(-0.997349 -0.0727717 -0.069464 0.997585 105.349 76.8428)"
-        fill={pieceColor}
+        fill={pieceColor || '#1A1A25'}
       />
       <ellipse
         cx="20.3793"
         cy="9.76538"
         rx="20.3793"
         ry="9.76538"
         transform="matrix(-0.876446 -0.4815 -0.464336 0.885659 85.4248 117.176)"
-        fill={pieceColor}
+        fill={pieceColor || '#1A1A25'}
       />
       <ellipse
         cx="36.5871"
         cy="22.785"
         rx="36.5871"
         ry="22.785"
         transform="matrix(0.71326 -0.7009 0.684052 0.729434 30.6577 74.249)"
-        fill={pieceColor}
+        fill={pieceColor || '#1A1A25'}
       />
       <ellipse
         cx="44.6063"

src/components/Icons/index.tsx

@@ -18,3 +18,4 @@ export { default as Cup } from './Cup'
 export { default as Plus } from './Plus'
 export { default as Pencil } from './Pencil'
 export { default as IconRight } from './IconRight'
+export { default as IconClose } from './IconClose'

src/components/common/Modal/index.tsx

@@ -9,6 +9,7 @@ interface ModalProps {
   title?: string
   children: ReactNode
   className?: string
+  bgClassName?: string
 }
 
 export default function Modal({
@@ -17,12 +18,16 @@ export default function Modal({
   title,
   children,
   className,
+  bgClassName,
 }: ModalProps) {
   if (!isOpen) return null
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center bg-black/50',
+        bgClassName,
+      )}
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? 'modal-title' : undefined}
@@ -47,7 +52,7 @@ export default function Modal({
             </h2>
           </header>
         )}
-        <div className="mt-45 p-24">{children}</div>
+        <div className="mt-45">{children}</div>
       </div>
     </div>
   )