@ezpg/app-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,176 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button, type ButtonVariant } from '../../components/button/button';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { ChevronGlyph } from '../../internal/glyphs';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+import { formatDeadline } from '../internal/format';
+
+export type OrderStatus =
+  | 'pending_payment'
+  | 'paid'
+  | 'preparing'
+  | 'shipped'
+  | 'delivered'
+  | 'completed'
+  | 'canceled';
+
+export const orderStatusLabel: Record<OrderStatus, string> = {
+  pending_payment: '결제 대기',
+  paid: '신규',
+  preparing: '배송 준비',
+  shipped: '배송 중',
+  delivered: '배송 완료',
+  completed: '구매 확정',
+  canceled: '취소',
+};
+
+export type OrderItem = { name: string; option?: string; quantity: number };
+
+export type OrderAction = {
+  label: string;
+  onPress: () => void;
+  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>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  grow: { flex: 1 },
+  title: { fontSize: 16, lineHeight: 24 },
+  amount: { fontVariant: ['tabular-nums'] },
+  deadline: { fontSize: 14, lineHeight: 20 },
+  action: { flex: 1 },
+  compact: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    minHeight: Math.max(t.minTouchSize, 56),
+    paddingVertical: t.space[2],
+  },
+  section: { gap: t.space[3] },
+}));
+
+export function summarizeItems(items: readonly OrderItem[]): string {
+  const [first, ...rest] = items;
+  if (!first) return '';
+  const name = first.option ? `${first.name} (${first.option})` : first.name;
+  if (rest.length) return `${name} 외 ${rest.length}건`;
+  return first.quantity > 1 ? `${name} × ${first.quantity}` : name;
+}
+
+export function OrderCard({
+  items,
+  total,
+  dueInDays,
+  actions = [],
+  onPress,
+  onLongPress,
+  selected,
+  style,
+}: OrderCardProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const summary = summarizeItems(items);
+  const deadline = dueInDays !== undefined ? formatDeadline(dueInDays) : null;
+  const label = `${summary}, ${formatPrice(total)}${deadline ? `, ${deadline}` : ''}`;
+
+  if (!actions.length && !deadline) {
+    return (
+      <Card
+        onPress={onPress}
+        onLongPress={onLongPress}
+        selected={selected}
+        accessibilityLabel={label}
+        style={[s.compact, style]}
+      >
+        <Text style={s.grow} numberOfLines={1}>
+          {summary}
+        </Text>
+        <Text weight="bold" style={s.amount}>
+          {formatPrice(total)}
+        </Text>
+        {onPress ? (
+          <ChevronGlyph color={t.colors.mutedForeground} size={t.iconSize.sm} />
+        ) : null}
+      </Card>
+    );
+  }
+
+  return (
+    <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}
+        </Text>
+        <Text variant="bodyLg" weight="bold" style={s.amount}>
+          {formatPrice(total)}
+        </Text>
+      </View>
+      {deadline ? (
+        <Text weight="bold" tone="destructive" style={s.deadline}>
+          {deadline}
+        </Text>
+      ) : null}
+      {actions.length ? (
+        <View style={s.row}>
+          {actions.map((a) => (
+            <Button
+              key={a.label}
+              variant={a.variant ?? 'outline'}
+              loading={a.loading}
+              style={s.action}
+              onPress={a.onPress}
+            >
+              {a.label}
+            </Button>
+          ))}
+        </View>
+      ) : null}
+    </Card>
+  );
+}
+
+export type OrderSectionProps = {
+  title: string;
+  count?: number;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function OrderSection({
+  title,
+  count,
+  children,
+  style,
+}: OrderSectionProps) {
+  const s = useStyles();
+  return (
+    <View style={[s.section, style]}>
+      <Text weight="bold" accessibilityRole="header">
+        {count === undefined ? title : `${title} ${count}`}
+      </Text>
+      {children}
+    </View>
+  );
+}

package/src/blocks/plan-card/index.ts

@@ -0,0 +1 @@
+export { PlanCard, type PlanCardProps, type PlanState } from './plan-card';

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

@@ -0,0 +1,149 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { CheckGlyph } from '../../internal/glyphs';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type PlanState =
+  'none' | 'trial' | 'active' | 'cancelScheduled' | 'pastDue' | 'suspended';
+
+export type PlanCardProps = {
+  name: string;
+  price: number;
+  monthlyCredits: number;
+  dailyLimit: number | null;
+  features?: readonly string[];
+  current?: boolean;
+  recommended?: boolean;
+  state?: PlanState;
+  cancelDate?: string;
+  proratedAmount?: number;
+  priceChange?: { newPrice: number; effectiveDate: string; consented: boolean };
+  onSelect?: () => void;
+  onConsent?: () => void;
+  actionLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  recommended: {
+    borderColor: t.colors.primary,
+    borderWidth: 2,
+    padding: t.space[4] - 1,
+  },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  name: { flex: 1 },
+  list: { gap: 6 },
+  feature: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  change: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[2],
+    paddingTop: t.space[3],
+    borderTopWidth: 1,
+    borderTopColor: t.colors.border,
+  },
+  changePrice: { flex: 1 },
+}));
+
+function stateText(state: PlanState, cancelDate?: string): string | null {
+  switch (state) {
+    case 'none':
+      return '구독 전';
+    case 'trial':
+      return '체험 중';
+    case 'cancelScheduled':
+      return cancelDate ? `${cancelDate} 해지` : '해지 신청됨';
+    case 'pastDue':
+      return '결제 실패';
+    case 'suspended':
+      return '이용 정지';
+    default:
+      return null;
+  }
+}
+
+export function PlanCard({
+  name,
+  price,
+  monthlyCredits,
+  dailyLimit,
+  features = [],
+  current,
+  recommended,
+  state = 'active',
+  cancelDate,
+  proratedAmount,
+  priceChange,
+  onSelect,
+  onConsent,
+  actionLabel = '이 플랜으로 변경',
+  style,
+}: PlanCardProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const items = [
+    `월 크레딧 ${formatPrice(monthlyCredits, '')}`,
+    dailyLimit === null ? '하루 생성 무제한' : `하루 생성 ${dailyLimit}회`,
+    ...features,
+  ];
+  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}>
+        <Text variant="bodyLg" weight="bold" style={s.name}>
+          {name}
+        </Text>
+        <Text variant="bodyLg" weight="bold">
+          월 {formatPrice(price)}
+        </Text>
+      </View>
+      <View style={s.list}>
+        {items.map((item) => (
+          <View key={item} style={s.feature}>
+            <CheckGlyph color={t.colors.foreground} size={16} />
+            <Text>{item}</Text>
+          </View>
+        ))}
+      </View>
+      {alert ? (
+        <Text
+          tone={notice ? 'muted' : 'destructive'}
+          weight={notice ? 'semibold' : undefined}
+        >
+          {alert}
+        </Text>
+      ) : null}
+      {priceChange ? (
+        <View style={s.change}>
+          <Text tone="muted">{priceChange.effectiveDate}부터</Text>
+          <Text weight="bold" style={s.changePrice}>
+            월 {formatPrice(priceChange.newPrice)}
+          </Text>
+          {priceChange.consented ? (
+            <Text tone="muted">동의함</Text>
+          ) : onConsent ? (
+            <Button size="sm" onPress={onConsent}>
+              인상 동의
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+      {!current && onSelect ? (
+        <Button
+          size="lg"
+          variant={recommended ? 'solid' : 'outline'}
+          onPress={onSelect}
+        >
+          {proratedAmount !== undefined && proratedAmount > 0
+            ? `${formatPrice(proratedAmount)} 결제하고 ${actionLabel}`
+            : actionLabel}
+        </Button>
+      ) : null}
+    </Card>
+  );
+}

package/src/blocks/product-list-empty/index.ts

@@ -0,0 +1,5 @@
+export {
+  ProductListEmpty,
+  type ProductListEmptyProps,
+  type SampleProduct,
+} from './product-list-empty';

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

@@ -0,0 +1,139 @@
+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;
+  sample?: SampleProduct;
+  onEditSample?: () => void;
+  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';