Merge pull request #249 from FinalDoubleTen/FE-100--feat/DesignQA

Fe 100 feat/design qa
WePlanPlans · Jan 24, 2024 · 962dfef · 962dfef
2 parents 5f1130d + 8028b7e
commit 962dfef
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 66 deletions.
diff --git a/src/components/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx
@@ -1,37 +1,17 @@
 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;
 }
 
 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
@@ -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
@@ -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/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
@@ -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}

diff --git 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
@@ -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>