codeit-FE18-part3 · sohyun0 · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
diff --git a/src/components/layout/frame/frame.tsx 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
diff --git a/src/components/ui/frame.tsx b/src/components/ui/frame.tsx
diff --git a/src/context/toastContext/index.ts b/src/context/toastContext/index.ts
diff --git a/src/context/toastContext/toastContext.tsx 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
@@ -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
@@ -6,6 +6,7 @@ export default function Document() {
       <Head />
       <body className='antialiased'>
         <Main />
+        <div id='toast-root'></div>
         <NextScript />
       </body>
     </Html>