[#50] ✨ 공통 컴포넌트 dropdown 개발 (#111)

* [#50] 🚚 rename index.tsx -> index.ts

* [#67] 💄 solve prettier build warnings by formatting

* [#97] ✨ add dropdown component

* [#97] ♻️ add close method to useToggle hook

* [#97] ✅ add dropdown stories

* [#97] 🔧 add icon assets (setting / workbag / codefile / logout)

* [#97] 💄 adjust svg fill and stroke attributes

* [#97] 💄 replace size props from 44 px to 48px in avatar

* [#97] 💄 expand highlight component with new className props

* [#97] ✨ add header user menu component

* [#97] ✅ add header user menu stories

* [#97] 🐛 remove unused value props from dropdown items

* [#97] 🚚 remove comments and allow close method when touching outside of dropdown

* [#97] 🚚 remove closeOnSelect props from header user menu component

* [#97] 🗑️ remove select component

* [#97] 🐛 solve build warning by removing unused import line

* [#97] ✨ make sure dropdown to close when clicked outside of the menu

Author: KingNono1030

src/app/providers.tsx

@@ -7,7 +7,6 @@ import {
   QueryClientProvider,
   isServer,
 } from '@tanstack/react-query'
-import { ReactNode } from 'react'
 
 // In Next.js, this file would be called: app/providers.tsx
 
@@ -38,7 +37,11 @@ function getQueryClient() {
   return browserQueryClient
 }
 
-const Providers = ({ children }: { children: ReactNode }): JSX.Element => {
+const Providers = ({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element => {
   // NOTE: Avoid useState when initializing the query client if you don't
   //       have a suspense boundary between this and the code that may
   //       suspend because React will throw away the client on the initial

src/assets/IconList.ts

@@ -12,6 +12,7 @@ import IcCheckboxOn from './icons/ic-checkbox-on.svg'
 import IcChevronLeft from './icons/ic-chevron-left.svg'
 import IcChevronRight from './icons/ic-chevron-right.svg'
 import IcClose from './icons/ic-close.svg'
+import IcCodefile from './icons/ic-codefile.svg'
 import IcComment from './icons/ic-comment.svg'
 import IcEdit from './icons/ic-edit.svg'
 import IcEditorAlignCenter from './icons/ic-editor-align-center.svg'
@@ -30,17 +31,24 @@ import IcEyeClosed from './icons/ic-eye-closed.svg'
 import IcEyeOpen from './icons/ic-eye-open.svg'
 import IcHeart from './icons/ic-heart.svg'
 import IcKebabMenu from './icons/ic-kebab-menu.svg'
+import IcLogout from './icons/ic-logout.svg'
 import IcMemberAdd from './icons/ic-member-add.svg'
 import IcMemberDelete from './icons/ic-member-delete.svg'
 import IcPaperPlane from './icons/ic-paper-plane.svg'
 import IcPlus from './icons/ic-plus.svg'
 import IcSearch from './icons/ic-search.svg'
+import IcSetting from './icons/ic-setting.svg'
 import IcShare from './icons/ic-share.svg'
 import IcStart from './icons/ic-start.svg'
+import IcWorkbag from './icons/ic-workbag.svg'
 
 export {
   IcArrowRight,
+  IcLogout,
   IcAvatar,
+  IcCodefile,
+  IcWorkbag,
+  IcSetting,
   IcBin,
   IcCalendar,
   IcCaretDown,

src/assets/icons/ic-codefile.svg

@@ -17,7 +17,7 @@ const baseStyle =
 
 const styleBySize: Record<AvatarSize, string> = {
   24: 'w-24 h-24',
-  48: 'w-44 h-44',
+  48: 'w-48 h-48',
   60: 'w-60 h-60',
   180: 'w-180 h-180',
 }

src/assets/icons/ic-logout.svg

@@ -1,6 +1,7 @@
+import React from 'react'
+
 import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
-import React from 'react'
 
 import { Clickable, ClickableProps } from './Clickable'
 

src/assets/icons/ic-setting.svg

@@ -0,0 +1,130 @@
+import React from 'react'
+
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { Dropdown } from './Dropdown'
+
+describe('Dropdown Component', () => {
+  it('renders children correctly', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+
+    // Trigger 버튼이 렌더링되었는지 확인
+    expect(screen.getByText('Open Menu')).toBeInTheDocument()
+
+    // Menu의 아이템이 초기에는 보이지 않아야 함
+    expect(screen.queryByText('Item 1')).not.toBeInTheDocument()
+    expect(screen.queryByText('Item 2')).not.toBeInTheDocument()
+  })
+
+  it('opens the menu when the trigger is clicked', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const trigger = screen.getByText('Open Menu')
+
+    // Trigger 버튼 클릭
+    fireEvent.click(trigger)
+
+    // Menu의 아이템이 보여야 함
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+  })
+
+  it('closes the menu when an item is clicked', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const trigger = screen.getByText('Open Menu')
+
+    // Trigger 버튼 클릭
+    fireEvent.click(trigger)
+
+    // Menu의 아이템이 보여야 함
+    const item = screen.getByText('Item 1')
+    fireEvent.click(item)
+
+    // Menu가 닫혀야 함
+    expect(screen.queryByText('Item 1')).not.toBeInTheDocument()
+    expect(screen.queryByText('Item 2')).not.toBeInTheDocument()
+  })
+
+  it('does not close the menu when closeOnSelect is false', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item closeOnSelect={false}>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const trigger = screen.getByText('Open Menu')
+
+    // Trigger 버튼 클릭
+    fireEvent.click(trigger)
+
+    // Menu의 아이템이 보여야 함
+    const item = screen.getByText('Item 1')
+    fireEvent.click(item)
+
+    // Menu가 닫히지 않아야 함
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+  })
+
+  it('closes the menu when clicking outside the dropdown', () => {
+    render(
+      <>
+        <Dropdown>
+          <Dropdown.Trigger>Open Menu</Dropdown.Trigger>
+          <Dropdown.Menu>
+            <Dropdown.Item>Item 1</Dropdown.Item>
+            <Dropdown.Item>Item 2</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+        <button>Outside Button</button>
+      </>
+    )
+
+    const trigger = screen.getByText('Open Menu')
+    const outsideButton = screen.getByText('Outside Button')
+
+    // Trigger 버튼 클릭
+    fireEvent.click(trigger)
+
+    // Menu의 아이템이 보여야 함
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+
+    // Dropdown 외부 클릭
+    fireEvent.click(outsideButton)
+
+    // Menu가 닫혀야 함
+    expect(screen.queryByText('Item 1')).not.toBeInTheDocument()
+    expect(screen.queryByText('Item 2')).not.toBeInTheDocument()
+  })
+})

src/assets/icons/ic-workbag.svg

@@ -0,0 +1,153 @@
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import { Box } from '@/components/common/containers'
+
+type BaseProps = React.HTMLAttributes<HTMLElement>
+
+interface DropdownContextType {
+  isOpen: boolean
+  toggle: () => void
+  close: () => void
+}
+
+const DropdownContext = createContext<DropdownContextType | null>(null)
+
+const useDropdownContext = () => {
+  const context = useContext(DropdownContext)
+  if (!context) {
+    throw new Error('useDropdownContext must be used within a DropdownProvider')
+  }
+  return context
+}
+
+const Dropdown = ({ children, className }: BaseProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const toggle = () => setIsOpen(!isOpen)
+  const close = () => setIsOpen(false)
+
+  const dropdownClass = twMerge('relative', className)
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      close()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <DropdownContext.Provider value={{ isOpen, toggle, close }}>
+      <div ref={dropdownRef} className={dropdownClass} tabIndex={-1}>
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  )
+}
+
+const Trigger = ({ children, className }: BaseProps) => {
+  const { toggle } = useDropdownContext()
+
+  return (
+    <button
+      type='button'
+      className={className}
+      onClick={toggle}
+      aria-haspopup='listbox'
+      aria-expanded={true}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface MenuProps extends BaseProps {
+  position?: 'dropup' | 'dropdown'
+  alignment?: 'left' | 'right'
+}
+
+const getMenuStyle = (position: string, alignment: string, className: string) =>
+  twMerge(
+    'absolute z-10 w-216 flex-col items-start p-8 shadow-level4',
+    position === 'dropdown' ? 'mt-4' : 'bottom-full mb-4',
+    alignment === 'right' ? 'right-0' : 'left-0',
+    className
+  )
+
+const Menu = ({
+  children,
+  className = '',
+  position = 'dropdown',
+  alignment = 'left',
+}: MenuProps): JSX.Element | null => {
+  const { isOpen } = useDropdownContext()
+  if (!isOpen) return null
+
+  return (
+    <Box
+      role='listbox'
+      variant='contained'
+      className={getMenuStyle(position, alignment, className)}
+    >
+      {children}
+    </Box>
+  )
+}
+
+interface ItemProps extends BaseProps {
+  closeOnSelect?: boolean
+}
+
+const getItemStyle = (className: string) =>
+  clsx(
+    'flex h-40 w-full items-center rounded-8 px-12 text-body2 text-gray-800 hover:bg-gray-100',
+    className
+  )
+
+const Item = ({
+  children,
+  className = '',
+  closeOnSelect = true,
+  onClick,
+  ...props
+}: ItemProps) => {
+  const { close } = useDropdownContext()
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (typeof onClick === 'function') {
+      onClick(e)
+    }
+    if (closeOnSelect) {
+      close()
+    }
+  }
+
+  return (
+    <button
+      className={getItemStyle(className)}
+      type='button'
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+Dropdown.Trigger = Trigger
+Dropdown.Menu = Menu
+Dropdown.Item = Item
+
+export { Dropdown }