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;