From 4abbe8ea746d761ca3b3e689d106656e001a5f4a Mon Sep 17 00:00:00 2001 From: inyoung Date: Tue, 29 Oct 2024 18:49:52 +0900 Subject: [PATCH 1/9] Fix: solve infinite scroll issue --- .../Seller/SellerCalculateManagement.tsx | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx index dc9e9aeb..a3fbdf3e 100644 --- a/src/pages/Seller/SellerCalculateManagement.tsx +++ b/src/pages/Seller/SellerCalculateManagement.tsx @@ -65,6 +65,7 @@ export const SellerCaculateManagement = () => { const [toatlMoney, setTotalMoney] = useState(0); const [isCompleteApplyManage, setIsCompleteApplyManage] = useState(false); const [isLoading, setIsLoading] = useState(true); + const [lastId, setLastId] = useState(0); //scorll 막기 const setScrollLock = useSetRecoilState(scrollLockState); @@ -74,9 +75,7 @@ export const SellerCaculateManagement = () => { const onIntersect: IntersectionObserverCallback = async (entry) => { if (entry[0].isIntersecting && !isLastElem && preventRef.current) { preventRef.current = false; - await fetchManagements( - managementList[managementList.length - 1].paymentId, - ); + await fetchManagements(lastId); preventRef.current = true; } }; @@ -103,28 +102,30 @@ export const SellerCaculateManagement = () => { if (res.data.length !== 0) { if (lastId === 0) { setManagementList(res.data); - let totalEarnMoney = 0; - res?.data?.forEach((item: ManageItem) => { - totalEarnMoney += Number(item?.profit); - }); - setTotalMoney(totalEarnMoney); + setTotalMoney(res.data[0].total); + setLastId( + managementList[managementList.length - 1]?.paymentId ?? 0, + ); + setIsLastElem(false); } else { - const updatedManages = [...managementList, ...res.data]; - setManagementList(updatedManages); - let totalEarnMoney = 0; - res?.data?.forEach((item: ManageItem) => { - totalEarnMoney += Number(item?.profit); - }); - setTotalMoney(totalEarnMoney); + // 무한스크롤 + setManagementList([...managementList, ...res.data]); + setLastId( + managementList[managementList.length - 1]?.paymentId ?? 0, + ); + setTotalMoney(res.data[0].total); } } else { - setManagementList(res.data); - setIsLastElem(true); - let totalEarnMoney = 0; - res?.data?.forEach((item: ManageItem) => { - totalEarnMoney += Number(item?.profit); - }); - setTotalMoney(totalEarnMoney); + if (lastId === 0) { + setManagementList([...res.data]); + setLastId(0); + setIsLastElem(true); + setTotalMoney(0); + } else { + setManagementList([...managementList, ...res.data]); + setLastId(0); + setIsLastElem(true); + } } } else { alert('판매 정보가 아직 등록되지 않았어요!'); @@ -144,7 +145,7 @@ export const SellerCaculateManagement = () => { // useEffect(() => { fetchManagements(0); - }, [manageStatus, sortType, isCompleteApplyManage, navigate]); + }, [sortType, manageStatus]); // // From 234d66a422735c37c087a203b92ffd9afe930e6e Mon Sep 17 00:00:00 2001 From: inyoung Date: Mon, 4 Nov 2024 13:43:07 +0900 Subject: [PATCH 2/9] Fix: Reflect dto update contents --- .../Seller/SellerCalculateManagement.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx index a3fbdf3e..13309f75 100644 --- a/src/pages/Seller/SellerCalculateManagement.tsx +++ b/src/pages/Seller/SellerCalculateManagement.tsx @@ -99,30 +99,36 @@ export const SellerCaculateManagement = () => { const res: any = await getPaymentsMinder({ params }); try { if (res?.status === 200) { - if (res.data.length !== 0) { + if (res.data.paymentGetCounselorResponses.length !== 0) { if (lastId === 0) { - setManagementList(res.data); - setTotalMoney(res.data[0].total); + setManagementList(res.data.paymentGetCounselorResponses); + setTotalMoney(res.data.total); setLastId( managementList[managementList.length - 1]?.paymentId ?? 0, ); setIsLastElem(false); } else { // 무한스크롤 - setManagementList([...managementList, ...res.data]); + setManagementList([ + ...managementList, + ...res.data.paymentGetCounselorResponses, + ]); setLastId( managementList[managementList.length - 1]?.paymentId ?? 0, ); - setTotalMoney(res.data[0].total); + setTotalMoney(res.data.total); } } else { if (lastId === 0) { - setManagementList([...res.data]); + setManagementList([...res.data.paymentGetCounselorResponses]); setLastId(0); setIsLastElem(true); setTotalMoney(0); } else { - setManagementList([...managementList, ...res.data]); + setManagementList([ + ...managementList, + ...res.data.paymentGetCounselorResponses, + ]); setLastId(0); setIsLastElem(true); } From 9b3c246554cf692930362ded5a2f0b9617430051 Mon Sep 17 00:00:00 2001 From: inyoung Date: Mon, 4 Nov 2024 13:56:36 +0900 Subject: [PATCH 3/9] Refactor: Remove unused SellerCalculateManagement component The SellerCalculateManagement component was no longer being used in the application. This commit removes the unused component and its associated imports and references. Co-authored-by: [Author Name] --- src/Router.tsx | 4 +- .../Seller/SellerCalculateManagement.tsx | 186 +++++++----------- 2 files changed, 78 insertions(+), 112 deletions(-) diff --git a/src/Router.tsx b/src/Router.tsx index eb3fbbda..f784938d 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -8,7 +8,6 @@ import { BuyerMypage } from 'pages/Buyer/BuyerMypage'; import { BuyerSearch } from 'pages/Buyer/BuyerSearch'; import { BuyerSearchResult } from 'pages/Buyer/BuyerSearchResult'; import { BuyerSignup } from 'pages/Buyer/BuyerSignup'; -import { SellerCaculateManagement } from 'pages/Seller/SellerCalculateManagement'; import { SellerConsult } from 'pages/Seller/SellerConsult'; import { SellerHome } from 'pages/Seller/SellerHome'; import { SellerLetter } from 'pages/Seller/SellerLetter'; @@ -56,6 +55,7 @@ import SellerProfitBankAccount from 'pages/Seller/SellerProfitBankAccount'; import ServerDown from 'pages/Common/ServerDown'; import SellerUpdateFail from 'pages/Seller/SellerUpdateFail'; import { BuyerManyLovedCounselor } from 'pages/Buyer/BuyerManyLovedCounselor'; +import SellerCalculateManagement from 'pages/Seller/SellerCalculateManagement'; const Router = () => { return ( @@ -164,7 +164,7 @@ const Router = () => { {/* 판매자 : 수익 관리 */} } + element={} /> {/* 판매자 : 마인더 인증 */} } /> diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx index 13309f75..23a43144 100644 --- a/src/pages/Seller/SellerCalculateManagement.tsx +++ b/src/pages/Seller/SellerCalculateManagement.tsx @@ -16,21 +16,17 @@ import useIntersectionObserver from 'hooks/useIntersectionObserver'; import { BackDrop } from 'components/Common/BackDrop'; // -// -// - -const manageStatusMap = { +// 정산 상태 및 정렬 유형 맵핑 객체 +const STATUS_MAP = { '정산 중': 'SETTLEMENT_ONGOING', '정산 예정': 'SETTLEMENT_WAITING', 완료: 'SETTLEMENT_COMPLETE', }; -const sortTypeMap = ['WEEK', 'MONTH', 'ALL']; +const SORT_OPTIONS = ['WEEK', 'MONTH', 'ALL']; // -// -// - +// 정산 항목 인터페이스 interface ManageItem { paymentId: number; nickname: string; @@ -46,32 +42,25 @@ interface ManageItem { type ManageList = ManageItem[]; // -// -// - -export const SellerCaculateManagement = () => { +// 메인 컴포넌트 +export default function SellerCalculateManagement() { const navigate = useNavigate(); - // 상단 탭의 상태 + // 컴포넌트 상태 const [manageStatus, setManageStatus] = useState('완료'); - - // 드롭다운 메뉴, 최근 일주일 : 0 , 최근 1개월 : 1, 전체 : 2 const [sortType, setSortType] = useState(0); - const [isModalOpen, setIsModalOpen] = useRecoilState( - isConsultModalOpenState, - ); - const [isLastElem, setIsLastElem] = useState(false); + const [isModalOpen, setIsModalOpen] = useRecoilState(isConsultModalOpenState); + const [isLastElem, setIsLastElem] = useState(false); const [managementList, setManagementList] = useState([]); - const [toatlMoney, setTotalMoney] = useState(0); + const [totalMoney, setTotalMoney] = useState(0); const [isCompleteApplyManage, setIsCompleteApplyManage] = useState(false); const [isLoading, setIsLoading] = useState(true); const [lastId, setLastId] = useState(0); - //scorll 막기 const setScrollLock = useSetRecoilState(scrollLockState); - const preventRef = useRef(true); + // 스크롤 인터섹션 콜백 const onIntersect: IntersectionObserverCallback = async (entry) => { if (entry[0].isIntersecting && !isLastElem && preventRef.current) { preventRef.current = false; @@ -87,51 +76,34 @@ export const SellerCaculateManagement = () => { onIntersect, }); - /** - * - */ + // 정산 목록을 서버에서 불러오는 함수 const fetchManagements = async (lastId: number) => { const params = { - status: manageStatusMap[manageStatus as keyof typeof manageStatusMap], - sort: sortTypeMap[sortType], + status: STATUS_MAP[manageStatus], + sort: SORT_OPTIONS[sortType], paymentId: lastId, }; - const res: any = await getPaymentsMinder({ params }); + try { + const res = await getPaymentsMinder({ params }); + if (res?.status === 200) { - if (res.data.paymentGetCounselorResponses.length !== 0) { - if (lastId === 0) { - setManagementList(res.data.paymentGetCounselorResponses); - setTotalMoney(res.data.total); - setLastId( - managementList[managementList.length - 1]?.paymentId ?? 0, - ); - setIsLastElem(false); - } else { - // 무한스크롤 - setManagementList([ - ...managementList, - ...res.data.paymentGetCounselorResponses, - ]); - setLastId( - managementList[managementList.length - 1]?.paymentId ?? 0, - ); - setTotalMoney(res.data.total); - } + const responses = res.data.paymentGetCounselorResponses; + const isInitialLoad = lastId === 0; + + if (responses.length) { + setManagementList( + isInitialLoad ? responses : [...managementList, ...responses], + ); + setTotalMoney(res.data.total); + setLastId(responses[responses.length - 1].paymentId); + setIsLastElem(false); } else { - if (lastId === 0) { - setManagementList([...res.data.paymentGetCounselorResponses]); - setLastId(0); - setIsLastElem(true); - setTotalMoney(0); - } else { - setManagementList([ - ...managementList, - ...res.data.paymentGetCounselorResponses, - ]); - setLastId(0); - setIsLastElem(true); - } + setManagementList( + isInitialLoad ? [] : [...managementList, ...responses], + ); + setLastId(0); + setIsLastElem(true); } } else { alert('판매 정보가 아직 등록되지 않았어요!'); @@ -140,23 +112,14 @@ export const SellerCaculateManagement = () => { } catch (err) { alert(err); } finally { - if (lastId === 0) { - setIsLoading(false); - } + if (lastId === 0) setIsLoading(false); } }; - // - // - // useEffect(() => { fetchManagements(0); }, [sortType, manageStatus]); - // - // - // - return ( <> @@ -165,10 +128,11 @@ export const SellerCaculateManagement = () => { setManageStatus={setManageStatus} sortType={sortType} /> + {isLoading ? ( -
+ -
+ ) : ( <> @@ -179,45 +143,36 @@ export const SellerCaculateManagement = () => { ? '정산 중 금액 합계' : '정산예정 금액 합계'} - {toatlMoney?.toLocaleString()} 원 + {totalMoney?.toLocaleString()} 원 - {/* 내역이 없을시 */} - {managementList?.length === 0 ? ( + + {managementList.length === 0 ? ( ) : ( - <> - - {/* //정산 예정일일 경우 calculateActivate false true로~*/} - {managementList?.map((item) => ( - - ))} - - {!isLastElem ? ( -
- ) : ( -
- )} - + + {managementList.map((item) => ( + + ))} + {!isLastElem && } + )} )} - {isModalOpen ? ( + {isModalOpen && ( <> { @@ -231,22 +186,33 @@ export const SellerCaculateManagement = () => { setSortType={setSortType} /> - ) : null} + )} ); -}; +} + +// 스타일 컴포넌트 정의 +const CenteredContainer = styled.div` + display: flex; + align-items: center; + height: 70vh; +`; const TotalEarnMoney = styled.div` display: flex; align-items: center; gap: 0.8rem; - margin: 1.2rem 2rem 1.2rem; + margin: 1.2rem 2rem; `; const SellerCalculateCardList = styled.div` display: flex; - gap: 1rem; - margin: 1.4rem 0rem; - align-items: center; flex-direction: column; + align-items: center; + gap: 1rem; + margin: 1.4rem 0; +`; + +const IntersectionTarget = styled.div` + height: 3.5rem; `; From b1f204e01d90a86114575391d78faa445e106400 Mon Sep 17 00:00:00 2001 From: inyoung Date: Mon, 4 Nov 2024 20:02:31 +0900 Subject: [PATCH 4/9] Refactor: Update SellerCalculateCard component to include consultDate and manageStatus props --- .../SellerCalculateCard.tsx | 10 +++++++- .../Seller/SellerCalculateManagement.tsx | 23 +++++++------------ 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx index 17d228fd..ee583da5 100644 --- a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx +++ b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx @@ -13,11 +13,13 @@ interface SellerCalulateCardProps { salePrice: number; commission: number; paymentDate: string; + consultDate: string; paymentAccount: string; id: number; calculateActivate: boolean; isShowPopup: boolean; setIsShowPopup: any; + manageStatus: string; } export const SellerCalulateCard = ({ @@ -28,10 +30,12 @@ export const SellerCalulateCard = ({ commission, paymentAccount, paymentDate, + consultDate, calculateActivate, id, isShowPopup, setIsShowPopup, + manageStatus, }: SellerCalulateCardProps) => { const applyManagement = async (id: number) => { const res: any = await patchApplyPayments(id); @@ -81,7 +85,11 @@ export const SellerCalulateCard = ({ {commission.toLocaleString()} 원 - 지급일자 + 상담일자 + {consultDate} + + + 지급예정 {paymentDate} diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx index 23a43144..1eaf1488 100644 --- a/src/pages/Seller/SellerCalculateManagement.tsx +++ b/src/pages/Seller/SellerCalculateManagement.tsx @@ -15,8 +15,6 @@ import { LoadingSpinner } from 'utils/LoadingSpinner'; import useIntersectionObserver from 'hooks/useIntersectionObserver'; import { BackDrop } from 'components/Common/BackDrop'; -// -// 정산 상태 및 정렬 유형 맵핑 객체 const STATUS_MAP = { '정산 중': 'SETTLEMENT_ONGOING', '정산 예정': 'SETTLEMENT_WAITING', @@ -25,8 +23,6 @@ const STATUS_MAP = { const SORT_OPTIONS = ['WEEK', 'MONTH', 'ALL']; -// -// 정산 항목 인터페이스 interface ManageItem { paymentId: number; nickname: string; @@ -34,19 +30,16 @@ interface ManageItem { profit: number; cost: number; fee: number; - approvedAt: null; - account: null; - total: number; + consultedAt: string; + settledAt: string; + account: string; } type ManageList = ManageItem[]; -// -// 메인 컴포넌트 export default function SellerCalculateManagement() { const navigate = useNavigate(); - // 컴포넌트 상태 const [manageStatus, setManageStatus] = useState('완료'); const [sortType, setSortType] = useState(0); const [isModalOpen, setIsModalOpen] = useRecoilState(isConsultModalOpenState); @@ -76,10 +69,9 @@ export default function SellerCalculateManagement() { onIntersect, }); - // 정산 목록을 서버에서 불러오는 함수 const fetchManagements = async (lastId: number) => { const params = { - status: STATUS_MAP[manageStatus], + status: STATUS_MAP[manageStatus as keyof typeof STATUS_MAP], sort: SORT_OPTIONS[sortType], paymentId: lastId, }; @@ -90,12 +82,11 @@ export default function SellerCalculateManagement() { if (res?.status === 200) { const responses = res.data.paymentGetCounselorResponses; const isInitialLoad = lastId === 0; - + setTotalMoney(res.data.total); if (responses.length) { setManagementList( isInitialLoad ? responses : [...managementList, ...responses], ); - setTotalMoney(res.data.total); setLastId(responses[responses.length - 1].paymentId); setIsLastElem(false); } else { @@ -153,6 +144,7 @@ export default function SellerCalculateManagement() { {managementList.map((item) => ( Date: Mon, 4 Nov 2024 20:04:26 +0900 Subject: [PATCH 5/9] Fix: Reload page after completing apply in SellerCalculateManagement/CompleteApplyPopup --- .../Seller/SellerCalculateManagement/CompleteApplyPopup.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx index 934df9ea..67ec2f39 100644 --- a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx +++ b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx @@ -39,6 +39,7 @@ function CompleteApplyPopup({ width="calc(100% - 3.2rem)" onClick={() => { setIsCompleteApplyManage(false); + window.location.reload(); }} /> From 6425ca9a049b5cda7401700cefb0bfb16394ecda Mon Sep 17 00:00:00 2001 From: inyoung Date: Mon, 4 Nov 2024 20:05:11 +0900 Subject: [PATCH 6/9] Fix: Update type annotation for 'res' as any --- src/pages/Seller/SellerCalculateManagement.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx index 1eaf1488..6b85f4cf 100644 --- a/src/pages/Seller/SellerCalculateManagement.tsx +++ b/src/pages/Seller/SellerCalculateManagement.tsx @@ -77,9 +77,9 @@ export default function SellerCalculateManagement() { }; try { - const res = await getPaymentsMinder({ params }); + const res: any = await getPaymentsMinder({ params }); - if (res?.status === 200) { + if (res.status === 200) { const responses = res.data.paymentGetCounselorResponses; const isInitialLoad = lastId === 0; setTotalMoney(res.data.total); From c5ba274d418cf4cccb7341a564946ff679c18ec8 Mon Sep 17 00:00:00 2001 From: kyuhho Date: Mon, 4 Nov 2024 22:59:02 +0900 Subject: [PATCH 7/9] feat: add react-microsoft clarity (#416) --- package-lock.json | 6 ++++++ package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/package-lock.json b/package-lock.json index a77525e5..b05f6420 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-cookie": "^7.0.1", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", + "react-microsoft-clarity": "^1.2.0", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "react-textarea-autosize": "^8.5.3", @@ -15481,6 +15482,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-microsoft-clarity": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-microsoft-clarity/-/react-microsoft-clarity-1.2.0.tgz", + "integrity": "sha512-a1bsJR1uN1daWq3cBc7NheEGPXrotMRE0oFeRio7kXvHawzQfqu5iX9BoYFF9zRUL0dn+Mz57h1fNlcv3pqXEg==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index d896a24b..d2e8e68a 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-cookie": "^7.0.1", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", + "react-microsoft-clarity": "^1.2.0", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "react-textarea-autosize": "^8.5.3", From 46571ebf190ab90e2f7639dfe7030e2ced8a409b Mon Sep 17 00:00:00 2001 From: kyuhho Date: Mon, 4 Nov 2024 22:59:56 +0900 Subject: [PATCH 8/9] feat: remove clarity tag and add clarity init (#416) --- public/index.html | 16 ---------------- src/index.tsx | 6 ++++++ 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index 5848e98f..d94dc3b5 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,6 @@ - - -