diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index b96f0124..dad6c567 100644
--- a/src/components/Avatar/index.tsx
+++ b/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';
 
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index e5dbfd34..f395d998 100644
--- a/src/components/Pagination/index.tsx
+++ b/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';
 
diff --git a/src/components/header/Alarm/index.tsx b/src/components/header/Alarm/index.tsx
index 68e5f55a..cf16ea3d 100644
--- a/src/components/header/Alarm/index.tsx
+++ b/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,11 +12,13 @@ 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>
@@ -26,11 +26,7 @@ const Alarm = ({ isAlarmExisted, isActivated, onClick, alarmRef }: AlarmProps) =
       <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>
   );
diff --git a/src/components/header/AlarmCard/index.tsx b/src/components/header/AlarmCard/index.tsx
index 43d62e10..a9cabec5 100644
--- a/src/components/header/AlarmCard/index.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/header/AlarmList/index.tsx b/src/components/header/AlarmList/index.tsx
index 8c62d8a7..630836e5 100644
--- a/src/components/header/AlarmList/index.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/header/DrawerMenu/index.tsx b/src/components/header/DrawerMenu/index.tsx
index 9e811afe..973beee7 100644
--- a/src/components/header/DrawerMenu/index.tsx
+++ b/src/components/header/DrawerMenu/index.tsx
@@ -1,12 +1,6 @@
-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';
 
@@ -14,22 +8,23 @@ 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>
diff --git a/src/components/header/EmptyAlarm/index.tsx b/src/components/header/EmptyAlarm/index.tsx
index d30c36a1..c458872e 100644
--- a/src/components/header/EmptyAlarm/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/header/Header/Header.module.scss b/src/components/header/Header/Header.module.scss
index e225705e..32b517b9 100644
--- a/src/components/header/Header/Header.module.scss
+++ b/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;
   }
 }
diff --git a/src/components/header/Header/index.tsx b/src/components/header/Header/index.tsx
index 3e7ef91f..71157010 100644
--- a/src/components/header/Header/index.tsx
+++ b/src/components/header/Header/index.tsx
@@ -1,23 +1,8 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { useEffect, useState } from 'react';
-
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS, SVGS } from '@/constants';
+import { SVGS } from '@/constants';
 
-import Alarm from '@/components/layout/header/Alarm';
-import AlarmList from '@/components/layout/header/AlarmList';
-import { HeaderSigninButton, HeaderSignupButton } from '@/components/layout/header/buttons';
-import DrawerMenu from '@/components/layout/header/DrawerMenu';
-import HeaderProfile from '@/components/layout/header/HeaderProfile';
-import Menu from '@/components/layout/header/Menu';
-import UserMenu from '@/components/layout/header/UserMenu';
-import { useDeviceType } from '@/hooks/useDeviceType';
-import useTogglePopup from '@/hooks/useTogglePopup';
-
-import { MyNotifications, UsersResponse } from '@/types';
+import Menu from '@/components/header/Menu';
 
 import styles from './Header.module.scss';
 
@@ -25,114 +10,31 @@ const cx = classNames.bind(styles);
 const { url, alt } = SVGS.drawerMenu;
 
 type HeaderProps = {
-  userData: UsersResponse;
-  alarmData: MyNotifications;
-  isLoggedIn: boolean;
+  children: React.ReactNode;
+  path: string;
+  logoName: string;
+  menuList: string[];
+  onClick: () => void;
 };
 
