@cashdoc/cashdoc-cms-design-system 1.0.12

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,106 @@
+import { VariantProps } from 'class-variance-authority';
+
+export declare const dropdownTriggerVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface DropdownProps extends VariantProps<typeof dropdownTriggerVariants> {
+    options: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    dropdownClassName?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    multiple?: boolean;
+    maxHeight?: number;
+}
+/**
+ * 사용자가 목록에서 하나 또는 여러 개의 옵션을 선택할 수 있게 하는 컴포넌트입니다.
+ *
+ * {@link Dropdown}은 공간이 제한적인 UI에서 다양한 선택지를 효율적으로 제공합니다.
+ * 검색 기능, 다중 선택(Multiple), 선택 해제(Clearable) 등 복잡한 선택 시나리오를 지원합니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **단일/다중 선택**: 5개 이상의 옵션 중 하나 또는 여러 개를 선택해야 할 때
+ * - **공간 절약**: 라디오 버튼이나 체크박스 그룹을 표시하기엔 화면 공간이 부족할 때
+ * - **동적 필터링**: 옵션이 너무 많아 검색을 통해 원하는 항목을 찾아야 할 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **옵션이 적은 경우(2-4개)**: 사용자가 모든 옵션을 한눈에 볼 수 있는 `RadioButton`이나 `Checkbox`가 더 좋습니다.
+ * - **설정 토글**: 단순히 On/Off를 전환하는 것이라면 `Switch`를 사용하세요.
+ * - **단순 내비게이션**: 클릭 시 다른 페이지로 이동만 하는 기능이라면 `Button`이나 `SideNavigation` 아이템이 더 적절합니다.
+ *
+ * ## Layout behavior
+ *
+ * - **Popover Menu**: 클릭 시 버튼 아래(또는 위)에 옵션 목록이 나타나며, 다른 요소들 위에 오버레이됩니다.
+ * - **Flexible Width**: 부모 컨테이너의 너비에 맞춰지거나, `className`을 통해 고정 너비를 가질 수 있습니다.
+ * - **Scrolling**: 옵션이 많아지면 `maxHeight` 설정에 따라 목록 내부에 스크롤이 발생합니다.
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **논리적 정렬**: 옵션 목록은 가나다순, 사용 빈도순 등 사용자가 예측 가능한 순서로 정렬하세요.
+ * - **검색 기능 활용**: 옵션이 10개 이상인 경우 `searchable` 속성을 활성화하여 편의성을 높이세요.
+ * - **상태 표시**: `placeholder`를 통해 무엇을 선택해야 하는지 안내하고, 선택 후에는 선택된 항목을 명확히 표시하세요.
+ *
+ * ### 🚫 Don't (주의/금지 사항)
+ *
+ * - **너무 많은 텍스트**: 각 옵션의 레이블은 가급적 한 줄에 들어오도록 짧게 작성하세요.
+ * - **중첩 드롭다운 지양**: 드롭다운 안에서 또 다른 드롭다운이 열리는 복잡한 계층 구조는 피하는 것이 좋습니다.
+ *
+ * ## Accessibility
+ *
+ * - **Keyboard Interaction**: `Enter`나 `Space`로 열고, 화살표 키로 이동하며, `Esc`로 닫을 수 있습니다.
+ * - **Screen Reader**: `aria-expanded`, `aria-haspopup` 등의 속성을 통해 드롭다운의 상태와 역할을 스크린 리더에 전달합니다.
+ * - **Focus Management**: 드롭다운이 열리면 검색창이나 첫 번째 옵션으로 포커스가 이동합니다.
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 기본적인 단일 선택 드롭다운:
+ *
+ * ```tsx
+ * <Dropdown
+ *   options={[
+ *     { value: 'ko', label: '한국어' },
+ *     { value: 'en', label: '영어' },
+ *     { value: 'ja', label: '일본어' },
+ *   ]}
+ *   placeholder="언어를 선택하세요"
+ *   onValueChange={(val) => console.log(val)}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 검색과 다중 선택이 가능한 드롭다운:
+ *
+ * ```tsx
+ * <Dropdown
+ *   options={largeOptionList}
+ *   multiple={true}
+ *   searchable={true}
+ *   clearable={true}
+ *   placeholder="태그 선택"
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * See also:
+ *
+ * - {@link Select}, 기본적인 HTML select 스타일의 컴포넌트
+ * - {@link Combobox}, 입력과 선택이 결합된 컴포넌트
+ * - {@link Popover}, 더 자유로운 형태의 팝오버가 필요한 경우
+ */
+export declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Dropdown/Select.d.ts

