feat: 헤더 공용컴포넌트 구현

app/(tabs)/_layout.tsx

@@ -12,7 +12,7 @@ export default function TabLayout() {
   }, []);
 
   return (
-    <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
+    <SafeAreaView edges={["top"]} style={{ flex: 1 }} className="bg-main-color2">
       <Tabs screenOptions={screenOptions}>
         <Tabs.Screen
           name="home"

pages/archive/ArchivePage.tsx

@@ -1,10 +1,12 @@
+import { FeedHeader } from "@/shared/ui/header";
 import React from "react";
 import { View, Text } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function ArchivePage() {
   return (
-    <SafeAreaView className="flex-1 bg-white">
+    <SafeAreaView className="flex-1 bg-background-color" edges={["left", "right", "bottom"]}>
+      <FeedHeader />
       <View className="items-center mb-10">
         <Text className="">아카이브</Text>
       </View>

pages/awards/AwardsPage.tsx

@@ -4,7 +4,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function AwardsPage() {
   return (
-    <SafeAreaView className="flex-1 bg-white">
+    <SafeAreaView className="flex-1 bg-background-color" edges={["left", "right", "bottom"]}>
       <View className="items-center mb-10">
         <Text className="">어워드</Text>
       </View>

pages/home/HomePage.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import { Text, TouchableOpacity } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useRouter } from "expo-router";
 import { useAuth } from "../../features/auth/model/AuthContext";
+import { HomeHeader } from "@/shared/ui/header";
 
 export default function HomePage() {
   const { logout } = useAuth();
@@ -14,8 +14,8 @@ export default function HomePage() {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-white">
-      {/* 로그아웃 버튼 */}
+    <SafeAreaView className="flex-1 bg-white" edges={["left", "right", "bottom"]}>
+      <HomeHeader />
       <TouchableOpacity className="bg-red-400 p-4  items-center" onPress={handleLogout}>
         <Text className="text-white">로그아웃 버튼</Text>
       </TouchableOpacity>

pages/profile/ProfilePage.tsx

@@ -1,13 +1,14 @@
-import React from "react";
 import { View, Text } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useAuth } from "../../features/auth/model/AuthContext";
+import { SearchHeader } from "@/shared/ui/header";
 
 export default function ProfilePage() {
   const { userInfo } = useAuth();
 
   return (
-    <SafeAreaView className="flex-1 bg-white">
+    <SafeAreaView className="flex-1 bg-background-color" edges={["left", "right", "bottom"]}>
+      <SearchHeader />
       <View className="items-center mb-10">
         <Text>{userInfo?.nickname || "사용자 닉네임"}</Text>
         <Text>{userInfo?.email || "이메일 없음"}</Text>

pages/upload/UploadPage.tsx

@@ -1,10 +1,11 @@
-import React from "react";
 import { View, Text } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { UploadHeader } from "@/shared/ui/header";
 
 export default function UploadPage() {
   return (
-    <SafeAreaView className="flex-1 bg-white">
+    <SafeAreaView className="flex-1 bg-background-color" edges={["left", "right", "bottom"]}>
+      <UploadHeader />
       <View className="items-center mb-10">
         <Text className="">업로드</Text>
       </View>

shared/assets/icons/index.ts

@@ -9,3 +9,7 @@ export { default as archiving_active } from "./archiving_active.svg";
 export { default as uploading_active } from "./uploading_active.svg";
 export { default as ranking_active } from "./ranking_active.svg";
 export { default as my_active } from "./my_active.svg";
+export { default as back } from "./back.svg";
+export { default as more } from "./more.svg";
+export { default as attend } from "./attend.svg";
+export { default as logo } from "./logo.svg";

shared/ui/header/CommonHeader.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+
+export interface HeaderProps {
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+}
+
+export default function CommonHeader({ left, center, right }: HeaderProps) {
+  return (
+    <View className="bg-main-color2 rounded-b-[16px] w-full">
+      <View className="flex-row items-center justify-between px-6 h-[56px]">
+        {/* 왼쪽 아이템 */}
+        <View className="items-center justify-center">{left ?? <View className="w-6 h-6" />}</View>
+
+        {/* 가운데 아이템 */}
+        <View className="flex-1 items-center justify-center mt-2">{center}</View>
+
+        {/* 오른쪽 아이템 */}
+        <View className="items-center justify-center">{right ?? <View className="w-6 h-6" />}</View>
+      </View>
+    </View>
+  );
+}

shared/ui/header/index.tsx

@@ -0,0 +1,5 @@
+export { default as CommonHeader } from "./CommonHeader";
+export { default as HomeHeader } from "./variants/HomeHeader";
+export { default as FeedHeader } from "./variants/FeedHeader";
+export { default as UploadHeader } from "./variants/UploadHeader";
+export { default as SearchHeader } from "./variants/SearchHeader";

shared/ui/header/items/AttendButton.tsx

@@ -0,0 +1,16 @@
+import { Pressable, Text } from "react-native";
+import { Icon } from "@/shared/ui/icon";
+
+interface AttendButtonProps {
+  onPress?: () => void;
+}
+
+// Todo: api연결해서 몇 일 연속 출석인지 표시
+export default function AttendButton({ onPress }: AttendButtonProps) {
+  return (
+    <Pressable onPress={onPress} className="mr-4 flex-row items-center">
+      <Icon name="attend" width={24} height={24} />
+      <Text className="text-main-color1 text-sm ml-2">34</Text>
+    </Pressable>
+  );
+}

shared/ui/header/items/BackButton.tsx

@@ -0,0 +1,13 @@
+import { Pressable } from "react-native";
+import { useRouter } from "expo-router";
+import { Icon } from "@/shared/ui/icon";
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return (
+    <Pressable onPress={() => router.back()} hitSlop={8}>
+      <Icon name="back" width={24} height={24} />
+    </Pressable>
+  );
+}

shared/ui/header/items/Logo.tsx

@@ -0,0 +1,5 @@
+import { Icon } from "@/shared/ui/icon";
+
+export default function Logo() {
+  return <Icon name="logo" width={34} height={34} />;
+}

shared/ui/header/items/MoreButton.tsx

@@ -0,0 +1,14 @@
+import { Pressable } from "react-native";
+import { Icon } from "@/shared/ui/icon";
+
+interface MoreButtonProps {
+  onPress?: () => void;
+}
+
+export default function MoreButton({ onPress }: MoreButtonProps) {
+  return (
+    <Pressable onPress={onPress} hitSlop={8}>
+      <Icon name="more" width={24} height={24} />
+    </Pressable>
+  );
+}

shared/ui/header/items/SearchButton.tsx

@@ -0,0 +1,14 @@
+import { Pressable } from "react-native";
+import { Icon } from "@/shared/ui/icon";
+
+interface SearchButtonProps {
+  onPress?: () => void;
+}
+
+export default function SearchButton({ onPress }: SearchButtonProps) {
+  return (
+    <Pressable onPress={onPress} hitSlop={8}>
+      <Icon name="search" width={24} height={24} />
+    </Pressable>
+  );
+}

shared/ui/header/items/TodayKeyword.tsx

@@ -0,0 +1,15 @@
+import { Text, View } from "react-native";
+
+interface TodayKeywordProps {
+  dateString?: string;
+  title: string;
+}
+
+export default function TodayKeyword({ title, dateString }: TodayKeywordProps) {
+  return (
+    <View className="flex-1 items-center">
+      {dateString && <Text className="text-[8px] text-main-color1">{dateString}</Text>}
+      <Text className="text-[24px] font-semibold text-main-color1">{title}</Text>
+    </View>
+  );
+}

shared/ui/header/variants/FeedHeader.tsx

@@ -0,0 +1,14 @@
+import CommonHeader from "../CommonHeader";
+import BackButton from "../items/BackButton";
+import TodayKeyword from "../items/TodayKeyword";
+import MoreButton from "../items/MoreButton";
+
+export default function FeedHeader() {
+  return (
+    <CommonHeader
+      left={<BackButton />}
+      center={<TodayKeyword title="피드 테스트" dateString="2025.08.06" />}
+      right={<MoreButton />}
+    />
+  );
+}

shared/ui/header/variants/HomeHeader.tsx

@@ -0,0 +1,20 @@
+import CommonHeader from "../CommonHeader";
+import Logo from "../items/Logo";
+import SearchButton from "../items/SearchButton";
+import AttendButton from "../items/AttendButton";
+import { View } from "react-native";
+
+export default function HomeHeader() {
+  return (
+    <CommonHeader
+      left={<Logo />}
+      center={null}
+      right={
+        <View className="flex-row items-center">
+          <AttendButton />
+          <SearchButton />
+        </View>
+      }
+    />
+  );
+}

shared/ui/header/variants/SearchHeader.tsx

@@ -0,0 +1,15 @@
+import CommonHeader from "../CommonHeader";
+import BackButton from "../items/BackButton";
+import SearchButton from "../items/SearchButton";
+import TodayKeyword from "../items/TodayKeyword";
+
+export default function SearchHeader() {
+  return (
+    <CommonHeader
+      left={<BackButton />}
+      //Todo: 검색 페이지 디자인에 따라 UI 수정 + api 연결
+      center={<TodayKeyword title="검색 테스트" />}
+      right={<SearchButton />}
+    />
+  );
+}

shared/ui/header/variants/UploadHeader.tsx

@@ -0,0 +1,12 @@
+import CommonHeader from "../CommonHeader";
+import BackButton from "../items/BackButton";
+import TodayKeyword from "../items/TodayKeyword";
+
+export default function UploadHeader() {
+  return (
+    <CommonHeader
+      left={<BackButton />}
+      center={<TodayKeyword title="고양이" dateString="2025.08.06" />}
+    />
+  );
+}

tailwind.config.js

@@ -9,8 +9,13 @@ module.exports = {
     "./shared/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "main-color1": "#195B35",
+        "main-color2": "#FFFDF5",
+        "background-color": "#232323",
+      },
+    },
   },
   plugins: [],
 };
-