이번에 소개할 <오늘 뭐해(What Today)>프로젝트는
스프린트 프론트엔드 과정 15기 4팀이 이뤄낸 결과물입니다.
단 6주 만에 여행 액티비티 검색·예약 플랫폼을 기획부터 개발, 배포까지 완성했어요.
그럼 실제 수강생들이 만든 서비스를 살펴볼까요?
1. 어떤 프로젝트를 기획했나요?
프로젝트명: 오늘 뭐해 (What Today)
- 주제: Global Nomad
- 국내 사용자뿐만 아니라 한국을 방문하는 외국인 관광객까지 주요 타겟층으로 삼았어요.
- 판매자와 참여자를 이어주는 C2C 체험 예약 플랫폼이에요.
- 목표 및 의의
- 국내 사용자에게는 색다른 일상의 경험을, 외국인에게는 지역 문화를 체험할 기회를 제공해요.
- 유지보수성과 확장성을 고려한 설계를 통해 프론트엔드 개발자로서 기술 깊이를 쌓았어요.
- 명확한 커뮤니케이션과 문서화를 통해 팀워크와 협업 능력을 키웠어요.
- 팀 구성 및 역할 - FE 15기 4팀
이름 | 역할 요약 |
박지섭 (팀장) | 프로젝트 구조 세팅, 카카오 지도 API 연동, 예약 내역 UI 및 기능, 다국어 기능 구현 |
김지현 | 마이페이지 UI 및 API 기능, 예약 상태 실시간 반영, 공통 컴포넌트 제작 |
김태일 | 메인 페이지 및 체험 등록 기능, 주소 API 연동, 검색/정렬 기능, 리드미 작성 |
명지우 | 모노레포 세팅, 자동화 CI/CD 구축, 로그인/회원가입 UI, 반복 일정 등록 기능, 디자인 시스템 구축 |
2. 서비스 주요 기능은 무엇인가요?
1. 회원가입 & 로그인 페이지
.gif)
회원 가입 실시간 유효성 검사
- React Hook Form과 Zod를 결합해 이메일·닉네임·비밀번호를 실시간으로 검사해요.
- 잘못된 입력은 에러 메시지와 비활성화 버튼으로 즉시 피드백을 보내요.
- 입력 필드는 모듈화해 UI 일관성과 재사용성을 확보했어요.
가입 - 로그인 인증 흐름 안정화
- Axios Interceptor로 인증이 필요한 요청에만 Authorization 헤더를 자동 설정해요.
- 401 에러 시 리프레시 토큰으로 액세스 토큰 재발급, 사용자 개입 없이 세션을 유지해요.
- 로그인이 필요한 페이지에 Auth Guard 적용해, 비로그인 접근 시 안내 후 로그인 페이지로 리다이렉트 되도록 했어요.
카카오 간편 로그인으로 초기 진입 허들 완화
- Kakao OAuth로 별도 회원가입 없이 로그인이 가능해요.
- 형용사+명사 조합의 임시 닉네임 자동 생성으로 가입 첫 단계 부담을 완화했어요.
- Zustand slice 패턴으로 토큰 전역을 관리해, 페이지 이동·새로고침 후에도 인증 상태가 유지되도록 했어요.
사용 기술 스택
React Hook Form,Zod,Axios Interceptor,Zustand,Kakao OAuth
(2) 메인 페이지 & 검색/필터
.gif)
사용 기술 스택
Motion,TanStack Query,react-router-dom,Tailwind CSS
부드러운 슬라이드 애니메이션
- Motion으로 무한 루프 슬라이드 구현, 첫·마지막 슬라이드 전환 시 전환 시간 0으로 처리해 부드러운 애니메이션이 유지되도록 했어요.
- TanStack Query로 인기 체험 데이터를 사전 로드 후 캐싱, 리뷰 수 기준 정렬로 신뢰도 높은 체험을 우선 노출했어요.
- 반응형 레이아웃 적용으로 기기별 카드 개수 자동 조정해, 모바일·태블릿·데스크톱 모두에서 최적화된 UI를 제공해요.
검색 및 필터 기능
- 검색창에 디바운싱 적용, 입력 종료 후에만 API 요청을 전송해 불필요한 호출을 줄였어요.
- 카테고리 라디오 버튼과 가격 정렬 셀렉트 박스로 실시간 필터링 및 정렬을 구현했어요.
- 모바일 환경에선 카테고리 필터를 가로 스크롤 형태로 구성해 터치 기반 탐색 경험을 강화했어요.
- 페이지네이션은 현재 페이지와 총 페이지 수 기반으로 부분 갱신해, 재요청 없이 부드러운 전환을 제공했어요.
(3) 상세 페이지 & 예약
.gif)
카카오 API를 활용한 주소 및 위치
- 판매자가 입력한 주소를 Kakao Map API로 검색해 정확한 장소명을 표시했어요.
- 검색 실패 시 최대 3회까지 재시도하는 Fallback 로직으로 안정적인 위치 정보를 제공해요.
- 지도와 함께 체험 정보를 표시해 사용자가 예약 전 위치를 직관적으로 확인 가능
직관적인 예약 흐름 설계
- 날짜 → 시간 → 인원 선택 순으로 진행되는 예약 플로우로 사용자 여정을 단순화했어요.
- 선택한 정보는 예약 요약 영역에 실시간으로 반영돼 결제 금액과 예약 내용을 명확하게 파악할 수 있어요.
- 예약 요청은 Axios로 처리하고, 성공 시 TanStack Query의 invalidate로 전체 관련 데이터를 자동으로 갱신해요.
- 오류 발생 시 상태별 맞춤 피드백으로 재시도를 유도해요.
끊김 없는 후기 영역 탐색
- 후기 목록은 useInfiniteQuery로 구현해 끊김 없이 스크롤 탐색 가능
- 신규 리뷰 등록 시 상세 페이지와 마이페이지의 후기 목록이 즉시 업데이트돼 사용자 피드백 순환 구조 완성
사용 기술 스택
Kakao Map API,Axios,TanStack Query,React
(4) 마이페이지 & 사용자 정보 관리
.gif)
한눈에 들어오는 대시보드 구성
- 마이페이지 메인 화면에 사용자의 체험 및 예약 현황을 한눈에 보여주는 대시보드를 배치했어요.
- 등록한 체험 수, 승인 대기 건, 완료된 체험, 리뷰 대기 건 등 핵심 정보를 위젯 형태로 정리해 현재 상태를 빠르게 파악 가능해요.
- 모집 중인 체험은 썸네일 카드 형태로 가로 스크롤 리스트에 나열해 직관적인 관리 흐름을 제공해요.
- 다가오는 일정은 날짜 순 정렬된 타임라인으로 보여줘 향후 체험 일정을 쉽게 확인 가능해요.
체험 및 예약 내역 관리
- 판매자는 자신이 등록한 체험의 예약 일정과 상태를 마이페이지에서 바로 관리할 수 있어요.
- 달력 기반 UI와 리스트 뷰를 함께 제공해 일정 확인과 예약 내역 관리가 한 화면에서 이뤄져요.
- TanStack Query로 상태 변경 시 관련 데이터가 즉시 갱신돼 새로고침 없이 최신 상태가 유지돼요.
- 완료된 체험은 마이페이지 내에서 바로 후기 작성으로 연결돼 사용자 이동 동선을 최소화했어요.
프로필 및 정보 관리
- 프로필 이미지 변경과 사용자 정보 수정을 한 페이지로 통합해 UI 흐름을 단순화 했어요.
- 상태 배지와 아이콘을 활용해 예약 상태, 체험 등록 상태 등을 한눈에 구분 가능하게 했어요.
- Zustand로 상태를 관리해 수정 사항이 즉시 반영되고, 페이지 이동이나 새로고침 후에도 유지돼요.
사용 기술 스택
React 19,Zustand,TanStack Query,dayjs
(5) 체험 등록/수정 & 주소 입력
.gif)
효율적인 판매자 관리 기능
- 판매자는 제목, 설명, 가격, 카테고리, 주소, 이미지를 한 번에 입력해 체험을 등록할 수 있어요.
- React Hook Form과 Zod를 활용해 모든 입력값에 대한 유효성 검사를 수행하고, 잘못된 값 입력 시 실시간 오류 메시지로 피드백 을 제공해요.
- 수정 시에는 URL 파라미터로 등록/수정을 구분하고, 기존 데이터를 자동 반영해 중복 입력을 최소화해요.
- 반복 일정 등록 기능을 제공해 동일한 체험을 여러 날짜에 한 번에 등록할 수 있어 효율적인 운영이 가능해요.
주소 입력 기능
- Daum 우편번호 API를 연동해 주소 입력 시 클릭 한 번으로 우편번호 검색과 주소 입력이 동시에 가능해요.
- 최초 클릭 시 스크립트를 동적으로 로드하고, 이후에는 즉시 팝업을 띄워 빠른 입력 경험을 제공해요.
- Kakao Map API와 연결해 입력한 주소를 지도에 실시간으로 표시, 사용자가 위치 정보를 직관적으로 확인 가능해요.
등록 및 수정 후 실시간 데이터 반영
- 체험 등록 또는 수정이 완료되면 관련 쿼리를 무효화해, 메인 페이지와 예약 일정 등 모든 관련 데이터가 즉시 갱신돼요.
사용 기술 스택
React Hook Form,Zod,Kakao Map API,Daum 주소 API,Axios,TanStack Query
(6) 예약 현황 페이지 (캘린더)
.gif)
월간 스케줄 조회와 시각화
- 상단 셀렉트 박스로 체험 선택 후 해당 월의 예약 스케줄을 조회해요.
- 캘린더 셀에 배지로 신청/승인/거절 상태를 표시해 한눈에 현황을 파악해요.
- 주·월 이동 시 필요한 범위만 부분 갱신해 전환 지연을 최소화 해요.
날짜별 상세 팝업과 관리 흐름
- 날짜 클릭 시 팝오버 또는 바텀시트로 당일 예약 목록과 신청자 정보를 즉시 표시해요.
- 화면 밖으로 벗어나지 않도록 팝업 위치 자동 조절, 스크롤 잠금으로 포커스를 유지해요.
- 팝오버를 닫으면 이전 선택값과 임시 상태를 초기화해 깔끔한 UX를 유지해요.
승인/거절 처리와 실시간 반영
- 예약 승인 시 동일 시간대의 다른 신청은 자동 거절 처리로 중복 예약을 방지해요.
- 처리 직후 관련 쿼리 invalidate로 캘린더, 예약 목록, 마이페이지에 즉시 반영해요.
- 상태별 탭(신청/승인/거절)과 필터로 필요한 항목만 빠르게 조회할 수 있어요.
운영 효율을 위한 보조 기능
- 예약 메모/연락처 등 운영 정보 요약을 함께 노출해 응대 시간을 단축할 수 있어요.
- 일자 범위 선택으로 특정 기간의 예약만 모아 확인해요.
- 오류 또는 네트워크 지연 시 단계별 토스트/리트라이 버튼을 제공해, 재요청 시 중복 클릭을 방지해요.
사용 기술 스택
dayjs,TanStack Query,React 19,react-router-dom
(7) 알림 & 다국어 & 디자인 시스템
.gif)
알림 시스템
- 신청 승인·거절 등 주요 이벤트 발생 시 알림을 발송하고 헤더 아이콘과 배지로 시각적 계층을 강화했어요.
- Intersection Observer와 useInfiniteQuery로 무한 스크롤 알림 목록을 구현, 과거 알림도 자연스럽게 탐색할 수 있어요.
- 알림 상태는 Zustand로 관리해 새 알림 발생 시 이전 상태와 비교 후 배지 표시, 실시간 사용자 피드백을 제공해요.
다국어 지원
- Google Translate Script를 적용해 영어·일본어·힌디어를 포함한 55개 언어로 번역을 지원해요.
- 플로팅 버튼을 통해 언어를 실시간으로 전환할 수 있으며, 페이지 전체 UI 요소가 즉시 번역돼요.
- 새로고침이나 페이지 이동 후에도 선택한 언어 상태를 유지해 글로벌 사용자의 경험을 보장해요.
디자인 시스템
- 서비스와 분리된 디자인 시스템을 모노레포 구조로 구축, 컴포넌트 작성 시 자동으로 디자인 문서 를 생성해요.
- 공통 스타일·UI 패턴을 일관되게 적용해 유지보수성과 확장성을 높였어요.
- 슬롯+합성 컴포넌트 패턴을 활용해 팝업, 버튼, 입력 등 다양한 인터랙션 요소를 재사용 가능한 형태로 구현했어요.
사용 기술 스택
Zustand,Intersection Observer,TanStack Query,Google Translate Script,Radix UI 구조 기반 합성 컴포넌트
3. 프로젝트에 대해 팀 내에선 어떻게 평가했나요?
서비스 기획 (85점 / 100점)
국내를 방문하는 외국인을 주요 타깃으로 설정하고, 글로벌 확장을 고려한 다국어 지원 등 서비스 기획 목표를 성공적으로 달성했어요.
기술 (75점 / 100점)
컴포넌트의 재사용성과 기능 구현 측면에서는 좋은 성과를 냈지만, 요구사항 분석과 구조 설계 부분에서는 보완점이 있다고 판단했어요.
협업 (80점 / 100점)
역할 분담과 커뮤니케이션, 피드백 중심의 협업은 전반적으로 원활하게 이뤄졌어요. 다만 일정 관리와 작업 흐름 측면에서는 개선이 필요하다고 느꼈어요.
4. 프론트엔드 개발자 포트폴리오, 제대로 완성하고 싶다면?
스프린트는 이렇게 밀도 높은 경험을 통해, 실무 역량을 빠르게 키워가는 과정이에요.
진짜 프론트엔드 개발자로 성장하고 싶다면, 하단 링크를 클릭해 더 자세한 사항을 확인해 보세요⚡️
수강료 0원에 학습 내내 맥북 무상 지원까지!
- 체계적인 고퀄리티 교육 + 취업 지원을 전액 무료로 경험할 수 있어요.
- 학습 내내 맥북이 무상 지원되니, 최적의 환경으로 공부할 수 있어요.
1:1 취업 지원 프로그램과 인턴십 매칭까지 진행돼요!
- 이력서 작성부터 면접 대비까지 현직자 멘토의 1:1 코칭이 제공돼요.
- 참여 희망자에 한해서 인턴 지원 기업을 무한 매칭해 드려요.
Share article