feat: 에러 처리 개선 + 커스텀 확인 모달 + 관리자 테스트

- 에러 코드 기반 한국어 매핑 (8개 코드, parseError 개선)
- window.confirm → 커스텀 ConfirmDialog (다크 테마, Promise 기반)
- launch URL 파라미터 ticket → token 통일
- 관리자 테스트 27개 추가 (공지사항 12 + 다운로드 6 + 유저 9)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-route
 import { useEffect, useRef } from 'react';
 import { AuthProvider } from './context/AuthContext';
 import { ToastProvider } from './components/toast/ToastProvider';
+import { ConfirmProvider } from './components/confirm/ConfirmProvider';
 import { useAuth } from './context/useAuth';
 import ErrorBoundary from './components/ErrorBoundary';
 import LoginPage from './pages/LoginPage';
@@ -67,7 +68,9 @@ export default function App() {
     <BrowserRouter>
       <AuthProvider>
         <ToastProvider>
-          <AppRoutes />
+          <ConfirmProvider>
+            <AppRoutes />
+          </ConfirmProvider>
         </ToastProvider>
       </AuthProvider>
     </BrowserRouter>

src/api/client.js

@@ -40,14 +40,29 @@ async function doFetch(path, options, token) {
   return fetch(BASE + path, { ...options, headers, credentials: 'include' });
 }
 
+/** 에러 코드별 기본 한국어 메시지 */
+const ERROR_MESSAGES = {
+  bad_request: '잘못된 요청입니다',
+  unauthorized: '로그인이 필요합니다',
+  forbidden: '권한이 없습니다',
+  not_found: '요청한 리소스를 찾을 수 없습니다',
+  conflict: '이미 존재하는 항목입니다',
+  tx_failed: '트랜잭션 처리에 실패했습니다',
+  rate_limited: '요청이 너무 많습니다. 잠시 후 다시 시도해주세요',
+  internal_error: '서버 오류가 발생했습니다',
+};
+
 async function parseError(res) {
   let message = res.statusText;
+  let code;
   try {
     const body = await res.json();
-    if (body.error) message = body.error;
+    code = body.error;
+    message = body.message || ERROR_MESSAGES[code] || message;
   } catch { /* 응답 바디 파싱 실패 시 statusText 사용 */ }
   const err = new Error(message);
   err.status = res.status;
+  err.code = code;
   return err;
 }
 

src/components/DownloadSection.jsx

@@ -36,7 +36,7 @@ export default function DownloadSection() {
     // JWT를 URL에 직접 노출하지 않고, 일회용 티켓을 발급받아 전달
     try {
       const ticket = await createLaunchTicket();
-      window.location.href = 'a301://launch?ticket=' + encodeURIComponent(ticket);
+      window.location.href = 'a301://launch?token=' + encodeURIComponent(ticket);
     } catch {
       // 티켓 발급 실패 시 로그인 유도
       navigate('/login');

src/components/admin/AnnouncementAdmin.jsx

@@ -1,11 +1,12 @@
-// TODO: Add tests for CRUD operations (create, update, delete announcements)
 import { useState, useEffect, useCallback } from 'react';
 import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements';
 import { useToast } from '../toast/useToast';
+import { useConfirm } from '../confirm/useConfirm';
 import './AdminCommon.css';
 
 export default function AnnouncementAdmin() {
   const toast = useToast();
+  const confirm = useConfirm();
   const [list, setList] = useState([]);
   const [form, setForm] = useState({ title: '', content: '' });
   const [editingId, setEditingId] = useState(null);
@@ -58,8 +59,7 @@ export default function AnnouncementAdmin() {
   };
 
   const handleDelete = async (id) => {
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
+    if (!(await confirm('삭제하시겠습니까?'))) return;
-    if (!confirm('삭제하시겠습니까?')) return;
     try {
       await deleteAnnouncement(id);
       toast.success('공지사항이 삭제되었습니다.');

src/components/admin/AnnouncementAdmin.test.jsx

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import AnnouncementAdmin from './AnnouncementAdmin';
+
+// Mock APIs
+const mockGetAnnouncements = vi.fn();
+const mockCreateAnnouncement = vi.fn();
+const mockUpdateAnnouncement = vi.fn();
+const mockDeleteAnnouncement = vi.fn();
+vi.mock('../../api/announcements', () => ({
+  getAnnouncements: (...args) => mockGetAnnouncements(...args),
+  createAnnouncement: (...args) => mockCreateAnnouncement(...args),
+  updateAnnouncement: (...args) => mockUpdateAnnouncement(...args),
+  deleteAnnouncement: (...args) => mockDeleteAnnouncement(...args),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock confirm — resolves true by default
+let mockConfirmResult = true;
+vi.mock('../confirm/useConfirm', () => ({
+  useConfirm: () => () => Promise.resolve(mockConfirmResult),
+}));
+
+const SAMPLE_LIST = [
+  { id: 1, title: '점검 안내', content: '서버 점검합니다.', createdAt: '2026-03-10T00:00:00Z' },
+  { id: 2, title: '업데이트', content: '새 버전 출시.', createdAt: '2026-03-12T00:00:00Z' },
+];
+
+describe('AnnouncementAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirmResult = true;
+    mockGetAnnouncements.mockResolvedValue(SAMPLE_LIST);
+  });
+
+  it('renders announcements after loading', async () => {
+    render(<AnnouncementAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('점검 안내')).toBeInTheDocument();
+    expect(screen.getByText('업데이트')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetAnnouncements.mockRejectedValueOnce(new Error('fail'));
+    render(<AnnouncementAdmin />);
+    expect(await screen.findByText('공지사항을 불러오지 못했습니다.')).toBeInTheDocument();
+    expect(screen.getByText('다시 시도')).toBeInTheDocument();
+  });
+
+  it('retries loading when "다시 시도" is clicked', async () => {
+    mockGetAnnouncements.mockRejectedValueOnce(new Error('fail'));
+    render(<AnnouncementAdmin />);
+    await screen.findByText('다시 시도');
+
+    mockGetAnnouncements.mockResolvedValueOnce(SAMPLE_LIST);
+    fireEvent.click(screen.getByText('다시 시도'));
+    expect(await screen.findByText('점검 안내')).toBeInTheDocument();
+  });
+
+  describe('create', () => {
+    it('creates a new announcement', async () => {
+      mockCreateAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '새 공지' } });
+      fireEvent.change(screen.getByPlaceholderText('내용'), { target: { value: '새 내용입니다.' } });
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+
+      await waitFor(() => {
+        expect(mockCreateAnnouncement).toHaveBeenCalledWith('새 공지', '새 내용입니다.');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 등록되었습니다.');
+    });
+
+    it('shows validation error when fields are empty', async () => {
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+      expect(await screen.findByText('제목과 내용을 모두 입력해주세요.')).toBeInTheDocument();
+      expect(mockCreateAnnouncement).not.toHaveBeenCalled();
+    });
+
+    it('shows toast on create failure', async () => {
+      mockCreateAnnouncement.mockRejectedValueOnce(new Error('서버 오류'));
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '제목' } });
+      fireEvent.change(screen.getByPlaceholderText('내용'), { target: { value: '내용' } });
+      fireEvent.click(screen.getByRole('button', { name: '공지 등록' }));
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('서버 오류');
+      });
+    });
+  });
+
+  describe('update', () => {
+    it('populates form on edit and submits update', async () => {
+      mockUpdateAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      // Click edit on first item
+      const editButtons = screen.getAllByText('수정');
+      fireEvent.click(editButtons[0]);
+
+      // Form should be populated
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('점검 안내');
+      expect(screen.getByPlaceholderText('내용')).toHaveValue('서버 점검합니다.');
+      expect(screen.getByRole('button', { name: '수정 완료' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '취소' })).toBeInTheDocument();
+
+      // Modify and submit
+      fireEvent.change(screen.getByPlaceholderText('제목'), { target: { value: '수정된 제목' } });
+      fireEvent.click(screen.getByRole('button', { name: '수정 완료' }));
+
+      await waitFor(() => {
+        expect(mockUpdateAnnouncement).toHaveBeenCalledWith(1, '수정된 제목', '서버 점검합니다.');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 수정되었습니다.');
+    });
+
+    it('cancels editing and clears form', async () => {
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const editButtons = screen.getAllByText('수정');
+      fireEvent.click(editButtons[0]);
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('점검 안내');
+
+      fireEvent.click(screen.getByRole('button', { name: '취소' }));
+      expect(screen.getByPlaceholderText('제목')).toHaveValue('');
+      expect(screen.getByPlaceholderText('내용')).toHaveValue('');
+      expect(screen.getByRole('button', { name: '공지 등록' })).toBeInTheDocument();
+    });
+  });
+
+  describe('delete', () => {
+    it('deletes an announcement when confirmed', async () => {
+      mockDeleteAnnouncement.mockResolvedValueOnce({});
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteAnnouncement).toHaveBeenCalledWith(1);
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('공지사항이 삭제되었습니다.');
+    });
+
+    it('does not delete when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteAnnouncement).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on delete failure', async () => {
+      mockDeleteAnnouncement.mockRejectedValueOnce(new Error('삭제 실패'));
+      render(<AnnouncementAdmin />);
+      await screen.findByText('점검 안내');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+      });
+    });
+  });
+});

