Drawer 컴포넌트를 구현한다 #29
Conversation
| anchor: { | ||
| defaultValue: 'bottom', | ||
| description: 'drawer가 열리는 방향에 따라서 값을 조정할 수 있습니다' | ||
| } |
There was a problem hiding this comment.
radio로 보여주는 거 어때요?!
| anchor: { | |
| defaultValue: 'bottom', | |
| description: 'drawer가 열리는 방향에 따라서 값을 조정할 수 있습니다' | |
| } | |
| anchor: { | |
| defaultValue: 'bottom', | |
| description: 'drawer가 열리는 방향에 따라서 값을 조정할 수 있습니다', | |
| control: { | |
| type: 'radio' | |
| }, | |
| options: ['top', 'bottom', 'left', 'right'] | |
| } |
| (anchor === 'top' && | ||
| css` | ||
| width: 100%; | ||
| height: 50%; | ||
| border-radius: 0 0 10px 10px; | ||
| top: 0; | ||
| `) || | ||
| (anchor === 'left' && | ||
| css` | ||
| width: 50%; | ||
| height: 100%; | ||
| border-radius: 0 10px 10px 0; | ||
| left: 0; | ||
| `) || | ||
| (anchor === 'right' && | ||
| css` | ||
| width: 50%; | ||
| height: 100%; | ||
| border-radius: 0 10px 10px 0; | ||
| right: 0; | ||
| `) || | ||
| (anchor === 'bottom' && | ||
| css` | ||
| width: 100%; | ||
| height: 50%; | ||
| bottom: 0; | ||
| border-radius: 10px 10px 0 0; |
There was a problem hiding this comment.
config로 뺀다는 것이 어떤 의미일까요?
| width: 0; | ||
| height: 0; |
There was a problem hiding this comment.
이제와 돌이켜보니 이유가 생각나지 않습니다... 일단 제거하겠습니다 👍
| anchor: 'left' | 'right' | 'top' | 'bottom'; | ||
| } | ||
|
|
||
| const Drawer = ({ isOpen, anchor, children }: PropsWithChildren<DrawerProps>) => { |
There was a problem hiding this comment.
dimmer에 클릭 이벤트 부착하는건 어떤가요?
| <S.Dimmed className={isOpen ? 'is-open' : ''}> | ||
| <S.Container className={isOpen ? 'is-open' : ''} anchor={anchor}> | ||
| {children} | ||
| </S.Container> | ||
| </S.Dimmed> |
There was a problem hiding this comment.
Container가 Dimmed에 감싸져있을 필요가 있을까요?
There was a problem hiding this comment.
Container 컴포넌트 위치를 고정시켜야해서 dimmer로 감싸는 것이 편리하다고 생각하였습니다
추가로 유저가 어떤 위치에 Drawer를 위치 시킬지 변수가 많다고 생각해서 dimmer랑 set로 이동시키는 것이 좋다고 생각했습니다!
| <S.Dimmed className={isOpen ? 'is-open' : ''}> | ||
| <S.Container className={isOpen ? 'is-open' : ''} anchor={anchor}> |
There was a problem hiding this comment.
isOpen을 통해서 Drawer가 열릴 때 드르릭 하는 애니메이션을 구현하기 위해 넣어주었습니다!
There was a problem hiding this comment.
width와 height를 유저가 커스텀할 수 있도록 해야하는 것 아닌 가 라는 생각이 듭니당 의견 주세유!
사용자가 drawer 내부에 넣는 요소의 width나 height와 동일하게 가지도록 할 수 없으려나요? 직접 drawer 컴포넌트에 어떤 Prop을 주기보다 내부 요소를 자유롭게 스타일링하고 거기에 따라 drawer가 움직이는게 사용하기 편할 것 같아서요!
fit-content같은 값을 적용할 수 있을지 한번 보면 좋을 것 같슴다.
요거 반영 되었나요?
close #19
Drawer 컴포넌트를 구현하였습니다
구현 내용
궁금한 점