zio
6c9891c7e2
- Harness: kintex-mobile-dev agent + kintex-mobile-orchestrator skill (WISE mobile ref, Stitch-first design rule, dual app targets B2B/B2C) - design.md v2.1: full 84-screen inventory (web 51 / admin 10 / public 8 / mobile 15) with Stitch prompts incl. ticketing (SCR-P7/P8, M14/M15) - PLANNING v3.1: unified account + split signup tracks (2FA required for staff, light signup/guest for visitors), one codebase / two app targets - Deliverables: dev plan (21s), user/operator/developer guides (17/14/15s), program spec (44s, 65 programs, 8 flowcharts), DA (DB design 14s + table spec xlsx 35 tables/299 cols) - Benchmark: ticketing-app-benchmark.md (7 apps) -> IMPLEMENTATION_BACKLOG Phase F (14 items) - Stitch: 23 generated screens saved (mobile 10, admin 6, web core 5, ticket 2) - mobile/: Expo scaffold (SDK 51, expo-router, secure store JWT) - frontend: SCR-13~17 QA fixes, icons.tsx, kintexEvents, V10 seed migration - ci/: KINTEX CI logo assets Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
/*
|
|
* 라벨 + 텍스트 입력 필드 — radius 4, 높이 48(터치 타깃).
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
type KeyboardTypeOptions,
|
|
type TextInputProps,
|
|
} from 'react-native';
|
|
import { colors, radius, touch, type } from '../theme';
|
|
|
|
interface Props {
|
|
label?: string;
|
|
value: string;
|
|
onChangeText: (v: string) => void;
|
|
placeholder?: string;
|
|
secureTextEntry?: boolean;
|
|
keyboardType?: KeyboardTypeOptions;
|
|
autoCapitalize?: TextInputProps['autoCapitalize'];
|
|
helperText?: string;
|
|
errorText?: string;
|
|
editable?: boolean;
|
|
}
|
|
|
|
export function Field({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
placeholder,
|
|
secureTextEntry,
|
|
keyboardType,
|
|
autoCapitalize = 'none',
|
|
helperText,
|
|
errorText,
|
|
editable = true,
|
|
}: Props) {
|
|
return (
|
|
<View style={styles.wrap}>
|
|
{label ? <Text style={styles.label}>{label}</Text> : null}
|
|
<TextInput
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.neutral500}
|
|
secureTextEntry={secureTextEntry}
|
|
keyboardType={keyboardType}
|
|
autoCapitalize={autoCapitalize}
|
|
editable={editable}
|
|
style={[
|
|
styles.input,
|
|
!!errorText && { borderColor: colors.error },
|
|
!editable && { backgroundColor: colors.neutral050 },
|
|
]}
|
|
/>
|
|
{errorText ? (
|
|
<Text style={styles.error}>{errorText}</Text>
|
|
) : helperText ? (
|
|
<Text style={styles.helper}>{helperText}</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrap: { gap: 6 },
|
|
label: { fontSize: type.body.fontSize, fontWeight: '600', color: colors.neutral700 },
|
|
input: {
|
|
minHeight: touch.min,
|
|
borderWidth: 1,
|
|
borderColor: colors.neutral200,
|
|
borderRadius: radius.sm,
|
|
paddingHorizontal: 12,
|
|
fontSize: type.body.fontSize,
|
|
color: colors.neutral900,
|
|
backgroundColor: colors.white,
|
|
},
|
|
helper: { fontSize: type.caption.fontSize, color: colors.neutral500 },
|
|
error: { fontSize: type.caption.fontSize, color: colors.error },
|
|
});
|