Feat/34/modal

[cksrlcks]

❓이슈

• close Feat : [공용] 모달 컴포넌트 #34

✍️ Description

공용 모달 컴포넌트 작업했습니다.

• base modal component 작업 (기본 베이스)

• useAlert 훅을 통해 생성되는 알럿 모달 작업

  • zustand로 dialog store를 생성
  • useAlert을 통해 alert을 실행하면 루트 레이아웃에 있는 다이알로그 컨테이너 안에서 모달이 열림

• 페이지내에서 사용되는 공용 모달 컴포넌트 작업

  • useImeprativeHandle 훅을 통해서 모달외부에서 제어를 할 수 있도록 함
  • 공용 모달 컴포넌트 안쪽에 compound 형태로 내부 컴포넌트를 제공

추가전달

• 사용방법을 주석으로 남겨두었습니다.
• 사용하면서 불편하거나, 개선해볼점을 알게 되면 또 리팩토링 해보겠습니다.

✅ Checklist

PR

• Branch Convention 확인

  feat/* 기능 구현, fix/* 버그 수정, refactor/* 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Additional Notes

• (없음)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
taskify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 7, 2025 3:46am

[ToKyun02]

모달 구현하시느라 고생많으셨습니다!

모달의 열고 닫는 동작되는지 확인했고, 전체적으로 재사용성을 많이 고려하신 것 같아 배울 점이 많았던 것 같습니다!

실제로 코드를 짜는 가정으로 테스트 코드를 작성해봤었는데, Header와 Footer의 내용을 ModalContent안에다 안쓰면, 배경이 없어서 바깥 레이어에 있는 듯한 느낌이 있었습니다.

Content안에 넣으면 다음과 같이 나오긴 하지만, 사용할 때 조금 어색한 감이 있어서 말씀드려봤습니다!

제가 테스트 해봤던 코드는 다음과 같습니다.

'use client';

import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal';
import useAlert from '@/hooks/useAlert';
import { useRef } from 'react';
import LoginForm from '@/app/(auth)/login/_components/LoginForm';
import Button from '@/components/ui/Button/Button';

function Test() {
  const alert = useAlert();

  return <button onClick={() => alert('안녕')}>클릭</button>;
}

function TestForm() {
  const modalRef = useRef<ModalHandle>(null);
  return (
    <>
      <button onClick={() => modalRef.current?.open()}>폼 열기</button>
      <Modal ref={modalRef}>
        <div className='bg-white p-10'>
          <LoginForm />
        </div>
      </Modal>
    </>
  );
}

function TestConfrim() {
  const modalRef = useRef<ModalHandle>(null);
  return (
    <>
      <button onClick={() => modalRef.current?.open()}>테스트 버튼</button>
      <Modal ref={modalRef}>
        <ModalHeader>
          제목 <button onClick={() => modalRef.current?.close()}>닫기</button>
        </ModalHeader>
        <ModalContent>
          <div>내용</div>
        </ModalContent>
        <ModalFooter>
          <Button variant='outline'>취소</Button>
          <Button>확인</Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

export default function page() {
  return (
    <div className='flex flex-col'>
      내 대시보드
      <Test />
      <TestForm />
      <TestConfrim />
    </div>
  );
}