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 ( - - {/* 상단 헤더 */} - - 멤버 - + + {/* 공통 헤더 */} +
{/* 멤버 목록 */}