@ezpg/app-ui 0.0.0-stage → 0.2.0

package/src/blocks/internal/format.ts

@@ -0,0 +1,19 @@
+import { formatPrice } from '../../components/price/price';
+
+export function formatManwon(value: number): string {
+  const abs = Math.abs(value);
+  if (abs < 10000) return formatPrice(value, '');
+  const man = value / 10000;
+  const digits = Math.abs(man) >= 10 ? 0 : 1;
+  return `${Number(man.toFixed(digits))}만`;
+}
+
+export function changeRate(current: number, previous: number): number | null {
+  if (previous === 0) return null;
+  return ((current - previous) / Math.abs(previous)) * 100;
+}
+
+export function formatDeadline(days: number): string | null {
+  if (days < 0) return '기한 지남';
+  return ['오늘 마감', '내일 마감', '모레 마감'][days] ?? null;
+}

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

@@ -0,0 +1,5 @@
+export {
+  InvoiceRow,
+  type InvoiceRowProps,
+  type InvoiceStatus,
+} from './invoice-row';

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

@@ -0,0 +1,115 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { ListRow } from '../../components/list-row/list-row';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { AlertGlyph } from '../../internal/glyphs';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type InvoiceStatus = 'paid' | 'failed' | 'refunded';
+
+export type InvoiceRowProps = {
+  title: string;
+  amount: number;
+  status?: InvoiceStatus;
+  refundedAmount?: number;
+  onChangePaymentMethod?: () => void;
+  onRetry?: () => void;
+  retrying?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  grow: { flex: 1 },
+  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
+  action: { flex: 1 },
+}));
+
+export function InvoiceRow({
+  title,
+  amount,
+  status = 'paid',
+  refundedAmount,
+  onChangePaymentMethod,
+  onRetry,
+  retrying,
+  onPress,
+  style,
+}: InvoiceRowProps) {
+  const t = useTheme();
+  const s = useStyles();
+
+  if (status !== 'failed') {
+    const value =
+      status === 'refunded'
+        ? `환불 ${formatPrice(refundedAmount ?? amount)}`
+        : formatPrice(amount);
+    return (
+      <ListRow
+        title={title}
+        onPress={onPress}
+        style={style}
+        trailing={
+          <Text
+            weight="semibold"
+            tone={status === 'refunded' ? 'muted' : 'default'}
+          >
+            {value}
+          </Text>
+        }
+      />
+    );
+  }
+
+  return (
+    <Card
+      onPress={onPress}
+      accessibilityLabel={`결제 실패, ${formatPrice(amount)}, ${title}`}
+      style={style}
+    >
+      <View style={s.row}>
+        <AlertGlyph
+          filled
+          color={t.colors.destructive}
+          onColor={t.colors.destructiveForeground}
+          size={t.iconSize.md}
+        />
+        <Text weight="bold" tone="destructive" style={[s.head, s.grow]}>
+          결제 실패
+        </Text>
+        <Text weight="bold" style={s.head}>
+          {formatPrice(amount)}
+        </Text>
+      </View>
+      <Text numberOfLines={1}>{title}</Text>
+      {onChangePaymentMethod || onRetry ? (
+        <View style={s.row}>
+          {onChangePaymentMethod ? (
+            <Button
+              size="sm"
+              variant="outline"
+              style={s.action}
+              onPress={onChangePaymentMethod}
+            >
+              결제수단 변경
+            </Button>
+          ) : null}
+          {onRetry ? (
+            <Button
+              size="sm"
+              loading={retrying}
+              style={s.action}
+              onPress={onRetry}
+            >
+              다시 결제
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+    </Card>
+  );
+}

package/src/blocks/logo-candidate-grid/index.ts

@@ -0,0 +1,5 @@
+export {
+  LogoCandidateGrid,
+  type LogoCandidate,
+  type LogoCandidateGridProps,
+} from './logo-candidate-grid';

package/src/blocks/logo-candidate-grid/logo-candidate-grid.tsx

@@ -0,0 +1,127 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Photo } from '../../components/photo/photo';
+import { Skeleton } from '../../components/skeleton/skeleton';
+import { AlertGlyph, CheckGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type LogoCandidate = {
+  id: string;
+  status: 'generating' | 'ready' | 'failed';
+  image?: ImageSourcePropType;
+};
+
+export type LogoCandidateGridProps = {
+  candidates: readonly LogoCandidate[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onRetry?: (id: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[3] },
+  cell: {
+    width: '47%',
+    aspectRatio: 1,
+    overflow: 'hidden',
+    borderRadius: t.radius.lg,
+  },
+  selected: { borderWidth: 2, borderColor: t.colors.primary },
+  check: {
+    position: 'absolute',
+    top: t.space[2],
+    right: t.space[2],
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: t.colors.primary,
+  },
+  failed: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: t.space[3],
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.muted,
+  },
+  retry: { paddingHorizontal: t.space[4] },
+}));
+
+export function LogoCandidateGrid({
+  candidates,
+  selectedId,
+  onSelect,
+  onRetry,
+  style,
+}: LogoCandidateGridProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View accessibilityRole="radiogroup" style={[s.grid, style]}>
+      {candidates.map((c, i) => {
+        if (c.status === 'generating') {
+          return (
+            <View
+              key={c.id}
+              style={s.cell}
+              accessibilityLabel={`로고 후보 ${i + 1} 만드는 중`}
+            >
+              <Skeleton height="100%" radius={t.radius.lg} />
+            </View>
+          );
+        }
+        if (c.status === 'failed' || !c.image) {
+          return (
+            <View
+              key={c.id}
+              accessibilityLabel={`로고 후보 ${i + 1} 만들지 못함`}
+              style={[s.cell, s.failed]}
+            >
+              <AlertGlyph color={t.colors.mutedForeground} size={28} />
+              {onRetry ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  accessibilityLabel="로고 다시 만들기"
+                  onPress={() => onRetry(c.id)}
+                  style={s.retry}
+                >
+                  다시 시도
+                </Button>
+              ) : null}
+            </View>
+          );
+        }
+        const selected = c.id === selectedId;
+        return (
+          <PressableBase
+            key={c.id}
+            accessibilityRole="radio"
+            accessibilityLabel={`로고 후보 ${i + 1}`}
+            accessibilityState={{ selected }}
+            pressedStyle={{}}
+            onPress={() => onSelect(c.id)}
+            style={[s.cell, selected && s.selected]}
+          >
+            <Photo source={c.image} radius={0} />
+            {selected ? (
+              <View style={s.check}>
+                <CheckGlyph color={t.colors.primaryForeground} size={14} />
+              </View>
+            ) : null}
+          </PressableBase>
+        );
+      })}
+    </View>
+  );
+}

