diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx index f0c4f329..1885e97d 100644 --- a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx +++ b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx @@ -9,11 +9,19 @@ import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg'; import { Heading } from 'styles/font'; import { Space } from 'components/Common/Space'; +// +// +// + interface BuyerConsultLetterSectionProps { sortType: number; isChecked: boolean; } +// +// +// + export const BuyerConsultLetterSection = ({ sortType, isChecked, @@ -21,6 +29,10 @@ export const BuyerConsultLetterSection = ({ const [cardData, setCardData] = useState([]); //card에 넘길 데이터 const [isLoading, setIsLoading] = useState(true); + + // + // + // useLayoutEffect(() => { const fetchData = async () => { setIsLoading(true); @@ -47,8 +59,14 @@ export const BuyerConsultLetterSection = ({ setIsLoading(false); } }; + fetchData(); }, [sortType, isChecked, setIsLoading]); + + // + // + // + if (isLoading) { return ( <> @@ -64,41 +82,46 @@ export const BuyerConsultLetterSection = ({ ); - } else { - return ( - <> - {cardData.length !== 0 ? ( - - {cardData.map((value) => { - return ( - - ); - })} - - - ) : ( - - - 아직 진행한 상담이 없어요 - - )}{' '} - - ); } + + return ( + <> + {cardData.length !== 0 ? ( + + {cardData.map((value) => { + return ( + + ); + })} + + + ) : ( + + + 아직 진행한 상담이 없어요 + + )} + + ); }; + +// +// +// + const BuyerConsultLetterSectionWrapper = styled.section` margin-bottom: 2rem; display: flex; @@ -110,6 +133,7 @@ const BuyerConsultLetterSectionWrapper = styled.section` const EmptyIcon = styled(Empty)` padding: 4.7rem 4.41rem 4.603rem 4.5rem; `; + const EmptyWrapper = styled.div` margin-top: 10vh; display: flex; diff --git a/src/components/Buyer/BuyerLetter/LetterMainSection.tsx b/src/components/Buyer/BuyerLetter/LetterMainSection.tsx index 8d401764..334d056f 100644 --- a/src/components/Buyer/BuyerLetter/LetterMainSection.tsx +++ b/src/components/Buyer/BuyerLetter/LetterMainSection.tsx @@ -5,7 +5,7 @@ import { Body1, Body2, Body3 } from 'styles/font'; import { Grey1, Grey3, Grey6 } from 'styles/color'; import { Button } from 'components/Common/Button'; import { Space } from 'components/Common/Space'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { GetMessagesType } from 'utils/type'; import { APP_WIDTH } from 'styles/AppStyle'; @@ -20,6 +20,10 @@ interface LetterMainSectionProps { deadline: string; } +interface locationStateType { + isReviewCompleted: boolean | null; +} + // // // @@ -31,6 +35,10 @@ export const LetterMainSection = ({ deadline, }: LetterMainSectionProps) => { const navigate = useNavigate(); + const location = useLocation(); + const { isReviewCompleted } = location.state as locationStateType; + + const isReviewButtonVisible = tagStatus === 3 && isReviewCompleted === false; const formattedMessage = (message: string | null): JSX.Element[] | null => { return message @@ -145,6 +153,18 @@ export const LetterMainSection = ({ {formattedMessage(messageResponse.content)} + {isReviewButtonVisible ? ( + +