@designbasekorea/ui-native 0.1.0

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,122 @@
+/**
+ * Avatar 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 사이즈: theme.size.semantic.avatar.{xs|s|m|l|xl|2xl}
+ *   - 색상: theme.color.aliases.{surface|text|feedback}.*
+ *   - 폰트: theme.typography.foundation.fontSize.*
+ * 
+ * 원본: packages/ui/src/components/Avatar/Avatar.tsx
+ */
+
+import React, { useState } from 'react';
+import {
+    View, Image, Text, Pressable, StyleSheet, type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    icon?: React.ReactNode;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+
+const INITIALS_COLORS = [
+    { bg: '#E3F2FD', text: '#1976D2' }, { bg: '#F3E5F5', text: '#7B1FA2' },
+    { bg: '#E8F5E8', text: '#388E3C' }, { bg: '#FFF3E0', text: '#F57C00' },
+    { bg: '#FCE4EC', text: '#C2185B' }, { bg: '#E0F2F1', text: '#00796B' },
+    { bg: '#FFF8E1', text: '#F9A825' }, { bg: '#F1F8E9', text: '#689F38' },
+    { bg: '#E8EAF6', text: '#3F51B5' }, { bg: '#FFEBEE', text: '#D32F2F' },
+];
+
+function getColorForText(text: string) {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    return INITIALS_COLORS[Math.abs(hash) % INITIALS_COLORS.length];
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+    src, alt, initials, icon, size = 'm', status, onPress, disabled = false, style,
+}) => {
+    const { theme } = useTheme();
+    const [imageError, setImageError] = useState(false);
+
+    // ─── 토큰에서 가져오기 ───
+    const avatarSizeTokens = theme.size.semantic?.avatar ?? {};
+    const aliases = theme.color.aliases ?? {};
+    const feedback = aliases.feedback ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const avatarSize = avatarSizeTokens[size] ?? { xs: 16, s: 20, m: 24, l: 32, xl: 40, '2xl': 48 }[size];
+    const fontSizeMap: Record<AvatarSize, number> = { xs: 8, s: 10, m: 12, l: 16, xl: 20, '2xl': 26 };
+    const statusSizeMap: Record<AvatarSize, number> = { xs: 6, s: 8, m: 10, l: 12, xl: 14, '2xl': 16 };
+
+    const statusColors: Record<AvatarStatus, string> = {
+        online: feedback.success?.fg ?? '#16A34A',
+        offline: aliases.text?.tertiary ?? '#757B80',
+        away: feedback.warning?.fg ?? '#D1B400',
+        busy: feedback.error?.fg ?? '#DC2626',
+    };
+
+    const shouldShowImage = src && !imageError;
+    const shouldShowInitials = !shouldShowImage && initials;
+    const initialsColor = shouldShowInitials ? getColorForText(initials!) : null;
+
+    const content = (
+        <View style={[
+            styles.container,
+            {
+                width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2,
+                backgroundColor: shouldShowInitials ? initialsColor?.bg : (aliases.surface?.['layer-2'] ?? '#E8EEF2'),
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ]} accessibilityRole="image" accessibilityLabel={alt || initials || '아바타'}>
+            {shouldShowImage && (
+                <Image source={{ uri: src }} style={[styles.image, { width: avatarSize, height: avatarSize, borderRadius: avatarSize / 2 }]} onError={() => setImageError(true)} />
+            )}
+            {shouldShowInitials && (
+                <Text style={{ fontSize: fontSizeMap[size], color: initialsColor?.text, fontWeight: '600' }}>
+                    {initials!.charAt(0).toUpperCase()}
+                </Text>
+            )}
+            {!shouldShowImage && !shouldShowInitials && icon}
+            {status && (
+                <View style={[styles.status, {
+                    width: statusSizeMap[size], height: statusSizeMap[size],
+                    borderRadius: statusSizeMap[size] / 2,
+                    backgroundColor: statusColors[status],
+                    borderColor: aliases.surface?.base ?? '#FFFFFF', borderWidth: 2,
+                }]} />
+            )}
+        </View>
+    );
+
+    if (onPress) {
+        return (
+            <Pressable onPress={onPress} disabled={disabled} accessibilityRole="button"
+                style={({ pressed }) => pressed ? { opacity: 0.7 } : undefined}>
+                {content}
+            </Pressable>
+        );
+    }
+    return content;
+};
+
+Avatar.displayName = 'Avatar';
+
+const styles = StyleSheet.create({
+    container: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+    image: { position: 'absolute' },
+    status: { position: 'absolute', bottom: 0, right: 0 },
+});
+
+export default Avatar;

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarStatus } from './Avatar';

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,100 @@
+/**
+ * Badge 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 색상: theme.color.aliases.{brand|feedback}.*, theme.color.aliases.text.*
+ *   - 폰트: theme.typography.foundation.fontSize.{xs|s}
+ *   - 간격: theme.spacing.aliases.padding.{xxs|xs|s}
+ * 
+ * 원본: packages/ui/src/components/Badge/Badge.tsx
+ */
+
+import React from 'react';
+import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export type BadgeSize = 's' | 'm' | 'l';
+export type BadgeVariant = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+export type BadgeType = 'dot' | 'number' | 'text' | 'outlined';
+
+export interface BadgeProps {
+    children?: React.ReactNode;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    type?: BadgeType;
+    count?: number;
+    maxCount?: number;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+    children, size = 'm', variant = 'primary', type = 'text',
+    count, maxCount = 99, disabled = false, style,
+}) => {
+    const { theme } = useTheme();
+
+    const aliases = theme.color.aliases ?? {};
+    const feedback = aliases.feedback ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const disabledOpacity = theme.opacity.foundation?.[40] ?? 0.4;
+
+    const sizeConfig = {
+        s: { minWidth: 16, height: 16, fontSize: fontSize.xs ?? 12 - 2, paddingH: padding.xxs ?? 2, dotSize: 6 },
+        m: { minWidth: 20, height: 20, fontSize: fontSize.xs ?? 12 - 1, paddingH: padding.xs ?? 4, dotSize: 8 },
+        l: { minWidth: 24, height: 24, fontSize: fontSize.xs ?? 12, paddingH: padding.s ?? 8, dotSize: 10 },
+    }[size];
+
+    const variantColors = {
+        primary: { bg: aliases.brand?.primary ?? '#006FFF', text: '#FFFFFF' },
+        secondary: { bg: aliases.surface?.['layer-2'] ?? '#E8EEF2', text: aliases.text?.secondary ?? '#464A4D' },
+        info: { bg: feedback.info?.bg ?? '#EDF9FF', text: feedback.info?.fg ?? '#0683FF' },
+        success: { bg: feedback.success?.bg ?? '#F0FDF5', text: feedback.success?.fg ?? '#16A34A' },
+        warning: { bg: feedback.warning?.bg ?? '#FFFFE7', text: feedback.warning?.fg ?? '#D1B400' },
+        danger: { bg: feedback.error?.bg ?? '#FEF2F2', text: feedback.error?.fg ?? '#DC2626' },
+    }[variant];
+
+    if (type === 'dot') {
+        return (
+            <View style={[
+                { width: sizeConfig.dotSize, height: sizeConfig.dotSize, borderRadius: sizeConfig.dotSize / 2, backgroundColor: variantColors.bg },
+                disabled && { opacity: disabledOpacity }, style,
+            ]} />
+        );
+    }
+
+    const displayContent = type === 'number' && count !== undefined
+        ? (count > maxCount ? `${maxCount}+` : String(count))
+        : children;
+    const isOutlined = type === 'outlined';
+
+    return (
+        <View style={[
+            styles.badge,
+            {
+                minWidth: sizeConfig.minWidth, height: sizeConfig.height,
+                borderRadius: sizeConfig.height / 2, paddingHorizontal: sizeConfig.paddingH,
+                backgroundColor: isOutlined ? 'transparent' : variantColors.bg,
+                borderWidth: isOutlined ? 1 : 0,
+                borderColor: isOutlined ? variantColors.bg : undefined,
+            },
+            disabled && { opacity: disabledOpacity }, style,
+        ]} accessibilityRole="text">
+            {typeof displayContent === 'string' || typeof displayContent === 'number' ? (
+                <Text style={[styles.text, { fontSize: sizeConfig.fontSize, color: isOutlined ? variantColors.bg : variantColors.text }]}>
+                    {displayContent}
+                </Text>
+            ) : displayContent}
+        </View>
+    );
+};
+
+Badge.displayName = 'Badge';
+
+const styles = StyleSheet.create({
+    badge: { alignItems: 'center', justifyContent: 'center', alignSelf: 'flex-start' },
+    text: { fontWeight: '600', textAlign: 'center' },
+});
+
+export default Badge;

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeSize, BadgeVariant, BadgeType } from './Badge';

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,104 @@
+/**
+ * BottomNavigation 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.base
+ *   - 보더: theme.color.aliases.border.base
+ *   - 활성: theme.color.aliases.brand.primary
+ *   - 비활성: theme.color.aliases.text.tertiary
+ *   - 폰트: theme.typography.foundation.fontSize.xs
+ *   - 그림자: theme.shadow.foundation.m
+ */
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+export interface BottomNavItem {
+    key: string;
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    badge?: number;
+}
+
+export interface BottomNavigationProps {
+    items: BottomNavItem[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    showLabels?: boolean;
+    style?: ViewStyle;
+}
+
+export const BottomNavigation: React.FC<BottomNavigationProps> = ({
+    items, activeKey, onChange, showLabels = true, style,
+}) => {
+    const { theme } = useTheme();
+
+    const surface = theme.color.aliases?.surface ?? {};
+    const brand = theme.color.aliases?.brand ?? {};
+    const textColors = theme.color.aliases?.text ?? {};
+    const borders = theme.color.aliases?.border ?? {};
+    const fontSize = theme.typography.foundation?.fontSize ?? {};
+    const shadow = theme.shadow.foundation ?? {};
+    const padding = theme.spacing.aliases?.padding ?? {};
+
+    const toShadowStyle = (s: any) => s ? {
+        shadowColor: s.shadowColor ?? '#000',
+        shadowOffset: { width: s.shadowOffsetX ?? 0, height: -(s.shadowOffsetY ?? 4) },
+        shadowOpacity: s.shadowOpacity ?? 0.1,
+        shadowRadius: s.shadowRadius ?? 6,
+        elevation: s.elevation ?? 8,
+    } : {};
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                backgroundColor: surface.base ?? '#FFFFFF',
+                borderTopColor: borders.base ?? '#E8EEF2',
+                paddingBottom: padding.xs ?? 4,
+                ...toShadowStyle(shadow.m),
+            },
+            style,
+        ]}>
+            {items.map((item) => {
+                const isActive = activeKey === item.key;
+                const activeColor = brand.primary ?? '#006FFF';
+                const inactiveColor = textColors.tertiary ?? '#757B80';
+                return (
+                    <Pressable key={item.key} onPress={() => onChange(item.key)}
+                        accessibilityRole="tab" accessibilityState={{ selected: isActive }}
+                        style={[styles.item, { paddingTop: padding.s ?? 8 }]}>
+                        <View>
+                            {isActive ? (item.activeIcon ?? item.icon) : item.icon}
+                            {item.badge !== undefined && item.badge > 0 && (
+                                <View style={[styles.badge, { backgroundColor: theme.color.aliases?.feedback?.error?.fg ?? '#DC2626' }]}>
+                                    <Text style={styles.badgeText}>{item.badge > 99 ? '99+' : item.badge}</Text>
+                                </View>
+                            )}
+                        </View>
+                        {showLabels && (
+                            <Text style={{
+                                fontSize: fontSize.xs ?? 12 - 2,
+                                color: isActive ? activeColor : inactiveColor,
+                                fontWeight: isActive ? '600' : '400', marginTop: 2,
+                            }}>{item.label}</Text>
+                        )}
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+};
+
+BottomNavigation.displayName = 'BottomNavigation';
+
+const styles = StyleSheet.create({
+    container: { flexDirection: 'row', borderTopWidth: 1 },
+    item: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    badge: { position: 'absolute', top: -4, right: -8, minWidth: 16, height: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 3 },
+    badgeText: { color: '#FFFFFF', fontSize: 9, fontWeight: '700' },
+});
+
+export default BottomNavigation;

package/src/components/BottomNavigation/index.ts

@@ -0,0 +1,2 @@
+export { BottomNavigation } from './BottomNavigation';
+export type { BottomNavigationProps, BottomNavItem } from './BottomNavigation';

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,127 @@
+/**
+ * BottomSheet 컴포넌트 (React Native)
+ * 
+ * 스타일링 토큰 경로:
+ *   - 배경: theme.color.aliases.surface.base
+ *   - 오버레이: theme.color.aliases.overlay.{base|soft}
+ *   - 라운드: theme.border.semantic.radius.xl (상단만)
+ *   - 패딩: theme.spacing.aliases.padding.{m|l}
+ *   - 그림자: theme.shadow.foundation.xl
+ *   - 핸들: theme.color.aliases.border.layer-1
+ */
+
+import React, { useRef, useEffect } from 'react';
+import {
+    Modal, View, Text, Pressable, Animated, PanResponder,
+    Dimensions, StyleSheet, type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme/useTheme';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+export interface BottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    height?: number | string;
+    closable?: boolean;
+    showHandle?: boolean;
+    style?: ViewStyle;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+    visible, onClose, title, children, height = '50%',
+    closable = true, showHandle = true, style,
+}) => {
+    const { theme } = useTheme();
+    const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+    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 radiusXl = theme.border.semantic?.radius?.xl ?? 16;
+    const gap = theme.spacing.aliases?.gap ?? {};
+
+    const sheetHeight = typeof height === 'string' ? SCREEN_HEIGHT * (parseInt(height) / 100) : height;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.spring(translateY, { toValue: 0, useNativeDriver: true, friction: 9, tension: 65 }).start();
+        } else {
+            Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 250, useNativeDriver: true }).start();
+        }
+    }, [visible, translateY]);
+
+    const panResponder = useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => closable,
+            onMoveShouldSetPanResponder: (_, g) => closable && g.dy > 5,
+            onPanResponderMove: (_, g) => { if (g.dy > 0) translateY.setValue(g.dy); },
+            onPanResponderRelease: (_, g) => {
+                if (g.dy > sheetHeight * 0.3 || g.vy > 0.5) {
+                    Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 200, useNativeDriver: true }).start(onClose);
+                } else {
+                    Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
+                }
+            },
+        })
+    ).current;
+
+    return (
+        <Modal visible={visible} transparent animationType="none" onRequestClose={closable ? onClose : undefined}>
+            <View style={styles.overlay}>
+                <Pressable style={[styles.backdrop, { backgroundColor: overlay.base ?? 'rgba(0,0,0,0.6)' }]}
+                    onPress={closable ? onClose : undefined} />
+                <Animated.View
+                    {...panResponder.panHandlers}
+                    style={[
+                        styles.sheet,
+                        {
+                            height: sheetHeight,
+                            backgroundColor: surface.base ?? '#FFFFFF',
+                            borderTopLeftRadius: radiusXl,
+                            borderTopRightRadius: radiusXl,
+                            transform: [{ translateY }],
+                        },
+                        style,
+                    ]}>
+                    {showHandle && (
+                        <View style={styles.handleContainer}>
+                            <View style={[styles.handle, { backgroundColor: borders['layer-1'] ?? '#BBC5CC' }]} />
+                        </View>
+                    )}
+                    {(title || closable) && (
+                        <View style={[styles.header, { paddingHorizontal: padding.l ?? 20, paddingTop: padding.s ?? 8 }]}>
+                            {title && <Text style={[styles.title, { color: text.primary ?? '#17191A', fontSize: fontSize.l ?? 18 }]}>{title}</Text>}
+                            {closable && (
+                                <Pressable onPress={onClose} hitSlop={8} accessibilityLabel="닫기">
+                                    <Text style={{ fontSize: fontSize.xl ?? 20, color: text.tertiary ?? '#757B80' }}>✕</Text>
+                                </Pressable>
+                            )}
+                        </View>
+                    )}
+                    <View style={[styles.content, { padding: padding.l ?? 20 }]}>{children}</View>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+};
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+    overlay: { flex: 1, justifyContent: 'flex-end' },
+    backdrop: { ...StyleSheet.absoluteFillObject },
+    sheet: { overflow: 'hidden' },
+    handleContainer: { alignItems: 'center', paddingTop: 10, paddingBottom: 6 },
+    handle: { width: 36, height: 4, borderRadius: 2 },
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 8 },
+    title: { fontWeight: '600', flex: 1 },
+    content: { flex: 1 },
+});
+
+export default BottomSheet;

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';