-
Notifications
You must be signed in to change notification settings - Fork 0
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
Showing
12 changed files
with
315 additions
and
302 deletions.
There are no files selected for viewing
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
Empty file.
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,21 @@ | ||
| import { Section } from "../ui/common"; | ||
|
|
||
| export const StartSection = () => { | ||
| return ( | ||
| <Section className="flex flex-col items-center bg-primary-500 md:flex-row md:items-start md:pb-0"> | ||
| <div className="flex flex-col"> | ||
| <h1 className="text-center text-white md:text-start"> | ||
| <span className="md:mb-[12px] md:inline-block"> | ||
| 간편한 링크 아카이빙 | ||
| </span> | ||
| <br /> | ||
| <span>지금 바로 경험하세요!</span> | ||
| </h1> | ||
| <button className="rounded-[8px] bg-white px-[18px] py-[12px] text-primary-500 drop-shadow-[0_4px_4px_rgba(0,0,0,0.1)] sm:rounded-[12px] sm:px-5 sm:py-4 md:px-[49px] md:py-[22.5px]"> | ||
| 주섬 시작하기 | ||
| </button> | ||
| </div> | ||
| <div className="mt-[20px] h-[300px] w-[163px] rounded-[20px] bg-white sm:w-full sm:max-w-[582px] md:ml-auto md:mr-0 md:mt-0 md:h-[343px] md:rounded-b-none"></div> | ||
| </Section> | ||
| ); | ||
| }; |
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,126 @@ | ||
| import { Section, SectionRow } from "../ui/common"; | ||
| import classnames from "classnames"; | ||
| import { Swiper, SwiperSlide, SwiperClass } from "swiper/react"; | ||
| import { Navigation } from "swiper/modules"; | ||
| import ArrowLeftIconImage from "@/assets/images/icon-swiper-arrow-left.svg"; | ||
| import ArrowRightIconImage from "@/assets/images/icon-swiper-arrow-right.svg"; | ||
| import "swiper/css"; | ||
| import { useState } from "react"; | ||
| import { Breakpoint, useBreakpoint } from "@/shared/hook/useBreakpoint"; | ||
|
|
||
| const USAGE_ITEMS = [ | ||
| { | ||
| tag: "쉬운 확인", | ||
| title: "모바일에서 저장하고\nPC에서 확인하세요", | ||
| description: | ||
| "어느 기기에서나 편하게 확인해보세요! 스마트폰, 태블릿, PC에서 저장해뒀던 콘텐츠를 다시 열어볼 수 있어요", | ||
| }, | ||
| { | ||
| tag: "어디서든 확인", | ||
| title: "모바일에서 저장하고\nPC에서 확인하세요", | ||
| description: | ||
| "어느 기기에서나 편하게 확인해보세요! 스마트폰, 태블릿, PC에서 저장해뒀던 콘텐츠를 다시 열어볼 수 있어요", | ||
| }, | ||
| { | ||
| tag: "나만의 폴더", | ||
| title: "모바일에서 저장하고\nPC에서 확인하세요", | ||
| description: | ||
| "어느 기기에서나 편하게 확인해보세요! 스마트폰, 태블릿, PC에서 저장해뒀던 콘텐츠를 다시 열어볼 수 있어요", | ||
| }, | ||
| { | ||
| tag: "잊지않게 알림", | ||
| title: "모바일에서 저장하고\nPC에서 확인하세요", | ||
| description: | ||
| "어느 기기에서나 편하게 확인해보세요! 스마트폰, 태블릿, PC에서 저장해뒀던 콘텐츠를 다시 열어볼 수 있어요", | ||
| }, | ||
| { | ||
| tag: "태그로 구분", | ||
| title: "모바일에서 저장하고\nPC에서 확인하세요", | ||
| description: | ||
| "어느 기기에서나 편하게 확인해보세요! 스마트폰, 태블릿, PC에서 저장해뒀던 콘텐츠를 다시 열어볼 수 있어요", | ||
| }, | ||
| ] as const; | ||
|
|
||
| export const UsageSection = () => { | ||
| const [swiper, setSwiper] = useState<SwiperClass | null>(null); | ||
| const [activeIndex, setActiveIndex] = useState(0); | ||
| const breakpoint = useBreakpoint(); | ||
| return ( | ||
| <Section className="flex flex-col items-start bg-white"> | ||
| <SectionRow> | ||
| <h1 className="text-start md:text-start"> | ||
| <span className="text-black md:mb-[12px] md:inline-block"> | ||
| 한눈에 살펴보는 | ||
| </span> | ||
| <br /> | ||
| <span className="text-primary-500">주섬 사용법</span> | ||
| </h1> | ||
| <ul> | ||
| {USAGE_ITEMS.map((item, index) => { | ||
| const active = index === activeIndex; | ||
| return ( | ||
| <li | ||
| key={item.tag} | ||
| className={classnames( | ||
| active | ||
| ? "bg-primary-500 text-white" | ||
| : "bg-gray-200 text-gray-700", | ||
| "mb-3 mr-3 inline-block rounded-[50px] px-3 py-2 sm:mb-6 sm:mr-6 sm:px-5 sm:py-3 ", | ||
| )} | ||
| > | ||
| <button onClick={() => swiper?.slideTo(index)}> | ||
| {item.tag} | ||
| </button> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </SectionRow> | ||
| <div className="w-full"> | ||
| <Swiper | ||
| modules={[Navigation]} | ||
| spaceBetween={0} | ||
| allowSlideNext | ||
| slidesPerView={ | ||
| { | ||
| [Breakpoint.BASE]: 1.2, | ||
| [Breakpoint.SM]: 1.9, | ||
| [Breakpoint.MD]: 1, | ||
| }[breakpoint] | ||
| } | ||
| navigation={{ | ||
| nextEl: ".slide-next", | ||
| prevEl: ".slide-prev", | ||
| }} | ||
| centeredSlides | ||
| onSwiper={setSwiper} | ||
| onSlideChangeTransitionStart={(swiper) => { | ||
| setActiveIndex(swiper.activeIndex); | ||
| }} | ||
| > | ||
| {USAGE_ITEMS.map((item) => { | ||
| return ( | ||
| <SwiperSlide> | ||
| <div className="px-[10px] md:m-auto md:flex md:w-[1080px]"> | ||
| <button className="slide-prev mr-[20px] hidden md:block"> | ||
| <img src={ArrowLeftIconImage} alt="prev" /> | ||
| </button> | ||
| <div className="m-auto flex w-full flex-col rounded-[24px] bg-gray-200 px-5 pt-6 sm:w-[400px] sm:p-[30px] md:flex md:w-full md:flex-row"> | ||
| <h3>{item.title}</h3> | ||
| <p>{item.description}</p> | ||
| <div className="mb-0 mt-auto flex w-full justify-center sm:h-full"> | ||
| <div className="h-[274px] w-[181px] rounded-t-[20px] bg-white sm:size-full sm:rounded-b-[20px]"></div> | ||
| </div> | ||
| </div> | ||
| <button className="slide-next ml-[20px] hidden md:block"> | ||
| <img src={ArrowRightIconImage} /> | ||
| </button> | ||
| </div> | ||
| </SwiperSlide> | ||
| ); | ||
| })} | ||
| </Swiper> | ||
| </div> | ||
| </Section> | ||
| ); | ||
| }; |
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,19 @@ | ||
| import { PropsWithChildren } from "react"; | ||
| import { cn } from "@/shared/utils/cn"; | ||
|
|
||
| export const Section = ({ | ||
| children, | ||
| className, | ||
| }: PropsWithChildren & { | ||
| className?: string; | ||
| }) => { | ||
| return ( | ||
| <section className={cn(`py-[60px] sm:py-[100px] md:py-[80px]`, className)}> | ||
| {children} | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export const SectionRow = ({ children }: PropsWithChildren) => { | ||
| return <div className="w-full px-6 sm:px-20">{children}</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
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.