Projects 페이지 퍼블리싱#9

README.md

@@ -12,6 +12,7 @@
 <img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=next.js&logoColor=white"/>
 <img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"/>
 <img src="https://img.shields.io/badge/tailwind-06B6D4?style=for-the-badge&logo=tailwind-css&logoColor=white"/>
+<img src="https://img.shields.io/badge/motion-000000?style=for-the-badge&logo=framer&logoColor=white"/>
 <img src="https://img.shields.io/badge/zustand-F3DF49?style=for-the-badge&logo=zustand&logoColor=white"/>
 <!-- <img src="https://img.shields.io/badge/TANSTACK QUERY-FF4154?style=for-the-badge&logo=react-query&logoColor=white"/> -->
 

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "motion": "^12.4.2",
     "next": "15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/app/_components/Checkbox/Checkbox.tsx

@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+
+interface CheckboxProps extends Omit<ComponentProps<'input'>, 'size'> {
+  text: string;
+  size: 'sm' | 'lg';
+}
+
+function Checkbox({
+  className,
+  checked,
+  onChange,
+  text,
+  size = 'sm',
+}: CheckboxProps) {
+  const inputVariantBySize = {
+    sm: '',
+    lg: '',
+  };
+  const inputVariantByChecked = {
+    checked: 'bg-primary/90',
+    unchecked: 'bg-primary/25 group-hover:bg-primary/40',
+  };
+  const labelVariant = {
+    sm: 'text-sm',
+    lg: 'text-lg',
+  };
+
+  return (
+    <label className={`group flex cursor-pointer items-center ${className}`}>
+      <input
+        className={`absolute -z-50 opacity-0`}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+      />
+      <div
+        className={`relative mr-2 h-5 w-5 rounded-[4px] ${inputVariantBySize[size]} ${checked ? inputVariantByChecked.checked : inputVariantByChecked.unchecked}`}
+      >
+        {checked && (
+          <span className="absolute left-1 top-1 z-10 h-2 w-3 -rotate-45 border-b-[3px] border-l-[3px] border-white"></span>
+        )}
+      </div>
+      <span className={`${labelVariant[size]}`}>{text}</span>
+    </label>
+  );
+}
+export default Checkbox;

src/components/Header/HeaderNav.tsx → src/app/_components/Header/HeaderNav.tsx

@@ -1,22 +1,23 @@
 'use client';
-import { SECTION_ID } from '@/constants/section';
-import useActiveIndexStore from '@/stores/useActiveSectionIdStore';
+import useActiveIndexStore, {
+  TSectionId,
+} from '@/stores/useActiveSectionIdStore';
 import { capitalize } from '@/utils/util';
 import Link from 'next/link';
 
