From 502a93881ce0f6227c76b7fab788d123263f1f7e Mon Sep 17 00:00:00 2001 From: simhorim Date: Thu, 26 Sep 2024 11:35:25 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix(MainPage):=20=ED=85=8C=EA=B7=B8=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=EB=A7=81=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/main/MainPage.styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/pages/main/MainPage.styled.ts b/frontend/src/components/pages/main/MainPage.styled.ts index 15b53e2e..bc6fa761 100644 --- a/frontend/src/components/pages/main/MainPage.styled.ts +++ b/frontend/src/components/pages/main/MainPage.styled.ts @@ -22,6 +22,7 @@ export const FixedLayout = styled.div` z-index: ${({ theme }) => theme.zIndex.floating}; gap: ${({ theme }) => theme.spacing.m}; + width: 100%; max-width: 48rem; padding: ${({ theme }) => theme.spacing.m}; From 6bc14ec5933504463f03dbf77fb2573cfd4c16b0 Mon Sep 17 00:00:00 2001 From: simhorim Date: Thu, 26 Sep 2024 17:01:53 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix(MainPage):=20sort,=20filtering=20storag?= =?UTF-8?q?eKey=20=EA=B3=B5=EC=9C=A0=EB=90=98=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=EC=8B=9C=20=EC=A0=9C=EC=9D=BC=20=EC=B2=98?= =?UTF-8?q?=EC=9D=8C=20=EC=BB=A8=ED=85=90=ED=8A=B8=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/pages/main/MainPage.tsx | 10 ++++++++-- frontend/src/constants/storage.ts | 6 +++--- frontend/src/hooks/useMultiSelectionTag.ts | 15 +++++++++------ frontend/src/hooks/useSingleSelectionTag.ts | 14 +++++++------- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/pages/main/MainPage.tsx b/frontend/src/components/pages/main/MainPage.tsx index b8384f50..2ded8c84 100644 --- a/frontend/src/components/pages/main/MainPage.tsx +++ b/frontend/src/components/pages/main/MainPage.tsx @@ -17,6 +17,7 @@ import useSingleSelectionTag from "@hooks/useSingleSelectionTag"; import { ERROR_MESSAGE_MAP } from "@constants/errorMessage"; import { FORM_VALIDATIONS_MAP } from "@constants/formValidation"; +import { STORAGE_KEYS_MAP } from "@constants/storage"; import theme from "@styles/theme"; @@ -31,8 +32,13 @@ import * as S from "./MainPage.styled"; import TravelogueCardSkeleton from "./TravelogueCard/skeleton/TravelogueCardSkeleton"; const MainPage = () => { - const { selectedTagIDs, handleClickTag, sortedTags, animationKey } = useMultiSelectionTag(); - const { sorting, travelPeriod } = useSingleSelectionTag(); + const { selectedTagIDs, handleClickTag, sortedTags, animationKey } = useMultiSelectionTag( + STORAGE_KEYS_MAP.mainPageSelectedTagIDs, + ); + const { sorting, travelPeriod } = useSingleSelectionTag( + STORAGE_KEYS_MAP.mainPageSort, + STORAGE_KEYS_MAP.mainPageTravelPeriod, + ); const { travelogues, status, fetchNextPage, isPaused, error } = useInfiniteTravelogues({ selectedTagIDs, diff --git a/frontend/src/constants/storage.ts b/frontend/src/constants/storage.ts index 0690c239..7b6686d8 100644 --- a/frontend/src/constants/storage.ts +++ b/frontend/src/constants/storage.ts @@ -2,7 +2,7 @@ export const STORAGE_KEYS_MAP = { user: "tourootUser", selectedTabIndex: "selectedTabIndex", myPageSelectedTabIndex: "myPageSelectedTabIndex", - sort: "sort", - travelPeriod: "travelPeriod", - selectedTagIDs: "selectedTagIDs", + mainPageSort: "mainPageSort", + mainPageTravelPeriod: "mainPageTravelPeriod", + mainPageSelectedTagIDs: "mainPageSelectedTagIDs", } as const; diff --git a/frontend/src/hooks/useMultiSelectionTag.ts b/frontend/src/hooks/useMultiSelectionTag.ts index a57881ad..eb032f30 100644 --- a/frontend/src/hooks/useMultiSelectionTag.ts +++ b/frontend/src/hooks/useMultiSelectionTag.ts @@ -3,19 +3,17 @@ import { useCallback, useState } from "react"; import useGetTags from "@queries/useGetTags"; import { FORM_VALIDATIONS_MAP } from "@constants/formValidation"; -import { STORAGE_KEYS_MAP } from "@constants/storage"; -const useMultiSelectionTag = () => { +const useMultiSelectionTag = (key?: string) => { const { data: tags } = useGetTags(); const [selectedTagIDs, setSelectedTagIDs] = useState( - JSON.parse(localStorage.getItem(STORAGE_KEYS_MAP.selectedTagIDs) ?? "[]"), + key ? JSON.parse(localStorage.getItem(key) ?? "[]") : [], ); const [animationKey, setAnimationKey] = useState(0); const onChangeSelectedTagIDs = useCallback((newSelectedTagIDs: number[]) => { setSelectedTagIDs(newSelectedTagIDs); - localStorage.setItem(STORAGE_KEYS_MAP.selectedTagIDs, JSON.stringify(newSelectedTagIDs)); }, []); const createSortedTags = () => { @@ -34,12 +32,17 @@ const useMultiSelectionTag = () => { : [...prevSelectedTagIDs, id]; if (newSelectedTagIDs.length > FORM_VALIDATIONS_MAP.tags.maxCount) { - localStorage.setItem(STORAGE_KEYS_MAP.selectedTagIDs, JSON.stringify(prevSelectedTagIDs)); + key && localStorage.setItem(key, JSON.stringify(prevSelectedTagIDs)); + return prevSelectedTagIDs; } setAnimationKey((prev) => prev + 1); - localStorage.setItem(STORAGE_KEYS_MAP.selectedTagIDs, JSON.stringify(newSelectedTagIDs)); + + if (key) { + localStorage.setItem(key, JSON.stringify(newSelectedTagIDs)); + window.scrollTo({ top: 0 }); + } return newSelectedTagIDs; }); diff --git a/frontend/src/hooks/useSingleSelectionTag.ts b/frontend/src/hooks/useSingleSelectionTag.ts index 89412cce..5e53554e 100644 --- a/frontend/src/hooks/useSingleSelectionTag.ts +++ b/frontend/src/hooks/useSingleSelectionTag.ts @@ -2,17 +2,15 @@ import { useState } from "react"; import { SortingOption, TravelPeriodOption } from "@type/domain/travelogue"; -import { STORAGE_KEYS_MAP } from "@constants/storage"; - -const useSingleSelectionTag = () => { +const useSingleSelectionTag = (sortKey: string, travelPeriodKey: string) => { const [isSortingModalOpen, setIsSortingModalOpen] = useState(false); const [selectedSortingOption, setSelectedSortingOption] = useState( - (localStorage.getItem(STORAGE_KEYS_MAP.sort) as SortingOption) ?? "likeCount", + (localStorage.getItem(sortKey) as SortingOption) ?? "likeCount", ); const [isTravelPeriodModalOpen, setIsTravelPeriodModalOpen] = useState(false); const [selectedTravelPeriodOption, setSelectedTravelPeriodOption] = useState( - (localStorage.getItem(STORAGE_KEYS_MAP.travelPeriod) as TravelPeriodOption) ?? "", + (localStorage.getItem(travelPeriodKey) as TravelPeriodOption) ?? "", ); const handleOpenSortingModal = () => { @@ -25,7 +23,8 @@ const useSingleSelectionTag = () => { const handleClickSortingOption = (option: SortingOption) => { setSelectedSortingOption(option); - localStorage.setItem(STORAGE_KEYS_MAP.sort, option); + localStorage.setItem(sortKey, option); + window.scrollTo({ top: 0 }); handleCloseSortingModal(); }; @@ -39,7 +38,8 @@ const useSingleSelectionTag = () => { const handleClickTravelPeriodOption = (option: TravelPeriodOption) => { setSelectedTravelPeriodOption(option); - localStorage.setItem(STORAGE_KEYS_MAP.travelPeriod, option); + localStorage.setItem(travelPeriodKey, option); + window.scrollTo({ top: 0 }); handleCloseTravelPeriodModal(); }; From b755182a5abbb6a45239c7aa722eaf77f82a70d7 Mon Sep 17 00:00:00 2001 From: simhorim Date: Thu, 26 Sep 2024 17:21:23 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor(useMultiSelection):=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=EC=83=81=20=EC=96=B4=EC=83=89=ED=95=9C=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useMultiSelectionTag.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/hooks/useMultiSelectionTag.ts b/frontend/src/hooks/useMultiSelectionTag.ts index eb032f30..4593e3f2 100644 --- a/frontend/src/hooks/useMultiSelectionTag.ts +++ b/frontend/src/hooks/useMultiSelectionTag.ts @@ -31,11 +31,10 @@ const useMultiSelectionTag = (key?: string) => { ? prevSelectedTagIDs.filter((selectedTagID) => selectedTagID !== id) : [...prevSelectedTagIDs, id]; - if (newSelectedTagIDs.length > FORM_VALIDATIONS_MAP.tags.maxCount) { - key && localStorage.setItem(key, JSON.stringify(prevSelectedTagIDs)); + const isTagIDsSelectedMax = newSelectedTagIDs.length > FORM_VALIDATIONS_MAP.tags.maxCount; - return prevSelectedTagIDs; - } + if (isTagIDsSelectedMax && key) localStorage.setItem(key, JSON.stringify(prevSelectedTagIDs)); + if (isTagIDsSelectedMax) return prevSelectedTagIDs; setAnimationKey((prev) => prev + 1); From 4a12de82c7a0b224e7d99b477f76853c61e631e0 Mon Sep 17 00:00:00 2001 From: simhorim Date: Fri, 27 Sep 2024 07:35:59 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=A0=84=EC=B2=B4=EB=A5=BC=20?= =?UTF-8?q?=EB=AC=B4=ED=9A=A8=ED=99=94=ED=95=A8=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=95=B4=20api=EC=9A=94=EC=B2=AD=20=EC=97=AC=EB=9F=AC?= =?UTF-8?q?=EB=B2=88=20=EB=82=98=EA=B0=80=EB=8A=94=20=EA=B2=83=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/queries/useDeleteTravelPlan.ts | 2 +- frontend/src/queries/useDeleteTravelogue.ts | 2 +- frontend/src/queries/usePostTravelPlan.ts | 3 ++- frontend/src/queries/usePostTravelogue.ts | 3 ++- frontend/src/queries/usePutTravelPlan.ts | 3 ++- frontend/src/queries/usePutTravelogue.ts | 2 +- 6 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/queries/useDeleteTravelPlan.ts b/frontend/src/queries/useDeleteTravelPlan.ts index a7038efb..19d95529 100644 --- a/frontend/src/queries/useDeleteTravelPlan.ts +++ b/frontend/src/queries/useDeleteTravelPlan.ts @@ -18,7 +18,7 @@ const useDeleteTravelPlan = () => { onSuccess: () => { queryClient .invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelPlan.all, + queryKey: QUERY_KEYS_MAP.travelPlan.me(), refetchType: "inactive", }) .then(() => navigation(ROUTE_PATHS_MAP.my)); diff --git a/frontend/src/queries/useDeleteTravelogue.ts b/frontend/src/queries/useDeleteTravelogue.ts index 70602df4..31492fe9 100644 --- a/frontend/src/queries/useDeleteTravelogue.ts +++ b/frontend/src/queries/useDeleteTravelogue.ts @@ -18,7 +18,7 @@ const useDeleteTravelogue = () => { onSuccess: () => { queryClient .invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelogue.all, + queryKey: QUERY_KEYS_MAP.travelogue.me(), refetchType: "inactive", }) .then(() => { diff --git a/frontend/src/queries/usePostTravelPlan.ts b/frontend/src/queries/usePostTravelPlan.ts index 604d0fca..6fa42108 100644 --- a/frontend/src/queries/usePostTravelPlan.ts +++ b/frontend/src/queries/usePostTravelPlan.ts @@ -14,6 +14,7 @@ import { QUERY_KEYS_MAP } from "@constants/queryKey"; export const usePostTravelPlan = () => { const queryClient = useQueryClient(); + const { isPaused, ...rest } = useMutation< AxiosResponse, ApiError | AxiosError, @@ -42,7 +43,7 @@ export const usePostTravelPlan = () => { }), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelPlan.all, + queryKey: QUERY_KEYS_MAP.travelPlan.me(), refetchType: "inactive", }); }, diff --git a/frontend/src/queries/usePostTravelogue.ts b/frontend/src/queries/usePostTravelogue.ts index e51cb4e6..ac91dc0c 100644 --- a/frontend/src/queries/usePostTravelogue.ts +++ b/frontend/src/queries/usePostTravelogue.ts @@ -14,6 +14,7 @@ import { QUERY_KEYS_MAP } from "@constants/queryKey"; export const usePostTravelogue = () => { const queryClient = useQueryClient(); + const { isPaused, ...rest } = useMutation< AxiosResponse, ApiError | AxiosError, @@ -33,7 +34,7 @@ export const usePostTravelogue = () => { }), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelogue.all, + queryKey: QUERY_KEYS_MAP.travelogue.me(), refetchType: "inactive", }); }, diff --git a/frontend/src/queries/usePutTravelPlan.ts b/frontend/src/queries/usePutTravelPlan.ts index 5a7c89db..0b25dece 100644 --- a/frontend/src/queries/usePutTravelPlan.ts +++ b/frontend/src/queries/usePutTravelPlan.ts @@ -18,6 +18,7 @@ interface MutationFnVariables { export const usePutTravelPlan = () => { const queryClient = useQueryClient(); + return useMutation< AxiosResponse, ApiError | AxiosError, @@ -46,7 +47,7 @@ export const usePutTravelPlan = () => { }), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelPlan.all, + queryKey: QUERY_KEYS_MAP.travelPlan.me(), refetchType: "inactive", }); }, diff --git a/frontend/src/queries/usePutTravelogue.ts b/frontend/src/queries/usePutTravelogue.ts index 754f8eb1..3d05ed1a 100644 --- a/frontend/src/queries/usePutTravelogue.ts +++ b/frontend/src/queries/usePutTravelogue.ts @@ -38,7 +38,7 @@ export const usePutTravelogue = () => { }), onSuccess: () => { queryClient.invalidateQueries({ - queryKey: QUERY_KEYS_MAP.travelogue.all, + queryKey: QUERY_KEYS_MAP.travelogue.me(), refetchType: "inactive", }); },