Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] empty section 공통 컴포넌트 구현 및 결제내역, 리뷰 내역에 적용 #319

Merged
merged 4 commits into from
Jun 27, 2024
Merged

[Feat] empty section 공통 컴포넌트 구현 및 결제내역, 리뷰 내역에 적용 #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e12fdde
feat: init empty section component (#317)
kyuhho Jun 27, 2024
ff7d39c
feat: apply empty section on share payment page (#317)
kyuhho Jun 27, 2024
39761c8
feat: apply empty section on review page (#317)
kyuhho Jun 27, 2024
98c4ca5
chore: change to spread expression (#317)
kyuhho Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/components/Common/EmptySection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
214 changes: 125 additions & 89 deletions src/pages/Buyer/BuyerPayment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>(
Expand All @@ -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) {
Expand Down Expand Up @@ -70,6 +79,7 @@ export const BuyerPayment = () => {
}
}
};

//useIntersection에서 unobserve되는지 확인
const onIntersect: IntersectionObserverCallback = async (entry) => {
if (
Expand All @@ -83,6 +93,7 @@ export const BuyerPayment = () => {
preventRef.current = true;
}
};

//현재 대상 및 option을 props로 전달
const { setTarget } = useIntersectionObserver({
root: null,
Expand All @@ -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 (
<>
Expand Down Expand Up @@ -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`
Expand Down
Loading
Loading