@ezpg/app-ui 0.0.0-stage → 0.1.0

package/src/blocks/shipping-tracking-row/shipping-tracking-row.tsx

@@ -0,0 +1,93 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+
+export type ShippingStep =
+  'ready' | 'pickedUp' | 'inTransit' | 'outForDelivery' | 'delivered';
+
+const STEPS: { key: ShippingStep; label: string }[] = [
+  { key: 'ready', label: '접수' },
+  { key: 'pickedUp', label: '집화' },
+  { key: 'inTransit', label: '이동 중' },
+  { key: 'outForDelivery', label: '배송 출발' },
+  { key: 'delivered', label: '도착' },
+];
+
+export type ShippingTrackingRowProps = {
+  carrier: string;
+  trackingNumber: string;
+  step: ShippingStep;
+  onCopy?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3], paddingVertical: t.space[3] },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
+  number: { flex: 1 },
+  steps: { flexDirection: 'row' },
+  step: { flex: 1, alignItems: 'center', gap: t.space[1] },
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: t.colors.border,
+  },
+  on: { backgroundColor: t.colors.primary },
+  line: {
+    position: 'absolute',
+    top: 4,
+    left: '50%',
+    right: '-50%',
+    height: 2,
+    backgroundColor: t.colors.border,
+  },
+  lineOn: { backgroundColor: t.colors.primary },
+}));
+
+/** 송장과 배송 단계 */
+export function ShippingTrackingRow({
+  carrier,
+  trackingNumber,
+  step,
+  onCopy,
+  style,
+}: ShippingTrackingRowProps) {
+  const s = useStyles();
+  const current = STEPS.findIndex((x) => x.key === step);
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.head}>
+        <View style={s.number}>
+          <Text weight="semibold">{carrier}</Text>
+          <Text tone="muted" selectable>
+            {trackingNumber}
+          </Text>
+        </View>
+        {onCopy ? (
+          <Button size="sm" variant="outline" onPress={onCopy}>
+            복사
+          </Button>
+        ) : null}
+      </View>
+      <View
+        style={s.steps}
+        accessible
+        accessibilityLabel={`배송 ${STEPS[current]?.label ?? ''}, ${STEPS.length}단계 중 ${current + 1}단계`}
+      >
+        {STEPS.map((x, i) => (
+          <View key={x.key} style={s.step}>
+            {i < STEPS.length - 1 ? (
+              <View style={[s.line, i < current && s.lineOn]} />
+            ) : null}
+            <View style={[s.dot, i <= current && s.on]} />
+            <Text variant="caption" tone={i === current ? 'default' : 'muted'}>
+              {x.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/blocks/site-preview-frame/index.ts

@@ -0,0 +1,5 @@
+export {
+  SitePreviewFrame,
+  type SitePreviewFrameProps,
+  type SitePublishStatus,
+} from './site-preview-frame';

package/src/blocks/site-preview-frame/site-preview-frame.tsx

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react';
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { Photo } from '../../components/photo/photo';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+
+export type SitePublishStatus = 'draft' | 'published' | 'unpublishedChanges';
+
+export type SitePreviewFrameProps = {
+  /** 사이트 화면 이미지 */
+  screenshot?: ImageSourcePropType;
+  /** 실제 사이트를 띄울 때(WebView 등). screenshot보다 우선 */
+  renderPreview?: () => ReactNode;
+  status: SitePublishStatus;
+  onPublish?: () => void;
+  publishing?: boolean;
+  /** 직전 게시본으로 되돌리기 */
+  onRevert?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[3] },
+  device: {
+    alignSelf: 'center',
+    width: '72%',
+    maxWidth: 300,
+    aspectRatio: 9 / 19.5,
+    padding: t.space[2],
+    borderRadius: 36,
+    backgroundColor: t.colors.foreground,
+    boxShadow: t.shadow.md,
+  },
+  screen: {
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius: 28,
+    backgroundColor: t.colors.background,
+  },
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    minHeight: 60,
+    paddingLeft: t.space[4],
+    paddingRight: t.space[2],
+    borderRadius: t.radius.lg,
+    backgroundColor: t.colors.muted,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: t.colors.warning,
+  },
+  barLabel: { flex: 1 },
+  barButton: { paddingHorizontal: t.space[4] },
+  actions: { gap: t.space[2] },
+}));
+
+/** 만든 사이트 미리보기와 게시 */
+export function SitePreviewFrame({
+  screenshot,
+  renderPreview,
+  status,
+  onPublish,
+  publishing,
+  onRevert,
+  style,
+}: SitePreviewFrameProps) {
+  const s = useStyles();
+  return (
+    <View style={[s.root, style]}>
+      <View style={s.device} accessibilityLabel="사이트 미리보기">
+        <View style={s.screen}>
+          {renderPreview ? (
+            renderPreview()
+          ) : screenshot ? (
+            <Photo source={screenshot} aspectRatio={9 / 19.5} radius={0} />
+          ) : null}
+        </View>
+      </View>
+      {status === 'unpublishedChanges' ? (
+        <View accessibilityLiveRegion="polite" style={s.bar}>
+          <View style={s.dot} />
+          <Text weight="semibold" style={s.barLabel}>
+            게시 안 된 변경사항
+          </Text>
+          {onPublish ? (
+            <Button
+              size="sm"
+              onPress={onPublish}
+              loading={publishing}
+              style={s.barButton}
+            >
+              게시
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={s.actions}>
+        {onPublish && status === 'draft' ? (
+          <Button size="lg" onPress={onPublish} loading={publishing}>
+            사이트 게시하기
+          </Button>
+        ) : null}
+        {onRevert && status !== 'draft' ? (
+          <Button variant="ghost" onPress={onRevert}>
+            직전 게시본으로 되돌리기
+          </Button>
+        ) : null}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps } from './stat-card';

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/text/text';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+export type StatCardProps = {
+  /** 예) '오늘 매출' */
+  label: string;
+  /** 이미 포맷된 값. 예) '1,234,000원', '42건' */
+  value: string;
+  /** 직전 기간 대비 증감률(%). 오르면 빨강, 내리면 파랑 */
+  change?: number | null;
+  /** 오른쪽 작은 차트. 예) <Sparkline /> (@ezpg/app-ui/charts) */
+  chart?: ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  row: { flexDirection: 'row', alignItems: 'flex-end', gap: t.space[3] },
+  body: { flex: 1, gap: t.space[1] },
+  value: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'baseline',
+    columnGap: t.space[2],
+  },
+  down: { color: t.colors.info },
+}));
+
+/** 핵심 숫자 하나와 증감 */
+export function StatCard({
+  label,
+  value,
+  change,
+  chart,
+  onPress,
+  style,
+}: StatCardProps) {
+  const s = useStyles();
+  const hasChange =
+    change !== undefined && change !== null && Number.isFinite(change);
+  const flat = hasChange && Math.abs(change) < 0.05;
+  const up = hasChange && change > 0;
+  const rate = hasChange ? `${Math.abs(change).toFixed(1)}%` : '';
+  return (
+    <Card
+      onPress={onPress}
+      accessibilityLabel={`${label} ${value}${
+        hasChange && !flat ? ` ${rate} ${up ? '증가' : '감소'}` : ''
+      }`}
+      style={style}
+    >
+      <View style={s.row}>
+        <View style={s.body}>
+          <Text tone="muted">{label}</Text>
+          <View style={s.value}>
+            <Text variant="title" weight="bold">
+              {value}
+            </Text>
+            {hasChange ? (
+              <Text
+                weight="bold"
+                tone={flat ? 'muted' : up ? 'destructive' : 'default'}
+                style={!flat && !up && s.down}
+              >
+                {flat ? '변동 없음' : `${up ? '▲' : '▼'} ${rate}`}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        {chart}
+      </View>
+    </Card>
+  );
+}

package/src/blocks/step-screen/index.ts

@@ -0,0 +1,5 @@
+export {
+  StepScreen,
+  type StepAction,
+  type StepScreenProps,
+} from './step-screen';

package/src/blocks/step-screen/step-screen.tsx

@@ -0,0 +1,137 @@
+import type { ReactNode } from 'react';
+import { KeyboardAvoidingView, ScrollView, View } from 'react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/text/text';
+import { ChevronGlyph } from '../../internal/glyphs';
+import { PressableBase } from '../../internal/pressable-base';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type StepAction = {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+export type StepScreenProps = {
+  title: string;
+  /** 넘기면 상단에 진행 막대 */
+  total?: number;
+  /** 0부터 */
+  current?: number;
+  /** 넘기면 상단에 이전 버튼 */
+  onBack?: () => void;
+  /** 이전 버튼의 접근성 라벨. 기본 '이전' */
+  backLabel?: string;
+  primaryAction: StepAction;
+  secondaryAction?: StepAction;
+  /** 하단 안전 영역 높이 */
+  bottomInset?: number;
+  children?: ReactNode;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { flex: 1, backgroundColor: t.colors.background },
+  header: {
+    height: 52,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: t.space[1],
+  },
+  back: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backIcon: { transform: [{ scaleX: -1 }] },
+  track: { height: 3, backgroundColor: t.colors.muted },
+  fill: { height: 3, backgroundColor: t.colors.primary },
+  body: {
+    gap: t.space[5],
+    paddingTop: t.space[6],
+    paddingHorizontal: t.space[5],
+    paddingBottom: t.space[4],
+  },
+  title: { fontSize: 24, lineHeight: 32 },
+  footer: {
+    gap: t.space[2],
+    paddingHorizontal: t.space[5],
+    paddingTop: t.space[3],
+    backgroundColor: t.colors.background,
+  },
+}));
+
+/** 온보딩 한 단계의 화면 틀: 이전 · 진행 막대 · 제목 · 내용 · 하단 버튼 */
+export function StepScreen({
+  title,
+  total,
+  current = 0,
+  onBack,
+  backLabel = '이전',
+  primaryAction,
+  secondaryAction,
+  bottomInset = 0,
+  children,
+}: StepScreenProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const step = total ? Math.min(total, Math.max(1, current + 1)) : 0;
+  return (
+    <KeyboardAvoidingView behavior="padding" style={s.root}>
+      {onBack ? (
+        <View style={s.header}>
+          <PressableBase
+            onPress={onBack}
+            accessibilityLabel={backLabel}
+            style={s.back}
+          >
+            <View style={s.backIcon}>
+              <ChevronGlyph color={t.colors.foreground} size={24} />
+            </View>
+          </PressableBase>
+        </View>
+      ) : null}
+      {total ? (
+        <View
+          accessibilityRole="progressbar"
+          accessibilityLabel={`${total}단계 중 ${step}단계`}
+          accessibilityValue={{ min: 1, max: total, now: step }}
+          style={s.track}
+        >
+          <View style={[s.fill, { width: `${(step / total) * 100}%` }]} />
+        </View>
+      ) : null}
+      <ScrollView
+        contentContainerStyle={s.body}
+        keyboardShouldPersistTaps="handled"
+      >
+        <Text weight="bold" accessibilityRole="header" style={s.title}>
+          {title}
+        </Text>
+        {children}
+      </ScrollView>
+      <View style={[s.footer, { paddingBottom: t.space[4] + bottomInset }]}>
+        <Button
+          size="lg"
+          onPress={primaryAction.onPress}
+          disabled={primaryAction.disabled}
+          loading={primaryAction.loading}
+        >
+          {primaryAction.label}
+        </Button>
+        {secondaryAction ? (
+          <Button
+            variant="ghost"
+            onPress={secondaryAction.onPress}
+            disabled={secondaryAction.disabled}
+            loading={secondaryAction.loading}
+          >
+            {secondaryAction.label}
+          </Button>
+        ) : null}
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/blocks/supply-item-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  SupplyItemCard,
+  type SupplyItemCardProps,
+  type SupplyOption,
+  type SupplyQuantity,
+} from './supply-item-card';

package/src/blocks/supply-item-card/supply-item-card.tsx

@@ -0,0 +1,145 @@
+import {
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Button } from '../../components/button/button';
+import { ChipGroup } from '../../components/chip-group/chip-group';
+import { Photo } from '../../components/photo/photo';
+import { formatPrice } from '../../components/price/price';
+import { Text } from '../../components/text/text';
+import { PressableBase } from '../../internal/pressable-base';
+import { makeStyles } from '../../utils/styles';
+import { Card } from '../internal/card';
+
+/** 예) { id: 'm', label: '중 20×25cm' } */
+export type SupplyOption = { id: string; label: string };
+
+/** 묶음 수량과 그 가격 */
+export type SupplyQuantity = { quantity: number; price: number };
+
+export type SupplyItemCardProps = {
+  name: string;
+  image: ImageSourcePropType;
+  /** 2개 이상이면 칩으로 고른다 */
+  options?: readonly SupplyOption[];
+  selectedOptionId?: string | null;
+  onSelectOption?: (id: string) => void;
+  /** 선택한 옵션의 수량별 가격 */
+  quantities: readonly SupplyQuantity[];
+  selectedQuantity: number | null;
+  onSelectQuantity: (quantity: number) => void;
+  /** 기본 '장' */
+  unit?: string;
+  onAdd?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  card: { gap: t.space[4] },
+  head: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
+  image: { width: 64 },
+  name: { flex: 1 },
+  group: {
+    borderWidth: 1,
+    borderColor: t.colors.border,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: t.space[3],
+    minHeight: 52,
+    paddingHorizontal: 14,
+  },
+  divided: { borderTopWidth: 1, borderTopColor: t.colors.border },
+  pressed: { backgroundColor: t.colors.muted },
+  radio: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: t.colors.input,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioOn: { borderColor: t.colors.primary },
+  radioDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: t.colors.primary,
+  },
+  quantity: { flex: 1 },
+}));
+
+/** 로고를 넣어 주문하는 공급 품목. 사이즈 · 수량을 고르고 담는다 */
+export function SupplyItemCard({
+  name,
+  image,
+  options = [],
+  selectedOptionId = null,
+  onSelectOption,
+  quantities,
+  selectedQuantity,
+  onSelectQuantity,
+  unit = '장',
+  onAdd,
+  style,
+}: SupplyItemCardProps) {
+  const s = useStyles();
+  const selected = quantities.find((q) => q.quantity === selectedQuantity);
+  return (
+    <Card style={[s.card, style]}>
+      <View style={s.head}>
+        <View style={s.image}>
+          <Photo source={image} />
+        </View>
+        <Text variant="bodyLg" weight="bold" style={s.name}>
+          {name}
+        </Text>
+      </View>
+      {options.length > 1 ? (
+        <ChipGroup
+          items={options.map((o) => ({ value: o.id, label: o.label }))}
+          value={selectedOptionId}
+          onValueChange={(id) => id && onSelectOption?.(id)}
+        />
+      ) : null}
+      <View accessibilityRole="radiogroup" style={s.group}>
+        {quantities.map((q, i) => {
+          const on = q.quantity === selectedQuantity;
+          const qty = `${formatPrice(q.quantity, '')}${unit}`;
+          return (
+            <PressableBase
+              key={q.quantity}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: on }}
+              accessibilityLabel={`${qty} ${formatPrice(q.price)}`}
+              pressedStyle={s.pressed}
+              onPress={() => onSelectQuantity(q.quantity)}
+              style={[s.row, i > 0 && s.divided]}
+            >
+              <View style={[s.radio, on && s.radioOn]}>
+                {on ? <View style={s.radioDot} /> : null}
+              </View>
+              <Text weight={on ? 'semibold' : undefined} style={s.quantity}>
+                {qty}
+              </Text>
+              <Text weight={on ? 'semibold' : undefined}>
+                {formatPrice(q.price)}
+              </Text>
+            </PressableBase>
+          );
+        })}
+      </View>
+      {onAdd ? (
+        <Button size="lg" disabled={!selected} onPress={onAdd}>
+          {selected ? `${formatPrice(selected.price)} 담기` : '담기'}
+        </Button>
+      ) : null}
+    </Card>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,2 @@
+export { LineChart, type ChartDatum, type LineChartProps } from './line-chart';
+export { Sparkline, type SparklineProps } from './sparkline';