@@ -0,0 +1,87 @@
+import { DropdownProps } from './Dropdown';
+
+export interface SelectProps extends Omit<DropdownProps, "multiple" | "searchable" | "clearable"> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+}
+/**
+ * 사용자에게 레이블, 도움말, 에러 메시지와 함께 단일 선택 드롭다운을 제공하는 컴포넌트입니다.
+ *
+ * {@link Select}는 {@link Dropdown}을 기반으로 하며, 폼(Form) 구성에 필요한
+ * 추가적인 UI 요소(레이블, 필수 표시, 유효성 검사 메시지 등)를 포함하고 있습니다.
+ * 주로 입력 폼 내에서 하나의 값을 선택받아야 할 때 사용됩니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **표준 폼 입력**: 이름, 이메일 등과 함께 성별, 지역, 카테고리 등을 선택받을 때
+ * - **유효성 검사가 필요한 경우**: 선택하지 않았을 때 에러 메시지를 표시해야 하는 상황
+ * - **상세 설명 필요**: 입력 항목에 대한 추가적인 도움말(helperText)이 필요한 경우
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **단순 필터/정렬**: 레이블 없이 목록 위에 놓이는 필터 등은 `Dropdown`을 직접 사용하세요.
+ * - **다중 선택/검색**: 다중 선택이나 검색 기능이 필요하다면 `Dropdown` 또는 `Combobox`를 사용하세요.
+ *
+ * ## Layout behavior
+ *
+ * - **Vertical Stack**: 레이블 - 드롭다운 버튼 - 도움말/에러 메시지가 수직으로 배치됩니다.
+ * - **Consistency**: 다른 입력 컴포넌트(TextInput 등)와 동일한 간격과 스타일을 유지하여 일관된 폼 레이아웃을 구성합니다.
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **명확한 레이블**: 사용자가 무엇을 선택해야 하는지 알 수 있도록 구체적인 레이블을 제공하세요.
+ * - **필수 여부 표시**: `required` 속성을 사용하여 필수 입력 항목임을 시각적으로 나타내세요.
+ * - **에러 메시지 활용**: 유효성 검사 실패 시 `error` prop을 통해 구체적인 오류 원인을 안내하세요.
+ *
+ * ### 🚫 Don't (주의/금지 사항)
+ *
+ * - **레이블 생략 지양**: 폼 내에서는 접근성과 사용자 경험을 위해 가급적 레이블을 생략하지 마세요.
+ * - **과도한 도움말**: 도움말이 너무 길어지면 폼 전체의 가독성이 떨어집니다. 가급적 한 줄 이내로 작성하세요.
+ *
+ * ## Accessibility
+ *
+ * - **Label Association**: 레이블은 드롭다운 버튼과 논리적으로 연결되어 스크린 리더에서 함께 읽어줍니다.
+ * - **Error States**: 에러 상태가 되면 `aria-invalid` 등의 속성을 통해 시각 장애 사용자에게도 오류 상태를 전달합니다.
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 레이블과 필수 표시가 포함된 선택 창:
+ *
+ * ```tsx
+ * <Select
+ *   label="사용자 등급"
+ *   required={true}
+ *   options={[
+ *     { value: 'admin', label: '관리자' },
+ *     { value: 'editor', label: '편집자' },
+ *     { value: 'viewer', label: '뷰어' },
+ *   ]}
+ *   placeholder="등급을 선택해 주세요"
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 에러 메시지가 표시된 상태:
+ *
+ * ```tsx
+ * <Select
+ *   label="국가 선택"
+ *   options={countryOptions}
+ *   error="국가를 선택하는 것은 필수입니다"
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * See also:
+ *
+ * - {@link Dropdown}, 레이블 없이 단순한 선택 기능만 필요한 경우
+ * - {@link TextInput}, 텍스트 직접 입력이 필요한 경우
+ * - {@link RadioButton}, 옵션이 적고 한눈에 보여야 하는 경우
+ */
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { Dropdown, dropdownTriggerVariants, type DropdownProps, type DropdownOption, } from './Dropdown';
+export { Select, type SelectProps } from './Select';
+export { Combobox, type ComboboxProps } from './Combobox';

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,58 @@
+import { Accept } from 'react-dropzone';
+
+export interface FileUploadProps {
+    value?: File[];
+    onChange?: (files: File[]) => void;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: Accept;
+    disabled?: boolean;
+    className?: string;
+    onError?: (error: string) => void;
+}
+/**
+ * 드래그 앤 드롭 및 클릭을 통해 파일을 업로드할 수 있는 컴포넌트입니다.
+ *
+ * {@link FileUpload}는 사용자가 다양한 형식의 파일을 선택하고 업로드할 수 있게 합니다.
+ * 드래그 앤 드롭, 클릭하여 선택, 파일 목록 표시 등의 기능을 제공합니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **문서 첨부**: PDF, Word, Excel 등의 문서 파일을 업로드할 때
+ * - **다양한 파일 형식**: 이미지뿐만 아니라 여러 종류의 파일을 업로드할 때
+ * - **파일 목록 관리**: 업로드된 파일의 이름과 크기를 확인해야 할 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **이미지 전용**: 이미지만 업로드하고 미리보기가 필요한 경우는 {@link ImageUpload} 사용
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 기본 파일 업로드:
+ *
+ * ```tsx
+ * <FileUpload
+ *   onChange={(files) => console.log(files)}
+ *   maxFiles={1}
+ *   maxSize={10 * 1024 * 1024} // 10MB
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 다중 파일 업로드 (PDF만):
+ *
+ * ```tsx
+ * <FileUpload
+ *   onChange={(files) => console.log(files)}
+ *   maxFiles={5}
+ *   accept={{ "application/pdf": [".pdf"] }}
+ * />
+ * ```
+ * {@end-tool}
+ */
+export declare const FileUpload: {
+    ({ value, onChange, maxFiles, maxSize, accept, disabled, className, onError, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from './FileUpload';
+export type { FileUploadProps } from './FileUpload';

package/dist/components/ImageUpload/ImageUpload.d.ts

@@ -0,0 +1,154 @@
+import { Accept } from 'react-dropzone';
+
+export interface ImageMetadata {
+    width: number;
+    height: number;
+    aspectRatio: number;
+    size: number;
+}
+export interface ImageUploadProps {
+    value?: File[];
+    onChange?: (files: File[]) => void;
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: Accept;
+    disabled?: boolean;
+    className?: string;
+    showPreview?: boolean;
+    error?: boolean;
+    onError?: (error: string) => void;
+    validateImage?: (file: File, metadata: ImageMetadata) => string | null | Promise<string | null>;
+    placeholder?: string;
+    placeholderActive?: string;
+}
+/**
+ * 드래그 앤 드롭 및 클릭을 통해 이미지를 업로드할 수 있는 컴포넌트입니다.
+ *
+ * {@link ImageUpload}는 사용자가 이미지 파일을 선택하고 업로드할 수 있게 합니다.
+ * 드래그 앤 드롭, 클릭하여 선택, 미리보기 등의 기능을 제공합니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **프로필 이미지 업로드**: 사용자 프로필 사진 등록 시
+ * - **상품 이미지 등록**: 여러 상품 이미지를 한 번에 업로드해야 할 때
+ * - **문서 첨부**: 이미지 형태의 문서나 스크린샷을 첨부할 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **일반 파일 업로드**: 이미지가 아닌 다양한 형식의 파일을 업로드할 때는 일반 FileUpload 컴포넌트 사용
+ * - **대용량 파일**: 매우 큰 파일의 경우 진행률 표시가 있는 별도 업로드 컴포넌트 고려
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 기본 이미지 업로드:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   onChange={(files) => console.log(files)}
+ *   maxFiles={1}
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 다중 이미지 업로드:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   onChange={(files) => console.log(files)}
+ *   maxFiles={5}
+ *   showPreview={true}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 최소 이미지 크기 검증:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   validateImage={(file, metadata) => {
+ *     if (metadata.width < 800 || metadata.height < 600) {
+ *       return "이미지는 최소 800x600 이상이어야 합니다.";
+ *     }
+ *     return null;
+ *   }}
+ *   onError={(error) => alert(error)}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 정확한 이미지 크기 검증:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   validateImage={(file, metadata) => {
+ *     if (metadata.width !== 1920 || metadata.height !== 1080) {
+ *       return `이미지는 정확히 1920x1080이어야 합니다. (현재: ${metadata.width}x${metadata.height})`;
+ *     }
+ *     return null;
+ *   }}
+ *   onError={(error) => alert(error)}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 이미지 비율 검증:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   validateImage={(file, metadata) => {
+ *     const targetRatio = 16 / 9;
+ *     const tolerance = 0.1;
+ *     if (Math.abs(metadata.aspectRatio - targetRatio) > tolerance) {
+ *       return "이미지 비율은 16:9여야 합니다.";
+ *     }
+ *     return null;
+ *   }}
+ *   onError={(error) => alert(error)}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 복합 검증:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   validateImage={(file, metadata) => {
+ *     if (metadata.width > 4000) {
+ *       return "이미지 너비는 4000px를 초과할 수 없습니다.";
+ *     }
+ *     if (metadata.aspectRatio < 1) {
+ *       return "세로 이미지는 업로드할 수 없습니다.";
+ *     }
+ *     if (metadata.size > 2 * 1024 * 1024) {
+ *       return "파일 크기는 2MB를 초과할 수 없습니다.";
+ *     }
+ *     return null;
+ *   }}
+ *   onError={(error) => alert(error)}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 커스텀 안내 문구:
+ *
+ * ```tsx
+ * <ImageUpload
+ *   placeholder="상품 이미지를 업로드하세요"
+ *   placeholderActive="이미지를 드롭하세요"
+ *   onChange={(files) => console.log(files)}
+ * />
+ * ```
+ * {@end-tool}
+ */
+export declare const ImageUpload: {
+    ({ value, onChange, maxFiles, maxSize, accept, disabled, className, showPreview, error, onError, validateImage, placeholder, placeholderActive, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/ImageUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageUpload } from './ImageUpload';
+export type { ImageUploadProps } from './ImageUpload';

package/dist/components/LoadingCircle/LoadingCircle.d.ts

@@ -0,0 +1,76 @@
+interface LoadingCircleProps {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+/**
+ * 시스템이 데이터를 처리 중이거나 다음 화면을 준비 중임을 시각적으로 나타내는 인디케이터입니다.
+ *
+ * {@link LoadingCircle}은 회전하는 원형 애니메이션을 통해 작업이 진행 중임을 알려
+ * 사용자가 시스템이 멈춘 것으로 오해하지 않도록 돕습니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **데이터 로딩**: 페이지 진입 시 API로부터 데이터를 불러올 때
+ * - **작업 처리 중**: 버튼 클릭 후 서버 응답을 기다릴 때
+ * - **업로드/다운로드**: 파일 전송 상태를 표시할 때
+ * - **점진적 로딩**: 무한 스크롤 등 하단에 추가 데이터를 불러올 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **짧은 대기 시간**: 0.3초 미만의 아주 짧은 대기 시간에는 오히려 화면을 깜빡거리게 할 수 있으므로 생략하는 것이 좋습니다.
+ * - **진행률 표시**: 전체 작업 중 어느 정도 진행되었는지 정확한 수치가 중요한 경우 Progress Bar를 고려하세요.
+ *
+ * ## Layout behavior
+ *
+ * - **Centered**: 기본적으로 컨테이너의 중앙에 배치되도록 설정되어 있습니다.
+ * - **Fixed vs Inline**: 페이지 전체 로딩 시에는 고정된 위치(Overlay)에, 버튼 내부 등에는 인라인으로 배치할 수 있습니다.
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **적절한 크기 선택**: 로딩이 일어나는 맥락(페이지 전체, 카드 내부, 버튼 내부 등)에 맞는 `size`를 선택하세요.
+ * - **텍스트와 병행**: 필요한 경우 '불러오는 중...'과 같은 텍스트를 함께 표시하여 의미를 더 명확히 하세요.
+ *
+ * ### 🚫 Don't (주의/금지 사항)
+ *
+ * - **남용 지양**: 한 화면에 너무 많은 로딩 서클이 동시에 나타나면 사용자에게 피로감을 줄 수 있습니다.
+ * - **무한 로딩**: 작업이 실패한 경우 로딩을 멈추고 적절한 에러 메시지를 표시해야 합니다.
+ *
+ * ## Accessibility
+ *
+ * - **Role**: `role="status"` 또는 `role="progressbar"`를 사용하여 현재 상태를 스크린 리더에 알립니다.
+ * - **Aria Label**: 시각적으로 확인이 어려운 사용자를 위해 `aria-label="로딩 중"`과 같은 정보를 제공하는 것이 좋습니다.
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 기본적인 로딩 서클 사용 예시:
+ *
+ * ```tsx
+ * {isLoading ? (
+ *   <LoadingCircle size="md" />
+ * ) : (
+ *   <DataContent />
+ * )}
+ * ```
+ * {@end-tool}
+ *
+ * {@tool snippet}
+ * 버튼 내부의 로딩 상태:
+ *
+ * ```tsx
+ * <Button disabled={isSubmitting}>
+ *   {isSubmitting && <LoadingCircle size="sm" className="mr-2" />}
+ *   제출하기
+ * </Button>
+ * ```
+ * {@end-tool}
+ *
+ * See also:
+ *
+ * - {@link Button}, 버튼 자체의 로딩 상태를 지원함
+ * - {@link Modal}, 로딩 상태를 포함할 수 있는 오버레이
+ */
+export declare function LoadingCircle({ size, className }: LoadingCircleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingCircle/index.d.ts

@@ -0,0 +1 @@
+export { LoadingCircle } from './LoadingCircle';

package/dist/components/Modal/ConfirmModal.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+
+export interface ConfirmModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    message: React.ReactNode;
+    confirmText?: string;
+    onConfirm?: () => void;
+    className?: string;
+}
+/**
+ * 사용자에게 특정 작업에 대한 최종 확인을 받기 위한 단순화된 모달 컴포넌트입니다.
+ *
+ * {@link ConfirmModal}은 {@link Modal}을 기반으로 구성되었으며, 상징적인 체크 아이콘과
+ * 하나의 '확인' 버튼만을 제공하여 사용자의 빠른 의사결정을 돕습니다.
+ * 주로 성공적인 처리 알림이나 단순한 동의가 필요할 때 사용됩니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **결과 확인**: 설정 변경, 데이터 저장 등 작업이 정상적으로 완료되었음을 알릴 때
+ * - **단순 안내**: 사용자에게 중요한 안내 사항을 전달하고 확인을 받아야 할 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **중요한 결정/취소 필요**: '예/아니오'와 같이 선택지가 필요한 경우 일반 `Modal`이나 `DeleteModal`을 사용하세요.
+ * - **데이터 입력**: 폼 입력이 필요한 경우 일반 `Modal`을 사용하세요.
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **간결한 메시지**: 메시지는 가급적 2-3줄 이내로 짧고 명확하게 작성하세요.
+ * - **적절한 타이틀**: "저장 완료", "안내" 등 문맥에 맞는 타이틀을 사용하세요.
+ */
+export declare const ConfirmModal: React.ForwardRefExoticComponent<ConfirmModalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/DeleteModal.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+export interface DeleteModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    message?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    className?: string;
+}
+/**
+ * 데이터를 삭제하거나 영구적인 작업을 수행하기 전, 사용자의 최종 승인을 받기 위한 경고 모달입니다.
+ *
+ * {@link DeleteModal}은 파괴적인(Destructive) 액션을 강조하기 위해 빨간색 경고 아이콘과
+ * 눈에 띄는 삭제 버튼을 제공합니다. 사용자가 실수로 데이터를 삭제하는 것을 방지하는 안전장치 역할을 합니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **영구적 데이터 삭제**: 게시글, 사용자 계정, 설정값 등을 삭제할 때
+ * - **되돌릴 수 없는 작업**: 초기화, 데이터 덮어쓰기 등 주의가 필요한 작업을 수행할 때
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **구체적인 정보 포함**: 단순히 "삭제하시겠습니까?" 보다는 "사용자 '홍길동'의 정보를 삭제하시겠습니까?"와 같이 구체적인 대상을 명시하는 것이 좋습니다.
+ * - **위험성 강조**: 해당 작업이 되돌릴 수 없음을 메시지에 포함하세요.
+ */
+export declare const DeleteModal: React.ForwardRefExoticComponent<DeleteModalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/ErrorModal.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+
+export interface ErrorModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    message: React.ReactNode;
+    confirmText?: string;
+    onConfirm?: () => void;
+    className?: string;
+}
+/**
+ * 시스템 오류나 사용자의 잘못된 조작으로 인해 작업이 실패했음을 알리는 모달입니다.
+ *
+ * {@link ErrorModal}은 빨간색 X 아이콘을 통해 부정적인 결과임을 즉각적으로 전달하며,
+ * 사용자가 문제를 인지하고 다음 행동을 취할 수 있도록 돕습니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **API 통신 실패**: 서버 오류나 네트워크 문제로 요청을 처리할 수 없을 때
+ * - **유효성 검사 실패**: 입력한 정보에 중대한 결함이 있어 처리가 중단되었을 때
+ * - **권한 부족**: 특정 기능을 사용할 권한이 없음을 알릴 때
+ *
+ * ## Usage guidelines
+ *
+ * ### ✅ Do (권장 사항)
+ *
+ * - **구체적인 원인 안내**: 단순히 "오류가 발생했습니다" 보다는 "이미 존재하는 이메일입니다"와 같이 해결 가능한 정보를 제공하세요.
+ * - **해결 방법 제시**: 가능하다면 "나중에 다시 시도해 주세요" 또는 "고객센터로 문의해 주세요"와 같은 가이드를 포함하세요.
+ */
+export declare const ErrorModal: React.ForwardRefExoticComponent<ErrorModalProps & React.RefAttributes<HTMLDivElement>>;