src/components/admin/DownloadAdmin.jsx

@@ -1,4 +1,3 @@
-// TODO: Add tests for CRUD operations (load download info, upload launcher, upload game)
 import { useState, useEffect } from 'react';
 import { getDownloadInfo } from '../../api/download';
 import { useToast } from '../toast/useToast';

src/components/admin/DownloadAdmin.test.jsx

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import DownloadAdmin from './DownloadAdmin';
+
+// Mock APIs
+const mockGetDownloadInfo = vi.fn();
+vi.mock('../../api/download', () => ({
+  getDownloadInfo: (...args) => mockGetDownloadInfo(...args),
+}));
+
+// Mock apiUpload
+const mockApiUpload = vi.fn();
+vi.mock('../../api/client', () => ({
+  apiUpload: (...args) => mockApiUpload(...args),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+const SAMPLE_INFO = {
+  url: 'https://example.com/game.zip',
+  launcherUrl: 'https://example.com/launcher.exe',
+  version: 'v1.2.0',
+  fileName: 'game.zip',
+  fileSize: '512 MB',
+  fileHash: 'abc123def456abc123def456abc123def456abc123def456abc123def456abcd',
+  launcherSize: '8 MB',
+};
+
+describe('DownloadAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetDownloadInfo.mockResolvedValue(SAMPLE_INFO);
+  });
+
+  it('shows loading state then renders download info', async () => {
+    render(<DownloadAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('v1.2.0')).toBeInTheDocument();
+    expect(screen.getByText('512 MB')).toBeInTheDocument();
+    expect(screen.getByText('game.zip')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetDownloadInfo.mockRejectedValueOnce(new Error('fail'));
+    render(<DownloadAdmin />);
+    expect(await screen.findByText('배포 정보를 불러올 수 없습니다.')).toBeInTheDocument();
+    expect(screen.getByText('다시 시도')).toBeInTheDocument();
+  });
+
+  it('retries loading on "다시 시도" click', async () => {
+    mockGetDownloadInfo.mockRejectedValueOnce(new Error('fail'));
+    render(<DownloadAdmin />);
+    await screen.findByText('다시 시도');
+
+    mockGetDownloadInfo.mockResolvedValueOnce(SAMPLE_INFO);
+    fireEvent.click(screen.getByText('다시 시도'));
+    expect(await screen.findByText('v1.2.0')).toBeInTheDocument();
+  });
+
+  it('renders launcher and game upload sections', async () => {
+    render(<DownloadAdmin />);
+    await screen.findByText('v1.2.0');
+
+    expect(screen.getByText('launcher.exe')).toBeInTheDocument();
+    expect(screen.getByText(/게임 파일/)).toBeInTheDocument();
+    // Two upload buttons (both disabled without file selection)
+    const uploadButtons = screen.getAllByRole('button', { name: '업로드' });
+    expect(uploadButtons).toHaveLength(2);
+    uploadButtons.forEach((btn) => expect(btn).toBeDisabled());
+  });
+
+  it('displays launcher size', async () => {
+    render(<DownloadAdmin />);
+    await screen.findByText('8 MB');
+  });
+
+  it('displays SHA256 hash prefix', async () => {
+    render(<DownloadAdmin />);
+    expect(await screen.findByText(/SHA256: abc123def456/)).toBeInTheDocument();
+  });
+});

src/components/admin/UserAdmin.jsx

@@ -1,8 +1,8 @@
-// TODO: Add tests for CRUD operations (list users, update role, delete user)
 import { useState, useEffect } from 'react';
 import { getUsers, updateUserRole, deleteUser } from '../../api/users';
 import { useAuth } from '../../context/useAuth';
 import { useToast } from '../toast/useToast';
+import { useConfirm } from '../confirm/useConfirm';
 import './AdminCommon.css';
 
 export default function UserAdmin() {
@@ -11,6 +11,7 @@ export default function UserAdmin() {
   const [fetchError, setFetchError] = useState(false);
   const { user: me } = useAuth();
   const toast = useToast();
+  const confirm = useConfirm();
 
   const load = () => {
     setLoading(true);
@@ -28,8 +29,7 @@ export default function UserAdmin() {
 
   const handleRoleToggle = async (u) => {
     const newRole = u.role === 'admin' ? 'user' : 'admin';
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
+    if (!(await confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`))) return;
-    if (!confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`)) return;
     try {
       await updateUserRole(u.id, newRole);
       toast.success(`${u.username}의 권한이 ${newRole}로 변경되었습니다.`);
@@ -40,8 +40,7 @@ export default function UserAdmin() {
   };
 
   const handleDelete = async (u) => {
-    // TODO: Replace window.confirm() with a custom confirmation modal for consistent UI
+    if (!(await confirm(`${u.username} 계정을 삭제하시겠습니까?`))) return;
-    if (!confirm(`${u.username} 계정을 삭제하시겠습니까?`)) return;
     try {
       await deleteUser(u.id);
       toast.success(`${u.username} 계정이 삭제되었습니다.`);

src/components/admin/UserAdmin.test.jsx

@@ -0,0 +1,162 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserAdmin from './UserAdmin';
+
+// Mock APIs
+const mockGetUsers = vi.fn();
+const mockUpdateUserRole = vi.fn();
+const mockDeleteUser = vi.fn();
+vi.mock('../../api/users', () => ({
+  getUsers: (...args) => mockGetUsers(...args),
+  updateUserRole: (...args) => mockUpdateUserRole(...args),
+  deleteUser: (...args) => mockDeleteUser(...args),
+}));
+
+// Mock useAuth — current user is "admin1"
+vi.mock('../../context/useAuth', () => ({
+  useAuth: () => ({ user: { username: 'admin1', role: 'admin' } }),
+}));
+
+// Mock toast
+const mockToast = { success: vi.fn(), error: vi.fn(), info: vi.fn(), warn: vi.fn() };
+vi.mock('../toast/useToast', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock confirm
+let mockConfirmResult = true;
+vi.mock('../confirm/useConfirm', () => ({
+  useConfirm: () => () => Promise.resolve(mockConfirmResult),
+}));
+
+const SAMPLE_USERS = [
+  { id: 1, username: 'admin1', role: 'admin' },
+  { id: 2, username: 'player1', role: 'user' },
+  { id: 3, username: 'player2', role: 'user' },
+];
+
+describe('UserAdmin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirmResult = true;
+    mockGetUsers.mockResolvedValue(SAMPLE_USERS);
+  });
+
+  it('renders user list after loading', async () => {
+    render(<UserAdmin />);
+    expect(screen.getByText('불러오는 중...')).toBeInTheDocument();
+    expect(await screen.findByText('admin1')).toBeInTheDocument();
+    expect(screen.getByText('player1')).toBeInTheDocument();
+    expect(screen.getByText('player2')).toBeInTheDocument();
+  });
+
+  it('shows error when fetch fails', async () => {
+    mockGetUsers.mockRejectedValueOnce(new Error('fail'));
+    render(<UserAdmin />);
+    expect(await screen.findByText('유저 목록을 불러올 수 없습니다.')).toBeInTheDocument();
+  });
+
+  it('does not show action buttons for the current user', async () => {
+    render(<UserAdmin />);
+    await screen.findByText('admin1');
+
+    // admin1 row should not have edit/delete buttons
+    const listItems = screen.getAllByRole('listitem');
+    const admin1Item = listItems.find((li) => li.textContent.includes('admin1'));
+    expect(admin1Item.querySelector('.btn-admin-edit')).toBeNull();
+    expect(admin1Item.querySelector('.btn-admin-delete')).toBeNull();
+  });
+
+  it('shows role badge for each user', async () => {
+    render(<UserAdmin />);
+    await screen.findByText('admin1');
+
+    const badges = screen.getAllByText(/^(admin|user)$/);
+    expect(badges.length).toBeGreaterThanOrEqual(3);
+  });
+
+  describe('role toggle', () => {
+    it('promotes a user to admin', async () => {
+      mockUpdateUserRole.mockResolvedValueOnce({});
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      // player1 should have "관리자로" button
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockUpdateUserRole).toHaveBeenCalledWith(2, 'admin');
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('player1의 권한이 admin로 변경되었습니다.');
+    });
+
+    it('does not toggle role when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockUpdateUserRole).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on role toggle failure', async () => {
+      mockUpdateUserRole.mockRejectedValueOnce(new Error('권한 변경 실패'));
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const promoteButtons = screen.getAllByText('관리자로');
+      fireEvent.click(promoteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('권한 변경 실패');
+      });
+    });
+  });
+
+  describe('delete', () => {
+    it('deletes a user when confirmed', async () => {
+      mockDeleteUser.mockResolvedValueOnce({});
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteUser).toHaveBeenCalledWith(2);
+      });
+      expect(mockToast.success).toHaveBeenCalledWith('player1 계정이 삭제되었습니다.');
+    });
+
+    it('does not delete when confirm is cancelled', async () => {
+      mockConfirmResult = false;
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockDeleteUser).not.toHaveBeenCalled();
+      });
+    });
+
+    it('shows toast on delete failure', async () => {
+      mockDeleteUser.mockRejectedValueOnce(new Error('삭제 실패'));
+      render(<UserAdmin />);
+      await screen.findByText('player1');
+
+      const deleteButtons = screen.getAllByText('삭제');
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+      });
+    });
+  });
+});

