Drawer 컴포넌트 ESLint, 코드 컨벤션 적용

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,17 +16,30 @@ 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();
 
   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>

packages/drawer/src/components/DrawerPortal.tsx

@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
-
 import { Button } from '@jdesignlab/button';
 import { Close } from '@jdesignlab/react-icons';
 import { Overlay, Portal } from '@jdesignlab/react-utils';
 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}

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);
 

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 };
 };

packages/drawer/src/index.ts

@@ -1 +1 @@
-export * from '../src/components/Drawer';
+export * from './components/Drawer';

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)`
       }
     }
   };

packages/drawer/src/types/base.ts

@@ -0,0 +1 @@
+export type Placement = 'top' | 'right' | 'bottom' | 'left';

packages/drawer/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './props';

packages/drawer/src/types.ts → 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;
 }