@uniS2: React + JavaScript 프로젝트 개인 레포
멋쟁이 🔟조: TypeScript, Next.js 마이그레이션 진행 중
- 아이디: uniS2@naver.com
- 비밀번호: usertest1
pnpm i / pnpm install
pnpm dev
- 프로젝트 이름 : WonT ( We on Trip )
- 프로젝트 목적 : 여행 일정 관리 구현
- 프로젝트 기간 : 230831 ~ 230924
- 배포주소 : WonT
-
전체 페이지
- Zustand 및 TanStack Query 라이브러리 사용
usdNavigate()또는<Link />를 이용한 경로 이동
-
지역 선택 페이지 (TripLocalPage)
- 데이터 Read, Create (GET, POST)
- localStore() 이용한 상태 관리
-
날짜 선택 페이지 (TripCalendarPage)
- 데이터 Update (PUT)
- useDateStore() 이용한 상태 관리
- 로그인 유저 정보를 이용한 TanStack Query 활용
- react-calendar 활용한 달력 커스텀 및 접근성 개선
-
장소 및 숙소 선택 페이지 (TripPlacePage, MyHotelPage)
-
로그인 유저 정보 활용한 TanStack Query 활용
-
useToggleTripMenuStore(), useMapStore(), useScheduleStore() 이용한 상태관리
-
kakao Map API 활용한 선택 지역 실시간 정보 렌더링 기능 구현
- 현재 선택한 지역으로 중심 좌표 검색 및 설정 (지도 기본값)
- 장소/숙소 카테고리 검색결과 마커로 표시 (최대 15개)
- 마커로 표시된 장소목록 렌더링 및 선택 버튼 구현
- 지도 이동시 중심 좌표 업데이트 및 리렌더링
-
-
나의 일정 상세 페이지 (MyScheduleDetailPage)
- 데이터 Read, Delete (GET, DELETE)
- useButtonStore(), useToggleTripMenuStore() 이용한 상태관리
폴더구성
📦src
┣ 📂api
┃ ┗ 📜pocketbase.js
┣ 📂components
┃ ┣ 📂Detail
┃ ┃ ┗ 📜DetailInfo.jsx
┃ ┣ 📂Header
┃ ┃ ┣ 📜BackIcon.jsx
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┣ 📜TripHeader.jsx
┃ ┃ ┗ 📜UserIcon.jsx
┃ ┣ 📂Landing
┃ ┃ ┣ ...
┃ ┣ 📂Main
┃ ┃ ┣ ...
┃ ┣ 📂MyPage
┃ ┃ ┣ ...
┃ ┣ 📂MyScheduleDetail
┃ ┃ ┣ 📜DayScheduleItem.jsx
┃ ┃ ┣ 📜ToggleTotalSchedule.jsx
┃ ┃ ┣ 📜TotalScheduleSummary.jsx
┃ ┃ ┣ 📜TotalScheduleView.jsx
┃ ┃ ┣ 📜TotalScheduleViewHotelDay.jsx
┃ ┃ ┣ 📜TotalScheduleViewImageList.jsx
┃ ┃ ┣ 📜TotalScheduleViewTitle.jsx
┃ ┃ ┗ 📜TotalScheduleViewTopic.jsx
┃ ┣ 📂Sign
┃ ┃ ┣ ...
┃ ┣ 📂Spinner
┃ ┃ ┣ 📜spinner.css
┃ ┃ ┗ 📜Spinner.jsx
┃ ┣ 📂TripCalendar
┃ ┃ ┗ 📜TripCalendar.jsx
┃ ┣ 📂TripEdit
┃ ┃ ┣ 📜AddPlan.jsx
┃ ┃ ┣ 📜ButtonMedium.jsx
┃ ┃ ┣ 📜PlacePlan.jsx
┃ ┃ ┣ 📜PlanDate.jsx
┃ ┃ ┣ 📜ScheduleMap.jsx
┃ ┃ ┣ 📜SelectHotelMap.jsx
┃ ┃ ┣ 📜TripPlaneIcon.jsx
┃ ┃ ┗ 📜TripSchedule.jsx
┃ ┣ 📂TripLocal
┃ ┃ ┣ 📜ButtonSmall.jsx
┃ ┃ ┣ 📜LocalImage.jsx
┃ ┃ ┣ 📜LocalItem.jsx
┃ ┃ ┗ 📜LocalName.jsx
┃ ┣ 📂TripSelect
┃ ┃ ┣ 📜AddButton.jsx
┃ ┃ ┣ 📜AddPlaceItem.jsx
┃ ┃ ┣ 📜AddPlaceItemContent.jsx
┃ ┃ ┣ 📜CheckIcon.jsx
┃ ┃ ┣ 📜HambugerButton.jsx
┃ ┃ ┣ 📜HambugerIcon.jsx
┃ ┃ ┣ 📜MapHotel.jsx
┃ ┃ ┣ 📜MapPlace.jsx
┃ ┃ ┣ 📜PlusIcon.jsx
┃ ┃ ┣ 📜TripHotelItem.jsx
┃ ┃ ┣ 📜TripPlaceImage.jsx
┃ ┃ ┣ 📜TripPlaceInfo.jsx
┃ ┃ ┣ 📜TripPlaceItem.jsx
┃ ┃ ┗ 📜TripPlanMenu.jsx
┃ ┣ 📜BookMark.jsx
┃ ┣ 📜ButtonLarge.jsx
┃ ┣ 📜CloseIcon.jsx
┃ ┣ 📜DefaultImage.jsx
┃ ┣ 📜DeleteButton.jsx
┃ ┣ 📜Footer.jsx
┃ ┣ 📜LocationIcon.jsx
┃ ┣ 📜Logo.jsx
┃ ┣ 📜Map.jsx
┃ ┣ 📜Modal.jsx
┃ ┣ 📜PageHeader.jsx
┃ ┣ 📜ProtectRoute..jsx
┃ ┣ 📜ToggleDownIcon.jsx
┃ ┣ 📜ToggleUpIcon.jsx
┃ ┣ 📜TripPlan.jsx
┃ ┣ 📜TripPlanEditButton.jsx
┃ ┗ 📜TripTitle.jsx
┣ 📂contexts
┃ ┗ 📜Auth.jsx
┣ 📂hooks
┃ ┣ 📜useFetchData.js
┃ ┣ 📜useFetchMySchedule.js
┃ ┣ 📜useRecommendsList.js
┃ ┣ 📜useScheduleList.js
┃ ┣ 📜useStorage.js
┃ ┗ 📜useTravlesList.js
┣ 📂pages
┃ ┣ 📂MyPage
┃ ┃ ┣ ...
┃ ┣ 📜DetailPage.jsx
┃ ┣ 📜LandingPage.jsx
┃ ┣ 📜MainPage.jsx
┃ ┣ 📜MyScheduleDetailPage.jsx
┃ ┣ 📜RootLayout.jsx
┃ ┣ 📜SignInPage.jsx
┃ ┣ 📜SignUpPage.jsx
┃ ┣ 📜TravelsPage.jsx
┃ ┣ 📜TripCalendarPage.jsx
┃ ┣ 📜TripEditPage.jsx
┃ ┣ 📜TripHotelPage.jsx
┃ ┣ 📜TripLocalPage.jsx
┃ ┗ 📜TripPlacePage.jsx
┣ 📂store
┃ ┣ 📜bookmarkStore.js
┃ ┣ 📜buttonStore.js
┃ ┣ 📜createStore.js
┃ ┣ 📜dateStore.js
┃ ┣ 📜localStore.js
┃ ┣ 📜mapStore.js
┃ ┣ 📜markerStore.js
┃ ┣ 📜memoStore.js
┃ ┣ 📜scheduleStore.js
┃ ┣ 📜selectRangeStore.js
┃ ┗ 📜toggleTripMenuStore.js
┣ 📂styles
┃ ┣ 📜calendar.css
┃ ┗ 📜tailwind.css
┣ 📂utils
┃ ┣ 📜createRecord.js
┃ ┣ 📜debounce.js
┃ ┣ 📜encoding.js
┃ ┣ 📜getDDay.js
┃ ┣ 📜getLocalName.js
┃ ┣ 📜getNode.js
┃ ┣ 📜getPocketHostImageURL.js
┃ ┣ 📜getPocketHostURL.js
┃ ┣ 📜getRangeDay.js
┃ ┣ 📜getTripDate.js
┃ ┣ 📜index.js
┃ ┣ 📜propTypes.js
┃ ┗ 📜updateRecord.js
┣ 📜App.jsx
┣ 📜main.jsx
┗ 📜routes.jsx
- 유저플로우 순서로 구성하였습니다.
| TripLocalPage | TripCalendarPage |
|---|---|
 |
 |
| TripPlacePage | MyHotelPage | MyScheduleDetailPage |
|---|---|---|
 |
 |
 |