diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
deleted file mode 100644
index 6874b51..0000000
--- a/src/components/layout/footer.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Footer = () => {
-  return <div>footer</div>;
-};
-
-export default Footer;
diff --git a/src/components/layout/frame/frame.tsx b/src/components/layout/frame/frame.tsx
new file mode 100644
index 0000000..df6c514
--- /dev/null
+++ b/src/components/layout/frame/frame.tsx
@@ -0,0 +1,20 @@
+interface FrameProps {
+  title: string;
+  content: string;
+}
+
+const Frame = ({ title, content }: FrameProps) => {
+  return (
+    <>
+      <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
+        <h1 className='text-xl font-bold tablet:text-[28px]'>{title}</h1>
+        <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
+          <h2 className='text-sm font-normal tablet:text-base'>{content}</h2>
+          {/*  버튼 컴포넌트 넣을 자리 */}
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Frame;
diff --git a/src/components/layout/frame/index.ts b/src/components/layout/frame/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ui/frame.tsx b/src/components/ui/frame.tsx
deleted file mode 100644
index 1fa2fb4..0000000
--- a/src/components/ui/frame.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useRouter } from 'next/router';
-
-interface FrameProps {
-  title: string;
-  content: string;
-  buttonText: string;
-  address: string;
-}
-
-const Frame = ({ title, content, buttonText, address }: FrameProps) => {
-  const router = useRouter();
-  return (
-    <>
-      <section className='flex flex-col gap-4 px-3 py-10 tablet:px-8 tablet:py-[60px] desktop:px-[237px] desktop:py-[60px]'>
-        <h1 className='text-xl font-bold text-black tablet:text-[28px]'>{title}</h1>
-        <div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
-          <h2 className='text-sm font-normal text-black tablet:text-base'>{content}</h2>
-          <button
-            onClick={() => router.push(`/${address}`)}
-            className='rounded-md bg-[#ea3c12] px-5 py-[10px] text-sm font-bold text-white tablet:px-[136px] tablet:py-[14px] tablet:text-base'
-          >
-            {buttonText}
-          </button>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default Frame;
diff --git a/src/context/toastContext/index.ts b/src/context/toastContext/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/context/toastContext/toastContext.tsx b/src/context/toastContext/toastContext.tsx
new file mode 100644
index 0000000..1aa5333
--- /dev/null
+++ b/src/context/toastContext/toastContext.tsx
@@ -0,0 +1,58 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ToastContextType {
+  showToast: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export const useToast = () => {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast 는 Provider 안에서 사용해주세요');
+  return ctx;
+};
+
+const ToastProvider = ({ children }: { children: ReactNode }) => {
+  const [message, setMessage] = useState<string | null>(null);
+
+  const showToast = (msg: string) => {
+    setMessage(msg);
+  };
+
+  useEffect(() => {
+    if (!message) return;
+
+    const timer = setTimeout(() => {
+      setMessage(null);
+    }, 3000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+
+  const toastRoot = typeof window !== 'undefined' ? document.getElementById('toast-root') : null;
+
+  return (
+    <>
+      <ToastContext.Provider value={{ showToast }}>
+        {children}
+        {toastRoot &&
+          createPortal(
+            message ? (
+              <div
+                role='alert'
+                className='fixed bottom-28 left-1/2 -translate-x-1/2 rounded-[5px] bg-red-300 px-4 py-[10px] text-white'
+              >
+                {message}
+              </div>
+            ) : null,
+            toastRoot
+          )}
+      </ToastContext.Provider>
+    </>
+  );
+};
+
+export default ToastProvider;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 02bb329..e17e9d1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import { Container, Header, Wrapper } from '@/components/layout';
+import ToastProvider from '@/context/toastContext/toastContext';
 import '@/styles/fonts.css';
 import '@/styles/globals.css';
 import type { NextPage } from 'next';
@@ -29,7 +30,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
         <link rel='icon' href='/favicon.ico' sizes='any' />
         <link rel='icon' href='/favicon.png' type='image/png' sizes='192x192' />
       </Head>
-      {getLayout(<Component {...pageProps} />)}
+      <ToastProvider>{getLayout(<Component {...pageProps} />)}</ToastProvider>
     </>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 85e9dc5..214a726 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -6,6 +6,7 @@ export default function Document() {
       <Head />
       <body className='antialiased'>
         <Main />
+        <div id='toast-root'></div>
         <NextScript />
       </body>
     </Html>