-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #110 from jjeongee/master
feat: 메인페이지 디자인, 2번쨰 섹션
- Loading branch information
Showing
5 changed files
with
194 additions
and
116 deletions.
There are no files selected for viewing
Binary file added
BIN
+902 KB
src/main/frontend/public/asset/png/mainpage/ipad_generatecard_mockup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| "use client"; | ||
| import '../../app/globals.css'; | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| export default function BodySectionComponents() { | ||
| const [currentPage, setCurrentPage] = useState(2); // 현재 페이지 상태 | ||
| const pages = 4; // 페이지 개수 | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = (event: WheelEvent) => { | ||
| if (event.deltaY > 0 && currentPage < pages - 1) { | ||
| // 스크롤 다운 | ||
| setCurrentPage((prev) => prev + 1); | ||
| } else if (event.deltaY < 0 && currentPage > 0) { | ||
| // 스크롤 업 | ||
| setCurrentPage((prev) => prev - 1); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("wheel", handleScroll, {passive: false}); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("wheel", handleScroll); | ||
| }; | ||
| }, [currentPage]); | ||
|
|
||
| useEffect(() => { | ||
| window.scrollTo({ | ||
| top: currentPage * window.innerHeight, | ||
| behavior: "smooth", | ||
| }); | ||
| }, [currentPage]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| id="second_background_color" | ||
| className="h-screen w-full px-10 justify-center items-center" | ||
| style={{position: "relative", scrollSnapAlign: "start"}}> | ||
|
|
||
| <div id="sub_txt_title" className="py-3"> | ||
| <p className="font-gmarketsansBold text-xl text-category-backend py-4">직무별 로드맵</p> | ||
| <p className="font-gmarketsansMedium text-3xl">뭘 해야할지 모르겠다면,</p> | ||
| <p className="font-gmarketsansMedium text-3xl">로드맵 따라서 그냥 시작해보기</p> | ||
|
|
||
| </div> | ||
| <div className="flex"> | ||
| <img src="/asset/png/mainpage/ipad_roadmap_mockup.png" className="w-1/2 justify-center"/> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">pathFinder에서 개발자의 역량을 확인해보세요.</p> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">프론트, 백, 보안, 앱, 데이터까지</p> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">각 분야에서 뭘 하면 되는지 한눈에 볼 수 있어요</p> | ||
|
|
||
| </div> | ||
| <div className="flex"> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">내가 했던 프로젝트를 입력해보세요.</p> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">막막한 포트폴리오 작성,</p> | ||
| <p className="font-gmarketsansMedium text-2xl pb-2">AI가 함께 합니다.</p> | ||
| <img src="/asset/png/mainpage/ipad_generatecard_mockup.png" className="w-2/3"/> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </> | ||
| ); | ||
| } |
120 changes: 120 additions & 0 deletions
120
src/main/frontend/src/app/main/HeadSectionComponents.tsx
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,120 @@ | ||
| "use client"; | ||
| import '../../app/globals.css'; | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| export default function HeadSectionComponents() { | ||
| const [currentPage, setCurrentPage] = useState(0); // 현재 페이지 상태 | ||
| const pages = 2; // 페이지 개수 | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = (event: WheelEvent) => { | ||
| if (event.deltaY > 0 && currentPage < pages - 1) { | ||
| // 스크롤 다운 | ||
| setCurrentPage((prev) => prev + 1); | ||
| } else if (event.deltaY < 0 && currentPage > 0) { | ||
| // 스크롤 업 | ||
| setCurrentPage((prev) => prev - 1); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("wheel", handleScroll, { passive: false }); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("wheel", handleScroll); | ||
| }; | ||
| }, [currentPage]); | ||
|
|
||
| useEffect(() => { | ||
| window.scrollTo({ | ||
| top: currentPage * window.innerHeight, | ||
| behavior: "smooth", | ||
| }); | ||
| }, [currentPage]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| id="background_color" | ||
| className="bg-category-frontend/50 h-screen w-full px-10 justify-center items-center" | ||
| style={{ position: "relative", scrollSnapAlign: "start" }} | ||
| > | ||
| <div id="text_container" className="justify-items-center text-center px-10"> | ||
| <h1 className="font-extrabold font-gmarketsansBold text-5xl py-20">포트폴리오에 개성을 더하다</h1> | ||
| </div> | ||
| <div id="img_container" className="flex px-10 items-center justify-center"> | ||
| <img | ||
| src="/asset/png/mainpage/3d_laptop-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Laptop" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_cloudserver-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Cloud Server" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_watch-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Watch" | ||
| /> | ||
| </div> | ||
| <div id="image_container" className="flex px-10 justify-center items-center"> | ||
| <img | ||
| src="/asset/png/mainpage/3d_figma-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Figma" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_window-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Window" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/cd_compass-removebg-preview.png" | ||
| className="w-48" | ||
| alt="CD Compass" | ||
| /> | ||
| </div> | ||
| <div className="flex justify-center mt-6"> | ||
| <img | ||
| src="/asset/png/icon/icon_angle_bottom.png" | ||
| className="arrow-animation" | ||
| alt="Bouncing Arrow" | ||
| /> | ||
| </div> | ||
| <style> | ||
| {` | ||
| @keyframes bounce { | ||
| 0%, 100% { | ||
| transform: translateY(-25%); | ||
| animation-timing-function: cubic-bezier(0.8, 0, 1, 1); | ||
| } | ||
| 50% { | ||
| transform: translateY(0); | ||
| animation-timing-function: cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
| } | ||
| .arrow-animation { | ||
| animation: bounce 1s infinite; | ||
| display: inline-block; | ||
| } | ||
| `} | ||
| </style> | ||
| </div> | ||
|
|
||
| <div | ||
| id="rough_intro" | ||
| className="bg-[#f9fafb] h-screen w-full flex flex-col font-bold text-4xl items-center justify-center" | ||
| style={{position: "relative", scrollSnapAlign: "start"}} | ||
| > | ||
| <p className="pb-4 font-gmarketsansMedium"> | ||
| 여러분의 커리어 여정을 함께하는{" "} | ||
| <span className="text-category-application">PathFinder</span>입니다. | ||
| </p> | ||
| <p className="pb-4 font-gmarketsansMedium">자신의 희망 직무에 맞춘 스킬 로드맵과 AI가 생성해주는 경험카드를 통해,</p> | ||
| <p className="pb-4 font-gmarketsansMedium">맞춤형 포트폴리오를 제공합니다.</p> | ||
| </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,120 +1,13 @@ | ||
| "use client"; | ||
| import '../../app/globals.css'; | ||
| import React, { useState, useEffect } from "react"; | ||
|
|
||
| export default function Mainpage() { | ||
| const [currentPage, setCurrentPage] = useState(0); // 현재 페이지 상태 | ||
| const pages = 2; // 페이지 개수 | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = (event: WheelEvent) => { | ||
| if (event.deltaY > 0 && currentPage < pages - 1) { | ||
| // 스크롤 다운 | ||
| setCurrentPage((prev) => prev + 1); | ||
| } else if (event.deltaY < 0 && currentPage > 0) { | ||
| // 스크롤 업 | ||
| setCurrentPage((prev) => prev - 1); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("wheel", handleScroll, { passive: false }); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("wheel", handleScroll); | ||
| }; | ||
| }, [currentPage]); | ||
|
|
||
| useEffect(() => { | ||
| window.scrollTo({ | ||
| top: currentPage * window.innerHeight, | ||
| behavior: "smooth", | ||
| }); | ||
| }, [currentPage]); | ||
| import React from "react"; | ||
| import HeadSectionComponents from "@/app/main/HeadSectionComponents"; | ||
| import BodySectionComponents from "@/app/main/BodySectionComponents"; | ||
|
|
||
| export default function MainPage() { | ||
| return ( | ||
| <> | ||
| <div | ||
| id="background_color" | ||
| className="bg-category-frontend/50 h-screen w-full px-10 justify-center items-center" | ||
| style={{ position: "relative", scrollSnapAlign: "start" }} | ||
| > | ||
| <div id="text_container" className="justify-items-center text-center px-10"> | ||
| <h1 className="font-extrabold font-gmarketsansBold text-5xl py-20">포트폴리오에 개성을 더하다</h1> | ||
| </div> | ||
| <div id="img_container" className="flex px-10 items-center justify-center"> | ||
| <img | ||
| src="/asset/png/mainpage/3d_laptop-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Laptop" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_cloudserver-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Cloud Server" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_watch-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Watch" | ||
| /> | ||
| </div> | ||
| <div id="image_container" className="flex px-10 justify-center items-center"> | ||
| <img | ||
| src="/asset/png/mainpage/3d_figma-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Figma" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/3d_window-removebg-preview.png" | ||
| className="w-48" | ||
| alt="3D Window" | ||
| /> | ||
| <img | ||
| src="/asset/png/mainpage/cd_compass-removebg-preview.png" | ||
| className="w-48" | ||
| alt="CD Compass" | ||
| /> | ||
| </div> | ||
| <div className="flex justify-center mt-6"> | ||
| <img | ||
| src="/asset/png/icon/icon_angle_bottom.png" | ||
| className="arrow-animation" | ||
| alt="Bouncing Arrow" | ||
| /> | ||
| </div> | ||
| <style> | ||
| {` | ||
| @keyframes bounce { | ||
| 0%, 100% { | ||
| transform: translateY(-25%); | ||
| animation-timing-function: cubic-bezier(0.8, 0, 1, 1); | ||
| } | ||
| 50% { | ||
| transform: translateY(0); | ||
| animation-timing-function: cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
| } | ||
| .arrow-animation { | ||
| animation: bounce 1s infinite; | ||
| display: inline-block; | ||
| } | ||
| `} | ||
| </style> | ||
| </div> | ||
|
|
||
| <div | ||
| id="rough_intro" | ||
| className="bg-[#f9fafb] h-screen w-full flex flex-col font-bold text-4xl items-center justify-center" | ||
| style={{position: "relative", scrollSnapAlign: "start"}} | ||
| > | ||
| <p className="pb-4 font-gmarketsansMedium"> | ||
| 여러분의 커리어 여정을 함께하는{" "} | ||
| <span className="text-category-application">PathFinder</span>입니다. | ||
| </p> | ||
| <p className="pb-4 font-gmarketsansMedium">자신의 희망 직무에 맞춘 스킬 로드맵과 AI가 생성해주는 경험카드를 통해,</p> | ||
| <p className="pb-4 font-gmarketsansMedium">맞춤형 포트폴리오를 제공합니다.</p> | ||
| </div> | ||
| </> | ||
| <main> | ||
| <HeadSectionComponents /> | ||
| <BodySectionComponents /> | ||
| </main> | ||
| ); | ||
| } | ||
| } |