@ezpg/app-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,246 @@
+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;
+  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 },
+}));
+
+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;
+  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,115 @@
+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/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/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,77 @@
+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' | 'stopped';
+
+export type ServiceStateBannerProps = {
+  state: ServiceState;
+  daysLeft?: number;
+  reason?: string;
+  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 '해지된 사이트예요';
+    case 'stopped':
+      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,
+  reason,
+  actionLabel,
+  onAction,
+  style,
+}: ServiceStateBannerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const severe =
+    state === 'suspended' || state === 'closed' || state === 'stopped';
+  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>
+      {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 === 'stopped'
+                ? '문의하기'
+                : '결제 수단 확인')}
+        </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';

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

@@ -0,0 +1,92 @@
+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 ShippingStep =
+  'ready' | 'pickedUp' | 'inTransit' | 'outForDelivery' | 'delivered';
+
+const STEPS: { key: ShippingStep; label: string }[] = [
+  { key: 'ready', label: '접수' },
+  { key: 'pickedUp', label: '집화' },
+  { key: 'inTransit', label: '이동 중' },
+  { key: 'outForDelivery', label: '배송 출발' },
+  { key: 'delivered', label: '도착' },
+];
+
+export type ShippingTrackingRowProps = {
+  carrier: string;
+  trackingNumber: string;
+  step: ShippingStep;
+  onCopy?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3], paddingVertical: t.space[3] },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  number: { flex: 1 },
+  steps: { flexDirection: 'row' },
+  step: { flex: 1, alignItems: 'center', gap: t.space[1] },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: t.colors.border,
+  },
+  on: { backgroundColor: t.colors.primary },
+  line: {
+    position: 'absolute',
+    top: 4,
+    left: '50%',
+    right: '-50%',
+    height: 2,
+    backgroundColor: t.colors.border,
+  },
+  lineOn: { backgroundColor: t.colors.primary },
+}));
+
+export function ShippingTrackingRow({
+  carrier,
+  trackingNumber,
+  step,
+  onCopy,
+  style,
+}: ShippingTrackingRowProps) {
+  const s = useStyles();
+  const current = STEPS.findIndex((x) => x.key === step);
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.head}>
+        <View style={s.number}>
+          <Text weight="semibold">{carrier}</Text>
+          <Text tone="muted" selectable>
+            {trackingNumber}
+          </Text>
+        </View>
+        {onCopy ? (
+          <Button size="sm" variant="outline" onPress={onCopy}>
+            복사
+          </Button>
+        ) : null}
+      </View>
+      <View
+        style={s.steps}
+        accessible
+        accessibilityLabel={`배송 ${STEPS[current]?.label ?? ''}, ${STEPS.length}단계 중 ${current + 1}단계`}
+      >
+        {STEPS.map((x, i) => (
+          <View key={x.key} style={s.step}>
+            {i < STEPS.length - 1 ? (
+              <View style={[s.line, i < current && s.lineOn]} />
+            ) : null}
+            <View style={[s.dot, i <= current && s.on]} />
+            <Text variant="caption" tone={i === current ? 'default' : 'muted'}>
+              {x.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/blocks/site-preview-frame/index.ts

@@ -0,0 +1,5 @@
+export {
+  SitePreviewFrame,
+  type SitePreviewFrameProps,
+  type SitePublishStatus,
+} from './site-preview-frame';