kintex/mobile/components/Banner.tsx
zio 6c9891c7e2 feat: mobile harness + design v2.1 (84 screens) + PLANNING v3.1 + deliverables + Stitch screens
- 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>
2026-07-11 23:31:45 +09:00

35 lines
1.2 KiB
TypeScript

/*
* 알림 배너 — degraded(서버 미구현/오프라인 폴백)·warning·error·info 공용.
*/
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, type } from '../theme';
type Tone = 'info' | 'warning' | 'error' | 'degraded';
const toneColor: Record<Tone, { border: string; bg: string; text: string }> = {
info: { border: colors.primary600, bg: colors.primary050, text: colors.primary700 },
warning: { border: colors.warning, bg: '#FFF7ED', text: colors.warning },
error: { border: colors.error, bg: '#FEF3F2', text: colors.error },
degraded: { border: colors.neutral500, bg: colors.neutral050, text: colors.neutral700 },
};
export function Banner({ tone = 'info', children }: { tone?: Tone; children: React.ReactNode }) {
const c = toneColor[tone];
return (
<View style={[styles.banner, { borderColor: c.border, backgroundColor: c.bg }]}>
<Text style={[styles.text, { color: c.text }]}>{children}</Text>
</View>
);
}
const styles = StyleSheet.create({
banner: {
borderWidth: 1,
borderRadius: radius.md,
paddingHorizontal: 12,
paddingVertical: 10,
},
text: { fontSize: type.body.fontSize, fontWeight: '500' },
});