@ezpg/app-ui 0.2.0 → 0.4.0

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

@@ -1,3 +1,4 @@
+import { deadlineTone } from '../internal/format';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { formatPrice } from '../../components/price/price';
 import { Text } from '../../components/text/text';
@@ -73,8 +74,16 @@ function formatDday(days: number): string {
 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, fontVariant: ['tabular-nums'] },
+  head: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
+  deadline: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
 }));
 
 export function ClaimRow({
@@ -112,7 +121,7 @@ export function ClaimRow({
           {deadline ? (
             <Text
               weight="bold"
-              tone={days !== null && days <= 1 ? 'destructive' : 'muted'}
+              tone={days === null ? 'muted' : deadlineTone(days)}
               style={s.deadline}
             >
               {deadline}

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

@@ -54,7 +54,11 @@ const useStyles = makeStyles((t) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  line: { height: 6, borderRadius: 3, backgroundColor: t.colors.muted },
+  line: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.muted,
+  },
   long: { width: '70%' },
   short: { width: '45%' },
 }));

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

@@ -38,8 +38,8 @@ const useStyles = makeStyles((t) => ({
   radio: {
     width: 18,
     height: 18,
-    marginTop: 2,
-    borderRadius: 9,
+    marginTop: t.space[1],
+    borderRadius: t.radius.full,
     borderWidth: 2,
     borderColor: t.colors.border,
     alignItems: 'center',
@@ -49,7 +49,7 @@ const useStyles = makeStyles((t) => ({
   radioDot: {
     width: 8,
     height: 8,
-    borderRadius: 4,
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.primary,
   },
   body: { flex: 1, gap: t.space[2] },
@@ -80,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

@@ -26,7 +26,7 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    minHeight: 44,
+    minHeight: t.controlSize.sm,
     paddingHorizontal: t.space[3],
     borderRadius: t.radius.md,
     backgroundColor: `${t.colors.warning}24`,

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

@@ -106,8 +106,8 @@ export function GenerationProgress({
           <View style={s.dot}>
             <AlertGlyph
               filled
-              color={t.colors.destructive}
-              onColor={t.colors.destructiveForeground}
+              color={t.colors.danger}
+              onColor={t.colors.dangerForeground}
               size={DOT}
             />
           </View>
@@ -143,7 +143,7 @@ export function GenerationProgress({
                 style={s.label}
                 tone={
                   state === 'failed'
-                    ? 'destructive'
+                    ? 'danger'
                     : state === 'pending'
                       ? 'muted'
                       : 'default'
@@ -161,7 +161,7 @@ export function GenerationProgress({
         })}
       </View>
       {status === 'failed' && errorText ? (
-        <Text tone="destructive" accessibilityLiveRegion="polite">
+        <Text tone="danger" accessibilityLiveRegion="polite">
           {errorText}
         </Text>
       ) : null}

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

@@ -45,14 +45,18 @@ const useStyles = makeStyles((t) => ({
     borderRadius: RADIUS,
   },
   dim: { backgroundColor: `${t.colors.background}B3` },
-  light: { gap: 2, backgroundColor: `${t.colors.background}D9` },
-  failed: { fontSize: 12, lineHeight: 16, color: t.colors.destructive },
+  light: { gap: t.space[1], backgroundColor: `${t.colors.background}D9` },
+  failed: {
+    fontSize: t.typography.caption.fontSize,
+    lineHeight: t.typography.caption.lineHeight,
+    color: t.colors.danger,
+  },
   cover: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
-    paddingVertical: 2,
+    paddingVertical: t.space[1],
     borderBottomLeftRadius: RADIUS,
     borderBottomRightRadius: RADIUS,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
@@ -62,15 +66,15 @@ const useStyles = makeStyles((t) => ({
     position: 'absolute',
     top: 0,
     right: 0,
-    width: 44,
-    height: 44,
+    width: t.minTouchSize,
+    height: t.minTouchSize,
     alignItems: 'flex-end',
     padding: t.space[1],
   },
   removeDot: {
     width: 22,
     height: 22,
-    borderRadius: 11,
+    borderRadius: t.radius.full,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: t.colors.foreground,
@@ -79,13 +83,16 @@ const useStyles = makeStyles((t) => ({
     aspectRatio: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 2,
+    gap: t.space[1],
     borderRadius: RADIUS,
     borderWidth: 1,
     borderColor: t.colors.input,
     backgroundColor: t.colors.muted,
   },
-  count: { fontSize: 13, fontVariant: ['tabular-nums'] },
+  count: {
+    fontSize: t.typography.label.fontSize,
+    fontVariant: ['tabular-nums'],
+  },
 }));
 
 const g = StyleSheet.create({
@@ -248,7 +255,7 @@ export function ImageGrid({
                     onPress={() => onRetry?.(item.id)}
                     style={[s.fill, s.light]}
                   >
-                    <RetryGlyph color={t.colors.destructive} size={22} />
+                    <RetryGlyph color={t.colors.danger} size={22} />
                     <Text weight="bold" style={s.failed}>
                       실패
                     </Text>

package/src/blocks/internal/format.ts

@@ -13,6 +13,11 @@ export function changeRate(current: number, previous: number): number | null {
   return ((current - previous) / Math.abs(previous)) * 100;
 }
 
+export function deadlineTone(days: number): 'danger' | 'warning' | 'muted' {
+  if (days < 0) return 'danger';
+  return days === 0 ? 'warning' : 'muted';
+}
+
 export function formatDeadline(days: number): string | null {
   if (days < 0) return '기한 지남';
   return ['오늘 마감', '내일 마감', '모레 마감'][days] ?? null;

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

@@ -25,7 +25,11 @@ export type InvoiceRowProps = {
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
-  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
+  head: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
   action: { flex: 1 },
 }));
 
@@ -74,11 +78,11 @@ export function InvoiceRow({
       <View style={s.row}>
         <AlertGlyph
           filled
-          color={t.colors.destructive}
-          onColor={t.colors.destructiveForeground}
+          color={t.colors.danger}
+          onColor={t.colors.dangerForeground}
           size={t.iconSize.md}
         />
-        <Text weight="bold" tone="destructive" style={[s.head, s.grow]}>
+        <Text weight="bold" tone="danger" style={[s.head, s.grow]}>
           결제 실패
         </Text>
         <Text weight="bold" style={s.head}>

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

@@ -41,7 +41,7 @@ const useStyles = makeStyles((t) => ({
     right: t.space[2],
     width: 24,
     height: 24,
-    borderRadius: 12,
+    borderRadius: t.radius.lg,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: t.colors.primary,

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

@@ -47,12 +47,16 @@ const useStyles = makeStyles((t) => ({
     justifyContent: 'center',
     gap: t.space[2],
     paddingHorizontal: t.space[4],
-    borderRadius: 12,
+    borderRadius: t.radius.lg,
     borderWidth: 1,
     borderColor: 'transparent',
   },
   icon: { position: 'absolute', left: t.space[4] },
-  label: { fontSize: 15, fontWeight: '600', fontFamily: t.fontFamily },
+  label: {
+    fontSize: t.typography.body.fontSize,
+    fontWeight: '600',
+    fontFamily: t.fontFamily,
+  },
 }));
 
 export function OAuthButtons({

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

@@ -49,12 +49,12 @@ const useStyles = makeStyles((t) => ({
     width: 20,
     height: t.minTouchSize,
     justifyContent: 'center',
-    gap: 4,
+    gap: t.space[1],
   },
   bar: {
     height: 2,
-    marginHorizontal: 3,
-    borderRadius: 1,
+    marginHorizontal: t.space[1],
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.mutedForeground,
   },
 }));

package/src/blocks/order-card/index.ts

@@ -2,9 +2,13 @@ export {
   OrderCard,
   OrderSection,
   orderStatusLabel,
+  orderStatusText,
+  orderStatusTone,
   summarizeItems,
   type OrderAction,
   type OrderCardProps,
+  type OrderFulfillment,
+  type OrderStatusInput,
   type OrderItem,
   type OrderSectionProps,
   type OrderStatus,

package/src/blocks/order-card/order-card.tsx

@@ -1,3 +1,4 @@
+import type { StatusBadgeTone } from '../../components/status-badge/status-badge';
 import type { ReactNode } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { Button, type ButtonVariant } from '../../components/button/button';
@@ -7,7 +8,7 @@ import { ChevronGlyph } from '../../internal/glyphs';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
-import { formatDeadline } from '../internal/format';
+import { deadlineTone, formatDeadline } from '../internal/format';
 
 export type OrderStatus =
   | 'pending_payment'
@@ -21,13 +22,46 @@ export type OrderStatus =
 export const orderStatusLabel: Record<OrderStatus, string> = {
   pending_payment: '결제 대기',
   paid: '신규',
-  preparing: '배송 준비',
+  preparing: '상품 준비 중',
   shipped: '배송 중',
   delivered: '배송 완료',
   completed: '구매 확정',
-  canceled: '취소',
+  canceled: '주문 취소',
 };
 
+export type OrderFulfillment = 'ship' | 'pickup' | 'local' | 'visit' | 'none';
+
+export type OrderStatusInput = {
+  status: OrderStatus;
+  fulfillment?: OrderFulfillment;
+  readyAt?: string | null;
+  awaitingDeposit?: boolean;
+};
+
+export const orderStatusTone: Record<OrderStatus, StatusBadgeTone> = {
+  pending_payment: 'neutral',
+  paid: 'warning',
+  preparing: 'warning',
+  shipped: 'info',
+  delivered: 'success',
+  completed: 'neutral',
+  canceled: 'neutral',
+};
+
+export function orderStatusText({
+  status,
+  fulfillment = 'ship',
+  readyAt,
+  awaitingDeposit,
+}: OrderStatusInput): string {
+  if (status === 'pending_payment' && awaitingDeposit) return '입금 대기';
+  if (fulfillment === 'pickup') {
+    if (status === 'preparing' && readyAt) return '픽업 준비 완료';
+    if (status === 'delivered') return '수령 완료';
+  }
+  return orderStatusLabel[status];
+}
+
 export type OrderItem = { name: string; option?: string; quantity: number };
 
 export type OrderAction = {
@@ -51,9 +85,15 @@ export type OrderCardProps = {
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
-  title: { fontSize: 16, lineHeight: 24 },
+  title: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+  },
   amount: { fontVariant: ['tabular-nums'] },
-  deadline: { fontSize: 14, lineHeight: 20 },
+  deadline: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+  },
   action: { flex: 1 },
   compact: {
     flexDirection: 'row',
@@ -128,7 +168,11 @@ export function OrderCard({
         </Text>
       </View>
       {deadline ? (
-        <Text weight="bold" tone="destructive" style={s.deadline}>
+        <Text
+          weight={deadlineTone(dueInDays!) === 'muted' ? 'regular' : 'bold'}
+          tone={deadlineTone(dueInDays!)}
+          style={s.deadline}
+        >
           {deadline}
         </Text>
       ) : null}

package/src/blocks/plan-card/plan-card.tsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles((t) => ({
   },
   head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   name: { flex: 1 },
-  list: { gap: 6 },
+  list: { gap: t.space[2] },
   feature: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   change: {
     flexDirection: 'row',
@@ -112,7 +112,7 @@ export function PlanCard({
       </View>
       {alert ? (
         <Text
-          tone={notice ? 'muted' : 'destructive'}
+          tone={notice ? 'muted' : 'danger'}
           weight={notice ? 'semibold' : undefined}
         >
           {alert}
@@ -136,7 +136,7 @@ export function PlanCard({
       {!current && onSelect ? (
         <Button
           size="lg"
-          variant={recommended ? 'solid' : 'outline'}
+          variant={recommended ? 'primary' : 'outline'}
           onPress={onSelect}
         >
           {proratedAmount !== undefined && proratedAmount > 0

package/src/blocks/product-list-empty/product-list-empty.tsx

@@ -61,16 +61,23 @@ const useStyles = makeStyles((t) => ({
     position: 'absolute',
     top: t.space[3],
     left: t.space[3],
-    paddingHorizontal: 10,
+    paddingHorizontal: t.space[2],
     paddingVertical: t.space[1],
     borderRadius: t.radius.full,
     backgroundColor: t.colors.foreground,
   },
-  badgeLabel: { color: t.colors.background, fontSize: 14 },
+  badgeLabel: {
+    color: t.colors.background,
+    fontSize: t.typography.label.fontSize,
+  },
   body: { gap: t.space[1], padding: t.space[4] },
   actions: { flexDirection: 'row', gap: t.space[2], marginTop: t.space[3] },
-  edit: { flex: 1, height: 48 },
-  dismiss: { width: 48, height: 48, paddingHorizontal: 0 },
+  edit: { flex: 1, height: t.controlSize.md },
+  dismiss: {
+    width: t.controlSize.md,
+    height: t.controlSize.md,
+    paddingHorizontal: 0,
+  },
 }));
 
 export function ProductListEmpty({

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

@@ -29,40 +29,43 @@ export type HiddenReviewsRowProps = {
 };
 
 const useStyles = makeStyles((t) => ({
-  root: { gap: 10, paddingVertical: t.space[4] },
+  root: { gap: t.space[2], paddingVertical: t.space[4] },
   head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   stars: { letterSpacing: 1 },
-  author: { flexShrink: 1, fontSize: 14 },
+  author: { flexShrink: 1, fontSize: t.typography.label.fontSize },
   more: {
-    width: 44,
-    height: 44,
+    width: t.minTouchSize,
+    height: t.minTouchSize,
     marginVertical: -t.space[3],
     marginLeft: 'auto',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  dots: { flexDirection: 'row', gap: 3 },
-  dot: { width: 3.5, height: 3.5, borderRadius: 2 },
+  dots: { flexDirection: 'row', gap: t.space[1] },
+  dot: { width: 3.5, height: 3.5, borderRadius: t.radius.full },
   photos: { flexDirection: 'row', gap: t.space[2] },
   photo: { width: 72 },
   reply: {
     gap: t.space[1],
     marginLeft: t.space[3],
     paddingVertical: t.space[3],
-    paddingHorizontal: 14,
-    borderRadius: 10,
+    paddingHorizontal: t.space[4],
+    borderRadius: t.radius.lg,
     backgroundColor: t.colors.muted,
   },
-  replyTitle: { fontSize: 13, lineHeight: 18 },
+  replyTitle: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+  },
   replyButton: { alignSelf: 'flex-start' },
   hidden: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[2],
-    minHeight: 52,
-    paddingLeft: 14,
+    minHeight: t.controlSize.lg,
+    paddingLeft: t.space[4],
     paddingRight: t.space[2],
-    borderRadius: 10,
+    borderRadius: t.radius.lg,
     backgroundColor: t.colors.muted,
   },
   hiddenLabel: { flex: 1 },
@@ -184,18 +187,26 @@ export type ReviewSummaryProps = {
 const useSummaryStyles = makeStyles((t) => ({
   root: { flexDirection: 'row', alignItems: 'center', gap: t.space[5] },
   score: { alignItems: 'center', gap: t.space[1] },
-  average: { fontSize: 36, lineHeight: 40, fontVariant: ['tabular-nums'] },
+  average: {
+    fontSize: t.typography.display.fontSize,
+    lineHeight: t.typography.display.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
   bars: { flex: 1, gap: t.space[1] },
   bar: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   digit: { width: 8, fontVariant: ['tabular-nums'] },
   track: {
     flex: 1,
     height: 6,
-    borderRadius: 3,
+    borderRadius: t.radius.full,
     overflow: 'hidden',
     backgroundColor: t.colors.muted,
   },
-  fill: { height: 6, borderRadius: 3, backgroundColor: t.colors.warning },
+  fill: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.warning,
+  },
 }));
 
 export function ReviewSummary({

package/src/blocks/sales-chart/sales-chart.tsx

@@ -33,10 +33,10 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    minHeight: 44,
+    minHeight: t.controlSize.sm,
   },
   divided: { borderBottomWidth: 1, borderBottomColor: t.colors.border },
-  net: { minHeight: 56 },
+  net: { minHeight: t.listRow.oneLine },
   netValue: { flexDirection: 'row', alignItems: 'baseline', gap: t.space[2] },
   down: { color: t.colors.info },
 }));
@@ -92,7 +92,7 @@ export function SalesChart({
                 {rate !== null ? (
                   <Text
                     weight="bold"
-                    tone={up ? 'destructive' : 'default'}
+                    tone={up ? 'danger' : 'default'}
                     style={!up && s.down}
                     accessibilityLabel={`직전 기간보다 ${Math.abs(rate).toFixed(1)}% ${up ? '증가' : '감소'}`}
                   >

package/src/blocks/selection-bar/selection-bar.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((t) => ({
     backgroundColor: t.colors.background,
     boxShadow: t.shadow.md,
   },
-  info: { flex: 1, gap: 2 },
+  info: { flex: 1, gap: t.space[1] },
   count: { fontVariant: ['tabular-nums'] },
 }));
 

package/src/blocks/service-state-banner/service-state-banner.tsx

@@ -49,7 +49,7 @@ export function ServiceStateBanner({
   const severe =
     state === 'suspended' || state === 'closed' || state === 'stopped';
   const [bg, fg] = severe
-    ? [t.colors.destructive, t.colors.destructiveForeground]
+    ? [t.colors.danger, t.colors.dangerForeground]
     : [t.colors.warning, t.colors.warningForeground];
   return (
     <View

package/src/blocks/shipping-tracking-row/shipping-tracking-row.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((t) => ({
   dot: {
     width: 10,
     height: 10,
-    borderRadius: 5,
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.border,
   },
   on: { backgroundColor: t.colors.primary },

package/src/blocks/site-preview-frame/site-preview-frame.tsx

@@ -45,7 +45,7 @@ const useStyles = makeStyles((t) => ({
   bar: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
+    gap: t.space[2],
     minHeight: 60,
     paddingLeft: t.space[4],
     paddingRight: t.space[2],

package/src/blocks/stat-card/stat-card.tsx

@@ -57,7 +57,7 @@ export function StatCard({
             {hasChange ? (
               <Text
                 weight="bold"
-                tone={flat ? 'muted' : up ? 'destructive' : 'default'}
+                tone={flat ? 'muted' : up ? 'danger' : 'default'}
                 style={!flat && !up && s.down}
               >
                 {flat ? '변동 없음' : `${up ? '▲' : '▼'} ${rate}`}