본 프로젝트는 URECA의 미니 프로젝트로, 여행 일정을 효율적으로 관리할 수 있는 웹 플랫폼 **‘로드픽(RoadPick)’**을 개발하는 것을 목표로 합니다.
사용자가 쉽고 체계적으로 여행 계획을 세울 수 있도록 돕는 기능을 중심으로, 팀원 간의 협업을 통해 기획부터 디자인, 프론트엔드 구현까지 전 과정을 경험합니다.
- 🔹 프로젝트명: RoadPick
- 🔹 프로젝트 기간: 2025.05.07 ~ 2025.05.20 (2주)
- 🔹 개발 인원: 김준서, 김민석, 김예지, 홍석준
- 🔹 주요 목표: 사용자 맞춤형 여행 일정 관리 기능 구현
로드픽은 여행을 계획하는 모든 사용자를 대상으로 하지만 특히 바쁜 일상 속에서도 여행을 즐기고자 하는 20대 사용자를 주요 페르소나로 설정하였습니다.
보다 효율적이고 체계적인 여행 일정을 설계할 수 있도록 돕는 여행 일정 관리 중심 플랫폼으로,
다양한 여행지 정보와 관련 축제·행사 추천 등 풍부한 콘텐츠를 기반으로
사용자가 자신만의 맞춤 여행 일정을 쉽게 구성하고, 즐거운 여행 경험을 누릴 수 있도록 지원합니다.
RoaPick : RoadPick 보러가기
BackEnd : 백엔드 보러가기
Notion : 노션 보러가기
약식 기획서 : 약식기획서 보러가기
디자인 시안 : 디자인 시안 보러가기
WBS : WBS 보러가기
선택한 지역 주변에서 진행되는 축제 및 행사 정보를 추천합니다. 지도 위에서 주변 이벤트를 마커로 시각화해 보여줍니다.
여행지를 찜 목록에 저장하고 이를 기반으로 나만의 여행 일정을 만들 수 있습니다. 캘린더를 통해 일정을 시각화하며 날짜를 클릭하면 해당 날짜의 상세 일정으로 이동합니다.
- 방문 날짜 설정
- 일정 간 이동 동선 정리
- 시작일 ~ 종료일까지의 일정 커스터마이징
선택한 지역 내의 관광지 및 축제를 지도에 마커로 표시합니다. 마커 클릭 시 모달이 나타나며, 디테일 페이지로 이동할 수 있습니다. 사용자가 선택한 지역을 벗어나 지도를 클릭하면 "이 지역 재검색" 버튼이 나타나고, 해당 지역의 관광지를 다시 검색할 수 있습니다.
원하는 관광지를 찜할 수 있으며, 마이페이지에서 사용자별 찜 목록을 확인할 수 있습니다.
- 프로필 이미지 및 이름 변경
- 찜한 여행지 목록 확인
- 저장한 여행 일정 관리
- KakaoMap API를 활용한 지도 및 위치 기반 기능
- React Spring을 이용한 바텀시트 애니메이션 구현
- 모바일 퍼스트 기반 반응형 웹사이트 제작
- 직관적인 UI/UX 흐름과 사용자 중심의 기능 구성
- 공통 컴포넌트 개발 => 재사용성과 유지보수 유용
 김준서(팀장) |
 홍석준 |
 김민석 |
 김예지 |
 📍 여행지 찜하기 및 찜 취소 기능 |
 🎉 여행지 검색 및 상세 정보 확인 |
 🔐react-spring 활용한 바텀 시트 |
 🗺️ 지도에서 관광지 & 축제 정보 확인 및 마커 표시 변경 |
 📆 여행 계획 생성 및 내 여행 목록 확인 |
 👤여행 세부 일정 추가 및 이동 경로 시각화 |