package/src/blocks/oauth-buttons/index.ts

@@ -0,0 +1,5 @@
+export {
+  OAuthButtons,
+  type OAuthButtonsProps,
+  type OAuthProvider,
+} from './oauth-buttons';

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

@@ -0,0 +1,101 @@
+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 },
+}));
+
+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,149 @@
+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;
+  active: boolean;
+  note?: string;
+};
+
+export type OptionEditorProps = {
+  options: readonly ProductOption[];
+  onOptionsChange: (options: ProductOption[]) => void;
+  onActiveChange?: (id: string, active: boolean) => void;
+  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 },
+  body: { flex: 1, paddingVertical: t.space[2] },
+  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,
+  },
+}));
+
+function formatPriceDelta(delta: number): string {
+  return delta > 0 ? `+${formatPrice(delta)}` : formatPrice(delta);
+}
+
+export function OptionEditor({
+  options,
+  onOptionsChange,
+  onActiveChange,
+  onEdit,
+  onAdd,
+  style,
+}: OptionEditorProps) {
+  const s = useStyles();
+  const setActive = (id: string, active: boolean) =>
+    onActiveChange
+      ? onActiveChange(id, active)
+      : 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>
+                <View style={s.body}>
+                  <Text tone={tone} numberOfLines={1}>
+                    {item.name}
+                  </Text>
+                  {item.note ? (
+                    <Text variant="caption" tone="muted" numberOfLines={2}>
+                      {item.note}
+                    </Text>
+                  ) : null}
+                </View>
+                {item.priceDelta ? (
+                  <Text tone={tone} style={s.price}>
+                    {formatPriceDelta(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';