@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/blocks/image-grid/image-grid.tsx

@@ -0,0 +1,279 @@
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Photo } from '../../components/photo/photo';
+import { Text } from '../../components/text/text';
+import { CloseGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+import { SortableGrid, SortableHandle } from '../../sortable/sortable-grid';
+
+export type GridImage = {
+  id: string;
+  uri: string;
+  status?: 'uploading' | 'failed';
+};
+
+export type ImageGridProps = {
+  images: readonly GridImage[];
+  /** 순서가 바뀌면. 첫 장이 대표 사진 */
+  onImagesChange: (images: GridImage[]) => void;
+  /** 넘기면 첫 칸에 추가 버튼 */
+  onAdd?: () => void;
+  onRemove?: (id: string) => void;
+  /** 업로드 실패한 사진 다시 올리기 */
+  onRetry?: (id: string) => void;
+  /** 기본 10 */
+  max?: number;
+  /** 기본 4 */
+  columns?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+const ADD: GridImage = { id: '__add', uri: '' };
+const RADIUS = 10;
+
+const useStyles = makeStyles((t) => ({
+  fill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: RADIUS,
+  },
+  dim: { backgroundColor: 'rgba(0, 0, 0, 0.45)' },
+  light: { backgroundColor: 'rgba(255, 255, 255, 0.7)' },
+  cover: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingVertical: 2,
+    borderBottomLeftRadius: RADIUS,
+    borderBottomRightRadius: RADIUS,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  coverText: { color: '#ffffff', textAlign: 'center' },
+  remove: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 44,
+    height: 44,
+    alignItems: 'flex-end',
+    padding: t.space[1],
+  },
+  removeDot: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#262626',
+  },
+  add: {
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    borderRadius: RADIUS,
+    borderWidth: 1,
+    borderColor: t.colors.input,
+    backgroundColor: t.colors.muted,
+  },
+  count: { fontSize: 13, fontVariant: ['tabular-nums'] },
+}));
+
+const g = StyleSheet.create({
+  center: { alignItems: 'center', justifyContent: 'center' },
+  column: { alignItems: 'center' },
+  bump: { borderBottomWidth: 0 },
+  open: { borderTopColor: 'transparent', transform: [{ rotate: '45deg' }] },
+  head: { position: 'absolute' },
+});
+
+/** 카메라 모양. svg 없이 테두리로 그린다 */
+function CameraGlyph({ color, size }: { color: string; size: number }) {
+  const stroke = Math.max(1.5, size / 14);
+  const line = { borderWidth: stroke, borderColor: color };
+  return (
+    <View style={[g.column, { width: size, height: size }]}>
+      <View
+        style={[
+          line,
+          g.bump,
+          {
+            width: size * 0.34,
+            height: size * 0.16,
+            marginTop: size * 0.1,
+            borderTopLeftRadius: stroke,
+            borderTopRightRadius: stroke,
+          },
+        ]}
+      />
+      <View
+        style={[
+          line,
+          g.center,
+          {
+            width: size * 0.84,
+            height: size * 0.58,
+            borderRadius: size * 0.12,
+          },
+        ]}
+      >
+        <View
+          style={[
+            line,
+            {
+              width: size * 0.3,
+              height: size * 0.3,
+              borderRadius: size * 0.15,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+/** 다시 시도 화살표. 끊긴 원 + 화살촉 */
+function RetryGlyph({ color, size }: { color: string; size: number }) {
+  const stroke = Math.max(2, size / 11);
+  const ring = size * 0.76;
+  return (
+    <View style={[g.center, { width: size, height: size }]}>
+      <View
+        style={[
+          g.open,
+          {
+            width: ring,
+            height: ring,
+            borderRadius: ring / 2,
+            borderWidth: stroke,
+            borderColor: color,
+          },
+        ]}
+      />
+      <View
+        style={[
+          g.head,
+          {
+            top: size * 0.08,
+            right: size * 0.1,
+            width: size * 0.3,
+            height: size * 0.3,
+            borderTopWidth: stroke,
+            borderRightWidth: stroke,
+            borderColor: color,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+/** 상품 사진 올리기 · 순서 바꾸기. 앱 최상단이 GestureHandlerRootView로 감싸져 있어야 한다 */
+export function ImageGrid({
+  images,
+  onImagesChange,
+  onAdd,
+  onRemove,
+  onRetry,
+  max = 10,
+  columns = 4,
+  style,
+}: ImageGridProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const data = onAdd ? [ADD, ...images] : [...images];
+  const canAdd = images.length < max;
+  return (
+    <View style={style}>
+      <SortableGrid
+        data={data}
+        columns={columns}
+        gap={10}
+        handle
+        keyExtractor={(img) => img.id}
+        onDataChange={(next) => onImagesChange(next.filter((i) => i !== ADD))}
+        itemLabel={(img) => {
+          if (img === ADD) return `사진 추가, ${max}장 중 ${images.length}장`;
+          const n = images.indexOf(img) + 1;
+          const state =
+            img.status === 'uploading'
+              ? ', 업로드 중'
+              : img.status === 'failed'
+                ? ', 업로드 실패'
+                : '';
+          return `사진 ${n}${n === 1 ? ', 대표' : ''}${state}`;
+        }}
+        renderItem={({ item }) => {
+          if (item === ADD) {
+            return (
+              <PressableBase
+                accessibilityLabel={`사진 추가, ${max}장 중 ${images.length}장`}
+                disabled={!canAdd}
+                onPress={onAdd}
+                style={s.add}
+              >
+                <CameraGlyph color={t.colors.mutedForeground} size={24} />
+                <Text weight="semibold" style={s.count}>
+                  {images.length}/{max}
+                </Text>
+              </PressableBase>
+            );
+          }
+          const n = images.indexOf(item) + 1;
+          return (
+            <SortableHandle>
+              <View>
+                <Photo source={{ uri: item.uri }} radius={RADIUS} />
+                {n === 1 && !item.status ? (
+                  <View style={s.cover}>
+                    <Text variant="caption" weight="bold" style={s.coverText}>
+                      대표
+                    </Text>
+                  </View>
+                ) : null}
+                {item.status === 'uploading' ? (
+                  <View style={[s.fill, s.dim]}>
+                    <ActivityIndicator color="#ffffff" />
+                  </View>
+                ) : item.status === 'failed' ? (
+                  <PressableBase
+                    accessibilityLabel={`사진 ${n} 업로드 실패, 다시 시도`}
+                    disabled={!onRetry}
+                    onPress={() => onRetry?.(item.id)}
+                    style={[s.fill, s.light]}
+                  >
+                    <RetryGlyph color={t.colors.destructive} size={26} />
+                  </PressableBase>
+                ) : null}
+                {onRemove && item.status !== 'uploading' ? (
+                  <PressableBase
+                    accessibilityLabel={`사진 ${n} 삭제`}
+                    onPress={() => onRemove(item.id)}
+                    style={s.remove}
+                  >
+                    <View style={s.removeDot}>
+                      <CloseGlyph color="#ffffff" size={12} />
+                    </View>
+                  </PressableBase>
+                ) : null}
+              </View>
+            </SortableHandle>
+          );
+        }}
+      />
+    </View>
+  );
+}

package/src/blocks/image-grid/index.ts

@@ -0,0 +1 @@
+export { ImageGrid, type GridImage, type ImageGridProps } from './image-grid';

package/src/blocks/index.tsx

@@ -0,0 +1,19 @@
+export * from './brand-profile-card';
+export * from './claim-row';
+export * from './color-swatch-picker';
+export * from './copy-variant-picker';
+export * from './credit-wallet';
+export * from './invoice-row';
+export * from './logo-candidate-grid';
+export * from './oauth-buttons';
+export * from './order-card';
+export * from './plan-card';
+export * from './product-list-empty';
+export * from './review-row';
+export * from './service-state-banner';
+export * from './shipping-tracking-row';
+export * from './site-preview-frame';
+export * from './stat-card';
+export * from './step-screen';
+export * from './supply-item-card';
+export { formatDeadline, formatManwon } from './internal/format';

package/src/blocks/internal/card.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+
+const useStyles = makeStyles((t) => ({
+  card: {
+    gap: t.space[3],
+    padding: t.space[4],
+    borderRadius: t.radius.lg,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  pressed: { backgroundColor: t.colors.muted },
+}));
+
+/** blocks 공용 카드 틀. onPress가 있으면 누를 수 있다 */
+export function Card({
+  children,
+  onPress,
+  accessibilityLabel,
+  style,
+}: {
+  children: ReactNode;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const s = useStyles();
+  if (!onPress) return <View style={[s.card, style]}>{children}</View>;
+  return (
+    <PressableBase
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      pressedStyle={s.pressed}
+      style={[s.card, style]}
+    >
+      {children}
+    </PressableBase>
+  );
+}

package/src/blocks/internal/format.ts

@@ -0,0 +1,22 @@
+import { formatPrice } from '../../components/price/price';
+
+/** 420000 → '42만', 12345 → '1.2만', 9000 → '9,000' */
+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))}만`;
+}
+
+/** 전기 대비 증감률(%). 이전 값이 0이면 null */
+export function changeRate(current: number, previous: number): number | null {
+  if (previous === 0) return null;
+  return ((current - previous) / Math.abs(previous)) * 100;
+}
+
+/** 마감이 임박했을 때만 문구를 돌려준다. 0 → '오늘 마감', 1 → '내일 마감', 2 → '모레 마감', 그 밖 null */
+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,122 @@
+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 = {
+  /** 예) '베이직 · 10월' */
+  title: string;
+  amount: number;
+  /** 기본 'paid' */
+  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,129 @@
+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] },
+}));
+
+/** AI가 만든 로고 후보 고르기 */
+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';