-const Header = ({ userData, alarmData, isLoggedIn }: HeaderProps) => {
-  const currentDeviceType = useDeviceType();
-  const isMobileHidden = currentDeviceType !== 'Mobile';
-
-  const [isVisible, setIsVisible] = useState<boolean>();
-  const [isAlarmExisted, setIsAlarmExisted] = useState(false);
-
-  useEffect(() => {
-    if (isMobileHidden) {
-      setIsVisible(undefined);
-    }
-  }, [isMobileHidden]);
-
-  const handleToggleDrawerMenu = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  const {
-    isOpen: isAlarmActivated,
-    popupRef: alarmListRef,
-    buttonRef: alarmRef,
-    togglePopup: handleAlarmActivation,
-  } = useTogglePopup();
-
-  const {
-    isOpen: isHeaderProfileActivated,
-    popupRef: userMenuRef,
-    buttonRef: headerProfileRef,
-    togglePopup: handleHeaderProfileActivation,
-  } = useTogglePopup();
-
-  const totalCount = alarmData?.totalCount;
-  const notifications = alarmData?.notifications;
-
-  useEffect(() => {
-    setIsAlarmExisted(totalCount > 0);
-  }, [totalCount]);
-
-  const email = userData?.email;
-  const nickname = userData?.nickname;
-  const profileImageUrl = userData?.profileImageUrl || '';
-
+const Header = ({ children, path, logoName, menuList, onClick }: HeaderProps) => {
   return (
-    <>
-      <div className={cx('container')}>
-        <header className={cx('header')}>
-          <button className={cx('header-menu-button', 'sm-only')} onClick={handleToggleDrawerMenu}>
-            <Image src={url} alt={alt} width={24} height={24}></Image>
-          </button>
-          <Link className={cx('header-logo')} href={PAGE_PATHS.landing}>
-            GGF
-          </Link>
-          <div className={cx('header-container-outer')}>
-            <div className={cx('sm-hidden')}>
-              <Menu />
-            </div>
-            <div className={cx('header-container-inner')}>
-              {isLoggedIn && alarmData && userData ? (
-                <>
-                  <Alarm
-                    isActivated={isAlarmActivated}
-                    isAlarmExisted={isAlarmExisted}
-                    onClick={handleAlarmActivation}
-                    alarmRef={alarmRef}
-                  />
-                  <HeaderProfile
-                    nickname={nickname}
-                    profileImageUrl={profileImageUrl}
-                    isActivated={isHeaderProfileActivated}
-                    onClick={handleHeaderProfileActivation}
-                    headerProfileRef={headerProfileRef}
-                  />
-                </>
-              ) : (
-                <>
-                  <HeaderSigninButton />
-                  <HeaderSignupButton />
-                </>
-              )}
-            </div>
-          </div>
-        </header>
-        {isAlarmActivated && (
-          <div className={cx('header-alarm-list')}>
-            <AlarmList notifications={notifications} totalCount={totalCount} alarmListRef={alarmListRef} />
-          </div>
-        )}
-        {isHeaderProfileActivated && (
-          <div className={cx('header-user-menu')}>
-            <UserMenu
-              profileImageUrl={profileImageUrl || ''}
-              nickname={nickname}
-              email={email || ''}
-              userMenuRef={userMenuRef}
-              onClick={handleHeaderProfileActivation}
-            />
+    <div className={cx('container')}>
+      <header className={cx('header')}>
+        <button className={cx('header-menu-button', 'sm-only')} onClick={onClick}>
+          <img src={url} alt={alt} width={24} height={24}></img>
+        </button>
+        <a className={cx('header-logo')} href={path}>
+          {logoName}
+        </a>
+        <div className={cx('header-container-outer')}>
+          <div className={cx('sm-hidden')}>
+            <Menu menuList={menuList} />
           </div>
-        )}
-      </div>
-      <div className={cx('drawer-menu', { open: isVisible }, { close: isVisible === false })}>
-        <DrawerMenu onClick={handleToggleDrawerMenu} />
-      </div>
-    </>
+          <div className={cx('header-container-inner')}>{children}</div>
+        </div>
+      </header>
+    </div>
   );
 };
 
diff --git a/src/components/header/HeaderProfile/index.tsx b/src/components/header/HeaderProfile/index.tsx
index ceeec984..222b9c0d 100644
--- a/src/components/header/HeaderProfile/index.tsx
+++ b/src/components/header/HeaderProfile/index.tsx
@@ -1,12 +1,10 @@
-import Image from 'next/image';
-
-import { MouseEventHandler, RefObject } from 'react';
+import { RefObject } from 'react';
 
 import classNames from 'classnames/bind';
 
 import { SVGS } from '@/constants';
 
-import Avatar from '@/components/commons/Avatar';
+import Avatar from '@/components/Avatar';
 
 import styles from './HeaderProfile.module.scss';
 
@@ -18,24 +16,20 @@ type HeaderProfileProps = {
   nickname: string;
   profileImageUrl: string;
   isActivated: boolean;
-  onClick: MouseEventHandler<HTMLButtonElement>;
+  onClick: () => void;
   headerProfileRef: RefObject<HTMLButtonElement>;
 };
 
 const HeaderProfile = ({ nickname, profileImageUrl, isActivated, onClick, headerProfileRef }: HeaderProfileProps) => {
+  const { url, alt } = isActivated ? top : bottom;
+
   return (
     <div>
       <button className={cx('header-profile')} onClick={onClick} ref={headerProfileRef}>
         <Avatar size='small' isActivated={isActivated} profileImageUrl={profileImageUrl} />
         <div className={cx('header-profile-container-inner')}>
           <span className={cx('lg-only')}>{nickname}</span>
-          <Image
-            className={cx('sm-hidden')}
-            src={isActivated ? top.url : bottom.url}
-            alt={isActivated ? top.alt : bottom.alt}
-            width={16}
-            height={16}
-          />
+          <img className={cx('sm-hidden')} src={url} alt={alt} width={16} height={16} />
         </div>
       </button>
     </div>
diff --git a/src/components/header/Menu/index.tsx b/src/components/header/Menu/index.tsx
index 6c8357f4..3063b3de 100644
--- a/src/components/header/Menu/index.tsx
+++ b/src/components/header/Menu/index.tsx
@@ -1,44 +1,37 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { useState } from 'react';
 
 import classNames from 'classnames/bind';
 
-import { GAME_NAME_LIST_EN, GAME_PATH_NAME_TO_GAME_NAME_EN } from '@/constants';
-import { formatGameToLink } from '@/utils';
-
 import styles from './Menu.module.scss';
 
 const cx = classNames.bind(styles);
 
-const Menu = () => {
-  const router = useRouter();
-  const { game: gameName, postType } = router.query;
-  const hasCreateInPath = router.pathname.includes('create');
+type MenuProps = {
+  menuList: string[];
+};
+
+const Menu = ({ menuList }: MenuProps) => {
+  const [activatedGame, setActivatedGame] = useState(0);
 
-  const isGameActivated = (index: number) => {
-    return (
-      GAME_PATH_NAME_TO_GAME_NAME_EN[gameName as keyof typeof GAME_PATH_NAME_TO_GAME_NAME_EN] ===
-      GAME_NAME_LIST_EN[index]
-    );
+  const handleActivateGame = (number: number) => {
+    setActivatedGame(number);
   };
 
   return (
     <nav>
       <ul className={cx('menu')}>
-        {GAME_NAME_LIST_EN.map((game, index) => (
+        {menuList.map((game, index) => (
           <li key={`menu-${index}`}>
-            <Link
-              href={{
-                pathname: `/${formatGameToLink(game)}`,
-                query: { postType: hasCreateInPath ? 'all' : postType || 'all' },
-              }}
+            <a
+              href={`/${game}`}
               className={cx('menu-game', {
-                'menu-game-activated': isGameActivated(index),
+                'menu-game-activated': activatedGame === index,
               })}
+              onClick={() => handleActivateGame(index)}
             >
               {game}
-              {isGameActivated(index) && <p className={cx('menu-under-line')}></p>}
-            </Link>
+              {activatedGame === index && <p className={cx('menu-under-line')}></p>}
+            </a>
           </li>
         ))}
       </ul>
diff --git a/src/components/header/UserMenu/index.tsx b/src/components/header/UserMenu/index.tsx
index 56a1e4ae..4c5f9885 100644
--- a/src/components/header/UserMenu/index.tsx
+++ b/src/components/header/UserMenu/index.tsx
@@ -1,34 +1,40 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { MouseEventHandler, RefObject } from 'react';
+import { RefObject } from 'react';
 
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS, SVGS } from '@/constants';
+import { SVGS } from '@/constants';
 
-import Avatar from '@/components/commons/Avatar';
+import Avatar from '@/components/Avatar';
 import useSignout from '@/hooks/useSignout';
 
 import styles from './UserMenu.module.scss';
 
 const cx = classNames.bind(styles);
 const { url, alt } = SVGS.button.setting;
-const { account, mypage } = PAGE_PATHS;
 
 type UserMenuProps = {
   profileImageUrl: string;
   nickname: string;
   email: string;
+  accountPath: string;
+  mypagePath: string;
   userMenuRef: RefObject<HTMLDivElement>;
-  onClick: MouseEventHandler<HTMLElement>;
+  onClick: () => void;
 };
 
-const UserMenu = ({ profileImageUrl, nickname, email, userMenuRef, onClick }: UserMenuProps) => {
+const UserMenu = ({
+  profileImageUrl,
+  nickname,
+  email,
+  accountPath,
+  mypagePath,
+  userMenuRef,
+  onClick,
+}: UserMenuProps) => {
   const signout = useSignout();
 
-  const handleClickSignout = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    onClick(event);
+  const handleClickSignout = () => {
+    onClick();
     signout();
   };
 
@@ -39,17 +45,17 @@ const UserMenu = ({ profileImageUrl, nickname, email, userMenuRef, onClick }: Us
         <div className={cx('container-user-info')}>
           <div className={cx('container-nickname')}>
             <p className={cx('nickname')}>{nickname}</p>
-            <Link onClick={onClick} href={account}>
-              <Image src={url} alt={alt} width={18} height={18} />
-            </Link>
+            <a onClick={onClick} href={accountPath}>
+              <img src={url} alt={alt} width={18} height={18} />
+            </a>
           </div>
           <div className={cx('email')}>{email}</div>
         </div>
       </div>
       <div className={cx('container-button')}>
-        <Link className={cx('container-button-mypage')} onClick={onClick} href={mypage}>
+        <a className={cx('container-button-mypage')} onClick={onClick} href={mypagePath}>
           My Page
-        </Link>
+        </a>
         <button className={cx('container-button-logout')} onClick={handleClickSignout}>
           Logout
         </button>
diff --git a/src/components/header/buttons/HeaderSigninButton.tsx b/src/components/header/buttons/HeaderSigninButton.tsx
index f776e4e2..529e70d0 100644
--- a/src/components/header/buttons/HeaderSigninButton.tsx
+++ b/src/components/header/buttons/HeaderSigninButton.tsx
@@ -1,19 +1,19 @@
-import Link from 'next/link';
-
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS } from '@/constants';
-
 import styles from './HeaderSignButton.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const HeaderSigninButton = () => {
+type HeaderSigninButtonProps = {
+  path: string;
+};
+
+export const HeaderSigninButton = ({ path }: HeaderSigninButtonProps) => {
   return (
-    <Link href={PAGE_PATHS.signin}>
+    <a href={path}>
       <button className={cx('signin-btn')}>
         <span className={cx('text')}>SIGNIN</span>
       </button>
-    </Link>
+    </a>
   );
 };
diff --git a/src/components/header/buttons/HeaderSignupButton.tsx b/src/components/header/buttons/HeaderSignupButton.tsx
index 702214b9..24e8ae1d 100644
--- a/src/components/header/buttons/HeaderSignupButton.tsx
+++ b/src/components/header/buttons/HeaderSignupButton.tsx
@@ -1,19 +1,19 @@
-import Link from 'next/link';
-
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS } from '@/constants';
-
 import styles from './HeaderSignButton.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const HeaderSignupButton = () => {
+type HeaderSignupButtonProps = {
+  path: string;
+};
+
+export const HeaderSignupButton = ({ path }: HeaderSignupButtonProps) => {
   return (
-    <Link href={PAGE_PATHS.signup}>
+    <a href={path}>
       <button className={cx('signup-btn')}>
         <div className={cx('text')}>SIGNUP</div>
       </button>
-    </Link>
+    </a>
   );
 };