@ezpg/app-ui 0.1.0 → 0.3.0

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

@@ -14,13 +14,9 @@ export type SalesPeriod = 'today' | 'week' | 'month';
 export type SalesChartProps = {
   period: SalesPeriod;
   onPeriodChange: (period: SalesPeriod) => void;
-  /** 순매출 (환불 차감 후) */
   total: number;
-  /** 직전 같은 기간 순매출 */
   previousTotal?: number;
-  /** 기간 중 환불 합계 */
   refundTotal?: number;
-  /** 추이 차트. 두 점 이상이면 그린다 */
   data?: readonly ChartDatum[];
   loading?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -45,7 +41,6 @@ const useStyles = makeStyles((t) => ({
   down: { color: t.colors.info },
 }));
 
-/** 기간별 총매출 · 환불 · 순매출 */
 export function SalesChart({
   period,
   onPeriodChange,
@@ -97,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/index.ts

@@ -0,0 +1 @@
+export { SelectionBar, type SelectionBarProps } from './selection-bar';

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

@@ -0,0 +1,63 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+
+export type SelectionBarProps = {
+  count: number;
+  max?: number;
+  actionLabel: string;
+  onAction: () => void;
+  onClear: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    paddingVertical: t.space[3],
+    paddingHorizontal: t.space[4],
+    borderTopWidth: 1,
+    borderTopColor: t.colors.border,
+    backgroundColor: t.colors.background,
+    boxShadow: t.shadow.md,
+  },
+  info: { flex: 1, gap: 2 },
+  count: { fontVariant: ['tabular-nums'] },
+}));
+
+export function SelectionBar({
+  count,
+  max,
+  actionLabel,
+  onAction,
+  onClear,
+  disabled,
+  style,
+}: SelectionBarProps) {
+  const s = useStyles();
+  const full = max !== undefined && count >= max;
+  return (
+    <View accessibilityRole="toolbar" style={[s.root, style]}>
+      <View style={s.info} accessibilityLiveRegion="polite">
+        <Text weight="bold" style={s.count} numberOfLines={1}>
+          {count}건 선택
+        </Text>
+        {full ? (
+          <Text variant="caption" tone="muted" numberOfLines={2}>
+            최대 {max}건까지 선택할 수 있어요
+          </Text>
+        ) : null}
+      </View>
+      <Button variant="ghost" size="sm" onPress={onClear}>
+        선택 해제
+      </Button>
+      <Button size="sm" onPress={onAction} disabled={disabled || count === 0}>
+        {actionLabel}
+      </Button>
+    </View>
+  );
+}

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

@@ -4,12 +4,13 @@ import { Text } from '../../components/text/text';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type ServiceState = 'paymentFailed' | 'grace' | 'suspended' | 'closed';
+export type ServiceState =
+  'paymentFailed' | 'grace' | 'suspended' | 'closed' | 'stopped';
 
 export type ServiceStateBannerProps = {
   state: ServiceState;
-  /** 유예 남은 일수 (grace) */
   daysLeft?: number;
+  reason?: string;
   actionLabel?: string;
   onAction?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -25,6 +26,8 @@ function title(state: ServiceState, daysLeft?: number) {
       return '사이트가 멈췄어요';
     case 'closed':
       return '해지된 사이트예요';
+    case 'stopped':
+      return '운영 정책에 따라 판매가 중지됐어요';
   }
 }
 
@@ -33,19 +36,20 @@ const useStyles = makeStyles((t) => ({
   start: { alignSelf: 'flex-start' },
 }));
 
