@designbasekorea/ui-native 0.1.0

package/src/components/Input/Input.tsx

@@ -0,0 +1,199 @@
+/**
+ * Input 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.semantic.field.input.{bg-default|border-default|border-focus|...}
+ *   - 사이즈: theme.size.semantic.input.{s|m|l}
+ *   - 패딩: theme.spacing.aliases.padding.{xs|s|m}
+ *   - 라운드: theme.border.semantic.radius.input.{s|m|l}
+ *   - 폰트: theme.typography.foundation.fontSize.{xs|s|base|l}
+ * 
+ * 원본: packages/ui/src/components/Input/Input.tsx
+ */
+
+import React, { useState } from 'react';
+import {
+    View,
+    TextInput,
+    Text,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type TextInputProps as RNTextInputProps,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type InputSize = 's' | 'm' | 'l';
+
+export interface InputProps extends Omit<RNTextInputProps, 'style'> {
+    label?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    containerStyle?: ViewStyle;
+    inputStyle?: TextStyle;
+    onChangeText?: (text: string) => void;
+}
+
+export const Input: React.FC<InputProps> = ({
+    label,
+    size = 'm',
+    disabled = false,
+    required = false,
+    error = false,
+    errorMessage,
+    helperText,
+    startIcon,
+    endIcon,
+    fullWidth = true,
+    containerStyle,
+    inputStyle,
+    onChangeText,
+    onFocus,
+    onBlur,
+    ...props
+}) => {
+    const { theme } = useTheme();
+    const [isFocused, setIsFocused] = useState(false);
+
+    // ─── 토큰에서 가져오기 ───
+    const fieldTokens = theme.color.semantic?.field?.input ?? {};
+    const aliases = theme.color.aliases;
+    const inputSizeTokens = theme.size.semantic?.input;
+    const padding = theme.spacing.aliases?.padding ?? theme.spacing.aliases?.scale;
+    const fontSize = theme.typography.foundation?.fontSize;
+    const radiusTokens = theme.border.semantic?.radius?.input;
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const sizeConfig = {
+        s: {
+            height: inputSizeTokens?.s ?? 24,
+            fontSize: fontSize?.xs ?? 12,
+            paddingH: padding?.xs ?? 4,
+        },
+        m: {
+            height: inputSizeTokens?.m ?? 32,
+            fontSize: fontSize?.s ?? 14,
+            paddingH: padding?.s ?? 8,
+        },
+        l: {
+            height: inputSizeTokens?.l ?? 40,
+            fontSize: fontSize?.base ?? 16,
+            paddingH: padding?.m ?? 12,
+        },
+    }[size];
+
+    const borderRadius = radiusTokens?.[size] ?? 8;
+
+    // 색상 (semantic 토큰 > aliases 폴백)
+    const bgColor = disabled
+        ? (fieldTokens['bg-disabled'] ?? aliases?.surface?.muted ?? '#E8EEF2')
+        : (fieldTokens['bg-default'] ?? aliases?.surface?.base ?? '#FFFFFF');
+
+    const borderColor = error
+        ? (fieldTokens['border-error'] ?? aliases?.feedback?.error?.fg ?? '#DC2626')
+        : isFocused
+            ? (fieldTokens['border-focus'] ?? aliases?.brand?.primary ?? '#006FFF')
+            : (fieldTokens['border-default'] ?? aliases?.border?.base ?? '#E8EEF2');
+
+    const textColor = disabled
+        ? (fieldTokens['text-disabled'] ?? aliases?.text?.disabled ?? '#A4ADB2')
+        : (fieldTokens['text-default'] ?? aliases?.text?.primary ?? '#17191A');
+
+    const placeholderColor = fieldTokens?.placeholder ?? aliases?.text?.tertiary ?? '#757B80';
+    const labelColor = error
+        ? (aliases?.feedback?.error?.fg ?? '#DC2626')
+        : (aliases?.text?.primary ?? '#17191A');
+
+    return (
+        <View style={[fullWidth && styles.fullWidth, containerStyle]}>
+            {label && (
+                <Text style={[
+                    styles.label,
+                    { color: labelColor, fontSize: fontSize?.xs ?? 12 },
+                    disabled && { opacity: disabledOpacity },
+                ]}>
+                    {label}
+                    {required && <Text style={{ color: aliases?.feedback?.error?.fg ?? '#DC2626' }}> *</Text>}
+                </Text>
+            )}
+
+            <View style={[
+                styles.inputWrapper,
+                {
+                    height: sizeConfig.height,
+                    borderColor,
+                    borderRadius,
+                    backgroundColor: bgColor,
+                },
+                isFocused && !error && { borderWidth: 2 },
+            ]}>
+                {startIcon && (
+                    <View style={[styles.iconContainer, { paddingLeft: sizeConfig.paddingH }]}>
+                        {startIcon}
+                    </View>
+                )}
+
+                <TextInput
+                    {...props}
+                    onChangeText={onChangeText}
+                    editable={!disabled}
+                    onFocus={(e) => { setIsFocused(true); onFocus?.(e); }}
+                    onBlur={(e) => { setIsFocused(false); onBlur?.(e); }}
+                    placeholderTextColor={placeholderColor}
+                    style={[
+                        styles.input,
+                        {
+                            fontSize: sizeConfig.fontSize,
+                            color: textColor,
+                            paddingHorizontal: sizeConfig.paddingH,
+                        },
+                        startIcon ? { paddingLeft: 0 } : null,
+                        endIcon ? { paddingRight: 0 } : null,
+                        inputStyle,
+                    ]}
+                    accessibilityLabel={label}
+                    accessibilityState={{ disabled }}
+                />
+
+                {endIcon && (
+                    <View style={[styles.iconContainer, { paddingRight: sizeConfig.paddingH }]}>
+                        {endIcon}
+                    </View>
+                )}
+            </View>
+
+            {helperText && !error && (
+                <Text style={[styles.helperText, { color: aliases?.text?.tertiary ?? '#757B80', fontSize: fontSize?.xs ?? 12 }]}>
+                    {helperText}
+                </Text>
+            )}
+
+            {error && errorMessage && (
+                <Text style={[styles.errorText, { color: aliases?.feedback?.error?.fg ?? '#DC2626', fontSize: fontSize?.xs ?? 12 }]}>
+                    {errorMessage}
+                </Text>
+            )}
+        </View>
+    );
+};
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+    fullWidth: { width: '100%' },
+    label: { fontWeight: '500', marginBottom: 6 },
+    inputWrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, overflow: 'hidden' },
+    input: { flex: 1, height: '100%', padding: 0 },
+    iconContainer: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 8 },
+    helperText: { marginTop: 4 },
+    errorText: { marginTop: 4 },
+});
+
+export default Input;

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input';

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,117 @@
+/**
+ * Modal 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.base
+ *   - 오버레이: theme.color.aliases.overlay.base
+ *   - 라운드: theme.border.semantic.radius.modal.{s|m|l}
+ *   - 패딩: theme.spacing.aliases.padding.{m|l}
+ *   - 그림자: theme.shadow.foundation.xl
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ */
+
+import React from 'react';
+import {
+    Modal as RNModal,
+    View, Text, Pressable, StyleSheet,
+    type ViewStyle, KeyboardAvoidingView, Platform,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type ModalSize = 's' | 'm' | 'l';
+
+export interface ModalProps {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: ModalSize;
+    closable?: boolean;
+    footer?: React.ReactNode;
+    animationType?: 'none' | 'slide' | 'fade';
+    style?: ViewStyle;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+    visible, onClose, title, children, size = 'm',
+    closable = true, footer, animationType = 'fade', style,
+}) => {
+    const { theme } = useTheme();
+
+    const surface = theme.color.aliases?.surface ?? {};
+    const text = theme.color.aliases?.text ?? {};
+    const overlay = theme.color.aliases?.overlay ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const modalRadius = theme.border.semantic?.radius?.modal ?? {};
+    const shadow = theme.shadow.foundation ?? {};
+    const gap = theme.spacing.aliases?.gap ?? {};
+
+    const borderRadius = modalRadius[size] ?? { s: 8, m: 12, l: 16 }[size];
+    const maxWidth = { s: 320, m: 400, l: 500 }[size];
+
+    const toShadowStyle = (s: any) => s ? {
+        shadowColor: s.shadowColor ?? '#000',
+        shadowOffset: { width: s.shadowOffsetX ?? 0, height: s.shadowOffsetY ?? 0 },
+        shadowOpacity: s.shadowOpacity ?? 0.1,
+        shadowRadius: s.shadowRadius ?? 15,
+        elevation: s.elevation ?? 8,
+    } : {};
+
+    return (
+        <RNModal visible={visible} transparent animationType={animationType}
+            onRequestClose={closable ? onClose : undefined}>
+            <KeyboardAvoidingView style={styles.overlay}
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+                <Pressable style={[styles.backdrop, { backgroundColor: overlay.base ?? 'rgba(0,0,0,0.6)' }]}
+                    onPress={closable ? onClose : undefined} />
+                <View style={[
+                    styles.container,
+                    {
+                        maxWidth, borderRadius,
+                        backgroundColor: surface.base ?? '#FFFFFF',
+                        padding: padding.l ?? 20,
+                        ...toShadowStyle(shadow.xl),
+                    },
+                    style,
+                ]}>
+                    {(title || closable) && (
+                        <View style={[styles.header, { marginBottom: gap.m ?? 12 }]}>
+                            {title && (
+                                <Text style={[styles.title, { color: text.primary ?? '#17191A', fontSize: fontSize.l ?? 18 }]}>
+                                    {title}
+                                </Text>
+                            )}
+                            {closable && (
+                                <Pressable onPress={onClose} hitSlop={8} accessibilityLabel="닫기" accessibilityRole="button">
+                                    <Text style={{ fontSize: fontSize.xl ?? 20, color: text.tertiary ?? '#757B80' }}>✕</Text>
+                                </Pressable>
+                            )}
+                        </View>
+                    )}
+                    <View style={styles.body}>{children}</View>
+                    {footer && (
+                        <View style={[styles.footer, { borderTopColor: borders.base ?? '#E8EEF2', marginTop: gap.l ?? 20, paddingTop: gap.m ?? 12 }]}>
+                            {footer}
+                        </View>
+                    )}
+                </View>
+            </KeyboardAvoidingView>
+        </RNModal>
+    );
+};
+
+Modal.displayName = 'Modal';
+
+const styles = StyleSheet.create({
+    overlay: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+    backdrop: { ...StyleSheet.absoluteFillObject },
+    container: { width: '90%' },
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    title: { fontWeight: '600', flex: 1 },
+    body: {},
+    footer: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8, borderTopWidth: 1 },
+});
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,278 @@
+/**
+ * Navbar 컴포넌트 (React Native)
+ * 
+ * 두 가지 모드 지원:
+ *   1. stack (기본) — 왼쪽 뒤로가기, 가운데 타이틀, 오른쪽 액션 버튼(최대 2개)
+ *   2. tab — 왼쪽 타이틀 텍스트, 오른쪽 액션 버튼(최대 3개)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.base
+ *   - 텍스트: theme.color.aliases.text.{primary|secondary}
+ *   - 보더: theme.color.aliases.border.base
+ *   - 브랜드: theme.color.aliases.brand.primary
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ *   - 패딩: theme.spacing.aliases.padding.*
+ *   - 아이콘: theme.size.semantic.icon.*
+ */
+
+import React from 'react';
+import {
+    View, Text, Pressable, StyleSheet, Platform, StatusBar,
+    type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export interface NavbarAction {
+    /** 아이콘 (ReactNode) 또는 텍스트 */
+    icon?: React.ReactNode;
+    label?: string;
+    onPress: () => void;
+    disabled?: boolean;
+}
+
+export interface NavbarProps {
+    /** 네비게이션 모드: stack = 뒤로가기+중앙타이틀, tab = 좌측타이틀+우측액션 */
+    mode?: 'stack' | 'tab';
+    /** 타이틀 */
+    title: string;
+    /** 서브타이틀 (tab 모드에서만 표시) */
+    subtitle?: string;
+    /** 뒤로가기 핸들러 (stack 모드) */
+    onBack?: () => void;
+    /** 뒤로가기 커스텀 아이콘 */
+    backIcon?: React.ReactNode;
+    /** 오른쪽 액션 버튼 (stack: 최대 2개, tab: 최대 3개) */
+    actions?: NavbarAction[];
+    /** 하단 보더 표시 여부 */
+    showBorder?: boolean;
+    /** 배경 투명 */
+    transparent?: boolean;
+    /** 타이틀 아래 추가 컨텐츠 (검색바 등) */
+    children?: React.ReactNode;
+    /** 추가 스타일 */
+    style?: ViewStyle;
+}
+
+export const Navbar: React.FC<NavbarProps> = ({
+    mode = 'stack',
+    title,
+    subtitle,
+    onBack,
+    backIcon,
+    actions = [],
+    showBorder = true,
+    transparent = false,
+    children,
+    style,
+}) => {
+    const { theme } = useTheme();
+
+    // ─── 토큰에서 가져오기 ───
+    const surface = theme.color.aliases?.surface ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const brand = theme.color.aliases?.brand ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const gap = theme.spacing.aliases?.gap ?? {};
+    const iconSize = theme.size.semantic?.icon ?? {};
+
+    // stack 모드 = 최대 2개, tab 모드 = 최대 3개
+    const maxActions = mode === 'stack' ? 2 : 3;
+    const visibleActions = actions.slice(0, maxActions);
+
+    const NAVBAR_HEIGHT = 56;
+    const statusBarHeight = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0;
+
+    const renderAction = (action: NavbarAction, index: number) => (
+        <Pressable
+            key={index}
+            onPress={action.onPress}
+            disabled={action.disabled}
+            accessibilityRole="button"
+            accessibilityLabel={action.label}
+            hitSlop={8}
+            style={({ pressed }) => [
+                styles.actionButton,
+                {
+                    width: iconSize.xl ?? 32,
+                    height: iconSize.xl ?? 32,
+                },
+                action.disabled && { opacity: theme.opacity.foundation?.[40] ?? 0.4 },
+                pressed && { opacity: 0.6 },
+            ]}
+        >
+            {action.icon ?? (
+                <Text style={{
+                    fontSize: fontSize.s ?? 14,
+                    fontWeight: '500',
+                    color: brand.primary ?? '#006FFF',
+                }}>
+                    {action.label}
+                </Text>
+            )}
+        </Pressable>
+    );
+
+    return (
+        <View style={[
+            styles.wrapper,
+            {
+                paddingTop: statusBarHeight,
+                backgroundColor: transparent ? 'transparent' : (surface.base ?? '#FFFFFF'),
+                borderBottomWidth: showBorder ? 1 : 0,
+                borderBottomColor: borders.base ?? '#E8EEF2',
+            },
+            style,
+        ]}>
+            <View style={[
+                styles.container,
+                {
+                    height: NAVBAR_HEIGHT,
+                    paddingHorizontal: padding.m ?? 12,
+                },
+            ]}>
+                {mode === 'stack' ? (
+                    /* ── Stack 모드: [뒤로가기] [중앙 타이틀] [액션 버튼] ── */
+                    <>
+                        <View style={styles.left}>
+                            {onBack && (
+                                <Pressable
+                                    onPress={onBack}
+                                    accessibilityRole="button"
+                                    accessibilityLabel="뒤로 가기"
+                                    hitSlop={12}
+                                    style={({ pressed }) => [
+                                        styles.backButton,
+                                        {
+                                            width: iconSize.xl ?? 32,
+                                            height: iconSize.xl ?? 32,
+                                        },
+                                        pressed && { opacity: 0.6 },
+                                    ]}
+                                >
+                                    {backIcon ?? (
+                                        <Text style={{
+                                            fontSize: fontSize.xl ?? 20,
+                                            color: textColors.primary ?? '#17191A',
+                                        }}>
+                                            ←
+                                        </Text>
+                                    )}
+                                </Pressable>
+                            )}
+                        </View>
+
+                        <View style={styles.center}>
+                            <Text
+                                style={[styles.stackTitle, {
+                                    fontSize: fontSize.base ?? 16,
+                                    color: textColors.primary ?? '#17191A',
+                                }]}
+                                numberOfLines={1}
+                            >
+                                {title}
+                            </Text>
+                        </View>
+
+                        <View style={[styles.right, { gap: gap.xs ?? 4 }]}>
+                            {visibleActions.map(renderAction)}
+                        </View>
+                    </>
+                ) : (
+                    /* ── Tab 모드: [좌측 타이틀] [우측 액션 버튼] ── */
+                    <>
+                        <View style={styles.tabLeft}>
+                            <Text
+                                style={[styles.tabTitle, {
+                                    fontSize: fontSize['2xl'] ?? 24,
+                                    color: textColors.primary ?? '#17191A',
+                                }]}
+                                numberOfLines={1}
+                            >
+                                {title}
+                            </Text>
+                            {subtitle && (
+                                <Text style={{
+                                    fontSize: fontSize.xs ?? 12,
+                                    color: textColors.tertiary ?? '#757B80',
+                                    marginTop: 1,
+                                }}>
+                                    {subtitle}
+                                </Text>
+                            )}
+                        </View>
+
+                        <View style={[styles.right, { gap: gap.xs ?? 4 }]}>
+                            {visibleActions.map(renderAction)}
+                        </View>
+                    </>
+                )}
+            </View>
+
+            {/* 추가 컨텐츠 (검색바 등) */}
+            {children && (
+                <View style={{
+                    paddingHorizontal: padding.m ?? 12,
+                    paddingBottom: padding.s ?? 8,
+                }}>
+                    {children}
+                </View>
+            )}
+        </View>
+    );
+};
+
+Navbar.displayName = 'Navbar';
+
+const styles = StyleSheet.create({
+    wrapper: {},
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+
+    /* ─── Stack 모드 ─── */
+    left: {
+        width: 44,
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+    },
+    center: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    right: {
+        minWidth: 44,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    backButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stackTitle: {
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+
+    /* ─── Tab 모드 ─── */
+    tabLeft: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    tabTitle: {
+        fontWeight: '700',
+    },
+
+    /* ─── 공통 ─── */
+    actionButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 8,
+    },
+});
+
+export default Navbar;

package/src/components/Navbar/index.ts

@@ -0,0 +1,2 @@
+export { Navbar } from './Navbar';
+export type { NavbarProps, NavbarAction } from './Navbar';