@ezpg/app-ui 0.1.0 → 0.2.0

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.destructive}
+              onColor={t.colors.destructiveForeground}
+              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'
+                    ? 'destructive'
+                    : state === 'pending'
+                      ? 'muted'
+                      : 'default'
+                }
+                weight={
+                  state === 'active' || state === 'failed'
+                    ? 'semibold'
+                    : undefined
+                }
+              >
+                {step.label}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+      {status === 'failed' && errorText ? (
+        <Text tone="destructive" 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';

package/src/blocks/image-grid/image-grid.tsx

@@ -21,16 +21,11 @@ export type GridImage = {
 
 export type ImageGridProps = {
   images: readonly GridImage[];
-  /** 순서가 바뀌면. 첫 장이 대표 사진 */
   onImagesChange: (images: GridImage[]) => void;
-  /** 넘기면 첫 칸에 추가 버튼 */
   onAdd?: () => void;
   onRemove?: (id: string) => void;
-  /** 업로드 실패한 사진 다시 올리기 */
   onRetry?: (id: string) => void;
-  /** 기본 10 */
   max?: number;
-  /** 기본 4 */
   columns?: number;
   style?: StyleProp<ViewStyle>;
 };
@@ -49,8 +44,9 @@ const useStyles = makeStyles((t) => ({
     justifyContent: 'center',
     borderRadius: RADIUS,
   },
-  dim: { backgroundColor: 'rgba(0, 0, 0, 0.45)' },
-  light: { backgroundColor: 'rgba(255, 255, 255, 0.7)' },
+  dim: { backgroundColor: `${t.colors.background}B3` },
+  light: { gap: 2, backgroundColor: `${t.colors.background}D9` },
+  failed: { fontSize: 12, lineHeight: 16, color: t.colors.destructive },
   cover: {
     position: 'absolute',
     left: 0,
@@ -77,7 +73,7 @@ const useStyles = makeStyles((t) => ({
     borderRadius: 11,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#262626',
+    backgroundColor: t.colors.foreground,
   },
   add: {
     aspectRatio: 1,
@@ -100,7 +96,6 @@ const g = StyleSheet.create({
   head: { position: 'absolute' },
 });
 
-/** 카메라 모양. svg 없이 테두리로 그린다 */
 function CameraGlyph({ color, size }: { color: string; size: number }) {
   const stroke = Math.max(1.5, size / 14);
   const line = { borderWidth: stroke, borderColor: color };
@@ -145,7 +140,6 @@ function CameraGlyph({ color, size }: { color: string; size: number }) {
   );
 }
 
-/** 다시 시도 화살표. 끊긴 원 + 화살촉 */
 function RetryGlyph({ color, size }: { color: string; size: number }) {
   const stroke = Math.max(2, size / 11);
   const ring = size * 0.76;
@@ -181,7 +175,6 @@ function RetryGlyph({ color, size }: { color: string; size: number }) {
   );
 }
 
-/** 상품 사진 올리기 · 순서 바꾸기. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
 export function ImageGrid({
   images,
   onImagesChange,
@@ -246,7 +239,7 @@ export function ImageGrid({
                 ) : null}
                 {item.status === 'uploading' ? (
                   <View style={[s.fill, s.dim]}>
-                    <ActivityIndicator color="#ffffff" />
+                    <ActivityIndicator color={t.colors.foreground} />
                   </View>
                 ) : item.status === 'failed' ? (
                   <PressableBase
@@ -255,7 +248,10 @@ export function ImageGrid({
                     onPress={() => onRetry?.(item.id)}
                     style={[s.fill, s.light]}
                   >
-                    <RetryGlyph color={t.colors.destructive} size={26} />
+                    <RetryGlyph color={t.colors.destructive} size={22} />
+                    <Text weight="bold" style={s.failed}>
+                      실패
+                    </Text>
                   </PressableBase>
                 ) : null}
                 {onRemove && item.status !== 'uploading' ? (
@@ -265,7 +261,7 @@ export function ImageGrid({
                     style={s.remove}
                   >
                     <View style={s.removeDot}>
-                      <CloseGlyph color="#ffffff" size={12} />
+                      <CloseGlyph color={t.colors.background} size={12} />
                     </View>
                   </PressableBase>
                 ) : null}

package/src/blocks/index.tsx

@@ -1,8 +1,10 @@
 export * from './brand-profile-card';
+export * from './bulk-ship-list';
 export * from './claim-row';
 export * from './color-swatch-picker';
 export * from './copy-variant-picker';
 export * from './credit-wallet';
+export * from './generation-progress';
 export * from './invoice-row';
 export * from './logo-candidate-grid';
 export * from './oauth-buttons';
@@ -10,6 +12,7 @@ export * from './order-card';
 export * from './plan-card';
 export * from './product-list-empty';
 export * from './review-row';
+export * from './selection-bar';
 export * from './service-state-banner';
 export * from './shipping-tracking-row';
 export * from './site-preview-frame';

package/src/blocks/internal/card.tsx

@@ -1,8 +1,12 @@
 import type { ReactNode } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { CheckGlyph } from '../../internal/glyphs';
 import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
+const MARK = 22;
+
 const useStyles = makeStyles((t) => ({
   card: {
     gap: t.space[3],
@@ -13,30 +17,70 @@ const useStyles = makeStyles((t) => ({
     backgroundColor: t.colors.background,
   },
   pressed: { backgroundColor: t.colors.muted },
+  selected: {
+    borderWidth: 2,
+    padding: t.space[4] - 1,
+    paddingRight: MARK + t.space[3],
+    borderColor: t.colors.primary,
+  },
+  mark: {
+    position: 'absolute',
+    top: t.space[2],
+    right: t.space[2],
+    width: MARK,
+    height: MARK,
+    borderRadius: MARK / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: t.colors.primary,
+  },
 }));
 
-/** blocks 공용 카드 틀. onPress가 있으면 누를 수 있다 */
 export function Card({
   children,
   onPress,
+  onLongPress,
+  selected,
   accessibilityLabel,
   style,
 }: {
   children: ReactNode;
   onPress?: () => void;
+  onLongPress?: () => void;
+  selected?: boolean;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
 }) {
+  const t = useTheme();
   const s = useStyles();
-  if (!onPress) return <View style={[s.card, style]}>{children}</View>;
+  const frame = [s.card, selected && s.selected, style];
+  const mark = selected ? (
+    <View style={s.mark} testID="card-selected-mark">
+      <CheckGlyph color={t.colors.primaryForeground} size={14} />
+    </View>
+  ) : null;
+  if (!onPress && !onLongPress) {
+    return (
+      <View
+        style={frame}
+        accessibilityState={selected === undefined ? undefined : { selected }}
+      >
+        {children}
+        {mark}
+      </View>
+    );
+  }
   return (
     <PressableBase
       onPress={onPress}
+      onLongPress={onLongPress}
       accessibilityLabel={accessibilityLabel}
+      accessibilityState={selected === undefined ? undefined : { selected }}
       pressedStyle={s.pressed}
-      style={[s.card, style]}
+      style={frame}
     >
       {children}
+      {mark}
     </PressableBase>
   );
 }

package/src/blocks/internal/format.ts

@@ -1,6 +1,5 @@
 import { formatPrice } from '../../components/price/price';
 
-/** 420000 → '42만', 12345 → '1.2만', 9000 → '9,000' */
 export function formatManwon(value: number): string {
   const abs = Math.abs(value);
   if (abs < 10000) return formatPrice(value, '');
@@ -9,13 +8,11 @@ export function formatManwon(value: number): string {
   return `${Number(man.toFixed(digits))}만`;
 }
 
-/** 전기 대비 증감률(%). 이전 값이 0이면 null */
 export function changeRate(current: number, previous: number): number | null {
   if (previous === 0) return null;
   return ((current - previous) / Math.abs(previous)) * 100;
 }
 
-/** 마감이 임박했을 때만 문구를 돌려준다. 0 → '오늘 마감', 1 → '내일 마감', 2 → '모레 마감', 그 밖 null */
 export function formatDeadline(days: number): string | null {
   if (days < 0) return '기한 지남';
   return ['오늘 마감', '내일 마감', '모레 마감'][days] ?? null;

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

@@ -11,18 +11,12 @@ import { Card } from '../internal/card';
 export type InvoiceStatus = 'paid' | 'failed' | 'refunded';
 
 export type InvoiceRowProps = {
-  /** 예) '베이직 · 10월' */
   title: string;
   amount: number;
-  /** 기본 'paid' */
   status?: InvoiceStatus;
-  /** 환불된 금액. 없으면 전액 환불 */
   refundedAmount?: number;
-  /** 실패일 때 [결제수단 변경] */
   onChangePaymentMethod?: () => void;
-  /** 실패일 때 [다시 결제] */
   onRetry?: () => void;
-  /** 다시 결제 진행 중 */
   retrying?: boolean;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -35,7 +29,6 @@ const useStyles = makeStyles((t) => ({
   action: { flex: 1 },
 }));
 
-/** 결제 내역 한 건. 실패한 결제는 해결 버튼이 있는 카드로 보여준다 */
 export function InvoiceRow({
   title,
   amount,

package/src/blocks/logo-candidate-grid/logo-candidate-grid.tsx

@@ -22,7 +22,6 @@ export type LogoCandidateGridProps = {
   candidates: readonly LogoCandidate[];
   selectedId: string | null;
   onSelect: (id: string) => void;
-  /** 실패한 후보 다시 만들기 */
   onRetry?: (id: string) => void;
   style?: StyleProp<ViewStyle>;
 };
@@ -58,7 +57,6 @@ const useStyles = makeStyles((t) => ({
   retry: { paddingHorizontal: t.space[4] },
 }));
 
-/** AI가 만든 로고 후보 고르기 */
 export function LogoCandidateGrid({
   candidates,
   selectedId,

package/src/blocks/oauth-buttons/oauth-buttons.tsx

@@ -15,19 +15,12 @@ export type OAuthProvider = 'kakao' | 'naver' | 'google' | 'apple';
 export type OAuthButtonsProps = {
   providers: readonly OAuthProvider[];
   onPress: (provider: OAuthProvider) => void;
-  /**
-   * 각 사 공식 로고. 로고는 상표라 패키지에 넣지 않는다.
-   * 각 사 브랜드 가이드의 에셋을 앱에서 넘긴다.
-   */
   icons?: Partial<Record<OAuthProvider, ReactNode>>;
-  /** 진행 중인 공급자 */
   loading?: OAuthProvider | null;
-  /** 문구 바꾸기 */
   labels?: Partial<Record<OAuthProvider, string>>;
   style?: StyleProp<ViewStyle>;
 };
 
-// 각 사 브랜드 가이드의 지정 색. 테마 토큰을 따르지 않는다.
 const BRAND: Record<
   OAuthProvider,
   { bg: string; fg: string; border?: string; label: string }
@@ -62,7 +55,6 @@ const useStyles = makeStyles((t) => ({
   label: { fontSize: 15, fontWeight: '600', fontFamily: t.fontFamily },
 }));
 
-/** 소셜 로그인 버튼 묶음. Apple은 iOS에서만 보인다 */
 export function OAuthButtons({
   providers,
   onPress,

package/src/blocks/option-editor/option-editor.tsx

@@ -11,16 +11,15 @@ import { SortableList } from '../../sortable/sortable-list';
 export type ProductOption = {
   id: string;
   name: string;
-  /** 기본 가격에 더하는 금액 */
   priceDelta: number;
-  /** false면 판매 중지(품절) */
   active: boolean;
+  note?: string;
 };
 
 export type OptionEditorProps = {
   options: readonly ProductOption[];
   onOptionsChange: (options: ProductOption[]) => void;
-  /** 옵션 눌러 수정 (앱에서 Sheet 등으로) */
+  onActiveChange?: (id: string, active: boolean) => void;
   onEdit?: (id: string) => void;
   onAdd?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -44,7 +43,7 @@ const useStyles = makeStyles((t) => ({
   },
   separator: { borderTopWidth: 1, borderTopColor: t.colors.border },
   pressed: { backgroundColor: t.colors.muted },
-  name: { flex: 1 },
+  body: { flex: 1, paddingVertical: t.space[2] },
   price: { fontVariant: ['tabular-nums'] },
   grip: {
     width: 20,
@@ -60,17 +59,25 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** 상품 옵션(1단) 목록. 손잡이로 순서를 바꾼다. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
+function formatPriceDelta(delta: number): string {
+  return delta > 0 ? `+${formatPrice(delta)}` : formatPrice(delta);
+}
+
 export function OptionEditor({
   options,
   onOptionsChange,
+  onActiveChange,
   onEdit,
   onAdd,
   style,
 }: OptionEditorProps) {
   const s = useStyles();
   const setActive = (id: string, active: boolean) =>
-    onOptionsChange(options.map((o) => (o.id === id ? { ...o, active } : o)));
+    onActiveChange
+      ? onActiveChange(id, active)
+      : onOptionsChange(
+          options.map((o) => (o.id === id ? { ...o, active } : o))
+        );
   return (
     <View style={[s.root, style]}>
       <View style={s.list}>
@@ -96,12 +103,19 @@ export function OptionEditor({
                     <View style={s.bar} />
                   </View>
                 </SortableHandle>
-                <Text tone={tone} style={s.name} numberOfLines={1}>
-                  {item.name}
-                </Text>
+                <View style={s.body}>
+                  <Text tone={tone} numberOfLines={1}>
+                    {item.name}
+                  </Text>
+                  {item.note ? (
+                    <Text variant="caption" tone="muted" numberOfLines={2}>
+                      {item.note}
+                    </Text>
+                  ) : null}
+                </View>
                 {item.priceDelta ? (
                   <Text tone={tone} style={s.price}>
-                    +{formatPrice(item.priceDelta)}
+                    {formatPriceDelta(item.priceDelta)}
                   </Text>
                 ) : null}
                 <Switch