diff --git a/app/src/components/common/Header.tsx b/app/src/components/common/Header.tsx
new file mode 100644
index 0000000..ea89b26
--- /dev/null
+++ b/app/src/components/common/Header.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors } from '../../constants/colors';
+
+interface HeaderProps {
+ // 페이지 제목 (없으면 "fromis_9" 표시)
+ title?: string;
+}
+
+// 모바일 웹 MobileHeader와 동일한 공통 헤더 컴포넌트
+export default function Header({ title }: HeaderProps) {
+ const insets = useSafeAreaInsets();
+
+ return (
+
+
+
+ {title || 'fromis_9'}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ header: {
+ backgroundColor: '#FFFFFF',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 1 },
+ shadowOpacity: 0.05,
+ shadowRadius: 2,
+ elevation: 2,
+ },
+ headerContent: {
+ height: 56,
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingHorizontal: 16,
+ },
+ headerTitle: {
+ fontSize: 20,
+ fontWeight: '700',
+ color: colors.primary,
+ },
+});
diff --git a/app/src/screens/AlbumScreen.tsx b/app/src/screens/AlbumScreen.tsx
index f7a5dc8..1a51c99 100644
--- a/app/src/screens/AlbumScreen.tsx
+++ b/app/src/screens/AlbumScreen.tsx
@@ -15,6 +15,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { getAlbums, Album } from '../api/albums';
import { colors } from '../constants/colors';
+import Header from '../components/common/Header';
import type { AlbumStackParamList } from '../navigation/AppNavigator';
type NavigationProp = NativeStackNavigationProp;
@@ -48,7 +49,8 @@ export default function AlbumScreen() {
if (loading) {
return (
-
+
+
@@ -57,11 +59,9 @@ export default function AlbumScreen() {
}
return (
-
- {/* 헤더 */}
-
- 앨범
-
+
+ {/* 공통 헤더 */}
+
{/* 앨범 목록 */}
;
@@ -106,10 +107,8 @@ export default function HomeScreen() {
if (loading) {
return (
-
-
- fromis_9
-
+
+
@@ -118,11 +117,9 @@ export default function HomeScreen() {
}
return (
-
- {/* 상단 헤더 */}
-
- fromis_9
-
+
+ {/* 공통 헤더 */}
+
-
- 멤버
-
+
+
@@ -228,11 +227,9 @@ export default function MembersScreen() {
}
return (
-
- {/* 상단 헤더 */}
-
- 멤버
-
+
+ {/* 공통 헤더 */}
+
{/* 멤버 목록 */}