Skip to content

Commit 413402e

Browse files
prgmr99prgmr99
authored
fix: 이미지 캐싱이 적용되지 않는 이슈 (#179)
* chore: 이미지 src 적용 방식 변경 * chore: 이미지 src 적용 방식 변경 * fix: 빌드 에러 수정
1 parent 5ec7b8f commit 413402e

File tree

67 files changed

+445
-333
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+445
-333
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
"cSpell.words": [
1212
"appleid",
13+
"glasshour",
14+
"heartfire",
1315
"KAKAO",
1416
"kakaocdn",
1517
"pretendard",

‎public/icons/character/index.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import img1 from "./1.png";
2+
import img2 from "./2.png";
3+
import img3 from "./3.png";
4+
import img4 from "./4.png";
5+
import img5 from "./5.png";
6+
import img6 from "./6.png";
7+
import img7 from "./7.png";
8+
import img8 from "./8.png";
9+
import img9 from "./9.png";
10+
import img10 from "./10.png";
11+
import img11 from "./11.png";
12+
import img12 from "./12.png";
13+
import img13 from "./13.png";
14+
import img14 from "./14.png";
15+
import img15 from "./15.png";
16+
import img16 from "./16.png";
17+
import img17 from "./17.png";
18+
import img18 from "./18.png";
19+
import img19 from "./19.png";
20+
import img20 from "./20.png";
21+
import img21 from "./21.png";
22+
import img22 from "./22.png";
23+
import img23 from "./23.png";
24+
import img24 from "./24.png";
25+
import defaultImg from "./default.png";
26+
27+
import type { StaticImageData } from "next/image";
28+
29+
export const PERSONA_ICON_MAP: Record<number, StaticImageData> = {
30+
1: img1,
31+
2: img2,
32+
3: img3,
33+
4: img4,
34+
5: img5,
35+
6: img6,
36+
7: img7,
37+
8: img8,
38+
9: img9,
39+
10: img10,
40+
11: img11,
41+
12: img12,
42+
13: img13,
43+
14: img14,
44+
15: img15,
45+
16: img16,
46+
17: img17,
47+
18: img18,
48+
19: img19,
49+
20: img20,
50+
21: img21,
51+
22: img22,
52+
23: img23,
53+
24: img24,
54+
};
55+
56+
export const DEFAULT_PERSONA_ICON = defaultImg;

‎public/icons/index.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import assignmentIcon from "@public/icons/assignment.svg";
2+
import designIcon from "@public/icons/design.svg";
3+
import exerciseIcon from "@public/icons/exercise.svg";
4+
import programmingIcon from "@public/icons/programming.svg";
5+
import studyIcon from "@public/icons/study.svg";
6+
import writingIcon from "@public/icons/writing.svg";
7+
8+
import calmIcon from "@public/icons/calm.svg";
9+
import emotionalIcon from "@public/icons/emotional.svg";
10+
import excitedIcon from "@public/icons/excited.svg";
11+
import urgentIcon from "@public/icons/urgent.svg";
12+
13+
import { MoodType, TaskType } from "@/types/create";
14+
import type { StaticImageData } from "next/image";
15+
16+
/**
17+
* ICON_MAP maps each TaskType and MoodType enum value
18+
* to its corresponding static image import.
19+
*/
20+
export const ICON_MAP: Record<TaskType | MoodType, StaticImageData> = {
21+
[TaskType.STUDY]: studyIcon,
22+
[TaskType.WRITING]: writingIcon,
23+
[TaskType.EXERCISE]: exerciseIcon,
24+
[TaskType.PROGRAMMING]: programmingIcon,
25+
[TaskType.DESIGN]: designIcon,
26+
[TaskType.ASSIGNMENT]: assignmentIcon,
27+
28+
[MoodType.URGENT]: urgentIcon,
29+
[MoodType.EXCITED]: excitedIcon,
30+
[MoodType.EMOTIONAL]: emotionalIcon,
31+
[MoodType.CALM]: calmIcon,
32+
};

‎public/icons/retro/index.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { StaticImageData } from "next/image";
2+
3+
import retro1_0_0 from "@public/icons/retro/retro1-0-0.svg";
4+
import retro1_0_1 from "@public/icons/retro/retro1-0-1.svg";
5+
import retro1_1_0 from "@public/icons/retro/retro1-1-0.svg";
6+
import retro1_1_1 from "@public/icons/retro/retro1-1-1.svg";
7+
import retro1_2_0 from "@public/icons/retro/retro1-2-0.svg";
8+
import retro1_2_1 from "@public/icons/retro/retro1-2-1.svg";
9+
import retro1_3_0 from "@public/icons/retro/retro1-3-0.svg";
10+
import retro1_3_1 from "@public/icons/retro/retro1-3-1.svg";
11+
import retro1_4_0 from "@public/icons/retro/retro1-4-0.svg";
12+
import retro1_4_1 from "@public/icons/retro/retro1-4-1.svg";
13+
14+
export const RETRO_ICON_MAP: Record<
15+
0 | 1 | 2 | 3 | 4,
16+
{ off: StaticImageData; on: StaticImageData }
17+
> = {
18+
0: { off: retro1_0_0, on: retro1_0_1 },
19+
1: { off: retro1_1_0, on: retro1_1_1 },
20+
2: { off: retro1_2_0, on: retro1_2_1 },
21+
3: { off: retro1_3_0, on: retro1_3_1 },
22+
4: { off: retro1_4_0, on: retro1_4_1 },
23+
};

‎public/icons/smallActionType.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import drinkWaterIcon from "@public/icons/DrinkWater.svg";
2+
3+
import sitAtTheDeskIcon from "@public/icons/SitAtTheDesk.svg";
4+
import turnOnTheLaptopIcon from "@public/icons/TurnOnTheLaptop.svg";
5+
6+
import type { StaticImageData } from "next/image";
7+
8+
export type SmallActionKey = "SitAtTheDesk" | "TurnOnTheLaptop" | "DrinkWater";
9+
10+
export const SMALL_ACTION_ICON_MAP: Record<
11+
SmallActionKey | string,
12+
StaticImageData
13+
> = {
14+
SitAtTheDesk: sitAtTheDeskIcon,
15+
TurnOnTheLaptop: turnOnTheLaptopIcon,
16+
DrinkWater: drinkWaterIcon,
17+
};

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import Image from "next/image";
88
import { useRouter } from "next/navigation";
99
import { useCallback, useEffect, useState } from "react";
1010

11+
import AppleLogo from "@public/icons/login/apple.svg";
12+
import KakaoLogo from "@public/icons/login/kakao.svg";
13+
import LoginCharacter from "@public/icons/login/login-character.png";
14+
1115
declare global {
1216
interface Window {
1317
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -127,7 +131,7 @@ const LoginPage = () => {
127131

128132
<div className="mt-5 flex flex-1 flex-col items-center justify-start">
129133
<Image
130-
src="/icons/login/login-character.png"
134+
src={LoginCharacter}
131135
alt="로그인 캐릭터"
132136
width={348}
133137
height={348}
@@ -157,12 +161,7 @@ const LoginPage = () => {
157161
className="l2 gap-2 rounded-[16px] bg-[#FEE500] text-[#0f1114]"
158162
onClick={handleKakaoLogin}
159163
>
160-
<Image
161-
src="/icons/login/kakao.svg"
162-
alt="kakao"
163-
width={24}
164-
height={24}
165-
/>
164+
<Image src={KakaoLogo} alt="kakao" width={24} height={24} />
166165
<span className="pt-0.5">카카오로 계속하기</span>
167166
</Button>
168167

@@ -172,12 +171,7 @@ const LoginPage = () => {
172171
className="l2 i gap-2 rounded-[16px] bg-[#e6edf8] text-[#0f1114]"
173172
onClick={handleAppleLogin}
174173
>
175-
<Image
176-
src="/icons/login/apple.svg"
177-
alt="apple"
178-
width={24}
179-
height={24}
180-
/>
174+
<Image src={AppleLogo} alt="apple" width={24} height={24} />
181175
<span className="pt-1">Apple로 계속하기</span>
182176
</Button>
183177
)}

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ import { ChevronRight } from "lucide-react";
1515
import Image from "next/image";
1616
import { useEffect, useState } from "react";
1717

18+
import Bell from "@public/icons/common/Bell.svg";
19+
import CheckPrimary from "@public/icons/common/check-primary.svg";
20+
import EditDark from "@public/icons/edit-dark.svg";
21+
1822
interface BufferTimeProps {
1923
context: BufferTimeDataType;
2024
handleDeadlineModify: () => void;
@@ -101,12 +105,7 @@ const BufferTime = ({
101105
<div className="relative flex h-full w-full flex-col justify-between">
102106
<div className="relative mt-[0.1vh]">
103107
<div className="relative flex flex-col items-center gap-3">
104-
<Image
105-
src="/icons/common/Bell.svg"
106-
alt="bell"
107-
width={60}
108-
height={60}
109-
/>
108+
<Image src={Bell} alt="bell" width={60} height={60} priority />
110109
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
111110
<div
112111
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 = ({
115114
<span className="l6 text-inverse z-10">{`${currentRatio}배의 여유시간 적용`}</span>
116115
{availableMultipliers.length > 1 && (
117116
<Image
118-
src="/icons/edit-dark.svg"
117+
src={EditDark}
119118
alt="edit"
120119
width={14}
121120
height={14}
122121
className="z-10"
122+
priority
123123
/>
124124
)}
125125
</div>
@@ -139,10 +139,11 @@ const BufferTime = ({
139139
<span>{`${multiplier}배`}</span>
140140
{currentRatio === multiplier && (
141141
<Image
142-
src="/icons/common/check-primary.svg"
142+
src={CheckPrimary}
143143
alt="check"
144144
width={20}
145145
height={20}
146+
priority
146147
/>
147148
)}
148149
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { useState } from "react";
99
import type { InstantTaskInputType } from "../../context";
1010
import TaskTypeChip from "../taskTypeChip/TaskTypeChip";
1111

12+
import ClockStopWatch from "@public/icons/clock-stopwatch.svg";
13+
1214
interface TaskTypeInputProps {
1315
context: InstantTaskInputType;
1416
isIdle: boolean;
@@ -59,7 +61,7 @@ const InstantTaskTypeInput = ({
5961
<div className="flex flex-col gap-3 pb-6 pt-4">
6062
<div className="flex h-[26px] w-auto items-center gap-1 self-start rounded-[8px] bg-component-accent-secondary px-[7px] py-[6px]">
6163
<Image
62-
src="/icons/clock-stopwatch.svg"
64+
src={ClockStopWatch}
6365
alt="clock-stopwatch"
6466
width={14}
6567
height={14}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { SmallActionKrType } from "@/types/create";
22
import Image from "next/image";
33

4+
import { SMALL_ACTION_ICON_MAP } from "@public/icons/smallActionType";
5+
46
interface SmallActionChipProps {
57
smallAction: string;
68
onClick: (action: string) => void;
@@ -13,19 +15,15 @@ const SMALL_ACTION_LABELS: Record<string, SmallActionKrType> = {
1315
};
1416

1517
const SmallActionChip = ({ smallAction, onClick }: SmallActionChipProps) => {
18+
const src = SMALL_ACTION_ICON_MAP[smallAction];
19+
1620
return (
1721
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
1822
<div
1923
className="flex flex-shrink-0 items-center gap-2 rounded-[6px] bg-component-gray-secondary px-3 py-2"
2024
onClick={() => onClick(SMALL_ACTION_LABELS[smallAction])}
2125
>
22-
<Image
23-
src={`/icons/${smallAction}.svg`}
24-
alt={smallAction}
25-
width={24}
26-
height={24}
27-
priority
28-
/>
26+
<Image src={src} alt={smallAction} width={24} height={24} priority />
2927
<span className="l4">{SMALL_ACTION_LABELS[smallAction]}</span>
3028
</div>
3129
);

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { MoodType, TaskType } from "@/types/create";
2+
import { ICON_MAP } from "@public/icons/index";
23
import Image from "next/image";
34
import { TYPE_LABELS } from "../../context";
45

@@ -14,21 +15,15 @@ const TaskTypeChip = <T extends TaskType | MoodType>({
1415
onClick,
1516
}: TaskTypeChipProps<T>) => {
1617
const label = TYPE_LABELS[type];
18+
const src = ICON_MAP[type];
1719

1820
return (
1921
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
2022
<div
2123
className={`flex h-12 items-center gap-2 rounded-[10px] p-[14px] transition-colors duration-300 ${isSelected ? "bg-point-gradient" : "bg-component-gray-secondary"}`}
2224
onClick={() => onClick(type)}
2325
>
24-
<Image
25-
src={`/icons/${type}.svg`}
26-
alt={type}
27-
width={24}
28-
height={24}
29-
loading="eager"
30-
priority
31-
/>
26+
<Image src={src} alt={type} width={24} height={24} priority />
3227
<span className={`l2 ${isSelected ? "text-inverse" : "text-normal"}`}>
3328
{label}
3429
</span>

0 commit comments

Comments
 (0)