@ezpg/app-ui 0.1.0 → 0.2.0

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}
@@ -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' : 'destructive'}
+          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,

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,

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,17 +36,18 @@ 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.warning, t.colors.warningForeground];
@@ -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,

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)));
 }