refactor: [TA-186] Header 컴포넌트 Compound Component 패턴 전환

src/components/Header/index.tsx

@@ -1,15 +1,31 @@
-interface Props {
-  main: React.ReactNode;
-  left: React.ReactNode;
-  right: React.ReactNode;
+import type { ReactNode } from "react";
+
+interface SlotProps {
+  children?: ReactNode;
 }
 
-export default function Header({ main, left, right }: Props) {
+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">
-      <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 flex items-center h-full">{children}</div>
+  );
+};
+
+Header.Center = function Center({ children }: SlotProps) {
+  return <div>{children}</div>;
+};
+
+Header.Right = function Right({ children }: SlotProps) {
+  return (
+    <div className="absolute right-0 flex items-center h-full">{children}</div>
+  );
+};
+
+export default Header;

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} />

src/pages/MainHome/index.tsx

@@ -51,28 +51,31 @@ 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}
                 alt="마이페이지"
                 onClick={() => handleMyPageClick()}
               />
             </div>
-          }
-        />
+          </Header.Right>
+        </Header>
       </div>
       <div className="w-full px-4 pt-3">
         <BannerBox />

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} />