@ezpg/app-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,112 @@
+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 { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+import { formatDeadline } from '../internal/format';
+
+export type ClaimType = 'cancel' | 'return' | 'exchange';
+export type ClaimStatus = 'requested' | 'collecting' | 'completed' | 'rejected';
+
+export type ClaimRowProps = {
+  type: ClaimType;
+  /** 기본 'requested' */
+  status?: ClaimStatus;
+  /** 요청 금액 */
+  amount: number;
+  /** 예) '상품 파손' */
+  reason: string;
+  /** 처리 기한까지 남은 영업일. 임박했을 때만 표시한다 */
+  dueInDays?: number;
+  /** 요청 상태일 때 [거부] [승인] 버튼 */
+  onReject?: () => void;
+  onApprove?: () => void;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const TYPE: Record<ClaimType, string> = {
+  cancel: '취소',
+  return: '반품',
+  exchange: '교환',
+};
+const STATUS: Record<ClaimStatus, string> = {
+  requested: '요청',
+  collecting: '회수 중',
+  completed: '완료',
+  rejected: '거부',
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  grow: { flex: 1 },
+  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
+  deadline: { fontSize: 14, lineHeight: 20 },
+  action: { flex: 1 },
+}));
+
+/** 취소 · 반품 · 교환 요청 한 건 */
+export function ClaimRow({
+  type,
+  status = 'requested',
+  amount,
+  reason,
+  dueInDays,
+  onReject,
+  onApprove,
+  onPress,
+  style,
+}: ClaimRowProps) {
+  const s = useStyles();
+  const title = `${TYPE[type]} ${STATUS[status]}`;
+  const open = status === 'requested' || status === 'collecting';
+  const deadline =
+    open && dueInDays !== undefined ? formatDeadline(dueInDays) : null;
+  const actionable = status === 'requested' && (onReject || onApprove);
+  return (
+    <Card
+      onPress={onPress}
+      accessibilityLabel={`${title}, ${formatPrice(amount)}, ${reason}${deadline ? `, ${deadline}` : ''}`}
+      style={style}
+    >
+      <View style={s.row}>
+        <Text weight="bold" style={[s.head, s.grow]} numberOfLines={1}>
+          {title}
+        </Text>
+        <Text weight="bold" style={s.head}>
+          {formatPrice(amount)}
+        </Text>
+      </View>
+      <View style={s.row}>
+        <Text style={s.grow} numberOfLines={1}>
+          {reason}
+        </Text>
+        {deadline ? (
+          <Text weight="bold" tone="destructive" style={s.deadline}>
+            {deadline}
+          </Text>
+        ) : null}
+      </View>
+      {actionable ? (
+        <View style={s.row}>
+          {onReject ? (
+            <Button
+              size="sm"
+              variant="outline"
+              style={s.action}
+              onPress={onReject}
+            >
+              거부
+            </Button>
+          ) : null}
+          {onApprove ? (
+            <Button size="sm" style={s.action} onPress={onApprove}>
+              승인
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+    </Card>
+  );
+}

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

@@ -0,0 +1,6 @@
+export {
+  ClaimRow,
+  type ClaimRowProps,
+  type ClaimStatus,
+  type ClaimType,
+} from './claim-row';

package/src/blocks/color-swatch-picker/color-swatch-picker.tsx

@@ -0,0 +1,119 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/text/text';
+import { CheckGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { pickForeground } from '../../utils/color';
+import { makeStyles } from '../../utils/styles';
+
+export type ColorSwatch = { value: string; label: string };
+
+export type ColorSwatchPickerProps = {
+  colors: readonly ColorSwatch[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** 'circle'은 색 점, 'card'는 버튼 모양 미리보기. 기본 'circle' */
+  variant?: 'circle' | 'card';
+  style?: StyleProp<ViewStyle>;
+};
+
+const DOT = 40;
+
+const useStyles = makeStyles((t) => ({
+  wrap: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[3] },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ring: {
+    padding: 3,
+    borderRadius: DOT,
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  ringOn: { borderColor: t.colors.foreground },
+  card: {
+    width: 148,
+    gap: t.space[2],
+    padding: t.space[3],
+    borderRadius: t.radius.lg,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  cardOn: {
+    borderColor: t.colors.foreground,
+    borderWidth: 2,
+    padding: t.space[3] - 1,
+  },
+  sample: {
+    height: 32,
+    borderRadius: t.radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  line: { height: 6, borderRadius: 3, backgroundColor: t.colors.muted },
+  long: { width: '70%' },
+  short: { width: '45%' },
+}));
+
+/** 브랜드 색 고르기 */
+export function ColorSwatchPicker({
+  colors,
+  value,
+  onValueChange,
+  variant = 'circle',
+  style,
+}: ColorSwatchPickerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View accessibilityRole="radiogroup" style={[s.wrap, style]}>
+      {colors.map((c) => {
+        const selected = c.value.toLowerCase() === value.toLowerCase();
+        const fg = pickForeground(c.value, '#0a0a0a', '#ffffff');
+        return (
+          <PressableBase
+            key={c.value}
+            accessibilityRole="radio"
+            accessibilityLabel={c.label}
+            accessibilityState={{ selected }}
+            touchHeight={DOT}
+            pressedStyle={{}}
+            onPress={() => onValueChange(c.value)}
+            style={
+              variant === 'card'
+                ? [s.card, selected && s.cardOn]
+                : [s.ring, selected && s.ringOn]
+            }
+          >
+            {variant === 'card' ? (
+              <>
+                <View style={[s.line, s.long]} />
+                <View style={[s.line, s.short]} />
+                <View style={[s.sample, { backgroundColor: c.value }]}>
+                  <Text
+                    variant="caption"
+                    weight="semibold"
+                    style={{ color: fg }}
+                  >
+                    {c.label}
+                  </Text>
+                </View>
+              </>
+            ) : (
+              <View style={[s.dot, { backgroundColor: c.value }]}>
+                {selected ? (
+                  <CheckGlyph color={fg} size={t.iconSize.md} />
+                ) : null}
+              </View>
+            )}
+          </PressableBase>
+        );
+      })}
+    </View>
+  );
+}

package/src/blocks/color-swatch-picker/index.ts

@@ -0,0 +1,5 @@
+export {
+  ColorSwatchPicker,
+  type ColorSwatch,
+  type ColorSwatchPickerProps,
+} from './color-swatch-picker';

package/src/blocks/copy-variant-picker/copy-variant-picker.tsx

@@ -0,0 +1,140 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+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 CopyVariant = { id: string; text: string; locked?: boolean };
+
+export type CopyVariantPickerProps = {
+  /** 예) '한 줄 소개' */
+  label: string;
+  variants: readonly CopyVariant[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  /** 잠그면 다시 만들어도 이 문구는 바뀌지 않는다 */
+  onToggleLock?: (id: string) => void;
+  /** 다른 기기에서 먼저 수정했을 때(409) */
+  conflict?: boolean;
+  onReload?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[3],
+    padding: t.space[3],
+    borderRadius: t.radius.md,
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    backgroundColor: t.colors.background,
+  },
+  selected: {
+    borderColor: t.colors.primary,
+    borderWidth: 2,
+    padding: t.space[3] - 1,
+  },
+  radio: {
+    width: 18,
+    height: 18,
+    marginTop: 2,
+    borderRadius: 9,
+    borderWidth: 2,
+    borderColor: t.colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioOn: { borderColor: t.colors.primary },
+  radioDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: t.colors.primary,
+  },
+  body: { flex: 1, gap: t.space[2] },
+  meta: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  start: { alignSelf: 'flex-start' },
+  conflict: {
+    gap: t.space[2],
+    padding: t.space[3],
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted,
+  },
+}));
+
+/** AI가 만든 문구 후보 중 하나 고르기 */
+export function CopyVariantPicker({
+  label,
+  variants,
+  selectedId,
+  onSelect,
+  onToggleLock,
+  conflict,
+  onReload,
+  style,
+}: CopyVariantPickerProps) {
+  const t = useTheme();
+  const s = useStyles();
+  return (
+    <View style={[s.root, style]}>
+      <Text weight="semibold">{label}</Text>
+      {conflict ? (
+        <View style={s.conflict} accessibilityLiveRegion="polite">
+          <Text tone="destructive">다른 기기에서 먼저 수정했어요.</Text>
+          {onReload ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onPress={onReload}
+              style={s.start}
+            >
+              최신 내용 불러오기
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+      <View accessibilityRole="radiogroup" style={s.root}>
+        {variants.map((v) => {
+          const selected = v.id === selectedId;
+          return (
+            <PressableBase
+              key={v.id}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              accessibilityLabel={v.text}
+              pressedStyle={{ backgroundColor: t.colors.muted }}
+              onPress={() => onSelect(v.id)}
+              style={[s.item, selected && s.selected]}
+            >
+              <View style={[s.radio, selected && s.radioOn]}>
+                {selected ? <View style={s.radioDot} /> : null}
+              </View>
+              <View style={s.body}>
+                <Text>{v.text}</Text>
+                {v.locked || onToggleLock ? (
+                  <View style={s.meta}>
+                    {onToggleLock ? (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onPress={() => onToggleLock(v.id)}
+                      >
+                        {v.locked ? '잠금 해제' : '잠그기'}
+                      </Button>
+                    ) : (
+                      <Text tone="muted">잠김</Text>
+                    )}
+                  </View>
+                ) : null}
+              </View>
+            </PressableBase>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/blocks/copy-variant-picker/index.ts

@@ -0,0 +1,5 @@
+export {
+  CopyVariantPicker,
+  type CopyVariant,
+  type CopyVariantPickerProps,
+} from './copy-variant-picker';

package/src/blocks/credit-wallet/credit-wallet.tsx

@@ -0,0 +1,105 @@
+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 { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type CreditWalletProps = {
+  balance: number;
+  /** 이번 달에 사라지는 크레딧. 0보다 크면 보여준다 */
+  expiring?: number;
+  todayUsed: number;
+  dailyLimit: number;
+  onBuy?: () => void;
+  onHistory?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3] },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+  },
+  expiring: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: 44,
+    paddingHorizontal: t.space[3],
+    borderRadius: t.radius.md,
+    backgroundColor: `${t.colors.warning}24`,
+  },
+  meter: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.muted,
+    overflow: 'hidden',
+  },
+  fill: { height: '100%', backgroundColor: t.colors.primary },
+  actions: { flexDirection: 'row', gap: t.space[2] },
+  action: { flex: 1 },
+}));
+
+/** 보유 크레딧과 오늘 생성 횟수 */
+export function CreditWallet({
+  balance,
+  expiring,
+  todayUsed,
+  dailyLimit,
+  onBuy,
+  onHistory,
+  style,
+}: CreditWalletProps) {
+  const s = useStyles();
+  const ratio = dailyLimit > 0 ? Math.min(1, todayUsed / dailyLimit) : 1;
+  return (
+    <View style={[s.root, style]}>
+      <Card>
+        <View style={s.row}>
+          <Text weight="semibold">보유 크레딧</Text>
+          <Text variant="display">{formatPrice(balance, '')}</Text>
+        </View>
+        {expiring !== undefined && expiring > 0 ? (
+          <View style={s.expiring}>
+            <Text>이번 달 소멸</Text>
+            <Text weight="bold">{formatPrice(expiring, '')}개</Text>
+          </View>
+        ) : null}
+        {onBuy || onHistory ? (
+          <View style={s.actions}>
+            {onHistory ? (
+              <Button variant="secondary" style={s.action} onPress={onHistory}>
+                내역
+              </Button>
+            ) : null}
+            {onBuy ? (
+              <Button style={s.action} onPress={onBuy}>
+                충전
+              </Button>
+            ) : null}
+          </View>
+        ) : null}
+      </Card>
+      <Card>
+        <View style={s.row}>
+          <Text weight="semibold">오늘 생성</Text>
+          <Text>
+            <Text weight="bold">{todayUsed}</Text> / {dailyLimit}
+          </Text>
+        </View>
+        <View
+          accessible
+          accessibilityRole="progressbar"
+          accessibilityLabel="오늘 생성"
+          accessibilityValue={{ min: 0, max: dailyLimit, now: todayUsed }}
+          style={s.meter}
+        >
+          <View style={[s.fill, { width: `${ratio * 100}%` }]} />
+        </View>
+      </Card>
+    </View>
+  );
+}

package/src/blocks/credit-wallet/index.ts

@@ -0,0 +1 @@
+export { CreditWallet, type CreditWalletProps } from './credit-wallet';