From 3cf67737241946fdd6fe764be5d4566838536b8a Mon Sep 17 00:00:00 2001
From: seorinn <seorin@ajou.ac.kr>
Date: Mon, 11 May 2026 15:45:36 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20[TA-183]=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20lazy=20loading=20=EB=B0=8F=20onError=20=ED=8F=B4?=
 =?UTF-8?q?=EB=B0=B1=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PhotographerBox/index.tsx | 5 +++++
 src/components/PromotionBox/index.tsx    | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/PhotographerBox/index.tsx b/src/components/PhotographerBox/index.tsx
index 6250a2c..92cff29 100644
--- a/src/components/PhotographerBox/index.tsx
+++ b/src/components/PhotographerBox/index.tsx
@@ -7,6 +7,7 @@ import { getPhotoType } from "../../hooks/getKorean";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
 import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
+import icn_noPhotographer from "../../assets/svgs/icn_no_photogrpher.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -75,6 +76,10 @@ export default function PhotographerBox({ data }: Props) {
               src={data.profileImage.url}
               alt={data.profileImage.name}
               className="block object-cover min-w-full min-h-full"
+              loading="lazy"
+              onError={(e) => {
+                e.currentTarget.src = icn_noPhotographer;
+              }}
             />
             <div className="absolute bottom-0 left-0 w-full h-[40%] bg-card-overlay pointer-events-none" />
           </div>
diff --git a/src/components/PromotionBox/index.tsx b/src/components/PromotionBox/index.tsx
index 50bf492..acaeebc 100644
--- a/src/components/PromotionBox/index.tsx
+++ b/src/components/PromotionBox/index.tsx
@@ -9,6 +9,7 @@ import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
 import icn_time from "../../assets/svgs/icn_event_home_clock.svg";
 import icn_location from "../../assets/svgs/icn_event_home_location.svg";
+import icn_noPhotographer from "../../assets/svgs/icn_no_photogrpher.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -108,6 +109,10 @@ export default function PromotionBox({ data }: Props) {
                 className="object-cover min-w-full min-h-full"
                 src={image.url}
                 alt="이벤트 이미지"
+                loading="lazy"
+                onError={(e) => {
+                  e.currentTarget.src = icn_noPhotographer;
+                }}
               />
             </div>
           </div>

From a902798a74a900e1c40e1ef33e96483e2da5a1df Mon Sep 17 00:00:00 2001
From: seorinn <seorin@ajou.ac.kr>
Date: Mon, 11 May 2026 15:46:07 +0900
Subject: [PATCH 2/4] =?UTF-8?q?Revert=20"feat:=20[TA-183]=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20lazy=20loading=20=EB=B0=8F=20onError=20?=
 =?UTF-8?q?=ED=8F=B4=EB=B0=B1=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 3cf67737241946fdd6fe764be5d4566838536b8a.
---
 src/components/PhotographerBox/index.tsx | 5 -----
 src/components/PromotionBox/index.tsx    | 5 -----
 2 files changed, 10 deletions(-)

diff --git a/src/components/PhotographerBox/index.tsx b/src/components/PhotographerBox/index.tsx
index 92cff29..6250a2c 100644
--- a/src/components/PhotographerBox/index.tsx
+++ b/src/components/PhotographerBox/index.tsx
@@ -7,7 +7,6 @@ import { getPhotoType } from "../../hooks/getKorean";
 import { useLoginGuard } from "../../hooks/useLoginGuard";
 import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
-import icn_noPhotographer from "../../assets/svgs/icn_no_photogrpher.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -76,10 +75,6 @@ export default function PhotographerBox({ data }: Props) {
               src={data.profileImage.url}
               alt={data.profileImage.name}
               className="block object-cover min-w-full min-h-full"
-              loading="lazy"
-              onError={(e) => {
-                e.currentTarget.src = icn_noPhotographer;
-              }}
             />
             <div className="absolute bottom-0 left-0 w-full h-[40%] bg-card-overlay pointer-events-none" />
           </div>
