@ezpg/app-ui 0.1.0 → 0.3.0

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.danger },
   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.danger} 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,
@@ -81,11 +74,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

@@ -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

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

@@ -10,33 +10,22 @@ import { Card } from '../internal/card';
 import { formatDeadline } from '../internal/format';
 
 export type OrderStatus =
-  | 'pending'
+  | 'pending_payment'
   | 'paid'
   | 'preparing'
-  | 'shipping'
+  | 'shipped'
   | 'delivered'
-  | 'confirmed'
-  | 'partiallyCanceled'
-  | 'cancelRequested'
-  | 'returnRequested'
-  | 'exchangeRequested'
-  | 'canceled'
-  | 'refunded';
+  | 'completed'
+  | 'canceled';
 
-/** 주문 상태 → 묶음 제목 (OrderSection) */
 export const orderStatusLabel: Record<OrderStatus, string> = {
-  pending: '결제 대기',
+  pending_payment: '결제 대기',
   paid: '신규',
   preparing: '배송 준비',
-  shipping: '배송 중',
+  shipped: '배송 중',
   delivered: '배송 완료',
-  confirmed: '구매 확정',
-  partiallyCanceled: '부분 취소',
-  cancelRequested: '취소 요청',
-  returnRequested: '반품 요청',
-  exchangeRequested: '교환 요청',
+  completed: '구매 확정',
   canceled: '취소',
-  refunded: '환불 완료',
 };
 
 export type OrderItem = { name: string; option?: string; quantity: number };
