@ezpg/app-ui 0.1.0 → 0.3.0

package/src/blocks/brand-profile-card/brand-profile-card.tsx

@@ -15,7 +15,6 @@ export type BrandProfileCardProps = {
   industry: string;
   tagline?: string;
   logo?: ImageSourcePropType;
-  /** 브랜드 색 (hex) */
   colors?: readonly string[];
   keywords?: readonly string[];
   onEdit?: () => void;
@@ -36,7 +35,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** AI가 만든 브랜드 요약 */
 export function BrandProfileCard({
   name,
   industry,

package/src/blocks/bulk-ship-list/bulk-ship-list.tsx

@@ -0,0 +1,187 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { ChipGroup } from '../../components/chip-group/chip-group';
+import { Field } from '../../components/field/field';
+import { Text } from '../../components/text/text';
+import type { IconRenderProps } from '../../internal/icon';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ShipCarrier = { code: string; name: string };
+
+export type BulkShipRow = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  trackingNo: string;
+};
+
+export type BulkShipListProps = {
+  carriers: readonly ShipCarrier[];
+  carrier: string | null;
+  onCarrierChange: (code: string) => void;
+  rows: readonly BulkShipRow[];
+  onTrackingChange: (id: string, value: string) => void;
+  onScan?: (id: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type TrackingIssue = 'invalid' | 'duplicate';
+
+const TRACKING = /^[0-9-]{8,20}$/;
+const INVALID = '숫자와 -만 8~20자리로 입력해 주세요';
+const DUPLICATE = '같은 송장 번호가 다른 주문에도 있어요';
+const FIELD_HEIGHT = 52;
+
+export function trackingIssues(
+  rows: readonly BulkShipRow[]
+): Record<string, TrackingIssue> {
+  const key = (v: string) => v.trim().replace(/-/g, '');
+  const seen = new Map<string, number>();
+  for (const row of rows) {
+    const k = key(row.trackingNo);
+    if (k && TRACKING.test(row.trackingNo.trim())) {
+      seen.set(k, (seen.get(k) ?? 0) + 1);
+    }
+  }
+  const issues: Record<string, TrackingIssue> = {};
+  for (const row of rows) {
+    const value = row.trackingNo.trim();
+    if (!value) continue;
+    if (!TRACKING.test(value)) issues[row.id] = 'invalid';
+    else if ((seen.get(key(value)) ?? 0) > 1) issues[row.id] = 'duplicate';
+  }
+  return issues;
+}
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[5] },
+  carrier: { gap: t.space[2] },
+  list: { gap: t.space[4] },
+  row: { gap: t.space[2] },
+  input: { flexDirection: 'row', alignItems: 'flex-start', gap: t.space[2] },
+  field: { flex: 1 },
+  scan: {
+    width: FIELD_HEIGHT,
+    height: FIELD_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+}));
+
+const g = StyleSheet.create({ absolute: { position: 'absolute' } });
+
+function ScanGlyph({ color, size }: IconRenderProps) {
+  const stroke = Math.max(1.5, size / 12);
+  const arm = size * 0.3;
+  const corner = (v: 'top' | 'bottom', h: 'left' | 'right') => ({
+    position: 'absolute' as const,
+    width: arm,
+    height: arm,
+    borderColor: color,
+    [v]: 0,
+    [h]: 0,
+    [v === 'top' ? 'borderTopWidth' : 'borderBottomWidth']: stroke,
+    [h === 'left' ? 'borderLeftWidth' : 'borderRightWidth']: stroke,
+  });
+  return (
+    <View style={{ width: size, height: size }}>
+      <View style={corner('top', 'left')} />
+      <View style={corner('top', 'right')} />
+      <View style={corner('bottom', 'left')} />
+      <View style={corner('bottom', 'right')} />
+      <View
+        style={[
+          g.absolute,
+          {
+            left: size * 0.12,
+            right: size * 0.12,
+            top: (size - stroke) / 2,
+            height: stroke,
+            borderRadius: stroke,
+            backgroundColor: color,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+export function BulkShipList({
+  carriers,
+  carrier,
+  onCarrierChange,
+  rows,
+  onTrackingChange,
+  onScan,
+  style,
+}: BulkShipListProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const issues = trackingIssues(rows);
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.carrier}>
+        <Text weight="semibold" accessibilityRole="header">
+          택배사
+        </Text>
+        <ChipGroup
+          items={carriers.map((c) => ({ value: c.code, label: c.name }))}
+          value={carrier}
+          onValueChange={(code) => {
+            if (code !== null) onCarrierChange(code);
+          }}
+        />
+      </View>
+      <View style={s.list}>
+        {rows.map((row) => {
+          const issue = issues[row.id];
+          return (
+            <View key={row.id} style={s.row}>
+              <View>
+                <Text weight="semibold" numberOfLines={1}>
+                  {row.title}
+                </Text>
+                {row.subtitle ? (
+                  <Text variant="caption" tone="muted" numberOfLines={1}>
+                    {row.subtitle}
+                  </Text>
+                ) : null}
+              </View>
+              <View style={s.input}>
+                <Field
+                  style={s.field}
+                  value={row.trackingNo}
+                  onChangeText={(v) => onTrackingChange(row.id, v)}
+                  placeholder="송장 번호"
+                  keyboardType="number-pad"
+                  inputMode="numeric"
+                  autoCorrect={false}
+                  maxLength={20}
+                  accessibilityLabel={`${row.title} 송장 번호`}
+                  error={issue === 'invalid' ? INVALID : undefined}
+                  warning={issue === 'duplicate' ? DUPLICATE : undefined}
+                />
+                {onScan ? (
+                  <PressableBase
+                    accessibilityLabel={`${row.title} 송장 스캔`}
+                    onPress={() => onScan(row.id)}
+                    pressedStyle={s.pressed}
+                    style={s.scan}
+                  >
+                    <ScanGlyph color={t.colors.foreground} size={22} />
+                  </PressableBase>
+                ) : null}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/blocks/bulk-ship-list/index.ts

@@ -0,0 +1,8 @@
+export {
+  BulkShipList,
+  trackingIssues,
+  type BulkShipListProps,
+  type BulkShipRow,
+  type ShipCarrier,
+  type TrackingIssue,
+} from './bulk-ship-list';

package/src/blocks/claim-row/claim-row.tsx

@@ -1,27 +1,25 @@
 import { View, type StyleProp, type ViewStyle } from 'react-native';
-import { Button } from '../../components/button/button';
 import { formatPrice } from '../../components/price/price';
 import { Text } from '../../components/text/text';
 import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
-import { formatDeadline } from '../internal/format';
 
 export type ClaimType = 'cancel' | 'return' | 'exchange';
-export type ClaimStatus = 'requested' | 'collecting' | 'completed' | 'rejected';
+export type ClaimStatus =
+  | 'requested'
+  | 'collecting'
+  | 'collected'
+  | 'held'
+  | 'completed'
+  | 'rejected'
+  | 'withdrawn';
 
 export type ClaimRowProps = {
   type: ClaimType;
-  /** 기본 'requested' */
   status?: ClaimStatus;
-  /** 요청 금액 */
   amount: number;
-  /** 예) '상품 파손' */
-  reason: string;
-  /** 처리 기한까지 남은 영업일. 임박했을 때만 표시한다 */
-  dueInDays?: number;
-  /** 요청 상태일 때 [거부] [승인] 버튼 */
-  onReject?: () => void;
-  onApprove?: () => void;
+  reason?: string;
+  dueAt?: Date | string;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 };
@@ -31,45 +29,73 @@ const TYPE: Record<ClaimType, string> = {
   return: '반품',
   exchange: '교환',
 };
-const STATUS: Record<ClaimStatus, string> = {
+
+export const claimStatusLabel: Record<ClaimStatus, string> = {
   requested: '요청',
   collecting: '회수 중',
+  collected: '회수 완료',
+  held: '보류',
   completed: '완료',
-  rejected: '거부',
+  rejected: '거절',
+  withdrawn: '철회',
 };
 
+const OPEN: readonly ClaimStatus[] = [
+  'requested',
+  'collecting',
+  'collected',
+  'held',
+];
+
+const DAY = 86400000;
+
+function toDate(value: Date | string): Date {
+  if (typeof value !== 'string') return value;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  return m
+    ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+    : new Date(value);
+}
+
+function daysUntil(value: Date | string, now = new Date()): number | null {
+  const due = toDate(value);
+  if (Number.isNaN(due.getTime())) return null;
+  const a = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const b = new Date(due.getFullYear(), due.getMonth(), due.getDate());
+  return Math.round((b.getTime() - a.getTime()) / DAY);
+}
+
+function formatDday(days: number): string {
+  if (days < 0) return '기한 지남';
+  return days === 0 ? 'D-day' : `D-${days}`;
+}
+
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
   head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
-  deadline: { fontSize: 14, lineHeight: 20 },
-  action: { flex: 1 },
+  deadline: { fontSize: 14, lineHeight: 20, fontVariant: ['tabular-nums'] },
 }));
 
-/** 취소 · 반품 · 교환 요청 한 건 */
 export function ClaimRow({
   type,
   status = 'requested',
   amount,
   reason,
-  dueInDays,
-  onReject,
-  onApprove,
+  dueAt,
   onPress,
   style,
 }: ClaimRowProps) {
   const s = useStyles();
-  const title = `${TYPE[type]} ${STATUS[status]}`;
-  const open = status === 'requested' || status === 'collecting';
-  const deadline =
-    open && dueInDays !== undefined ? formatDeadline(dueInDays) : null;
-  const actionable = status === 'requested' && (onReject || onApprove);
+  const title = `${TYPE[type]} ${claimStatusLabel[status]}`;
+  const days =
+    OPEN.includes(status) && dueAt !== undefined ? daysUntil(dueAt) : null;
+  const deadline = days === null ? null : formatDday(days);
+  const label = [title, formatPrice(amount), reason, deadline]
+    .filter(Boolean)
+    .join(', ');
   return (
-    <Card
-      onPress={onPress}
-      accessibilityLabel={`${title}, ${formatPrice(amount)}, ${reason}${deadline ? `, ${deadline}` : ''}`}
-      style={style}
-    >
+    <Card onPress={onPress} accessibilityLabel={label} style={style}>
       <View style={s.row}>
         <Text weight="bold" style={[s.head, s.grow]} numberOfLines={1}>
           {title}
@@ -78,32 +104,19 @@ export function ClaimRow({
           {formatPrice(amount)}
         </Text>
       </View>
-      <View style={s.row}>
-        <Text style={s.grow} numberOfLines={1}>
-          {reason}
-        </Text>
-        {deadline ? (
-          <Text weight="bold" tone="destructive" style={s.deadline}>
-            {deadline}
-          </Text>
-        ) : null}
-      </View>
-      {actionable ? (
+      {reason || deadline ? (
         <View style={s.row}>
-          {onReject ? (
-            <Button
-              size="sm"
-              variant="outline"
-              style={s.action}
-              onPress={onReject}
+          <Text style={s.grow} numberOfLines={1}>
+            {reason ?? ''}
+          </Text>
+          {deadline ? (
+            <Text
+              weight="bold"
+              tone={days !== null && days <= 1 ? 'danger' : 'muted'}
+              style={s.deadline}
             >
-              거부
-            </Button>
-          ) : null}
-          {onApprove ? (
-            <Button size="sm" style={s.action} onPress={onApprove}>
-              승인
-            </Button>
+              {deadline}
+            </Text>
           ) : null}
         </View>
       ) : null}

package/src/blocks/claim-row/index.ts

@@ -1,5 +1,6 @@
 export {
   ClaimRow,
+  claimStatusLabel,
   type ClaimRowProps,
   type ClaimStatus,
   type ClaimType,

package/src/blocks/color-swatch-picker/color-swatch-picker.tsx

@@ -12,7 +12,6 @@ export type ColorSwatchPickerProps = {
   colors: readonly ColorSwatch[];
   value: string;
   onValueChange: (value: string) => void;
-  /** 'circle'은 색 점, 'card'는 버튼 모양 미리보기. 기본 'circle' */
   variant?: 'circle' | 'card';
   style?: StyleProp<ViewStyle>;
 };
@@ -60,7 +59,6 @@ const useStyles = makeStyles((t) => ({
   short: { width: '45%' },
 }));
 
-/** 브랜드 색 고르기 */
 export function ColorSwatchPicker({
   colors,
   value,

package/src/blocks/copy-variant-picker/copy-variant-picker.tsx

@@ -8,14 +8,11 @@ import { makeStyles } from '../../utils/styles';
 export type CopyVariant = { id: string; text: string; locked?: boolean };
 
 export type CopyVariantPickerProps = {
-  /** 예) '한 줄 소개' */
   label: string;
   variants: readonly CopyVariant[];
   selectedId: string | null;
   onSelect: (id: string) => void;
-  /** 잠그면 다시 만들어도 이 문구는 바뀌지 않는다 */
   onToggleLock?: (id: string) => void;
-  /** 다른 기기에서 먼저 수정했을 때(409) */
   conflict?: boolean;
   onReload?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -66,7 +63,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** AI가 만든 문구 후보 중 하나 고르기 */
 export function CopyVariantPicker({
   label,
   variants,
@@ -84,7 +80,7 @@ export function CopyVariantPicker({
       <Text weight="semibold">{label}</Text>
       {conflict ? (
         <View style={s.conflict} accessibilityLiveRegion="polite">
-          <Text tone="destructive">다른 기기에서 먼저 수정했어요.</Text>
+          <Text tone="danger">다른 기기에서 먼저 수정했어요.</Text>
           {onReload ? (
             <Button
               size="sm"

package/src/blocks/credit-wallet/credit-wallet.tsx

@@ -7,10 +7,9 @@ import { Card } from '../internal/card';
 
 export type CreditWalletProps = {
   balance: number;
-  /** 이번 달에 사라지는 크레딧. 0보다 크면 보여준다 */
   expiring?: number;
   todayUsed: number;
-  dailyLimit: number;
+  dailyLimit: number | null;
   onBuy?: () => void;
   onHistory?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -43,7 +42,6 @@ const useStyles = makeStyles((t) => ({
   action: { flex: 1 },
 }));
 
-/** 보유 크레딧과 오늘 생성 횟수 */
 export function CreditWallet({
   balance,
   expiring,
@@ -54,7 +52,12 @@ export function CreditWallet({
   style,
 }: CreditWalletProps) {
   const s = useStyles();
-  const ratio = dailyLimit > 0 ? Math.min(1, todayUsed / dailyLimit) : 1;
+  const ratio =
+    dailyLimit === null
+      ? 0
+      : dailyLimit > 0
+        ? Math.min(1, todayUsed / dailyLimit)
+        : 1;
   return (
     <View style={[s.root, style]}>
       <Card>
@@ -87,18 +90,21 @@ export function CreditWallet({
         <View style={s.row}>
           <Text weight="semibold">오늘 생성</Text>
           <Text>
-            <Text weight="bold">{todayUsed}</Text> / {dailyLimit}
+            <Text weight="bold">{todayUsed}</Text> /{' '}
+            {dailyLimit === null ? '무제한' : dailyLimit}
           </Text>
         </View>
-        <View
-          accessible
-          accessibilityRole="progressbar"
-          accessibilityLabel="오늘 생성"
-          accessibilityValue={{ min: 0, max: dailyLimit, now: todayUsed }}
-          style={s.meter}
-        >
-          <View style={[s.fill, { width: `${ratio * 100}%` }]} />
-        </View>
+        {dailyLimit === null ? null : (
+          <View
+            accessible
+            accessibilityRole="progressbar"
+            accessibilityLabel="오늘 생성"
+            accessibilityValue={{ min: 0, max: dailyLimit, now: todayUsed }}
+            style={s.meter}
+          >
+            <View style={[s.fill, { width: `${ratio * 100}%` }]} />
+          </View>
+        )}
       </Card>
     </View>
   );

package/src/blocks/generation-progress/generation-progress.tsx

@@ -0,0 +1,180 @@
+import {
+  ActivityIndicator,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { AlertGlyph, CheckGlyph } from '../../internal/glyphs';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type GenerationStatus = 'queued' | 'running' | 'done' | 'failed';
+
+export type GenerationStep = { key: string; label: string };
+
+export type GenerationProgressProps = {
+  steps: readonly GenerationStep[];
+  current: string | null;
+  status: GenerationStatus;
+  errorText?: string;
+  onRetry?: () => void;
+  creditNote?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+type StepState = 'done' | 'active' | 'waiting' | 'pending' | 'failed';
+
+const HEADLINE: Record<GenerationStatus, string> = {
+  queued: '접수했어요. 곧 시작해요',
+  running: '만들고 있어요',
+  done: '다 만들었어요',
+  failed: '만들지 못했어요',
+};
+
+const STATE_LABEL: Record<StepState, string> = {
+  done: '완료',
+  active: '진행 중',
+  waiting: '대기 중',
+  pending: '대기',
+  failed: '실패',
+};
+
+const DOT = 24;
+
+const useStyles = makeStyles((t) => ({
+  list: { gap: t.space[3] },
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
+  label: { flex: 1 },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  doneDot: { backgroundColor: t.colors.primary },
+  pendingDot: { borderWidth: 2, borderColor: t.colors.input },
+  waitingDot: { borderWidth: 2, borderColor: t.colors.primary },
+  start: { alignSelf: 'flex-start' },
+}));
+
+function stepState(
+  index: number,
+  currentIndex: number,
+  status: GenerationStatus
+): StepState {
+  if (status === 'done') return 'done';
+  if (currentIndex < 0) return 'pending';
+  if (index < currentIndex) return 'done';
+  if (index > currentIndex) return 'pending';
+  if (status === 'failed') return 'failed';
+  return status === 'running' ? 'active' : 'waiting';
+}
+
+export function GenerationProgress({
+  steps,
+  current,
+  status,
+  errorText,
+  onRetry,
+  creditNote,
+  style,
+}: GenerationProgressProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const currentIndex =
+    current === null ? -1 : steps.findIndex((step) => step.key === current);
+  const indicator = (state: StepState) => {
+    switch (state) {
+      case 'done':
+        return (
+          <View style={[s.dot, s.doneDot]}>
+            <CheckGlyph color={t.colors.primaryForeground} size={14} />
+          </View>
+        );
+      case 'active':
+        return (
+          <View style={s.dot}>
+            <ActivityIndicator size="small" color={t.colors.primary} />
+          </View>
+        );
+      case 'failed':
+        return (
+          <View style={s.dot}>
+            <AlertGlyph
+              filled
+              color={t.colors.danger}
+              onColor={t.colors.dangerForeground}
+              size={DOT}
+            />
+          </View>
+        );
+      case 'waiting':
+        return <View style={[s.dot, s.waitingDot]} />;
+      default:
+        return <View style={[s.dot, s.pendingDot]} />;
+    }
+  };
+  return (
+    <Card style={style}>
+      <Text
+        variant="bodyLg"
+        weight="bold"
+        accessibilityRole="header"
+        accessibilityLiveRegion="polite"
+      >
+        {HEADLINE[status]}
+      </Text>
+      <View style={s.list}>
+        {steps.map((step, i) => {
+          const state = stepState(i, currentIndex, status);
+          return (
+            <View
+              key={step.key}
+              accessible
+              accessibilityLabel={`${step.label}, ${STATE_LABEL[state]}`}
+              style={s.row}
+            >
+              {indicator(state)}
+              <Text
+                style={s.label}
+                tone={
+                  state === 'failed'
+                    ? 'danger'
+                    : state === 'pending'
+                      ? 'muted'
+                      : 'default'
+                }
+                weight={
+                  state === 'active' || state === 'failed'
+                    ? 'semibold'
+                    : undefined
+                }
+              >
+                {step.label}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+      {status === 'failed' && errorText ? (
+        <Text tone="danger" accessibilityLiveRegion="polite">
+          {errorText}
+        </Text>
+      ) : null}
+      {status === 'failed' && onRetry ? (
+        <Button variant="outline" onPress={onRetry} style={s.start}>
+          다시 시도
+        </Button>
+      ) : null}
+      {creditNote ? (
+        <Text variant="caption" tone="muted">
+          {creditNote}
+        </Text>
+      ) : null}
+    </Card>
+  );
+}

package/src/blocks/generation-progress/index.ts

@@ -0,0 +1,6 @@
+export {
+  GenerationProgress,
+  type GenerationProgressProps,
+  type GenerationStatus,
+  type GenerationStep,
+} from './generation-progress';