[URH-23] useConfirm 신규

[bicochan]

👾 Pull Request

• 작업명: useConfirm
• 티켓: [react hooks] useConfirm
• 상태: 신규

1️⃣ Spec

• 브라우저 confirm() 메서드와 동일한 기능을 제공하는 훅
• async/await 비동기 로직으로 작동
• message, isOpen, confirm, onConfirm, onCancel를 외부에 제공

2️⃣ 변경 사항

• 변경 사항 없음

3️⃣ 예시 코드

// main.tsx
<ConfirmProvider>
  <App />
</ConfirmProvider>

// App.tsx
function App() {
  const { confirm, isOpen, message, onConfirm, onCancel } = useConfirm();

  const handleConfirm = async () => {
    if (await confirm('message')) {
      console.log('Confirmed');
    } else {
      console.log('Canceled');
    }
  };

  return (
    <>
      <Button onClick={handleConfirm}>Confirm</Button>

      <Dialog open={isOpen}>
        <DialogContent>
          {message}
          <Button onClick={onConfirm}>Confirm</Button>
          <Button onClick={onCancel}>Cancel</Button>
        </DialogContent>
      </Dialog>
    </>
  )
}

• 처음에 DialogContext 까지 제작해 사용자에겐 confirm() 메서드만 제공하려고 했던 계획이 변경되었습니다.
• 사용자가 Dialog를 직접 정의하고 useConfirm에서 제공하는 메서드를 매핑하는 것이 사용성이 더 좋다고 판단했습니다.

[jeongbaebang]

멋진 훅이네요 고생하셨습니다! 😃

[jeongbaebang]

resolve 함수를 상태로 받는 방식이 좋아 보이네요. 저도 자주 사용할 패턴이 될 것 같습니다.

[foresec]

수고하셨습니다! 평소 context까지 별도로 제공하는 형태를 지금까지 고려해보지 못해서 더 새로운 것 같습니다👍

[foresec]

🚀수고하셨습니다!🚀