From 011ccbd3f514f1d4f4c87e1b475b292199c596b4 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:34:23 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20mytrip=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/mainRouter.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx index 4495552a..11048efc 100644 --- a/src/router/mainRouter.tsx +++ b/src/router/mainRouter.tsx @@ -6,6 +6,7 @@ import Detail from '@pages/detail/detail.page'; import ReviewComment from '@pages/reviewComment/reviewComment.page'; import ReviewPosting from '@pages/reviewPosting/reviewPosting.page'; import WishList from '@pages/wishList/wishList.page'; +import MyTripPage from '@pages/myTrip/myTrip.page'; import MyPageReview from '@pages/myPageReview/myPageReview.page'; import { Signup, SignupSuccess, SignupSurvey, SignupInfo } from '@pages/signup'; import { Login, LoginKakao } from '@pages/login'; @@ -29,6 +30,7 @@ const MainRouter = () => { } /> } /> } /> + } /> } /> } /> } /> From c47e2343612b6ca00144bb7ca22736bf5c29bdc4 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:34:38 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20myTrip=20API=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/trips.types.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index cda8b28b..93c3172c 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -1,4 +1,4 @@ -interface TripRequest { +export interface TripRequest { tripName: string; numberOfPeople: number; startDate: string; @@ -6,3 +6,13 @@ interface TripRequest { area: string; subarea: string; } + +export interface MyTripType { + tripId: number; + tripName: string; + startDate: string; + endDate: string; + numberOfTripMembers: number; + tripStatus: string; + tripThumbnailUrl: string; +} From dac6a3b3cc3b704db3953e12ff484ddee8f41c7e Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:34:50 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20myTrip=20API=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/member.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/api/member.ts b/src/api/member.ts index 1e355324..0a5e6093 100644 --- a/src/api/member.ts +++ b/src/api/member.ts @@ -44,9 +44,13 @@ export const deleteMember = async () => { }; // 나의 여정 조회 -export const getMemberTrips = async () => { - const res = await authClient.get(`member/trips`); - return res; +export const getMemberTrips = async (page?: number, size?: number) => { + try { + const res = await authClient.get(`trips?&page=${page}&size=${size}`); + return res.data; + } catch (e) { + console.error(e); + } }; // 나의 관심 여행지 조회 From b18adbc1338b4696b5ebef31ed5cd26500e20110 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:35:19 +0900 Subject: [PATCH 04/12] =?UTF-8?q?fix:=20undefined=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Wish/WishItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Wish/WishItem.tsx b/src/components/Wish/WishItem.tsx index e0cfb679..6b30c0b5 100644 --- a/src/components/Wish/WishItem.tsx +++ b/src/components/Wish/WishItem.tsx @@ -57,7 +57,7 @@ const WishItem: React.FC = ({ wishList }) => { {(Math.ceil(ratingAverage * 100) / 100).toFixed(1)} - ({reviewCount.toLocaleString()}) + ({reviewCount ? reviewCount.toLocaleString() : reviewCount}) @@ -66,7 +66,7 @@ const WishItem: React.FC = ({ wishList }) => { - {likedCount.toLocaleString()} + {likedCount ? likedCount.toLocaleString() : likedCount} From 7841c0d1b793d2e053175e92acb7817f5ca2f8ee Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:35:47 +0900 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=EC=83=89=EA=B9=94=20=EC=84=9E?= =?UTF-8?q?=EC=9D=B8=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/icons/Icons.tsx | 74 +++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ee39a645..46163553 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -119,6 +119,80 @@ export const CalendarIcon: React.FC = ({ ); }; +export const CalendarIcon2: React.FC = ({ size = 25 }) => { + return ( + + + + + + + + + + + + ); +}; + export const HeartIcon: React.FC = ({ size = 25, color = 'black', From b2b329d33d9794251f5d5b2bddfb76936f0487eb Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Fri, 12 Jan 2024 16:36:05 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20nav=EB=B0=94=20mytrip=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=95=84=EC=9D=B4=EC=BD=98=20active?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/nav/Nav.tsx | 45 ++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx index a4f56085..cf3bf6aa 100644 --- a/src/components/common/nav/Nav.tsx +++ b/src/components/common/nav/Nav.tsx @@ -1,5 +1,11 @@ import { useLocation, useNavigate } from 'react-router-dom'; -import { CalendarIcon, HeartIcon, HomeIcon, UserIcon } from '../icons/Icons'; +import { + CalendarIcon, + CalendarIcon2, + HeartIcon, + HomeIcon, + UserIcon, +} from '../icons/Icons'; import { useEffect, useState } from 'react'; import Alert from '../alert/Alert'; @@ -35,12 +41,37 @@ const Nav = () => {

홈

-
navigate('/')} - className="cursor-pointer flex-col items-center justify-center px-2"> - -

일정

-
+ + {isLoggedIn ? ( +
navigate('/mytrip')} + className="cursor-pointer flex-col items-center justify-center px-2"> +
+ {isActive('/mytrip') ? : } +
+

여정

+
+ ) : ( + + 나의 여정 조회를 위해 로그인이 필요합니다. +
+ 로그인 하시겠습니까? + + } + onConfirm={handleConfirm}> +
+
+ +
+

+ 여정 +

+
+ + )} {isLoggedIn ? (
Date: Fri, 12 Jan 2024 16:36:24 +0900 Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=EB=82=98=EC=9D=98=20=EC=97=AC?= =?UTF-8?q?=EC=A0=95=20API=20=EC=97=B0=EB=8F=99=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyTrip/MyTrip.tsx | 58 +++++++++++++++++++++++++ src/components/MyTrip/MyTripItem.tsx | 64 ++++++++++++++++++++++++++++ src/components/MyTrip/MyTripList.tsx | 57 +++++++++++++++++++++++++ src/pages/myTrip/myTrip.page.tsx | 7 +++ 4 files changed, 186 insertions(+) create mode 100644 src/components/MyTrip/MyTrip.tsx create mode 100644 src/components/MyTrip/MyTripItem.tsx create mode 100644 src/components/MyTrip/MyTripList.tsx create mode 100644 src/pages/myTrip/myTrip.page.tsx diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx new file mode 100644 index 00000000..549a3186 --- /dev/null +++ b/src/components/MyTrip/MyTrip.tsx @@ -0,0 +1,58 @@ +import { useInfiniteQuery } from '@tanstack/react-query'; +import { getMemberTrips } from '@api/member'; +import NoDataMessage from '@components/common/noData/NoDataMessage'; +import MyTripList from './MyTripList'; +import { PenIcon } from '@components/common/icons/Icons'; + +const MyTrip = () => { + const { fetchNextPage, hasNextPage, data, isLoading, error } = + useInfiniteQuery({ + queryKey: ['wishList'], + queryFn: ({ pageParam = 0 }) => getMemberTrips(pageParam, 10), + initialPageParam: 0, + getNextPageParam: (lastPage) => { + if ( + lastPage && + lastPage.data && + lastPage.data && + lastPage.data.pageable + ) { + const currentPage = lastPage.data.pageable.pageNumber; + const totalPages = lastPage.data.totalPages; + + if (currentPage < totalPages - 1) { + return currentPage + 1; + } + } + return undefined; + }, + }); + + if (error) { + return
데이터를 불러오는 중 오류가 발생했습니다.
; + } + + return ( +
+
+

나의 여정

+
+ {data?.pages[0].data.content.length > 0 ? ( + + ) : ( + } + /> + )} +
+ ); +}; + +export default MyTrip; diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx new file mode 100644 index 00000000..52e4bcd0 --- /dev/null +++ b/src/components/MyTrip/MyTripItem.tsx @@ -0,0 +1,64 @@ +import { MyTripType } from '@/@types/trips.types'; +import { MoreIcon } from '@components/common/icons/Icons'; + +interface MyTripItemProps { + myTripList: MyTripType; +} + +const MyTripItem: React.FC = ({ myTripList }) => { + const { + tripName, + startDate, + endDate, + numberOfTripMembers, + tripStatus, + tripThumbnailUrl, + } = myTripList; + + const ACTIVE_TRIP = '여행 중'; + + return ( +
+
+
+ 여행지 이미지 +
+ +
+
+
+
+
+ + {tripStatus} + +
+
+ {tripName} +
+
+ {startDate} ~ {endDate} +
+
+
+ {numberOfTripMembers}명과 공유중 +
+
+
+
+
+
+ ); +}; + +export default MyTripItem; diff --git a/src/components/MyTrip/MyTripList.tsx b/src/components/MyTrip/MyTripList.tsx new file mode 100644 index 00000000..fbe9a401 --- /dev/null +++ b/src/components/MyTrip/MyTripList.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { MyTripType } from '@/@types/trips.types'; +import InfiniteScroll from 'react-infinite-scroller'; +import { v4 as uuidv4 } from 'uuid'; +import ToursItemSkeleton from '@components/Tours/ToursItemSkeleton'; +import MyTripItem from './MyTripItem'; + +interface MyTripListProps { + myTripsData: { pages: Array<{ data: { content: MyTripType[] } }> }; + fetchNextPage: () => void; + hasNextPage: boolean; + isLoading: boolean; +} + +const MyTripList: React.FC = ({ + myTripsData, + fetchNextPage, + hasNextPage, + isLoading, +}) => { + if (!myTripsData || myTripsData.pages.length === 0) { + return
데이터를 불러오는 중 오류가 발생했습니다.
; + } + + return ( + fetchNextPage()} + hasMore={hasNextPage} + loader={ +
+
+
Loading...
+
+
+ }> +
+ {isLoading + ? Array.from({ length: 10 }, (_, index) => ( + + )) + : myTripsData.pages.map((group) => ( + + {group?.data.content.map((myTripList: MyTripType) => ( + + ))} + + ))} +
+ + ); +}; + +export default MyTripList; diff --git a/src/pages/myTrip/myTrip.page.tsx b/src/pages/myTrip/myTrip.page.tsx new file mode 100644 index 00000000..a530143c --- /dev/null +++ b/src/pages/myTrip/myTrip.page.tsx @@ -0,0 +1,7 @@ +import MyTrip from '@components/MyTrip/MyTrip'; + +const MyTripPage = () => { + return ; +}; + +export default MyTripPage; From 33edf9fbab888ba7552221be6e08cf9ae3777dbd Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Sun, 14 Jan 2024 11:39:17 +0900 Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=EA=B3=84=ED=9A=8D=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyTrip/CreateMyTripButton.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/MyTrip/CreateMyTripButton.tsx diff --git a/src/components/MyTrip/CreateMyTripButton.tsx b/src/components/MyTrip/CreateMyTripButton.tsx new file mode 100644 index 00000000..347d70ed --- /dev/null +++ b/src/components/MyTrip/CreateMyTripButton.tsx @@ -0,0 +1,9 @@ +const CreateMyTripButton = () => { + return ( +
+ +
+ ); +}; + +export default CreateMyTripButton; From f9e6ee8f1c70007534354c352d5de936e034e3ac Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Sun, 14 Jan 2024 11:39:33 +0900 Subject: [PATCH 09/12] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Wish/Wish.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Wish/Wish.tsx b/src/components/Wish/Wish.tsx index af2d8acb..6a0e219a 100644 --- a/src/components/Wish/Wish.tsx +++ b/src/components/Wish/Wish.tsx @@ -1,9 +1,9 @@ import { useState } from 'react'; import { useInfiniteQuery } from '@tanstack/react-query'; -import { getMemberTours } from '@api/member'; import WishCategory from './WishCategory'; import WishList from './WishList'; import NoDataMessage from '@components/common/noData/NoDataMessage'; +import { getMemberTours } from '@api/member'; import { HeartIcon } from '@components/common/icons/Icons'; const Wish = () => { From 41181150985c47cd72043eec51d0ae0999da2624 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Sun, 14 Jan 2024 11:39:48 +0900 Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20export=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/trips.types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts index 93c3172c..accc7011 100644 --- a/src/@types/trips.types.ts +++ b/src/@types/trips.types.ts @@ -1,4 +1,4 @@ -export interface TripRequest { +interface TripRequest { tripName: string; numberOfPeople: number; startDate: string; @@ -7,7 +7,7 @@ export interface TripRequest { subarea: string; } -export interface MyTripType { +interface MyTripType { tripId: number; tripName: string; startDate: string; From d2671d6e18eced0681205f363fb6d549010b4ed2 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Sun, 14 Jan 2024 11:40:06 +0900 Subject: [PATCH 11/12] =?UTF-8?q?feat:=20=EC=97=AC=EC=A0=95=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyTrip/MyTrip.tsx | 11 ++++++----- src/components/MyTrip/MyTripItem.tsx | 18 +++++++++++++----- src/components/MyTrip/MyTripList.tsx | 1 - src/pages/myTrip/myTrip.page.tsx | 8 +++++++- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx index 549a3186..3d7a7813 100644 --- a/src/components/MyTrip/MyTrip.tsx +++ b/src/components/MyTrip/MyTrip.tsx @@ -1,7 +1,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'; -import { getMemberTrips } from '@api/member'; -import NoDataMessage from '@components/common/noData/NoDataMessage'; import MyTripList from './MyTripList'; +import NoDataMessage from '@components/common/noData/NoDataMessage'; +import { getMemberTrips } from '@api/member'; import { PenIcon } from '@components/common/icons/Icons'; const MyTrip = () => { @@ -33,10 +33,11 @@ const MyTrip = () => { } return ( -
-
-

나의 여정

+
+
+

나의 여정

+ {data?.pages[0].data.content.length > 0 ? ( = ({ myTripList }) => { } = myTripList; const ACTIVE_TRIP = '여행 중'; + const COMPLETED_TRIP = '여행 후'; return (
@@ -33,12 +33,20 @@ const MyTripItem: React.FC = ({ myTripList }) => {
+ className={`inline-flex ${ + tripStatus === ACTIVE_TRIP + ? 'border-cyan-400 bg-cyan-400 ' + : tripStatus === COMPLETED_TRIP + ? 'border-none bg-gray-200' + : 'border-cyan-400 border-cyan-400 ' + } h-[22px] items-center justify-center gap-[8px] rounded-2xl border border-solid px-[8px] py-[10px] pt-[11px]`}> {tripStatus} diff --git a/src/components/MyTrip/MyTripList.tsx b/src/components/MyTrip/MyTripList.tsx index fbe9a401..bfb6ca22 100644 --- a/src/components/MyTrip/MyTripList.tsx +++ b/src/components/MyTrip/MyTripList.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { MyTripType } from '@/@types/trips.types'; import InfiniteScroll from 'react-infinite-scroller'; import { v4 as uuidv4 } from 'uuid'; import ToursItemSkeleton from '@components/Tours/ToursItemSkeleton'; diff --git a/src/pages/myTrip/myTrip.page.tsx b/src/pages/myTrip/myTrip.page.tsx index a530143c..c3310b46 100644 --- a/src/pages/myTrip/myTrip.page.tsx +++ b/src/pages/myTrip/myTrip.page.tsx @@ -1,7 +1,13 @@ import MyTrip from '@components/MyTrip/MyTrip'; +import CreateMyTripButton from '@components/MyTrip/CreateMyTripButton'; const MyTripPage = () => { - return ; + return ( + <> + + + + ); }; export default MyTripPage; From ac835e73ddda38212a4731754368f192df410504 Mon Sep 17 00:00:00 2001 From: NohWookJin Date: Sun, 14 Jan 2024 18:04:05 +0900 Subject: [PATCH 12/12] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=98=EC=9D=98=EC=97=AC=EC=A0=95=20URL?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Mypage/MypageList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Mypage/MypageList.tsx b/src/components/Mypage/MypageList.tsx index 266dad60..ed6dbbae 100644 --- a/src/components/Mypage/MypageList.tsx +++ b/src/components/Mypage/MypageList.tsx @@ -3,7 +3,7 @@ import MypageItem from './MypageItem'; const MypageList = () => { return (
- 나의 여정 + 나의 여정 나의 관심 여행지 나의 리뷰 나의 여행 취향 설정