refactor: 몰입 화면 prefetch 적용 (#175)

* refactor: sharp 라이브러리 세팅

* chore: 마이페이지 stale 시간 제거

* refactor: 작업 완료 모달 애니메이션 추가

* refactor: 몰입화면 prefetch 적용

Author: prgmr99

package-lock.json

@@ -34,8 +34,8 @@
 		"react": "^19.0.0",
 		"react-day-picker": "^8.10.1",
 		"react-dom": "^19.0.0",
+		"sharp": "^0.34.1",
 		"tailwind-merge": "^2.6.0",
-		"tailwindcss-animate": "^1.0.7",
 		"vaul": "^1.1.2",
 		"zustand": "^5.0.3"
 	},
@@ -56,6 +56,7 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-tailwindcss": "^0.6.10",
 		"tailwindcss": "^3.4.17",
+		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5"
 	}
 }

package.json

@@ -1,5 +1,6 @@
 "use client";
 
+import Loader from "@/components/loader/Loader";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -18,6 +19,7 @@ interface CharacterDialogProps {
 	taskType: string;
 	personaName: string;
 	personaId?: number;
+	isLoading: boolean;
 	onClick: () => void;
 }
 
@@ -27,13 +29,14 @@ const CharacterDialog = ({
 	taskType,
 	personaName,
 	personaId,
+	isLoading,
 	onClick,
 }: CharacterDialogProps) => {
 	const { userData } = useUserStore();
 	const personaImageSrc = getPersonaImage(personaId);
 
 	return (
-		<Dialog open={isOpen} onOpenChange={onClick}>
+		<Dialog open={isOpen} onOpenChange={onClick} modal>
 			<DialogContent className="w-[328px] rounded-[24px] border-none bg-component-gray-secondary px-4 py-6">
 				<DialogHeader>
 					<DialogTitle className="text-normal t3 mb-1">
@@ -65,7 +68,13 @@ const CharacterDialog = ({
 						<span className="l6 text-inverse">{`${personaName} ${userData.nickname}`}</span>
 					</div>
 				</div>
-				<Button variant="primary" className="w-full" onClick={onClick}>
+				<Button
+					variant="primary"
+					className="w-full"
+					disabled={isLoading}
+					onClick={onClick}
+				>
+					{isLoading && <Loader width={24} height={24} />}
 					{taskType === "instant" ? "시작" : "확인"}
 				</Button>
 			</DialogContent>

src/app/(protected)/(create)/_components/characterDialog/CharacterDialog.tsx

@@ -1,26 +1,17 @@
 "use client";
 
 import BackHeader from "@/components/backHeader/BackHeader";
-import Loader from "@/components/loader/Loader";
+
 import useMount from "@/hooks/useMount";
 import type { InstantTaskType, TimePickerType } from "@/types/create";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createFunnelSteps, useFunnel } from "@use-funnel/browser";
-import dynamic from "next/dynamic";
+
 import { useRouter } from "next/navigation";
+import InstantTaskTypeInput from "../_components/instantTaskTypeInput/InstantTaskTypeInput";
 import TaskInput from "../_components/taskInput/TaskInput";
 import type { InstantTaskInputType, TaskInputType } from "../context";
 
-const InstantTaskTypeInput = dynamic(
-	() =>
-		import(
-			"@/app/(protected)/(create)/_components/instantTaskTypeInput/InstantTaskTypeInput"
-		),
-	{
-		loading: () => <Loader />,
-	},
-);
-
 type FormState = {
 	task?: string;
 	deadlineDate?: Date;

src/app/(protected)/(create)/instant-create/page.tsx

@@ -10,8 +10,8 @@ const HeaderBar = () => {
 				alt="SPURT"
 				width={54}
 				height={20}
-				priority
 				className="w-[54px]"
+				priority
 			/>
 			<Link href="/my-page" className="flex items-center">
 				<button type="button">
@@ -20,6 +20,7 @@ const HeaderBar = () => {
 						alt="마이페이지"
 						width={20}
 						height={20}
+						priority
 					/>
 				</button>
 			</Link>

src/app/(protected)/(root)/_components/header/headerBar/HeaderBar.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import type { Task } from "@/types/task";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
-import ExpiredTaskDrawer from "../expiredTaskDrawer/ExpiredTaskDrawer";
 import HasAllTasksOnlyScreen from "../hasAllTasksOnlyScreen/HasAllTasksOnlyScreen";
 import HasInProgressTasksOnlyScreen from "../hasInProgressTasksOnlyScreen/HasInProgressTasksOnlyScreen";
 import HasTodayAndInProgressTasksScreen from "../hasTodayAndInProgressTasksScreen/HasTodayAndInProgressTasksScreen";
@@ -37,20 +34,6 @@ const TodayTaskTabWrapper = ({
 	handleDetailTask,
 	handleDeleteTask,
 }: TodayTaskTabWrapperProps) => {
-	const router = useRouter();
-
-	const [showExpiredTaskSheet, setShowExpiredTaskSheet] = useState(false);
-	const [expiredTask, setExpiredTask] = useState<Task | null>(null);
-
-	const handleGoToReflection = (taskId: number) => {
-		router.push(`/retrospection/${taskId}`);
-		setShowExpiredTaskSheet(false);
-	};
-
-	const handleCloseExpiredSheet = () => {
-		setShowExpiredTaskSheet(false);
-	};
-
 	return (
 		<>
 			{isTotallyEmpty && <IsEmptyScreen />}
@@ -94,14 +77,14 @@ const TodayTaskTabWrapper = ({
 				/>
 			)}
 
-			{/* 뭔가 잘못된거 같음. expiredTask를 할당하는 로직이 없음. */}
+			{/* 뭔가 잘못된거 같음. expiredTask를 할당하는 로직이 없음.
 			{showExpiredTaskSheet && expiredTask && (
 				<ExpiredTaskDrawer
 					expiredTask={expiredTask}
 					handleGoToReflection={handleGoToReflection}
 					handleCloseExpiredSheet={handleCloseExpiredSheet}
 				/>
-			)}
+			)} */}
 		</>
 	);
 };

src/app/(protected)/(root)/_components/todayTaskTabWrapper/TodayTaskTabWrapper.tsx

@@ -44,7 +44,6 @@ const HomePageContent = () => {
 		inProgressTasks,
 	});
 
-	// 화면 분기 처리를 위한 상태
 	const [isDetailSheetOpen, setIsDetailSheetOpen] = useState(false);
 	const [activeTab, setActiveTab] = useState<"today" | "all">("today");
 	const [detailTask, setDetailTask] = useState<Task | null>(null);
@@ -60,6 +59,7 @@ const HomePageContent = () => {
 	const [urgentTaskId, setUrgentTaskId] = useState<number | undefined>(
 		undefined,
 	);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const handleDetailTask = (task: Task) => {
 		setDetailTask(task);
@@ -99,12 +99,15 @@ const HomePageContent = () => {
 		setIsCreateSheetOpen(false);
 	};
 
-	const handleCharacterDialogButtonClick = () => {
+	const handleCharacterDialogButtonClick = async () => {
 		if (taskType === "instant") {
-			router.push(`/immersion/${urgentTaskId}`);
+			setIsLoading(true);
+			await router.push(`/immersion/${urgentTaskId}`);
 		} else {
 			setIsDialogOpen(false);
 		}
+
+		setIsLoading(false);
 	};
 
 	const handleFailedDialogButtonClick = () => {
@@ -115,6 +118,12 @@ const HomePageContent = () => {
 		setActiveTab(tab);
 	}, []);
 
+	useEffect(() => {
+		if (isDialogOpen && taskType === "instant") {
+			router.prefetch(`immersion/${urgentTaskId}`);
+		}
+	}, [isDialogOpen, router, taskType, urgentTaskId]);
+
 	useEffect(() => {
 		if (searchParams.get("dialog") === "success") {
 			setIsDialogOpen(true);
@@ -231,6 +240,7 @@ const HomePageContent = () => {
 				taskType={taskType}
 				personaName={personaName}
 				personaId={personaId}
+				isLoading={isLoading}
 				onClick={handleCharacterDialogButtonClick}
 			/>
 

src/app/(protected)/(root)/page.tsx

@@ -25,7 +25,6 @@ export default function MyPage() {
 		queryKey: ["myPage"],
 		queryFn: async () => await fetch("/api/my-page").then((res) => res.json()),
 		enabled: !!userData.memberId,
-		staleTime: 1000 * 60 * 5,
 	});
 
 	const handlePersonaClick = (id: number) => {

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

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import animatePlugin from "tailwindcss-animate";
 
 export default {
 	darkMode: ["class"],
@@ -209,5 +210,5 @@ export default {
 			},
 		},
 	},
-	plugins: [],
+	plugins: [animatePlugin],
 } satisfies Config;