@ezpg/app-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,144 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Photo } from '../../components/photo/photo';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { CloseGlyph, PlusGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type SampleProduct = {
+  name: string;
+  price: number;
+  image?: ImageSourcePropType;
+};
+
+export type ProductListEmptyProps = {
+  /** 첫 상품 등록 */
+  onAdd: () => void;
+  /** 기본 '첫 상품 등록' */
+  addLabel?: string;
+  /** AI가 만든 초안이 있으면 예시 카드로 먼저 보여준다 */
+  sample?: SampleProduct;
+  onEditSample?: () => void;
+  /** 예시를 지우면 등록 타일로 바뀐다 (부모가 sample을 비운다) */
+  onDismissSample?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: t.space[3],
+    padding: t.space[4],
+  },
+  tile: {
+    width: '47%',
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.space[3],
+    borderRadius: t.radius.lg,
+    borderWidth: 1.5,
+    borderStyle: 'dashed',
+    borderColor: t.colors.mutedForeground,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+  card: {
+    margin: t.space[4],
+    overflow: 'hidden',
+    borderRadius: t.radius.lg,
+    borderWidth: 1.5,
+    borderStyle: 'dashed',
+    borderColor: t.colors.mutedForeground,
+  },
+  media: { height: 180, backgroundColor: t.colors.muted },
+  badge: {
+    position: 'absolute',
+    top: t.space[3],
+    left: t.space[3],
+    paddingHorizontal: 10,
+    paddingVertical: t.space[1],
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.foreground,
+  },
+  badgeLabel: { color: t.colors.background, fontSize: 14 },
+  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 },
+}));
+
+/** 상품 목록이 비었을 때: 예시 초안이 있으면 예시 카드, 없으면 등록 타일 */
+export function ProductListEmpty({
+  onAdd,
+  addLabel = '첫 상품 등록',
+  sample,
+  onEditSample,
+  onDismissSample,
+  style,
+}: ProductListEmptyProps) {
+  const t = useTheme();
+  const s = useStyles();
+
+  if (sample) {
+    return (
+      <View
+        style={[s.card, style]}
+        accessibilityLabel={`예시 상품, ${sample.name}, 손님에게 안 보여요`}
+      >
+        <View style={s.media}>
+          {sample.image ? (
+            <Photo source={sample.image} radius={0} style={s.media} />
+          ) : null}
+          <View style={s.badge}>
+            <Text variant="caption" weight="semibold" style={s.badgeLabel}>
+              예시 · 손님에게 안 보여요
+            </Text>
+          </View>
+        </View>
+        <View style={s.body}>
+          <Text weight="semibold">{sample.name}</Text>
+          <Text weight="bold">{formatPrice(sample.price)}</Text>
+          <View style={s.actions}>
+            <Button style={s.edit} onPress={onEditSample ?? onAdd}>
+              내 상품으로 수정
+            </Button>
+            {onDismissSample ? (
+              <Button
+                variant="outline"
+                accessibilityLabel="예시 지우고 새로 등록"
+                style={s.dismiss}
+                onPress={onDismissSample}
+              >
+                <CloseGlyph color={t.colors.foreground} size={t.iconSize.sm} />
+              </Button>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[s.grid, style]}>
+      <PressableBase
+        accessibilityLabel={`등록된 상품이 없어요. ${addLabel}`}
+        pressedStyle={s.pressed}
+        onPress={onAdd}
+        style={s.tile}
+      >
+        <PlusGlyph color={t.colors.foreground} size={40} />
+        <Text weight="semibold">{addLabel}</Text>
+      </PressableBase>
+    </View>
+  );
+}

package/src/blocks/review-row/index.ts

@@ -0,0 +1,8 @@
+export {
+  HiddenReviewsRow,
+  ReviewRow,
+  ReviewSummary,
+  type HiddenReviewsRowProps,
+  type ReviewRowProps,
+  type ReviewSummaryProps,
+} from './review-row';

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

@@ -0,0 +1,256 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Photo } from '../../components/photo/photo';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+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>;
+};
+
+export type HiddenReviewsRowProps = {
+  count: number;
+  onShow: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: 10, paddingVertical: t.space[4] },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  stars: { letterSpacing: 1 },
+  author: { flexShrink: 1, fontSize: 14 },
+  more: {
+    width: 44,
+    height: 44,
+    marginVertical: -t.space[3],
+    marginLeft: 'auto',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dots: { flexDirection: 'row', gap: 3 },
+  dot: { width: 3.5, height: 3.5, borderRadius: 2 },
+  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,
+    backgroundColor: t.colors.muted,
+  },
+  replyTitle: { fontSize: 13, lineHeight: 18 },
+  replyButton: { alignSelf: 'flex-start' },
+  hidden: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    minHeight: 52,
+    paddingLeft: 14,
+    paddingRight: t.space[2],
+    borderRadius: 10,
+    backgroundColor: t.colors.muted,
+  },
+  hiddenLabel: { flex: 1 },
+}));
+
+/** 별점을 ★로 그린다. 빈 별은 border 색 */
+function Stars({ rating, size }: { rating: number; size?: number }) {
+  const t = useTheme();
+  const s = useStyles();
+  const n = Math.max(0, Math.min(5, Math.round(rating)));
+  return (
+    <Text
+      accessibilityRole="image"
+      accessibilityLabel={`별점 ${n}점`}
+      style={[
+        s.stars,
+        { color: t.colors.warning },
+        size ? { fontSize: size, lineHeight: size + 4 } : null,
+      ]}
+    >
+      {'★'.repeat(n)}
+      <Text style={{ color: t.colors.border }}>{'★'.repeat(5 - n)}</Text>
+    </Text>
+  );
+}
+
+/** 리뷰 한 건과 사장님 답글 */
+export function ReviewRow({
+  author,
+  rating,
+  content,
+  photos = [],
+  reply,
+  onReply,
+  onMore,
+  style,
+}: ReviewRowProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.head}>
+        <Stars rating={rating} />
+        <Text weight="semibold" numberOfLines={1} style={s.author}>
+          {author}
+        </Text>
+        {onMore ? (
+          <PressableBase
+            accessibilityLabel="더보기"
+            onPress={onMore}
+            style={s.more}
+          >
+            <View style={s.dots}>
+              {[0, 1, 2].map((i) => (
+                <View
+                  key={i}
+                  style={[s.dot, { backgroundColor: t.colors.mutedForeground }]}
+                />
+              ))}
+            </View>
+          </PressableBase>
+        ) : null}
+      </View>
+      <Text>{content}</Text>
+      {photos.length ? (
+        <View style={s.photos}>
+          {photos.slice(0, 4).map((p, i) => (
+            <View key={i} style={s.photo}>
+              <Photo
+                source={p}
+                radius={t.radius.sm}
+                accessibilityLabel={`리뷰 사진 ${i + 1}`}
+              />
+            </View>
+          ))}
+        </View>
+      ) : null}
+      {reply ? (
+        <View style={s.reply}>
+          <Text weight="bold" style={s.replyTitle}>
+            사장님
+          </Text>
+          <Text>{reply}</Text>
+        </View>
+      ) : onReply ? (
+        <Button
+          size="sm"
+          variant="outline"
+          onPress={onReply}
+          style={s.replyButton}
+        >
+          답글 달기
+        </Button>
+      ) : null}
+    </View>
+  );
+}
+
+/** 숨긴 리뷰를 한 줄로 접어 둔다 */
+export function HiddenReviewsRow({
+  count,
+  onShow,
+  style,
+}: HiddenReviewsRowProps) {
+  const s = useStyles();
+  return (
+    <View style={[s.hidden, style]}>
+      <Text style={s.hiddenLabel}>숨긴 리뷰 {count}개</Text>
+      <Button size="sm" variant="ghost" onPress={onShow}>
+        다시 보이기
+      </Button>
+    </View>
+  );
+}
+
+export type ReviewSummaryProps = {
+  /** 평균 별점 */
+  average: number;
+  /** 5점부터 1점까지 리뷰 수 */
+  distribution: readonly [number, number, number, number, number];
+  style?: StyleProp<ViewStyle>;
+};
+
+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'] },
+  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,
+    overflow: 'hidden',
+    backgroundColor: t.colors.muted,
+  },
+  fill: { height: 6, borderRadius: 3, backgroundColor: t.colors.warning },
+}));
+
+/** 평균 별점과 점수별 분포 막대 */
+export function ReviewSummary({
+  average,
+  distribution,
+  style,
+}: ReviewSummaryProps) {
+  const s = useSummaryStyles();
+  const total = distribution.reduce((a, b) => a + b, 0);
+  const shown = average.toFixed(1);
+  return (
+    <View style={[s.root, style]}>
+      <View
+        accessible
+        accessibilityLabel={`별점 평균 ${shown}, 리뷰 ${total}개`}
+        style={s.score}
+      >
+        <Text weight="bold" style={s.average}>
+          {shown}
+        </Text>
+        <Stars rating={average} size={13} />
+      </View>
+      <View
+        accessible
+        accessibilityLabel={distribution
+          .map((n, i) => `${5 - i}점 ${n}개`)
+          .join(', ')}
+        style={s.bars}
+      >
+        {distribution.map((n, i) => (
+          <View key={i} style={s.bar}>
+            <Text variant="caption" tone="muted" style={s.digit}>
+              {5 - i}
+            </Text>
+            <View style={s.track}>
+              <View
+                style={[
+                  s.fill,
+                  { width: `${total ? Math.round((n / total) * 100) : 0}%` },
+                ]}
+              />
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/blocks/sales-chart/index.ts

@@ -0,0 +1,5 @@
+export {
+  SalesChart,
+  type SalesChartProps,
+  type SalesPeriod,
+} from './sales-chart';

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

@@ -0,0 +1,120 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { EmptyState } from '../../components/empty-state/empty-state';
+import { formatPrice } from '../../components/price/price';
+import { SegmentedTabs } from '../../components/segmented-tabs/segmented-tabs';
+import { Skeleton } from '../../components/skeleton/skeleton';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { LineChart, type ChartDatum } from '../../charts/line-chart';
+import { Card } from '../internal/card';
+import { changeRate, formatManwon } from '../internal/format';
+
+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>;
+};
+
+const PERIODS = [
+  { value: 'today', label: '오늘' },
+  { value: 'week', label: '7일' },
+  { value: 'month', label: '30일' },
+] as const;
+
+const useStyles = makeStyles((t) => ({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 44,
+  },
+  divided: { borderBottomWidth: 1, borderBottomColor: t.colors.border },
+  net: { minHeight: 56 },
+  netValue: { flexDirection: 'row', alignItems: 'baseline', gap: t.space[2] },
+  down: { color: t.colors.info },
+}));
+
+/** 기간별 총매출 · 환불 · 순매출 */
+export function SalesChart({
+  period,
+  onPeriodChange,
+  total,
+  previousTotal,
+  refundTotal = 0,
+  data = [],
+  loading,
+  style,
+}: SalesChartProps) {
+  const s = useStyles();
+  const rate =
+    previousTotal !== undefined ? changeRate(total, previousTotal) : null;
+  const up = rate !== null && rate >= 0;
+  const empty = !loading && total === 0 && refundTotal === 0;
+
+  return (
+    <Card style={style}>
+      <SegmentedTabs<SalesPeriod>
+        items={PERIODS}
+        value={period}
+        onValueChange={onPeriodChange}
+      />
+      {loading ? (
+        <>
+          <Skeleton height={44} />
+          <Skeleton height={44} />
+          <Skeleton height={56} />
+        </>
+      ) : empty ? (
+        <EmptyState variant="section" title="이 기간 매출이 없어요" />
+      ) : (
+        <>
+          <View>
+            <View style={s.row}>
+              <Text tone="muted">총매출</Text>
+              <Text>{formatPrice(total + refundTotal)}</Text>
+            </View>
+            <View style={[s.row, s.divided]}>
+              <Text tone="muted">환불</Text>
+              <Text>
+                {refundTotal > 0 ? '−' : ''}
+                {formatPrice(refundTotal)}
+              </Text>
+            </View>
+            <View style={[s.row, s.net]}>
+              <Text weight="bold">순매출</Text>
+              <View style={s.netValue}>
+                {rate !== null ? (
+                  <Text
+                    weight="bold"
+                    tone={up ? 'destructive' : 'default'}
+                    style={!up && s.down}
+                    accessibilityLabel={`직전 기간보다 ${Math.abs(rate).toFixed(1)}% ${up ? '증가' : '감소'}`}
+                  >
+                    {up ? '▲' : '▼'} {Math.abs(rate).toFixed(1)}%
+                  </Text>
+                ) : null}
+                <Text variant="title" weight="bold">
+                  {formatPrice(total)}
+                </Text>
+              </View>
+            </View>
+          </View>
+          {data.length > 1 ? (
+            <LineChart data={data} formatY={formatManwon} height={180} />
+          ) : null}
+        </>
+      )}
+    </Card>
+  );
+}

package/src/blocks/service-state-banner/index.ts

@@ -0,0 +1,5 @@
+export {
+  ServiceStateBanner,
+  type ServiceState,
+  type ServiceStateBannerProps,
+} from './service-state-banner';

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

@@ -0,0 +1,66 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+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 ServiceStateBannerProps = {
+  state: ServiceState;
+  /** 유예 남은 일수 (grace) */
+  daysLeft?: number;
+  actionLabel?: string;
+  onAction?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+function title(state: ServiceState, daysLeft?: number) {
+  switch (state) {
+    case 'paymentFailed':
+      return '구독 결제에 실패했어요';
+    case 'grace':
+      return `${daysLeft ?? 0}일 뒤 사이트가 멈춰요`;
+    case 'suspended':
+      return '사이트가 멈췄어요';
+    case 'closed':
+      return '해지된 사이트예요';
+  }
+}
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2], padding: t.space[4], borderRadius: t.radius.md },
+  start: { alignSelf: 'flex-start' },
+}));
+
+/** 결제 실패 · 유예 · 정지 · 해지 상태 안내 */
+export function ServiceStateBanner({
+  state,
+  daysLeft,
+  actionLabel,
+  onAction,
+  style,
+}: ServiceStateBannerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const severe = state === 'suspended' || state === 'closed';
+  const [bg, fg] = severe
+    ? [t.colors.destructive, t.colors.destructiveForeground]
+    : [t.colors.warning, t.colors.warningForeground];
+  return (
+    <View
+      accessibilityRole="alert"
+      style={[s.root, { backgroundColor: bg }, style]}
+    >
+      <Text weight="bold" style={{ color: fg }}>
+        {title(state, daysLeft)}
+      </Text>
+      {onAction ? (
+        <Button size="sm" variant="outline" onPress={onAction} style={s.start}>
+          {actionLabel ??
+            (state === 'closed' ? '다시 시작하기' : '결제 수단 확인')}
+        </Button>
+      ) : null}
+    </View>
+  );
+}

package/src/blocks/shipping-tracking-row/index.ts

@@ -0,0 +1,5 @@
+export {
+  ShippingTrackingRow,
+  type ShippingStep,
+  type ShippingTrackingRowProps,
+} from './shipping-tracking-row';