Merge pull request #163 from FinalDoubleTen/FE-84--feat/myTrip/MarkupAPI

Refactor: 빌드 에러 및 여정 생성 버튼

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;

src/components/MyTrip/CreateMyTripButton.tsx

@@ -0,0 +1,9 @@
+const CreateMyTripButton = () => {
+  return (
+    <div className="sticky bottom-20 z-[100] ml-auto mr-2 flex h-12 w-[119px] items-center justify-center gap-2 rounded-[30px] bg-[#28d8ff] p-2 shadow-[2px_2px_5px_0_rgba(0,0,0,0.2)]">
+      <button className="headline1 pt-[2px] text-white">여행 계획하기</button>
+    </div>
+  );
+};
+
+export default CreateMyTripButton;

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 (
-    <div className="mt-3 min-h-[100vh]">
-      <div className=" mb-6 bg-white py-0.5">
-        <h1 className="title2 pt-3">나의 여정</h1>
+    <div className="mt-3 min-h-[100vh] ">
+      <div className=" sticky top-0 z-[105] bg-white py-[15px]">
+        <h1 className="title2">나의 여정</h1>
       </div>
+
       {data?.pages[0].data.content.length > 0 ? (
         <MyTripList
           myTripsData={data || { pages: [] }}

src/components/MyTrip/MyTripItem.tsx

@@ -1,4 +1,3 @@
-import { MyTripType } from '@/@types/trips.types';
 import { MoreIcon } from '@components/common/icons/Icons';
 
 interface MyTripItemProps {
@@ -16,6 +15,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
   } = myTripList;
 
   const ACTIVE_TRIP = '여행 중';
+  const COMPLETED_TRIP = '여행 후';
 
   return (
     <div className="relative cursor-pointer pb-4">
@@ -33,12 +33,20 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
         <div className="ml-[10px] flex flex-col items-start justify-between gap-[15px]">
           <div className="max-w-[300px]">
             <div
-              className={`inline-flex  ${
-                tripStatus === ACTIVE_TRIP ? 'bg-cyan-400' : 'border-cyan-400'
-              } h-[22px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400  px-[8px] py-[10px] pt-[11px]`}>
+              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]`}>
               <span
                 className={`text-xs font-semibold ${
-                  tripStatus === ACTIVE_TRIP ? 'text-white' : 'text-cyan-400'
+                  tripStatus === ACTIVE_TRIP
+                    ? 'text-white'
+                    : tripStatus === COMPLETED_TRIP
+                      ? 'text-gray4'
+                      : 'text-cyan-400'
                 }`}>
                 {tripStatus}
               </span>

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';

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

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 <MyTrip />;
+  return (
+    <>
+      <MyTrip />
+      <CreateMyTripButton />
+    </>
+  );
 };
 
 export default MyTripPage;