Refactor: Header 컴포넌트 및 하위 컴포넌트들 리팩토링

src/components/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 
-import { SVGS } from '@/constants/index';
+import { SVGS } from '@/constants';
 
 import styles from './Avatar.module.scss';
 

src/components/Pagination/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 
-import { SVGS } from '@/constants/index';
+import { SVGS } from '@/constants';
 
 import usePagination from '@/hooks/usePagination';
 

src/components/header/Alarm/index.tsx

@@ -1,6 +1,4 @@
-import Image from 'next/image';
-
-import { MouseEventHandler, RefObject } from 'react';
+import { RefObject } from 'react';
 
 import classNames from 'classnames/bind';
 
@@ -14,23 +12,21 @@ const { full, empty } = SVGS.alarm;
 type AlarmProps = {
   isAlarmExisted: boolean;
   isActivated: boolean;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  alarmRef: RefObject<HTMLButtonElement>;
+  onClick: () => void;
+  alarmRef?: RefObject<HTMLButtonElement>;
 };
 
 const Alarm = ({ isAlarmExisted, isActivated, onClick, alarmRef }: AlarmProps) => {
+  const { url, alt } = isAlarmExisted ? full : empty;
+
   return (
     <button className={cx('frame-outer')} onClick={onClick} ref={alarmRef}>
       <div className={cx('dot', 'dot-top', { 'dot-activated': isActivated })}></div>
       <div className={cx('dot', 'dot-right', { 'dot-activated': isActivated })}></div>
       <div className={cx('dot', 'dot-bottom', { 'dot-activated': isActivated })}></div>
       <div className={cx('dot', 'dot-left', { 'dot-activated': isActivated })}></div>
       <div className={cx('frame-inner', { 'frame-inner-activated': isActivated })}>
-        {isAlarmExisted ? (
-          <Image src={full.url} alt={full.alt} width={20} height={20} />
-        ) : (
-          <Image src={empty.url} alt={empty.alt} width={20} height={20} />
-        )}
+        <img src={url} alt={alt} width={20} height={20} />
       </div>
     </button>
   );

src/components/header/AlarmCard/index.tsx

@@ -1,15 +1,7 @@
-import Image from 'next/image';
-
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
 import classNames from 'classnames/bind';
 
-import { deleteMyNotification } from '@/apis/queryFunctions';
-import { QUERY_KEYS } from '@/apis/queryKeys';
-import { API_ERROR_MESSAGE, SVGS } from '@/constants';
-import { getElapsedTimeToKST, splitTitleByDelimiter } from '@/utils';
+import { SVGS } from '@/constants';
 
-import { ConfirmModal, ModalButton } from '@/components/commons/modals';
 import useToggleButton from '@/hooks/useToggleButton';
 
 import styles from './AlarmCard.module.scss';
@@ -21,66 +13,32 @@ type AlarmCardProps = {
   id: number;
   content: string;
   createdAt: string;
+  onClick: (id: number) => void;
 };
 
-const AlarmCard = ({ id, content, createdAt }: AlarmCardProps) => {
+const AlarmCard = ({ id, content, createdAt, onClick }: AlarmCardProps) => {
   const { isVisible: hoverState, handleToggleClick: handleToggleState } = useToggleButton();
-  const { isVisible: is404Open, handleToggleClick: handle404Click } = useToggleButton();
-
-  const { title, MaxCount } = splitTitleByDelimiter(content);
-  const refinedContent = title + (MaxCount.match(/\(.*$/)?.[0] ?? '');
-
-  const queryClient = useQueryClient();
-
-  const { mutate: deleteAlarmMutation } = useMutation({
-    mutationFn: deleteMyNotification,
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: [QUERY_KEYS.myNotifications.get],
-      });
-    },
-    onError: (error) => {
-      if ((error as AxiosError)?.response?.status === 404) {
-        handle404Click();
-      }
-    },
-  });
-
-  const handleDeleteNotification = (id: number) => {
-    deleteAlarmMutation(id);
-  };
 
   return (
-    <>
-      <div className={cx('alarm-card')}>
-        <div className={cx('alarm-card-container')}>
-          <p className={cx('alarm-card-content')}>{refinedContent}</p>
-          <button
-            className={cx('alarm-card-delete')}
-            onMouseEnter={handleToggleState}
-            onMouseLeave={handleToggleState}
-            onClick={() => handleDeleteNotification(id)}
-          >
-            <Image
-              src={hoverState ? hover.url : normal.url}
-              alt={hoverState ? hover.alt : normal.alt}
-              width={24}
-              height={24}
-            />
-          </button>
-        </div>
-        <span className={cx('alarm-card-created-at')}>{getElapsedTimeToKST(createdAt)}</span>
+    <div className={cx('alarm-card')}>
+      <div className={cx('alarm-card-container')}>
+        <p className={cx('alarm-card-content')}>{content}</p>
+        <button
+          className={cx('alarm-card-delete')}
+          onMouseEnter={handleToggleState}
+          onMouseLeave={handleToggleState}
+          onClick={() => onClick(id)}
+        >
+          <img
+            src={hoverState ? hover.url : normal.url}
+            alt={hoverState ? hover.alt : normal.alt}
+            width={24}
+            height={24}
+          />
+        </button>
       </div>
-      <ConfirmModal
-        warning
-        openModal={is404Open}
-        onClose={handle404Click}
-        state='ERROR'
-        title={'알림 삭제에 실패하였습니다'}
-        desc={API_ERROR_MESSAGE.notification[404]}
-        renderButton={<ModalButton onClick={handle404Click}>닫기</ModalButton>}
-      ></ConfirmModal>
-    </>
+      <span className={cx('alarm-card-created-at')}>{createdAt}</span>
+    </div>
   );
 };
 

