@ezpg/app-ui 0.1.0 → 0.2.0

package/src/charts/sparkline.tsx

@@ -7,17 +7,13 @@ import { summarize } from './summary';
 
 export type SparklineProps = {
   data: readonly number[];
-  /** 기본 80 */
   width?: number;
-  /** 기본 24 */
   height?: number;
-  /** 기본 primary */
   color?: string;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 축 없는 작은 추세선 */
 export function Sparkline({
   data,
   width = 80,

package/src/charts/summary.ts

@@ -1,4 +1,3 @@
-/** 차트 전체를 한 문장으로. 스크린 리더용 */
 export function summarize(
   values: number[],
   format: (v: number) => string

package/src/components/button/button.tsx

@@ -16,11 +16,8 @@ export type ButtonProps = Omit<
   PressableBaseProps,
   'children' | 'touchHeight'
 > & {
-  /** 기본 'solid' */
   variant?: ButtonVariant;
-  /** 기본 'md' */
   size?: ButtonSize;
-  /** 스피너를 보여주고 누를 수 없게 한다 */
   loading?: boolean;
   leftIcon?: IconSlot;
   rightIcon?: IconSlot;

package/src/components/chip/chip.tsx

@@ -10,6 +10,7 @@ import { makeStyles } from '../../utils/styles';
 export type ChipProps = Omit<PressableBaseProps, 'children' | 'touchHeight'> & {
   selected?: boolean;
   leftIcon?: IconSlot;
+  count?: number;
   children: string;
 };
 
@@ -38,14 +39,17 @@ const useStyles = makeStyles((t) => ({
     lineHeight: 20,
     fontWeight: '500',
   },
+  count: { fontVariant: ['tabular-nums'], fontWeight: '700' },
 }));
 
 export function Chip({
   selected = false,
   leftIcon,
+  count,
   children,
   style,
   accessibilityState,
+  accessibilityLabel,
   ...rest
 }: ChipProps) {
   const t = useTheme();
@@ -54,6 +58,10 @@ export function Chip({
   return (
     <PressableBase
       {...rest}
+      accessibilityLabel={
+        accessibilityLabel ??
+        (count === undefined ? undefined : `${children}, ${count}건`)
+      }
       accessibilityState={{ ...accessibilityState, selected }}
       touchHeight={HEIGHT}
       style={[s.base, selected && s.selected, style]}
@@ -68,6 +76,15 @@ export function Chip({
       >
         {children}
       </Text>
+      {count === undefined ? null : (
+        <Text
+          numberOfLines={1}
+          maxFontSizeMultiplier={t.maxFontScale}
+          style={[s.label, s.count, { color }]}
+        >
+          {count}
+        </Text>
+      )}
     </PressableBase>
   );
 }

package/src/components/chip-group/chip-group.tsx

@@ -5,6 +5,7 @@ import { Chip } from '../chip/chip';
 export type ChipGroupItem<T extends string> = {
   value: T;
   label: string;
+  count?: number;
   disabled?: boolean;
 };
 
@@ -12,7 +13,6 @@ type Single<T extends string> = {
   multiple?: false;
   value: T | null;
   onValueChange: (value: T | null) => void;
-  /** 선택된 칩을 다시 누르면 해제. 기본 false */
   deselectable?: boolean;
 };
 
@@ -20,7 +20,6 @@ type Multiple<T extends string> = {
   multiple: true;
   value: readonly T[];
   onValueChange: (value: T[]) => void;
-  /** 최대 선택 개수 */
   max?: number;
 };
 
@@ -70,6 +69,7 @@ export function ChipGroup<T extends string>(props: ChipGroupProps<T>) {
           <Chip
             key={item.value}
             selected={selected}
+            count={item.count}
             disabled={item.disabled || (full && !selected)}
             accessibilityRole={props.multiple ? 'checkbox' : 'radio'}
             accessibilityState={

package/src/components/dialog/dialog.tsx

@@ -9,17 +9,11 @@ export type DialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title: string;
-  /** 확인을 눌렀을 때. 닫는 것은 부모가 onOpenChange로 정한다 */
   onConfirm: () => void;
-  /** 기본 '확인' */
   confirmLabel?: string;
-  /** 기본 '취소' */
   cancelLabel?: string;
-  /** 되돌릴 수 없는 작업이면 확인 버튼을 destructive로 */
   destructive?: boolean;
-  /** 확인 버튼을 로딩 상태로 */
   loading?: boolean;
-  /** false면 배경 · 뒤로가기로 닫히지 않는다. 기본 true */
   dismissible?: boolean;
 };
 
@@ -49,7 +43,6 @@ const useStyles = makeStyles((t) => ({
   action: { flex: 1, borderRadius: t.radius.lg },
 }));
 
-/** 확인 · 취소를 묻는 대화상자. 제목 한 줄로 무엇을 하는지 말한다 */
 export function Dialog({
   open,
   onOpenChange,

package/src/components/divider/divider.tsx

@@ -2,12 +2,10 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import { useTheme } from '../../theme/theme-provider';
 
 export type DividerProps = {
-  /** 왼쪽 들여쓰기(px). ListRow의 leading 뒤부터 긋을 때 쓴다 */
   inset?: number;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 가로 구분선. 목록에서는 FlatList의 ItemSeparatorComponent로 쓴다 */
 export function Divider({ inset = 0, style }: DividerProps) {
   const t = useTheme();
   return (

package/src/components/empty-state/empty-state.tsx

@@ -6,21 +6,12 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 import { Button } from '../button/button';
 
-/**
- * - default: 목록 전체가 비었을 때
- * - search: 검색 · 필터 결과가 없을 때 (결과 변화를 화면낭독기에 알림)
- * - error: 불러오지 못했을 때
- * - section: 화면 안 한 섹션이 비었을 때 (한 줄)
- */
 export type EmptyStateVariant = 'default' | 'search' | 'error' | 'section';
 
 export type EmptyStateProps = {
-  /** 상태를 말하는 한 줄. 예) '아직 주문이 없어요' */
   title: string;
   variant?: EmptyStateVariant;
-  /** 기본: search는 검색, error는 경고 아이콘 */
   icon?: IconSlot;
-  /** 다음 행동 하나. section에서는 텍스트 링크로 보인다 */
   action?: { label: string; onPress: () => void; icon?: IconSlot };
   style?: StyleProp<ViewStyle>;
 };
@@ -28,7 +19,6 @@ export type EmptyStateProps = {
 const ICON = { screen: 40, section: 20 };
 
 const useStyles = makeStyles((t) => ({
-  // 시각 중심을 맞추려고 아래쪽을 더 띄운다
   screen: {
     flexGrow: 1,
     alignItems: 'center',
@@ -74,7 +64,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/** 비어 있거나 불러오지 못한 상태. 설명 문단 없이 아이콘 · 한 줄 · 행동 하나로 보여준다 */
 export function EmptyState({
   title,
   variant = 'default',

package/src/components/field/field.tsx

@@ -15,11 +15,11 @@ import { makeStyles } from '../../utils/styles';
 export type FieldProps = Omit<TextInputProps, 'style'> & {
   ref?: Ref<ComponentRef<typeof TextInput>>;
   label?: string;
-  /** 있으면 오류 상태로 표시하고 입력칸 아래에 보여준다 */
   error?: string;
+  hint?: string;
+  warning?: string;
   leading?: IconSlot;
   trailing?: IconSlot;
-  /** 바깥 컨테이너 스타일 */
   style?: StyleProp<ViewStyle>;
 };
 
@@ -43,7 +43,6 @@ const useStyles = makeStyles((t) => ({
     borderColor: t.colors.input,
     backgroundColor: t.colors.background,
   },
-  // 테두리가 두꺼워져도 글자가 밀리지 않게 padding을 줄인다
   focused: {
     borderWidth: 2,
     paddingHorizontal: t.space[4] - 1,
@@ -71,11 +70,39 @@ const useStyles = makeStyles((t) => ({
     color: t.colors.destructive,
   },
   errorLabel: { color: t.colors.destructive },
+  warned: {
+    borderWidth: 2,
+    paddingHorizontal: t.space[4] - 1,
+    borderColor: t.colors.warning,
+  },
+  noteRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: t.space[1],
+    paddingLeft: t.space[1],
+  },
+  grow: { flex: 1, paddingLeft: 0 },
+  hint: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.mutedForeground,
+  },
+  warning: {
+    fontFamily: t.fontFamily,
+    fontSize: 13,
+    lineHeight: 18,
+    paddingLeft: t.space[1],
+    color: t.colors.foreground,
+  },
 }));
 
 export function Field({
   label,
   error,
+  hint,
+  warning,
   leading,
   trailing,
   style,
@@ -88,6 +115,8 @@ export function Field({
   const s = useStyles();
   const [focused, setFocused] = useState(false);
   const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
+  const warn = error ? undefined : warning;
+  const note = error ?? warn ?? hint;
 
   return (
     <View style={[s.root, style]}>
@@ -104,6 +133,7 @@ export function Field({
           s.frame,
           focused && s.focused,
           !!error && s.invalid,
+          !!warn && s.warned,
           !editable && s.disabled,
         ]}
       >
@@ -113,7 +143,7 @@ export function Field({
           selectionColor={t.colors.ring}
           maxFontSizeMultiplier={t.maxFontScale}
           accessibilityLabel={label}
-          accessibilityHint={error}
+          accessibilityHint={note}
           {...input}
           editable={editable}
           style={s.input}
@@ -145,6 +175,26 @@ export function Field({
         >
           {error}
         </Text>
+      ) : warn ? (
+        <View style={s.noteRow}>
+          <AlertGlyph
+            filled
+            color={t.colors.warning}
+            onColor={t.colors.warningForeground}
+            size={t.iconSize.sm}
+          />
+          <Text
+            maxFontSizeMultiplier={t.maxFontScale}
+            accessibilityLiveRegion="polite"
+            style={[s.warning, s.grow]}
+          >
+            {warn}
+          </Text>
+        </View>
+      ) : hint ? (
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.hint}>
+          {hint}
+        </Text>
       ) : null}
     </View>
   );

package/src/components/list-row/list-row.tsx

@@ -15,11 +15,8 @@ export type ListRowProps = Omit<
   title: string;
   description?: string;
   leading?: IconSlot;
-  /** 오른쪽 내용 (Switch, StatusBadge, 값 텍스트 등) */
   trailing?: IconSlot;
-  /** 오른쪽 화살표. 기본은 onPress가 있을 때 true */
   chevron?: boolean;
-  /** 제목 줄 수. 기본 1 */
   titleLines?: number;
 };
 

package/src/components/photo/photo.tsx

@@ -12,11 +12,8 @@ import { useTheme } from '../../theme/theme-provider';
 
 export type PhotoProps = Omit<ImageProps, 'source' | 'style'> & {
   source: ImageSourcePropType;
-  /** 가로 / 세로. 기본 1 */
   aspectRatio?: number;
-  /** 기본 radius.md */
   radius?: number;
-  /** 불러오지 못했을 때 보여줄 내용 */
   fallback?: ReactNode;
   style?: StyleProp<ViewStyle>;
 };
@@ -27,9 +24,7 @@ function sourceKey(source: ImageSourcePropType): string {
   return (source as { uri?: string }).uri ?? '';
 }
 
-/** 로딩 중에는 muted 배경, 실패하면 fallback을 보여주는 이미지 */
 export function Photo(props: PhotoProps) {
-  // 주소가 바뀌면 로딩 · 실패 상태를 처음부터 다시 잡는다.
   return <PhotoInner key={sourceKey(props.source)} {...props} />;
 }
 

package/src/components/price/price.tsx

@@ -3,7 +3,6 @@ import type { TypographyVariant } from '../../types';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-/** 12000 → '12,000원'. 웹 · Jest · 네이티브에서 같은 결과를 내도록 Intl을 쓰지 않는다 */
 export function formatPrice(value: number, unit = '원'): string {
   const n = Math.round(value);
   const digits = String(Math.abs(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
@@ -12,9 +11,7 @@ export function formatPrice(value: number, unit = '원'): string {
 
 export type PriceProps = {
   value: number;
-  /** 할인 전 가격. value보다 클 때만 취소선으로 표시한다 */
   originalValue?: number;
-  /** 기본 'body' */
   variant?: TypographyVariant;
   unit?: string;
   style?: StyleProp<ViewStyle>;

package/src/components/progress-bar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './progress-bar';

package/src/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,80 @@
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme/theme-provider';
+import { makeStyles } from '../../utils/styles';
+
+export type ProgressBarProps = {
+  done: number;
+  total: number;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const useStyles = makeStyles((t) => ({
+  root: { gap: t.space[2] },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: t.space[2],
+  },
+  label: {
+    ...t.typography.body,
+    flex: 1,
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+    color: t.colors.foreground,
+  },
+  count: {
+    ...t.typography.body,
+    marginLeft: 'auto',
+    fontFamily: t.fontFamily,
+    fontVariant: ['tabular-nums'],
+    color: t.colors.mutedForeground,
+  },
+  strong: { fontWeight: '700', color: t.colors.foreground },
+  track: {
+    height: 6,
+    borderRadius: t.radius.full,
+    overflow: 'hidden',
+    backgroundColor: t.colors.muted,
+  },
+  fill: {
+    height: '100%',
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.primary,
+  },
+}));
+
+export function ProgressBar({ done, total, label, style }: ProgressBarProps) {
+  const t = useTheme();
+  const s = useStyles();
+  const max = Math.max(0, total);
+  const now = Math.min(Math.max(0, done), max);
+  const ratio = max > 0 ? now / max : 0;
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`${label ? `${label}, ` : ''}${max}건 중 ${now}건`}
+      accessibilityValue={{ min: 0, max, now }}
+      style={[s.root, style]}
+    >
+      <View style={s.head}>
+        {label ? (
+          <Text
+            numberOfLines={2}
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={s.label}
+          >
+            {label}
+          </Text>
+        ) : null}
+        <Text maxFontSizeMultiplier={t.maxFontScale} style={s.count}>
+          <Text style={s.strong}>{now}</Text>/{max}
+        </Text>
+      </View>
+      <View style={s.track}>
+        <View style={[s.fill, { width: `${ratio * 100}%` }]} />
+      </View>
+    </View>
+  );
+}

package/src/components/search-field/search-field.tsx

@@ -9,7 +9,6 @@ export type SearchFieldProps = Omit<
 > & {
   value: string;
   onChangeText: (text: string) => void;
-  /** 지우기 버튼의 접근성 라벨. 기본 '검색어 지우기' */
   clearLabel?: string;
 };
 

package/src/components/segmented-tabs/segmented-tabs.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from '../../utils/styles';
 export type SegmentedTabsItem<T extends string> = { value: T; label: string };
 
 export type SegmentedTabsProps<T extends string> = {
-  /** 2~4개 */
   items: readonly SegmentedTabsItem<T>[];
   value: T;
   onValueChange: (value: T) => void;

package/src/components/sheet/sheet.tsx

@@ -18,11 +18,8 @@ export type SheetProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   title?: string;
-  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
   bottomInset?: number;
-  /** false면 배경을 눌러도 닫히지 않는다. 기본 true */
   dismissible?: boolean;
-  /** 배경 닫기 버튼의 접근성 라벨. 기본 '닫기' */
   closeLabel?: string;
   children: ReactNode;
   style?: StyleProp<ViewStyle>;

package/src/components/skeleton/skeleton.tsx

@@ -10,16 +10,12 @@ import { useReducedMotion } from '../../internal/use-reduced-motion';
 import { useTheme } from '../../theme/theme-provider';
 
 export type SkeletonProps = {
-  /** 기본 '100%' */
   width?: DimensionValue;
-  /** 기본 16 */
   height?: DimensionValue;
-  /** 기본 radius.sm */
   radius?: number;
   style?: StyleProp<ViewStyle>;
 };
 
-/** 불러오는 중인 자리. '동작 줄이기'가 켜져 있으면 깜빡이지 않는다 */
 export function Skeleton({
   width = '100%',
   height = 16,

package/src/components/status-badge/status-badge.tsx

@@ -6,7 +6,6 @@ export type StatusBadgeTone =
   'neutral' | 'info' | 'success' | 'warning' | 'destructive';
 
 export type StatusBadgeProps = {
-  /** 기본 'neutral' */
   tone?: StatusBadgeTone;
   children: string;
   style?: StyleProp<ViewStyle>;

package/src/components/switch/switch.tsx

@@ -13,11 +13,13 @@ export type SwitchProps = Omit<RNSwitchProps, 'value' | 'onValueChange'> & {
 
 export function Switch({ disabled, style, ...rest }: SwitchProps) {
   const t = useTheme();
+  const offThumb =
+    t.scheme === 'dark' ? t.colors.mutedForeground : t.colors.background;
   return (
     <RNSwitch
-      trackColor={{ false: t.colors.border, true: t.colors.primary }}
-      thumbColor={t.colors.background}
-      ios_backgroundColor={t.colors.border}
+      trackColor={{ false: t.colors.input, true: t.colors.primary }}
+      thumbColor={rest.value ? t.colors.primaryForeground : offThumb}
+      ios_backgroundColor={t.colors.input}
       {...rest}
       disabled={disabled}
       style={[disabled && { opacity: t.opacity.disabled }, style]}

package/src/components/text/text.tsx

@@ -8,11 +8,8 @@ export type TextTone = 'default' | 'muted' | 'destructive' | 'success';
 
 export type TextProps = RNTextProps & {
   ref?: Ref<ComponentRef<typeof RNText>>;
-  /** 기본 'body' */
   variant?: TypographyVariant;
-  /** 기본 'default' */
   tone?: TextTone;
-  /** 지정하지 않으면 variant의 굵기 */
   weight?: TextWeight;
 };
 

package/src/components/toast/toast.tsx

@@ -25,11 +25,8 @@ export type ToastTone = 'neutral' | 'success' | 'destructive';
 
 export type ToastOptions = {
   message: string;
-  /** 기본 'neutral' */
   tone?: ToastTone;
-  /** ms. 기본 2500, action이 있으면 4000 */
   duration?: number;
-  /** 메시지 오른쪽 텍스트 버튼 (예: 실행 취소). 누르면 Toast가 닫힌다 */
   action?: ToastAction;
 };
 
@@ -42,7 +39,6 @@ type Current = {
   action?: ToastAction;
 };
 
-/** Provider 하나가 가진 상태. show를 불러도 Provider 아래 화면은 다시 렌더링되지 않는다. */
 function createToastStore() {
   let current: Current | null = null;
   let timer: ReturnType<typeof setTimeout> | undefined;
@@ -66,7 +62,6 @@ function createToastStore() {
       };
     },
     getCurrent: () => current,
-    /** 가장 나중에 붙은 host(가장 위의 Modal)만 그린다 */
     getTopHost: () => hosts[hosts.length - 1],
     addHost(id: string) {
       hosts = [...hosts, id];
@@ -93,7 +88,6 @@ type ToastStore = ReturnType<typeof createToastStore>;
 const StoreContext = createContext<ToastStore | null>(null);
 
 export type ToastProviderProps = {
-  /** 하단 안전 영역 높이. 앱의 safe-area 값을 넘긴다 */
   bottomInset?: number;
   children: ReactNode;
 };
@@ -152,10 +146,6 @@ const useStyles = makeStyles((t) => ({
   },
 }));
 
-/**
- * Toast를 그리는 자리. Provider가 하나 두고, Modal을 쓰는 컴포넌트(Sheet · Dialog)가
- * Modal 안에 하나씩 더 둔다. 가장 위의 host만 그린다.
- */
 export function ToastHost() {
   const store = useContext(StoreContext);
   return store ? <ToastHostInner store={store} /> : null;
@@ -195,7 +185,6 @@ function ToastHostInner({ store }: { store: ToastStore }) {
     success: [t.colors.success, t.colors.successForeground],
     destructive: [t.colors.destructive, t.colors.destructiveForeground],
   }[current.tone];
-  // 어두운 바탕(light) 위에서는 밝은 파랑, 밝은 바탕(dark) 위에서는 진한 파랑
   const actionColor =
     current.tone !== 'neutral'
       ? fg

package/src/components/wizard-steps/wizard-steps.tsx

@@ -3,9 +3,7 @@ import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
 export type WizardStepsProps = {
-  /** 단계 이름 */
   steps: readonly string[];
-  /** 지금 단계 (0부터) */
   current: number;
   style?: StyleProp<ViewStyle>;
 };
@@ -28,7 +26,6 @@ const useStyles = makeStyles((t) => ({
   name: { color: t.colors.foreground, fontWeight: '600' },
 }));
 
-/** 여러 단계로 나뉜 입력 흐름의 진행 표시 */
 export function WizardSteps({ steps, current, style }: WizardStepsProps) {
   const t = useTheme();
   const s = useStyles();

package/src/index.tsx

@@ -32,6 +32,7 @@ export * from './components/field';
 export * from './components/list-row';
 export * from './components/photo';
 export * from './components/price';
+export * from './components/progress-bar';
 export * from './components/search-field';
 export * from './components/segmented-tabs';
 export * from './components/sheet';

package/src/internal/glyphs.tsx

@@ -1,8 +1,6 @@
 import { StyleSheet, View } from 'react-native';
 import type { IconRenderProps } from './icon';
 
-// svg 없이 그리는 최소 아이콘. 아이콘 세트는 앱이 슬롯으로 넣는다.
-
 export function SearchGlyph({ color, size }: IconRenderProps) {
   const ring = size * 0.62;
   const stroke = Math.max(1.5, size / 10);
@@ -97,7 +95,6 @@ export function ChevronGlyph({ color, size }: IconRenderProps) {
   );
 }
 
-/** filled면 원을 칠하고 느낌표를 onColor로 그린다 */
 export function AlertGlyph({
   color,
   size,

package/src/internal/icon.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
 
 export type IconRenderProps = { color: string; size: number };
 
-/** 아이콘 자리. 함수로 넘기면 컴포넌트의 글자색과 크기를 받는다. */
 export type IconSlot = ReactNode | ((props: IconRenderProps) => ReactNode);
 
 export function renderIcon(slot: IconSlot, props: IconRenderProps): ReactNode {

package/src/internal/overlay.tsx

@@ -5,10 +5,6 @@ import { useReducedMotion } from './use-reduced-motion';
 
 export const useNativeDriver = Platform.OS !== 'web';
 
-/**
- * Modal 위 패널의 열림 · 닫힘 전환. 닫힘 애니메이션이 끝난 뒤 mounted가 false가 된다.
- * progress는 0(닫힘) → 1(열림).
- */
 export function useOverlayTransition(open: boolean) {
   const t = useTheme();
   const reduced = useReducedMotion();

package/src/internal/pressable-base.tsx

@@ -10,13 +10,10 @@ import { useTheme } from '../theme/theme-provider';
 export type PressableBaseProps = Omit<PressableProps, 'style'> & {
   ref?: Ref<ComponentRef<typeof Pressable>>;
   style?: StyleProp<ViewStyle>;
-  /** 눌렸을 때 추가 스타일. 기본은 opacity.pressed */
   pressedStyle?: StyleProp<ViewStyle>;
-  /** 눈에 보이는 높이. 최소 터치 크기보다 작으면 hitSlop으로 보완한다 */
   touchHeight?: number;
 };
 
-/** 눌림 · 비활성 · 접근성 상태 · 최소 터치 영역을 한곳에서 처리하는 Pressable */
 export function PressableBase({
   style,
   pressedStyle,