refactor: 모달, 드롭다운 컴포넌트 긴급 수정 (#77)

* feat: modal id prop 추가 * feat: 로그아웃 모달, 토스트 추가 * feat: 메뉴 눌러도 드롭다운 꺼지지 않게 방지 * refactor: anchor 엘리먼트 상속 타입으로 변경 * style: 유저 이름 hover 스타일 제거
prgrms-web-devcourse · Nov 27, 2023 · 33d800e · 33d800e
1 parent 57582a5
commit 33d800e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 35 deletions.
diff --git a/src/components/Dropdown/Item/index.tsx b/src/components/Dropdown/Item/index.tsx
@@ -1,22 +1,25 @@
-import { PropsWithChildren } from 'react'
+import { HTMLAttributes, PropsWithChildren } from 'react'
 
-interface ItemProps {
-  onClick?: () => void
+interface ItemProps extends HTMLAttributes<HTMLAnchorElement> {
   defaultClose?: boolean
+  enabled?: boolean
 }
 
 const Item = ({
   children,
-  onClick,
-  defaultClose = true,
+  defaultClose = false,
+  enabled = true,
+  ...props
 }: PropsWithChildren<ItemProps>) => {
   return (
     <a
       className={`dropdown-item rounded-none text-center text-sm dark:text-white md:text-lg ${
-        defaultClose ? 'hover:bg-gray-400 dark:hover:bg-gray-300' : ''
+        enabled
+          ? 'hover:bg-gray-400 dark:hover:bg-gray-300'
+          : 'cursor-auto hover:bg-white dark:hover:bg-main-gray'
       }`}
       tabIndex={defaultClose ? undefined : -1}
-      onClick={onClick}
+      {...props}
     >
       {children}
     </a>

diff --git a/src/components/Dropdown/Menu/index.tsx b/src/components/Dropdown/Menu/index.tsx
@@ -18,7 +18,9 @@ const Menu = ({
 
   return (
     <div
-      className={`dropdown-menu border border-black bg-white shadow-md dark:border-white dark:bg-main-gray ${menuPosition[position]} ${className}`}
+      className={`dropdown-menu border border-black bg-white px-0 shadow-md dark:border-white dark:bg-main-gray ${menuPosition[position]} ${className}`}
+      onClick={(e) => e.stopPropagation()}
+      tabIndex={-1}
     >
       {children}
     </div>

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { useToast } from '@/hooks'
 import { useUser, useLogout } from '@/apis/hooks'
 import {
   LogoRowIcon,
@@ -8,6 +9,7 @@ import {
   BasicProfileIcon,
 } from '@/assets/icons'
 import { rangerHead } from '@/assets/images'
+import { Modal } from '..'
 import Dropdown from '../Dropdown'
 
 interface HeaderProps {
@@ -21,12 +23,15 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
   const { pathname } = useLocation()
   const navigate = useNavigate()
 
+  const { addToast } = useToast()
+
   const avatarVisible = pathname !== '/sign-up' && pathname !== '/login'
   const goBackVisible = pathname !== '/login' && pathname !== '/'
 
   const handleLogout = () => {
     logout(undefined, {
       onSuccess() {
+        addToast({ message: '로그아웃 되었습니다.', type: 'success' })
         navigate('/login')
       },
     })
@@ -55,22 +60,35 @@ const Header = memo(({ handleGoBack }: HeaderProps) => {
         </div>
         <div>
           {avatarVisible && user && (
-            <Dropdown>
-              <Dropdown.Toggle className="avatar avatar-sm flex cursor-pointer items-center justify-center overflow-hidden border border-gray-200 bg-white md:avatar-md dark:bg-black">
-                <BasicProfileIcon className="h-7 w-7 md:h-9 md:w-9" />
-              </Dropdown.Toggle>
-              <Dropdown.Menu className="w-40 rounded-sm">
-                <Dropdown.Item defaultClose={false}>
-                  <p className="text-xl">{user.name}</p>
-                </Dropdown.Item>
-                <Dropdown.Divider />
-                <Dropdown.Item onClick={() => navigate('/profile')}>
-                  마이페이지
-                </Dropdown.Item>
-                <Dropdown.Item>슬랙 알림 보기</Dropdown.Item>
-                <Dropdown.Item onClick={handleLogout}>로그아웃</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+            <>
+              <Dropdown>
+                <Dropdown.Toggle className="avatar avatar-sm flex cursor-pointer items-center justify-center overflow-hidden border border-gray-200 bg-white md:avatar-md dark:bg-black">
+                  <BasicProfileIcon className="h-7 w-7 md:h-9 md:w-9" />
+                </Dropdown.Toggle>
+                <Dropdown.Menu className="w-40 rounded-sm">
+                  <Dropdown.Item enabled={false}>
+                    <p className="text-xl">{user.name}</p>
+                  </Dropdown.Item>
+                  <Dropdown.Divider />
+                  <Dropdown.Item onClick={() => navigate('/profile')}>
+                    마이페이지
+                  </Dropdown.Item>
+                  <Dropdown.Item>슬랙 알림 보기</Dropdown.Item>
+                  <Dropdown.Item>
+                    <label htmlFor="logout" className="cursor-pointer">
+                      로그아웃
+                    </label>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+
+              <Modal
+                modalId="logout"
+                content="로그아웃 하시겠습니까?"
+                label="로그아웃"
+                handleClickLabel={handleLogout}
+              />
+            </>
           )}
         </div>
       </div>

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -1,29 +1,30 @@
-import { PropsWithChildren } from 'react'
 import { CloseIcon } from '@/assets/icons'
 
 interface ModalProps {
+  modalId: string | number
   content: string
   label: string
   handleClickLabel: () => void
-  handleCloseModal?: () => void
+  handleClose?: () => void
 }
 
 const Modal = ({
-  children,
+  modalId,
   content,
   label,
   handleClickLabel,
-  handleCloseModal,
-}: PropsWithChildren<ModalProps>) => {
+  handleClose,
+}: ModalProps) => {
+  const id = modalId.toString()
+
   return (
     <>
-      {children}
-      <input className="modal-state" id="modal-1" type="checkbox" />
+      <input className="modal-state" id={id} type="checkbox" />
       <div className="modal">
-        <label className="modal-overlay" htmlFor="modal-1"></label>
+        <label className="modal-overlay" htmlFor={id}></label>
         <div className="modal-content flex w-80 flex-col items-center gap-8 rounded-md bg-white p-5 dark:bg-main-gray">
           <label
-            htmlFor="modal-1"
+            htmlFor={id}
             className="btn h-fit w-fit justify-center self-end bg-transparent p-0"
           >
             <CloseIcon className="dark:fill-white" />
@@ -33,9 +34,9 @@ const Modal = ({
           </span>
           <div className="flex w-full gap-6">
             <label
-              htmlFor="modal-1"
+              htmlFor={id}
               className="btn w-full rounded-md border border-gray-300 bg-transparent px-8 text-base dark:border-gray-100 dark:text-white"
-              onClick={handleCloseModal}
+              onClick={handleClose}
             >
               취소
             </label>