@@ -41,7 +41,7 @@ export default function SignupPage() {
{/* 사장님 회원가입 카드 */}
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 97464b5b..ce27314b 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -6,49 +6,85 @@ import Image from "next/image";
import Lenis from "@studio-freight/lenis";
import { useMediaQuery } from "react-responsive";
import TypewriterText from "../components/animation/TypewriterText";
+import { IoIosArrowDown } from "react-icons/io";
+import LeafAnimation from "../components/animation/LeafAnimation";
+import { Player } from "@lottiefiles/react-lottie-player";
+// 버튼 타입 정의
+interface ButtonType {
+ text: string;
+ href: string;
+ primary: boolean;
+ icon?: string; // 선택적 아이콘
+}
+
+// slides 배열 수정
const slides = [
{
id: 1,
title: "쉽고 빨라요",
content: "1분만에 알바폼을 만들어 보세요!\n링크를 복사하여 어디서든지 사용하세요.",
- image: "/images/land/s2.jpg",
+ image: "/images/land/s2.svg",
},
{
id: 2,
title: "한 곳에서 쉽게 관리하세요",
content: "워크폼 관리 페이지에서 지원 현황을 확인하고\n지원자별 상태를 관리할 수 있습니다.",
- image: "/images/land/s3.jpg",
+ image: "/images/land/s3.png",
},
{
id: 3,
title: "쉽고 빠르게 지원하세요",
content: "간단한 정보만 입력해도\n알바 지원이 가능합니다.",
- image: "/images/land/s4.jpg",
+ image: "/images/land/s4.png",
},
{
id: 4,
title: "workroot에 가입하세요",
content: "오늘의 선택이 내일의 열매가 됩니다.",
- image: "/images/land/step1.jpg",
+ image: "/images/land/step1.png",
},
{
id: 5,
title: "지원자 이용 방법",
content: "언제든 다시 볼 수 있게\n공고를 스크랩하세요",
- image: "/images/land/step2-2.jpg",
+ image: "/images/land/step2-2.png",
blackAreaTitle: "사장님 이용 방법",
- blackAreaContent: "워크채널 우의 [폼 만들기] 버튼을 클릭하고\n인재 채용을 시작하세요",
- blackAreaImage: "/images/land/step2-1.jpg",
+ blackAreaContent: "워크채널 우측의 [폼 만들기] 버튼을 클릭하고\n인재 채용을 시작하세요",
+ blackAreaImage: "/images/land/step2-1.png",
},
{
id: 6,
title: "",
- content: "마이페이지에서 스크랩한 공고를 분석하고\n지원 계획을 세우세요",
- image: "/images/land/step3-2.jpg",
+ content: "마이페이지에서 스크랩한 공고를\n분석하고 지원 계획을 세우세요",
+ image: "/images/land/step3-2.png",
blackAreaTitle: "",
blackAreaContent: "내 워크폼에서 작성한 공고를\n손쉽게 수정하고 삭제할 수 있어요",
- blackAreaImage: "/images/land/step3-1.jpg",
+ blackAreaImage: "/images/land/step3-1.png",
+ },
+ {
+ id: 7,
+ title: "쉽고 빨라요",
+ content: "1분만에 알바폼을 만들어 보세요!\n링크를 복사하여 어디서든지 사용하세요.",
+ image: "/images/land/s2.png",
+ },
+ {
+ id: 9,
+ title: "지금 바로 시작하세요",
+ content: "더 나은 채용의 시작,\nWorkroot가 함께합니다",
+ image: "/images/land/start.png",
+ buttons: [
+ {
+ text: "채용 공고 구경하기",
+ href: "/work-list",
+ primary: true,
+ },
+ {
+ text: "서비스 더 알아보기",
+ href: "/signup",
+ primary: false,
+ },
+ ],
},
];
@@ -169,9 +205,7 @@ export default function LandingPage() {
ref={containerRef}
className={`relative h-[400vh] min-h-[768px] overflow-hidden ${isLargeScreen ? "" : "flex flex-col"}`}
>
-
+
+ {/* 내용 섹션에 새로운 스타일 적용 */}
+ {/* 이미지 컨테이너에 새로운 효과 추가 */}
{currentSlide === 0 ? (
) : currentSlide === 4 || currentSlide === 5 ? (
+ {/* 이미지/애니메이션 섹션 */}
+
+
+ {currentSlide === 5 ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+ ) : currentSlide === 7 ? (
+
-
-
-
-
+
+ {slides[currentSlide].title}
+
+
+ {slides[currentSlide].content}
+
+
+
+ {/* 버튼 그룹 */}
+
-
+ {slides[currentSlide].buttons?.map((button: ButtonType, index) => (
+
+ {button.icon && {button.icon}}
+
+ {button.text}
+
+
+
+ ))}
+
+
+ {/* 장식 요소 */}
+
-
-
-
) : (
)}
+
+ {/* 스크롤 인디케이터 개선 */}
{currentSlide === 0 && (
-
- scroll
+
+
+ scroll
+
)}
+
+ {/* 콘텐츠 섹션에 새로운 디자인 요소 추가 */}
- {currentSlide > 0 && (
+ {/* 초록색 영역 - currentSlide가 0이나 7이 아닐 때만 표시 */}
+ {currentSlide !== 0 && currentSlide !== 7 && currentSlide !== 9 && (
-
-
-
+ {/* 이미지/애니메이션 섹션 */}
-
-
+
+ {currentSlide === 1 ? (
+
+ ) : currentSlide === 2 ? (
+
+ ) : currentSlide === 5 ? (
+
+ ) : (
+
+
+
+ )}
-
-
-
+
+ {/* 텍스트 섹션 */}
+
+
+
+ {slides[currentSlide].title}
+
+
+
+
+
+
+
+
+
+ {/* 텍스트 배경 효과 */}
+
+
+
+ {/* 장식적 요소 유지 */}
+
+
@@ -359,37 +579,42 @@ export default function LandingPage() {
+ {/* 네비게이션 도트 선 */}
{currentSlide > 0 && (
{slides.slice(1).map((_, index) => (
- {
- if (!isScrollingRef.current) {
- const targetScroll =
- ((index + 1) / (slides.length - 1)) * (containerRef.current?.scrollHeight || 0);
- lenisRef.current?.scrollTo(targetScroll, {
+
+
+ {
+ const targetSlide = index + 1;
+ const totalSlides = slides.length;
+ const scrollProgress = targetSlide / (totalSlides - 1);
+
+ lenisRef.current?.scrollTo(containerRef.current!.scrollHeight * scrollProgress, {
duration: 1.2,
easing: (t) => t * (2 - t),
});
- }
- }}
- />
+
+ setCurrentSlide(targetSlide);
+ }}
+ />
+
))}
)}
+
)}
diff --git a/src/app/components/animation/LeafAnimation.tsx b/src/app/components/animation/LeafAnimation.tsx
new file mode 100644
index 00000000..8ce58cd4
--- /dev/null
+++ b/src/app/components/animation/LeafAnimation.tsx
@@ -0,0 +1,133 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+// 유틸리티 함수들
+const getLeafSize = (index: number) => {
+ if (index % 3 === 2) {
+ return {
+ height: "17px",
+ width: "23px",
+ beforeTop: "12px",
+ beforeRight: "1px",
+ beforeHeight: "4px",
+ beforeWidth: "4px",
+ afterHeight: "10px",
+ afterWidth: "2px",
+ afterLeft: "8px",
+ afterTop: "1px",
+ };
+ } else if (index % 2 === 1) {
+ return {
+ height: "11px",
+ width: "16px",
+ beforeTop: "7px",
+ beforeRight: "0px",
+ beforeHeight: "3px",
+ beforeWidth: "4px",
+ afterHeight: "6px",
+ afterWidth: "2px",
+ afterLeft: "5px",
+ afterTop: "1px",
+ };
+ }
+ return {
+ height: "23px",
+ width: "30px",
+ beforeTop: "17px",
+ beforeRight: "1px",
+ beforeHeight: "5px",
+ beforeWidth: "7px",
+ afterHeight: "17px",
+ afterWidth: "2px",
+ afterLeft: "12px",
+ afterTop: "0px",
+ };
+};
+
+const getLeafGradient = (index: number) => {
+ if (index % 4 === 1) {
+ return "linear-gradient(to bottom right, #990, #564500)";
+ } else if (index % 2 === 0) {
+ return "linear-gradient(to bottom right, #5e9900, #2b5600)";
+ }
+ return "linear-gradient(to bottom right, #309900, #005600)";
+};
+
+const getLeafDelay = (index: number) => {
+ const delays = [1.9, 3.9, 2.3, 4.4, 5, 3.5, 2.8, 1.5, 3.3, 2.5, 1.2, 4.1, 1, 4.7, 3];
+ return delays[index % delays.length];
+};
+
+const LeafAnimation: React.FC = () => {
+ return (
+
+
+ {[...Array(15)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+ );
+};
+
+export default LeafAnimation;
diff --git a/src/app/components/button/dropdown/FilterDropdown.tsx b/src/app/components/button/dropdown/FilterDropdown.tsx
index 348bbe57..2b0b27a3 100644
--- a/src/app/components/button/dropdown/FilterDropdown.tsx
+++ b/src/app/components/button/dropdown/FilterDropdown.tsx
@@ -82,14 +82,14 @@ const FilterDropdown = ({ options, className = "", onChange, initialValue, readO
}}
disabled={readOnly}
>
-
+
{selectedLabel}
diff --git a/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx b/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx
index 94b36876..b84d9418 100644
--- a/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx
+++ b/src/app/components/button/dropdown/dropdownComponent/DropdownList.tsx
@@ -21,7 +21,7 @@ const DropdownItem = ({
diff --git a/src/app/components/chip/Chip.tsx b/src/app/components/chip/Chip.tsx
index 6dc154e3..a8b8c428 100644
--- a/src/app/components/chip/Chip.tsx
+++ b/src/app/components/chip/Chip.tsx
@@ -21,14 +21,14 @@ const Chip: React.FC = ({
variant,
border,
icon,
- textStyle = "text-sm md:text-base",
+ textStyle = "text-sm md:text-base font-bold",
}: ChipProps) => {
const wrapperStyle = "rounded flex items-center justify-center m-1";
const paddingStyle = icon
? "px-[8px] py-1 md:px-[12px] md:py-1 lg:px-[8px] lg:py-[6px]"
: "px-2 py-1 md:px-2 lg:py-[6px] lg:px-2";
const variantStyle =
- variant === "positive" ? "bg-primary-orange-50 text-primary-orange-300" : "bg-line-100 text-grayscale-200";
+ variant === "positive" ? "bg-primary-blue-60 text-primary-orange-300" : "bg-line-100 text-grayscale-200";
const baseTextStyle =
"text-xs leading-[18px] md:leading-[20px] lg:text-sm lg:leading-[22px] font-medium tracking-tighter whitespace-nowrap";
const borderStyle = border ? "border border-primary-orange-100" : "";
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index 82a55292..6f8554c3 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -20,6 +20,29 @@ export default function Header() {
const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
const router = useRouter();
+ if (pathname === "/") {
+ return (
+
+
+
+ );
+ }
+
// 인증이 필요없는 공개 경로들
const handleLogout = async (e: React.MouseEvent) => {
e.preventDefault();
@@ -52,7 +75,7 @@ export default function Header() {
return (