diff --git a/README.md b/README.md index a99f4be..932eaf4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ -# boost-docs -대학생을 위한 팀 프로젝트 매니저 Boost 개발 문서 사이트 \ No newline at end of file +
+

⚒️ 작업 중 .. ⚒️

+
+ +
diff --git a/index.html b/index.html index 095fbaf..a9c3fcd 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index 48245ec..f0f6996 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.555.0", + "motion": "^12.23.25", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.9.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a66764b..8c5f64d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,6 +40,9 @@ importers: lucide-react: specifier: ^0.555.0 version: 0.555.0(react@19.2.0) + motion: + specifier: ^12.23.25 + version: 12.23.25(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -2086,6 +2089,23 @@ packages: integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==, } + framer-motion@12.23.25: + resolution: + { + integrity: sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==, + } + peerDependencies: + "@emotion/is-prop-valid": "*" + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/is-prop-valid": + optional: true + react: + optional: true + react-dom: + optional: true + fsevents@2.3.3: resolution: { @@ -2492,6 +2512,35 @@ packages: } engines: { node: ">=16 || 14 >=14.17" } + motion-dom@12.23.23: + resolution: + { + integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==, + } + + motion-utils@12.23.6: + resolution: + { + integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==, + } + + motion@12.23.25: + resolution: + { + integrity: sha512-Fk5Y1kcgxYiTYOUjmwfXQAP7tP+iGqw/on1UID9WEL/6KpzxPr9jY2169OsjgZvXJdpraKXy0orkjaCVIl5fgQ==, + } + peerDependencies: + "@emotion/is-prop-valid": "*" + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/is-prop-valid": + optional: true + react: + optional: true + react-dom: + optional: true + ms@2.1.3: resolution: { @@ -4308,6 +4357,15 @@ snapshots: fraction.js@5.3.4: {} + framer-motion@12.23.25(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + motion-dom: 12.23.23 + motion-utils: 12.23.6 + tslib: 2.8.1 + optionalDependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + fsevents@2.3.3: optional: true @@ -4500,6 +4558,20 @@ snapshots: dependencies: brace-expansion: 2.0.2 + motion-dom@12.23.23: + dependencies: + motion-utils: 12.23.6 + + motion-utils@12.23.6: {} + + motion@12.23.25(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + framer-motion: 12.23.25(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + tslib: 2.8.1 + optionalDependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + ms@2.1.3: {} nano-spawn@2.0.0: {} diff --git a/src/features/main/components/MainAboutDocs.tsx b/src/features/main/components/MainAboutDocs.tsx new file mode 100644 index 0000000..ba2f474 --- /dev/null +++ b/src/features/main/components/MainAboutDocs.tsx @@ -0,0 +1,69 @@ +import { motion } from "motion/react"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, +} from "@/shared/components/shadcn/card"; +import { contentSections } from "@/features/main/constants/mainConstants"; + +const container = { + hidden: {}, + show: { + transition: { + staggerChildren: 0.2, + }, + }, +}; + +const card = { + hidden: { opacity: 0, y: 20 }, + show: { opacity: 1, y: 0, transition: { duration: 0.8 } }, +}; + +const MainAboutDocs = () => { + return ( +
+
+

+ 이 문서가 담고 있는 내용 +

