Merge pull request #175 from FinalDoubleTen/FE-83--feat/myTrip

Style: 여정목록조회 디자인 수정 반영
WePlanPlans · Jan 16, 2024 · fbd20b4 · fbd20b4
2 parents d12a20f + c38a0ca
commit fbd20b4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/src/components/MyTrip/MyTripAfterList.tsx b/src/components/MyTrip/MyTripAfterList.tsx
@@ -19,8 +19,8 @@ const MyTripAfterList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
 
   return (
     <>
-      <div className="mb-[15px] mt-[30px]">
-        <h1 className='"text-black text-lg font-bold'>지난 여행</h1>
+      <div className="mb-[10px] mt-[40px]">
+        <h1 className="text-xl font-bold text-stone-900">지난 여행</h1>
       </div>
       <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
         {sortedTrips.map((myTripList: MyTripType) => (

diff --git a/src/components/MyTrip/MyTripBeforeList.tsx b/src/components/MyTrip/MyTripBeforeList.tsx
@@ -14,8 +14,8 @@ const MyTripBeforeList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
 
   return (
     <>
-      <div className="mb-[15px] mt-[30px]">
-        <h1 className='"text-black text-lg font-bold'>다가오는 여행</h1>
+      <div className="mb-[10px] mt-[40px]">
+        <h1 className="text-xl font-bold text-stone-900">다가오는 여행</h1>
       </div>
       <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
         {myTripsData.map((myTripList: MyTripType) => (

diff --git a/src/components/MyTrip/MyTripIngItem.tsx b/src/components/MyTrip/MyTripIngItem.tsx
@@ -14,26 +14,28 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
 
   return (
     <div
-      className="relative flex h-16 w-full cursor-pointer items-center rounded-lg border border-solid border-cyan-400 px-3"
+      className="relative flex h-16 w-full cursor-pointer items-center rounded-2xl border border-solid border-cyan-400 bg-cyan-400 px-3"
       onClick={() => navigate(`/trip/${tripId}`)}>
       <div className="flex">
         <div>
           <img
-            className="rounded-1 h-10 min-h-10 w-10 rounded-lg object-cover"
+            className="h-10 min-h-10 w-10 rounded-3xl rounded-lg object-cover"
             src={tripThumbnailUrl}
             alt="여행지 이미지"
           />
         </div>
-        <div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-cyan-400 px-[8px] py-[10px] pt-[12px]">
-          <span className="text-xs font-semibold text-white">{tripStatus}</span>
+        <div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[13px]">
+          <span className="text-xs font-semibold text-cyan-400">
+            {tripStatus}
+          </span>
         </div>
         <div className="ml-[15px] flex max-w-[300px] flex-col items-start justify-between gap-[15px] ">
           <div className="mt-[4px] ">
-            <div className="w-56 truncate text-sm font-bold text-black ">
+            <div className="w-56 truncate text-sm font-bold text-white ">
               {tripName}
             </div>
 
-            <div className="text-xs font-medium tracking-tight text-zinc-500">
+            <div className="text-xs font-semibold text-white">
               {startDate.replace(/-/g, '.')} ~{' '}
               {endDate.replace(/-/g, '.').split('2024.')} ({tripDuration})
             </div>

diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
@@ -66,18 +66,18 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
             </div>
             <div className="ml-[10px] flex w-full flex-col items-start justify-between  ">
               <div className="mt-[1px] ">
-                <div className="truncate text-[15px] text-base font-bold text-black">
+                <div className="truncate text-[15px] text-base font-semibold text-stone-900">
                   {tripName}
                 </div>
-                <div className="text-sm font-medium tracking-tight text-zinc-500">
-                  {startDate.replace(/-/g, '.')} ~{' '}
+                <div className="text-sm font-normal text-zinc-500">
+                  {startDate.replace(/-/g, '.')} -{' '}
                   {endDate.replace(/-/g, '.').split('2024.')} ({tripDuration})
                 </div>
               </div>
 
               <div className="mb-[5px] flex text-xs font-normal text-zinc-500">
-                <UserIcon size={13} fill="gray4" />
-                <span className="ml-[4px]">{numberOfPeople}명과 공유중</span>
+                <UserIcon size={13} fill="#888" color="none" />
+                <span>{numberOfPeople}명과 공유중</span>
               </div>
             </div>
           </div>

diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx
@@ -35,7 +35,7 @@ export const CreateTrip = () => {
     queryFn: () => getMemberTrips(),
   });
 
-  const MY_TRIP_NUMBER = data?.data.numberOfElements + 1;
+  const MY_TRIP_NUMBER = data?.numberOfElements + 1;
   const defaultTitle = `나의 여정 ${MY_TRIP_NUMBER}`;
 
   const handleSubmit = async () => {