refactor: 회고 상세페이지 접근 속도 개선 (#185)

* refactor: 회고 상세 페이지 prefetch 적용

* feat: 할 일 끝내기 바텀시트 Drawer 적용

* feat: router.push -> Link로 변경

Author: prgmr99

src/app/(protected)/immersion/[taskId]/ImmersionPageClient.tsx

@@ -14,6 +14,7 @@ import TasksDropdown from "@/app/(protected)/immersion/_components/TasksDropdown
 import { Badge } from "@/components/component/Badge";
 import Toast from "@/components/toast/Toast";
 import { Button } from "@/components/ui/button";
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
 import { useCompleteTask, useInProgressTasks } from "@/hooks/useTasks";
 import { getPersonaImage } from "@/utils/getPersonaImage";
 import ArrowLeft from "@public/icons/common/arrow-left.svg";
@@ -92,7 +93,6 @@ export default function ImmersionPageClient({ initialTask }: Props) {
 
 	const handleConfirmComplete = () => {
 		completeTask(Number(initialTask.id));
-		router.push(`/immersion/complete?taskId=${initialTask.id}`);
 	};
 
 	const handleReflection = () => {
@@ -304,14 +304,10 @@ export default function ImmersionPageClient({ initialTask }: Props) {
 			)}
 
 			{/* 할일 완료 바텀시트 */}
-			{showBottomSheet && (
-				<div
-					className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-60"
+			<Drawer open={showBottomSheet} onOpenChange={setShowBottomSheet}>
+				<DrawerContent
+					className="w-auto border-0 bg-component-gray-secondary pb-[33px] pt-2"
 					onClick={handleOverlayClick}
-					onKeyDown={handleOverlayClick}
-					tabIndex={0}
-					role="button"
-					aria-label="바텀시트 닫기"
 				>
 					<div className="flex w-full flex-col items-center rounded-t-[28px] bg-component-gray-secondary px-5 pb-[34px] pt-10">
 						<h2 className="t3 text-center text-gray-normal">
@@ -323,34 +319,36 @@ export default function ImmersionPageClient({ initialTask }: Props) {
 						<p className="b3 mb-7 text-center text-text-neutral">
 							마감까지 {remainingTime}
 						</p>
-						<button
-							type="button"
-							className="l2 w-full rounded-[16px] bg-component-accent-primary py-4 text-gray-strong"
-							onClick={handleConfirmComplete}
-						>
-							할일 끝내기
-						</button>
-
-						<button
-							type="button"
-							className="b2 w-full pb-2 pt-4 text-text-neutral"
-							onClick={() => setShowBottomSheet(false)}
-						>
-							몰입으로 돌아가기
-						</button>
+						<DrawerClose asChild>
+							<Link href={`/immersion/complete?taskId=${initialTask.id}`}>
+								<button
+									type="button"
+									className="l2 w-full rounded-[16px] bg-component-accent-primary py-4 text-gray-strong"
+									onClick={handleConfirmComplete}
+								>
+									할일 끝내기
+								</button>
+							</Link>
+						</DrawerClose>
+						<DrawerClose asChild>
+							<button
+								type="button"
+								className="b2 w-full pb-2 pt-4 text-text-neutral"
+								onClick={() => setShowBottomSheet(false)}
+							>
+								몰입으로 돌아가기
+							</button>
+						</DrawerClose>
 					</div>
-				</div>
-			)}
+				</DrawerContent>
+			</Drawer>
 
 			{/* 시간 만료 바텀시트 */}
 			{showTimeExpiredSheet && (
 				<div
 					className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-60"
 					onClick={handleTimeExpiredOverlayClick}
 					onKeyDown={handleTimeExpiredOverlayClick}
-					tabIndex={0}
-					role="button"
-					aria-label="시간 만료 바텀시트 닫기"
 				>
 					<div className="flex w-full flex-col items-center rounded-t-[28px] bg-component-gray-secondary px-5 pb-[34px] pt-6">
 						<h2 className="t3 mt-4 text-center text-gray-normal">

src/app/(protected)/my-page/_component/TaskContainer.tsx

@@ -2,6 +2,7 @@ import { useExpiredTaskStore } from "@/store/useTaskStore";
 import type { TaskOrigin } from "@/types/myPage";
 import { format } from "date-fns";
 import { ko } from "date-fns/locale";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 
@@ -15,14 +16,16 @@ const TaskItem = ({ task }: { task: TaskOrigin }) => {
 
 	const handleTaskClick = () => {
 		setCurrentTask(task);
-		router.push(`/my-page/task-detail/${task.id}`);
 	};
 
 	return (
-		<div className="flex flex-col gap-2 py-4" onClick={handleTaskClick}>
-			<div className="text-s2">{task.name}</div>
-			<div className="text-s3 text-gray-alternative">{formattedDate}</div>
-		</div>
+		<Link href={`/my-page/task-detail/${task.id}`} prefetch>
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+			<div className="flex flex-col gap-2 py-4" onClick={handleTaskClick}>
+				<div className="text-s2">{task.name}</div>
+				<div className="text-s3 text-gray-alternative">{formattedDate}</div>
+			</div>
+		</Link>
 	);
 };
 
@@ -53,12 +56,14 @@ const TaskContainer = ({
 	return (
 		<div className="mt-8 px-5">
 			<div className="flex items-center gap-4">
+				{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 				<div
 					className={`cursor-pointer text-t3 ${activeTab === "completed" ? "text-gray-normal" : "text-gray-alternative"}`}
 					onClick={() => handleTabClick("completed")}
 				>
 					완료한 일 {completedTasks.length}
 				</div>
+				{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 				<div
 					className={`cursor-pointer text-t3 ${activeTab === "postponed" ? "text-gray-normal" : "text-gray-alternative"}`}
 					onClick={() => handleTabClick("postponed")}

src/hooks/useTasks.ts

@@ -136,7 +136,7 @@ export const useCompleteTask = () => {
 		mutationFn: (taskId: number) => completeTask(taskId),
 		onSuccess: (updatedTask) => {
 			queryClient.setQueryData(["tasks", updatedTask.id], updatedTask);
-			queryClient.invalidateQueries({ queryKey: ["tasks"] });
+			queryClient.invalidateQueries({ queryKey: ["tasks", "myPage"] });
 		},
 	});
 };