diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e8ac2c8..4262f14 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -16,8 +16,17 @@ module.exports = { "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", + "plugin:tailwindcss/recommended", ], parser: "@typescript-eslint/parser", + rules: { + "tailwindcss/no-custom-classname": [ + "error", + { + whitelist: ["slide-prev", "slide-next"], + }, + ], + }, }, { files: ["*.html"], diff --git a/package.json b/package.json index 9a8a63e..57b7f9c 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,12 @@ "dependencies": { "@tanstack/react-query": "^5.24.8", "classnames": "^2.5.1", + "clsx": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1", - "swiper": "^11.0.7" + "swiper": "^11.0.7", + "tailwind-merge": "^2.2.2" }, "devDependencies": { "@html-eslint/eslint-plugin": "^0.23.1", @@ -36,6 +38,7 @@ "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", + "eslint-plugin-tailwindcss": "^3.15.1", "jest": "^29.7.0", "postcss": "^8.4.35", "prettier": "^3.2.5", diff --git a/src/pages/root/sections/info-section.tsx b/src/pages/root/sections/info-section.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/root/sections/start-section.tsx b/src/pages/root/sections/start-section.tsx new file mode 100644 index 0000000..8317203 --- /dev/null +++ b/src/pages/root/sections/start-section.tsx @@ -0,0 +1,21 @@ +import { Section } from "../ui/common"; + +export const StartSection = () => { + return ( +
+
+

+ + 간편한 링크 아카이빙 + +
+ 지금 바로 경험하세요! +

+ +
+
+
+ ); +}; diff --git a/src/pages/root/sections/usage-section.tsx b/src/pages/root/sections/usage-section.tsx new file mode 100644 index 0000000..16955a4 --- /dev/null +++ b/src/pages/root/sections/usage-section.tsx @@ -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(null); + const [activeIndex, setActiveIndex] = useState(0); + const breakpoint = useBreakpoint(); + return ( +
+ +

+ + 한눈에 살펴보는 + +
+ 주섬 사용법 +

+
    + {USAGE_ITEMS.map((item, index) => { + const active = index === activeIndex; + return ( +
  • + +
    • + ); + })} +
+ +
+ { + setActiveIndex(swiper.activeIndex); + }} + > + {USAGE_ITEMS.map((item) => { + return ( + +
+ +
+

{item.title}

+

{item.description}

+
+
+
+
+ +
+ + ); + })} + +
+
+ ); +}; diff --git a/src/pages/root/ui/common.tsx b/src/pages/root/ui/common.tsx new file mode 100644 index 0000000..c851031 --- /dev/null +++ b/src/pages/root/ui/common.tsx @@ -0,0 +1,19 @@ +import { PropsWithChildren } from "react"; +import { cn } from "@/shared/utils/cn"; + +export const Section = ({ + children, + className, +}: PropsWithChildren & { + className?: string; +}) => { + return ( +
+ {children} +
+ ); +}; + +export const SectionRow = ({ children }: PropsWithChildren) => { + return
{children}
; +}; diff --git a/src/pages/root/ui/header.tsx b/src/pages/root/ui/header.tsx index 8f11534..dce146a 100644 --- a/src/pages/root/ui/header.tsx +++ b/src/pages/root/ui/header.tsx @@ -1,12 +1,23 @@ import { Logo } from "@/shared/ui/logo"; import cn from "classnames"; -import { PropsWithChildren, useEffect } from "react"; +import { useEffect } from "react"; import styles from "./header.module.css"; import { useDisclosure } from "@/shared/hook/useDisclosure"; -import { NavMenu } from "./nav-menu"; import { createPortal } from "react-dom"; import { Breakpoint, useBreakpoint } from "@/shared/hook/useBreakpoint"; +const NAV_ITEMS = [ + { + title: "문의하기", + }, + { + title: "앱 다운로드", + }, + { + title: "주섬 시작하기", + }, +]; + export const Header = () => { const { isOpen, toggle, close } = useDisclosure(); const breakpoint = useBreakpoint(); @@ -22,12 +33,10 @@ export const Header = () => { }, [breakpoint, close]); return ( -
-
+
+
-

- Joosum -

+

Joosum

@@ -65,29 +68,18 @@ export const Header = () => { isOpen ? "opacity-100" : "opacity-0", )} > - +
    + {NAV_ITEMS.map((item) => { + return ( +
  • + {item.title} +
    • + ); + })} +
, document.body, )}
); }; - -interface NavLinkProps extends PropsWithChildren { - className?: string; - href?: string; -} - -const NavLink = ({ className, children, href }: NavLinkProps) => { - return ( - - {children} - - ); -}; diff --git a/src/pages/root/ui/nav-menu.tsx b/src/pages/root/ui/nav-menu.tsx deleted file mode 100644 index 87ec88e..0000000 --- a/src/pages/root/ui/nav-menu.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export const NavMenu = () => { - return ( - - ); -}; diff --git a/src/pages/root/ui/page.tsx b/src/pages/root/ui/page.tsx index ff76ae1..9110973 100644 --- a/src/pages/root/ui/page.tsx +++ b/src/pages/root/ui/page.tsx @@ -1,58 +1,28 @@ -import { Button } from "@/shared/ui/button"; import { Header } from "./header"; import { Section } from "./section"; -import { UsageSwiper } from "./usage-swiper"; import { ReviewSwiper } from "./review-swiper"; import { Footer } from "./footer"; import DownloadIosImage from "@/assets/images/download-ios.svg"; import DownloadAosImage from "@/assets/images/download-aos.svg"; +import { StartSection } from "../sections/start-section"; +import { UsageSection } from "../sections/usage-section"; export const Page = () => { return (
-
-

- - 간편한 링크 아카이빙 - -
- - 지금 바로 경험하세요! - -

- -
- 모바일 화면 -
-
-
- - 한 눈에 살펴보는 -
- - 주섬 사용법 - - - -
+ +
- + 흩어진 정보들 모두
- - 한 곳에서 봐요 - + 한 곳에서 봐요
{[ @@ -65,7 +35,7 @@ export const Page = () => { ].map((keyword) => ( {keyword} @@ -74,25 +44,23 @@ export const Page = () => {
- + 솔직하고 생생한
- - 사용자 리뷰 - + 사용자 리뷰
- + 어디서든 링크를 저장하고
확인해보세요.

PC, 태블릿, 모바일 기기 등 하나의 계정으로 연동해서 링크를 관리해보세요.

-
+
@@ -100,8 +68,22 @@ export const Page = () => {
-
-
+
+
+
+
+
+ +
+
+
+ +
+