diff --git a/app/api/quiz-submission/route.ts b/app/api/quiz-submission/route.ts
index b6b50e7..c4a4d66 100644
--- a/app/api/quiz-submission/route.ts
+++ b/app/api/quiz-submission/route.ts
@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
 import { createClient } from '@/utils/supabase/server';
-import { NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
 
 export async function POST(request: NextRequest) {
@@ -17,7 +17,7 @@ export async function POST(request: NextRequest) {
   );
 
   if (!validateBody.success) {
-    return Response.json(
+    return NextResponse.json(
       { error: '필드가 올바르지 않습니다.' },
       { status: 400 }
     );
@@ -30,7 +30,10 @@ export async function POST(request: NextRequest) {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return Response.json({ error: '로그인이 필요합니다.' }, { status: 401 });
+    return NextResponse.json(
+      { error: '로그인이 필요합니다.' },
+      { status: 401 }
+    );
   }
 
   const { data: answerChoice } = await supabase
@@ -47,11 +50,11 @@ export async function POST(request: NextRequest) {
   });
 
   if (choiceId !== answerChoice?.id) {
-    return Response.json(
+    return NextResponse.json(
       { error: '틀렸어요! 다시 고민해주세요.' },
       { status: 400 }
     );
   }
 
-  return Response.json({ data: '정답!' });
+  return NextResponse.json({ data: '정답!' });
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 5d19e2a..8271aef 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,8 @@
 import { GeistSans } from 'geist/font/sans';
 import './globals.css';
-import QueryProvider from '@/providers/QueryProvider';
+import QueryProvider from '@/providers/query-provider';
 import { PcScreen } from '@/components/pc-screen';
+import OverlayProvider from '@/providers/overlay-provider';
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
@@ -27,7 +28,8 @@ export default function RootLayout({
 
           <div id="app-background" />
           <div id="app-screen" className="bg-white">
-            {children}
+            {/* NOTE: OverlayProvider에 div가 감싸져야 한다. */}
+            <OverlayProvider>{children}</OverlayProvider>
           </div>
         </body>
       </QueryProvider>
diff --git a/app/quizzes/[id]/quiz.tsx b/app/quizzes/[id]/quiz.tsx
index 67879e5..df990ab 100644
--- a/app/quizzes/[id]/quiz.tsx
+++ b/app/quizzes/[id]/quiz.tsx
@@ -1,14 +1,19 @@
 'use client';
 
+import Button from '@/components/common/buttons/button';
 import { useGetQuiz } from '@/hooks/quiz';
 
 export function Quiz({ id }: { id: number }) {
   const { data: quiz } = useGetQuiz(id);
+  const openModal = () => {
+    open();
+  };
 
   return (
     <div>
-      <div>나는 클라이언트 컴포넌트에서 불러온 값!</div>
+      {/* <div>나는 클라이언트 컴포넌트에서 불러온 값!</div> */}
       {JSON.stringify(quiz)}
+      <Button onClick={openModal}>모달 테스트</Button>
     </div>
   );
 }
diff --git a/components/common/modals/dimmer.tsx b/components/common/modals/dimmer.tsx
new file mode 100644
index 0000000..53878ea
--- /dev/null
+++ b/components/common/modals/dimmer.tsx
@@ -0,0 +1,21 @@
+import { type Ref, forwardRef } from 'react';
+
+type DimmerProps = {
+  children: React.ReactNode;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+export default forwardRef(function Dimmer(
+  { children, onClick }: DimmerProps,
+  ref: Ref<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      onClick={onClick}
+      className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center backdrop-brightness-75"
+    >
+      {children}
+    </div>
+  );
+});
diff --git a/components/common/modals/modal.tsx b/components/common/modals/modal.tsx
new file mode 100644
index 0000000..15c0e5b
--- /dev/null
+++ b/components/common/modals/modal.tsx
@@ -0,0 +1,26 @@
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+export default function Modal({ open, onClose, onConfirm }: ModalProps) {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-40 w-40 flex-col justify-end rounded bg-white">
+      <div className="mt-auto">나는 테스트 모달입니다.</div>
+
+      <div className="mt-auto flex gap-2">
+        <button onClick={onClose} className="w-full text-center">
+          나는 취소
+        </button>
+        <button onClick={onConfirm} className="w-full text-center">
+          나는 확인
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/common/modals/use-temp-modal.tsx b/components/common/modals/use-temp-modal.tsx
new file mode 100644
index 0000000..f270e0c
--- /dev/null
+++ b/components/common/modals/use-temp-modal.tsx
@@ -0,0 +1,46 @@
+import { useOverlay } from '@toss/use-overlay';
+import { useRef } from 'react';
+import Modal from './modal';
+import Dimmer from './dimmer';
+
+export default function useTempModal() {
+  const overlay = useOverlay();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const openModal = () => {
+    return new Promise<boolean>((resolve) => {
+      overlay.open(({ isOpen, close }) => {
+        const onClickDimmer = (e: React.MouseEvent) => {
+          resolve(false);
+          e.target === ref.current ? close() : null;
+        };
+
+        const onCloseModal = () => {
+          resolve(false);
+          close();
+        };
+
+        const onConfirmModal = () => {
+          resolve(true);
+          close();
+        };
+
+        return (
+          <>
+            {isOpen && (
+              <Dimmer ref={ref} onClick={onClickDimmer}>
+                <Modal
+                  open={isOpen}
+                  onClose={onCloseModal}
+                  onConfirm={onConfirmModal}
+                />
+              </Dimmer>
+            )}
+          </>
+        );
+      });
+    });
+  };
+
+  return { open: openModal };
+}
diff --git a/package-lock.json b/package-lock.json
index 8086160..b43eab0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@supabase/supabase-js": "latest",
         "@tailwindcss/typography": "^0.5.10",
         "@tanstack/react-query": "^5.7.2",
+        "@toss/use-overlay": "^1.3.8",
         "autoprefixer": "10.4.15",
         "class-variance-authority": "^0.7.0",
         "geist": "^1.0.0",
@@ -236,126 +237,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -547,6 +428,14 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@toss/use-overlay": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@toss/use-overlay/-/use-overlay-1.3.8.tgz",
+      "integrity": "sha512-VdyAOaZsiDN5I+eo3oNZVOTqDU+S+WL+xg7Qln/ea073JO7l+UVnv4GWkRTCsmF1GB0OI4WBDDi0U7XEkLt0nQ==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -7128,6 +7017,126 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
+      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
+      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
+      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
+      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
+      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
+      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
+      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   },
   "dependencies": {
@@ -7265,54 +7274,6 @@
       "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
       "optional": true
     },
-    "@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
-      "optional": true
-    },
-    "@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
-      "optional": true
-    },
-    "@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
-      "optional": true
-    },
-    "@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
-      "optional": true
-    },
-    "@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
-      "optional": true
-    },
-    "@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
-      "optional": true
-    },
-    "@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
-      "optional": true
-    },
-    "@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
-      "optional": true
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7467,6 +7428,12 @@
         "@tanstack/query-core": "5.14.1"
       }
     },
