feat(ui): Bottom Sheet #284
Conversation
|
|
wuzoo
force-pushed
the
feat/bottom-sheet
branch
from
00cb433 to
3001a40
Compare
wuzoo
force-pushed
the
feat/bottom-sheet
branch
from
3001a40 to
8c82c1c
Compare
constantly-dev
left a comment
constantly-dev
left a comment
There was a problem hiding this comment.
수고하셨습니다! 코드 깔끔한 것 같아요!
질문드리고 싶은 점이 구현하신 것처럼 제어/비제어의 경우를 모두 고려해 구현하신 이유가 사용 방법에 대한 선택을 더 많이 주기 위함인가요?
There was a problem hiding this comment.
각 스토리 따로는 괜찮은데 docs 전체에서는 bottomSheet가 내부 wrapper에 의해서 짤리는 것 같아요.
portal이나 dialog, z-index 중 하나만 쓰면 해결될 것 같은데 혹시 궁금한 점이 portal 등을 사용하지 않아도 레이어 우선순위 관련해서 문제가 없을까요?
modal이나 bottomsheet 등의 컴포넌트를 구현할 때 평소에는 어떤 걸 사용하시는 지도 궁금합니다!
| const context = useContext(BottomSheetContext); | ||
|
|
||
| if (context === null) { | ||
| throw new Error('this hook muse be used within a BottomSheetProvider'); |
| export function BottomSheetTrigger({ children }: HTMLAttributes<HTMLButtonElement>) { | ||
| const { open, onOpenChange } = useBottomSheetContext(); | ||
|
|
||
| const handleOpenChange = () => { | ||
| onOpenChange(!open); | ||
| }; | ||
|
|
||
| return <div onClick={handleOpenChange}>{children}</div>; | ||
| } |
There was a problem hiding this comment.
trigger가 button의 역할을 하지 않는 경우 때문에 div로 두신 걸까요??
| return ( | ||
| open && ( | ||
| <div className={overlayStyle}> | ||
| {title && ( | ||
| <div className={titleWrapperStyle}> | ||
| {backIcon && <IconChevronLeft onClick={() => onOpenChange(false)} className={iconStyle} />} | ||
| <p className={titleTextStyle}>{title}</p> | ||
| </div> | ||
| )} | ||
| {children} | ||
| </div> | ||
| ) | ||
| ); |
There was a problem hiding this comment.
물론 open이 숫자 0이나 빈 문자열이 될 가능성이 없는 boolean이라 예상하지 못한 경우는 없어서 괜찮은데,
컴포넌트 조건부 렌더링(boolean)에서
- 현재처럼 &&를 사용 (
BottomSheetContent의 return 값이JSX.Element | false) - early return으로 null 반환 (
BottomSheetContent의 return 값이JSX.Element | null)
이 두개 중 어떤걸 선호하시나요?
| const uncontrolled = _open === undefined; | ||
|
|
||
| const open = uncontrolled ? internalOpenValue : _open; | ||
| const handleOpenChange = (value: boolean) => { | ||
| if (uncontrolled) { | ||
| if (value) { | ||
| internalOpen(); | ||
| } else { | ||
| internalClose(); | ||
| } | ||
| } else { | ||
| onOpenChange?.(value); | ||
| } | ||
| }; |
There was a problem hiding this comment.
물론 지금도 좋지만 uncontrolled가 boolean 값을 가지니 일반적인 is- prefix를 써서 isControlled로 사용하고 조건을 반대로 해도 가독성이 좋을 것 같습니다.
| const meta: Meta = { | ||
| title: 'Components/BottomSheet', | ||
| tags: ['autodocs'], | ||
| }; | ||
| export default meta; | ||
|
|
There was a problem hiding this comment.
component: BottomSheetExample를 meta에 지정하지 않아서 args table이 자동으로 안뜨는 것 같습니다!
추가로 compound component pattern이라 단순하게 스토리 적용이 안된다면 subcomponents 등의 옵션이나 복잡한 컴포넌트 관련해서 옵션들을 적용해봐야 할 것 같아요!
변경사항
바텀싯 컴포넌트를 구현하였습니다.
링크
시급한 정도
🏃♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.
기타 사항
커밋 보시면서 리뷰해주시면 더 편하실 거에요