[Feat] 셰어 편지 종료 시 리뷰 작성하기 버튼 추가

src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx

@@ -9,18 +9,30 @@ import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import { Heading } from 'styles/font';
 import { Space } from 'components/Common/Space';
 
+//
+//
+//
+
 interface BuyerConsultLetterSectionProps {
   sortType: number;
   isChecked: boolean;
 }
 
+//
+//
+//
+
 export const BuyerConsultLetterSection = ({
   sortType,
   isChecked,
 }: BuyerConsultLetterSectionProps) => {
   const [cardData, setCardData] = useState<consultApiObject[]>([]); //card에 넘길 데이터
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  //
+  //
+  //
   useLayoutEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
@@ -47,8 +59,14 @@ export const BuyerConsultLetterSection = ({
         setIsLoading(false);
       }
     };
+
     fetchData();
   }, [sortType, isChecked, setIsLoading]);
+
+  //
+  //
+  //
+
   if (isLoading) {
     return (
       <>
@@ -64,41 +82,46 @@ export const BuyerConsultLetterSection = ({
         </div>
       </>
     );
-  } else {
-    return (
-      <>
-        {cardData.length !== 0 ? (
-          <BuyerConsultLetterSectionWrapper>
-            {cardData.map((value) => {
-              return (
-                <ConsultCard
-                  key={value.id}
-                  consultStyle={value.consultStyle}
-                  id={value.id}
-                  latestMessageContent={value.latestMessageContent}
-                  latestMessageIsCustomer={value.latestMessageIsCustomer}
-                  latestMessageUpdatedAt={value.latestMessageUpdatedAt}
-                  opponentNickname={value.opponentNickname}
-                  status={value.status}
-                  unreadMessageCount={value.unreadMessageCount}
-                  reviewCompleted={value.reviewCompleted}
-                  consultId={value.consultId}
-                  isLetter={true}
-                />
-              );
-            })}
-            <Space height="4rem" />
-          </BuyerConsultLetterSectionWrapper>
-        ) : (
-          <EmptyWrapper>
-            <EmptyIcon />
-            <Heading>아직 진행한 상담이 없어요</Heading>
-          </EmptyWrapper>
-        )}{' '}
-      </>
-    );
   }
+
+  return (
+    <>
+      {cardData.length !== 0 ? (
+        <BuyerConsultLetterSectionWrapper>
+          {cardData.map((value) => {
+            return (
+              <ConsultCard
+                key={value.id}
+                consultStyle={value.consultStyle}
+                id={value.id}
+                latestMessageContent={value.latestMessageContent}
+                latestMessageIsCustomer={value.latestMessageIsCustomer}
+                latestMessageUpdatedAt={value.latestMessageUpdatedAt}
+                opponentNickname={value.opponentNickname}
+                status={value.status}
+                unreadMessageCount={value.unreadMessageCount}
+                reviewCompleted={value.reviewCompleted}
+                consultId={value.consultId}
+                isLetter={true}
+              />
+            );
+          })}
+          <Space height="4rem" />
+        </BuyerConsultLetterSectionWrapper>
+      ) : (
+        <EmptyWrapper>
+          <EmptyIcon />
+          <Heading>아직 진행한 상담이 없어요</Heading>
+        </EmptyWrapper>
+      )}
+    </>
+  );
 };
+
+//
+//
+//
+
 const BuyerConsultLetterSectionWrapper = styled.section`
   margin-bottom: 2rem;
   display: flex;
@@ -110,6 +133,7 @@ const BuyerConsultLetterSectionWrapper = styled.section`
 const EmptyIcon = styled(Empty)`
   padding: 4.7rem 4.41rem 4.603rem 4.5rem;
 `;
+
 const EmptyWrapper = styled.div`
   margin-top: 10vh;
   display: flex;

src/components/Buyer/BuyerLetter/LetterMainSection.tsx

@@ -5,7 +5,7 @@ import { Body1, Body2, Body3 } from 'styles/font';
 import { Grey1, Grey3, Grey6 } from 'styles/color';
 import { Button } from 'components/Common/Button';
 import { Space } from 'components/Common/Space';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { GetMessagesType } from 'utils/type';
 import { APP_WIDTH } from 'styles/AppStyle';
 
@@ -20,6 +20,10 @@ interface LetterMainSectionProps {
   deadline: string;
 }
 
+interface locationStateType {
+  isReviewCompleted: boolean | null;
+}
+
 //
 //
 //
@@ -31,6 +35,10 @@ export const LetterMainSection = ({
   deadline,
 }: LetterMainSectionProps) => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const { isReviewCompleted } = location.state as locationStateType;
+
+  const isReviewButtonVisible = tagStatus === 3 && isReviewCompleted === false;
 
   const formattedMessage = (message: string | null): JSX.Element[] | null => {
     return message
@@ -145,6 +153,18 @@ export const LetterMainSection = ({
             {formattedMessage(messageResponse.content)}
           </Body2>
         </ContentBox>
+        {isReviewButtonVisible ? (
+          <ButtonWrapper>
+            <Button
+              text="리뷰 작성하기"
+              width="100%"
+              height="5.2rem"
+              onClick={() => {
+                navigate(`/reviewManage`);
+              }}
+            />
+          </ButtonWrapper>
+        ) : null}
       </SectionWrapper>
     );
   }

src/components/Buyer/Common/ConsultCard.tsx

@@ -17,6 +17,10 @@ import { ConsultState } from 'utils/type';
 import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
 import { Button } from 'components/Common/Button';
 
+//
+//
+//
+
 interface ConsultCardProps {
   consultStyle: string;
   id: number;
@@ -30,6 +34,11 @@ interface ConsultCardProps {
   consultId: number | null;
   isLetter: boolean;
 }
+
+//
+//
+//
+
 export const ConsultCard = ({
   consultStyle,
   id,
@@ -50,6 +59,9 @@ export const ConsultCard = ({
 
   const filterdUnreadMessageCount = unreadMessageCount ?? 0;
 
+  /**
+   *
+   */
   const handleReviewClick = (e?: React.MouseEvent<HTMLElement>) => {
     e?.stopPropagation();
     navigate('/reviewManage');
@@ -63,7 +75,9 @@ export const ConsultCard = ({
     <Wrapper
       onClick={() => {
         if (isLetter) {
-          navigate(`/letter/${id}`);
+          navigate(`/letter/${id}`, {
+            state: { isReviewCompleted: reviewCompleted },
+          });
         } else {
           navigate(`/chat/${id}`);
         }