+    "@toss/use-overlay": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@toss/use-overlay/-/use-overlay-1.3.8.tgz",
+      "integrity": "sha512-VdyAOaZsiDN5I+eo3oNZVOTqDU+S+WL+xg7Qln/ea073JO7l+UVnv4GWkRTCsmF1GB0OI4WBDDi0U7XEkLt0nQ==",
+      "requires": {}
+    },
     "@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -11965,6 +11932,54 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
       "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
+    },
+    "@next/swc-darwin-x64": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
+      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
+      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
+      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
+      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
+      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
+      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
+      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
+      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "optional": true
     }
   }
 }
diff --git a/package.json b/package.json
index 097c596..94c73b3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@supabase/supabase-js": "latest",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^5.7.2",
+    "@toss/use-overlay": "^1.3.8",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "geist": "^1.0.0",
diff --git a/providers/overlay-provider.tsx b/providers/overlay-provider.tsx
new file mode 100644
index 0000000..b618120
--- /dev/null
+++ b/providers/overlay-provider.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { OverlayProvider as OlProvider } from '@toss/use-overlay';
+
+type OverlayProviderPropsType = {
+  children: React.ReactNode;
+};
+
+export default function OverlayProvider({
+  children,
+}: OverlayProviderPropsType) {
+  return <OlProvider>{children}</OlProvider>;
+}
diff --git a/providers/QueryProvider.tsx b/providers/query-provider.tsx
similarity index 100%
rename from providers/QueryProvider.tsx
rename to providers/query-provider.tsx