Dropdown 컴포넌트 코드 컨벤션 및 ESLint 적용

packages/dropdown/src/components/Dropdown.tsx

@@ -1,48 +1,52 @@
 /** @jsxImportSource @emotion/react */
 
-import type { DropdownProps } from '../types';
-import { dropdownWrapperStyle } from '../style';
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo } from 'react';
+import { useOutsideClick } from '@jdesignlab/react-utils';
 import { Divider } from './DropdownDivider';
 import { Menu } from './DropdownMenu';
-import { Trigger } from './DropdownTrigger';
+import { DropdownTrigger } from './DropdownTrigger';
 import { MenuItem } from './DropdownMenuItem';
 import { SubMenu } from './DropdownSubMenu';
 import { SubMenuItem } from './DropdownSubMenuItem';
+import * as Style from '../style';
 import { DropdownContext } from '../context';
-import { useOutsideClick } from '@jdesignlab/react-utils';
-import { useToggleOpen } from '../hooks/useToggleOpen';
+import { toggleOpen } from '../utils/toggleOpen';
 import { DROPDOWN_ROLE_QUERY, DROPDOWN_MENU_OPEN_CLASS_NAME } from '../constants';
+import type { DropdownProps } from '../types';
 
 export const Dropdown = (props: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [triggerWidth, setTriggerWidth] = useState<number>(0);
   const [triggerHeight, setTriggerHeight] = useState<number>(0);
-  const { children, width = 200, placement = 'buttom', ...otherProps } = props;
-  const gap = Number(props.gap) || 0;
-  const providerValue = {
-    placement,
-    width,
-    triggerWidth,
-    setTriggerWidth,
-    triggerHeight,
-    setTriggerHeight,
-    gap
-  };
+  const { children, width = 200, placement = 'bottom', gap: gapProp, ...restProps } = props;
+  const gap = Number(gapProp) || 0;
+  const providerValue = useMemo(
+    () => ({
+      placement,
+      width,
+      triggerWidth,
+      setTriggerWidth,
+      triggerHeight,
+      setTriggerHeight,
+      gap
+    }),
+    [gap, placement, triggerHeight, triggerWidth, width]
+  );
+
   useOutsideClick({
     ref: dropdownRef,
     handler: () => {
       const dropdownMenu = dropdownRef.current
         ? (dropdownRef.current.querySelector(DROPDOWN_ROLE_QUERY) as HTMLElement)
         : null;
       if (dropdownMenu && dropdownMenu.classList.contains(DROPDOWN_MENU_OPEN_CLASS_NAME)) {
-        useToggleOpen(dropdownMenu);
+        toggleOpen(dropdownMenu);
       }
     }
   });
   return (
     <DropdownContext.Provider value={providerValue}>
-      <div ref={dropdownRef} css={dropdownWrapperStyle} {...otherProps} className="menu_wrapper">
+      <div ref={dropdownRef} css={Style.dropdownWrapper} {...restProps} className="menu_wrapper">
         {children}
       </div>
     </DropdownContext.Provider>
@@ -51,7 +55,7 @@ export const Dropdown = (props: DropdownProps) => {
 
 Dropdown.displayName = 'Dropdown';
 
-Dropdown.Trigger = Trigger;
+Dropdown.Trigger = DropdownTrigger;
 Dropdown.Menu = Menu;
 Dropdown.MenuItem = MenuItem;
 Dropdown.SubMenu = SubMenu;

packages/dropdown/src/components/DropdownDivider.tsx

@@ -1,9 +1,7 @@
 /** @jsxImportSource @emotion/react */
 
-import { dropdownDividerStyle } from '../style';
+import * as Style from '../style';
 
-export const Divider = () => {
-  return <div css={dropdownDividerStyle} />;
-};
+export const Divider = () => <div css={Style.dropdownDivider} />;
 
-Divider.displayName = 'Dropdown.Divider'
+Divider.displayName = 'DropdownDivider';

packages/dropdown/src/components/DropdownMenu.tsx

@@ -1,36 +1,32 @@
 /** @jsxImportSource @emotion/react */
-import { dropdownLocationStyle } from '../style';
+
 import React, { useContext, useRef } from 'react';
+import * as Style from '../style';
+
 import { DropdownContext } from '../context';
+import closeKeyDown from '../utils/closeKeyDown';
 import type { DropdownMenuProps } from '../types';
-import useCloseKeyDown from '../hooks/useCloseKeyDown';
 
 export const Menu = React.memo((props: DropdownMenuProps) => {
   const { children, ...otherProps } = props;
   const { width, triggerWidth, triggerHeight, gap, placement } = useContext(DropdownContext);
-  const keyDownHandle = useCloseKeyDown();
   const menuRef = useRef<HTMLUListElement>(null);
 
-  const MenuBox = () => {
-    return (
-      <ul
-        ref={menuRef}
-        role="menu"
-        className={`menu menu_close`}
-        // aria-haspopup="true"  // 서브메뉴 있는 경우
-        // aria-expanded={open} // 메뉴 확장됐을 경우
-        aria-orientation="vertical" // 메뉴 방향
-        onKeyDown={e => {
-          keyDownHandle(e);
-        }}
-        css={dropdownLocationStyle(menuRef, width, triggerWidth, triggerHeight, gap, placement)}
-        {...otherProps}
-      >
-        {children}
-      </ul>
-    );
-  };
-  return <>{<MenuBox />}</>;
+  return (
+    <ul
+      ref={menuRef}
+      role="menu"
+      className="menu menu_close"
+      // aria-haspopup="true"  // 서브메뉴 있는 경우
+      // aria-expanded={open} // 메뉴 확장됐을 경우
+      aria-orientation="vertical" // 메뉴 방향
+      onKeyDown={e => closeKeyDown(e)}
+      css={Style.createLocation(menuRef, width, triggerWidth, triggerHeight, gap, placement)}
+      {...otherProps}
+    >
+      {children}
+    </ul>
+  );
 });
 
-Menu.displayName = 'Dropdown.Menu';
+Menu.displayName = 'DropdownMenu';

packages/dropdown/src/components/DropdownMenuItem.tsx

@@ -1,16 +1,15 @@
 /** @jsxImportSource @emotion/react */
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { DropdownSubContext } from '../context';
-import { dropdownItemStyle } from '../style';
-import type { DropdownMenuItemProps } from '../types';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
-import { useSelectItem } from '../hooks/useSelectItem';
+import * as Style from '../style';
 import { NOT_DISABLED_DROPDOWN_MENU_QUERY } from '../constants';
+import { selectItem } from '../utils/selectItem';
+import { keyboardHandler } from '../utils/keyboardHandler';
+import type { DropdownMenuItemProps } from '../types';
 
 export const MenuItem = (props: DropdownMenuItemProps) => {
   const menuItemRef = useRef<HTMLLIElement>(null);
-  const { children, hasSub, onClick, ...otherProps } = props;
-  const disabled = props.disabled === undefined ? false : props.disabled;
+  const { children, hasSub, onClick, disabled, ...restProps } = props;
   const [subOpen, setSubOpen] = useState<boolean>(false);
 
   const toggleSubOpen = () => {
@@ -22,9 +21,9 @@ export const MenuItem = (props: DropdownMenuItemProps) => {
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (!menuItemRef.current) return;
     if (event.key !== 'Tab') {
-      subOpen && setSubOpen(false);
+      setSubOpen(false);
     }
-    useKeyboardHandler({
+    keyboardHandler({
       event,
       parentScope: '.menu',
       selectorOfList: NOT_DISABLED_DROPDOWN_MENU_QUERY,
@@ -33,25 +32,28 @@ export const MenuItem = (props: DropdownMenuItemProps) => {
     });
   };
 
+  const providerValue = useMemo(() => ({ subOpen, setSubOpen }), [subOpen]);
+
   return (
-    <DropdownSubContext.Provider value={{ subOpen, setSubOpen }}>
+    <DropdownSubContext.Provider value={providerValue}>
       <li
         ref={menuItemRef}
         role="menuitem"
         tabIndex={disabled ? -1 : 0}
         className="menu_item"
-        aria-disabled={disabled ? true : false}
-        css={{ ...dropdownItemStyle(disabled) }}
+        aria-disabled={!!disabled}
+        css={{ ...Style.createDropdownItem(!!disabled) }}
         onMouseOver={toggleSubOpen}
         onMouseLeave={toggleSubOpen}
-        onClick={e => useSelectItem(e, onClick)}
         onKeyDown={e => onKeyDown(e)}
-        {...otherProps}
+        onClick={e => selectItem(e, onClick)}
+        onFocus={toggleSubOpen}
+        {...restProps}
       >
         {children}
       </li>
     </DropdownSubContext.Provider>
   );
 };
 
-MenuItem.displayName = 'Dropdown.MenuItem';
+MenuItem.displayName = 'DropdownMenuItem';

packages/dropdown/src/components/DropdownSubMenu.tsx

@@ -1,30 +1,29 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { dropdownSubLocationStyle, dropdownMenuStyle } from '../style';
-import React, { useState, useEffect, useContext, useRef, createContext, useCallback } from 'react';
+import { useState, useEffect, useContext, useRef } from 'react';
+import * as Style from '../style';
 import { DropdownContext, DropdownSubContext } from '../context';
 import type { DropdownSubMenuProps } from '../types';
 
 export const SubMenu = (props: DropdownSubMenuProps) => {
-  const { children, ...otherProps } = props;
+  const { children, ...restProps } = props;
   const { width } = useContext(DropdownContext);
   const { subOpen } = useContext(DropdownSubContext);
   const [menuStyle, setMenuStyle] = useState<ReturnType<typeof css>>();
   const menuRef = useRef<HTMLUListElement>(null);
 
   useEffect(() => {
-    setMenuStyle(css({ ...dropdownSubLocationStyle(menuRef, width) }, { ...dropdownMenuStyle }));
-  }, [open]);
+    setMenuStyle(css({ ...Style.createDropdownSubLocation(menuRef, width) }, { ...Style.dropdownMenu }));
+  }, [width]);
 
   return (
     <ul
       role="menu"
       ref={menuRef}
-      aria-expanded={subOpen}
       aria-orientation="vertical"
       css={menuStyle}
       className={`${subOpen ? 'sub_open' : 'sub_close'}`}
-      {...otherProps}
+      {...restProps}
     >
       {children}
     </ul>

packages/dropdown/src/components/DropdownSubMenuItem.tsx

@@ -1,20 +1,19 @@
 /** @jsxImportSource @emotion/react */
-import { useContext, useRef, useState } from 'react';
-import { dropdownItemStyle } from '../style';
-import type { DropdownSubMenuItemProps } from '../types';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
-import { useSelectItem } from '../hooks/useSelectItem';
+import { useRef } from 'react';
+import * as Style from '../style';
 import { DROPDOWN_MENU_OPEN_CLASS_NAME, NOT_DISABLED_DROPDOWN_SUB_ITEM_QUERY } from '../constants';
+import { keyboardHandler } from '../utils/keyboardHandler';
+import { selectItem } from '../utils/selectItem';
+import type { DropdownSubMenuItemProps } from '../types';
 
 export const SubMenuItem = (props: DropdownSubMenuItemProps) => {
   const menuItemRef = useRef<HTMLLIElement>(null);
-  const { children, onClick, ...otherProps } = props;
-  const disabled = props.disabled === undefined ? false : props.disabled;
+  const { children, onClick, disabled, ...otherProps } = props;
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (!menuItemRef.current) return;
 
-    useKeyboardHandler({
+    keyboardHandler({
       event,
       parentScope: DROPDOWN_MENU_OPEN_CLASS_NAME,
       selectorOfList: NOT_DISABLED_DROPDOWN_SUB_ITEM_QUERY
@@ -27,9 +26,9 @@ export const SubMenuItem = (props: DropdownSubMenuItemProps) => {
       role="menuitem"
       tabIndex={disabled ? -1 : 0}
       className={`sub_item ${disabled ? 'disabled' : ''}`}
-      onClick={e => useSelectItem(e, onClick)}
-      aria-disabled={disabled ? true : false}
-      css={{ ...dropdownItemStyle(disabled) }}
+      onClick={e => selectItem(e, onClick)}
+      aria-disabled={!!disabled}
+      css={{ ...Style.createDropdownItem(!!disabled) }}
       onKeyDown={e => onKeyDown(e)}
       {...otherProps}
     >

packages/dropdown/src/components/DropdownTrigger.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useContext, useRef } from 'react';
 import { DropdownContext } from '../context';
+import { toggleOpen } from '../utils/toggleOpen';
+import { openKeyDown } from '../utils/openKeyDown';
 import type { DropdownTriggerProps } from '../types';
-import useOpenKeyDown from '../hooks/useOpenKeyDown';
-import { useToggleOpen } from '../hooks/useToggleOpen';
-import { DROPDOWN_ROLE_QUERY, DROPDOWN_MENU_WRAPPER_CLASS } from '../constants';
 
-export const Trigger = (props: DropdownTriggerProps) => {
-  const { children, ...otherProps } = props;
+export const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const { children, ...restProps } = props;
   const { setTriggerWidth, setTriggerHeight } = useContext(DropdownContext);
   const triggerRef = useRef<HTMLDivElement>(null);
 
@@ -16,29 +15,28 @@ export const Trigger = (props: DropdownTriggerProps) => {
       setTriggerWidth(parseInt(style.width, 10));
       setTriggerHeight(parseInt(style.height, 10));
     }
-  }, [triggerRef]);
+  }, [setTriggerHeight, setTriggerWidth, triggerRef]);
 
-  const onClickHandle = () => {
+  const onTriggerClick = () => {
     if (triggerRef?.current) {
-      const dropdownMenu = triggerRef.current
-        .closest(DROPDOWN_MENU_WRAPPER_CLASS)
-        ?.querySelector(DROPDOWN_ROLE_QUERY) as HTMLElement;
-      useToggleOpen(dropdownMenu);
+      toggleOpen(triggerRef.current);
     }
   };
 
   return (
     <div
+      role="button"
+      tabIndex={0}
       ref={triggerRef}
-      onClick={onClickHandle}
+      onClick={onTriggerClick}
       onKeyDown={e => {
-        useOpenKeyDown(e);
+        openKeyDown(e);
       }}
-      {...otherProps}
+      {...restProps}
     >
       {children}
     </div>
   );
 };
 
-Trigger.displayName = 'Dropdown.Trigger';
+DropdownTrigger.displayName = 'Dropdown.Trigger';

packages/dropdown/src/context.ts

@@ -1,16 +1,17 @@
 import { createContext } from 'react';
+import { DropdownContextProps, DropdownSubContextProps } from './types';
 
-export const DropdownContext = createContext({
+export const DropdownContext = createContext<DropdownContextProps>({
   width: 0,
   placement: 'top',
   triggerWidth: 0,
-  setTriggerWidth: (w: any) => {},
+  setTriggerWidth: () => {},
   triggerHeight: 0,
-  setTriggerHeight: (h: any) => {},
+  setTriggerHeight: () => {},
   gap: 0
 });
 
-export const DropdownSubContext = createContext({
+export const DropdownSubContext = createContext<DropdownSubContextProps>({
   subOpen: false,
-  setSubOpen: (value: boolean) => {}
+  setSubOpen: () => {}
 });