fix: 이미지 캐싱이 적용되지 않는 이슈

.vscode/settings.json

@@ -10,6 +10,8 @@
 
 	"cSpell.words": [
 		"appleid",
+		"glasshour",
+		"heartfire",
 		"KAKAO",
 		"kakaocdn",
 		"pretendard",

public/icons/character/index.ts

@@ -0,0 +1,56 @@
+import img1 from "./1.png";
+import img2 from "./2.png";
+import img3 from "./3.png";
+import img4 from "./4.png";
+import img5 from "./5.png";
+import img6 from "./6.png";
+import img7 from "./7.png";
+import img8 from "./8.png";
+import img9 from "./9.png";
+import img10 from "./10.png";
+import img11 from "./11.png";
+import img12 from "./12.png";
+import img13 from "./13.png";
+import img14 from "./14.png";
+import img15 from "./15.png";
+import img16 from "./16.png";
+import img17 from "./17.png";
+import img18 from "./18.png";
+import img19 from "./19.png";
+import img20 from "./20.png";
+import img21 from "./21.png";
+import img22 from "./22.png";
+import img23 from "./23.png";
+import img24 from "./24.png";
+import defaultImg from "./default.png";
+
+import type { StaticImageData } from "next/image";
+
+export const PERSONA_ICON_MAP: Record<number, StaticImageData> = {
+	1: img1,
+	2: img2,
+	3: img3,
+	4: img4,
+	5: img5,
+	6: img6,
+	7: img7,
+	8: img8,
+	9: img9,
+	10: img10,
+	11: img11,
+	12: img12,
+	13: img13,
+	14: img14,
+	15: img15,
+	16: img16,
+	17: img17,
+	18: img18,
+	19: img19,
+	20: img20,
+	21: img21,
+	22: img22,
+	23: img23,
+	24: img24,
+};
+
+export const DEFAULT_PERSONA_ICON = defaultImg;

public/icons/index.ts

@@ -0,0 +1,32 @@
+import assignmentIcon from "@public/icons/assignment.svg";
+import designIcon from "@public/icons/design.svg";
+import exerciseIcon from "@public/icons/exercise.svg";
+import programmingIcon from "@public/icons/programming.svg";
+import studyIcon from "@public/icons/study.svg";
+import writingIcon from "@public/icons/writing.svg";
+
+import calmIcon from "@public/icons/calm.svg";
+import emotionalIcon from "@public/icons/emotional.svg";
+import excitedIcon from "@public/icons/excited.svg";
+import urgentIcon from "@public/icons/urgent.svg";
+
+import { MoodType, TaskType } from "@/types/create";
+import type { StaticImageData } from "next/image";
+
+/**
+ * ICON_MAP maps each TaskType and MoodType enum value
+ * to its corresponding static image import.
+ */
+export const ICON_MAP: Record<TaskType | MoodType, StaticImageData> = {
+	[TaskType.STUDY]: studyIcon,
+	[TaskType.WRITING]: writingIcon,
+	[TaskType.EXERCISE]: exerciseIcon,
+	[TaskType.PROGRAMMING]: programmingIcon,
+	[TaskType.DESIGN]: designIcon,
+	[TaskType.ASSIGNMENT]: assignmentIcon,
+
+	[MoodType.URGENT]: urgentIcon,
+	[MoodType.EXCITED]: excitedIcon,
+	[MoodType.EMOTIONAL]: emotionalIcon,
+	[MoodType.CALM]: calmIcon,
+};

public/icons/retro/index.ts

@@ -0,0 +1,23 @@
+import type { StaticImageData } from "next/image";
+
+import retro1_0_0 from "@public/icons/retro/retro1-0-0.svg";
+import retro1_0_1 from "@public/icons/retro/retro1-0-1.svg";
+import retro1_1_0 from "@public/icons/retro/retro1-1-0.svg";
+import retro1_1_1 from "@public/icons/retro/retro1-1-1.svg";
+import retro1_2_0 from "@public/icons/retro/retro1-2-0.svg";
+import retro1_2_1 from "@public/icons/retro/retro1-2-1.svg";
+import retro1_3_0 from "@public/icons/retro/retro1-3-0.svg";
+import retro1_3_1 from "@public/icons/retro/retro1-3-1.svg";
+import retro1_4_0 from "@public/icons/retro/retro1-4-0.svg";
+import retro1_4_1 from "@public/icons/retro/retro1-4-1.svg";
+
+export const RETRO_ICON_MAP: Record<
+	0 | 1 | 2 | 3 | 4,
+	{ off: StaticImageData; on: StaticImageData }
+> = {
+	0: { off: retro1_0_0, on: retro1_0_1 },
+	1: { off: retro1_1_0, on: retro1_1_1 },
+	2: { off: retro1_2_0, on: retro1_2_1 },
+	3: { off: retro1_3_0, on: retro1_3_1 },
+	4: { off: retro1_4_0, on: retro1_4_1 },
+};

public/icons/smallActionType.ts

@@ -0,0 +1,17 @@
+import drinkWaterIcon from "@public/icons/DrinkWater.svg";
+
+import sitAtTheDeskIcon from "@public/icons/SitAtTheDesk.svg";
+import turnOnTheLaptopIcon from "@public/icons/TurnOnTheLaptop.svg";
+
+import type { StaticImageData } from "next/image";
+
+export type SmallActionKey = "SitAtTheDesk" | "TurnOnTheLaptop" | "DrinkWater";
+
+export const SMALL_ACTION_ICON_MAP: Record<
+	SmallActionKey | string,
+	StaticImageData
+> = {
+	SitAtTheDesk: sitAtTheDeskIcon,
+	TurnOnTheLaptop: turnOnTheLaptopIcon,
+	DrinkWater: drinkWaterIcon,
+};

src/app/(auth)/login/page.tsx

@@ -8,6 +8,10 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
+import AppleLogo from "@public/icons/login/apple.svg";
+import KakaoLogo from "@public/icons/login/kakao.svg";
+import LoginCharacter from "@public/icons/login/login-character.png";
+
 declare global {
 	interface Window {
 		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -127,7 +131,7 @@ const LoginPage = () => {
 
 			<div className="mt-5 flex flex-1 flex-col items-center justify-start">
 				<Image
-					src="/icons/login/login-character.png"
+					src={LoginCharacter}
 					alt="로그인 캐릭터"
 					width={348}
 					height={348}
@@ -157,12 +161,7 @@ const LoginPage = () => {
 					className="l2 gap-2 rounded-[16px] bg-[#FEE500] text-[#0f1114]"
 					onClick={handleKakaoLogin}
 				>
-					<Image
-						src="/icons/login/kakao.svg"
-						alt="kakao"
-						width={24}
-						height={24}
-					/>
+					<Image src={KakaoLogo} alt="kakao" width={24} height={24} />
 					<span className="pt-0.5">카카오로 계속하기</span>
 				</Button>
 
@@ -172,12 +171,7 @@ const LoginPage = () => {
 						className="l2 i gap-2 rounded-[16px] bg-[#e6edf8] text-[#0f1114]"
 						onClick={handleAppleLogin}
 					>
-						<Image
-							src="/icons/login/apple.svg"
-							alt="apple"
-							width={24}
-							height={24}
-						/>
+						<Image src={AppleLogo} alt="apple" width={24} height={24} />
 						<span className="pt-1">Apple로 계속하기</span>
 					</Button>
 				)}

src/app/(protected)/(create)/_components/bufferTime/BufferTime.tsx

@@ -15,6 +15,10 @@ import { ChevronRight } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
+import Bell from "@public/icons/common/Bell.svg";
+import CheckPrimary from "@public/icons/common/check-primary.svg";
+import EditDark from "@public/icons/edit-dark.svg";
+
 interface BufferTimeProps {
 	context: BufferTimeDataType;
 	handleDeadlineModify: () => void;
@@ -101,12 +105,7 @@ const BufferTime = ({
 		<div className="relative flex h-full w-full flex-col justify-between">
 			<div className="relative mt-[0.1vh]">
 				<div className="relative flex flex-col items-center gap-3">
-					<Image
-						src="/icons/common/Bell.svg"
-						alt="bell"
-						width={60}
-						height={60}
-					/>
+					<Image src={Bell} alt="bell" width={60} height={60} priority />
 					{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 					<div
 						className="relative flex h-[26px] items-center gap-1 overflow-hidden rounded-[8px] px-[7px] py-[6px] text-black before:absolute before:inset-0 before:bg-[conic-gradient(from_220deg_at_50%_50%,_#F2F0E7_0%,_#BBBBF1_14%,_#B8E2FB_24%,_#F2EFE8_37%,_#CCE4FF_48%,_#BBBBF1_62%,_#C7EDEB_72%,_#E7F5EB_83%,_#F2F0E7_91%,_#F2F0E7_100%)] before:[transform:scale(4,1)]"
@@ -115,11 +114,12 @@ const BufferTime = ({
 						<span className="l6 text-inverse z-10">{`${currentRatio}배의 여유시간 적용`}</span>
 						{availableMultipliers.length > 1 && (
 							<Image
-								src="/icons/edit-dark.svg"
+								src={EditDark}
 								alt="edit"
 								width={14}
 								height={14}
 								className="z-10"
+								priority
 							/>
 						)}
 					</div>
@@ -139,10 +139,11 @@ const BufferTime = ({
 									<span>{`${multiplier}배`}</span>
 									{currentRatio === multiplier && (
 										<Image
-											src="/icons/common/check-primary.svg"
+											src={CheckPrimary}
 											alt="check"
 											width={20}
 											height={20}
+											priority
 										/>
 									)}
 								</div>

src/app/(protected)/(create)/_components/instantTaskTypeInput/InstantTaskTypeInput.tsx

@@ -9,6 +9,8 @@ import { useState } from "react";
 import type { InstantTaskInputType } from "../../context";
 import TaskTypeChip from "../taskTypeChip/TaskTypeChip";
 
+import ClockStopWatch from "@public/icons/clock-stopwatch.svg";
+
 interface TaskTypeInputProps {
 	context: InstantTaskInputType;
 	isIdle: boolean;
@@ -59,7 +61,7 @@ const InstantTaskTypeInput = ({
 				<div className="flex flex-col gap-3 pb-6 pt-4">
 					<div className="flex h-[26px] w-auto items-center gap-1 self-start rounded-[8px] bg-component-accent-secondary px-[7px] py-[6px]">
 						<Image
-							src="/icons/clock-stopwatch.svg"
+							src={ClockStopWatch}
 							alt="clock-stopwatch"
 							width={14}
 							height={14}

src/app/(protected)/(create)/_components/smallActionChip/SmallActionChip.tsx

@@ -1,6 +1,8 @@
 import type { SmallActionKrType } from "@/types/create";
 import Image from "next/image";
 
+import { SMALL_ACTION_ICON_MAP } from "@public/icons/smallActionType";
+
 interface SmallActionChipProps {
 	smallAction: string;
 	onClick: (action: string) => void;
@@ -13,19 +15,15 @@ const SMALL_ACTION_LABELS: Record<string, SmallActionKrType> = {
 };
 
 const SmallActionChip = ({ smallAction, onClick }: SmallActionChipProps) => {
+	const src = SMALL_ACTION_ICON_MAP[smallAction];
+
 	return (
 		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
 		<div
 			className="flex flex-shrink-0 items-center gap-2 rounded-[6px] bg-component-gray-secondary px-3 py-2"
 			onClick={() => onClick(SMALL_ACTION_LABELS[smallAction])}
 		>
-			<Image
-				src={`/icons/${smallAction}.svg`}
-				alt={smallAction}
-				width={24}
-				height={24}
-				priority
-			/>
+			<Image src={src} alt={smallAction} width={24} height={24} priority />
 			<span className="l4">{SMALL_ACTION_LABELS[smallAction]}</span>
 		</div>
 	);

src/app/(protected)/(create)/_components/taskTypeChip/TaskTypeChip.tsx

@@ -1,4 +1,5 @@
 import type { MoodType, TaskType } from "@/types/create";
+import { ICON_MAP } from "@public/icons/index";
 import Image from "next/image";
 import { TYPE_LABELS } from "../../context";
 
@@ -14,21 +15,15 @@ const TaskTypeChip = <T extends TaskType | MoodType>({
 	onClick,
 }: TaskTypeChipProps<T>) => {
 	const label = TYPE_LABELS[type];
+	const src = ICON_MAP[type];
 
 	return (
 		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
 		<div
 			className={`flex h-12 items-center gap-2 rounded-[10px] p-[14px] transition-colors duration-300 ${isSelected ? "bg-point-gradient" : "bg-component-gray-secondary"}`}
 			onClick={() => onClick(type)}
 		>
-			<Image
-				src={`/icons/${type}.svg`}
-				alt={type}
-				width={24}
-				height={24}
-				loading="eager"
-				priority
-			/>
+			<Image src={src} alt={type} width={24} height={24} priority />
 			<span className={`l2 ${isSelected ? "text-inverse" : "text-normal"}`}>
 				{label}
 			</span>

src/app/(protected)/(create)/_components/taskTypeInput/TaskTypeInput.tsx

@@ -11,6 +11,8 @@ import { useState } from "react";
 import type { TaskTypeInputType } from "../../context";
 import TaskTypeChip from "../taskTypeChip/TaskTypeChip";
 
+import ClockStopWatch from "@public/icons/clock-stopwatch.svg";
+
 interface TaskTypeInputProps {
 	context: TaskTypeInputType;
 	isIdle: boolean;
@@ -86,7 +88,7 @@ const TaskTypeInput = ({ context, isIdle, onClick }: TaskTypeInputProps) => {
 				<div className="flex flex-col gap-3 pb-6 pt-4">
 					<div className="flex h-[26px] w-auto items-center gap-1 self-start rounded-[8px] bg-component-accent-secondary px-[7px] py-[6px]">
 						<Image
-							src="/icons/clock-stopwatch.svg"
+							src={ClockStopWatch}
 							alt="clock-stopwatch"
 							width={14}
 							height={14}

src/app/(protected)/(create)/_components/timeSelectedComponent/TimeSelectedComponent.tsx

@@ -17,6 +17,9 @@ import {
 	DrawerTrigger,
 } from "../../../../../components/ui/drawer";
 
+import CheckedBox from "@public/icons/CheckedBox.svg";
+import UnCheckedBox from "@public/icons/UnCheckedBox.svg";
+
 interface TimeSelectedComponentProps {
 	editTitle?: string | null;
 	deadlineTime: TimePickerType;
@@ -181,7 +184,7 @@ const TimeSelectedComponent = ({
 						</label>
 						{isMidnight ? (
 							<Image
-								src="/icons/CheckedBox.svg"
+								src={CheckedBox}
 								alt="checkedBox"
 								width={20}
 								height={20}
@@ -193,7 +196,7 @@ const TimeSelectedComponent = ({
 							/>
 						) : (
 							<Image
-								src="/icons/UnCheckedBox.svg"
+								src={UnCheckedBox}
 								alt="uncheckedBox"
 								width={20}
 								height={20}