src/components/confirm/Confirm.css

@@ -0,0 +1,76 @@
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: confirm-fade-in 0.15s ease-out;
+}
+
+.confirm-dialog {
+  background: #3a3a3a;
+  border: 1px solid rgba(186, 205, 176, 0.15);
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 420px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  animation: confirm-scale-in 0.15s ease-out;
+}
+
+.confirm-message {
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.87);
+  line-height: 1.5;
+  margin: 0 0 20px 0;
+}
+
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.confirm-btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.2s;
+}
+
+.confirm-btn:hover {
+  opacity: 0.85;
+}
+
+.confirm-btn-cancel {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.confirm-btn-ok {
+  background: #BACDB0;
+  color: #2E2C2F;
+  font-weight: 600;
+}
+
+@keyframes confirm-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes confirm-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

src/components/confirm/ConfirmProvider.jsx

@@ -0,0 +1,46 @@
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { ConfirmContext } from './confirmContextValue';
+import './Confirm.css';
+
+export function ConfirmProvider({ children }) {
+  const [dialog, setDialog] = useState(null);
+  const resolveRef = useRef(null);
+
+  const confirm = useCallback((message) => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setDialog({ message });
+    });
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    resolveRef.current?.(true);
+    resolveRef.current = null;
+    setDialog(null);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    resolveRef.current?.(false);
+    resolveRef.current = null;
+    setDialog(null);
+  }, []);
+
+  const value = useMemo(() => confirm, [confirm]);
+
+  return (
+    <ConfirmContext.Provider value={value}>
+      {children}
+      {dialog && (
+        <div className="confirm-overlay" onClick={handleCancel}>
+          <div className="confirm-dialog" role="alertdialog" aria-modal="true" aria-label={dialog.message} onClick={(e) => e.stopPropagation()}>
+            <p className="confirm-message">{dialog.message}</p>
+            <div className="confirm-actions">
+              <button className="confirm-btn confirm-btn-cancel" onClick={handleCancel}>취소</button>
+              <button className="confirm-btn confirm-btn-ok" onClick={handleConfirm} autoFocus>확인</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </ConfirmContext.Provider>
+  );
+}

src/components/confirm/confirmContextValue.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ConfirmContext = createContext(null);

src/components/confirm/index.js

@@ -0,0 +1,2 @@
+export { ConfirmProvider } from './ConfirmProvider';
+export { useConfirm } from './useConfirm';

src/components/confirm/useConfirm.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ConfirmContext } from './confirmContextValue';
+
+export function useConfirm() {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) throw new Error('useConfirm must be used within ConfirmProvider');
+  return ctx;
+}