From d6218f57c4f58b01f4f5f5603e26c03c3b2c0c58 Mon Sep 17 00:00:00 2001
From: yondo123 <46988995+yondo123@users.noreply.github.com>
Date: Fri, 22 Sep 2023 02:00:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20eparate=20?=
 =?UTF-8?q?interface=20types=20in=20Drawer=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/drawer/src/types/base.ts                |  1 +
 packages/drawer/src/types/index.ts               |  2 ++
 packages/drawer/src/{types.ts => types/props.ts} | 10 ++++++++--
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 packages/drawer/src/types/base.ts
 create mode 100644 packages/drawer/src/types/index.ts
 rename packages/drawer/src/{types.ts => types/props.ts} (66%)

diff --git a/packages/drawer/src/types/base.ts b/packages/drawer/src/types/base.ts
new file mode 100644
index 0000000..3c49e89
--- /dev/null
+++ b/packages/drawer/src/types/base.ts
@@ -0,0 +1 @@
+export type Placement = 'top' | 'right' | 'bottom' | 'left';
diff --git a/packages/drawer/src/types/index.ts b/packages/drawer/src/types/index.ts
new file mode 100644
index 0000000..76ca478
--- /dev/null
+++ b/packages/drawer/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from './base';
+export * from './props';
diff --git a/packages/drawer/src/types.ts b/packages/drawer/src/types/props.ts
similarity index 66%
rename from packages/drawer/src/types.ts
rename to packages/drawer/src/types/props.ts
index 6b19cd0..05c32b1 100644
--- a/packages/drawer/src/types.ts
+++ b/packages/drawer/src/types/props.ts
@@ -1,4 +1,5 @@
-export type Placement = 'top' | 'right' | 'bottom' | 'left';
+import type { AriaAttributes, HTMLAttributes } from 'react';
+import { Placement } from './base';
 
 export interface DrawerContextProps {
   id: string;
@@ -11,6 +12,12 @@ export interface DrawerContextProps {
   full: boolean;
 }
 
+export interface DrawerPortalProps extends AriaAttributes, HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  width?: number;
+  height?: number;
+}
+
 export interface DrawerProps {
   children?: React.ReactNode;
   open?: boolean;
@@ -24,5 +31,4 @@ export interface DrawerProps {
 
 export interface DrawerTriggerProps {
   children?: React.ReactNode;
-  onClick?: () => void;
 }

From eb64590344c4b6e114efd0b3ebacaf39cee81c1b Mon Sep 17 00:00:00 2001
From: yondo123 <46988995+yondo123@users.noreply.github.com>
Date: Fri, 22 Sep 2023 02:01:26 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20style=20:=20adjust=20code=20?=
 =?UTF-8?q?style=20to=20match=20lint=20rules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/drawer/src/components/Drawer.tsx     | 23 +++++++++++---
 .../drawer/src/components/DrawerPortal.tsx    | 14 ++++++---
 .../drawer/src/components/DrawerTrigger.tsx   |  3 +-
 packages/drawer/src/hooks/useToggleLayer.ts   | 22 +++++++++----
 packages/drawer/src/index.ts                  |  2 +-
 packages/drawer/src/styles.ts                 | 31 +++++++++----------
 6 files changed, 61 insertions(+), 34 deletions(-)

diff --git a/packages/drawer/src/components/Drawer.tsx b/packages/drawer/src/components/Drawer.tsx
index ee125d8..aa46222 100644
--- a/packages/drawer/src/components/Drawer.tsx
+++ b/packages/drawer/src/components/Drawer.tsx
@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { filterComponent } from '@jdesignlab/react-utils';
+import { useId, useMemo } from 'react';
 import { DrawerTrigger } from './DrawerTrigger';
 import { DrawerPortal } from './DrawerPortal';
 import { useToggleLayer } from '../hooks/useToggleLayer';
-import { useId } from 'react';
 import { DrawerContext } from '../context';
-import { DrawerProps } from '../types';
+import type { DrawerProps } from '../types';
 
 export const Drawer = (props: DrawerProps) => {
   const {
@@ -16,8 +16,7 @@ export const Drawer = (props: DrawerProps) => {
     hasCloseIcon = true,
     disableOverlayClose = false,
     placement = 'right',
-    full = false,
-    ...restProps
+    full = false
   } = props;
   const { isOpen, onOpen, onClose } = useToggleLayer(openProp, onOpenProp, onCloseProp);
   const id = useId();
@@ -25,8 +24,22 @@ export const Drawer = (props: DrawerProps) => {
   const triggerComponent = filterComponent(children, DrawerTrigger, true);
   const portalComponent = filterComponent(children, DrawerPortal, true);
 
+  const providerValue = useMemo(
+    () => ({
+      id,
+      isOpen,
+      onOpen,
+      onClose,
+      hasCloseIcon,
+      disableOverlayClose,
+      placement,
+      full
+    }),
+    [id, isOpen, onOpen, onClose, hasCloseIcon, disableOverlayClose, placement, full]
+  );
+
   return (
-    <DrawerContext.Provider value={{ id, isOpen, onOpen, onClose, hasCloseIcon, disableOverlayClose, placement, full }}>
+    <DrawerContext.Provider value={providerValue}>
       {triggerComponent}
       {portalComponent}
     </DrawerContext.Provider>
diff --git a/packages/drawer/src/components/DrawerPortal.tsx b/packages/drawer/src/components/DrawerPortal.tsx
index 4068e77..2598902 100644
--- a/packages/drawer/src/components/DrawerPortal.tsx
+++ b/packages/drawer/src/components/DrawerPortal.tsx
@@ -1,5 +1,4 @@
 /** @jsxImportSource @emotion/react */
-
 import { Button } from '@jdesignlab/button';
 import { Close } from '@jdesignlab/react-icons';
 import { Overlay, Portal } from '@jdesignlab/react-utils';
@@ -7,8 +6,9 @@ import { createClassVariant } from '@jdesignlab/theme';
 import { useContext } from 'react';
 import { DrawerContext } from '../context';
 import * as Style from '../styles';
+import type { DrawerPortalProps } from '../types';
 
-export const DrawerPortal = (props: any) => {
+export const DrawerPortal = (props: DrawerPortalProps) => {
   const { children, width = 300, height = 300, ...restProps } = props;
   const { id, isOpen, onClose, hasCloseIcon, disableOverlayClose, placement, full } = useContext(DrawerContext);
   return (
@@ -19,15 +19,19 @@ export const DrawerPortal = (props: any) => {
       <div
         role="dialog"
         id={`drawer-${id}`}
-        aria-expanded={isOpen}
         aria-modal
         className={`${createClassVariant('drawer', 'content')} ${isOpen ? 'open' : ''}`}
         css={Style.portal(width, height, placement, full)}
         {...restProps}
       >
         {hasCloseIcon && (
-          <div css={Style.closeIconWrapper} onClick={onClose}>
-            <Button variant="unstyled" icon={<Close width={16} height={16} />} css={Style.closeIcon}></Button>
+          <div css={Style.closeIconWrapper}>
+            <Button
+              onClick={onClose}
+              variant="unstyled"
+              icon={<Close width={16} height={16} />}
+              css={Style.closeIcon}
+            />
           </div>
         )}
         {children}
diff --git a/packages/drawer/src/components/DrawerTrigger.tsx b/packages/drawer/src/components/DrawerTrigger.tsx
index be660e6..994e859 100644
--- a/packages/drawer/src/components/DrawerTrigger.tsx
+++ b/packages/drawer/src/components/DrawerTrigger.tsx
@@ -2,8 +2,9 @@
 import { Trigger } from '@jdesignlab/react-utils';
 import { useContext } from 'react';
 import { DrawerContext } from '../context';
+import { DrawerTriggerProps } from '../types';
 
-export const DrawerTrigger = (props: any) => {
+export const DrawerTrigger = (props: DrawerTriggerProps) => {
   const { children } = props;
   const { id, onOpen } = useContext(DrawerContext);
 
diff --git a/packages/drawer/src/hooks/useToggleLayer.ts b/packages/drawer/src/hooks/useToggleLayer.ts
index a0cfa31..c1a9d7d 100644
--- a/packages/drawer/src/hooks/useToggleLayer.ts
+++ b/packages/drawer/src/hooks/useToggleLayer.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useToggleLayer = (
   openProp: boolean | undefined,
@@ -14,17 +14,27 @@ export const useToggleLayer = (
 
   const onToggle = () => {
     setIsOpen(prev => !prev);
-    if (isOpen) onCloseProp?.();
-    else onOpenProp?.();
+    if (isOpen) {
+      onCloseProp?.();
+    } else {
+      onOpenProp?.();
+    }
   };
 
   const onOpen = () => {
-    isControlled ? onOpenProp?.() : onToggle();
+    if (isControlled) {
+      onOpenProp?.();
+    } else {
+      onToggle();
+    }
   };
 
   const onClose = () => {
-    isControlled ? onCloseProp?.() : onToggle();
+    if (isControlled) {
+      onCloseProp?.();
+    } else {
+      onToggle();
+    }
   };
-
   return { isOpen, onOpen, onClose };
 };
diff --git a/packages/drawer/src/index.ts b/packages/drawer/src/index.ts
index dc50c79..a3fe954 100644
--- a/packages/drawer/src/index.ts
+++ b/packages/drawer/src/index.ts
@@ -1 +1 @@
-export * from '../src/components/Drawer';
+export * from './components/Drawer';
diff --git a/packages/drawer/src/styles.ts b/packages/drawer/src/styles.ts
index ce523c7..75b2a77 100644
--- a/packages/drawer/src/styles.ts
+++ b/packages/drawer/src/styles.ts
@@ -4,49 +4,48 @@ import { Placement } from './types';
 
 export const portal = (width: number, height: number, placement: Placement, full: boolean) => {
   const padding = 12;
-  if (full) {
-    width = window.innerWidth - padding * 2;
-    height = window.innerHeight - padding * 2;
-  }
+  const adjustedWidth = full ? window.innerWidth - padding * 2 : width;
+  const adjustedHeight = full ? window.innerHeight - padding * 2 : height;
+
   const position = {
     right: {
       right: `-${padding}px`,
-      transform: `translateX(${width + padding * 3}px)`,
+      transform: `translateX(${adjustedWidth + padding * 3}px)`,
       transition: 'transform .2s ease-in-out',
       top: 0,
       height: '100vh',
-      width,
+      width: adjustedHeight,
       '&.open': {
-        transform: full ? `translateX(-${padding}px)` : `translateX(-${padding}px)`
+        transform: `translateX(-${padding}px)`
       }
     },
     left: {
-      left: `-${width + padding * 3}px`,
+      left: `-${adjustedWidth + padding * 3}px`,
       transition: 'transform .2s ease-in-out',
       top: 0,
       height: '100vh',
-      width,
+      width: adjustedWidth,
       '&.open': {
-        transform: `translateX(${width + padding * 3}px)`
+        transform: `translateX(${adjustedWidth + padding * 3}px)`
       }
     },
     top: {
-      top: `-${height + padding * 4}px`,
+      top: `-${adjustedHeight + padding * 4}px`,
       left: 0,
       width: `calc(100vw - ${padding * 2}px)`,
       boxShadow: 'none',
-      height,
+      height: adjustedHeight,
       '&.open': {
-        transform: `translateY(${height + padding * 4}px)`
+        transform: `translateY(${adjustedHeight + padding * 4}px)`
       }
     },
     bottom: {
-      bottom: `-${height + padding * 2}px`,
+      bottom: `-${adjustedHeight + padding * 2}px`,
       left: 0,
       width: `calc(100vw - ${padding * 2}px)`,
-      height,
+      height: adjustedHeight,
       '&.open': {
-        transform: `translateY(-${height + padding * 2}px)`
+        transform: `translateY(-${adjustedHeight + padding * 2}px)`
       }
     }
   };