From ec72310bd4cac1734ad2c5fabdcd46e7369673b9 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Wed, 25 Sep 2024 22:21:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20type=EC=9D=B4=20logo=EC=9D=B8?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=95?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=8C=A8=EB=94=A9=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-native/src/components/common/Header.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-native/src/components/common/Header.tsx b/packages/react-native/src/components/common/Header.tsx
index 9422544a..7b66acee 100644
--- a/packages/react-native/src/components/common/Header.tsx
+++ b/packages/react-native/src/components/common/Header.tsx
@@ -54,6 +54,9 @@ export default function Header({
       headerRight: () => Right,
       headerLeft: () => Left,
       title,
+      headerStyle: {
+        height: type === 'logo' ? 80 : undefined,
+      },
     });
   }, [title, RightActionButton, onBack]);
 

From ad16619cae5db6a39a6e2f1dfbf7205f56d76ac6 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Wed, 25 Sep 2024 22:36:38 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20TitleComponent=EB=A1=9C=20Home=20He?=
 =?UTF-8?q?ader=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Header.tsx          | 21 ++++++++++++++++---
 packages/react-native/src/pages/Home.tsx      | 12 +++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/src/components/common/Header.tsx b/packages/react-native/src/components/common/Header.tsx
index 7b66acee..8b0536f3 100644
--- a/packages/react-native/src/components/common/Header.tsx
+++ b/packages/react-native/src/components/common/Header.tsx
@@ -11,6 +11,8 @@ interface HeaderProps {
   RightActionButton?: ReactElement;
   onBack?: () => void;
   type?: 'logo' | 'default';
+  TitleComponent?: ReactElement;
+  hideLeft?: boolean;
 }
 
 export default function Header({
@@ -18,9 +20,22 @@ export default function Header({
   RightActionButton,
   onBack,
   type = 'default',
+  TitleComponent,
+  hideLeft,
 }: HeaderProps) {
   const navigation = useNavigation();
 
+  const getHeight = () => {
+    if (type === 'logo') {
+      return 80;
+    }
+    if (TitleComponent) {
+      return 100;
+    }
+
+    return undefined;
+  };
+
   const Right = useMemo(
     () => <View className="px-4">{RightActionButton}</View>,
     [RightActionButton],
@@ -52,11 +67,11 @@ export default function Header({
       ...HEADER_STYLE,
       headerShown: true,
       headerRight: () => Right,
-      headerLeft: () => Left,
-      title,
+      headerLeft: hideLeft ? null : () => Left,
       headerStyle: {
-        height: type === 'logo' ? 80 : undefined,
+        height: getHeight(),
       },
+      title: TitleComponent || title,
     });
   }, [title, RightActionButton, onBack]);
 
diff --git a/packages/react-native/src/pages/Home.tsx b/packages/react-native/src/pages/Home.tsx
index 5af4c0e9..48d27032 100644
--- a/packages/react-native/src/pages/Home.tsx
+++ b/packages/react-native/src/pages/Home.tsx
@@ -9,6 +9,7 @@ import CardSlider from '@/components/common/CardSlider';
 import Header from '@/components/common/Header';
 import withSuspense from '@/components/HOC/withSuspense';
 import useHomeSpotQuery from '@/apis/queries/useHomeSpotQuery';
+import SPOTLogo from '@/assets/SPOTLogo';
 
 interface HomeScreenProps {
   navigation: StackNavigation<'Home/Main'>;
@@ -20,8 +21,15 @@ export default withSuspense(function Home({ navigation }: HomeScreenProps) {
 
   return (
     <BackGroundGradient>
-      <Header type="logo" />
-      <View className="flex flex-col gap-10 p-4">
+      <Header
+        hideLeft
+        TitleComponent={
+          <View className="justify-center items-center">
+            <SPOTLogo height={45} width={110} />
+          </View>
+        }
+      />
+      <View className="flex flex-col gap-10 px-4">
         <View>
           <Font type="title1" color="white">
             안녕하세요, {profile?.nickname}님{'\n'}오늘은 어디로 가 볼까요?