Merge pull request #35 from hang-log-design-system/feature/#29

열고 닫고 토글할 수 있는 로직 훅으로 생성(useOverlay)
hang-log-design-system · Jul 13, 2023 · 328aeba · 328aeba
2 parents 226004c + 6707f13
commit 328aeba
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 54 deletions.
diff --git a/src/hooks/useOverlay.ts b/src/hooks/useOverlay.ts
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+export const useOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => {
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    setIsOpen(false);
+  };
+
+  const toggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return { isOpen, open, close, toggle };
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,7 @@ import HangLogProvider from '@/HangLogProvider';
 
 import { useCalendar } from '@hooks/useCalendar';
 import { useDateRangePicker } from '@hooks/useDateRangePicker';
+import { useOverlay } from '@hooks/useOverlay';
 import { useStarRating } from '@hooks/useStarRating';
 
 import Badge from '@components/Badge/Badge';
@@ -40,6 +41,7 @@ export {
   useCalendar,
   useDateRangePicker,
   useStarRating,
+  useOverlay,
   Badge,
   Box,
   Button,

diff --git a/src/stories/Menu.stories.tsx b/src/stories/Menu.stories.tsx
@@ -6,6 +6,8 @@ import Menu from '@components/Menu/Menu';
 import MenuItem from '@components/MenuItem/MenuItem';
 import MenuList from '@components/MenuList/MenuList';
 
+import { useOverlay } from '..';
+
 const meta = {
   title: 'Menu',
   component: Menu,
@@ -17,12 +19,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => {
-    const [showMenu, setShowMenu] = useState(false);
+    const { isOpen, toggle, close } = useOverlay();
 
     return (
-      <Menu closeMenu={() => setShowMenu(false)}>
-        <Button onClick={() => setShowMenu(!showMenu)}>Menu</Button>
-        {showMenu && (
+      <Menu closeMenu={close}>
+        <Button onClick={toggle}>Menu</Button>
+        {isOpen && (
           <MenuList>
             <MenuItem name="menu1" onClick={() => setShowMenu(false)} />
             <MenuItem name="menu2" onClick={() => setShowMenu(false)} />

diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
@@ -1,6 +1,7 @@
 import SampleImage from '@assets/svg/modal-sample.svg';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+
+import { useOverlay } from '@hooks/useOverlay';
 
 import Button from '@components/Button/Button';
 import Heading from '@components/Heading/Heading';
@@ -28,16 +29,16 @@ type Story = StoryObj<typeof meta>;
 
 export const ImageModal: Story = {
   render: ({ ...args }) => {
-    const [showModal, setShowModal] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowModal(true)}>Show Modal</Button>
-        <Modal {...args} isOpen={showModal} closeModal={() => setShowModal(false)}>
+        <Button onClick={open}>Show Modal</Button>
+        <Modal {...args} isOpen={isOpen} closeModal={close}>
           <div css={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
             <Heading size="large">Title</Heading>
             <SampleImage />
-            <Button variant="primary" onClick={() => setShowModal(false)} css={{ width: '100%' }}>
+            <Button variant="primary" onClick={close} css={{ width: '100%' }}>
               확인
             </Button>
           </div>
@@ -49,21 +50,16 @@ export const ImageModal: Story = {
 
 export const NoCloseButton: Story = {
   render: ({ ...args }) => {
-    const [showModal, setShowModal] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowModal(true)}>Show Modal</Button>
-        <Modal
-          {...args}
-          isOpen={showModal}
-          closeModal={() => setShowModal(false)}
-          hasCloseButton={false}
-        >
+        <Button onClick={open}>Show Modal</Button>
+        <Modal {...args} isOpen={isOpen} closeModal={close} hasCloseButton={false}>
           <div css={containerStyle}>
             <Heading size="large">Title</Heading>
             <Text>Sample Text</Text>
-            <Button variant="primary" onClick={() => setShowModal(false)} css={{ width: '100%' }}>
+            <Button variant="primary" onClick={close} css={{ width: '100%' }}>
               확인
             </Button>
           </div>
@@ -75,12 +71,12 @@ export const NoCloseButton: Story = {
 
 export const TextModal: Story = {
   render: ({ ...args }) => {
-    const [showModal, setShowModal] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowModal(true)}>Show Modal</Button>
-        <Modal {...args} isOpen={showModal} closeModal={() => setShowModal(false)}>
+        <Button onClick={open}>Show Modal</Button>
+        <Modal {...args} isOpen={isOpen} closeModal={close}>
           <div css={[containerStyle, { width: '350px' }]}>
             <Heading size="large">Title</Heading>
             <Text>
@@ -92,10 +88,10 @@ export const TextModal: Story = {
               mollit anim id est laborum
             </Text>
             <div css={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-              <Button variant="default" onClick={() => setShowModal(false)} css={{ width: '45%' }}>
+              <Button variant="default" onClick={close} css={{ width: '45%' }}>
                 Close
               </Button>
-              <Button variant="primary" onClick={() => setShowModal(false)} css={{ width: '45%' }}>
+              <Button variant="primary" onClick={close} css={{ width: '45%' }}>
                 Action
               </Button>
             </div>

diff --git a/src/stories/Toast.stories.tsx b/src/stories/Toast.stories.tsx
@@ -7,6 +7,8 @@ import Button from '@components/Button/Button';
 import Toast from '@components/Toast/Toast';
 import ToastContainer from '@components/ToastContainer/ToastContainer';
 
+import { useOverlay } from '..';
+
 const meta = {
   title: 'Toast',
   component: Toast,
@@ -43,15 +45,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Variants: Story = {
   render: ({ children, variant, ...args }) => {
-    const [show, setShow] = useState(false);
+    const { isOpen, open } = useOverlay();
 
     setTimeout(() => {
-      setShow(true);
+      open();
     }, 300);
 
     return (
       <div id="toast-container">
-        {show && (
+        {isOpen && (
           <>
             <Toast variant="default" {...args}>
               {children}
@@ -79,13 +81,13 @@ export const Variants: Story = {
 
 export const Default: Story = {
   render: ({ children, ...args }) => {
-    const [showToast, setShowToast] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
-        {showToast && (
-          <Toast {...args} closeToast={() => setShowToast(false)}>
+        <Button onClick={open}>Show Toast</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             {children}
           </Toast>
         )}
@@ -96,13 +98,13 @@ export const Default: Story = {
 
 export const Success: Story = {
   render: ({ children, ...args }) => {
-    const [showToast, setShowToast] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
-        {showToast && (
-          <Toast {...args} closeToast={() => setShowToast(false)}>
+        <Button onClick={open}>Show Toast</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             {children}
           </Toast>
         )}
@@ -116,13 +118,13 @@ export const Success: Story = {
 
 export const Error: Story = {
   render: ({ children, ...args }) => {
-    const [showToast, setShowToast] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
-        {showToast && (
-          <Toast {...args} closeToast={() => setShowToast(false)}>
+        <Button onClick={open}>Show Toast</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             {children}
           </Toast>
         )}
@@ -136,13 +138,13 @@ export const Error: Story = {
 
 export const ClosableToast: Story = {
   render: ({ children, ...args }) => {
-    const [showToast, setShowToast] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
-        {showToast && (
-          <Toast {...args} closeToast={() => setShowToast(false)}>
+        <Button onClick={open}>Show Toast</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             {children}
           </Toast>
         )}
@@ -156,13 +158,13 @@ export const ClosableToast: Story = {
 
 export const withIcon: Story = {
   render: ({ children, ...args }) => {
-    const [showToast, setShowToast] = useState(false);
+    const { isOpen, open, close } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
-        {showToast && (
-          <Toast {...args} closeToast={() => setShowToast(false)}>
+        <Button onClick={open}>Show Toast</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             <CheckCircleIcon />
             Message
           </Toast>
@@ -179,20 +181,20 @@ export const withIcon: Story = {
 
 export const PilingToast: Story = {
   render: ({ children, ...args }) => {
-    const [showToast1, setShowToast1] = useState(false);
-    const [showToast2, setShowToast2] = useState(false);
+    const { isOpen, open, close } = useOverlay();
+    const { isOpen: isOpen2, open: open2, close: close2 } = useOverlay();
 
     return (
       <>
-        <Button onClick={() => setShowToast1(true)}>Show Toast 1</Button>
-        {showToast1 && (
-          <Toast {...args} closeToast={() => setShowToast1(false)}>
+        <Button onClick={open}>Show Toast 1</Button>
+        {isOpen && (
+          <Toast {...args} closeToast={close}>
             {children}
           </Toast>
         )}
-        <Button onClick={() => setShowToast2(true)}>Show Toast 2</Button>
-        {showToast2 && (
-          <Toast {...args} closeToast={() => setShowToast2(false)}>
+        <Button onClick={open2}>Show Toast 2</Button>
+        {isOpen2 && (
+          <Toast {...args} closeToast={close2}>
             {children}
           </Toast>
         )}