diff --git a/src/components/PromotionBox/index.tsx b/src/components/PromotionBox/index.tsx
index acaeebc..50bf492 100644
--- a/src/components/PromotionBox/index.tsx
+++ b/src/components/PromotionBox/index.tsx
@@ -9,7 +9,6 @@ import icn_clipOff from "../../assets/svgs/icn_clip.svg";
 import icn_clipOn from "../../assets/svgs/icn_clipOn.svg";
 import icn_time from "../../assets/svgs/icn_event_home_clock.svg";
 import icn_location from "../../assets/svgs/icn_event_home_location.svg";
-import icn_noPhotographer from "../../assets/svgs/icn_no_photogrpher.svg";
 import ModalCheck from "../ModalCheck";
 
 interface postData {
@@ -109,10 +108,6 @@ export default function PromotionBox({ data }: Props) {
                 className="object-cover min-w-full min-h-full"
                 src={image.url}
                 alt="이벤트 이미지"
-                loading="lazy"
-                onError={(e) => {
-                  e.currentTarget.src = icn_noPhotographer;
-                }}
               />
             </div>
           </div>

From 49b4a8d02d0ebdcd8b73444274711121151df0ea Mon Sep 17 00:00:00 2001
From: seorinn <seorin@ajou.ac.kr>
Date: Mon, 11 May 2026 16:09:17 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20[TA-186]=20Header=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Compound=20Component=20=ED=8C=A8?=
 =?UTF-8?q?=ED=84=B4=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/index.tsx       | 26 ++++++++++++++++++--------
 src/pages/EventHome/index.tsx         | 26 ++++++++++++--------------
 src/pages/MainHome/index.tsx          | 19 +++++++++++--------
 src/pages/PhotographersHome/index.tsx | 26 ++++++++++++--------------
 4 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 0ea1ab9..01cc63c 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,15 +1,25 @@
-interface Props {
-  main: React.ReactNode;
-  left: React.ReactNode;
-  right: React.ReactNode;
+interface SlotProps {
+  children?: React.ReactNode;
 }
 
-export default function Header({ main, left, right }: Props) {
+function Header({ children }: { children?: React.ReactNode }) {
   return (
     <div className="fixed top-0 z-30 flex items-center justify-center h-12 px-4 w-full max-w-[430px] bg-violet500">
-      <div className="absolute left-0 cursor-pointer">{left}</div>
-      <div>{main}</div>
-      <div className="absolute right-0 cursor-pointer ">{right}</div>
+      {children}
     </div>
   );
 }
+
+Header.Left = function Left({ children }: SlotProps) {
+  return <div className="absolute left-0 cursor-pointer">{children}</div>;
+};
+
+Header.Center = function Center({ children }: SlotProps) {
+  return <div>{children}</div>;
+};
+
+Header.Right = function Right({ children }: SlotProps) {
+  return <div className="absolute right-0 cursor-pointer">{children}</div>;
+};
+
+export default Header;
diff --git a/src/pages/EventHome/index.tsx b/src/pages/EventHome/index.tsx
index 65e4f2a..cd746e9 100644
--- a/src/pages/EventHome/index.tsx
+++ b/src/pages/EventHome/index.tsx
@@ -21,31 +21,29 @@ function EventHome() {
   return (
     <div className="relative flex flex-col w-full min-h-screen">
       <div className="h-12">
-        <Header
-          main={
-            <div className="font-semibold text-white cursor-pointer">
-              Event로 담아봐
-            </div>
-          }
-          left={
+        <Header>
+          <Header.Left>
             <img
               className="px-4 cursor-pointer"
               alt="<"
               src={icn_back}
-              onClick={() => {
-                navigate(`/`);
-              }}
+              onClick={() => navigate(`/`)}
             />
-          }
-          right={
+          </Header.Left>
+          <Header.Center>
+            <div className="font-semibold text-white cursor-pointer">
+              Event로 담아봐
+            </div>
+          </Header.Center>
+          <Header.Right>
             <img
               className="px-4 cursor-pointer"
               src={icn_search}
               alt="검색"
               onClick={() => navigate(`/search`)}
             />
-          }
-        />
+          </Header.Right>
+        </Header>
       </div>
       <div className="border-b-[0.375rem] border-gray50">
         <FilterBar isEvent={true} setSearchParams={setSearchParams} />
diff --git a/src/pages/MainHome/index.tsx b/src/pages/MainHome/index.tsx
index 6b9c02e..2bbc2c2 100644
--- a/src/pages/MainHome/index.tsx
+++ b/src/pages/MainHome/index.tsx
@@ -51,19 +51,22 @@ function MainHome() {
   return (
     <div className="w-full">
       <div className="h-12">
-        <Header
-          main={null}
-          left={
+        <Header>
+          <Header.Left>
             <img
               className="w-[4.75rem] cursor-pointer ml-4"
               onClick={() => navigate(`/`)}
               src={logo_header}
               alt="담아봐"
             />
-          }
-          right={
+          </Header.Left>
+          <Header.Right>
             <div className="flex items-center gap-2">
-              <img src={icn_search} alt="검색" onClick={() => navigate(`/search`)} />
+              <img
+                src={icn_search}
+                alt="검색"
+                onClick={() => navigate(`/search`)}
+              />
               <img
                 className="mr-4"
                 src={icn_mypage}
@@ -71,8 +74,8 @@ function MainHome() {
                 onClick={() => handleMyPageClick()}
               />
             </div>
-          }
-        />
+          </Header.Right>
+        </Header>
       </div>
       <div className="w-full px-4 pt-3">
         <BannerBox />
diff --git a/src/pages/PhotographersHome/index.tsx b/src/pages/PhotographersHome/index.tsx
index 7d439fd..1a6451d 100644
--- a/src/pages/PhotographersHome/index.tsx
+++ b/src/pages/PhotographersHome/index.tsx
@@ -17,31 +17,29 @@ export default function PhotographersHome() {
   return (
     <div className="flex flex-col w-full min-h-screen">
       <div className="h-12">
-        <Header
-          main={
-            <div className="font-semibold text-white cursor-pointer">
-              작가님을 만나봐
-            </div>
-          }
-          left={
+        <Header>
+          <Header.Left>
             <img
               className="px-4 cursor-pointer"
               alt="<"
               src={icn_back}
-              onClick={() => {
-                navigate(`/`);
-              }}
+              onClick={() => navigate(`/`)}
             />
-          }
-          right={
+          </Header.Left>
+          <Header.Center>
+            <div className="font-semibold text-white cursor-pointer">
+              작가님을 만나봐
+            </div>
+          </Header.Center>
+          <Header.Right>
             <img
               className="px-4 cursor-pointer"
               src={icn_search}
               alt="검색"
               onClick={() => navigate(`/search`)}
             />
-          }
-        />
+          </Header.Right>
+        </Header>
       </div>
       <div className="border-b-[0.375rem] border-gray50">
         <FilterBar isEvent={false} setSearchParams={setSearchParams} />

From c6051fa3dabdfc542a40600c02a6a83ee9b0806e Mon Sep 17 00:00:00 2001
From: seorinn <seorin@ajou.ac.kr>
Date: Mon, 11 May 2026 16:12:16 +0900
Subject: [PATCH 4/4] fix: [TA-186] Remove cursor-pointer from Header slots,
 add vertical centering

---
 src/components/Header/index.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 01cc63c..083feb6 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,8 +1,10 @@
+import type { ReactNode } from "react";
+
 interface SlotProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-function Header({ children }: { children?: React.ReactNode }) {
+function Header({ children }: { children?: ReactNode }) {
   return (
     <div className="fixed top-0 z-30 flex items-center justify-center h-12 px-4 w-full max-w-[430px] bg-violet500">
       {children}
@@ -11,7 +13,9 @@ function Header({ children }: { children?: React.ReactNode }) {
 }
 
 Header.Left = function Left({ children }: SlotProps) {
-  return <div className="absolute left-0 cursor-pointer">{children}</div>;
+  return (
+    <div className="absolute left-0 flex items-center h-full">{children}</div>
+  );
 };
 
 Header.Center = function Center({ children }: SlotProps) {
@@ -19,7 +23,9 @@ Header.Center = function Center({ children }: SlotProps) {
 };
 
 Header.Right = function Right({ children }: SlotProps) {
-  return <div className="absolute right-0 cursor-pointer">{children}</div>;
+  return (
+    <div className="absolute right-0 flex items-center h-full">{children}</div>
+  );
 };
 
 export default Header;