+const NAV_ITEMS: TSectionId[] = [
+  'intro',
+  'skills',
+  'experiences',
+  'projects',
+  'contact',
+];
+
 function HeaderNav() {
   const activeSectionId = useActiveIndexStore((state) => state.activeSectionId);
 
-  const NAV_ITEMS = [
-    SECTION_ID.intro,
-    SECTION_ID.skills,
-    SECTION_ID.experiences,
-    SECTION_ID.projects,
-    SECTION_ID.contact,
-  ];
-
   return (
-    <nav className="absolute flex w-screen items-center gap-4 bg-gradient-to-b from-white/100 via-white/70 to-white/0 px-4 pb-10 pt-5 font-semibold backdrop-blur-sm max-tablet:pt-4">
+    <nav className="absolute flex w-screen items-center gap-4 bg-gradient-to-b from-white/100 via-white/70 to-white/0 px-4 pb-10 pt-4 font-semibold backdrop-blur-sm max-tablet:pt-4">
       {NAV_ITEMS.map((item) => (
         <Link
           key={item}

src/app/_components/Header/HeaderProgress.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { motion, useScroll } from 'motion/react';
+
+function HeaderProgress() {
+  const { scrollYProgress } = useScroll();
+
+  return (
+    <>
+      <motion.div
+        style={{
+          scaleX: scrollYProgress,
+        }}
+        className="z-10 h-1 origin-left bg-primary2 max-tablet:hidden"
+      ></motion.div>
+      <motion.div
+        style={{
+          scaleY: scrollYProgress,
+        }}
+        className="z-10 w-1 origin-top bg-primary2 tablet:hidden"
+      ></motion.div>
+    </>
+  );
+}
+export default HeaderProgress;

src/app/_components/SlideInView/SlideInView.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { motion } from 'motion/react';
+import { ComponentProps } from 'react';
+
+interface SlideInViewProps {
+  delay?: number;
+}
+
+function SlideInView({
+  children,
+  delay = 0,
+}: SlideInViewProps & ComponentProps<'div'>) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, translateY: 30 }}
+      whileInView={{
+        opacity: 1,
+        translateY: 0,
+        transition: {
+          duration: 0.7,
+          delay,
+        },
+      }}
+      viewport={{ once: true, amount: 0.3 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default SlideInView;

src/app/_data/experience.ts

@@ -0,0 +1,76 @@
+export interface TExperience {
+  title: string;
+  subtitle: string;
+  duration: [Date, Date];
+  description?: string;
+  activities: string[];
+  achievements: string[];
+  links?: { text: string; url: string }[];
+}
+
+export const EXPERIENCE_CONTENTS: TExperience[] = [
+  {
+    title: 'SearcHRight AI',
+    subtitle: '프론트엔드 개발 인턴',
+    duration: [new Date('2024.09'), new Date('2024.11')],
+    description:
+      '서치라이트는 숨어있는 ‘인재’들의 역량을 분석하여 회사에 가장 적합한 후보자를 추천하는 솔루션을 개발하는 스타트업입니다.',
+    activities: ['<b>랜딩 페이지 개발</b>', '블로그 작성 및 업로드'],
+    achievements: [
+      '<b>실무</b> 경험',
+      '<b>초기 스타트업</b> 경험',
+      '<b>HR 도메인</b>에 대한 이해',
+    ],
+    links: [
+      {
+        text: '[포트폴리오] 프로젝트 자세히 보기',
+        url: '/projects/searchright',
+      },
+      {
+        text: '[블로그] 서치라이트 일지',
+        url: 'https://velog.io/@2hanbyeol1/series/%EC%84%9C%EC%B9%98%EB%9D%BC%EC%9D%B4%ED%8A%B8',
+      },
+    ],
+  },
+  {
+    title: '내일배움캠프',
+    subtitle: 'React 5기',
+    duration: [new Date('2024.04'), new Date('2024.08')],
+    activities: [
+      '매일 <b>12시간 집중 학습</b> 및 TIL 작성',
+      '<b>프로젝트 11개</b> 진행 (개인 5개, 팀 6개, 리더 3회)',
+    ],
+    achievements: [
+      '<b>React 주요 개념</b> 습득',
+      '팀원들을 이끌어 <b>프로젝트를 기한 내에 완성</b>하는 능력 기름',
+      '<b>디자이너, 개발자와의 협업 및 소통 능력</b> 향상',
+    ],
+  },
+  {
+    title: '오픈소스 컨트리뷰션 아카데미',
+    subtitle: 'Git 활용 및 React',
+    duration: [new Date('2023.07'), new Date('2023.08')],
+    activities: [
+      '<b>Git, React, React Native 기초 학습</b>',
+      '오픈소스 <b>`hyper`의 코드와 패키지 구조 분석</b>',
+    ],
+    achievements: [
+      '오픈소스에 기여할 수 있는 역량을 키우기 위한 목표 수립',
+      '→ 아카데미에서의 학습을 바탕으로 <b>오픈소스 가상 화이트보드 `excalidraw`에 기여</b>',
+    ],
+    links: [
+      {
+        text: '[블로그] Git 학습 내용',
+        url: 'https://velog.io/@2hanbyeol1/series/Git',
+      },
+      {
+        text: '[Github] Excalidraw - (CLOSED) 한국어용 손글씨 폰트 추가',
+        url: 'https://github.com/excalidraw/excalidraw/pull/8531',
+      },
+      {
+        text: '[Github] Excalidraw - (MERGED) PNG로 내보낼 때 모든 파일로 저장되는 버그 수정',
+        url: 'https://github.com/excalidraw/excalidraw/pull/8946',
+      },
+    ],
+  },
+];