feat: apply empty section on review page (#317)

sharemindteam · Jun 27, 2024 · 39761c8 · 39761c8
1 parent ff7d39c
commit 39761c8
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 48 deletions.
diff --git a/src/components/Common/EmptySection.tsx b/src/components/Common/EmptySection.tsx
@@ -22,7 +22,11 @@ const EmptySection = ({ title, subtitle }: EmptySectionProps) => {
       <EmptyIcon />
       {title ? <Heading>{title}</Heading> : null}
       <Space height="1.5rem" />
-      {subtitle ? <Body2>{subtitle}</Body2> : null}
+      {subtitle ? (
+        <Body2 style={{ whiteSpace: 'pre-wrap', textAlign: 'center' }}>
+          {subtitle}
+        </Body2>
+      ) : null}
     </EmptyWrapper>
   );
 };

diff --git a/src/pages/Buyer/BuyerReviewManage.tsx b/src/pages/Buyer/BuyerReviewManage.tsx
@@ -5,6 +5,7 @@ import { ReviewModal } from 'components/Buyer/BuyerReviewManage/ReviewModal';
 import { ReviewWroteCard } from 'components/Buyer/BuyerReviewManage/ReviewWroteCard';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
 import { BackDrop } from 'components/Common/BackDrop';
+import EmptySection from 'components/Common/EmptySection';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -15,6 +16,10 @@ import { Heading } from 'styles/font';
 import { isModifyReviewState, scrollLockState } from 'utils/atom';
 import { BuyerReview } from 'utils/type';
 
+//
+//
+//
+
 export const BuyerReviewManage = () => {
   const navigate = useNavigate();
   //리뷰 작성이면 true 남긴 리뷰면 false
@@ -32,6 +37,13 @@ export const BuyerReviewManage = () => {
 
   const preventRef = useRef(true); // 중복 방지 옵션
 
+  const emptySectionText = isReviewWrite
+    ? { title: '아직 작성할 리뷰가 없어요' }
+    : {
+        title: '아직 남긴 리뷰가 없어요',
+        subtitle: '진행한 상담이 있다면,\n리뷰 작성 탭에서 리뷰를 남겨주세요!',
+      };
+
   /**
    *
    */
@@ -82,6 +94,74 @@ export const BuyerReviewManage = () => {
     onIntersect,
   });
 
+  /**
+   *
+   */
+  const renderReviewList = () => {
+    if (reviewData.length === 0) {
+      return (
+        <EmptySection
+          title={emptySectionText.title}
+          subtitle={emptySectionText.subtitle}
+        />
+      );
+    }
+
+    return (
+      <>
+        {isReviewWrite ? (
+          <CardWrapper>
+            {reviewData.map((value) => {
+              return (
+                <ReviewManageCard key={value?.reviewId} reviewData={value} />
+              );
+            })}
+            {!isLastElem ? (
+              <div
+                ref={setTarget}
+                style={{
+                  height: '3.5rem',
+                  width: '10rem',
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  height: '3.5rem',
+                  width: '10rem',
+                }}
+              />
+            )}
+          </CardWrapper>
+        ) : (
+          <CardWrapper>
+            {reviewData.map((value) => {
+              return (
+                <ReviewWroteCard key={value?.reviewId} reviewData={value} />
+              );
+            })}
+            {!isLastElem ? (
+              <div
+                ref={setTarget}
+                style={{
+                  height: '3.5rem',
+                  width: '10rem',
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  height: '3.5rem',
+                  width: '10rem',
+                }}
+              />
+            )}
+          </CardWrapper>
+        )}
+      </>
+    );
+  };
+
   //
   //
   //
@@ -126,53 +206,9 @@ export const BuyerReviewManage = () => {
         <Heading color={Grey1}>리뷰관리</Heading>
       </HeaderWrapper>
       <ReviewManageNav isWrite={isReviewWrite} setIsWrite={setIsReviewWrite} />
-      {isReviewWrite ? (
-        <CardWrapper>
-          {reviewData.map((value) => {
-            return (
-              <ReviewManageCard key={value?.reviewId} reviewData={value} />
-            );
-          })}
-          {!isLastElem ? (
-            <div
-              ref={setTarget}
-              style={{
-                height: '3.5rem',
-                width: '10rem',
-              }}
-            />
-          ) : (
-            <div
-              style={{
-                height: '3.5rem',
-                width: '10rem',
-              }}
-            />
-          )}
-        </CardWrapper>
-      ) : (
-        <CardWrapper>
-          {reviewData.map((value) => {
-            return <ReviewWroteCard key={value?.reviewId} reviewData={value} />;
-          })}
-          {!isLastElem ? (
-            <div
-              ref={setTarget}
-              style={{
-                height: '3.5rem',
-                width: '10rem',
-              }}
-            />
-          ) : (
-            <div
-              style={{
-                height: '3.5rem',
-                width: '10rem',
-              }}
-            />
-          )}
-        </CardWrapper>
-      )}
+
+      {renderReviewList()}
+
       {isModalOpen ? (
         <>
           <BackDrop