@@ -44,20 +33,18 @@ export type OrderItem = { name: string; option?: string; quantity: number };
 export type OrderAction = {
   label: string;
   onPress: () => void;
-  /** 기본 'outline' */
   variant?: ButtonVariant;
   loading?: boolean;
 };
 
 export type OrderCardProps = {
   items: readonly OrderItem[];
-  /** 결제 금액 */
   total: number;
-  /** 처리 기한까지 남은 영업일. 임박했을 때만 표시한다 */
   dueInDays?: number;
-  /** 없고 기한도 임박하지 않으면 한 줄로 줄여 보여준다 */
   actions?: readonly OrderAction[];
   onPress?: () => void;
+  onLongPress?: () => void;
+  selected?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -78,7 +65,6 @@ const useStyles = makeStyles((t) => ({
   section: { gap: t.space[3] },
 }));
 
-/** '장미 꽃다발 (중) 외 1건', '튤립 다발 × 2' */
 export function summarizeItems(items: readonly OrderItem[]): string {
   const [first, ...rest] = items;
   if (!first) return '';
@@ -87,13 +73,14 @@ export function summarizeItems(items: readonly OrderItem[]): string {
   return first.quantity > 1 ? `${name} × ${first.quantity}` : name;
 }
 
-/** 주문 목록의 한 건. 처리할 일이 없으면 누를 수 있는 한 줄로 보여준다 */
 export function OrderCard({
   items,
   total,
   dueInDays,
   actions = [],
   onPress,
+  onLongPress,
+  selected,
   style,
 }: OrderCardProps) {
   const t = useTheme();
@@ -106,6 +93,8 @@ export function OrderCard({
     return (
       <Card
         onPress={onPress}
+        onLongPress={onLongPress}
+        selected={selected}
         accessibilityLabel={label}
         style={[s.compact, style]}
       >
@@ -123,7 +112,13 @@ export function OrderCard({
   }
 
   return (
-    <Card onPress={onPress} accessibilityLabel={label} style={style}>
+    <Card
+      onPress={onPress}
+      onLongPress={onLongPress}
+      selected={selected}
+      accessibilityLabel={label}
+      style={style}
+    >
       <View style={s.row}>
         <Text weight="semibold" style={[s.title, s.grow]} numberOfLines={1}>
           {summary}
@@ -133,7 +128,7 @@ export function OrderCard({
         </Text>
       </View>
       {deadline ? (
-        <Text weight="bold" tone="destructive" style={s.deadline}>
+        <Text weight="bold" tone="danger" style={s.deadline}>
           {deadline}
         </Text>
       ) : null}
@@ -157,15 +152,12 @@ export function OrderCard({
 }
 
 export type OrderSectionProps = {
-  /** 예) '신규', orderStatusLabel[status] */
   title: string;
-  /** 제목 옆 건수 */
   count?: number;
   children: ReactNode;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 같은 상태의 주문을 묶는 제목과 목록 */
 export function OrderSection({
   title,
   count,

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

@@ -7,32 +7,23 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
 
-export type PlanState = 'active' | 'cancelScheduled' | 'pastDue' | 'suspended';
+export type PlanState =
+  'none' | 'trial' | 'active' | 'cancelScheduled' | 'pastDue' | 'suspended';
 
 export type PlanCardProps = {
   name: string;
-  /** 월 요금 */
   price: number;
-  /** 매월 주는 크레딧 */
   monthlyCredits: number;
-  /** 하루 생성 한도 */
-  dailyLimit: number;
+  dailyLimit: number | null;
   features?: readonly string[];
-  /** 지금 쓰는 플랜이면 변경 버튼을 숨긴다 */
   current?: boolean;
-  /** 테두리를 굵게 강조 */
   recommended?: boolean;
-  /** 지금 구독 상태 (current일 때) */
   state?: PlanState;
-  /** 예) '11월 30일' — 해지 예약일 */
   cancelDate?: string;
-  /** 바꾸면 오늘 결제할 금액. 넘기면 버튼에 금액을 붙인다 */
   proratedAmount?: number;
-  /** 가격 인상 예정 */
   priceChange?: { newPrice: number; effectiveDate: string; consented: boolean };
   onSelect?: () => void;
   onConsent?: () => void;
-  /** 기본 '이 플랜으로 변경' */
   actionLabel?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -60,6 +51,10 @@ const useStyles = makeStyles((t) => ({
 
 function stateText(state: PlanState, cancelDate?: string): string | null {
   switch (state) {
+    case 'none':
+      return '구독 전';
+    case 'trial':
+      return '체험 중';
     case 'cancelScheduled':
       return cancelDate ? `${cancelDate} 해지` : '해지 신청됨';
     case 'pastDue':
@@ -71,7 +66,6 @@ function stateText(state: PlanState, cancelDate?: string): string | null {
   }
 }
 
-/** 구독 플랜 한 장. 섹션 제목('이용 중인 플랜' 등)은 쓰는 쪽에서 붙인다 */
 export function PlanCard({
   name,
   price,
@@ -93,10 +87,11 @@ export function PlanCard({
   const s = useStyles();
   const items = [
     `월 크레딧 ${formatPrice(monthlyCredits, '')}`,
-    `하루 생성 ${dailyLimit}회`,
+    dailyLimit === null ? '하루 생성 무제한' : `하루 생성 ${dailyLimit}회`,
     ...features,
   ];
-  const alert = current ? stateText(state, cancelDate) : null;
+  const notice = state === 'none' || state === 'trial';
+  const alert = current || notice ? stateText(state, cancelDate) : null;
   return (
     <Card style={[recommended && s.recommended, style]}>
       <View style={s.head}>
@@ -115,7 +110,14 @@ export function PlanCard({
           </View>
         ))}
       </View>
-      {alert ? <Text tone="destructive">{alert}</Text> : null}
+      {alert ? (
+        <Text
+          tone={notice ? 'muted' : 'danger'}
+          weight={notice ? 'semibold' : undefined}
+        >
+          {alert}
+        </Text>
+      ) : null}
       {priceChange ? (
         <View style={s.change}>
           <Text tone="muted">{priceChange.effectiveDate}부터</Text>

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

@@ -20,14 +20,10 @@ export type SampleProduct = {
 };
 
 export type ProductListEmptyProps = {
-  /** 첫 상품 등록 */
   onAdd: () => void;
-  /** 기본 '첫 상품 등록' */
   addLabel?: string;
-  /** AI가 만든 초안이 있으면 예시 카드로 먼저 보여준다 */
   sample?: SampleProduct;
   onEditSample?: () => void;
-  /** 예시를 지우면 등록 타일로 바뀐다 (부모가 sample을 비운다) */
   onDismissSample?: () => void;
   style?: StyleProp<ViewStyle>;
 };
@@ -77,7 +73,6 @@ const useStyles = makeStyles((t) => ({
   dismiss: { width: 48, height: 48, paddingHorizontal: 0 },
 }));
 
-/** 상품 목록이 비었을 때: 예시 초안이 있으면 예시 카드, 없으면 등록 타일 */
 export function ProductListEmpty({
   onAdd,
   addLabel = '첫 상품 등록',

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

@@ -12,16 +12,12 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type ReviewRowProps = {
-  /** 가린 이름. 예) '김*지' */
   author: string;
-  /** 1~5 */
   rating: number;
   content: string;
   photos?: readonly ImageSourcePropType[];
   reply?: string;
-  /** 답글이 없을 때 '답글 달기' 버튼 */
   onReply?: () => void;
-  /** 오른쪽 위 더보기 버튼 (답글 수정 · 숨기기 등) */
   onMore?: () => void;
   style?: StyleProp<ViewStyle>;
 };
@@ -72,7 +68,6 @@ const useStyles = makeStyles((t) => ({
   hiddenLabel: { flex: 1 },
 }));
 
-/** 별점을 ★로 그린다. 빈 별은 border 색 */
 function Stars({ rating, size }: { rating: number; size?: number }) {
   const t = useTheme();
   const s = useStyles();
@@ -93,7 +88,6 @@ function Stars({ rating, size }: { rating: number; size?: number }) {
   );
 }
 
-/** 리뷰 한 건과 사장님 답글 */
 export function ReviewRow({
   author,
   rating,
@@ -165,7 +159,6 @@ export function ReviewRow({
   );
 }
 
-/** 숨긴 리뷰를 한 줄로 접어 둔다 */
 export function HiddenReviewsRow({
   count,
   onShow,
@@ -183,9 +176,7 @@ export function HiddenReviewsRow({
 }
 
 export type ReviewSummaryProps = {
-  /** 평균 별점 */
   average: number;
-  /** 5점부터 1점까지 리뷰 수 */
   distribution: readonly [number, number, number, number, number];
   style?: StyleProp<ViewStyle>;
 };
@@ -207,7 +198,6 @@ const useSummaryStyles = makeStyles((t) => ({
   fill: { height: 6, borderRadius: 3, backgroundColor: t.colors.warning },
 }));
 
-/** 평균 별점과 점수별 분포 막대 */
 export function ReviewSummary({
   average,
   distribution,