feat: 목표 생성, 목표 상세보기, 목표 삭제 후 현재 페이지 변경 로직 추가

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 (
-    <DetailLayout
-      header={<SavedHeader />}
-      sticker={goal && <Sticker stickerUrl={goal.stickerUrl} />}
-      body={
-        goal && (
+    goal && (
+      <DetailLayout
+        header={<SavedHeader id={id} />}
+        sticker={<Sticker stickerUrl={goal.stickerUrl} />}
+        body={
           <ContentBody title={goal.title} date={goal.deadline} tag={goal.tagInfo.tagContent} more={goal.description} />
-        )
-      }
-      footer={<SavedFooterButton />}
-    />
+        }
+        footer={<SavedFooterButton id={id} />}
+      />
+    )
   );
 };
 

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]);
 

src/features/goal/components/detail/DetailHeader.tsx

@@ -16,7 +16,7 @@ export const DetailHeader = ({ goalId }: DetailHeaderProps) => {
 
   return (
     <>
-      <Link href={{ pathname: '/home' }}>
+      <Link href={`/home?id=${goalId}`}>
         <CloseIcon />
       </Link>
 

src/features/goal/components/detail/SavedFooterButton.tsx

@@ -3,9 +3,13 @@ import Link from 'next/link';
 
 import { Button } from '@/components';
 
-export const SavedFooterButton = () => {
+interface SavedFooterButtonProps {
+  id: number;
+}
+
+export const SavedFooterButton = ({ id }: SavedFooterButtonProps) => {
   return (
-    <Link href={{ pathname: '/home' }}>
+    <Link href={`/home?id=${id}`}>
       <Button>홈으로 가기</Button>
     </Link>
   );

src/features/goal/components/detail/SavedHeader.tsx

@@ -5,10 +5,14 @@ import BackIcon from '@/assets/icons/goal/back-icon.svg';
 import CloseIcon from '@/assets/icons/goal/close-icon.svg';
 import { Typography } from '@/components/atoms';
 
-export const SavedHeader = () => {
+interface SavedHeaderProps {
+  id: number;
+}
+
+export const SavedHeader = ({ id }: SavedHeaderProps) => {
   return (
     <>
-      <Link href={{ pathname: '/home' }}>
+      <Link href={`/home?id=${id}`}>
         <BackIcon />
       </Link>
       <Typography type="header1">목표 저장 완료!</Typography>

src/features/home/components/lifeMap/LifeMap.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import { useOverlay } from '@toss/use-overlay';
 import { SwiperSlide } from 'swiper/react';
 
@@ -33,12 +34,12 @@ export const LifeMap = () => {
 
   const [position, setPosition] = useState<number | null>(null);
   const [currentPage, setCurrentPage] = useState<number | null>(null);
+  const paramId = Number(useSearchParams().get('id'));
 
   useEffect(() => {
     if (goalsData?.goals) {
-      findCurrentPosition(goalsData?.goals);
+      findCurrentPosition(goalsData.goals);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalsData]);
 
   const findCurrentPosition = (goals: Array<GoalProps>) => {
@@ -59,7 +60,16 @@ export const LifeMap = () => {
         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);
   };
 
   const handleOpenShareBottomSheet = () => {
@@ -100,15 +110,15 @@ export const LifeMap = () => {
           <StarBg />
           <div className="h-[520px]">
             <div className="absolute inset-x-0">
-              <MapSwiper currentPosition={position}>
+              <MapSwiper currentPage={currentPage}>
                 {participatedGoalsArray?.map((goals, page) => (
                   <SwiperSlide key={`swiper-goal-${page}`}>
                     {!(page % 2) ? (
                       <MapCardPositioner type="A" goals={goals} isFirst={page === 0} isLast={page === LAST_PAGE - 1} />
                     ) : (
                       <MapCardPositioner type="B" goals={goals} isLast={page === LAST_PAGE - 1} />
                     )}
-                    {position && currentPage === page && (
+                    {position && Math.floor(position / GOAL_COUNT_PER_PAGE) === page && (
                       <CurrentPositionCover currentPosition={position % TOTAL_CURRENT_POSITIONS} />
                     )}
                   </SwiperSlide>

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<number | null>(null);
-
-  useEffect(() => {
-    if (currentPosition) {
-      setInitialSlide(Math.floor(currentPosition / GOAL_COUNT_PER_PAGE));
-    }
-  }, [currentPosition]);
-
+export const MapSwiper = ({ currentPage, children }: MapSwiperProps) => {
   return (
-    initialSlide !== null && (
-      <Swiper {...settings} initialSlide={initialSlide} className="h-full">
+    currentPage !== null && (
+      <Swiper {...settings} initialSlide={currentPage} className="h-full">
         {children}
         <CustomPagination />
       </Swiper>

src/hooks/reactQuery/goal/useGetGoals.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { api } from '@/apis';
 
@@ -21,3 +21,11 @@ export const useGetGoals = () => {
     queryFn: () => api.get<GoalResponse>('/life-map'),
   });
 };
+
+export const usePrefetchGoals = (): void => {
+  const queryClient = useQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: ['goals'],
+    queryFn: () => api.get<GoalResponse>('/life-map'),
+  });
+};