Component

Confirm

작업 실행 전에 사용자의 명시적인 확인을 받는 대화 상자입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

확인할 작업의 대상입니다. 제목의 조사를 자동으로 맞춥니다.

실행 결과나 복구 가능 여부를 설명합니다.

확인 버튼을 비활성화합니다.

Code

import { useState } from 'react'

import { Button, Confirm } from '@amineslab/ui'

function ConfirmExample({ subject = '프로젝트', consequence = '삭제한 프로젝트는 복구할 수 없습니다.', confirmDisabled = false, }: {
    subject?: string;
    consequence?: string;
    confirmDisabled?: boolean;
} = {}) {
    const [open, setOpen] = useState(false);
    const [failed, setFailed] = useState(false);
    return (<div className="flex flex-wrap gap-2">
      <Button color="danger" onClick={() => setOpen(true)}>
        프로젝트 삭제
      </Button>
      <Confirm open={open} onOpenChange={setOpen} intent="delete" subject={subject} consequence={consequence} confirmDisabled={confirmDisabled} hint={failed
            ? '처리에 실패했습니다. 다시 시도해 주세요.'
            : '첫 시도는 실패하고 다음 시도는 성공하는 예제입니다.'} onConfirm={async () => {
            await new Promise((resolve) => setTimeout(resolve, 800));
            if (!failed)
                throw new Error('예제 오류');
            setFailed(false);
        }} onConfirmError={() => setFailed(true)}/>
    </div>);
}

export default function ExamplePreview() {
  return ((<ConfirmExample subject={"프로젝트"} consequence={"삭제한 프로젝트는 복구할 수 없습니다."} confirmDisabled={false}/>))
}

Props

@amineslab/ui에서 Confirm를 가져옵니다.

import { Confirm } from '@amineslab/ui'

`Confirm`

Name	Type	Default	Description
`Confirm.intent / subject / consequence`	`'delete' \| 'remove' \| 'close' \| 'disable' \| 'reject' / string / ReactNode`	-	행위와 대상을 주면 조사까지 포함한 제목과 확인 라벨을 생성합니다. consequence는 실행 결과 설명입니다. 이 경로에서는 title·confirmLabel을 따로 지정하지 않습니다.
`Confirm.open / onOpenChange`	`boolean / (open: boolean) => void`	-	확인 카드의 제어 상태입니다. 모바일에서도 중앙 카드로 유지합니다.
`Confirm.title / description / children`	`ReactNode`	-	제목·인라인 설명·블록 본문을 각각 전달합니다.
`Confirm.onConfirm`	`() => void \| Promise<void>`	-	필수. 처리 중 두 버튼과 닫기를 잠급니다. 성공하면 닫고 실패하면 유지합니다.
`Confirm.onConfirmError`	`(error: unknown) => void`	-	실패 알림을 표시하는 콜백입니다.
`Confirm.onAfterConfirmClose`	`() => void`	-	확인 성공 후 focus scope가 닫힌 뒤 한 번 호출합니다. 중첩 편집 모달 닫기에 사용합니다.
`Confirm.confirmLabel / cancelLabel`	`string`	`'확인' / '취소'`	두 작업 버튼의 라벨입니다.
`Confirm.destructive / confirmDisabled`	`boolean`	`false`	위험 작업 표현과 확인 비활성화를 각각 제어합니다.
`Confirm.hint`	`ReactNode`	-	확인 불가 사유나 진행 안내. 확인 버튼과 aria-describedby로 연결됩니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Confirm · 비동기 처리

짧은 확인은 모바일에서도 중앙 카드입니다. 처리 중 중복 실행·취소를 막고, 실패하면 열린 상태를 유지합니다.

import { useState } from 'react'

import { Button, Confirm } from '@amineslab/ui'

function ConfirmExample({ subject = '프로젝트', consequence = '삭제한 프로젝트는 복구할 수 없습니다.', confirmDisabled = false, }: {
    subject?: string;
    consequence?: string;
    confirmDisabled?: boolean;
} = {}) {
    const [open, setOpen] = useState(false);
    const [failed, setFailed] = useState(false);
    return (<div className="flex flex-wrap gap-2">
      <Button color="danger" onClick={() => setOpen(true)}>
        프로젝트 삭제
      </Button>
      <Confirm open={open} onOpenChange={setOpen} intent="delete" subject={subject} consequence={consequence} confirmDisabled={confirmDisabled} hint={failed
            ? '처리에 실패했습니다. 다시 시도해 주세요.'
            : '첫 시도는 실패하고 다음 시도는 성공하는 예제입니다.'} onConfirm={async () => {
            await new Promise((resolve) => setTimeout(resolve, 800));
            if (!failed)
                throw new Error('예제 오류');
            setFailed(false);
        }} onConfirmError={() => setFailed(true)}/>
    </div>);
}

export default function ExamplePreview() {
  return (<ConfirmExample />)
}

사용 기준

권장하는 사용

모바일에서도 중앙 카드로 표시합니다. 일반 입력·편집 작업은 Dialog를 사용합니다.
취소 버튼에 처음 포커스하고 Escape는 취소로 처리합니다. 바깥 클릭으로는 닫히지 않습니다. 처리 중에는 닫기·중복 실행을 막고 실패 시 다시 시도할 수 있습니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.