diff --git a/docs/docusaurus/.gitignore b/docs/docusaurus/.gitignore
index 65160bc9..4a50e4da 100644
--- a/docs/docusaurus/.gitignore
+++ b/docs/docusaurus/.gitignore
@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-.docusaurus
\ No newline at end of file
+.docusaurus
+build
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e0b33962..4dc8d4c1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -114,13 +114,14 @@ export default [
     },
   },
 
+  // Frontend 설정: React 및 TypeScript 전용 규칙
   // Frontend 설정: React 및 TypeScript 전용 규칙
   {
     files: ['frontend/**/*.ts', 'frontend/**/*.tsx'],
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        project: './docs/docusaurus/tsconfig.json',
+        project: './frontend/tsconfig.eslint.json',
         tsconfigRootDir: __dirname,
         ecmaVersion: 'latest',
         sourceType: 'module',
@@ -135,6 +136,12 @@ export default [
       '@typescript-eslint': typescriptPlugin,
     },
     settings: {
+      'import/resolver': {
+        typescript: {
+          project: path.resolve(__dirname, 'frontend/tsconfig.eslint.json'),
+          extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        },
+      },
       react: {
         version: 'detect',
       },
@@ -174,13 +181,10 @@ export default [
       'react/destructuring-assignment': 'off',
       'react/button-has-type': 'warn',
       'import/no-unresolved': 'error',
-    },
-  },
-
-  {
-    files: ['**/*.test.{js,ts,tsx}', '**/*.spec.{js,ts,tsx}'],
-    rules: {
-      'no-console': 'off',
+      'import/extensions': 'off', // 규칙 비활성화
+      'prettier/prettier': 'error',
+      'no-underscore-dangle': 'warn',
+      'no-undef': 'off',
     },
   },
 
diff --git a/frontend/package.json b/frontend/package.json
index 59d08a5a..bf39c174 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,7 @@
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "eslint": "^9.13.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-storybook": "^0.11.0",
@@ -49,7 +50,8 @@
     "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.1"
   },
   "eslintConfig": {
     "extends": [
diff --git a/frontend/src/component/common/button/Button.tsx b/frontend/src/component/common/button/Button.tsx
deleted file mode 100644
index 14fe42bd..00000000
--- a/frontend/src/component/common/button/Button.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import classNames from 'classnames';
-
-interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode;
-  className?: string;
-}
-
-export const Button = (props: IButtonProps) => (
-  <button type={props.type ?? 'button'} className={classNames(props.className)} {...props}>
-    {props.children}
-  </button>
-);
diff --git a/frontend/src/component/common/nav/NaviBar.tsx b/frontend/src/component/common/nav/NaviBar.tsx
deleted file mode 100644
index 40877776..00000000
--- a/frontend/src/component/common/nav/NaviBar.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import classNames from 'classnames';
-
-interface INaviBarProps {
-  children?: ReactNode;
-  className?: string;
-}
-
-export const NaviBar = (props: INaviBarProps) => (
-  <header className={classNames(props.className)} {...props}>
-    {props.children}
-  </header>
-);
diff --git a/frontend/src/stories/Button.stories.ts b/frontend/src/stories/Button.stories.ts
index 2a05e01b..9489f305 100644
--- a/frontend/src/stories/Button.stories.ts
+++ b/frontend/src/stories/Button.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import { Button } from './Button';
+import { Button } from './Button.tsx';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
diff --git a/frontend/src/stories/Header.stories.ts b/frontend/src/stories/Header.stories.ts
index 80c71d0f..c723511e 100644
--- a/frontend/src/stories/Header.stories.ts
+++ b/frontend/src/stories/Header.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import { Header } from './Header';
+import { Header } from './Header.tsx';
 
 const meta = {
   title: 'Example/Header',
diff --git a/frontend/src/stories/Header.tsx b/frontend/src/stories/Header.tsx
index c7011dc3..855dd3dc 100644
--- a/frontend/src/stories/Header.tsx
+++ b/frontend/src/stories/Header.tsx
@@ -1,4 +1,4 @@
-import { Button } from './Button';
+import { Button } from './Button.tsx';
 import './header.css';
 
 interface IUser {
diff --git a/frontend/src/stories/Page.stories.ts b/frontend/src/stories/Page.stories.ts
index 53b9f8fd..b89ec02d 100644
--- a/frontend/src/stories/Page.stories.ts
+++ b/frontend/src/stories/Page.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 
-import { Page } from './Page';
+import { Page } from './Page.tsx';
 
 const meta = {
   title: 'Example/Page',
diff --git a/frontend/src/stories/Page.tsx b/frontend/src/stories/Page.tsx
index 4a2cf8e1..940815b2 100644
--- a/frontend/src/stories/Page.tsx
+++ b/frontend/src/stories/Page.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Header } from './Header';
+import { Header } from './Header.tsx';
 import './page.css';
 
 interface IUser {
diff --git a/frontend/tsconfig.eslint.json b/frontend/tsconfig.eslint.json
new file mode 100644
index 00000000..0b40744c
--- /dev/null
+++ b/frontend/tsconfig.eslint.json
@@ -0,0 +1,20 @@
+// frontend/tsconfig.eslint.json
+// eslint에서 참조를 허용하지 않기에, eslint를 위한 tsconfig 파일을 별도로 생성했음.
+// 추후 tsconfig 간의 교통정리 및 통합할 필요성이 있어 보임.
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+    "tmp/**/*.ts",
+    "tmp/**/*.tsx",
+    "vite.config.ts",
+    "vite-env.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 6da11b5b..a7e44f41 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import tsconfigPaths from 'vite-tsconfig-paths'; // 추가된 부분
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()], // tsconfigPaths 플러그인 추가
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50d232dd..ef22055c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -230,6 +230,9 @@ importers:
       eslint:
         specifier: ^9.13.0
         version: 9.14.0(jiti@1.21.6)
+      eslint-import-resolver-typescript:
+        specifier: ^3.6.3
+        version: 3.6.3(@typescript-eslint/parser@8.13.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.6.3))(eslint-plugin-import@2.31.0)(eslint@9.14.0(jiti@1.21.6))
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
         version: 5.0.0(eslint@9.14.0(jiti@1.21.6))
@@ -260,6 +263,9 @@ importers:
       vite:
         specifier: ^5.4.10
         version: 5.4.10(@types/node@22.9.0)(terser@5.36.0)
+      vite-tsconfig-paths:
+        specifier: ^5.1.1
+        version: 5.1.1(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0)(terser@5.36.0))
 
 packages:
 
@@ -4221,6 +4227,9 @@ packages:
     resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -6866,6 +6875,16 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  tsconfck@3.1.4:
+    resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -7094,6 +7113,14 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  vite-tsconfig-paths@5.1.1:
+    resolution: {integrity: sha512-0nLY3qQI4GlYw3We4rps16ntW+nAZYCUrJwsuvqxIUCY9Bk3VnSeJDm/VPCmjOcAJ9Kud4k+CK2ZEnf9pbzK9Q==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vite@5.4.10:
     resolution: {integrity: sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -12676,6 +12703,8 @@ snapshots:
       merge2: 1.4.1
       slash: 4.0.0
 
+  globrex@0.1.2: {}
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4
@@ -15856,6 +15885,10 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  tsconfck@3.1.4(typescript@5.6.3):
+    optionalDependencies:
+      typescript: 5.6.3
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -16124,6 +16157,17 @@ snapshots:
       - supports-color
       - terser
 
+  vite-tsconfig-paths@5.1.1(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0)(terser@5.36.0)):
+    dependencies:
+      debug: 4.3.7
+      globrex: 0.1.2
+      tsconfck: 3.1.4(typescript@5.6.3)
+    optionalDependencies:
+      vite: 5.4.10(@types/node@22.9.0)(terser@5.36.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   vite@5.4.10(@types/node@22.9.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5