feat: Dialog 컴포넌트 구현 #19
Conversation
Puterism
commented
Jan 27, 2024
Puterism
commented
- Dialog 컴포넌트 및 useDialogState 커스텀 훅 구현
-
- useDialogState 커스텀 훅은 Dialog 상태 관리 코드를 별도로 작성하지 않고 사용하게끔한 유틸성 커스텀 훅임. 써도 되고 안 써도 됨.
- HomePage에 예시 코드 작성해둠.
-
✅ Deploy Preview for boolti-super-admin ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for boolti-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for boolti-admin ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -0,0 +1,27 @@ | |||
| const CloseIcon = () => ( | |||
There was a problem hiding this comment.
아이콘은 나중에 모아서 svgr 넣어서 파일로 만들거나.. 아이콘 폴더 따로 만들어야겠다!
| const DimmedArea = styled.div` | ||
| position: fixed; | ||
| inset: 0; | ||
| background-color: rgba(86, 86, 86, 0.25); |
There was a problem hiding this comment.
하드코딩하는 색상은 최대한 피하는게 좋을 듯!? dim.dialog 같이 팔레트에 넣어서 써보는건 어떨까 싶어!
한번 설정하면 잘 바뀌지는 않겠지만, 나중에 찾기 어려울수도 있으니..!
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| interface PortalProps { |
There was a problem hiding this comment.
id같은 것을 추가로 받아서 이미 만들어졌으면 사용하고 없으면 새로 생성하는 방식으로 써도 좋겠다!
모달, 다이얼로그 등등.. 혹시나 포탈 쓰는 것들이 많아지면 필요할 것 같아!
There was a problem hiding this comment.
포탈에 id를 달아야 하는 이유가 있을까? id로 뭔가 관리를 해야하는 경우가 생길까?
There was a problem hiding this comment.
포탈 쓰는 이유가 계층 내부에수 선택자 충돌에 대비한거니까, 모달, 다이얼로그 같은 컴포넌트는 각각의 포탈을 갖는게 맞다고 생각했어! (사실 크게 중요치는 않을 듯)
There was a problem hiding this comment.
내가 Portal에 대해서 잘 모르고 하는 이야기일 수도 있지만, Portal을 생성하는데 많은 비용이 들지는 않을 거라고 생각해서 요건 이슈가 생기면 달아줘도 좋을 것 같다고 생각해!
현재 Dialog 컴포넌트도 각각 Portal을 갖도록 구현하기도 했으니까!
- BooltiUIProvider로 Provider 통합 - useDialogState 삭제