-/** 결제 실패 · 유예 · 정지 · 해지 상태 안내 */
 export function ServiceStateBanner({
   state,
   daysLeft,
+  reason,
   actionLabel,
   onAction,
   style,
 }: ServiceStateBannerProps) {
   const t = useTheme();
   const s = useStyles();
-  const severe = state === 'suspended' || state === 'closed';
+  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
@@ -55,10 +59,17 @@ export function ServiceStateBanner({
       <Text weight="bold" style={{ color: fg }}>
         {title(state, daysLeft)}
       </Text>
+      {state === 'stopped' && reason ? (
+        <Text style={{ color: fg }}>사유: {reason}</Text>
+      ) : null}
       {onAction ? (
         <Button size="sm" variant="outline" onPress={onAction} style={s.start}>
           {actionLabel ??
-            (state === 'closed' ? '다시 시작하기' : '결제 수단 확인')}
+            (state === 'closed'
+              ? '다시 시작하기'
+              : state === 'stopped'
+                ? '문의하기'
+                : '결제 수단 확인')}
         </Button>
       ) : null}
     </View>

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

@@ -46,7 +46,6 @@ const useStyles = makeStyles((t) => ({
   lineOn: { backgroundColor: t.colors.primary },
 }));
 
-/** 송장과 배송 단계 */
 export function ShippingTrackingRow({
   carrier,
   trackingNumber,

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

@@ -13,14 +13,13 @@ import { makeStyles } from '../../utils/styles';
 export type SitePublishStatus = 'draft' | 'published' | 'unpublishedChanges';
 
 export type SitePreviewFrameProps = {
-  /** 사이트 화면 이미지 */
   screenshot?: ImageSourcePropType;
-  /** 실제 사이트를 띄울 때(WebView 등). screenshot보다 우선 */
   renderPreview?: () => ReactNode;
   status: SitePublishStatus;
   onPublish?: () => void;
   publishing?: boolean;
-  /** 직전 게시본으로 되돌리기 */
+  publishDisabled?: boolean;
+  blockedReason?: string;
   onRevert?: () => void;
   style?: StyleProp<ViewStyle>;
 };
@@ -62,15 +61,17 @@ const useStyles = makeStyles((t) => ({
   barLabel: { flex: 1 },
   barButton: { paddingHorizontal: t.space[4] },
   actions: { gap: t.space[2] },
+  reason: { textAlign: 'center' },
 }));
 
-/** 만든 사이트 미리보기와 게시 */
 export function SitePreviewFrame({
   screenshot,
   renderPreview,
   status,
   onPublish,
   publishing,
+  publishDisabled,
+  blockedReason,
   onRevert,
   style,
 }: SitePreviewFrameProps) {
@@ -97,6 +98,7 @@ export function SitePreviewFrame({
               size="sm"
               onPress={onPublish}
               loading={publishing}
+              disabled={publishDisabled}
               style={s.barButton}
             >
               게시
@@ -106,10 +108,23 @@ export function SitePreviewFrame({
       ) : null}
       <View style={s.actions}>
         {onPublish && status === 'draft' ? (
-          <Button size="lg" onPress={onPublish} loading={publishing}>
+          <Button
+            size="lg"
+            onPress={onPublish}
+            loading={publishing}
+            disabled={publishDisabled}
+          >
             사이트 게시하기
           </Button>
         ) : null}
+        {publishDisabled &&
+        blockedReason &&
+        onPublish &&
+        status !== 'published' ? (
+          <Text tone="muted" accessibilityLiveRegion="polite" style={s.reason}>
+            {blockedReason}
+          </Text>
+        ) : null}
         {onRevert && status !== 'draft' ? (
           <Button variant="ghost" onPress={onRevert}>
             직전 게시본으로 되돌리기

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

@@ -5,13 +5,9 @@ import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
 
 export type StatCardProps = {
-  /** 예) '오늘 매출' */
   label: string;
-  /** 이미 포맷된 값. 예) '1,234,000원', '42건' */
   value: string;
-  /** 직전 기간 대비 증감률(%). 오르면 빨강, 내리면 파랑 */
   change?: number | null;
-  /** 오른쪽 작은 차트. 예) <Sparkline /> (@ezpg/app-ui/charts) */
   chart?: ReactNode;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -29,7 +25,6 @@ const useStyles = makeStyles((t) => ({
   down: { color: t.colors.info },
 }));
 
-/** 핵심 숫자 하나와 증감 */
 export function StatCard({
   label,
   value,
@@ -62,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}`}

package/src/blocks/step-screen/step-screen.tsx

@@ -16,17 +16,12 @@ export type StepAction = {
 
 export type StepScreenProps = {
   title: string;
-  /** 넘기면 상단에 진행 막대 */
   total?: number;
-  /** 0부터 */
   current?: number;
-  /** 넘기면 상단에 이전 버튼 */
   onBack?: () => void;
-  /** 이전 버튼의 접근성 라벨. 기본 '이전' */
   backLabel?: string;
   primaryAction: StepAction;
   secondaryAction?: StepAction;
-  /** 하단 안전 영역 높이 */
   bottomInset?: number;
   children?: ReactNode;
 };
@@ -63,7 +58,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** 온보딩 한 단계의 화면 틀: 이전 · 진행 막대 · 제목 · 내용 · 하단 버튼 */
 export function StepScreen({
   title,
   total,

package/src/blocks/supply-item-card/supply-item-card.tsx

@@ -13,24 +13,19 @@ import { PressableBase } from '../../internal/pressable-base';
 import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
 
-/** 예) { id: 'm', label: '중 20×25cm' } */
 export type SupplyOption = { id: string; label: string };
 
-/** 묶음 수량과 그 가격 */
 export type SupplyQuantity = { quantity: number; price: number };
 
 export type SupplyItemCardProps = {
   name: string;
   image: ImageSourcePropType;
-  /** 2개 이상이면 칩으로 고른다 */
   options?: readonly SupplyOption[];
   selectedOptionId?: string | null;
   onSelectOption?: (id: string) => void;
-  /** 선택한 옵션의 수량별 가격 */
   quantities: readonly SupplyQuantity[];
   selectedQuantity: number | null;
   onSelectQuantity: (quantity: number) => void;
-  /** 기본 '장' */
   unit?: string;
   onAdd?: () => void;
   style?: StyleProp<ViewStyle>;
@@ -75,7 +70,6 @@ const useStyles = makeStyles((t) => ({
   quantity: { flex: 1 },
 }));
 
-/** 로고를 넣어 주문하는 공급 품목. 사이즈 · 수량을 고르고 담는다 */
 export function SupplyItemCard({
   name,
   image,

package/src/charts/line-chart.tsx

@@ -16,15 +16,10 @@ export type ChartDatum = { label: string; value: number };
 
 export type LineChartProps = {
   data: readonly ChartDatum[];
-  /** 기본 200 */
   height?: number;
-  /** y축 라벨. 기본은 천 단위 쉼표 */
   formatY?: (value: number) => string;
-  /** x축 라벨. 기본은 label 그대로 */
   formatX?: (label: string, index: number) => string;
-  /** 점을 눌렀을 때. 넘기면 각 구간이 눌린다 */
   onPointPress?: (datum: ChartDatum, index: number) => void;
-  /** 기본은 최고 · 최저 · 마지막 값 요약 */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -32,6 +27,16 @@ export type LineChartProps = {
 const defaultFormat = (v: number) => formatPrice(v, '');
 const PAD = { top: 8, right: 12, bottom: 24, gap: 8 };
 const FONT_SIZE = 11;
+const WIDE = /[\u1100-\u11ff\u3000-\u9fff\uac00-\ud7af\uff00-\uffef]/;
+const NARROW = /[,.:'\s]/;
+
+export function estimateLabelWidth(label: string, fontSize = FONT_SIZE) {
+  let em = 0;
+  for (const ch of label) {
+    em += WIDE.test(ch) ? 1 : NARROW.test(ch) ? 0.34 : 0.64;
+  }
+  return Math.ceil(em * fontSize) + 2;
+}
 
 export function LineChart({
   data,
@@ -48,7 +53,7 @@ export function LineChart({
   const ticks = niceTicks(Math.min(0, ...values), Math.max(0, ...values));
   const yLabels = ticks.map(formatY);
   const left =
-    Math.max(...yLabels.map((l) => l.length)) * FONT_SIZE * 0.62 + PAD.gap;
+    Math.max(0, ...yLabels.map((l) => estimateLabelWidth(l))) + PAD.gap;
   const plot = {
     x0: left,
     x1: width - PAD.right,

package/src/charts/scale.ts

@@ -2,7 +2,6 @@ export type Point = { x: number; y: number };
 
 const STEPS = [1, 2, 2.5, 5, 10];
 
-/** 보기 좋은 눈금. 값이 하나뿐이거나 모두 같아도 범위를 만든다 */
 export function niceTicks(min: number, max: number, count = 4): number[] {
   let lo = Math.min(min, max);
   let hi = Math.max(min, max);
@@ -24,7 +23,6 @@ export function niceTicks(min: number, max: number, count = 4): number[] {
   return ticks;
 }
 
-/** [d0, d1] → [r0, r1] 선형 변환. 범위 폭이 0이면 가운데로 */
 export function linearScale(domain: [number, number], range: [number, number]) {
   const [d0, d1] = domain;
   const [r0, r1] = range;
@@ -43,7 +41,6 @@ export function areaPath(points: Point[], baseline: number): string {
   return `${linePath(points)} L${last.x},${baseline} L${first.x},${baseline} Z`;
 }
 
-/** 라벨이 겹치지 않게 최대 maxLabels개만 남길 간격 */
 export function labelStep(count: number, maxLabels: number): number {
   return Math.max(1, Math.ceil(count / Math.max(1, maxLabels)));
 }

package/src/charts/sparkline.tsx

@@ -7,17 +7,13 @@ import { summarize } from './summary';
 
 export type SparklineProps = {
   data: readonly number[];
-  /** 기본 80 */
   width?: number;
-  /** 기본 24 */
   height?: number;
-  /** 기본 primary */
   color?: string;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 축 없는 작은 추세선 */
 export function Sparkline({
   data,
   width = 80,

package/src/charts/summary.ts

@@ -1,4 +1,3 @@
-/** 차트 전체를 한 문장으로. 스크린 리더용 */
 export function summarize(
   values: number[],
   format: (v: number) => string

package/src/components/button/button.tsx

@@ -9,18 +9,15 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type ButtonVariant =
-  'solid' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+  'solid' | 'secondary' | 'outline' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export type ButtonProps = Omit<
   PressableBaseProps,
   'children' | 'touchHeight'
 > & {
-  /** 기본 'solid' */
   variant?: ButtonVariant;
-  /** 기본 'md' */
   size?: ButtonSize;
-  /** 스피너를 보여주고 누를 수 없게 한다 */
   loading?: boolean;
   leftIcon?: IconSlot;
   rightIcon?: IconSlot;
@@ -56,7 +53,7 @@ const useStyles = makeStyles((t) => ({
     borderColor: t.colors.input,
   },
   ghost: { backgroundColor: 'transparent' },
-  destructive: { backgroundColor: t.colors.destructive },
+  danger: { backgroundColor: t.colors.danger },
   label: { fontFamily: t.fontFamily, fontWeight: '600' },
   smLabel: { fontSize: 14, lineHeight: 20 },
   mdLabel: {
@@ -85,7 +82,7 @@ export function Button({
     secondary: t.colors.foreground,
     outline: t.colors.foreground,
     ghost: t.colors.foreground,
-    destructive: t.colors.destructiveForeground,
+    danger: t.colors.dangerForeground,
   }[variant];
   const icon = { color, size: size === 'sm' ? t.iconSize.sm : t.iconSize.md };
 

package/src/components/chip/chip.tsx

@@ -10,6 +10,7 @@ import { makeStyles } from '../../utils/styles';
 export type ChipProps = Omit<PressableBaseProps, 'children' | 'touchHeight'> & {
   selected?: boolean;
   leftIcon?: IconSlot;
+  count?: number;
   children: string;
 };
 
@@ -38,14 +39,17 @@ const useStyles = makeStyles((t) => ({
     lineHeight: 20,
     fontWeight: '500',
   },
+  count: { fontVariant: ['tabular-nums'], fontWeight: '700' },
 }));
 
 export function Chip({
   selected = false,
   leftIcon,
+  count,
   children,
   style,
   accessibilityState,
+  accessibilityLabel,
   ...rest
 }: ChipProps) {
   const t = useTheme();
@@ -54,6 +58,10 @@ export function Chip({
   return (
     <PressableBase
       {...rest}
+      accessibilityLabel={
+        accessibilityLabel ??
+        (count === undefined ? undefined : `${children}, ${count}건`)
+      }
       accessibilityState={{ ...accessibilityState, selected }}
       touchHeight={HEIGHT}
       style={[s.base, selected && s.selected, style]}
@@ -68,6 +76,15 @@ export function Chip({
       >
         {children}
       </Text>
+      {count === undefined ? null : (
+        <Text
+          numberOfLines={1}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, s.count, { color }]}
+        >
+          {count}
+        </Text>
+      )}
     </PressableBase>
   );
 }

package/src/components/chip-group/chip-group.tsx

@@ -5,6 +5,7 @@ import { Chip } from '../chip/chip';
 export type ChipGroupItem<T extends string> = {
   value: T;
   label: string;
+  count?: number;
   disabled?: boolean;
 };
 
@@ -12,7 +13,6 @@ type Single<T extends string> = {
   multiple?: false;
   value: T | null;
   onValueChange: (value: T | null) => void;
-  /** 선택된 칩을 다시 누르면 해제. 기본 false */
   deselectable?: boolean;
 };
 
@@ -20,7 +20,6 @@ type Multiple<T extends string> = {
   multiple: true;
   value: readonly T[];
   onValueChange: (value: T[]) => void;
-  /** 최대 선택 개수 */
   max?: number;
 };
 
@@ -70,6 +69,7 @@ export function ChipGroup<T extends string>(props: ChipGroupProps<T>) {
           <Chip
             key={item.value}
             selected={selected}
+            count={item.count}
             disabled={item.disabled || (full && !selected)}
             accessibilityRole={props.multiple ? 'checkbox' : 'radio'}
             accessibilityState={

package/src/components/dialog/dialog.tsx

@@ -9,17 +9,11 @@ export type DialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: string;
-  /** 확인을 눌렀을 때. 닫는 것은 부모가 onOpenChange로 정한다 */
   onConfirm: () => void;
-  /** 기본 '확인' */
   confirmLabel?: string;
-  /** 기본 '취소' */
   cancelLabel?: string;
-  /** 되돌릴 수 없는 작업이면 확인 버튼을 destructive로 */
-  destructive?: boolean;
-  /** 확인 버튼을 로딩 상태로 */
+  danger?: boolean;
   loading?: boolean;
-  /** false면 배경 · 뒤로가기로 닫히지 않는다. 기본 true */
   dismissible?: boolean;
 };
 
@@ -49,7 +43,6 @@ const useStyles = makeStyles((t) => ({
   action: { flex: 1, borderRadius: t.radius.lg },
 }));
 
-/** 확인 · 취소를 묻는 대화상자. 제목 한 줄로 무엇을 하는지 말한다 */
 export function Dialog({
   open,
   onOpenChange,
@@ -57,7 +50,7 @@ export function Dialog({
   onConfirm,
   confirmLabel = '확인',
   cancelLabel = '취소',
-  destructive = false,
+  danger = false,
   loading = false,
   dismissible = true,
 }: DialogProps) {
@@ -115,7 +108,7 @@ export function Dialog({
               {cancelLabel}
             </Button>
             <Button
-              variant={destructive ? 'destructive' : 'solid'}
+              variant={danger ? 'danger' : 'solid'}
               style={s.action}
               loading={loading}
               onPress={onConfirm}

package/src/components/divider/divider.tsx

@@ -2,12 +2,10 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import { useTheme } from '../../theme/theme-provider';
 
 export type DividerProps = {
-  /** 왼쪽 들여쓰기(px). ListRow의 leading 뒤부터 긋을 때 쓴다 */
   inset?: number;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 가로 구분선. 목록에서는 FlatList의 ItemSeparatorComponent로 쓴다 */
 export function Divider({ inset = 0, style }: DividerProps) {
   const t = useTheme();
   return (

package/src/components/empty-state/empty-state.tsx

@@ -6,21 +6,12 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 import { Button } from '../button/button';
 
-/**
- * - default: 목록 전체가 비었을 때
- * - search: 검색 · 필터 결과가 없을 때 (결과 변화를 화면낭독기에 알림)
- * - error: 불러오지 못했을 때
- * - section: 화면 안 한 섹션이 비었을 때 (한 줄)
- */
 export type EmptyStateVariant = 'default' | 'search' | 'error' | 'section';
 
 export type EmptyStateProps = {
-  /** 상태를 말하는 한 줄. 예) '아직 주문이 없어요' */
   title: string;
   variant?: EmptyStateVariant;
-  /** 기본: search는 검색, error는 경고 아이콘 */
   icon?: IconSlot;
-  /** 다음 행동 하나. section에서는 텍스트 링크로 보인다 */
   action?: { label: string; onPress: () => void; icon?: IconSlot };
   style?: StyleProp<ViewStyle>;
 };
@@ -28,7 +19,6 @@ export type EmptyStateProps = {
 const ICON = { screen: 40, section: 20 };
 
 const useStyles = makeStyles((t) => ({
-  // 시각 중심을 맞추려고 아래쪽을 더 띄운다
   screen: {
     flexGrow: 1,
     alignItems: 'center',
@@ -74,7 +64,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** 비어 있거나 불러오지 못한 상태. 설명 문단 없이 아이콘 · 한 줄 · 행동 하나로 보여준다 */
 export function EmptyState({
   title,
   variant = 'default',