UMC-Eum · anjaein · Apr 6, 2026
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -1,13 +1,22 @@
-import { View } from "react-native";
+import { useRouter } from "expo-router";
+import { Pressable, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import TabBar from "../(tabs)/TabBar";
 
 export default function HomeScreen() {
+  const router = useRouter();
+
   return (
     <SafeAreaView className="flex-1 bg-gray-200">
       <View className="flex-1 items-center justify-center">
         <TabBar />
+        <Pressable
+          onPress={() => router.push('/test')}
+          style={{ marginTop: 20, backgroundColor: '#FF3E70', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 10 }}
+        >
+          <Text style={{ color: '#fff', fontWeight: '600' }}>테스트 페이지</Text>
+        </Pressable>
       </View>
     </SafeAreaView>
   );

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -17,6 +17,7 @@ export default function RootLayout() {
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
+        <Stack.Screen name="test" options={{ headerShown: false }} />
       </Stack>
       <StatusBar style="auto" />
     </ThemeProvider>

diff --git a/app/test.tsx b/app/test.tsx
@@ -0,0 +1,86 @@
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Header1, Header2, Header3, Header4, Header5 } from '@/components/header';
+import ProgressBar from '@/components/progress-bar';
+import TxtBox from '@/components/txt-box';
+
+export default function TestPage() {
+  const router = useRouter();
+  const [v1, setV1] = useState('');
+  const [v2, setV2] = useState('');
+  const [v3, setV3] = useState('텍스트');
+  const [v4, setV4] = useState('텍스트');
+  const [v5, setV5] = useState('텍스트');
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={['top']}>
+      <ScrollView contentContainerStyle={styles.scroll}>
+
+        {/* ── Header ── */}
+        <Text style={styles.sectionLabel}>Header</Text>
+        <View style={styles.section}>
+          <Header1 onPressBack={() => router.back()} hasAlarm />
+          <Header2 title="Text" onPressBack={() => router.back()} />
+          <Header3 title="Text" onPressBack={() => router.back()} />
+          <Header4 title="Text" />
+          <Header5 title="Text" rightText="Text 2" />
+        </View>
+
+        {/* ── 진행-bar ── */}
+        <Text style={styles.sectionLabel}>진행-bar</Text>
+        <View style={styles.section}>
+          <ProgressBar value={1} max={5} />
+          <ProgressBar value={2} max={5} />
+          <ProgressBar value={3} max={5} />
+          <ProgressBar value={4} max={5} />
+          <ProgressBar value={5} max={5} />
+        </View>
+
+        {/* ── Txt-box ── */}
+        <Text style={styles.sectionLabel}>Txt-box</Text>
+        <View style={styles.section}>
+          {/* 1. Default */}
+          <TxtBox placeholder="텍스트" value={v1} onChangeText={setV1} />
+          {/* 2. Focused (탭해서 확인) */}
+          <TxtBox placeholder="텍스트" value={v2} onChangeText={setV2} />
+          {/* 3. Focused + 값 (탭해서 확인) */}
+          <TxtBox placeholder="텍스트" value={v3} onChangeText={setV3} />
+          {/* 4. Unfocused + 값 */}
+          <TxtBox placeholder="텍스트" value={v4} onChangeText={setV4} />
+          {/* 5. 에러 (보조텍스트) */}
+          <TxtBox
+            placeholder="텍스트"
+            value={v5}
+            onChangeText={setV5}
+            supportingText="보조텍스트"
+          />
+        </View>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  scroll: {
+    paddingBottom: 40,
+  },
+  sectionLabel: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: '#1A1A1A',
+    paddingHorizontal: 20,
+    paddingTop: 32,
+    paddingBottom: 12,
+  },
+  section: {
+    paddingHorizontal: 20,
+    gap: 14,
+  },
+});
diff --git a/components/header.tsx b/components/header.tsx
@@ -0,0 +1,235 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+type HeaderBaseProps = {
+  title?: string;
+  onPressBack?: () => void;
+  rightIcon?: 'none' | 'bell' | 'kebab';
+  rightText?: string;
+  onPressRight?: () => void;
+  hasAlarm?: boolean;
+  titleAlign?: 'left' | 'center';
+};
+
+function HeaderBase({
+  title,
+  onPressBack,
+  rightIcon = 'none',
+  rightText,
+  onPressRight,
+  hasAlarm = false,
+  titleAlign = 'left',
+}: HeaderBaseProps) {
+  const hasBack = !!onPressBack;
+  const hasRight = rightIcon !== 'none' || !!rightText;
+
+  const containerStyle: ViewStyle = {
+    paddingLeft: hasBack ? 15 : 20,
+    paddingRight: hasRight ? 32 : 20,
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.leftSlot}>
+        {hasBack && (
+          <Pressable
+            onPress={onPressBack}
+            hitSlop={10}
+            style={({ pressed }) => [styles.backButton, pressed && styles.pressed]}
+          >
+            <MaterialIcons name="chevron-left" size={18} color="#9AA3A8" />
+          </Pressable>
+        )}
+      </View>
+
+      <View style={styles.centerSlot} pointerEvents="none">
+        {title && (
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.title,
+              titleAlign === 'center' ? styles.titleCenter : styles.titleLeft,
+              hasBack && titleAlign === 'left' ? styles.titleWithBack : null,
+            ]}
+          >
+            {title}
+          </Text>
+        )}
+      </View>
+
+      <View style={styles.rightSlot}>
+        {rightText ? (
+          <Pressable
+            onPress={onPressRight}
+            hitSlop={10}
+            style={({ pressed }) => [pressed && styles.pressed]}
+          >
+            <Text style={styles.rightText}>{rightText}</Text>
+          </Pressable>
+        ) : rightIcon !== 'none' ? (
+          <Pressable
+            onPress={onPressRight}
+            hitSlop={10}
+            style={({ pressed }) => [styles.rightButton, pressed && styles.pressed]}
+          >
+            <View style={styles.rightIconWrap}>
+              {rightIcon === 'bell' ? (
+                <MaterialIcons name="notifications-none" size={24} color="#2B2B2B" />
+              ) : (
+                <MaterialIcons name="more-vert" size={24} color="#2B2B2B" />
+              )}
+            </View>
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+// 1) back + bell (알람 dot 옵션)
+export function Header1(props: {
+  title?: string;
+  onPressBack: () => void;
+  onPressBell?: () => void;
+  hasAlarm?: boolean;
+}) {
+  return (
+    <HeaderBase
+      title={props.title}
+      onPressBack={props.onPressBack}
+      rightIcon="bell"
+      onPressRight={props.onPressBell}
+      hasAlarm={props.hasAlarm}
+      titleAlign="left"
+    />
+  );
+}
+
+// 2) back + 왼쪽 타이틀 + kebab
+export function Header2(props: {
+  title: string;
+  onPressBack: () => void;
+  onPressMenu?: () => void;
+}) {
+  return (
+    <HeaderBase
+      title={props.title}
+      onPressBack={props.onPressBack}
+      rightIcon="kebab"
+      onPressRight={props.onPressMenu}
+      titleAlign="left"
+    />
+  );
+}
+
+// 3) back + 가운데 타이틀 + kebab
+export function Header3(props: {
+  title: string;
+  onPressBack: () => void;
+  onPressMenu?: () => void;
+}) {
+  return (
+    <HeaderBase
+      title={props.title}
+      onPressBack={props.onPressBack}
+      rightIcon="kebab"
+      onPressRight={props.onPressMenu}
+      titleAlign="center"
+    />
+  );
+}
+
+// 4) no-back + 왼쪽 타이틀 + kebab
+export function Header4(props: {
+  title: string;
+  onPressMenu?: () => void;
+}) {
+  return (
+    <HeaderBase
+      title={props.title}
+      rightIcon="kebab"
+      onPressRight={props.onPressMenu}
+      titleAlign="left"
+    />
+  );
+}
+
+// 5) 왼쪽 타이틀 + 오른쪽 텍스트
+export function Header5(props: {
+  title: string;
+  rightText: string;
+  onPressRight?: () => void;
+}) {
+  return (
+    <HeaderBase
+      title={props.title}
+      rightText={props.rightText}
+      onPressRight={props.onPressRight}
+      titleAlign="left"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 48,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  leftSlot: {
+    minWidth: 18,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  backButton: {
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerSlot: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1A1A1A',
+  },
+  titleLeft: {
+    textAlign: 'left',
+  },
+  titleCenter: {
+    textAlign: 'center',
+  },
+  titleWithBack: {
+    marginLeft: 15,
+  },
+  rightSlot: {
+    minWidth: 24,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  rightButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rightIconWrap: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rightText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1A1A1A',
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+});