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; 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; 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/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 = () => { 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;