[๐ design system] drawer ์ปดํฌ๋ํธ ์์ฑ #52
Conversation
|
๐storybook: https://6695ee4a0eafb3b77660fc29-lfcwumoozn.chromatic.com/ |
| {overlay ? ( | ||
| <div | ||
| className={style(isOpen ? "is-open" : null)} | ||
| onClick={() => close()} | ||
| /> |
There was a problem hiding this comment.
๋ค์๊ณผ ๊ฐ์ด ์ง๋์ ๊ฐ์ด ์ํธ์์ฉ์ด ํ์ํ ๊ฒฝ์ฐ overlay๋ฅผ ์ถ๊ฐํ์ง ์๋ ์ต์ ์ด ์์ต๋๋น
| import { useState } from "react"; | ||
|
|
||
| const DRAWER_MODE = { | ||
| OPEN: true, | ||
| CLOSE: false, | ||
| } as const; | ||
|
|
||
| type DrawerMode = (typeof DRAWER_MODE)[keyof typeof DRAWER_MODE]; | ||
|
|
||
| export type useDrawerOutput = { | ||
| isOpen: DrawerMode; | ||
| toggle: () => void; | ||
| open: () => void; | ||
| close: () => void; | ||
| }; | ||
|
|
||
| export const useDrawer = (): useDrawerOutput => { | ||
| const [isOpen, setIsOpen] = useState<DrawerMode>(DRAWER_MODE.CLOSE); | ||
|
|
||
| return { | ||
| isOpen, | ||
| toggle: () => { | ||
| setIsOpen((previous) => !previous); | ||
| }, | ||
| open: () => setIsOpen(DRAWER_MODE.OPEN), | ||
| close: () => setIsOpen(DRAWER_MODE.CLOSE), | ||
| }; | ||
| }; |
There was a problem hiding this comment.
drawer ๋ฅผ ์ฌ๋ซ๋ ์ปค์คํ ํ useDrawer์ ๋๋ค.
isOpen์ฌ๋ถ์ ๋ฐ๋ผ drawer๊ฐ ์ด๋ ค ์๊ฑฐ๋ ๋ซํ ์๊ณ ,
toggle์ ํตํด์ ์ฌ๋ซ์ ์ ์์ต๋๋ค.
close๋ ๋ชจ๋ฌ์ ๋ซ๊ธฐ ์ํด ์ถ๊ฐ๋ก ์ ๊ณตํ์ต๋๋ค.
|
๐storybook: https://6695ee4a0eafb3b77660fc29-ocfgdbsyem.chromatic.com/ |
|
๐storybook: https://6695ee4a0eafb3b77660fc29-jezyqxhzkx.chromatic.com/ |
|
|
||
| return ( | ||
| <> | ||
| <MyButton onClick={toggle}>Open</MyButton> |
There was a problem hiding this comment.
์๋ ํ ์คํธ์ฉ์ธ๊ฐ์ ?
There was a problem hiding this comment.
๋ต๋ต! ๋ณ๊ฒฝํ๋ ค๊ณ ํฉ๋๋ค ๋ฒํผ ์์ด์ฝ ์ปดํฌ๋ํธ (x ํ์)๋ก ๋์ฒด ํ ์์ ์ ๋๋น
| const style = classNames.bind(Style); | ||
|
|
||
| const Drawer = ({ children, overlay = true }: DrawerProps) => { | ||
| const { isOpen, toggle, close } = useDrawer(); |
There was a problem hiding this comment.
์คํ ์ ์ด๊ถ์ ์ฌ์ฉ์ฒ์๊ฒ ์ฃผ๋๊ฒ ์ข์ง ์ํฅใน๊น์ ?
์ํฉ์๋ฐ๋ผ ์ธ๋ถ์์ ๋ซ๊ณ ์ด๊ณ ๋ฅผ ์ปจํธ๋กคํ๊ณ ์ถ์๋๊ฐ ์์๊ฒ ๊ฐ๊ตฌ์
๋ซํ์๋ ์ก์
, ์ด๋ฆด๋ ์ก์
์ ์ ์ดํ๊ณ ์ถ์์๋์๊ตฌ์
There was a problem hiding this comment.
ํน์ ๊ทธ๋ผ ์๋์ useDrawer ํธ์ถ์ ์ฌ์ฉํ๋ ์ธ๋ถ์์ ํ๊ณ Drawer ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๋ ์์ผ๋ก ํ๋๊ฒ ์ข์๊น์?๐ค
const { isOpen, toggle, close, open } = useDrawer();
There was a problem hiding this comment.
useDrawer ์์ฒด๊ฐ ์ฌ์ฉ์ฒ์์ ๊ณ ๋ คํด์ผ๋๋๋ถ๋ถ ์๋๊น์ฉ?
Drawer์์๋ ์ด๋ค ๊ฐ์ ๋๊ฒจ์ฃผ๋ฉด ์ด๋ฆด๊ฑฐ๋ค, ๋ซ์๋๋ onDimmedClick (๋ฐ๊นฅ ๋ฐฐ๊ฒฝํด๋ฆญ), onClose(x ๋ฒํผํด๋ฆญ) ํ์๋๋ฑ ์ธํฐํ์ด์ค๋ง ๋ซ์ด์ฃผ๋ฉด๋์ง์์๊น์ ?
| @@ -8,8 +14,9 @@ import ThemeButton from "../components/ThemeButton"; | |||
| export default function Home() { | |||
| const text = | |||
| "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis\npariatur, ab voluptates saepe eum at excepturi, eaque accusamus labore\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti! Qui.\ntemporibus ex nostrum in hic iure porro quod doloribus deleniti!"; | |||
| const { isOpen, toggle, close, open } = useDrawer(); | |||
There was a problem hiding this comment.
์ธ๋ถ ์ฌ์ฉ์ฒ์์ ์ฌ์ฉ๊ฐ๋ฅํ๋๋ก ๋บด์คฌ์ต๋๋ค
|
๐storybook: https://6695ee4a0eafb3b77660fc29-wnozeowbqj.chromatic.com/ |
|
๐storybook: https://6695ee4a0eafb3b77660fc29-gbmnnorooq.chromatic.com/ |
PULL REQUEST TEMPLATE
PR ์ค๋ช
@appear ์ง๋๋ ์์ธ๋ณด๊ธฐ ๋ฑ ์ผ์ชฝ ๋ชจ๋ฌ๋ก ๋์์ฃผ๋ drawer ์ปดํฌ๋ํธ์ ๋๋น.
์คํฌ๋ฆฐ์ท & URL