단순여행

여행 일정을 쉽고 직관적으로 관리할 수 있는 웹 서비스입니다. 프로젝트 기반으로 일정과 캘린더를 함께 확인하고, 사용자 간 일정 공유까지 고려한 Supabase 기반의 프론트엔드 프로젝트입니다. 현재는 웹 서비스이지만 추후 앱(모바일)으로도 확장할 계획이 있어, pnpm workspace + Turborepo 기반 모노레포로 구성해 웹 앱과 디자인 토큰/공유 로직 패키지를 미리 분리해 관리하고 있습니다.

[제작 기간] 25. 12. 01 ~ 진행 중

[링크]

https://itinerary-web-app-three.vercel.app/

---

프로젝트 개요

단순여행은 여행 계획을 일정 관리 중심으로 정리한 웹 애플리케이션입니다.

여행 프로젝트를 생성하고, 참여자별 일정과 캘린더를 한 화면에서 확인할 수 있도록 구현했습니다.

이 프로젝트를 통해 다음을 중점적으로 경험했습니다.

• React + TypeScript 기반의 웹 애플리케이션 구조 설계
• Supabase를 활용한 인증, 데이터 저장, 상태 관리
• TanStack Query를 이용한 비동기 데이터 처리
• 사용자 경험을 고려한 UI/UX 구성
• pnpm workspace + Turborepo를 활용한 모노레포 구조 설계 (웹 앱 / 공유 로직 / 디자인 토큰 패키지 분리)
• 디자인 토큰 기반의 자체 디자인 시스템 구축 및 라이트/다크 테마 대응

---

주요 기능

• 여행 프로젝트 생성 및 참여
• 일정 생성 / 수정 / 삭제
• 주간 캘린더 기반 일정 확인
• 사용자 인증 및 프로필 관리
• 프로젝트 단위 일정 공유 (같은 프로젝트 팀원의 일정도 함께 조회 · 수정 · 삭제 가능, 안내 콜아웃 제공)

---

기술 스택

• React
• TypeScript
• Vite
• Tailwind CSS
• shadcn/ui
• TanStack Query
• Zustand
• React Router
• Supabase
• Vercel
• pnpm workspace
• Turborepo

---

구현 포인트

• Supabase를 활용해 인증, 프로젝트 정보, 일정 데이터를 분리하여 관리
• React Query로 서버 상태를 효율적으로 처리하여 UX 개선
• Zustand로 전역 상태를 간결하게 관리
• 모달, 캘린더, 리스트 UI를 조합해 실제 서비스 흐름에 맞는 화면 구성
• 반응형 UI를 고려해 모바일/데스크톱 환경 모두에 대응하도록 설계
• 색상 · 타이포그래피 · 컴포넌트 톤을 디자인 토큰(@itinerary/tokens)으로 정의해 라이트/다크 테마를 일관되게 적용
• 웹 전용 코드(app-web)와 공유 가능한 타입 · 유틸(shared) · 디자인 토큰(tokens)을 패키지 단위로 분리해 향후 멀티 플랫폼 확장을 고려한 구조 설계

---

프로젝트 구조

pnpm workspace 기반 모노레포로, packages/ 아래 앱과 공유 패키지를 분리해 관리합니다.

packages/
  app-web/            # 웹 앱 (Vite + React)
    src/
      api/            # Supabase API 연동
      components/     # UI 컴포넌트
      hooks/          # React Query 기반 커스텀 훅
      pages/          # 라우팅 페이지
      store/          # Zustand 전역 상태
      styles/         # 디자인 시스템 CSS (design-system.css)
      lib/            # 공통 유틸리티 및 Supabase 설정
  shared/             # 웹/모바일 공유 타입 · 유틸 · 상수 (@itinerary/shared)
    src/
      types.ts        # 공유 엔티티 타입
      constants.ts    # QUERY_KEYS 등 공통 상수
      utils.ts        # 공통 유틸 함수
      error.ts        # 공통 에러 처리
  tokens/             # 디자인 토큰 원본 및 CSS 변환 스크립트 (@itinerary/tokens)
    src/
      design-tokens.json # 디자인 토큰 원본
      scripts/        # 토큰 → CSS 변환 스크립트
turbo.json            # Turborepo 파이프라인 설정
pnpm-workspace.yaml   # pnpm workspace 설정

---

주요 화면 UI

프로젝트 페이지

일정 페이지

캘린더 페이지

모달(생성, 수정)

마이페이지