From 0b523cc30e0b4431610b5b3f4ba2474ebc649bf9 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 02:12:26 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(web):=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=ED=99=94=EB=A9=B4=EC=97=90=20profileImage?=
 =?UTF-8?q?Url=20=ED=91=9C=EC=8B=9C=20(#204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 프로필 조회 API 응답의 profileImageUrl을 설정 화면에 표시했습니다
- 값이 없을 경우 기존 placeholder를 유지했습니다
- next/image가 Google 프로필 이미지 도메인을 허용하도록 설정을 추가했습니다
---
 .../_components/account/SettingsProfileView.tsx    | 14 +++++++++++++-
 .../account/SettingsProfileContainer.tsx           |  1 +
 .../_hooks/account/use-settings-profile.ts         |  1 +
 apps/timo-web/next.config.js                       |  8 ++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index 1802b3c8..7cb39b92 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -14,6 +14,7 @@ import { SettingsTagsSectionContainer } from "@/app/[locale]/(main)/settings/_co
 export interface SettingsProfileViewProps {
   name: string;
   googleEmail: string;
+  profileImageUrl?: string;
   isCalendarConnected: boolean;
   language: SettingsLanguage;
   tags: SettingsTagItem[];
@@ -28,6 +29,7 @@ export interface SettingsProfileViewProps {
 export const SettingsProfileView = ({
   name,
   googleEmail,
+  profileImageUrl,
   isCalendarConnected,
   language,
   tags,
@@ -51,7 +53,17 @@ export const SettingsProfileView = ({
             {labels.profileSection}
           </h2>
           <div className="flex items-center gap-5">
-            <div className="bg-timo-gray-300 size-28.5 shrink-0 rounded-full" />
+            {profileImageUrl ? (
+              <Image
+                src={profileImageUrl}
+                alt={name}
+                width={114}
+                height={114}
+                className="size-28.5 shrink-0 rounded-full object-cover"
+              />
+            ) : (
+              <div className="bg-timo-gray-300 size-28.5 shrink-0 rounded-full" />
+            )}
             <div className="flex flex-col gap-2">
               <p className="typo-headline-b-20 text-timo-black">{name}</p>
               <div className="bg-timo-gray-300 flex items-center gap-2 rounded-lg px-4 py-2">
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
index cd892980..8e1f8d8c 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
@@ -66,6 +66,7 @@ export const SettingsProfileContainer = () => {
       <SettingsProfileView
         name={profileState.name}
         googleEmail={profileState.googleEmail}
+        profileImageUrl={profileState.profileImageUrl}
         isCalendarConnected={isCalendarConnected}
         language={profileState.language}
         tags={profileState.tags}
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
index 7befa3a9..997fecfe 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
@@ -144,6 +144,7 @@ export const useSettingsProfile = () => {
     profileState: {
       name: profile.name,
       googleEmail: profile.email,
+      profileImageUrl: profile.profileImageUrl ?? undefined,
       calendarConnected: profile.calendarConnected,
       language: locale,
       tags: tagItems,
diff --git a/apps/timo-web/next.config.js b/apps/timo-web/next.config.js
index d9ce883d..0bf92f81 100644
--- a/apps/timo-web/next.config.js
+++ b/apps/timo-web/next.config.js
@@ -5,6 +5,14 @@ import createNextIntlPlugin from "next-intl/plugin";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@repo/timo-design-system"],
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
+      },
+    ],
+  },
 };
 
 const withNextIntl = createNextIntlPlugin();

From d4450118fd16e84a2166c41b2253438fb2c54119 Mon Sep 17 00:00:00 2001
From: kimminna <kmina121777@naver.com>
Date: Wed, 15 Jul 2026 02:31:25 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix(web):=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20priority=20prop=EC=9D=84?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4=20(#204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- above-the-fold 프로필 이미지가 LCP 최적화를 위해 preload되도록 Image 컴포넌트에 priority prop을 추가했습니다
---
 .../(main)/settings/_components/account/SettingsProfileView.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index 7cb39b92..e42a4451 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -59,6 +59,7 @@ export const SettingsProfileView = ({
                 alt={name}
                 width={114}
                 height={114}
+                priority
                 className="size-28.5 shrink-0 rounded-full object-cover"
               />
             ) : (