마인더 정산신청 페이지 무한스크롤 오류 해결 및 DTO 업데이트 #415
Conversation
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]
… and manageStatus props
…CompleteApplyPopup
✅ Deploy Preview for candid-semolina-d0db42 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -39,6 +39,7 @@ function CompleteApplyPopup({ | |||
| width="calc(100% - 3.2rem)" | |||
| onClick={() => { | |||
| setIsCompleteApplyManage(false); | |||
| window.location.reload(); | |||
There was a problem hiding this comment.
혹시 여기서 reload 가 필요한 이유가 있을까요?
There was a problem hiding this comment.
정산신청버튼을 누르고 팝업을 닫았을 경우에 데이터 최신화가 안되는 이슈가 있어서 reload()를 넣었습니다.. ㅎㅎ
정산예정 항목을 정산신청했을 경우에는 정산 중 항목으로 정산 예정항목이 넘어가게 되는데,
"정산 신청이 완료 되었습니다" 팝업을 닫았을 떄 페이지 새로고침을 강제하여 데이터가 최신화되게 하였습니다.
Reload하지말고 애초에 정산신청 클릭했을 때 manageList서 필터링하는게 나을거같긴 한데 바꿀까요?
There was a problem hiding this comment.
일단 filter한 list로 set해주는 로직 확인하였습니다 🫡
만약 react-query를 사용한다면, invalidateQueries를 사용하면 쉽게 구현할 수 있을 것 같네요!
예를 들어 기존의 코드가 이렇게 구현되있다면, 먼저 useQuery로 GET 요청을 하여 가져오는 로직으로 수정하고, 정산 신청 시 해당 queryKey를 invalidateQueries로 처리하면, 알아서 useQuery에서 해당 요청이 invalidate해진 걸 인지하고 다시 get 요청을 하게 됩니다.
useEffect(() => {
fetchManagements(0);
}, [sortType, manageStatus]); const query = useQuery({
queryKey: ["getPaymentsCounselors"],
queryFn: getMaymentMinder
})
...
const queryClient = useQueryClient()
onClick={() => {
setIsCompleteApplyManage(false);
queryClient.invalidateQueries({ queryKey: ['getPaymentsCounselors'] })
}}
이런 식으로 react-query로 구현하면 안정성 있게 구현할 수 있을 것 같네요!
코스트가 많이 들 것 같다면 일단 머지하면 될 것 같습니다 고생하셨습니닷🫡
There was a problem hiding this comment.
코드 가독성과 안정성 측면에서 여러모로 tanstack-query 도입이 필요할 거 같습니다... 일단은 머지하고 마인더 쪽 코드에서 tanstack-query 리팩토링은 이슈 등록해서 한번에 진행해보겠습니다
- Update CompleteApplyPopup component to include the setManagementList prop and remove unused props - Update SellerCalculateCard component to include the setManagementList prop This commit refactors the CompleteApplyPopup and SellerCalculateCard components to include the setManagementList prop, which is used to update the management list. It also removes unused props from the CompleteApplyPopup component. These changes improve the code structure and maintainability.
|
정산신청 클릭했을 때 바로 manageList서 필터링되도록 구현했습니다! |
Checklist
Description
Related Issues
#414
To Reveiwer
이슈 트래킹 빼먹었습니다 죄송합니다 ..