From 3914deb3ad2bca663fc4a6a3faaeb3ce64ac675b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= <eoseungjun7@naver.com>
Date: Tue, 23 Jan 2024 15:07:20 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20=EB=A6=AC=EB=B7=B0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1,=20=ED=97=A4=EB=8D=94=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Review/ReviewButton.tsx        | 43 +++----------------
 src/components/Review/ReviewPosting.tsx       |  2 +-
 src/components/Review/ReviewRating.tsx        |  4 +-
 src/components/common/header/DetailHeader.tsx |  4 +-
 src/components/common/header/ReviewHeader.tsx |  6 +--
 5 files changed, 15 insertions(+), 44 deletions(-)

diff --git a/src/components/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx
index ca1209a5..11885da3 100644
--- a/src/components/Review/ReviewButton.tsx
+++ b/src/components/Review/ReviewButton.tsx
@@ -1,7 +1,7 @@
 import { ButtonPrimary } from '@components/common/button/Button';
-import { useState, useEffect } from 'react';
-import { contentState, keywordsState, ratingState } from '@recoil/review';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { ratingState } from '@recoil/review';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 
 interface ButtonProps {
   onClick: () => void;
@@ -9,29 +9,9 @@ interface ButtonProps {
 
 const ReviewButton = (props: ButtonProps) => {
   const { onClick } = props;
-  const [content] = useRecoilState(contentState);
-  const keywords = useRecoilValue(keywordsState);
   const rating = useRecoilValue(ratingState);
-  const [isContentValid, setIsContentValid] = useState(false);
-  const [isKeywordsValid, setIsKeywordsValid] = useState(false);
   const [isRatingValid, setIsRatingValid] = useState(false);
 
-  useEffect(() => {
-    if (content.length >= 10) {
-      setIsContentValid(true);
-    } else if (content.length < 10) {
-      setIsContentValid(false);
-    }
-  }, [content]);
-
-  useEffect(() => {
-    if (keywords.length > 0) {
-      setIsKeywordsValid(true);
-    } else if (keywords.length <= 0) {
-      setIsKeywordsValid(false);
-    }
-  }, [keywords]);
-
   useEffect(() => {
     if (rating > 0) {
       setIsRatingValid(true);
@@ -41,28 +21,19 @@ const ReviewButton = (props: ButtonProps) => {
   }, [rating]);
 
   return (
-    <div className="pb-4">
-      {isRatingValid === false && (
-        <div className="mb-2 flex items-center justify-center text-xs text-[#FF0F00]">
-          별점을 입력해주세요
-        </div>
-      )}
-
-      {isRatingValid === true &&
+    <div className=" bottom-0  mt-auto flex w-full items-center justify-center pb-4">
+      {/* {isRatingValid === true &&
         isContentValid === false &&
         isKeywordsValid === false && (
           <div className="mb-2 flex items-center justify-center text-xs text-[#FF0F00]">
             키워드를 선택하거나 텍스트를 10자 이상 입력해주세요
           </div>
-        )}
+        )} */}
 
       <ButtonPrimary
         onClick={onClick}
         className="flex h-[56px] items-center justify-center"
-        disabled={
-          isRatingValid === false ||
-          (isContentValid === false && isKeywordsValid === false)
-        }>
+        disabled={isRatingValid === false}>
         완료
       </ButtonPrimary>
     </div>
diff --git a/src/components/Review/ReviewPosting.tsx b/src/components/Review/ReviewPosting.tsx
index e266e39d..215e164a 100644
--- a/src/components/Review/ReviewPosting.tsx
+++ b/src/components/Review/ReviewPosting.tsx
@@ -17,7 +17,7 @@ export default function ReviewPosting() {
       <div className="mb-5 text-lg font-bold">리뷰를 작성해주세요</div>
       <div className="mb-1 ">
         <textarea
-          className="h-[112px] w-full rounded-md border p-2 text-sm placeholder-gray3 "
+          className="h-[152px] w-full rounded-md border p-2 text-sm placeholder-gray3 "
           placeholder="직접 경험한 솔직한 리뷰를 남겨주세요"
           onChange={handleTextChange}
           value={content}
diff --git a/src/components/Review/ReviewRating.tsx b/src/components/Review/ReviewRating.tsx
index ec41826b..7ec0baed 100644
--- a/src/components/Review/ReviewRating.tsx
+++ b/src/components/Review/ReviewRating.tsx
@@ -25,12 +25,12 @@ const ReviewRating = () => {
 
   return (
     <div className="mb-6 flex flex-col items-center justify-center">
-      <div className="mb-1 text-xl font-bold">{title}</div>
+      <div className="mb-4 text-[20px] font-bold">{title}</div>
       <button className="flex gap-1">
         {Array.from({ length: 5 }, (_, index) => (
           <StarIcon
             key={index}
-            size={30}
+            size={40}
             color="none"
             fill={index < rating ? '#FFEC3E' : '#EDEDED'}
             onClick={() => handleStarClick(index)}
diff --git a/src/components/common/header/DetailHeader.tsx b/src/components/common/header/DetailHeader.tsx
index 8af3d6c5..c008416d 100644
--- a/src/components/common/header/DetailHeader.tsx
+++ b/src/components/common/header/DetailHeader.tsx
@@ -13,8 +13,8 @@ export default function DetailHeader() {
   };
 
   return (
-    <header className="mb-4 flex">
-      <div onClick={goBack} className=" flex cursor-pointer items-center py-2">
+    <header className="mb-10 flex">
+      <div onClick={goBack} className=" flex cursor-pointer items-center">
         <BackIcon />
       </div>
     </header>
diff --git a/src/components/common/header/ReviewHeader.tsx b/src/components/common/header/ReviewHeader.tsx
index 4174a300..486c26f6 100644
--- a/src/components/common/header/ReviewHeader.tsx
+++ b/src/components/common/header/ReviewHeader.tsx
@@ -17,11 +17,11 @@ export default function ReviewHeader() {
   };
 
   return (
-    <header className="mb-4 flex items-center ">
-      <div onClick={goBack} className=" flex cursor-pointer items-center py-2">
+    <header className="mb-8 flex items-center ">
+      <div onClick={goBack} className=" flex cursor-pointer items-center">
         <BackIcon />
       </div>
-      <div className="flex-grow pr-9 text-center text-sm font-bold">
+      <div className="flex-grow justify-center pr-2 text-center text-[15px] font-bold">
         리뷰 쓰기
       </div>
     </header>

From f8c3509b1097954062262ac2b488fa1ccc0fca2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= <eoseungjun7@naver.com>
Date: Tue, 23 Jan 2024 15:47:19 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=EB=B9=84=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?/=EA=B6=8C=ED=95=9Cx=20=EC=8B=9C,=20=EC=97=AC=ED=96=89=EC=B7=A8?=
 =?UTF-8?q?=ED=96=A5=EC=84=A4=EC=A0=95=EB=B2=84=ED=8A=BC=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Trip/PlanTripButton.tsx | 12 +++++-
 src/components/Trip/TripPreference.tsx | 58 +++++++++++++++++---------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx
index 34ce58a5..01cb4eb9 100644
--- a/src/components/Trip/PlanTripButton.tsx
+++ b/src/components/Trip/PlanTripButton.tsx
@@ -1,11 +1,19 @@
 import { PlanColorIcon, RightIcon } from '@components/common/icons/Icons';
 import { useNavigate } from 'react-router-dom';
+import { getMember } from '@api/member';
 
 const PlanTripButton = () => {
   const navigate = useNavigate();
 
-  const handleButtonClick = () => {
-    navigate('plan');
+  const handleButtonClick = async () => {
+    try {
+      const res = await getMember();
+      if (res.data.status === 200) {
+        navigate('plan');
+      }
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   return (
diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
index 3e2e3786..bcc94302 100644
--- a/src/components/Trip/TripPreference.tsx
+++ b/src/components/Trip/TripPreference.tsx
@@ -12,6 +12,7 @@ import { useSetRecoilState, useRecoilState } from 'recoil';
 import { participantsState } from '@recoil/trip';
 import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
 import { useNavigate } from 'react-router-dom';
+import { getMember } from '@api/member';
 
 interface RatioBarParams {
   value: number;
@@ -30,29 +31,46 @@ interface PercentageParams {
 const TripPreferenceButton: React.FC = () => {
   const { tripAuthority } = useGetTripsAuthority();
   const navigate = useNavigate();
+  const [res, setRes] = useState<any>(null);
+
   const handleTrip = () => {
-    if (tripAuthority === 'WRITE') {
-      navigate('/mypage/survey');
-    }
+    navigate('/mypage/survey');
   };
 
-  return (
-    <button
-      onClick={handleTrip}
-      className="mb-[17.5px] mt-[20px] flex w-[335px] items-center rounded-full bg-white px-6 py-4 text-sm">
-      <div className="flex items-center text-gray6">
-        <div>
-          <HeartIcon fill="#888888" color="#888888" size={20} />
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const temp = await getMember();
+        setRes(temp);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (res?.data?.status === 200 && tripAuthority === 'WRITE') {
+    return (
+      <button
+        onClick={handleTrip}
+        className="mb-[17.5px]  flex w-[335px] items-center rounded-full bg-white px-6 py-4 text-sm">
+        <div className="flex items-center text-gray6">
+          <div>
+            <HeartIcon fill="#888888" color="#888888" size={20} />
+          </div>
+          <p className="ml-1.5 text-[14px] text-main1">
+            내 여행 취향 설정하러 가기
+          </p>
         </div>
-        <p className="ml-1.5 text-[14px] text-main1">
-          내 여행 취향 설정하러 가기
-        </p>
-      </div>
-      <div className="ml-auto">
-        <RightIcon fill="#5E5E5E" />
-      </div>
-    </button>
-  );
+        <div className="ml-auto">
+          <RightIcon fill="#5E5E5E" />
+        </div>
+      </button>
+    );
+  } else {
+    return null;
+  }
 };
 
 const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => {
@@ -189,7 +207,7 @@ const TripPreference: React.FC = () => {
   };
 
   return (
-    <div className=" m-[-20px] mt-0 flex flex-col items-center bg-gray1 pb-[20px]  ">
+    <div className=" m-[-20px] mt-0 flex flex-col items-center bg-gray1 pb-[20px] pt-[20px]  ">
       <TripPreferenceButton />
       <div
         onClick={handleButtonClick}