Feat: 나의 리뷰 0개 일때 디자인

WePlanPlans · Jan 11, 2024 · f4b510d · f4b510d
1 parent eddf8d1
commit f4b510d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -161,7 +161,7 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
           <div className="mb-4 text-gray7">{content}</div>
         )}
 
-        <div className="flex ">
+        <div className="flex items-center ">
           <div className="flex gap-2">
             {!showMoreKeywords &&
               keywords.slice(0, 2).map((keyword, idx) => (

diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -15,7 +15,7 @@ const DetailAddSchedule = () => {
       <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 ">
           <CalendarIcon className="mb-[5px]" />
-          <span className="text-sm">일정 추가</span>
+          <span className="text-sm ">일정 추가</span>
         </button>
       </Dialog.Trigger>
 

diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx
@@ -46,7 +46,7 @@ export default function DetailTourButtons({ reviewData }: reviewProps) {
           onClick={handlePostingReivew}
           className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
           <PenIcon />
-          <span className="text-sm">리뷰 쓰기</span>
+          <span className="text-sm ">리뷰 쓰기</span>
         </button>
       </div>
     </>

diff --git a/src/components/Mypage/MypageList.tsx b/src/components/Mypage/MypageList.tsx
@@ -5,7 +5,7 @@ const MypageList = () => {
     <div>
       <MypageItem link="/mytour">나의 여정</MypageItem>
       <MypageItem link="/wishlist">나의 관심 여행지</MypageItem>
-      <MypageItem link="/myreview">나의 리뷰</MypageItem>
+      <MypageItem link="/myPageReview">나의 리뷰</MypageItem>
       <MypageItem link="/mypage/survey">나의 여행 취향 설정</MypageItem>
     </div>
   );

diff --git a/src/components/Review/MyReview.tsx b/src/components/Review/MyReview.tsx
@@ -20,6 +20,7 @@ import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import EditDelete from '@components/common/modal/children/EditDelete';
 import MyAlert from '@components/common/modal/children/MyAlert';
 import { alertTypeState } from '@recoil/modal';
+import { PenIcon } from '@components/common/icons/Icons';
 
 export default function MyReview() {
   const [reviewDataLength, setReviewDataLength] = useState<number>(0);
@@ -106,9 +107,16 @@ export default function MyReview() {
         나의 리뷰<span className="pl-1 text-gray4">{reviewDataLength}</span>
       </div>
       {reviewDataLength == 0 && (
-        <div>
-          <div>작성한 리뷰가 없습니다</div>
-          <div>다녀온 여행지의 리뷰를 남겨보세요!</div>
+        <div className="flex h-[500px] flex-col items-center justify-center">
+          <div className="mb-2 flex justify-center">
+            <PenIcon size={50} color="#D7D7D7" />
+          </div>
+          <div className="text-md mb-2 flex justify-center font-bold text-gray4">
+            작성한 리뷰가 없습니다
+          </div>
+          <div className="flex justify-center text-sm text-gray4">
+            다녀온 여행지의 리뷰를 남겨보세요!
+          </div>
         </div>
       )}
       <InfiniteScroll