src/components/header/AlarmList/index.tsx

@@ -1,95 +1,62 @@
 import { RefObject } from 'react';
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
 import classNames from 'classnames/bind';
 
-import { deleteMyNotifications } from '@/apis/queryFunctions';
-import { QUERY_KEYS } from '@/apis/queryKeys';
-import { API_ERROR_MESSAGE } from '@/constants';
-
-import { ConfirmModal, ModalButton } from '@/components/commons/modals';
-import AlarmCard from '@/components/layout/header/AlarmCard';
-import EmptyAlarm from '@/components/layout/header/EmptyAlarm';
-import useToggleButton from '@/hooks/useToggleButton';
-
-import { NotificationResponse } from '@/types';
+import AlarmCard from '@/components/header/AlarmCard';
+import EmptyAlarm from '@/components/header/EmptyAlarm';
 
 import styles from './AlarmList.module.scss';
 
 const cx = classNames.bind(styles);
 
+type Notification = {
+  id: number;
+  content: string;
+  createdAt: string;
+};
+
 type AlarmListProps = {
-  notifications: NotificationResponse[];
+  notifications: Notification[];
   totalCount: number;
   alarmListRef: RefObject<HTMLDivElement>;
+  handleDelete: (id: number) => void;
+  handleDeleteAll: () => void;
+  emptyAlarmText: string;
 };
 
