Fix: 리뷰 작성, 헤더 스타일 개선

WePlanPlans · Jan 23, 2024 · 3914deb · 3914deb
1 parent 13979d1
commit 3914deb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 44 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/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>