feat(web, shared/utils): Portal, Modal 컴포넌트, useDisclosure 훅, classNames 유틸 생성

[sukvvon]

이슈 번호

• close feat(web, shared/utils): Portal, Modal 컴포넌트, useDisclosure 훅, classNames 유틸 생성 #51

작업한 목록을 작성해 주세요

• feat(shared/utils): classNames 함수 추가
• feat(web/hooks): Modal의 상태를 관리하는 useDisclosure 훅 추가
• chore(eslint-config-favolink): type imports를 inline으로 명시
• feat(web/components): Portal 컴포넌트 추가
• feat(web/components): Modal 컴포넌트 추가

스크린샷

2024-02-22.5.14.45.mov

pr 포인트나 궁금한 점을 작성해 주세요

Modal 예제 코드

import { Modal } from '@/components';
import { useDisclosure } from '@/hooks';

export default function SavedLink() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <h1 onClick={onOpen}>SavedLink1</h1>
      <h2>{isOpen ? 'open' : 'close'}</h2>
      <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick>
        <Modal.Overlay />
        <Modal.Content>
          <Modal.Header>
            <Modal.TopBar variant="couple">this is status</Modal.TopBar>
            <Modal.Title variant="center">this is modal title</Modal.Title>
          </Modal.Header>
          <Modal.Body>this is modal body</Modal.Body>
          <Modal.Footer>
            <button>Button</button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
    </>
  );
}

• 위 예시와 같이 사용할 수 있습니다!
• context api를 활용하여 Modal 내부 전체 값들을 관리하게 하였습니다 (필수: onClose, isOpen, children, 선택: closeOnOverlayClick)
• useDisclosure 훅을 통해 Modal, Alert(개발 예정) 등의 상태를 관리할 수 있게 하였습니다!
• 스타일이나 로직 등 수정사항이 생기면 차후 수정할 계획입니다!
• 향후 Toast, Alert와 같은 컴포넌트를 Modal을 활용해서 만들 계획입니다!

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
favolink-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 21, 2024 11:07pm

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[heyman333]

z-index는 따로 상수로 관리해도 좋을거같은데 96으로 하신 이유가 있나요?

[sukvvon]

우선 96이라는 숫자에 큰 의미는 없습니다!
상수로 관리한다는 말씀이 쓰이는 z-index마다 숫자가 아닌 상수 자체로 우선순위를 파악한다는 말씀이신가요?? 🤔

[heyman333]

네 파일 한곳에서 모아두면 나중에 겹치는 일이 없을거같아서요

[sukvvon]

쌓임 맥락도 고려해야해서 상수화를 하더라도 또 다른 비용이 들 수 있다는 생각이 들어요!
차후 리펙토링때 진행해도 될까요?? 🤔

[heyman333]

👍👍👍👍