-const AlarmList = ({ notifications, totalCount, alarmListRef }: AlarmListProps) => {
-  const { isVisible: is404Open, handleToggleClick: handle404Click } = useToggleButton();
-
-  const queryClient = useQueryClient();
-
-  const { mutate: deleteAlarmMutations } = useMutation({
-    mutationFn: deleteMyNotifications,
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: [QUERY_KEYS.myNotifications.get],
-      });
-    },
-    onError: (error) => {
-      if ((error as AxiosError)?.response?.status === 404) {
-        handle404Click();
-      }
-    },
-  });
-
-  const extractednotificationIds = (notifications: NotificationResponse[]): number[] => {
-    return notifications.map((notification) => notification.id);
-  };
-
-  const handleDeleteAllNotifications = () => {
-    if (notifications.length > 0) {
-      deleteAlarmMutations(extractednotificationIds(notifications));
-    }
-  };
-
+const AlarmList = ({
+  notifications,
+  totalCount,
+  alarmListRef,
+  handleDelete,
+  handleDeleteAll,
+  emptyAlarmText,
+}: AlarmListProps) => {
   return (
-    <>
-      <div className={cx('alarm-list')} ref={alarmListRef}>
-        <div className={cx('alarm-list-top')}>
-          <div className={cx('alarm-list-count')}>
-            <span className={cx('alarm')}>알림</span>
-            <span className={cx('total-count')}>{totalCount}</span>
-          </div>
-          <button className={cx('delete-all')} onClick={handleDeleteAllNotifications}>
-            전체 삭제
-          </button>
-        </div>
-        <div className={cx('alarm-list-bottom')}>
-          {notifications[0] ? (
-            <ul className={cx('alarm-list-contents')}>
-              {notifications.map(({ id, content, createdAt }) => (
-                <li key={id}>
-                  <AlarmCard id={id} content={content} createdAt={createdAt} />
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <EmptyAlarm />
-          )}
+    <div className={cx('alarm-list')} ref={alarmListRef}>
+      <div className={cx('alarm-list-top')}>
+        <div className={cx('alarm-list-count')}>
+          <span className={cx('alarm')}>알림</span>
+          <span className={cx('total-count')}>{totalCount}</span>
         </div>
+        <button className={cx('delete-all')} onClick={handleDeleteAll}>
+          전체 삭제
+        </button>
+      </div>
+      <div className={cx('alarm-list-bottom')}>
+        {notifications[0] ? (
+          <ul className={cx('alarm-list-contents')}>
+            {notifications.map(({ id, content, createdAt }) => (
+              <li key={id}>
+                <AlarmCard id={id} content={content} createdAt={createdAt} onClick={handleDelete} />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <EmptyAlarm emptyAlarmText={emptyAlarmText} />
+        )}
       </div>
-      <ConfirmModal
-        warning
-        openModal={is404Open}
-        onClose={handle404Click}
-        state='ERROR'
-        title={'알림 삭제에 실패하였습니다'}
-        desc={API_ERROR_MESSAGE.notification[404]}
-        renderButton={<ModalButton onClick={handle404Click}>닫기</ModalButton>}
-      ></ConfirmModal>
-    </>
+    </div>
   );
 };
 

src/components/header/DrawerMenu/index.tsx

@@ -1,35 +1,30 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { MouseEventHandler } from 'react';
-
 import classNames from 'classnames/bind';
 
-import { GAME_NAME_LIST_EN, SVGS } from '@/constants';
-import { formatGameToLink } from '@/utils';
+import { SVGS } from '@/constants';
 
 import styles from './DrawerMenu.module.scss';
 
 const cx = classNames.bind(styles);
 const { url, alt } = SVGS.close.active;
 
 type DrawerMenuProps = {
-  onClick: MouseEventHandler<HTMLElement>;
+  menuList: string[];
+  onClick: () => void;
 };
 
-const DrawerMenu = ({ onClick }: DrawerMenuProps) => {
+const DrawerMenu = ({ menuList, onClick }: DrawerMenuProps) => {
   return (
     <aside className={cx('drawer-menu')}>
       <button className={cx('drawer-menu-close-button')} onClick={onClick}>
-        <Image src={url} alt={alt} width={24} height={24} />
+        <img src={url} alt={alt} width={24} height={24} />
       </button>
       <nav>
         <ul className={cx('drawer-menu-game')}>
-          {GAME_NAME_LIST_EN.map((game, index) => (
+          {menuList.map((game, index) => (
             <li className={cx('drawer-menu-game-item')} key={`game-${index}`}>
-              <Link className={cx('drawer-menu-game-link')} onClick={onClick} href={`/${formatGameToLink(game)}`}>
+              <a className={cx('drawer-menu-game-link')} onClick={onClick} href={`/${game}`}>
                 {game}
-              </Link>
+              </a>
             </li>
           ))}
         </ul>

src/components/header/EmptyAlarm/index.tsx

@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 import classNames from 'classnames/bind';
 
 import { SVGS } from '@/constants';
@@ -10,11 +8,15 @@ const cx = classNames.bind(styles);
 
 const { url, alt } = SVGS.alarm.off;
 
-const EmptyAlarm = () => {
+type EmptyAlarmProps = {
+  emptyAlarmText: string;
+};
+
+const EmptyAlarm = ({ emptyAlarmText }: EmptyAlarmProps) => {
   return (
     <div className={cx('empty-alarm')}>
-      <Image src={url} alt={alt} width={24} height={24} />
-      <span className={cx('text')}>알림이 없습니다</span>
+      <img src={url} alt={alt} width={24} height={24} />
+      <span className={cx('text')}>{emptyAlarmText}</span>
     </div>
   );
 };

src/components/header/Header/Header.module.scss

@@ -73,34 +73,5 @@
         @include flexbox($gap: 0.8rem);
       }
     }
-
-    &-alarm-list,
-    &-user-menu {
-      @include responsive(T) {
-        right: 1.5rem;
-      }
-
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 0.8rem;
-    }
-  }
-}
-
-.drawer-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translateX(-100%);
-
-  &.open {
-    transform: translateX(0);
-    animation: slide-in-left ease-in-out 0.3s;
-  }
-
-  &.close {
-    transform: translateX(-100%);
-    animation: slide-out-left ease-in-out 0.3s;
   }
 }