+ + + {contentSections.map((item) => { + const Icon = item.icon; + return ( + + + +
+ +
+ + {item.title} + + + {item.description} + + + + + ); + })} + +
+
+ ); +}; + +export default MainAboutDocs; diff --git a/src/features/main/components/MainFooter.tsx b/src/features/main/components/MainFooter.tsx new file mode 100644 index 0000000..ec8b35a --- /dev/null +++ b/src/features/main/components/MainFooter.tsx @@ -0,0 +1,25 @@ +const MainFooter = () => { + return ( + + ); +}; + +export default MainFooter; diff --git a/src/features/main/components/MainHero.tsx b/src/features/main/components/MainHero.tsx new file mode 100644 index 0000000..a696aca --- /dev/null +++ b/src/features/main/components/MainHero.tsx @@ -0,0 +1,43 @@ +import { Button } from "@/shared/components/shadcn/button"; +import { useNavigate } from "react-router-dom"; +import { ROUTE_PATH } from "@/app/routes/routeConstants"; + +const MainHero = () => { + const navigate = useNavigate(); + const goToOverview = () => navigate(ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW); + + return ( +
+
+

+ Boost Development Docs +

+ +

+ Boost 프로젝트 개발 문서에 오신 것을 환영합니다. +
현재 디자인은 임시이며, 더 예쁘고 완성도 있게 개선될 + 예정입니다! +

+ +
+

+ 시작하려면 아래 버튼을 클릭하세요. +

+ +
+
+
+ ); +}; + +export default MainHero; diff --git a/src/features/main/components/MainNavigation.tsx b/src/features/main/components/MainNavigation.tsx new file mode 100644 index 0000000..d3e11f7 --- /dev/null +++ b/src/features/main/components/MainNavigation.tsx @@ -0,0 +1,94 @@ +import { Button } from "@/shared/components/shadcn/button"; +import { Menu, X } from "lucide-react"; +import { useState } from "react"; + +const navItems = [ + { label: "Home", href: "#home" }, + { label: "About Docs", href: "#about-docs" }, + // { label: "Quick Search", href: "#quick-search" }, + // { label: "Help", href: "#help" }, +]; + +const MainNavigation = () => { + const [isOpen, setIsOpen] = useState(false); + + const handleNavClick = (href: string) => { + const el = document.querySelector(href); + if (el) { + el.scrollIntoView({ behavior: "smooth" }); + } + setIsOpen(false); + }; + + return ( + + ); +}; + +export default MainNavigation; diff --git a/src/features/main/constants/mainConstants.ts b/src/features/main/constants/mainConstants.ts new file mode 100644 index 0000000..e8f005d --- /dev/null +++ b/src/features/main/constants/mainConstants.ts @@ -0,0 +1,45 @@ +import { + Book, + BookOpen, + Settings, + LaptopMinimal, + Server, + CloudUpload, +} from "lucide-react"; + +export const contentSections = [ + { + title: "프로젝트 개요", + icon: Book, + description: "프로젝트의 기본 목적, 구조, 팀 구성 및 리소스를 소개합니다.", + }, + { + title: "온보딩 가이드", + icon: BookOpen, + description: + "환경 세팅부터 실행, 기본 구조까지 전체 온보딩 절차를 안내합니다.", + }, + { + title: "개발 가이드", + icon: Settings, + description: + "작업 흐름, Git 규칙, 코드 리뷰 기준 등 개발팀 운영 기준을 담고 있습니다.", + }, + { + title: "프론트엔드 문서", + icon: LaptopMinimal, + description: + "FE 설계, 기술 스택 선정, 디자인 시스템 및 주요 이슈 해결 과정을 제공합니다.", + }, + { + title: "백엔드 문서", + icon: Server, + description: + "백엔드 아키텍처, ERD, 개발 중 발생한 주요 이슈 해결 과정을 제공합니다.", + }, + { + title: "배포 프로세스", + icon: CloudUpload, + description: "CI/CD 기반의 자동 배포 구조 및 배포 환경 구성을 안내합니다.", + }, +]; diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 74c10a5..510752c 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,25 +1,15 @@ -import { useNavigate } from "react-router-dom"; -import { ROUTE_PATH } from "@/app/routes/routeConstants"; -import { Button } from "@/shared/components/shadcn/button"; +import MainNavigation from "@/features/main/components/MainNavigation"; +import MainHero from "@/features/main/components/MainHero"; +import MainAboutDocs from "@/features/main/components/MainAboutDocs"; +import MainFooter from "@/features/main/components/MainFooter"; const MainPage = () => { - const navigate = useNavigate(); - - const goToOverview = () => { - navigate(ROUTE_PATH.OVERVIEW_PROJECT_OVERVIEW); - }; - return ( -
-

Welcome to Boost Development Docs

-

디자인은 임시 구현입니다. 수정될 예정!

- -

- 시작하려면 아래 버튼을 클릭하세요. -

- +
+ + + +
); }; diff --git a/src/shared/components/shadcn/card.tsx b/src/shared/components/shadcn/card.tsx new file mode 100644 index 0000000..7703fdc --- /dev/null +++ b/src/shared/components/shadcn/card.tsx @@ -0,0 +1,92 @@ +import * as React from "react" + +import { cn } from "@/shared/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +}