SKYWALKER

Grogu is cute. 🪐 — 스타워즈 세계관으로 꾸민 개인 프로젝트 겸 프론트엔드 포트폴리오.

React 19 + TypeScript + Vite 위에 GSAP/Framer Motion 애니메이션과 Supabase 백엔드를 얹어 만든 미니 페이지 모음입니다. 스크롤 인터랙션, 실시간 방명록, 타임어택 게임, 커스텀 커서 등 프론트엔드에서 다뤄볼 만한 인터랙션들을 하나의 사이트 안에 "우주선 콘솔" 콘셉트로 묶었습니다.

🎬 전역 인터랙션

페이지 하나짜리 기능이 아니라 사이트 전체에 깔려 있는 디테일 두 가지.

🗡️ 커스텀 커서 — 라이트세이버 든 루크 스카이워커

데스크탑(pointer: fine)에서는 기본 마우스 커서 대신 초록 라이트세이버를 든 루크 SVG가 커서를 따라다닌다. requestAnimationFrame + 선형 보간(lerp)으로 실제 마우스 좌표를 살짝 늦게 쫓아가 관성이 붙은 느낌을 내고, 클릭 가능한 요소 위에 올라가면 라이트세이버 광선 drop-shadow가 진해지며 하이라이트된다.

🌀 스타워즈식 화면 전환

페이지를 이동할 때마다 실제 스타워즈 영화 장면 전환처럼 화면이 와이프된다. wipe(가로 와이프) → iris(원형 수축) → clock(시계 방향 마스크) → reverseWipe → verticalBar 5가지를 TransitionLayout이 이동할 때마다 순서대로 돌려쓰고, CSS clip-path/mask-image 애니메이션으로 구현했다. 아래는 그 중 wipe와 iris 두 가지를 이동 중간 프레임에 캡처한 것.

✨ 주요 기능

🏠 메인 대시보드 — /

로그인 상태에 따라 헤더가 바뀌는 콕핏 스타일 대시보드. 노출할 메뉴는 routes.tsx의 handle.isMenu 플래그 하나로 관리되고, 카드 개수가 바뀌어도 스크롤 없이 남은 공간을 자동으로 나눠 채운다.

🐟 초코 피시 — /fish

@react-three/fiber + three.js로 만든 미니 3D 어항. 마우스를 따라 물고기가 시선을 움직인다.

🚀 그로구 픽 — /cartoon

휠 스크롤 진행도(0~1)를 GSAP MotionPathPlugin 타임라인에 매핑해서, 스크롤하는 만큼 X-wing이 지정된 경로를 따라 행성 사이를 날아가는 연출.

🚶 그로구 산책 — /stopgrogu

z-depth 패럴랙스 별빛 배경 위에서, 화면 밖에서 나타났다 사라지는 경로를 따라 그로구가 계속 걸어다닌다. 클릭하면 pauseAnimations()로 그 자리에 멈춰 세우고, 부르르 떠는 흔들림과 함께 화난 표정 두 가지를 0.5초 간격으로 번갈아 보여주며 말풍선으로 화를 낸다.

🎮 그로구 게임 — /game

10초 타임어택으로 간식(마카롱/개구리)을 받아내는 미니게임. Supabase에 기록을 남기고 실시간 전체 랭킹 리더보드를 보여준다.

⏱️ 스탑워치 — /stopwatch

R2-D2를 클릭하면 전역 메뉴가 열리는 심플 스톱워치. 시작/일시정지/리셋 로직은 useTimerViewModel 커스텀 훅으로 분리.

🛰️ 홀로챗 — /holo

Supabase 테이블을 실시간 방명록처럼 쓰는 페이지. 전송 전 충전 게이지를 100%까지 채워야 메시지를 보낼 수 있는 미니 게이팅 UX가 붙어 있다.

🗂️ 데스크탑 메뉴 시스템

데스크탑 좌상단 MENU.EXE 아이콘(또는 holo/stopwatch에서는 R2-D2)을 클릭하면 뜨는 공용 내비게이션 모달. 아이콘 순서는 메인 대시보드 카드 노출 순서와 항상 동일하게 맞춰져 있다.

🌌 데스스타 트렌치런 — /trench (실험적 프로토타입)

/cartoon과는 다른 미니멀/에디토리얼 톤으로 만들어본 스크롤 연출. 조준선이 서서히 수렴하다 100% 지점에서 플래시 → 파티클 버스트 → IMPACT 타이포 시퀀스가 재생된다. 아직 다듬는 중이라 메뉴에는 올리지 않고 URL로만 접근 가능.

🛠️ 기술 스택

영역	기술
코어	React 19, TypeScript, Vite 8
스타일	Tailwind CSS 4
애니메이션	GSAP(MotionPath 포함), Framer Motion
3D	Three.js, @react-three/fiber, @react-three/drei
라우팅	React Router 7
상태관리	Zustand(클라이언트), TanStack Query(서버 상태)
백엔드	Supabase (Auth + Postgres)
배포	Cloudflare Workers (Wrangler)

🚀 로컬 실행

npm install
npm run dev       # http://localhost:5173

npm run build      # tsc -b && vite build
npm run lint        # eslint .
npm run preview    # 프로덕션 빌드 후 wrangler dev로 미리보기
npm run deploy      # 프로덕션 빌드 후 Cloudflare Workers 배포

Supabase를 쓰는 기능(홀로챗/그로구 게임 랭킹/투두/포커스 타이머)을 로컬에서 그대로 살리려면 .env에 Supabase 프로젝트 URL/anon key를 채워야 한다. supabase/ 폴더에 관련 테이블 스키마 SQL이 정리돼 있다.

📁 프로젝트 구조

src/
├── pages/           # 라우트별 페이지 컴포넌트
├── components/
│   ├── common/      # MenuModal, AlertDialog 등 공용 컴포넌트
│   ├── main/         # 메인 대시보드 전용 컴포넌트
│   └── layout/       # 페이지 전환 레이아웃
├── hooks/            # 쿼리/뮤테이션 및 뷰모델 커스텀 훅
├── store/            # Zustand 스토어 (auth, effect 등)
└── routes.tsx        # 라우트 정의 + 메뉴 노출 메타데이터(handle)
docs/                 # 날짜별 작업 기록(문제 → 원인 → 해결 과정)
supabase/             # 테이블 스키마 SQL

📝 개발 기록

기능을 왜 그렇게 만들었는지, 막혔던 문제를 어떻게 풀었는지는 커밋 단위가 아니라 docs/ 아래 날짜별 기록으로 남기고 있다.