From f5011729f34bd79e7e10027dd3533a4eb1109f8b Mon Sep 17 00:00:00 2001 From: ooherin <555ohr@naver.com> Date: Fri, 25 Oct 2024 10:26:58 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChecklistTab/EditChecklistTab.tsx | 11 ++++---- frontend/src/pages/EditChecklistPage.tsx | 28 +++++++++---------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/EditChecklist/ChecklistTab/EditChecklistTab.tsx b/frontend/src/components/EditChecklist/ChecklistTab/EditChecklistTab.tsx index 4af39950b..f0b5b77fc 100644 --- a/frontend/src/components/EditChecklist/ChecklistTab/EditChecklistTab.tsx +++ b/frontend/src/components/EditChecklist/ChecklistTab/EditChecklistTab.tsx @@ -1,29 +1,28 @@ import { useMemo } from 'react'; -import ChecklistTabSuspense from '@/components/_common/errorBoundary/ChecklistTabSuspense'; +import ChecklistTabFallback from '@/components/_common/errorBoundary/ChecklistTabFallback'; import Tabs from '@/components/_common/Tabs/Tabs'; import useGetChecklistDetailQuery from '@/hooks/query/useGetChecklistDetailQuery'; import useTabs from '@/hooks/useTabs'; import useChecklistStore from '@/store/useChecklistStore'; -import isSameCategory from '@/utils/isSameCategory'; interface Props { checklistId: string; } const EditChecklistTab = ({ checklistId }: Props) => { - const { data: checklist, isSuccess, isLoading } = useGetChecklistDetailQuery(checklistId); + const { data: checklist, isFetched, isLoading } = useGetChecklistDetailQuery(checklistId); const checklistStore = useChecklistStore(state => state.checklistCategoryQnA); const { getTabsForChecklist } = useTabs(); const categoryTabs = useMemo(() => { - if (isSuccess && isSameCategory(checklist.categories, checklistStore)) { + if (isFetched && checklist && checklistStore.length) { return getTabsForChecklist(checklist.categories); } return []; - }, [isSuccess, checklistStore]); + }, [isFetched, getTabsForChecklist, checklistStore]); - if (isLoading) return ; + if (isLoading) return ; return ; }; diff --git a/frontend/src/pages/EditChecklistPage.tsx b/frontend/src/pages/EditChecklistPage.tsx index a433b6a4c..25c927d06 100644 --- a/frontend/src/pages/EditChecklistPage.tsx +++ b/frontend/src/pages/EditChecklistPage.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { useNavigate, useParams } from 'react-router-dom'; import { useStore } from 'zustand'; @@ -21,7 +20,6 @@ import roomInfoNonValidatedStore from '@/store/roomInfoNonValidatedStore'; import roomInfoStore from '@/store/roomInfoStore'; import useChecklistStore from '@/store/useChecklistStore'; import useSelectedOptionStore from '@/store/useSelectedOptionStore'; -import loadExternalScriptWithCallback from '@/utils/loadScript'; type RouteParams = { checklistId: string; @@ -55,23 +53,23 @@ const EditChecklistPage = () => { navigate(ROUTE_PATH.checklistOne(Number(checklistId))); }; - useEffect(() => { - const setChecklistDataToStore = async () => { - if (!isSuccess) return; + // useEffect(() => { + // const setChecklistDataToStore = async () => { + // if (!isSuccess) return; - roomInfoActions.setRawValues(checklist.room); - set('address', checklist.room.address!); - set('buildingName', checklist.room.buildingName!); - //TODO: 가까운 지하철은 나중에 api 수정되면 저장 + // roomInfoActions.setRawValues(checklist.room); + // set('address', checklist.room.address!); + // set('buildingName', checklist.room.buildingName!); + // //TODO: 가까운 지하철은 나중에 api 수정되면 저장 - loadExternalScriptWithCallback('kakaoMap', () => searchSubwayStationsByAddress(checklist.room.address!)); + // loadExternalScriptWithCallback('kakaoMap', () => searchSubwayStationsByAddress(checklist.room.address!)); - selectedOptionActions.set(checklist.options.map(option => option.optionId)); - checklistQuestionActions.set(checklist.categories); - }; + // selectedOptionActions.set(checklist.options.map(option => option.optionId)); + // checklistQuestionActions.set(checklist.categories); + // }; - setChecklistDataToStore(); - }, [checklistId, checklist, isSuccess]); + // setChecklistDataToStore(); + // }, [checklistId, checklist, isSuccess]); return ( <> From b943b7ed80698063fb127619f97bd4be58b5119d Mon Sep 17 00:00:00 2001 From: ooherin <555ohr@naver.com> Date: Sun, 8 Dec 2024 21:42:07 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20dev-fe=20=EB=B0=98=EC=98=81=20?= =?UTF-8?q?=EC=95=88=EB=90=98=EB=8A=94=20diff=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/EditChecklistPage.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/frontend/src/pages/EditChecklistPage.tsx b/frontend/src/pages/EditChecklistPage.tsx index 445325c56..ebd1b80ff 100644 --- a/frontend/src/pages/EditChecklistPage.tsx +++ b/frontend/src/pages/EditChecklistPage.tsx @@ -16,8 +16,8 @@ import { ROUTE_PATH } from '@/constants/routePath'; import { DEFAULT_CHECKLIST_TAB_PAGE } from '@/constants/system'; import useGetChecklistDetailQuery from '@/hooks/query/useGetChecklistDetailQuery'; import useModal from '@/hooks/useModal'; +import useResetChecklist from '@/hooks/useResetChecklist'; import useRoomInfoNonValidated from '@/hooks/useRoomInfoNonValidated'; -import roomInfoNonValidatedStore from '@/store/roomInfoNonValidatedStore'; import roomInfoStore from '@/store/roomInfoStore'; import useChecklistStore from '@/store/useChecklistStore'; import useSelectedOptionStore from '@/store/useSelectedOptionStore'; @@ -32,26 +32,20 @@ const EditChecklistPage = () => { const { checklistId } = useParams() as RouteParams; const { data: checklist, isSuccess } = useGetChecklistDetailQuery(checklistId); - const checklistQuestionActions = useChecklistStore(state => state.actions); + const { resetChecklist } = useResetChecklist(); const { searchSubwayStationsByAddress, set } = useRoomInfoNonValidated(); const roomInfoActions = useStore(roomInfoStore, state => state.actions); - const roomInfoUnvalidatedActions = useStore(roomInfoNonValidatedStore, state => state.actions); + const checklistQuestionActions = useChecklistStore(state => state.actions); + const selectedOptionActions = useSelectedOptionStore(state => state.actions); // 한줄평 모달 const { isModalOpen: isSubmitModalOpen, openModal: summaryModalOpen, closeModal: summaryModalClose } = useModal(); - // 메모 모달 const { isModalOpen: isMemoModalOpen, openModal: memoModalOpen, closeModal: memoModalClose } = useModal(); - // TODO: action 분리 필요 - const selectedOptionActions = useSelectedOptionStore(state => state.actions); - const resetAndGoDetailPage = () => { - roomInfoActions.reset(); - roomInfoUnvalidatedActions.resetAll(); - checklistQuestionActions.reset(); - selectedOptionActions.reset(); + resetChecklist(); navigate(ROUTE_PATH.checklistOne(Number(checklistId))); }; @@ -60,14 +54,13 @@ const EditChecklistPage = () => { if (!isSuccess) return; roomInfoActions.setRawValues(checklist.room); + selectedOptionActions.set(checklist.options.map(option => option.optionId)); + checklistQuestionActions.set(checklist.categories); + set('address', checklist.room.address!); set('buildingName', checklist.room.buildingName!); - //TODO: 가까운 지하철은 나중에 api 수정되면 저장 loadExternalScriptWithCallback('kakaoMap', () => searchSubwayStationsByAddress(checklist.room.address!)); - - selectedOptionActions.set(checklist.options.map(option => option.optionId)); - checklistQuestionActions.set(checklist.categories); }; setChecklistDataToStore(); @@ -95,7 +88,6 @@ const EditChecklistPage = () => { )} {/* 한줄평 모달*/} - Date: Mon, 9 Dec 2024 00:10:12 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20ui=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ChecklistList/CustomBanner.tsx | 16 +++++++++++++--- frontend/src/pages/ChecklistListPage.tsx | 4 +++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx index 203bd5e5d..4cca8e468 100644 --- a/frontend/src/components/ChecklistList/CustomBanner.tsx +++ b/frontend/src/components/ChecklistList/CustomBanner.tsx @@ -10,16 +10,22 @@ interface Props { buttonText: string; Icon: React.ReactElement; buttonDetailText: string; + hoverButtonColor: string; } -const CustomBanner = ({ onClick, Icon, title, buttonColor, buttonText, buttonDetailText }: Props) => { +const CustomBanner = ({ hoverButtonColor, onClick, Icon, title, buttonColor, buttonText, buttonDetailText }: Props) => { return ( {Icon} {title} - + ); }; @@ -51,7 +57,7 @@ const S = { Title: styled.span` ${flexCenter} `, - Button: styled(Button)<{ buttonColor: string }>` + Button: styled(Button)<{ buttonColor: string; hoverButtonColor: string }>` padding: 0.6rem 1rem; background-color: ${({ buttonColor }) => buttonColor}; @@ -62,5 +68,9 @@ const S = { font-size: ${({ theme }) => theme.text.size.small}; cursor: pointer; + + &:hover { + background-color: ${({ hoverButtonColor }) => hoverButtonColor}; + } `, }; diff --git a/frontend/src/pages/ChecklistListPage.tsx b/frontend/src/pages/ChecklistListPage.tsx index ed833fa56..90451a8c0 100644 --- a/frontend/src/pages/ChecklistListPage.tsx +++ b/frontend/src/pages/ChecklistListPage.tsx @@ -47,14 +47,16 @@ const ChecklistListPage = () => { buttonColor={theme.palette.green500} buttonText="편집하기" buttonDetailText={'체크리스트 질문을 편집하려면 이 버튼을 누르세요.'} + hoverButtonColor={theme.palette.green600} />