포트폴리오

개인 포트폴리오 사이트

2025.03 -

💻 기술 스택

React
Next.js
Typescript
Jotai
Tanstack Query
Supabase

🧩 구현 기능

1. 프로젝트 상세 모달 구현

  • Next.js의 Intercepting Routes, Parallel Routes 기능을 활용하여 별도의 URL을 갖는 독립 페이지로 동작

  • 뒤로가기, 새로고침/직접 접근 시에도 프로젝트 상세 페이지로 자연스럽게 전환됨

  • 바닥에서 슬라이드업되는 바텀 시트 형태 모달 애니메이션 구현

  • 모달 오픈 시 body 스크롤을 막고, --scrollbar-width를 계산해 오른쪽 레이아웃 시프트 보정

2. 인터랙티브 커서 컴포넌트 구현

  • 커서 타입과 표시 텍스트를 전역 상태로 관리하며, 컴포넌트 hover 이벤트에 따라 커서 속성이 변경되도록 구성

  • Motion Variant를 통해 커서 타입에 따라 크기·색상·radius 등의 스타일 변화 적용

  • 커서 좌표를 useRef를 사용해 저장하고, useAnimationFrame을 통해 매 프레임 motionValue로 반영하여 부드러운 움직임 구현

  • pointer-fine 미디어 쿼리를 활용해 마우스 기반 환경에서만 커서 컴포넌트를 표시

3. 현재 보고 있는 섹션을 표시하는 내비게이션 컴포넌트 구현

  • Motion의 useInView를 활용하여 현재 화면에 노출된 섹션을 실시간으로 감지

  • 섹션이 바뀌면 해당 항목의 -offsetTop만큼 useAnimate로 리스트를 이동시키고 나머지 항목은 보이지 않게 하여, 자연스럽게 전환되도록 구현

  • 마우스 오버 시 전체 섹션 목록이 펼쳐져 이동하고자 하는 섹션을 선택 가능하도록 구현

➕ 기타 내용

GitHub Actions와 AWS(EC2, S3, CodeDeploy)를 활용한 자동 배포 파이프라인 구축

  • CI/CD 전체 흐름을 실습하며 배포 구조 이해도를 높임 (블로그 포스트) (이전 레포)

  • 이후 비용·운영 편의성을 고려해 서버리스 배포 플랫폼 Vercel로 전환

🌱 배운점

처음부터 직접 기획, 설계, 개발, 배포까지 전 과정을 경험하며 하나의 서비스를 운영하는 관점에서의 개발 프로세스를 익혔습니다. 초기에 프로젝트 데이터를 빈번히 수정하게 되면서, 내부 파일로 관리하는 대신 데이터를 DB로 분리하여 유지보수 효율을 높이는 구조로 개선했습니다. 또한 배포 환경 전환, SEO 개선, UI 수정 등 다양한 시도를 반복하며 지속적인 개선과 실험을 통해 완성도를 높였습니다. 이 프로젝트를 통해 지속적으로 개선하고 운영할 수 있는 구조를 설계하는 것 역시 개발자의 중요한 역할임을 배웠습니다.