diff --git a/frontend/eslint-plugin-ddangkong/component-folder-match.js b/frontend/eslint-plugin-ddangkong/component-folder-match.js
index d7f5b780f..a053edc75 100644
--- a/frontend/eslint-plugin-ddangkong/component-folder-match.js
+++ b/frontend/eslint-plugin-ddangkong/component-folder-match.js
@@ -20,8 +20,8 @@ module.exports = {
         const dirName = path.basename(path.dirname(filePath)); // 현재 파일이 속한 폴더 이름
         const parentDir = path.dirname(path.dirname(filePath)); // 상위 디렉터리
 
-        // 부모 폴더가 "components"로 끝나는 폴더만 검사
-        if (parentDir.endsWith('components')) {
+        // 부모 폴더가 "components"로 끝나면서 대문자로 시작하는 폴더는 컴포넌트 폴더로 간주
+        if (parentDir.endsWith('components') && /^[A-Z]/.test(dirName)) {
           const expectedFileName = `${dirName}.tsx`;
           const expectedFilePath = path.join(parentDir, dirName, expectedFileName);
 
diff --git a/frontend/src/assets/images/angryDdangkong.png b/frontend/src/assets/images/angryDdangkong.png
deleted file mode 100644
index 728ce9761..000000000
Binary files a/frontend/src/assets/images/angryDdangkong.png and /dev/null differ
diff --git a/frontend/src/assets/images/ddangkong.png b/frontend/src/assets/images/ddangkong.png
deleted file mode 100644
index 67c3eb221..000000000
Binary files a/frontend/src/assets/images/ddangkong.png and /dev/null differ
diff --git a/frontend/src/assets/images/ddangkongTimer.png b/frontend/src/assets/images/ddangkongTimer.png
deleted file mode 100644
index 9f035227e..000000000
Binary files a/frontend/src/assets/images/ddangkongTimer.png and /dev/null differ
diff --git a/frontend/src/assets/images/errorDdangkong.png b/frontend/src/assets/images/errorDdangkong.png
deleted file mode 100644
index ea6e9643c..000000000
Binary files a/frontend/src/assets/images/errorDdangkong.png and /dev/null differ
diff --git a/frontend/src/assets/images/sadDdangkong.png b/frontend/src/assets/images/sadDdangkong.png
deleted file mode 100644
index 1f46845b6..000000000
Binary files a/frontend/src/assets/images/sadDdangkong.png and /dev/null differ
diff --git a/frontend/src/assets/images/spinDdangkong.png b/frontend/src/assets/images/spinDdangkong.png
deleted file mode 100644
index 602b98dcc..000000000
Binary files a/frontend/src/assets/images/spinDdangkong.png and /dev/null differ
diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts
new file mode 100644
index 000000000..c3dc43276
--- /dev/null
+++ b/frontend/src/assets/index.ts
@@ -0,0 +1,39 @@
+import AngryDdangkong from './images/angryDdangkong.webp';
+import ArrowDown from './images/arrowDown.svg';
+import ArrowLeft from './images/arrowLeft.svg';
+import ArrowUp from './images/arrowUp.svg';
+import CloseIcon from './images/closeIcon.png';
+import CopyIcon from './images/copyIcon.png';
+import CrownIcon from './images/crownIcon.webp';
+import Ddangkong from './images/ddangkong.webp';
+import DdangkongTimer from './images/ddangkongTimer.webp';
+import ErrorDdangkong from './images/errorDdangkong.webp';
+import ExitIcon from './images/exitIcon.svg';
+import HomeIcon from './images/homeIcon.svg';
+import SadDdangkong from './images/sadDdangkong.webp';
+import SettingIcon from './images/settingIcon.svg';
+import SillyDdangkong from './images/sillyDdangkong.webp';
+import SillyDdangkongMedium from './images/sillyDdangkongMedium.webp';
+import SillyDdangkongSmall from './images/sillyDdangkongSmall.webp';
+import SpinDdangkong from './images/spinDdangkong.webp';
+
+export {
+  AngryDdangkong,
+  ArrowDown,
+  ArrowLeft,
+  ArrowUp,
+  CloseIcon,
+  CopyIcon,
+  CrownIcon,
+  Ddangkong,
+  DdangkongTimer,
+  ErrorDdangkong,
+  ExitIcon,
+  HomeIcon,
+  SadDdangkong,
+  SettingIcon,
+  SillyDdangkong,
+  SillyDdangkongMedium,
+  SillyDdangkongSmall,
+  SpinDdangkong,
+};
diff --git a/frontend/src/components/InviteModal/InviteModal.tsx b/frontend/src/components/InviteModal/InviteModal.tsx
index 9c277dbfc..6418ba89e 100644
--- a/frontend/src/components/InviteModal/InviteModal.tsx
+++ b/frontend/src/components/InviteModal/InviteModal.tsx
@@ -15,10 +15,10 @@ import {
 } from './InviteModal.styled';
 import Modal from '../common/Modal/Modal';
 
-import CopyIcon from '@/assets/images/copyIcon.png';
 import { INVITE_URL } from '@/constants/url';
-import useGetUserInfo from '@/hooks/useGetUserInfo';
-import useToast from '@/hooks/useToast';
+
+import { CopyIcon } from '@/assets';
+import { useGetUserInfo, useToast } from '@/hooks';
 
 interface InviteModalProps {
   isOpen: boolean;
diff --git a/frontend/src/components/RoomSettingModal/RoomSettingModal.test.tsx b/frontend/src/components/RoomSettingModal/RoomSettingModal.test.tsx
index 56c085f48..b8dd04ff8 100644
--- a/frontend/src/components/RoomSettingModal/RoomSettingModal.test.tsx
+++ b/frontend/src/components/RoomSettingModal/RoomSettingModal.test.tsx
@@ -4,10 +4,11 @@ import userEvent from '@testing-library/user-event';
 import RoomSettingModal from './RoomSettingModal';
 
 import { POLLING_DELAY } from '@/constants/config';
-import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import ROOM_INFO from '@/mocks/data/roomInfo.json';
 import { customRender, wrapper } from '@/utils/test-utils';
 
+import { useGetRoomInfo } from '@/hooks';
+
 describe('RoomSettingModal 방 설정 모달 테스트', () => {
   it('방 설정 모달에서 적용 버튼을 클릭하면 모달이 닫힌다.', async () => {
     const user = userEvent.setup();
diff --git a/frontend/src/components/RoomSettingModal/hooks/useRoomSetting.ts b/frontend/src/components/RoomSettingModal/hooks/useRoomSetting.ts
index 91f19e9e3..893c3a010 100644
--- a/frontend/src/components/RoomSettingModal/hooks/useRoomSetting.ts
+++ b/frontend/src/components/RoomSettingModal/hooks/useRoomSetting.ts
@@ -5,7 +5,7 @@ import useCategoryDropdown from './useCategoryDropdown';
 import useTimerPerRound from './useTimerPerRound';
 import useTotalRound from './useTotalRound';
 
-import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
+import { useGetRoomInfo } from '@/hooks';
 
 interface UseRoomSettingProps {
   onClose: () => void;
diff --git a/frontend/src/components/TopicContainer/TopicContainer.tsx b/frontend/src/components/TopicContainer/TopicContainer.tsx
index a3bccc1a3..dd4c4cc02 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.tsx
+++ b/frontend/src/components/TopicContainer/TopicContainer.tsx
@@ -1,7 +1,7 @@
 import { useLocation, useParams } from 'react-router-dom';
 
 import { categoryText, topicContainerLayout, topicText } from './TopicContainer.styled';
-import A11yOnly from '../common/a11yOnly/A11yOnly';
+import A11yOnly from '../common/A11yOnly/A11yOnly';
 
 import { ROUTES } from '@/constants/routes';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
diff --git a/frontend/src/components/common/a11yOnly/A11yOnly.styled.ts b/frontend/src/components/common/A11yOnly/A11yOnly.styled.ts
similarity index 100%
rename from frontend/src/components/common/a11yOnly/A11yOnly.styled.ts
rename to frontend/src/components/common/A11yOnly/A11yOnly.styled.ts
diff --git a/frontend/src/components/common/a11yOnly/A11yOnly.test.tsx b/frontend/src/components/common/A11yOnly/A11yOnly.test.tsx
similarity index 100%
rename from frontend/src/components/common/a11yOnly/A11yOnly.test.tsx
rename to frontend/src/components/common/A11yOnly/A11yOnly.test.tsx
diff --git a/frontend/src/components/common/a11yOnly/A11yOnly.tsx b/frontend/src/components/common/A11yOnly/A11yOnly.tsx
similarity index 99%
rename from frontend/src/components/common/a11yOnly/A11yOnly.tsx
rename to frontend/src/components/common/A11yOnly/A11yOnly.tsx
index 4b5130c99..090f26ebc 100644
--- a/frontend/src/components/common/a11yOnly/A11yOnly.tsx
+++ b/frontend/src/components/common/A11yOnly/A11yOnly.tsx
@@ -13,6 +13,7 @@ const A11yOnly = <T extends ElementType = 'span'>({
   ...props
 }: PropsWithChildren<A11yOnlyProps<T>>) => {
   const Component = as || 'span';
+
   return (
     <Component css={a11yOnlyLayout} {...props}>
       {children}
diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx
index 2e48daace..71dad374a 100644
--- a/frontend/src/components/common/Modal/Modal.tsx
+++ b/frontend/src/components/common/Modal/Modal.tsx
@@ -25,7 +25,8 @@ import {
 } from './Modal.styled';
 
 import CloseIcon from '@/assets/images/closeIcon.png';
-import useFocus from '@/hooks/useFocus';
+
+import { useFocus } from '@/hooks';
 
 export interface ModalProps {
   isOpen: boolean;
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
new file mode 100644
index 000000000..0fadd7435
--- /dev/null
+++ b/frontend/src/components/common/index.ts
@@ -0,0 +1,33 @@
+import A11yOnly from './A11yOnly/A11yOnly';
+import Button from './Button/Button';
+import DeferredComponent from './DeferredComponent/DeferredComponent';
+import Dropdown from './Dropdown/Dropdown';
+import AsyncErrorBoundary from './ErrorBoundary/AsyncErrorBoundary';
+import RootErrorBoundary from './ErrorBoundary/RootErrorBoundary';
+import AsyncErrorFallback from './ErrorFallback/AsyncErrorFallback/AsyncErrorFallback';
+import RootErrorFallback from './ErrorFallback/RootErrorFallback/RootErrorFallback';
+import RouterErrorFallback from './ErrorFallback/RouterErrorFallback/RouterErrorFallback';
+import SpinnerErrorFallback from './ErrorFallback/SpinnerErrorFallback/SpinnerErrorFallback';
+import Modal from './Modal/Modal';
+import GameSkeleton from './Skeleton/GameSkeleton/GameSkeleton';
+import ReadySkeleton from './Skeleton/ReadySkeleton/ReadySkeleton';
+import Spinner from './Spinner/Spinner';
+import Toast from './Toast/Toast';
+
+export {
+  A11yOnly,
+  Button,
+  DeferredComponent,
+  Dropdown,
+  AsyncErrorBoundary,
+  RootErrorBoundary,
+  RouterErrorFallback,
+  AsyncErrorFallback,
+  RootErrorFallback,
+  SpinnerErrorFallback,
+  Modal,
+  GameSkeleton,
+  ReadySkeleton,
+  Spinner,
+  Toast,
+};
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
new file mode 100644
index 000000000..0c03320c6
--- /dev/null
+++ b/frontend/src/components/index.ts
@@ -0,0 +1,6 @@
+import AlertModal from './AlertModal/AlertModal';
+import InviteModal from './InviteModal/InviteModal';
+import RoomSettingModal from './RoomSettingModal/RoomSettingModal';
+import TopicContainer from './TopicContainer/TopicContainer';
+
+export { AlertModal, InviteModal, RoomSettingModal, TopicContainer };
diff --git a/frontend/src/components/layout/Header/GameHeader/GameHeader.tsx b/frontend/src/components/layout/Header/GameHeader/GameHeader.tsx
new file mode 100644
index 000000000..2084b0a35
--- /dev/null
+++ b/frontend/src/components/layout/Header/GameHeader/GameHeader.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { useParams } from 'react-router-dom';
+
+import { gameTitle, headerLayout, roundText } from '../Header.styled';
+
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
+import { convertMsecToSecond } from '@/pages/GamePage/components/SelectContainer/Timer/Timer.util';
+
+import { useBalanceContentQuery, useFocus } from '@/hooks';
+
+// 게임 화면
+const GameHeader = () => {
+  const { roomId } = useParams();
+  const { balanceContent } = useBalanceContentQuery(Number(roomId));
+
+  const { totalRound, currentRound, timeLimit } = balanceContent;
+  const screenReaderHeader = `${totalRound}라운드.중.${currentRound}라운드. 밸런스 게임 페이지. 제한 시간 ${convertMsecToSecond(timeLimit)}초.`;
+  const focusRef = useFocus<HTMLElement>();
+
+  return (
+    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
+      <A11yOnly>{screenReaderHeader}</A11yOnly>
+      <span css={roundText} aria-hidden>
+        {currentRound}/{totalRound}
+      </span>
+      <h1 css={gameTitle} aria-hidden>
+        밸런스 게임
+      </h1>
+      <span css={roundText} aria-hidden></span>
+    </header>
+  );
+};
+
+export default GameHeader;
diff --git a/frontend/src/components/layout/Header/Header.stories.tsx b/frontend/src/components/layout/Header/Header.stories.tsx
index 61f95a70f..1bfc45b93 100644
--- a/frontend/src/components/layout/Header/Header.stories.tsx
+++ b/frontend/src/components/layout/Header/Header.stories.tsx
@@ -1,6 +1,8 @@
 import type { StoryObj, Meta } from '@storybook/react';
 
-import Header, { BackHeader, RoomSettingHeader, RoundResultHeader, TitleHeader } from './Header';
+import Header from './Header';
+
+import { RoomSettingHeader, RoundResultHeader, TitleHeader } from '.';
 
 const meta = {
   title: 'Header',
@@ -22,7 +24,3 @@ export const 방_설정_헤더: Story = {
 export const 라운드_헤더: Story = {
   render: () => <RoundResultHeader />,
 };
-
-export const 투표_현황_헤더: Story = {
-  render: () => <BackHeader title="투표 현황" />,
-};
diff --git a/frontend/src/components/layout/Header/Header.test.tsx b/frontend/src/components/layout/Header/Header.test.tsx
index c9d02d815..f6a18702b 100644
--- a/frontend/src/components/layout/Header/Header.test.tsx
+++ b/frontend/src/components/layout/Header/Header.test.tsx
@@ -1,11 +1,12 @@
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
-import { RoomSettingHeader } from './Header';
+import { RoomSettingHeader } from '.';
 
-import useIsMaster from '@/hooks/useIsMaster';
 import { customRender } from '@/utils/test-utils';
 
+import { useIsMaster } from '@/hooks';
+
 jest.mock('@/hooks/useIsMaster');
 
 describe('Header 테스트', () => {
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 57f7d0bbb..36e0136eb 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -1,36 +1,6 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import { useRef } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useBlockRefresh, useRoutePath } from './hooks';
 
-import {
-  buttonWrapper,
-  gameTitle,
-  headerLayout,
-  roundText,
-  iconImage,
-  matchingResultTitle,
-  matchingResultCaption,
-  MatchingResultHeaderContainer,
-} from './Header.styled';
-import { useBlockRefresh } from './hooks/useBlockRefresh';
-import { useExit } from './hooks/useExit';
-import useRoutePath from './hooks/useRoutePath';
-
-import ArrowLeft from '@/assets/images/arrowLeft.svg';
-import ExitIcon from '@/assets/images/exitIcon.svg';
-import SettingIcon from '@/assets/images/settingIcon.svg';
-import AlertModal from '@/components/AlertModal/AlertModal';
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import RoomSettingModal from '@/components/RoomSettingModal/RoomSettingModal';
-import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
-import useFocus from '@/hooks/useFocus';
-import useIsMaster from '@/hooks/useIsMaster';
-import useModal from '@/hooks/useModal';
-import { convertMsecToSecond } from '@/pages/GamePage/components/SelectContainer/Timer/Timer.util';
-
-interface HeaderProps {
-  title: string;
-}
+import { TitleHeader, RoomSettingHeader, RoundResultHeader, MatchingResultHeader } from '.';
 
 const Header = () => {
   const { isNicknamePage, isReadyPage, isRoundResultPage, isMatchingResultPage } = useRoutePath();
@@ -43,121 +13,4 @@ const Header = () => {
   if (isMatchingResultPage) return <MatchingResultHeader title="매칭 결과" />;
 };
 
-// 1. 가운데 제목과 설명이 있는 헤더 : 최종 게임 결과 화면
-export const MatchingResultHeader = ({ title }: HeaderProps) => {
-  const focusRef = useFocus<HTMLElement>();
-  return (
-    <header css={headerLayout(true)} tabIndex={0} ref={focusRef}>
-      <div css={MatchingResultHeaderContainer}>
-        <h1 css={matchingResultTitle}>{title}</h1>
-        <h2 css={matchingResultCaption}>매칭도를 통해 당신과 가장 잘 맞는 사람을 알아보세요😊</h2>
-      </div>
-    </header>
-  );
-};
-
-// 2. 가운데 제목만 차지하는 헤더 : 닉네임 설정 화면
-export const TitleHeader = ({ title }: HeaderProps) => (
-  <header css={headerLayout(true)}>
-    <h1 css={gameTitle}>{title}</h1>
-  </header>
-);
-
-// 3. 가운데 제목, 우측 상단 차지하는 헤더 : 게임 대기 화면
-export const RoomSettingHeader = ({ title }: HeaderProps) => {
-  const isMaster = useIsMaster();
-  const { showModal } = useModal();
-
-  const { handleExit } = useExit();
-  const returnFocusRef = useRef(null);
-  const focusRef = useFocus<HTMLElement>();
-
-  const handleClickRoomSetting = () => {
-    showModal(RoomSettingModal, { returnFocusRef });
-  };
-
-  const handleClickExit = () => {
-    showModal(AlertModal, { message: '정말로 나가시겠습니까?', onConfirm: handleExit });
-  };
-
-  return (
-    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
-      <button onClick={handleClickExit} css={buttonWrapper}>
-        <img src={ExitIcon} alt="방 나가기" css={iconImage} />
-      </button>
-      <h1 css={gameTitle}>{title}</h1>
-      {isMaster ? (
-        <button ref={returnFocusRef} onClick={handleClickRoomSetting} css={buttonWrapper}>
-          <img src={SettingIcon} alt="방 설정" css={iconImage} />
-        </button>
-      ) : (
-        <span css={roundText}></span>
-      )}
-    </header>
-  );
-};
-
-// 4. 좌측 상단 라운드, 가운데 제목 차지하는 헤더 (API 호출 O) : 라운드 통계 화면
-export const RoundResultHeader = () => {
-  const { roomId } = useParams();
-  const { balanceContent } = useBalanceContentQuery(Number(roomId));
-  const screenReaderRoundResult = `${balanceContent.totalRound}라운드 중. ${balanceContent.currentRound}라운드. 투표 결과 페이지`;
-  const focusRef = useFocus<HTMLElement>();
-
-  return (
-    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
-      <A11yOnly>{screenReaderRoundResult}</A11yOnly>
-      <span css={roundText} aria-hidden>
-        {balanceContent.currentRound}/{balanceContent.totalRound}
-      </span>
-      <h1 css={gameTitle} aria-hidden>
-        투표 결과
-      </h1>
-      <span css={roundText} aria-hidden></span>
-    </header>
-  );
-};
-
-// 게임 화면
-export const GameHeader = () => {
-  const { roomId } = useParams();
-  const { balanceContent } = useBalanceContentQuery(Number(roomId));
-
-  const { totalRound, currentRound, timeLimit } = balanceContent;
-  const screenReaderHeader = `${totalRound}라운드.중.${currentRound}라운드. 밸런스 게임 페이지. 제한 시간 ${convertMsecToSecond(timeLimit)}초.`;
-  const focusRef = useFocus<HTMLElement>();
-
-  return (
-    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
-      <A11yOnly>{screenReaderHeader}</A11yOnly>
-      <span css={roundText} aria-hidden>
-        {currentRound}/{totalRound}
-      </span>
-      <h1 css={gameTitle} aria-hidden>
-        밸런스 게임
-      </h1>
-      <span css={roundText} aria-hidden></span>
-    </header>
-  );
-};
-
-// 5. 좌측 상단 뒤로가기, 가운데 제목 차지하는 헤더 (API 호출 X) : 라운드 투표 현황
-export const BackHeader = ({ title }: HeaderProps) => {
-  const navigate = useNavigate();
-  const focusRef = useFocus<HTMLElement>();
-  const goToBack = () => {
-    navigate(-1);
-  };
-
-  return (
-    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
-      <button onClick={goToBack} css={buttonWrapper}>
-        <img src={ArrowLeft} alt="뒤로 가기" />
-      </button>
-      <h1 css={gameTitle}>{title}</h1>
-      <span css={roundText}></span>
-    </header>
-  );
-};
-
 export default Header;
diff --git a/frontend/src/components/layout/Header/MatchingResultHeader/MatchingResultHeader.tsx b/frontend/src/components/layout/Header/MatchingResultHeader/MatchingResultHeader.tsx
new file mode 100644
index 000000000..e9de0aa43
--- /dev/null
+++ b/frontend/src/components/layout/Header/MatchingResultHeader/MatchingResultHeader.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import {
+  headerLayout,
+  matchingResultCaption,
+  MatchingResultHeaderContainer,
+  matchingResultTitle,
+} from '../Header.styled';
+
+import { useFocus } from '@/hooks';
+
+interface MatchingResultHeaderProps {
+  title: string;
+}
+
+const MatchingResultHeader = ({ title }: MatchingResultHeaderProps) => {
+  const focusRef = useFocus<HTMLElement>();
+  return (
+    <header css={headerLayout(true)} tabIndex={0} ref={focusRef}>
+      <div css={MatchingResultHeaderContainer}>
+        <h1 css={matchingResultTitle}>{title}</h1>
+        <h2 css={matchingResultCaption}>매칭도를 통해 당신과 가장 잘 맞는 사람을 알아보세요😊</h2>
+      </div>
+    </header>
+  );
+};
+
+export default MatchingResultHeader;
diff --git a/frontend/src/components/layout/Header/RoomSettingHeader/RoomSettingHeader.tsx b/frontend/src/components/layout/Header/RoomSettingHeader/RoomSettingHeader.tsx
new file mode 100644
index 000000000..1e269b5b9
--- /dev/null
+++ b/frontend/src/components/layout/Header/RoomSettingHeader/RoomSettingHeader.tsx
@@ -0,0 +1,49 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { useRef } from 'react';
+
+import { buttonWrapper, gameTitle, headerLayout, iconImage, roundText } from '../Header.styled';
+import { useExit } from '../hooks';
+
+import { ExitIcon, SettingIcon } from '@/assets';
+import { AlertModal, RoomSettingModal } from '@/components';
+import { useFocus, useIsMaster, useModal } from '@/hooks';
+
+interface RoomSettingHeaderProps {
+  title: string;
+}
+
+// 가운데 제목, 우측 상단 차지하는 헤더 : 게임 대기 화면
+const RoomSettingHeader = ({ title }: RoomSettingHeaderProps) => {
+  const isMaster = useIsMaster();
+  const { showModal } = useModal();
+
+  const { handleExit } = useExit();
+  const returnFocusRef = useRef(null);
+  const focusRef = useFocus<HTMLElement>();
+
+  const handleClickRoomSetting = () => {
+    showModal(RoomSettingModal, { returnFocusRef });
+  };
+
+  const handleClickExit = () => {
+    showModal(AlertModal, { message: '정말로 나가시겠습니까?', onConfirm: handleExit });
+  };
+
+  return (
+    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
+      <button onClick={handleClickExit} css={buttonWrapper}>
+        <img src={ExitIcon} alt="방 나가기" css={iconImage} />
+      </button>
+      <h1 css={gameTitle}>{title}</h1>
+      {isMaster ? (
+        <button ref={returnFocusRef} onClick={handleClickRoomSetting} css={buttonWrapper}>
+          <img src={SettingIcon} alt="방 설정" css={iconImage} />
+        </button>
+      ) : (
+        <span css={roundText}></span>
+      )}
+    </header>
+  );
+};
+
+export default RoomSettingHeader;
diff --git a/frontend/src/components/layout/Header/RoundResultHeader/RoundResultHeader.tsx b/frontend/src/components/layout/Header/RoundResultHeader/RoundResultHeader.tsx
new file mode 100644
index 000000000..e16077b89
--- /dev/null
+++ b/frontend/src/components/layout/Header/RoundResultHeader/RoundResultHeader.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { useParams } from 'react-router-dom';
+
+import { gameTitle, headerLayout, roundText } from '../Header.styled';
+
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
+
+import { useBalanceContentQuery, useFocus } from '@/hooks';
+
+// 좌측 상단 라운드, 가운데 제목 차지하는 헤더 (API 호출 O) : 라운드 통계 화면
+const RoundResultHeader = () => {
+  const { roomId } = useParams();
+  const { balanceContent } = useBalanceContentQuery(Number(roomId));
+  const screenReaderRoundResult = `${balanceContent.totalRound}라운드 중. ${balanceContent.currentRound}라운드. 투표 결과 페이지`;
+  const focusRef = useFocus<HTMLElement>();
+
+  return (
+    <header css={headerLayout()} tabIndex={0} ref={focusRef}>
+      <A11yOnly>{screenReaderRoundResult}</A11yOnly>
+      <span css={roundText} aria-hidden>
+        {balanceContent.currentRound}/{balanceContent.totalRound}
+      </span>
+      <h1 css={gameTitle} aria-hidden>
+        투표 결과
+      </h1>
+      <span css={roundText} aria-hidden></span>
+    </header>
+  );
+};
+
+export default RoundResultHeader;
diff --git a/frontend/src/components/layout/Header/TitleHeader/TitleHeader.tsx b/frontend/src/components/layout/Header/TitleHeader/TitleHeader.tsx
new file mode 100644
index 000000000..5f4412f0b
--- /dev/null
+++ b/frontend/src/components/layout/Header/TitleHeader/TitleHeader.tsx
@@ -0,0 +1,14 @@
+import { gameTitle, headerLayout } from '../Header.styled';
+
+interface TitleHeaderProps {
+  title: string;
+}
+
+// 가운데 제목만 차지하는 헤더 : 닉네임 설정 화면
+const TitleHeader = ({ title }: TitleHeaderProps) => (
+  <header css={headerLayout(true)}>
+    <h1 css={gameTitle}>{title}</h1>
+  </header>
+);
+
+export default TitleHeader;
diff --git a/frontend/src/components/layout/Header/hooks/index.ts b/frontend/src/components/layout/Header/hooks/index.ts
new file mode 100644
index 000000000..126c8411d
--- /dev/null
+++ b/frontend/src/components/layout/Header/hooks/index.ts
@@ -0,0 +1,5 @@
+import useBlockRefresh from './useBlockRefresh';
+import useExit from './useExit';
+import useRoutePath from './useRoutePath';
+
+export { useBlockRefresh, useExit, useRoutePath };
diff --git a/frontend/src/components/layout/Header/hooks/useBlockRefresh.ts b/frontend/src/components/layout/Header/hooks/useBlockRefresh.ts
index 62dfa5aae..d109e0701 100644
--- a/frontend/src/components/layout/Header/hooks/useBlockRefresh.ts
+++ b/frontend/src/components/layout/Header/hooks/useBlockRefresh.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-export const useBlockRefresh = () => {
+const useBlockRefresh = () => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'F5' || (event.ctrlKey && event.key === 'r')) {
@@ -24,3 +24,5 @@ export const useBlockRefresh = () => {
     };
   }, []);
 };
+
+export default useBlockRefresh;
diff --git a/frontend/src/components/layout/Header/hooks/useExit.ts b/frontend/src/components/layout/Header/hooks/useExit.ts
index c617c6198..c8a1335b6 100644
--- a/frontend/src/components/layout/Header/hooks/useExit.ts
+++ b/frontend/src/components/layout/Header/hooks/useExit.ts
@@ -2,10 +2,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { exitRoom } from '@/apis/room';
-import useGetUserInfo from '@/hooks/useGetUserInfo';
 import { deleteAllCookies } from '@/utils/cookie';
 
-export const useExit = () => {
+import { useGetUserInfo } from '@/hooks';
+
+const useExit = () => {
   const {
     member: { memberId },
   } = useGetUserInfo();
@@ -26,3 +27,5 @@ export const useExit = () => {
 
   return { handleExit };
 };
+
+export default useExit;
diff --git a/frontend/src/components/layout/Header/index.ts b/frontend/src/components/layout/Header/index.ts
new file mode 100644
index 000000000..4c0e8a08b
--- /dev/null
+++ b/frontend/src/components/layout/Header/index.ts
@@ -0,0 +1,7 @@
+import GameHeader from './GameHeader/GameHeader';
+import MatchingResultHeader from './MatchingResultHeader/MatchingResultHeader';
+import RoomSettingHeader from './RoomSettingHeader/RoomSettingHeader';
+import RoundResultHeader from './RoundResultHeader/RoundResultHeader';
+import TitleHeader from './TitleHeader/TitleHeader';
+
+export { TitleHeader, RoomSettingHeader, RoundResultHeader, GameHeader, MatchingResultHeader };
diff --git a/frontend/src/components/layout/index.ts b/frontend/src/components/layout/index.ts
new file mode 100644
index 000000000..6ec4f592c
--- /dev/null
+++ b/frontend/src/components/layout/index.ts
@@ -0,0 +1,4 @@
+import Content from './Content/Content';
+import Header from './Header/Header';
+
+export { Content, Header };
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
new file mode 100644
index 000000000..83561edaa
--- /dev/null
+++ b/frontend/src/hooks/index.ts
@@ -0,0 +1,31 @@
+import useBalanceContentQuery from './useBalanceContentQuery';
+import useButtonHeightOnKeyboard from './useButtonHeightOnKeyboard';
+import useCountAnimation from './useCountAnimation';
+import useDefaultMutationErrorHandler from './useDefaultMutationErrorHandler';
+import useFocus from './useFocus';
+import useGetRoomInfo from './useGetRoomInfo';
+import useGetUserInfo from './useGetUserInfo';
+import useIsMaster from './useIsMaster';
+import useModal from './useModal';
+import useMyGameStatus from './useMyGameStatus';
+import useMyGameStatusQuery from './useMyGameStatusQuery';
+import useRoundVoteResultQuery from './useRoundVoteResultQuery';
+import useThrottle from './useThrottle';
+import useToast from './useToast';
+
+export {
+  useBalanceContentQuery,
+  useButtonHeightOnKeyboard,
+  useCountAnimation,
+  useDefaultMutationErrorHandler,
+  useFocus,
+  useGetRoomInfo,
+  useGetUserInfo,
+  useIsMaster,
+  useModal,
+  useMyGameStatus,
+  useMyGameStatusQuery,
+  useRoundVoteResultQuery,
+  useThrottle,
+  useToast,
+};
diff --git a/frontend/src/hooks/useDefaultMutationErrorHandler.ts b/frontend/src/hooks/useDefaultMutationErrorHandler.ts
index 6933844f3..385a0f5c4 100644
--- a/frontend/src/hooks/useDefaultMutationErrorHandler.ts
+++ b/frontend/src/hooks/useDefaultMutationErrorHandler.ts
@@ -1,8 +1,8 @@
 import AlertModal from '@/components/AlertModal/AlertModal';
-import useModal from '@/hooks/useModal';
-import useToast from '@/hooks/useToast';
 import { CustomError, NetworkError } from '@/utils/error';
 
+import { useModal, useToast } from '@/hooks';
+
 const useDefaultMutationErrorHandler = () => {
   const { showToast } = useToast();
   const { showModal } = useModal();
diff --git a/frontend/src/hooks/useGetRoomInfo.ts b/frontend/src/hooks/useGetRoomInfo.ts
index 6ad646cea..284969940 100644
--- a/frontend/src/hooks/useGetRoomInfo.ts
+++ b/frontend/src/hooks/useGetRoomInfo.ts
@@ -5,7 +5,7 @@ import { getRoomInfo } from '@/apis/room';
 import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
-export const useGetRoomInfo = () => {
+const useGetRoomInfo = () => {
   const { roomId } = useParams();
 
   const { data } = useSuspenseQuery({
@@ -28,3 +28,5 @@ export const useGetRoomInfo = () => {
     isGameStart: data?.isGameStart,
   };
 };
+
+export default useGetRoomInfo;
diff --git a/frontend/src/pages/GamePage/GamePage.tsx b/frontend/src/pages/GamePage/GamePage.tsx
index c7eb4565f..4e93f241f 100644
--- a/frontend/src/pages/GamePage/GamePage.tsx
+++ b/frontend/src/pages/GamePage/GamePage.tsx
@@ -1,8 +1,9 @@
 import SelectContainer from './components/SelectContainer/SelectContainer';
 
-import Content from '@/components/layout/Content/Content';
-import { GameHeader } from '@/components/layout/Header/Header';
-import TopicContainer from '@/components/TopicContainer/TopicContainer';
+import { Content } from '@/components/layout';
+import { GameHeader } from '@/components/layout/Header';
+
+import { TopicContainer } from '@/components';
 
 const GamePage = () => {
   return (
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectContainer/SelectButton/SelectButton.hook.ts
similarity index 86%
rename from frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
rename to frontend/src/pages/GamePage/components/SelectContainer/SelectButton/SelectButton.hook.ts
index f6b34b5d0..28a9dbdab 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectButton/SelectButton.hook.ts
@@ -2,9 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 import { voteBalanceContent } from '@/apis/balanceContent';
-import useDefaultMutationErrorHandler from '@/hooks/useDefaultMutationErrorHandler';
-import useGetUserInfo from '@/hooks/useGetUserInfo';
-import useThrottle from '@/hooks/useThrottle';
+
+import { useDefaultMutationErrorHandler, useGetUserInfo, useThrottle } from '@/hooks';
 
 interface UseSelectCompleteMutationProps {
   selectedId: number;
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectButton/SelectButton.tsx
similarity index 100%
rename from frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
rename to frontend/src/pages/GamePage/components/SelectContainer/SelectButton/SelectButton.tsx
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
index e0eb65f15..cfe44c91f 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
@@ -1,11 +1,9 @@
 import { useParams } from 'react-router-dom';
 
-import GameVoteStatusContainer from './GameVoteStatusContainer/GameVoteStatusContainer';
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
-import SelectOption from './SelectOption/SelectOption';
-import Timer from './Timer/Timer';
-import SelectButton from '../SelectButton/SelectButton';
+
+import { GameVoteStatusContainer, SelectButton, SelectOption, Timer } from '.';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx b/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
index c39ae0071..aafac8783 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
@@ -13,7 +13,7 @@ import { formatLeftRoundTime, isAlertTimer } from './Timer.util';
 import useVoteIsFinished from '../hooks/useVoteIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.webp';
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 import { SelectedOption } from '@/types/balanceContent';
 
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
index 07c36cded..f588f453e 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
+++ b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
@@ -1,5 +1,5 @@
 import useTimer from './useTimer';
-import useCompleteSelectionMutation from '../../../SelectButton/SelectButton.hook';
+import useCompleteSelectionMutation from '../../SelectButton/SelectButton.hook';
 import { convertMsecToSecond } from '../Timer.util';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/index.ts b/frontend/src/pages/GamePage/components/SelectContainer/index.ts
new file mode 100644
index 000000000..bb11d1d3b
--- /dev/null
+++ b/frontend/src/pages/GamePage/components/SelectContainer/index.ts
@@ -0,0 +1,6 @@
+import GameVoteStatusContainer from './GameVoteStatusContainer/GameVoteStatusContainer';
+import SelectButton from './SelectButton/SelectButton';
+import SelectOption from './SelectOption/SelectOption';
+import Timer from './Timer/Timer';
+
+export { GameVoteStatusContainer, SelectButton, SelectOption, Timer };
diff --git a/frontend/src/pages/GameResultPage/GameResultPage.tsx b/frontend/src/pages/GameResultPage/GameResultPage.tsx
index bc64caa28..441212786 100644
--- a/frontend/src/pages/GameResultPage/GameResultPage.tsx
+++ b/frontend/src/pages/GameResultPage/GameResultPage.tsx
@@ -1,5 +1,5 @@
 import GameResult from './components/GameResult/GameResult';
-import { useIsRoomInitial } from './hooks/useCheckRoomReset';
+import useIsRoomInitial from './hooks/useCheckRoomReset';
 
 import Content from '@/components/layout/Content/Content';
 
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/GameResult.tsx b/frontend/src/pages/GameResultPage/components/GameResult/GameResult.tsx
index ba8729391..6368d527a 100644
--- a/frontend/src/pages/GameResultPage/components/GameResult/GameResult.tsx
+++ b/frontend/src/pages/GameResultPage/components/GameResult/GameResult.tsx
@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import FinalButton from './FinalButton/FinalButton';
+import { FinalButton, GameResultItem } from './components';
 import {
   gameResultLayout,
   rankListContainer,
@@ -9,16 +9,12 @@ import {
   noMatchingText,
   floatingButton,
 } from './GameResult.styled';
-import GameResultItem from './GameResultItem/GameResultItem';
-import useMatchingResultQuery from './hooks/useMatchingResultQuery';
-import useScrollControl from './hooks/useScrollControl';
-import useScrollState from './hooks/useScrollState';
+import { useMatchingResultQuery, useScrollControl, useScrollState } from './hooks';
 
-import ArrowDown from '@/assets/images/arrowDown.svg';
-import ArrowUp from '@/assets/images/arrowUp.svg';
-import SadDdangKong from '@/assets/images/sadDdangkong.webp';
 import Spinner from '@/components/common/Spinner/Spinner';
 
+import { ArrowDown, ArrowUp, SadDdangkong } from '@/assets';
+
 const GameResult = () => {
   const { matchedMembers, existMatching, isLoading } = useMatchingResultQuery();
   const { resultContainerRef, isAtTop, isAtBottom } = useScrollState();
@@ -75,7 +71,7 @@ const GameResult = () => {
         )}
         {!isLoading && !existMatching && (
           <div css={noMatchingLayout}>
-            <img src={SadDdangKong} alt="서운한 땅콩" css={noMatchingImg} />
+            <img src={SadDdangkong} alt="서운한 땅콩" css={noMatchingImg} />
             <span css={noMatchingText}>
               {'이번에는 나와 같은 선택을 한 사람이 없지만,\n다음 게임을 기대해 볼까요?'}
             </span>
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.test.tsx b/frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.test.tsx
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.test.tsx
rename to frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.test.tsx
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx b/frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.tsx
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx
rename to frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.tsx
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts b/frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.utils.ts
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts
rename to frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/FinalButton.utils.ts
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/hooks/useResetRoomMutation.ts b/frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/hooks/useResetRoomMutation.ts
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/FinalButton/hooks/useResetRoomMutation.ts
rename to frontend/src/pages/GameResultPage/components/GameResult/components/FinalButton/hooks/useResetRoomMutation.ts
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/GameResultItem/GameResultItem.styled.ts b/frontend/src/pages/GameResultPage/components/GameResult/components/GameResultItem/GameResultItem.styled.ts
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/GameResultItem/GameResultItem.styled.ts
rename to frontend/src/pages/GameResultPage/components/GameResult/components/GameResultItem/GameResultItem.styled.ts
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/GameResultItem/GameResultItem.tsx b/frontend/src/pages/GameResultPage/components/GameResult/components/GameResultItem/GameResultItem.tsx
similarity index 100%
rename from frontend/src/pages/GameResultPage/components/GameResult/GameResultItem/GameResultItem.tsx
rename to frontend/src/pages/GameResultPage/components/GameResult/components/GameResultItem/GameResultItem.tsx
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/components/index.ts b/frontend/src/pages/GameResultPage/components/GameResult/components/index.ts
new file mode 100644
index 000000000..3fda6250e
--- /dev/null
+++ b/frontend/src/pages/GameResultPage/components/GameResult/components/index.ts
@@ -0,0 +1,4 @@
+import FinalButton from './FinalButton/FinalButton';
+import GameResultItem from './GameResultItem/GameResultItem';
+
+export { FinalButton, GameResultItem };
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/hooks/index.ts b/frontend/src/pages/GameResultPage/components/GameResult/hooks/index.ts
new file mode 100644
index 000000000..685f975a1
--- /dev/null
+++ b/frontend/src/pages/GameResultPage/components/GameResult/hooks/index.ts
@@ -0,0 +1,5 @@
+import useMatchingResultQuery from './useMatchingResultQuery';
+import useScrollControl from './useScrollControl';
+import useScrollState from './useScrollState';
+
+export { useMatchingResultQuery, useScrollState, useScrollControl };
diff --git a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
index e8d9b34f4..206d5c233 100644
--- a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
+++ b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
@@ -7,7 +7,7 @@ import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
 
-export const useIsRoomInitial = () => {
+const useIsRoomInitial = () => {
   const { roomId } = useParams();
   const navigate = useNavigate();
   const { data } = useQuery({
@@ -29,3 +29,5 @@ export const useIsRoomInitial = () => {
     }
   }, [data?.isInitial, roomId, navigate]);
 };
+
+export default useIsRoomInitial;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 1280e145a..426c118f0 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -2,15 +2,15 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
-import useAccessRoom from './hooks/useAccessRoom';
-import useIsJoinableRoomQuery from './hooks/useIsJoinableRoomQuery';
+import { useAccessRoom, useIsJoinableRoomQuery } from './hooks';
 import { profileWrapper, profileImg, nicknameContainer } from './NicknamePage.styled';
 
-import SillyDdangkong from '@/assets/images/sillyDdangkong.webp';
 import Button from '@/components/common/Button/Button';
 import Content from '@/components/layout/Content/Content';
 import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
+import { SillyDdangkong } from '@/assets';
+
 const NicknamePage = () => {
   const { roomUuid } = useParams();
   const { nicknameInputRef, handleCreateRoom, handleEnterRoom, isLoading, isSuccess } =
diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
index 0e664daa7..d76ae48a2 100644
--- a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
+++ b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
@@ -4,7 +4,7 @@ import useNicknameInput from './hooks/useNicknameInput';
 import { nicknameInput, nicknameInputContainer, nicknameLengthText } from './NicknameInput.styled';
 import createRandomNickname from './NicknameInput.utils';
 
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
 import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface NicknameInputProps {
diff --git a/frontend/src/pages/NicknamePage/hooks/index.ts b/frontend/src/pages/NicknamePage/hooks/index.ts
new file mode 100644
index 000000000..6115741b1
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/hooks/index.ts
@@ -0,0 +1,4 @@
+import useAccessRoom from './useAccessRoom';
+import useIsJoinableRoomQuery from './useIsJoinableRoomQuery';
+
+export { useAccessRoom, useIsJoinableRoomQuery };
diff --git a/frontend/src/pages/ReadyPage/ReadyPage.tsx b/frontend/src/pages/ReadyPage/ReadyPage.tsx
index 3fc08abee..947582013 100644
--- a/frontend/src/pages/ReadyPage/ReadyPage.tsx
+++ b/frontend/src/pages/ReadyPage/ReadyPage.tsx
@@ -1,6 +1,4 @@
-import ReadyMembersContainer from './components/ReadyMembersContainer/ReadyMembersContainer';
-import RoomSetting from './components/RoomSetting/RoomSetting';
-import StartButtonContainer from './components/StartButtonContainer/StartButtonContainer';
+import { RoomSetting, ReadyMembersContainer, StartButtonContainer } from './components';
 
 import Content from '@/components/layout/Content/Content';
 
diff --git a/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx b/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
index 77d4519ab..86b4f5c90 100644
--- a/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
+++ b/frontend/src/pages/ReadyPage/components/ReadyMembersContainer/ReadyMembersContainer.tsx
@@ -13,13 +13,12 @@ import {
   profileImage,
 } from './ReadyMembersContainer.styled';
 
-import crownIcon from '@/assets/images/crownIcon.webp';
-import SillyDdangkongMedium from '@/assets/images/sillyDdangkongMedium.webp';
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import InviteModal from '@/components/InviteModal/InviteModal';
+import { A11yOnly } from '@/components/common';
 import { QUERY_KEYS } from '@/constants/queryKeys';
-import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
-import useModal from '@/hooks/useModal';
+
+import { CrownIcon, SillyDdangkongMedium } from '@/assets';
+import { InviteModal } from '@/components';
+import { useGetRoomInfo, useModal } from '@/hooks';
 
 const ReadyMembersContainer = () => {
   const { members, master } = useGetRoomInfo();
@@ -54,7 +53,7 @@ const ReadyMembersContainer = () => {
               </div>
               <div css={memberStatus}>
                 <span aria-hidden>{member.nickname}</span>
-                {member.isMaster && <img src={crownIcon} alt="" />}
+                {member.isMaster && <img src={CrownIcon} alt="" />}
               </div>
             </li>
           ))}
diff --git a/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx b/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
index 449d87ec4..199d8f302 100644
--- a/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
+++ b/frontend/src/pages/ReadyPage/components/RoomSetting/RoomSetting.tsx
@@ -9,11 +9,10 @@ import {
   roomSettingKey,
 } from './RoomSetting.styled';
 
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import RoomSettingModal from '@/components/RoomSettingModal/RoomSettingModal';
-import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
-import useIsMaster from '@/hooks/useIsMaster';
-import useModal from '@/hooks/useModal';
+import { A11yOnly } from '@/components/common';
+
+import { RoomSettingModal } from '@/components';
+import { useGetRoomInfo, useIsMaster, useModal } from '@/hooks';
 
 const RoomSetting = () => {
   const returnFocusRef = useRef<HTMLButtonElement>(null);
diff --git a/frontend/src/pages/ReadyPage/components/StartButtonContainer/StartButtonContainer.tsx b/frontend/src/pages/ReadyPage/components/StartButtonContainer/StartButtonContainer.tsx
index f3ebcfb94..a2c0bcc9f 100644
--- a/frontend/src/pages/ReadyPage/components/StartButtonContainer/StartButtonContainer.tsx
+++ b/frontend/src/pages/ReadyPage/components/StartButtonContainer/StartButtonContainer.tsx
@@ -2,7 +2,7 @@ import Countdown from './Countdown/Countdown';
 import useCountdown from './hooks/useCountdown';
 import StartButton from './StartButton/StartButton';
 
-import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
+import useGetRoomInfo from '@/hooks/useGetRoomInfo';
 
 const StartButtonContainer = () => {
   const { isGameStart } = useGetRoomInfo();
diff --git a/frontend/src/pages/ReadyPage/components/index.ts b/frontend/src/pages/ReadyPage/components/index.ts
new file mode 100644
index 000000000..6e74917db
--- /dev/null
+++ b/frontend/src/pages/ReadyPage/components/index.ts
@@ -0,0 +1,5 @@
+import ReadyMembersContainer from './ReadyMembersContainer/ReadyMembersContainer';
+import RoomSetting from './RoomSetting/RoomSetting';
+import StartButtonContainer from './StartButtonContainer/StartButtonContainer';
+
+export { ReadyMembersContainer, RoomSetting, StartButtonContainer };
diff --git a/frontend/src/pages/RoundResultPage/RoundResultPage.tsx b/frontend/src/pages/RoundResultPage/RoundResultPage.tsx
index d160b345a..e9627323f 100644
--- a/frontend/src/pages/RoundResultPage/RoundResultPage.tsx
+++ b/frontend/src/pages/RoundResultPage/RoundResultPage.tsx
@@ -1,5 +1,4 @@
-import NextRoundButton from './components/NextRoundButton/NextRoundButton';
-import RoundVoteContainer from './components/RoundVoteContainer/RoundVoteContainer';
+import { NextRoundButton, RoundVoteContainer } from './components';
 
 import Content from '@/components/layout/Content/Content';
 
diff --git a/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx b/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
index 55acac040..147766f31 100644
--- a/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
+++ b/frontend/src/pages/RoundResultPage/components/NextRoundButton/NextRoundButton.tsx
@@ -4,12 +4,11 @@ import { useParams } from 'react-router-dom';
 import useMoveNextRoundMutation from './NextRoundButton.hook';
 import { createRandomNextRoundMessage, getNextRoundButtonText } from './NextRoundButton.utils';
 
-import AlertModal from '@/components/AlertModal/AlertModal';
-import Button from '@/components/common/Button/Button';
+import { Button } from '@/components/common';
 import { bottomButtonLayout } from '@/components/common/Button/Button.styled';
-import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
-import useIsMaster from '@/hooks/useIsMaster';
-import useModal from '@/hooks/useModal';
+
+import { AlertModal } from '@/components';
+import { useBalanceContentQuery, useIsMaster, useModal } from '@/hooks';
 
 const NextRoundButton = () => {
   const { roomId } = useParams();
diff --git a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/OptionParticipantsContainer/OptionParticipants/OptionParticipants.tsx b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/OptionParticipantsContainer/OptionParticipants/OptionParticipants.tsx
index a5b0c69d8..4066070e0 100644
--- a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/OptionParticipantsContainer/OptionParticipants/OptionParticipants.tsx
+++ b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/OptionParticipantsContainer/OptionParticipants/OptionParticipants.tsx
@@ -5,7 +5,7 @@ import {
   participantsListWrapper,
 } from './OptionParticipants.styled';
 
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
 
 export interface OptionParticipantsProps {
   optionName: string;
diff --git a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/TabContentContainer.tsx b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/TabContentContainer.tsx
index eae2adfb2..146ff1b73 100644
--- a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/TabContentContainer.tsx
@@ -7,9 +7,8 @@ import { isExistVoteMember } from './TabContentContainer.util';
 import VoteStatisticContent from './VoteStatisticContent/VoteStatisticContent';
 
 import TopicContainer from '@/components/TopicContainer/TopicContainer';
-import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
-import useMyGameStatus from '@/hooks/useMyGameStatus';
-import useRoundVoteResultQuery from '@/hooks/useRoundVoteResultQuery';
+
+import { useBalanceContentQuery, useMyGameStatus, useRoundVoteResultQuery } from '@/hooks';
 
 interface TabContentContainerProps {
   isVoteStatisticsTabActive: boolean;
diff --git a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/VoteStatisticContent/VoteStatisticContent.tsx b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/VoteStatisticContent/VoteStatisticContent.tsx
index 344edf97e..0dde10336 100644
--- a/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/VoteStatisticContent/VoteStatisticContent.tsx
+++ b/frontend/src/pages/RoundResultPage/components/RoundVoteContainer/TabContentContainer/VoteStatisticContent/VoteStatisticContent.tsx
@@ -10,7 +10,7 @@ import {
 import StatisticBar from '../StatisticBar/StatisticBar';
 import { getDominantVoteData } from '../TabContentContainer.util';
 
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';
 import { Group, Total } from '@/types/roundVoteResult';
 
 interface VoteStatisticContentProps {
diff --git a/frontend/src/pages/RoundResultPage/components/index.ts b/frontend/src/pages/RoundResultPage/components/index.ts
new file mode 100644
index 000000000..674d4f1e7
--- /dev/null
+++ b/frontend/src/pages/RoundResultPage/components/index.ts
@@ -0,0 +1,4 @@
+import NextRoundButton from './NextRoundButton/NextRoundButton';
+import RoundVoteContainer from './RoundVoteContainer/RoundVoteContainer';
+
+export { NextRoundButton, RoundVoteContainer };
diff --git a/frontend/src/providers/index.ts b/frontend/src/providers/index.ts
new file mode 100644
index 000000000..faf428ec8
--- /dev/null
+++ b/frontend/src/providers/index.ts
@@ -0,0 +1,5 @@
+import ModalProvider from './ModalProvider/ModalProvider';
+import QueryClientDefaultOptionProvider from './QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider';
+import ToastProvider from './ToastProvider/ToastProvider';
+
+export { ModalProvider, QueryClientDefaultOptionProvider, ToastProvider };
diff --git a/frontend/src/router/MainLayout.tsx b/frontend/src/router/MainLayout.tsx
index cb8241db6..a91753a14 100644
--- a/frontend/src/router/MainLayout.tsx
+++ b/frontend/src/router/MainLayout.tsx
@@ -1,7 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-import AsyncErrorBoundary from '@/components/common/ErrorBoundary/AsyncErrorBoundary';
-import RootErrorBoundary from '@/components/common/ErrorBoundary/RootErrorBoundary';
+import { AsyncErrorBoundary, RootErrorBoundary } from '@/components/common';
 import ModalProvider from '@/providers/ModalProvider/ModalProvider';
 
 const MainLayout = () => {
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index bdf5d798f..783773d1c 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -11,10 +11,12 @@ import {
 } from './lazyPages';
 import MainLayout from './MainLayout';
 
-import AsyncErrorBoundary from '@/components/common/ErrorBoundary/AsyncErrorBoundary';
-import RouterErrorFallback from '@/components/common/ErrorFallback/RouterErrorFallback/RouterErrorFallback';
-import GameSkeleton from '@/components/common/Skeleton/GameSkeleton/GameSkeleton';
-import ReadySkeleton from '@/components/common/Skeleton/ReadySkeleton/ReadySkeleton';
+import {
+  AsyncErrorBoundary,
+  RouterErrorFallback,
+  GameSkeleton,
+  ReadySkeleton,
+} from '@/components/common';
 
 export const router = createBrowserRouter([
   {
diff --git a/frontend/src/utils/test-utils.tsx b/frontend/src/utils/test-utils.tsx
index 5367b1fe7..55029dd4c 100644
--- a/frontend/src/utils/test-utils.tsx
+++ b/frontend/src/utils/test-utils.tsx
@@ -7,15 +7,12 @@ import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import type { MutableSnapshot } from 'recoil';
 
-import AsyncErrorBoundary from '@/components/common/ErrorBoundary/AsyncErrorBoundary';
-import RootErrorBoundary from '@/components/common/ErrorBoundary/RootErrorBoundary';
-import Spinner from '@/components/common/Spinner/Spinner';
-import ModalProvider from '@/providers/ModalProvider/ModalProvider';
-import QueryClientDefaultOptionProvider from '@/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider';
-import ToastProvider from '@/providers/ToastProvider/ToastProvider';
+import { AsyncErrorBoundary, RootErrorBoundary, Spinner } from '@/components/common';
 import GlobalStyle from '@/styles/GlobalStyle';
 import { Theme } from '@/styles/Theme';
 
+import { ModalProvider, QueryClientDefaultOptionProvider, ToastProvider } from '@/providers';
+
 const wrapper = ({
   children,
   initializeState,