Merge pull request #271 from WePlanPlans/FE-83--feat/myTrip

QA: 여정페이지, 상세페이지 기능 및 디자인 일부 수정
WePlanPlans · Jan 25, 2024 · aaf53e5 · aaf53e5
2 parents 1a62e7c + daae2af
commit aaf53e5
Show file tree

Hide file tree

Showing 23 changed files with 235 additions and 171 deletions.
diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -113,8 +113,8 @@ const DetailAddSchedule = () => {
         <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
           <Dialog.Trigger asChild>
             <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
-              <CalendarIcon className="mb-[2px]" />
-              <span className="text-sm ">일정 추가</span>
+              <CalendarIcon className="mb-[2px]" color="#5E5E5E" />
+              <span className="text-sm text-gray5">일정 추가</span>
             </button>
           </Dialog.Trigger>
           <Dialog.Portal>
@@ -272,8 +272,8 @@ const DetailAddSchedule = () => {
           }
           onConfirm={() => handleNavigate('/login')}>
           <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
-            <CalendarIcon className="mb-[2px]" />
-            <span className="text-sm ">일정 추가</span>
+            <CalendarIcon className="mb-[2px]" color="#5E5E5E" />
+            <span className="text-sm text-gray5">일정 추가</span>
           </button>
         </Alert>
       )}

diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx
@@ -48,8 +48,8 @@ export default function DetailTourButtons({
         <button
           onClick={handlePostingReivew}
           className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4">
-          <PenIcon className="mt-[3px]" />
-          <span className="text-sm ">리뷰 쓰기</span>
+          <PenIcon className="mt-[0.5px]" color="#5E5E5E" />
+          <span className="text-sm text-gray5">리뷰 쓰기</span>
         </button>
       </div>
     </>

diff --git a/src/components/DetailSectionTop/DetailToursInfo.tsx b/src/components/DetailSectionTop/DetailToursInfo.tsx
@@ -9,17 +9,15 @@ export default function DetailToursInfo({ infoData }: DetailToursInfoProps) {
 
   return (
     <>
-      <div className="column mt-1 flex aspect-[3/2] h-[11.938rem] w-full items-start overflow-hidden rounded-lg">
+      <div className="column flex aspect-[3/2] max-h-[176px] w-full items-start overflow-hidden rounded-lg">
         <img
           src={originalThumbnailUrl}
           alt="tour-image"
           className="h-full w-full"
         />
       </div>
       <div className="mt-1 flex w-full items-center justify-between py-2">
-        <h1 className="font-['Pretendard'] text-2xl font-bold text-black ">
-          {title}
-        </h1>
+        <h1 className="text-2xl font-bold text-black ">{title}</h1>
         <Like liked={liked} id={id} />
       </div>
     </>

diff --git a/src/components/DetailSectionTop/DetailToursMap.tsx b/src/components/DetailSectionTop/DetailToursMap.tsx
@@ -17,7 +17,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
 
   const MapStyle = {
     width: '100%',
-    height: '180px',
+    height: '160px',
     marginTop: '5px',
     marginBottom: '15px',
   };
@@ -42,7 +42,7 @@ export default function DetailToursMap({ mapData }: DetailToursMapProps) {
       <div className="flex-col items-start">
         <div className="mb-[10px] ml-[-2.5px] flex items-center">
           <MapIcon size={24} fill="#888888" color="none" />
-          <p className="min-w-[310px] flex-shrink-0 flex-grow-0 overflow-hidden text-left text-sm text-[#1e1e1e]">
+          <p className="max-w-[325px] flex-shrink-0 flex-grow-0 overflow-hidden truncate text-left text-sm text-[#1e1e1e]">
             {fullAddress}
           </p>
         </div>

diff --git a/src/components/DetailSectionTop/DetailToursRating.tsx b/src/components/DetailSectionTop/DetailToursRating.tsx
@@ -44,7 +44,7 @@ export default function DetailToursRating({
       <div className="flex w-full cursor-pointer items-center">
         {STAR_IDX_ARR.map((item, idx) => {
           return (
-            <span key={`${item}+${idx}`}>
+            <span key={`${item}+${idx}`} className="pr-[3px]">
               <svg
                 width="16"
                 height="15"
@@ -67,8 +67,8 @@ export default function DetailToursRating({
             </span>
           );
         })}
-        <div className="h-3 pl-1">
-          <p className="text-xs font-normal leading-4 text-gray4 ">
+        <div className="h-3 pl-[1px]">
+          <p className="text-[14px] font-normal leading-4 text-gray4 ">
             ({reviewTotalCount})
           </p>
         </div>

diff --git a/src/components/MyTrip/MyTrip.tsx b/src/components/MyTrip/MyTrip.tsx
@@ -32,7 +32,7 @@ const MyTrip = () => {
   return (
     <div className="mt-3 min-h-[100vh]">
       <div className="pb-[15px]">
-        <h1 className="text-2xl font-bold text-black ">나의 여정</h1>
+        <h1 className="text-[24px] font-bold text-gray7">나의 여정</h1>
       </div>
       {data.length > 0 ? (
         <>
@@ -42,7 +42,7 @@ const MyTrip = () => {
         </>
       ) : (
         <NoDataMessage
-          message1="저장된 여정 목록이 없습니다."
+          message1="참여하고 있는 여정이 없어요."
           message2="새로운 여행을 계획해보세요!"
           icon={<PenIcon size={44} fill="#EDEDED" color="#EDEDED" />}
         />

diff --git a/src/components/MyTrip/MyTripAfterList.tsx b/src/components/MyTrip/MyTripAfterList.tsx
@@ -17,18 +17,22 @@ const MyTripAfterList: React.FC<MyTripIngListProps> = ({ myTripsData }) => {
       new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
   );
 
-  return (
-    <>
-      <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) => (
-          <MyTripItem key={uuidv4()} myTripList={myTripList} />
-        ))}
-      </div>
-    </>
-  );
+  if (sortedTrips.length > 0) {
+    return (
+      <>
+        <div className="mb-[10px] mt-[30px]">
+          <h1 className="text-[18px] font-bold text-gray7">지난 여행</h1>
+        </div>
+        <div className="no-scrollbar grid grid-cols-1 gap-[5px] overflow-y-scroll">
+          {sortedTrips.map((myTripList: MyTripType) => (
+            <MyTripItem key={uuidv4()} myTripList={myTripList} />
+          ))}
+        </div>
+      </>
+    );
+  } else {
+    return null;
+  }
 };
 
 export default MyTripAfterList;
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-[10px] mt-[40px]">
-        <h1 className="text-xl font-bold text-stone-900">다가오는 여행</h1>
+      <div className="mb-[10px] mt-[30px]">
+        <h1 className="text-[18px] font-bold text-gray7">다가오는 여행</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
@@ -19,7 +19,7 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
       <div className="flex">
         <div>
           <img
-            className="h-10 min-h-10 w-10 rounded-3xl rounded-lg object-cover"
+            className="h-10 min-h-10 w-10 rounded-3xl  object-cover"
             src={tripThumbnailUrl}
             alt="여행지 이미지"
           />
@@ -30,13 +30,13 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
           </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-white ">
+          <div className="mt-[6px]">
+            <div className="w-56 truncate text-[15px] font-bold text-white ">
               {tripName}
             </div>
 
-            <div className="text-xs font-semibold text-white">
-              {startDate.replace(/-/g, '.')} ~{' '}
+            <div className="mt-[4px] text-xs font-semibold text-white">
+              {startDate.replace(/-/g, '.')} -{' '}
               {endDate.replace(/-/g, '.').split('2024.')}{' '}
               {tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
             </div>

diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx
@@ -66,10 +66,10 @@ 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-semibold text-stone-900">
+                <div className="truncate text-[15px] text-base font-bold text-stone-900">
                   {tripName}
                 </div>
-                <div className="text-sm font-normal text-zinc-500">
+                <div className="text-[14px] font-normal text-gray5">
                   {startDate.replace(/-/g, '.')} -{' '}
                   {endDate.replace(/-/g, '.').split('2024.')}
                   {tripDuration === '0박 1일' ? null : ` (${tripDuration})`}

diff --git a/src/components/Trip/LikedToursList.tsx b/src/components/Trip/LikedToursList.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useInfiniteQuery } from '@tanstack/react-query';
 
@@ -8,8 +8,10 @@ import NoDataMessage from '@components/common/noData/NoDataMessage';
 
 import { getTripsLike } from '@api/trips';
 import { HeartIcon, NewIcon } from '@components/common/icons/Icons';
+import Alert from '@components/common/alert/Alert';
 
 export const LikedToursList = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
   const [selectedContentTypeId, setSelectedContentTypeId] = useState<
     null | number
   >(null);
@@ -18,7 +20,7 @@ export const LikedToursList = () => {
   const { id: tripId } = useParams();
 
   if (!tripId) {
-    return;
+    return null;
   }
 
   const { fetchNextPage, hasNextPage, data, isLoading, error } =
@@ -52,8 +54,21 @@ export const LikedToursList = () => {
     setSelectedContentTypeId(contentTypeId);
   };
 
+  const handleConfirm = () => {
+    navigate('/login');
+  };
+
+  useEffect(() => {
+    const token = window.localStorage.getItem('accessToken');
+    if (token) {
+      setIsLoggedIn(true);
+    } else {
+      setIsLoggedIn(false);
+    }
+  }, []);
+
   return (
-    <div className="realtive pt-5">
+    <div className="realtive mt-[10px]">
       <LikedToursListCategory onCategoryClick={handleCategoryClick} />
 
       {data?.pages[0].data.content.length > 0 ? (
@@ -70,24 +85,46 @@ export const LikedToursList = () => {
       ) : (
         <div className="relative min-h-[60vh]">
           <NoDataMessage
-            message1="우리의 관심 목록이 없습니다."
+            message1="우리의 관심 목록이 비어있어요."
             message2="가고 싶은 장소를 추가해보세요!"
             icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
           />
         </div>
       )}
 
       {/* 우리의 관심 여행지 추가 버튼 => 검색 라우터 이동 */}
-      <div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
-        <button
-          onClick={() => navigate('add')}
-          className="flex items-center justify-between">
-          <NewIcon />
-          <span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
-            우리의 관심목록 추가
-          </span>
-        </button>
-      </div>
+      {isLoggedIn ? (
+        <div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
+          <button
+            onClick={() => navigate('add')}
+            className="flex items-center justify-between">
+            <NewIcon />
+            <span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
+              우리의 관심목록 추가
+            </span>
+          </button>
+        </div>
+      ) : (
+        <Alert
+          title={'로그인'}
+          message={
+            <>
+              관심 여행지를 추가하려면 로그인이 필요해요.
+              <br />
+              로그인하러 가볼까요?
+            </>
+          }
+          onConfirm={handleConfirm}>
+          <div className="sticky bottom-[65px] left-1/2 z-[100] inline-flex h-10 w-[168px] -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-3xl border border-solid border-cyan-400 bg-white px-3.5">
+            <button className="flex items-center justify-between">
+              <NewIcon />
+              <span className="ml-[5px] mt-[0.5px] text-sm font-semibold text-cyan-400">
+                우리의 관심목록 추가
+              </span>
+            </button>
+          </div>
+        </Alert>
+      )}
     </div>
   );
 };
diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategory.tsx
@@ -12,9 +12,9 @@ const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({
 
   const categories = [
     { code: null, name: '전체' },
-    { code: 12, name: '관광지' },
     { code: 32, name: '숙소' },
     { code: 39, name: '식당' },
+    { code: 12, name: '관광지' },
   ];
 
   const handleSelectCategory = (name: string) => {
@@ -27,7 +27,7 @@ const LikedToursListCategory: React.FC<LikedToursListCategoryProps> = ({
   };
 
   return (
-    <div className="no-scrollbar mb-6 flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
+    <div className="no-scrollbar mb-[10px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
       {categories.map((category) => {
         return (
           <LikedToursListCategoryItem

diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
@@ -22,7 +22,7 @@ export const LikedToursListCategoryItem: React.FC<
   return (
     <button
       onClick={handleCategoryClick}
-      className={`body4 mr-[4px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[8px] flex h-[32px] w-[58px] items-center justify-center whitespace-nowrap  rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
       {category.name}
     </button>
   );

diff --git a/src/components/Trip/LikedToursLists/LikedToursListItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListItem.tsx
@@ -72,20 +72,20 @@ const LikedToursListItem: React.FC<LikedToursListItemProps> = ({
 
   return (
     <div
-      className={`relative cursor-pointer pb-[4px]`}
+      className={`relative mb-[4px] cursor-pointer`}
       onClick={() => navigate(`/detail/${tourItemId}`)}>
       <div className="flex">
         <div>
           <img
-            className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[16px] object-cover"
+            className="rounded-1 h-[72px] max-h-[72px] w-[72px] rounded-[8px] object-cover"
             src={smallThumbnailUrl}
             alt="여행지 이미지"
           />
         </div>
 
         <div className="ml-[8px] flex flex-col items-start justify-between gap-[1px]">
           <div className="max-w-[270px]">
-            <p className=" truncate  whitespace-nowrap px-[2px] font-['Pretendard'] text-[16px] font-bold leading-normal text-black">
+            <p className="truncate whitespace-nowrap  px-[2px] text-[16px] font-bold leading-normal text-black">
               {title}
             </p>
 

diff --git a/src/components/Wish/Wish.tsx b/src/components/Wish/Wish.tsx
@@ -44,7 +44,7 @@ const Wish = () => {
   }
 
   return (
-    <div className="mt-3 min-h-[100vh]">
+    <div className="mt-[10px] min-h-[100vh]">
       <div className="sticky top-0 z-[105] bg-white py-0.5">
         <h1 className="title2 pt-3">나의 관심 목록</h1>
         <WishCategory onCategoryClick={handleCategoryClick} />
@@ -60,7 +60,7 @@ const Wish = () => {
         />
       ) : (
         <NoDataMessage
-          message1="저장된 관심 목록이 없습니다."
+          message1="관심 여행지가 없어요."
           message2="가고 싶은 장소를 저장해보세요!"
           icon={<HeartIcon size={44} fill="#EDEDED" color="#EDEDED" />}
         />

diff --git a/src/components/Wish/WishCategory.tsx b/src/components/Wish/WishCategory.tsx
@@ -10,9 +10,9 @@ const WishCategory: React.FC<WishCategoryProps> = ({ onCategoryClick }) => {
 
   const categories = [
     { code: null, name: '전체' },
-    { code: 12, name: '관광지' },
     { code: 32, name: '숙소' },
     { code: 39, name: '식당' },
+    { code: 12, name: '관광지' },
   ];
 
   const handleSelectCategory = (name: string) => {
@@ -25,7 +25,7 @@ const WishCategory: React.FC<WishCategoryProps> = ({ onCategoryClick }) => {
   };
 
   return (
-    <div className="no-scrollbar mb-6 mt-3 flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
+    <div className="no-scrollbar mb-[10px] mt-[10px] flex w-[100%] overflow-scroll overflow-y-hidden bg-white">
       {categories.map((category) => {
         return (
           <WishCategoryItem