From e12fdde412f9525d25f001586d0e41a08863c552 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Thu, 27 Jun 2024 16:14:06 +0900
Subject: [PATCH 1/4] feat: init empty section component (#317)

---
 src/components/Common/EmptySection.tsx | 45 ++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/Common/EmptySection.tsx

diff --git a/src/components/Common/EmptySection.tsx b/src/components/Common/EmptySection.tsx
new file mode 100644
index 00000000..3a111a87
--- /dev/null
+++ b/src/components/Common/EmptySection.tsx
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { Body2, Heading } from 'styles/font';
+import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
+import { Space } from './Space';
+
+//
+//
+//
+
+interface EmptySectionProps {
+  title?: string;
+  subtitle?: string;
+}
+
+//
+//
+//
+
+const EmptySection = ({ title, subtitle }: EmptySectionProps) => {
+  return (
+    <EmptyWrapper>
+      <EmptyIcon />
+      {title ? <Heading>{title}</Heading> : null}
+      <Space height="1.5rem" />
+      {subtitle ? <Body2>{subtitle}</Body2> : null}
+    </EmptyWrapper>
+  );
+};
+
+//
+//
+//
+
+const EmptyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const EmptyIcon = styled(Empty)`
+  margin-top: 20vh;
+  padding: 4.5rem;
+`;
+
+export default EmptySection;

From ff7d39c6aba210df747fe4bf3eb325ccf760bd0d Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Thu, 27 Jun 2024 16:14:30 +0900
Subject: [PATCH 2/4] feat: apply empty section on share payment page (#317)

---
 src/pages/Buyer/BuyerPayment.tsx | 214 ++++++++++++++++++-------------
 1 file changed, 125 insertions(+), 89 deletions(-)

diff --git a/src/pages/Buyer/BuyerPayment.tsx b/src/pages/Buyer/BuyerPayment.tsx
index f59aaa47..c8c11e96 100644
--- a/src/pages/Buyer/BuyerPayment.tsx
+++ b/src/pages/Buyer/BuyerPayment.tsx
@@ -3,6 +3,7 @@ import { PaymentCard } from 'components/Buyer/BuyerPayment/PaymentCard';
 import { PaymentModal } from 'components/Buyer/BuyerPayment/PaymentModal';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
 import { BackDrop } from 'components/Common/BackDrop';
+import EmptySection from 'components/Common/EmptySection';
 import { Space } from 'components/Common/Space';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import { useLayoutEffect, useRef, useState } from 'react';
@@ -13,9 +14,14 @@ import { Green, Grey1, Grey5, Grey6, White } from 'styles/color';
 import { Button2, Heading } from 'styles/font';
 import { isPaymentModalOpenState, scrollLockState } from 'utils/atom';
 import { PaymentInfo } from 'utils/type';
-// TODO: 찜한 마인더 없을 시 페이지 추후 백 연동 시 구현
+
+//
+//
+//
+
 export const BuyerPayment = () => {
   const navigate = useNavigate();
+
   const [pageType, setPageType] = useState<number>(0);
   // Modal 여부(recoil)
   const [isModalOpen, setIsModalOpen] = useRecoilState<boolean>(
@@ -32,6 +38,9 @@ export const BuyerPayment = () => {
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
   const preventRef = useRef(true); // 중복 방지 옵션
 
+  /**
+   *
+   */
   const fetchData = async (lastId: number) => {
     let statusString = '';
     if (pageType === 0) {
@@ -70,6 +79,7 @@ export const BuyerPayment = () => {
       }
     }
   };
+
   //useIntersection에서 unobserve되는지 확인
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (
@@ -83,6 +93,7 @@ export const BuyerPayment = () => {
       preventRef.current = true;
     }
   };
+
   //현재 대상 및 option을 props로 전달
   const { setTarget } = useIntersectionObserver({
     root: null,
@@ -91,12 +102,70 @@ export const BuyerPayment = () => {
     onIntersect,
   });
 
+  /**
+   *
+   */
+  const renderPaymentList = () => {
+    if (paymentData.length === 0) {
+      return <EmptySection title="아직 결제한 내역이 없어요" />;
+    }
+
+    return (
+      <>
+        <CardWrapper>
+          {paymentData.map((value) => {
+            return (
+              <PaymentCard
+                key={value.paymentId}
+                paymentId={value.paymentId}
+                nickname={value.nickname}
+                consultType={value.consultType}
+                consultState={value.status}
+                price={value.cost}
+                consultDate={value.consultedAt}
+                payDate={value.paidAt}
+                payment={value.method}
+                isPayComplete={pageType === 0}
+                setClickedPaymentId={setClickedPaymentId}
+              />
+            );
+          })}
+        </CardWrapper>
+        <Space height="4rem" />
+        {!isLastElem ? (
+          <div
+            ref={setTarget}
+            style={{
+              height: '3.2rem',
+              width: '10rem',
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              height: '3.2rem',
+              width: '10rem',
+            }}
+          />
+        )}
+      </>
+    );
+  };
+
+  //
+  //
+  //
   useLayoutEffect(() => {
     setIsLastElem(false);
     setIsInitialLoading(true);
     setPaymentData([]);
     fetchData(0);
   }, [pageType]);
+
+  //
+  //
+  //
+
   if (isInitialLoading) {
     return (
       <>
@@ -136,98 +205,65 @@ export const BuyerPayment = () => {
         </ToggleWrapper>
       </>
     );
-  } else {
-    return (
-      <>
-        <HeaderWrapper>
-          <BackIcon
-            onClick={() => {
-              navigate('/mypage');
-            }}
-          />
-          <Heading color={Grey1}>결제 내역</Heading>
-        </HeaderWrapper>
-        <ToggleWrapper>
-          <ToggleButton
-            focus={pageType === 0}
-            onClick={() => {
-              setPageType(0);
-            }}
-          >
-            <Button2 color={White}>결제완료</Button2>
-          </ToggleButton>
-          <ToggleButton
-            focus={pageType === 1}
-            onClick={() => {
-              setPageType(1);
-            }}
-          >
-            <Button2 color={White}>환불예정</Button2>
-          </ToggleButton>
-          <ToggleButton
-            focus={pageType === 2}
+  }
+
+  return (
+    <>
+      <HeaderWrapper>
+        <BackIcon
+          onClick={() => {
+            navigate('/mypage');
+          }}
+        />
+        <Heading color={Grey1}>결제 내역</Heading>
+      </HeaderWrapper>
+      <ToggleWrapper>
+        <ToggleButton
+          focus={pageType === 0}
+          onClick={() => {
+            setPageType(0);
+          }}
+        >
+          <Button2 color={White}>결제완료</Button2>
+        </ToggleButton>
+        <ToggleButton
+          focus={pageType === 1}
+          onClick={() => {
+            setPageType(1);
+          }}
+        >
+          <Button2 color={White}>환불예정</Button2>
+        </ToggleButton>
+        <ToggleButton
+          focus={pageType === 2}
+          onClick={() => {
+            setPageType(2);
+          }}
+        >
+          <Button2 color={White}>환불완료</Button2>
+        </ToggleButton>
+      </ToggleWrapper>
+
+      {renderPaymentList()}
+
+      {isModalOpen ? (
+        <>
+          <BackDrop
             onClick={() => {
-              setPageType(2);
-            }}
-          >
-            <Button2 color={White}>환불완료</Button2>
-          </ToggleButton>
-        </ToggleWrapper>
-        <CardWrapper>
-          {paymentData.map((value) => {
-            return (
-              <PaymentCard
-                key={value.paymentId}
-                paymentId={value.paymentId}
-                nickname={value.nickname}
-                consultType={value.consultType}
-                consultState={value.status}
-                price={value.cost}
-                consultDate={value.consultedAt}
-                payDate={value.paidAt}
-                payment={value.method}
-                isPayComplete={pageType === 0}
-                setClickedPaymentId={setClickedPaymentId}
-              />
-            );
-          })}
-        </CardWrapper>
-        <Space height="4rem" />
-        {!isLastElem ? (
-          <div
-            ref={setTarget}
-            style={{
-              height: '3.2rem',
-              width: '10rem',
+              //여기서 api 호출
+              setIsModalOpen(false);
+              setScrollLock(false);
             }}
           />
-        ) : (
-          <div
-            style={{
-              height: '3.2rem',
-              width: '10rem',
-            }}
+          <PaymentModal
+            clickedPaymentId={clickedPaymentId}
+            paymentData={paymentData}
+            setPaymentData={setPaymentData}
           />
-        )}
-        {isModalOpen ? (
-          <>
-            <BackDrop
-              onClick={() => {
-                //여기서 api 호출
-                setIsModalOpen(false);
-                setScrollLock(false);
-              }}
-            />
-            <PaymentModal
-              clickedPaymentId={clickedPaymentId}
-              paymentData={paymentData}
-              setPaymentData={setPaymentData}
-            />
-          </>
-        ) : null}
-      </>
-    );
-  }
+        </>
+      ) : null}
+    </>
+  );
 };
 
 const CardWrapper = styled.div`

From 39761c88577337a0a5ee1aed8bc5bc8f39349536 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Thu, 27 Jun 2024 16:40:22 +0900
Subject: [PATCH 3/4] feat: apply empty section on review page (#317)

---
 src/components/Common/EmptySection.tsx |   6 +-
 src/pages/Buyer/BuyerReviewManage.tsx  | 130 ++++++++++++++++---------
 2 files changed, 88 insertions(+), 48 deletions(-)

diff --git a/src/components/Common/EmptySection.tsx b/src/components/Common/EmptySection.tsx
index 3a111a87..c2441f4e 100644
--- 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
index 00abc428..e8ea6a2a 100644
--- 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

From 98c4ca55a59f3bac61c19277ba1f8cf8acce4577 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Thu, 27 Jun 2024 16:43:24 +0900
Subject: [PATCH 4/4] chore: change to spread expression (#317)

---
 src/pages/Buyer/BuyerReviewManage.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/Buyer/BuyerReviewManage.tsx b/src/pages/Buyer/BuyerReviewManage.tsx
index e8ea6a2a..c4b83012 100644
--- a/src/pages/Buyer/BuyerReviewManage.tsx
+++ b/src/pages/Buyer/BuyerReviewManage.tsx
@@ -99,12 +99,7 @@ export const BuyerReviewManage = () => {
    */
   const renderReviewList = () => {
     if (reviewData.length === 0) {
-      return (
-        <EmptySection
-          title={emptySectionText.title}
-          subtitle={emptySectionText.subtitle}
-        />
-      );
+      return <EmptySection {...emptySectionText} />;
     }
 
     return (