From b01b27426b98eaefc8dd2cba55a8d4d96442e9b8 Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Sat, 13 Jan 2024 04:08:07 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EB=AA=A9=ED=91=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1,=20=EB=AA=A9=ED=91=9C=20=EC=83=81=EC=84=B8=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0,=20=EB=AA=A9=ED=91=9C=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=ED=9B=84=20=ED=98=84=EC=9E=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/goal/detail/saved/page.tsx | 24 ++++++++++--------- .../detail/DeleteGoalButtomSheet.tsx | 2 +- .../goal/components/detail/DetailHeader.tsx | 2 +- .../components/detail/SavedFooterButton.tsx | 8 +++++-- .../goal/components/detail/SavedHeader.tsx | 8 +++++-- .../home/components/mapSwiper/MapSwiper.tsx | 20 ++++------------ src/hooks/reactQuery/goal/useGetGoals.ts | 10 +++++++- 7 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/app/goal/detail/saved/page.tsx b/src/app/goal/detail/saved/page.tsx index 2eca9af5..00692ef9 100644 --- a/src/app/goal/detail/saved/page.tsx +++ b/src/app/goal/detail/saved/page.tsx @@ -4,23 +4,25 @@ import { useSearchParams } from 'next/navigation'; import { ContentBody, SavedFooterButton, SavedHeader, Sticker } from '@/features/goal/components'; import DetailLayout from '@/features/goal/components/detail/DetailLayout'; import { useGetGoal } from '@/hooks/reactQuery/goal'; +import { usePrefetchGoals } from '@/hooks/reactQuery/goal/useGetGoals'; // TODO: 추후 GoalDetailPage와 합칠 예정 const GoalSavedPage = () => { - const id = useSearchParams().get('id'); - const { data: goal } = useGetGoal({ goalId: Number(id) }); + const id = Number(useSearchParams().get('id')); + const { data: goal } = useGetGoal({ goalId: id }); + usePrefetchGoals(); return ( - } - sticker={goal && } - body={ - goal && ( + goal && ( + } + sticker={} + body={ - ) - } - footer={} - /> + } + footer={} + /> + ) ); }; diff --git a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx b/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx index a8bd6f7f..f45c3328 100644 --- a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx +++ b/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx @@ -21,7 +21,7 @@ export const DeleteGoalButtomSheet = ({ open, onClose, goalId }: DeleteGoalButto useEffect(() => { if (isSuccess) { onClose(); - router.back(); + router.push('/home'); } }, [isSuccess, isError, onClose, router]); diff --git a/src/features/goal/components/detail/DetailHeader.tsx b/src/features/goal/components/detail/DetailHeader.tsx index 96314cee..f03507ee 100644 --- a/src/features/goal/components/detail/DetailHeader.tsx +++ b/src/features/goal/components/detail/DetailHeader.tsx @@ -18,7 +18,7 @@ export const DetailHeader = ({ goalId }: DetailHeaderProps) => { return ( <> - + diff --git a/src/features/goal/components/detail/SavedFooterButton.tsx b/src/features/goal/components/detail/SavedFooterButton.tsx index 16e313b0..32f11fb3 100644 --- a/src/features/goal/components/detail/SavedFooterButton.tsx +++ b/src/features/goal/components/detail/SavedFooterButton.tsx @@ -4,11 +4,15 @@ import Link from 'next/link'; import { Button } from '@/components'; import { useGetMemberData } from '@/hooks/reactQuery/auth'; -export const SavedFooterButton = () => { +interface SavedFooterButtonProps { + goalId: number; +} + +export const SavedFooterButton = ({ goalId }: SavedFooterButtonProps) => { const { data: memberData } = useGetMemberData(); return ( - + ); diff --git a/src/features/goal/components/detail/SavedHeader.tsx b/src/features/goal/components/detail/SavedHeader.tsx index 08df631e..d7fc6e25 100644 --- a/src/features/goal/components/detail/SavedHeader.tsx +++ b/src/features/goal/components/detail/SavedHeader.tsx @@ -6,10 +6,14 @@ import CloseIcon from '@/assets/icons/goal/close-icon.svg'; import { Typography } from '@/components/atoms'; import { useGetMemberData } from '@/hooks/reactQuery/auth'; -export const SavedHeader = () => { +interface SavedHeaderProps { + goalId: number; +} + +export const SavedHeader = ({ goalId }: SavedHeaderProps) => { const { data: memberData } = useGetMemberData(); - const pathname = `/home/${memberData?.username}`; + const pathname = `/home/${memberData?.username}?id=${goalId}`; return ( <> diff --git a/src/features/home/components/mapSwiper/MapSwiper.tsx b/src/features/home/components/mapSwiper/MapSwiper.tsx index db9ba922..3a853b5d 100644 --- a/src/features/home/components/mapSwiper/MapSwiper.tsx +++ b/src/features/home/components/mapSwiper/MapSwiper.tsx @@ -1,9 +1,7 @@ -import { type PropsWithChildren, useEffect, useState } from 'react'; +import { type PropsWithChildren } from 'react'; import { Pagination } from 'swiper/modules'; import { Swiper } from 'swiper/react'; -import { GOAL_COUNT_PER_PAGE } from '@/features/home/constants'; - import { CustomPagination } from './CustomPagination'; import 'swiper/css'; @@ -16,21 +14,13 @@ const settings = { }; interface MapSwiperProps extends PropsWithChildren { - currentPosition: number | null; + currentPage: number | null; } -export const MapSwiper = ({ currentPosition, children }: MapSwiperProps) => { - const [initialSlide, setInitialSlide] = useState(null); - - useEffect(() => { - if (currentPosition) { - setInitialSlide(Math.floor(currentPosition / GOAL_COUNT_PER_PAGE)); - } - }, [currentPosition]); - +export const MapSwiper = ({ currentPage, children }: MapSwiperProps) => { return ( - initialSlide !== null && ( - + currentPage !== null && ( + {children} diff --git a/src/hooks/reactQuery/goal/useGetGoals.ts b/src/hooks/reactQuery/goal/useGetGoals.ts index 6577786c..da98f4fe 100644 --- a/src/hooks/reactQuery/goal/useGetGoals.ts +++ b/src/hooks/reactQuery/goal/useGetGoals.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useAtomValue } from 'jotai'; import { api } from '@/apis'; @@ -26,3 +26,11 @@ export const useGetGoals = () => { enabled: isLogin, }); }; + +export const usePrefetchGoals = (): void => { + const queryClient = useQueryClient(); + queryClient.prefetchQuery({ + queryKey: ['goals'], + queryFn: () => api.get('/life-map'), + }); +}; From 5443f65674853c555a91f5d8b578746dd86fb14e Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Wed, 17 Jan 2024 09:45:34 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20conflict=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?=EC=8B=9C=20=EB=B9=A0=EC=A7=84=20=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/components/lifeMap/LifeMapContent.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/features/home/components/lifeMap/LifeMapContent.tsx b/src/features/home/components/lifeMap/LifeMapContent.tsx index 64a20c1a..b615ddee 100644 --- a/src/features/home/components/lifeMap/LifeMapContent.tsx +++ b/src/features/home/components/lifeMap/LifeMapContent.tsx @@ -3,6 +3,7 @@ import type { RefObject } from 'react'; import { useEffect, useState } from 'react'; import Link from 'next/link'; +import { useSearchParams } from 'next/navigation'; import { SwiperSlide } from 'swiper/react'; import StarBg from '@/app/home/[username]/startBg'; @@ -32,6 +33,7 @@ export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPu const [position, setPosition] = useState(null); const [currentPage, setCurrentPage] = useState(null); + const paramId = Number(useSearchParams().get('id')); useEffect(() => { if (goalsData?.goals) { @@ -58,7 +60,16 @@ export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPu position = currentPosition + 1; } setPosition(position); - setCurrentPage(Math.floor(position / GOAL_COUNT_PER_PAGE)); + + let page = Math.floor(position / GOAL_COUNT_PER_PAGE); + // check if query params contains id value + if (paramId) { + const index = goals.findIndex(({ id: goalId }) => goalId === paramId); + if (index > -1) { + page = Math.floor((index + 1) / GOAL_COUNT_PER_PAGE); + } + } + setCurrentPage(page); }; return ( @@ -95,7 +106,7 @@ export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPu
- + {participatedGoalsArray?.map((goals, page) => (
From 8f7b51c08641d7a61b9d45a1c5f2a06680f64be7 Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Wed, 17 Jan 2024 09:47:44 +0900 Subject: [PATCH 3/9] Merge branch 'feat/home-position-after-goal-detail-saved' of https://github.com/depromeet/amazing3-fe into feat/home-position-after-goal-detail-saved --- src/hooks/reactQuery/goal/useGetGoals.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/hooks/reactQuery/goal/useGetGoals.ts b/src/hooks/reactQuery/goal/useGetGoals.ts index da98f4fe..3eef576a 100644 --- a/src/hooks/reactQuery/goal/useGetGoals.ts +++ b/src/hooks/reactQuery/goal/useGetGoals.ts @@ -34,3 +34,11 @@ export const usePrefetchGoals = (): void => { queryFn: () => api.get('/life-map'), }); }; + +export const usePrefetchGoals = (): void => { + const queryClient = useQueryClient(); + queryClient.prefetchQuery({ + queryKey: ['goals'], + queryFn: () => api.get('/life-map'), + }); +}; From 1e5c12c2d655507584256b9bb7bf9ca5a4b4592a Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Wed, 17 Jan 2024 10:16:14 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20rebase=20=EA=B3=BC=EC=A0=95=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=A4=91=EB=B3=B5=20=EC=B6=94=EA=B0=87=EB=90=9C=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/reactQuery/goal/useGetGoals.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/hooks/reactQuery/goal/useGetGoals.ts b/src/hooks/reactQuery/goal/useGetGoals.ts index 3eef576a..da98f4fe 100644 --- a/src/hooks/reactQuery/goal/useGetGoals.ts +++ b/src/hooks/reactQuery/goal/useGetGoals.ts @@ -34,11 +34,3 @@ export const usePrefetchGoals = (): void => { queryFn: () => api.get('/life-map'), }); }; - -export const usePrefetchGoals = (): void => { - const queryClient = useQueryClient(); - queryClient.prefetchQuery({ - queryKey: ['goals'], - queryFn: () => api.get('/life-map'), - }); -}; From 1102c96f4dd69241d6640582f38830efcf9c60c6 Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Wed, 17 Jan 2024 10:28:23 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20rebase=20=EB=B0=98=EC=98=81=20?= =?UTF-8?q?=EC=8B=9C=20=EB=B9=A0=EC=A7=84=20=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goal/components/detail/DeleteGoalButtomSheet.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx b/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx index f45c3328..2815204d 100644 --- a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx +++ b/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx @@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation'; import BandiMoori from '@/assets/images/bandi-moori.png'; import { BottomSheet, Button, Typography } from '@/components/atoms'; +import { useGetMemberData } from '@/hooks/reactQuery/auth'; import { useDeleteGoal } from '@/hooks/reactQuery/goal'; interface DeleteGoalButtomSheetProps { @@ -16,14 +17,15 @@ interface DeleteGoalButtomSheetProps { export const DeleteGoalButtomSheet = ({ open, onClose, goalId }: DeleteGoalButtomSheetProps) => { const { mutate, isSuccess, isError } = useDeleteGoal(); + const { data: memberData } = useGetMemberData(); const router = useRouter(); useEffect(() => { if (isSuccess) { onClose(); - router.push('/home'); + router.push(`/home/${memberData?.username}`); } - }, [isSuccess, isError, onClose, router]); + }, [isSuccess, isError, onClose, router, memberData]); const handleDelete = () => { if (!goalId) { From 09115052b501db2b8f5a62ca2344daeda4ba5277 Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Wed, 17 Jan 2024 12:38:21 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goal/components/detail/DetailHeader.tsx | 2 +- .../components/detail/SavedFooterButton.tsx | 2 +- .../goal/components/detail/SavedHeader.tsx | 7 ++++--- .../components/lifeMap/LifeMapContent.tsx | 20 ++++++++++++++----- 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/features/goal/components/detail/DetailHeader.tsx b/src/features/goal/components/detail/DetailHeader.tsx index f03507ee..19d0f706 100644 --- a/src/features/goal/components/detail/DetailHeader.tsx +++ b/src/features/goal/components/detail/DetailHeader.tsx @@ -18,7 +18,7 @@ export const DetailHeader = ({ goalId }: DetailHeaderProps) => { return ( <> - + diff --git a/src/features/goal/components/detail/SavedFooterButton.tsx b/src/features/goal/components/detail/SavedFooterButton.tsx index 32f11fb3..29ae8ec3 100644 --- a/src/features/goal/components/detail/SavedFooterButton.tsx +++ b/src/features/goal/components/detail/SavedFooterButton.tsx @@ -12,7 +12,7 @@ export const SavedFooterButton = ({ goalId }: SavedFooterButtonProps) => { const { data: memberData } = useGetMemberData(); return ( - + ); diff --git a/src/features/goal/components/detail/SavedHeader.tsx b/src/features/goal/components/detail/SavedHeader.tsx index d7fc6e25..8e253930 100644 --- a/src/features/goal/components/detail/SavedHeader.tsx +++ b/src/features/goal/components/detail/SavedHeader.tsx @@ -13,15 +13,16 @@ interface SavedHeaderProps { export const SavedHeader = ({ goalId }: SavedHeaderProps) => { const { data: memberData } = useGetMemberData(); - const pathname = `/home/${memberData?.username}?id=${goalId}`; + const pathname = `/home/${memberData?.username}`; + const query = { id: goalId }; return ( <> - + 목표 저장 완료! - + diff --git a/src/features/home/components/lifeMap/LifeMapContent.tsx b/src/features/home/components/lifeMap/LifeMapContent.tsx index b615ddee..f6b9cc02 100644 --- a/src/features/home/components/lifeMap/LifeMapContent.tsx +++ b/src/features/home/components/lifeMap/LifeMapContent.tsx @@ -27,11 +27,19 @@ interface LifeMapProps { isPublic?: boolean; } +interface PositionStateProps { + position: number | null; + positionPage: number | null; +} + export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPublic = false }: LifeMapProps) => { const participatedGoalsArray = partitionArrayWithSmallerFirstGroup(GOAL_COUNT_PER_PAGE, goalsData?.goals); const LAST_PAGE = participatedGoalsArray.length; - const [position, setPosition] = useState(null); + const [positionState, setPositionState] = useState({ + position: null, + positionPage: null, + }); const [currentPage, setCurrentPage] = useState(null); const paramId = Number(useSearchParams().get('id')); @@ -59,9 +67,11 @@ export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPu default: position = currentPosition + 1; } - setPosition(position); + const positionPage = Math.floor(position / GOAL_COUNT_PER_PAGE); + position = position % TOTAL_CURRENT_POSITIONS; + setPositionState({ position, positionPage }); - let page = Math.floor(position / GOAL_COUNT_PER_PAGE); + let page = positionPage; // check if query params contains id value if (paramId) { const index = goals.findIndex(({ id: goalId }) => goalId === paramId); @@ -115,8 +125,8 @@ export const LifeMapContent = ({ goalsData, memberData, downloadSectionRef, isPu ) : ( )} - {position && currentPage === page && ( - + {positionState.positionPage === page && positionState.position && ( + )}
From 9b3a670ad09075dd02ac912e4a0d432c5ef61625 Mon Sep 17 00:00:00 2001 From: deepbig <34956359+deepbig@users.noreply.github.com> Date: Thu, 18 Jan 2024 00:12:40 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...tomSheet.tsx => DeleteGoalBottomSheet.tsx} | 41 ++++++++----------- .../goal/components/detail/DetailHeader.tsx | 4 +- .../components/lifeMap/LifeMapContent.tsx | 7 ++-- .../home/components/mapSwiper/MapSwiper.tsx | 4 +- src/hooks/reactQuery/goal/useDeleteGoal.ts | 9 +++- 5 files changed, 33 insertions(+), 32 deletions(-) rename src/features/goal/components/detail/{DeleteGoalButtomSheet.tsx => DeleteGoalBottomSheet.tsx} (57%) diff --git a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx b/src/features/goal/components/detail/DeleteGoalBottomSheet.tsx similarity index 57% rename from src/features/goal/components/detail/DeleteGoalButtomSheet.tsx rename to src/features/goal/components/detail/DeleteGoalBottomSheet.tsx index 2815204d..b5a2478b 100644 --- a/src/features/goal/components/detail/DeleteGoalButtomSheet.tsx +++ b/src/features/goal/components/detail/DeleteGoalBottomSheet.tsx @@ -1,36 +1,21 @@ -'use client'; - -import { useEffect } from 'react'; import Image from 'next/image'; -import { useRouter } from 'next/navigation'; import BandiMoori from '@/assets/images/bandi-moori.png'; import { BottomSheet, Button, Typography } from '@/components/atoms'; -import { useGetMemberData } from '@/hooks/reactQuery/auth'; +import { Spinner } from '@/components/atoms/spinner'; import { useDeleteGoal } from '@/hooks/reactQuery/goal'; -interface DeleteGoalButtomSheetProps { +interface DeleteGoalBottomSheetProps { open: boolean; onClose: () => void; goalId: number; } -export const DeleteGoalButtomSheet = ({ open, onClose, goalId }: DeleteGoalButtomSheetProps) => { - const { mutate, isSuccess, isError } = useDeleteGoal(); - const { data: memberData } = useGetMemberData(); - const router = useRouter(); - - useEffect(() => { - if (isSuccess) { - onClose(); - router.push(`/home/${memberData?.username}`); - } - }, [isSuccess, isError, onClose, router, memberData]); +export const DeleteGoalBottomSheet = ({ open, onClose, goalId }: DeleteGoalBottomSheetProps) => { + const { mutate, isPending } = useDeleteGoal(); const handleDelete = () => { - if (!goalId) { - return; - } + if (!goalId) return; mutate({ goalId }); }; @@ -40,7 +25,7 @@ export const DeleteGoalButtomSheet = ({ open, onClose, goalId }: DeleteGoalButto open={open} onDismiss={onClose} fixedMaxHeight={520} - FooterComponent={