diff --git a/src/components/Common/EmptySection.tsx b/src/components/Common/EmptySection.tsx new file mode 100644 index 00000000..c2441f4e --- /dev/null +++ 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 ( + + + {title ? {title} : null} + + {subtitle ? ( + + {subtitle} + + ) : null} + + ); +}; + +// +// +// + +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 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(0); // Modal 여부(recoil) const [isModalOpen, setIsModalOpen] = useRecoilState( @@ -32,6 +38,9 @@ export const BuyerPayment = () => { const [isLastElem, setIsLastElem] = useState(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 ; + } + + return ( + <> + + {paymentData.map((value) => { + return ( + + ); + })} + + + {!isLastElem ? ( +
+ ) : ( +
+ )} + + ); + }; + + // + // + // useLayoutEffect(() => { setIsLastElem(false); setIsInitialLoading(true); setPaymentData([]); fetchData(0); }, [pageType]); + + // + // + // + if (isInitialLoading) { return ( <> @@ -136,98 +205,65 @@ export const BuyerPayment = () => { ); - } else { - return ( - <> - - { - navigate('/mypage'); - }} - /> - 결제 내역 - - - { - setPageType(0); - }} - > - 결제완료 - - { - setPageType(1); - }} - > - 환불예정 - - + + { + navigate('/mypage'); + }} + /> + 결제 내역 + + + { + setPageType(0); + }} + > + 결제완료 + + { + setPageType(1); + }} + > + 환불예정 + + { + setPageType(2); + }} + > + 환불완료 + + + + {renderPaymentList()} + + {isModalOpen ? ( + <> + { - setPageType(2); - }} - > - 환불완료 - - - - {paymentData.map((value) => { - return ( - - ); - })} - - - {!isLastElem ? ( -
- ) : ( -
- )} - {isModalOpen ? ( - <> - { - //여기서 api 호출 - setIsModalOpen(false); - setScrollLock(false); - }} - /> - - - ) : null} - - ); - } + + ) : null} + + ); }; const CardWrapper = styled.div` diff --git a/src/pages/Buyer/BuyerReviewManage.tsx b/src/pages/Buyer/BuyerReviewManage.tsx index 00abc428..c4b83012 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,69 @@ export const BuyerReviewManage = () => { onIntersect, }); + /** + * + */ + const renderReviewList = () => { + if (reviewData.length === 0) { + return ; + } + + return ( + <> + {isReviewWrite ? ( + + {reviewData.map((value) => { + return ( + + ); + })} + {!isLastElem ? ( +
+ ) : ( +
+ )} + + ) : ( + + {reviewData.map((value) => { + return ( + + ); + })} + {!isLastElem ? ( +
+ ) : ( +
+ )} + + )} + + ); + }; + // // // @@ -126,53 +201,9 @@ export const BuyerReviewManage = () => { 리뷰관리 - {isReviewWrite ? ( - - {reviewData.map((value) => { - return ( - - ); - })} - {!isLastElem ? ( -
- ) : ( -
- )} - - ) : ( - - {reviewData.map((value) => { - return ; - })} - {!isLastElem ? ( -
- ) : ( -
- )} - - )} + + {renderReviewList()} + {isModalOpen ? ( <>