@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/blocks/oauth-buttons/oauth-buttons.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+
+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 }
+> = {
+  kakao: { bg: '#FEE500', fg: 'rgba(0, 0, 0, 0.85)', label: '카카오 로그인' },
+  naver: { bg: '#03C75A', fg: '#FFFFFF', label: '네이버 로그인' },
+  google: {
+    bg: '#FFFFFF',
+    fg: '#1F1F1F',
+    border: '#747775',
+    label: 'Google 계정으로 로그인',
+  },
+  apple: { bg: '#000000', fg: '#FFFFFF', label: 'Apple로 로그인' },
+};
+
+const HEIGHT = 48;
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  button: {
+    height: HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.space[2],
+    paddingHorizontal: t.space[4],
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  icon: { position: 'absolute', left: t.space[4] },
+  label: { fontSize: 15, fontWeight: '600', fontFamily: t.fontFamily },
+}));
+
+/** 소셜 로그인 버튼 묶음. Apple은 iOS에서만 보인다 */
+export function OAuthButtons({
+  providers,
+  onPress,
+  icons = {},
+  loading = null,
+  labels = {},
+  style,
+}: OAuthButtonsProps) {
+  const s = useStyles();
+  const shown = providers.filter((p) => p !== 'apple' || Platform.OS === 'ios');
+  return (
+    <View style={[s.root, style]}>
+      {shown.map((p) => {
+        const brand = BRAND[p];
+        const label = labels[p] ?? brand.label;
+        return (
+          <PressableBase
+            key={p}
+            accessibilityLabel={label}
+            disabled={loading !== null}
+            accessibilityState={{ busy: loading === p }}
+            onPress={() => onPress(p)}
+            style={[
+              s.button,
+              {
+                backgroundColor: brand.bg,
+                borderColor: brand.border ?? brand.bg,
+              },
+            ]}
+          >
+            {icons[p] ? <View style={s.icon}>{icons[p]}</View> : null}
+            {loading === p ? (
+              <ActivityIndicator size="small" color={brand.fg} />
+            ) : (
+              <Text numberOfLines={1} style={[s.label, { color: brand.fg }]}>
+                {label}
+              </Text>
+            )}
+          </PressableBase>
+        );
+      })}
+    </View>
+  );
+}

package/src/blocks/option-editor/index.ts

@@ -0,0 +1,5 @@
+export {
+  OptionEditor,
+  type OptionEditorProps,
+  type ProductOption,
+} from './option-editor';

package/src/blocks/option-editor/option-editor.tsx

