Merge pull request #319 from sharemindteam/feat/add_empty_view_317

[Feat] empty section 공통 컴포넌트 구현 및 결제내역, 리뷰 내역에 적용
sharemindteam · Jun 27, 2024 · bd9049f · bd9049f
2 parents efa2636 + 98c4ca5
commit bd9049f
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 136 deletions.
diff --git a/src/components/Common/EmptySection.tsx b/src/components/Common/EmptySection.tsx
@@ -0,0 +1,49 @@
+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 style={{ whiteSpace: 'pre-wrap', textAlign: 'center' }}>
+          {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;
diff --git 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`