diff --git a/src/app/components/ui/Button.tsx b/src/app/components/ui/Button.tsx
new file mode 100644
index 0000000..713acd3
--- /dev/null
+++ b/src/app/components/ui/Button.tsx
@@ -0,0 +1,23 @@
+"use client";
+import React from "react";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary" | "ghost";
+};
+
+export function Button({ variant = "primary", style, ...props }: Props) {
+  const base: React.CSSProperties = {
+    padding: "8px 12px",
+    borderRadius: 6,
+    border: "1px solid transparent",
+    cursor: "pointer",
+  };
+  const variants: Record<NonNullable<Props["variant"]>, React.CSSProperties> = {
+    primary: { background: "#111", color: "#fff" },
+    secondary: { background: "#eee", color: "#111" },
+    ghost: { background: "transparent", borderColor: "#ddd", color: "#111" },
+  };
+  return <button {...props} style={{ ...base, ...variants[variant], ...(style ?? {}) }} />;
+}
+
+
diff --git a/src/app/components/ui/Input.tsx b/src/app/components/ui/Input.tsx
new file mode 100644
index 0000000..06c33c9
--- /dev/null
+++ b/src/app/components/ui/Input.tsx
@@ -0,0 +1,23 @@
+"use client";
+import React from "react";
+
+type Props = React.InputHTMLAttributes<HTMLInputElement> & { label?: string };
+
+export function Input({ label, style, ...props }: Props) {
+  return (
+    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      {label && <span>{label}</span>}
+      <input
+        {...props}
+        style={{
+          padding: "8px 10px",
+          borderRadius: 6,
+          border: "1px solid #ddd",
+          ...(style ?? {}),
+        }}
+      />
+    </label>
+  );
+}
+
+
diff --git a/src/app/components/ui/Modal.tsx b/src/app/components/ui/Modal.tsx
new file mode 100644
index 0000000..d501a91
--- /dev/null
+++ b/src/app/components/ui/Modal.tsx
@@ -0,0 +1,27 @@
+"use client";
+import React from "react";
+
+type Props = { open: boolean; onClose: () => void; children: React.ReactNode };
+
+export function Modal({ open, onClose, children }: Props) {
+  if (!open) return null;
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div onClick={(e) => e.stopPropagation()} style={{ background: "#fff", padding: 16, borderRadius: 8 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+
diff --git a/src/app/components/ui/ToastProvider.tsx b/src/app/components/ui/ToastProvider.tsx
new file mode 100644
index 0000000..596a515
--- /dev/null
+++ b/src/app/components/ui/ToastProvider.tsx
@@ -0,0 +1,34 @@
+"use client";
+import React, { createContext, useContext, useState } from "react";
+
+type Toast = { id: string; message: string };
+type Ctx = { show: (message: string) => void };
+
+const ToastCtx = createContext<Ctx>({ show: () => {} });
+
+export function useToast() {
+  return useContext(ToastCtx);
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const show = (message: string) => {
+    const t = { id: String(Date.now()), message };
+    setToasts((x) => [t, ...x]);
+    setTimeout(() => setToasts((x) => x.filter((i) => i.id !== t.id)), 3000);
+  };
+  return (
+    <ToastCtx.Provider value={{ show }}>
+      {children}
+      <div style={{ position: "fixed", bottom: 16, right: 16, display: "flex", flexDirection: "column", gap: 8 }}>
+        {toasts.map((t) => (
+          <div key={t.id} style={{ background: "#111", color: "#fff", padding: "8px 12px", borderRadius: 6 }}>
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastCtx.Provider>
+  );
+}
+
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 40c0f7a..d94199f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import QueryProvider from "@/app/QueryProvider";
 import { AppHeader } from "@/app/components/AppHeader";
 import { AppSidebar } from "@/app/components/AppSidebar";
 import { AppFooter } from "@/app/components/AppFooter";
+import { ToastProvider } from "@/app/components/ui/ToastProvider";
 
 
 export const metadata: Metadata = {
@@ -20,12 +21,14 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <QueryProvider>
-          <AppHeader />
-          <div style={{ display: "flex", minHeight: "80vh" }}>
-            <AppSidebar />
-            <main style={{ flex: 1, padding: 16 }}>{children}</main>
-          </div>
-          <AppFooter />
+          <ToastProvider>
+            <AppHeader />
+            <div style={{ display: "flex", minHeight: "80vh" }}>
+              <AppSidebar />
+              <main style={{ flex: 1, padding: 16 }}>{children}</main>
+            </div>
+            <AppFooter />
+          </ToastProvider>
         </QueryProvider>
       </body>
     </html>
diff --git a/todolist.txt b/todolist.txt
index 086c905..b0f8b6f 100644
--- a/todolist.txt
+++ b/todolist.txt
@@ -27,8 +27,8 @@
 4.4 낙관적 업데이트 패턴 적용(작성/수정) o
 
 [공통/레이아웃]
-5.1 앱 레이아웃/헤더/푸터/사이드바 구성
-5.2 공통 컴포넌트(버튼/입력/모달/토스트) 제작
+5.1 앱 레이아웃/헤더/푸터/사이드바 구성 o
+5.2 공통 컴포넌트(버튼/입력/모달/토스트) 제작 o
 5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립
 5.4 테마/다크모드 및 반응형 설정