@@ -0,0 +1,135 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { formatPrice } from '../../components/price/price';
+import { Switch } from '../../components/switch/switch';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+import { SortableHandle } from '../../sortable/sortable-grid';
+import { SortableList } from '../../sortable/sortable-list';
+
+export type ProductOption = {
+  id: string;
+  name: string;
+  /** 기본 가격에 더하는 금액 */
+  priceDelta: number;
+  /** false면 판매 중지(품절) */
+  active: boolean;
+};
+
+export type OptionEditorProps = {
+  options: readonly ProductOption[];
+  onOptionsChange: (options: ProductOption[]) => void;
+  /** 옵션 눌러 수정 (앱에서 Sheet 등으로) */
+  onEdit?: (id: string) => void;
+  onAdd?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  list: {
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    borderRadius: t.radius.lg,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: Math.max(t.minTouchSize, 56),
+    paddingHorizontal: t.space[4],
+    backgroundColor: t.colors.background,
+  },
+  separator: { borderTopWidth: 1, borderTopColor: t.colors.border },
+  pressed: { backgroundColor: t.colors.muted },
+  name: { flex: 1 },
+  price: { fontVariant: ['tabular-nums'] },
+  grip: {
+    width: 20,
+    height: t.minTouchSize,
+    justifyContent: 'center',
+    gap: 4,
+  },
+  bar: {
+    height: 2,
+    marginHorizontal: 3,
+    borderRadius: 1,
+    backgroundColor: t.colors.mutedForeground,
+  },
+}));
+
+/** 상품 옵션(1단) 목록. 손잡이로 순서를 바꾼다. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
+export function OptionEditor({
+  options,
+  onOptionsChange,
+  onEdit,
+  onAdd,
+  style,
+}: OptionEditorProps) {
+  const s = useStyles();
+  const setActive = (id: string, active: boolean) =>
+    onOptionsChange(options.map((o) => (o.id === id ? { ...o, active } : o)));
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.list}>
+        <SortableList
+          data={options}
+          keyExtractor={(o) => o.id}
+          onDataChange={onOptionsChange}
+          handle
+          gap={0}
+          itemLabel={(o) => o.name}
+          renderItem={({ item, index }) => {
+            const tone = item.active ? 'default' : 'muted';
+            const rowStyle = [s.row, index > 0 && s.separator];
+            const content = (
+              <>
+                <SortableHandle>
+                  <View
+                    style={s.grip}
+                    accessibilityRole="image"
+                    accessibilityLabel="순서 변경"
+                  >
+                    <View style={s.bar} />
+                    <View style={s.bar} />
+                  </View>
+                </SortableHandle>
+                <Text tone={tone} style={s.name} numberOfLines={1}>
+                  {item.name}
+                </Text>
+                {item.priceDelta ? (
+                  <Text tone={tone} style={s.price}>
+                    +{formatPrice(item.priceDelta)}
+                  </Text>
+                ) : null}
+                <Switch
+                  value={item.active}
+                  onValueChange={(v) => setActive(item.id, v)}
+                  accessibilityLabel={`${item.name} 판매`}
+                />
+              </>
+            );
+            return onEdit ? (
+              <PressableBase
+                onPress={() => onEdit(item.id)}
+                pressedStyle={s.pressed}
+                style={rowStyle}
+              >
+                {content}
+              </PressableBase>
+            ) : (
+              <View style={rowStyle}>{content}</View>
+            );
+          }}
+        />
+      </View>
+      {onAdd ? (
+        <Button variant="outline" onPress={onAdd}>
+          옵션 추가
+        </Button>
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,11 @@
+export {
+  OrderCard,
+  OrderSection,
+  orderStatusLabel,
+  summarizeItems,
+  type OrderAction,
+  type OrderCardProps,
+  type OrderItem,
+  type OrderSectionProps,
+  type OrderStatus,
+} from './order-card';

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

@@ -0,0 +1,184 @@
+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'
+  | 'paid'
+  | 'preparing'
+  | 'shipping'
+  | 'delivered'
+  | 'confirmed'
+  | 'partiallyCanceled'
+  | 'cancelRequested'
+  | 'returnRequested'
+  | 'exchangeRequested'
+  | 'canceled'
+  | 'refunded';
+
+/** 주문 상태 → 묶음 제목 (OrderSection) */
+export const orderStatusLabel: Record<OrderStatus, string> = {
+  pending: '결제 대기',
+  paid: '신규',
+  preparing: '배송 준비',
+  shipping: '배송 중',
+  delivered: '배송 완료',
+  confirmed: '구매 확정',
+  partiallyCanceled: '부분 취소',
+  cancelRequested: '취소 요청',
+  returnRequested: '반품 요청',
+  exchangeRequested: '교환 요청',
+  canceled: '취소',
+  refunded: '환불 완료',
+};
+
+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;
+  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] },
+}));
+
+/** '장미 꽃다발 (중) 외 1건', '튤립 다발 × 2' */
+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,
+  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}
+        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} 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 = {
+  /** 예) '신규', orderStatusLabel[status] */
+  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,147 @@
+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 = 'active' | 'cancelScheduled' | 'pastDue' | 'suspended';
+
+export type PlanCardProps = {
+  name: string;
+  /** 월 요금 */
+  price: number;
+  /** 매월 주는 크레딧 */
+  monthlyCredits: number;
+  /** 하루 생성 한도 */
+  dailyLimit: number;
+  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>;
+};
+
+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 '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}회`,
+    ...features,
+  ];
+  const alert = current ? 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="destructive">{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';