노랑풍선 대리점·제휴사 여행 플랫폼
노랑풍선 대리점·제휴사가 자체 도메인으로 운영하는 여행 상품 판매 사이트의 PC·모바일 프론트엔드를 개발했습니다. pnpm·Turborepo 모노레포에서 Next.js와 Mantine으로 고객센터, 통합검색, 예약, 마이페이지, 홈쇼핑 화면과 UI 컴포넌트를 구현했습니다.
공개일
프로젝트 개요
노랑풍선의 대리점·제휴사가 각자의 도메인으로 운영하는 B2B2C 여행 상품 판매 플랫폼입니다. 하나의 모노레포에서 사용자 PC, 사용자 모바일, 관리자(백오피스), 스토리북 앱을 함께 운영했습니다.
- 구조: pnpm workspace + Turborepo —
apps(desktop · mobile · backoffice · storybook) /packages(ui · api · services · eslint-config) - 공통 UI: Mantine 7 기반 디자인 컴포넌트를
@yb/ui패키지로 분리해 PC·모바일이 함께 사용, Storybook으로 문서화 - API 연동: OpenAPI 스펙으로 생성한 클라이언트(
@yb/api) + TanStack Query
담당 업무
PC·모바일 화면을 같은 기능 단위로 함께 맡아 구현했습니다.
| 영역 | 화면 |
|---|---|
| 고객센터 | 서브메인, 자주하는 질문, 공지사항 목록·상세 |
| 통합검색 | 검색 입력, 검색 결과 |
| 예약 | 예약하기 (예약 안내 박스 포함) |
| 마이페이지 | 참여내역 — 나의 여행기, 이벤트, 고객리뷰 |
| 프로모션 | 홈쇼핑 상품 목록 |
공통 컴포넌트 (@yb/ui)
- 고객센터 서브메인 FAQ·공지사항 섹션
- 홈쇼핑 리스트, 예약 안내 박스
- 약관 상세·제3자 정보제공 동의 모달
주요 작업
- PC·모바일 레이아웃 차이를 공통 컴포넌트와 앱별 페이지로 나눠, 같은 기능의 로직은 공유하고 화면만 각자 구성
- 목록·검색 화면에서 검색 조건, 페이지네이션, 탭 상태를 URL 쿼리와 맞춰 새로고침·뒤로가기에도 상태 유지
- 공통 모달·박스 컴포넌트를 Storybook에 등록해 다른 화면 담당자와 재사용
기술 스택
Next.js 14 (Pages Router) · React 18 · TypeScript · Mantine 7 · TanStack Query · Axios · pnpm · Turborepo · Storybook · Husky