📌 문제 여러 컴포넌트를 화면마다 반복 작성 변경 시 일일이 수정해야 해서 유지보수 비효율 발생
✅ 해결 props와 name을 이용해 공통 컴포넌트 설계 유연하게 커스터마이징 가능한 구조로 개발
🎯 효과 코드 재사용성 증가 컴포넌트 일관성 확보 협업 및 유지보수 효율화
📌 문제 외부 API 호출 중 간헐적 실패 발생 빈 화면 또는 데이터 미노출 이슈 발생 (429에러) 많은 호출
✅ 해결 sessionStorage에 정상 데이터 캐싱 오류 발생 시 캐시 데이터로 대체 렌더링 TanStack Query(React Query)로 데이터 상태 관리 및 에러 핸들링
🎯 효과 사용자 경험 개선 (에러 시에도 데이터 제공) 상태 관리 체계 강화 → 안정적 앱 구성
📌 문제
한국관광공사 API 응답 실패
원인은 API 파라미터 변경 (문서 업데이트 미반영)
✅ 해결 공식 문서 확인 후 변경된 파라미터 반영 테스트를 통해 호출 정상화 확인
🎯 효과 빠르게 문제 진단 및 대응 외부 API 사용 시 문서 체크 및 예외 대응 역량 강화
📌 문제 페이지 처음 접근 시 로딩이 길어지는 현상.
✅ 해결 lazy를 사용해 import가 된후 생성되게끔, img에는 loding="lazy"추가 => 이때 화면에 주가 되는 부분은 하면 안됨 처음 화면에 보이지 않는 요소중 🎯 효과 빠른 로딩시간, 사용자 경험(UX)증가
FrontEnd
📦src
┣ 📂apis
┃ ┣ 📜authApi.js
┃ ┣ 📜favoriteApi.js
┃ ┣ 📜getKeywordTourList.js
┃ ┣ 📜getLocationTourList.js
┃ ┣ 📜getTourDetailCommon.js
┃ ┣ 📜getTourDetailIntro.js
┃ ┣ 📜getTourList.js
┃ ┣ 📜index.js
┃ ┣ 📜scheduleApi.js
┃ ┣ 📜schedulsDetailApi.js
┃ ┗ 📜userApi.js
┣ 📂assets
┃ ┣ 📂icons
┃ ┃ ┣ 📜addIcon.svg
┃ ┃ ┣ 📜AppIcon.svg
┃ ┃ ┣ 📜archiveAddIcon.svg
┃ ┃ ┣ 📜arrowLeftIcon.svg
┃ ┃ ┣ 📜arrowUpIcon.svg
┃ ┃ ┣ 📜calendarIcon.svg
┃ ┃ ┣ 📜checkBoxIcon.svg
┃ ┃ ┣ 📜checkIcon.svg
┃ ┃ ┣ 📜eye-close.svg
┃ ┃ ┣ 📜eye-open.svg
┃ ┃ ┣ 📜googleIcon.svg
┃ ┃ ┣ 📜homeIcon.svg
┃ ┃ ┣ 📜kakaoIcon.svg
┃ ┃ ┣ 📜loginIcon.svg
┃ ┃ ┣ 📜logoutIcon.svg
┃ ┃ ┣ 📜markerDefault.svg
┃ ┃ ┣ 📜markerSelected.svg
┃ ┃ ┣ 📜moreIcon.svg
┃ ┃ ┣ 📜PlusBtnIcon.svg
┃ ┃ ┣ 📜refresh.svg
┃ ┃ ┣ 📜saveIcon.svg
┃ ┃ ┣ 📜searchIcon.svg
┃ ┃ ┣ 📜starIcon.svg
┃ ┃ ┗ 📜userIcon.svg
┃ ┗ 📂imgs
┃ ┃ ┣ 📜BannerImg1.png
┃ ┃ ┣ 📜BannerImg2.png
┃ ┃ ┣ 📜noImageImg.png
┃ ┃ ┣ 📜ProfileBasicImg.png
┃ ┃ ┣ 📜registerImg.png
┃ ┃ ┗ 📜TripListImg.png
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂BottomSheet
┃ ┃ ┃ ┣ 📜BottomSheet.jsx
┃ ┃ ┃ ┣ 📜BottomSheet.module.css
┃ ┃ ┃ ┣ 📜BottomSheetContent.jsx
┃ ┃ ┃ ┣ 📜BottomSheetPlan.jsx
┃ ┃ ┃ ┗ 📜generateDateRange.js
┃ ┃ ┣ 📂Calendar
┃ ┃ ┃ ┣ 📜Calendar.jsx
┃ ┃ ┃ ┣ 📜Calendar.module.css
┃ ┃ ┃ ┗ 📜CalendarLogic.js
┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┗ 📜Footer.jsx
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┃ ┗ 📜Header.module.css
┃ ┃ ┣ 📂ListCard
┃ ┃ ┃ ┣ 📜HeartToggle.jsx
┃ ┃ ┃ ┣ 📜ListCard.jsx
┃ ┃ ┃ ┗ 📜ListCard.module.css
┃ ┃ ┣ 📂Map
┃ ┃ ┃ ┣ 📜DetailMap.jsx
┃ ┃ ┃ ┣ 📜DetailMap.module.css
┃ ┃ ┃ ┣ 📜Map.jsx
┃ ┃ ┃ ┣ 📜Map.module.css
┃ ┃ ┃ ┣ 📜MapModal.jsx
┃ ┃ ┃ ┣ 📜MapModal.module.css
┃ ┃ ┃ ┣ 📜PlanMap.jsx
┃ ┃ ┃ ┗ 📜TourApi.js
┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┣ 📜AlertModal.jsx
┃ ┃ ┃ ┣ 📜AlertModal.module.css
┃ ┃ ┃ ┣ 📜DeleteModal.jsx
┃ ┃ ┃ ┣ 📜LogoutModal.jsx
┃ ┃ ┃ ┣ 📜Modal.module.css
┃ ┃ ┃ ┣ 📜ModalRoot.jsx
┃ ┃ ┃ ┣ 📜PlanModal.jsx
┃ ┃ ┃ ┣ 📜RegisterModal.jsx
┃ ┃ ┃ ┗ 📜RegistModal.jsx
┃ ┃ ┣ 📂Navbar
┃ ┃ ┃ ┣ 📜Navbar.jsx
┃ ┃ ┃ ┗ 📜Navbar.module.css
┃ ┃ ┣ 📂RelativeOptionCard
┃ ┃ ┃ ┣ 📜RelativeOptionCard.jsx
┃ ┃ ┃ ┗ 📜RelativeOptionCard.module.css
┃ ┃ ┗ 📂Search
┃ ┃ ┃ ┣ 📜SearchCard.jsx
┃ ┃ ┃ ┗ 📜SearchCard.module.css
┃ ┣ 📂detail
┃ ┃ ┣ 📂FestivalSlider
┃ ┃ ┃ ┣ 📜FestivalSlider.jsx
┃ ┃ ┃ ┗ 📜FestivalSlider.module.css
┃ ┃ ┣ 📜Detail.module.css
┃ ┃ ┣ 📜DetailBasicInfo.jsx
┃ ┃ ┣ 📜DetailContent.jsx
┃ ┃ ┣ 📜DetailImage.jsx
┃ ┃ ┣ 📜DetailTitle.jsx
┃ ┃ ┗ 📜FestivalInfo.jsx
┃ ┣ 📂EventBanner
┃ ┃ ┣ 📜EventBanner.jsx
┃ ┃ ┗ 📜EventBanner.module.css
┃ ┣ 📂loading
┃ ┃ ┣ 📜Spinner.jsx
┃ ┃ ┗ 📜Spinner.module.css
┃ ┗ 📂mypageTaps
┃ ┃ ┣ 📜FriendsList.jsx
┃ ┃ ┣ 📜MypageListCard.jsx
┃ ┃ ┣ 📜mypageTaps.module.css
┃ ┃ ┣ 📜MyTrips.jsx
┃ ┃ ┗ 📜SavedList.jsx
┣ 📂hooks
┃ ┣ 📜requireAuth.jsx
┃ ┣ 📜useDeleteFavorite.js
┃ ┣ 📜useDetailsCommon.js
┃ ┣ 📜useFavorite.js
┃ ┣ 📜useKeywordList.js
┃ ┣ 📜useLocationTourList.js
┃ ┣ 📜useModal.jsx
┃ ┣ 📜usePopularTourList.js
┃ ┣ 📜useRecommendTourList.js
┃ ┣ 📜useScheduleDetail.js
┃ ┣ 📜useScheduleList.js
┃ ┣ 📜useTourDetail.js
┃ ┗ 📜useTourList.js
┣ 📂layout
┃ ┗ 📜MainLayout.jsx
┣ 📂loaders
┃ ┣ 📜kakaoLoader.js
┃ ┗ 📜listLoader.js
┣ 📂pages
┃ ┣ 📜CalendarPage.jsx
┃ ┣ 📜CalendarPage.module.css
┃ ┣ 📜DetailPage.jsx
┃ ┣ 📜DetailPage.module.css
┃ ┣ 📜FirstLoadingPage.jsx
┃ ┣ 📜ListPage.jsx
┃ ┣ 📜LoginPage.jsx
┃ ┣ 📜LoginPage.module.css
┃ ┣ 📜MainPage.jsx
┃ ┣ 📜MainPage.module.css
┃ ┣ 📜MapPage.jsx
┃ ┣ 📜MapPage.module.css
┃ ┣ 📜MyPage.jsx
┃ ┣ 📜MyPage.module.css
┃ ┣ 📜NotFoundPage.jsx
┃ ┣ 📜PlanPage.jsx
┃ ┣ 📜PlanPage.module.css
┃ ┣ 📜ProfileEditPage.jsx
┃ ┣ 📜ProfileEditPage.module.css
┃ ┣ 📜RegisterPage.jsx
┃ ┣ 📜SaveListPage.jsx
┃ ┣ 📜SaveListPage.module.css
┃ ┣ 📜SearchPage.jsx
┃ ┣ 📜SearchPage.module.css
┃ ┣ 📜SearchPopularPage.jsx
┃ ┣ 📜SelectDatePage.jsx
┃ ┗ 📜SelectDatePage.module.css
┣ 📂routes
┃ ┗ 📜AppRouter.jsx
┣ 📂store
┃ ┣ 📜authSlice.js
┃ ┗ 📜store.js
┣ 📂utils
┃ ┗ 📜features.js
┣ 📜app.jsx
┣ 📜index.css
┗ 📜main.jsx
| 커밋 유형 | 의미 |
|---|---|
Feat |
새로운 기능 추가 |
Fix |
버그 수정 |
Docs |
문서 수정 |
Style |
코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 |
Refactor |
코드 리팩토링 |
Test |
테스트 코드, 리팩토링 테스트 코드 추가 |
Chore |
패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore |
Design |
CSS 등 사용자 UI 디자인 변경 |
Comment |
필요한 주석 추가 및 변경 |
Rename |
파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
Remove |
파일을 삭제하는 작업만 수행한 경우 |
!BREAKING CHANGE |
커다란 API 변경의 경우 |
!HOTFIX |
급하게 치명적인 버그를 고쳐야 하는 경우 |
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "auto"
}
- 여행 일정 공유 사용자가 직접 작성한 여행 일정을 함께 여행하는 친구들과 쉽게 공유할 수 있는 기능을 추가합니다.
- AI를 활용한 여행 일정 및 동선 제시 GPT API를 활용하여 여행 기간을 입력 시, 여행 일정 및 동선을 자동으로 제시합니다.
- API호출 다 받아서 DB에 저장하기
- 여행지 후기 작성 서비스 구현
- Kakao, Google O Auth 구현
- 지도 페이지에서 재탐색 했을 때 지도 확대 레벨 수정 (지도가 2중으로 겹치는 현상? 때문에 이상하게 보임)