-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aeb0d69
commit 334b710
Showing
11 changed files
with
237 additions
and
16 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 /> | ||
| ‘시간 조각'이라고 불러요. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters