diff --git a/src/App.jsx b/src/App.jsx
index d6ef0cb..be19e71 100644
--- a/src/App.jsx
+++ b/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() {
-
+
+
+
diff --git a/src/api/client.js b/src/api/client.js
index 8c1479f..b3a60a1 100644
--- a/src/api/client.js
+++ b/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;
}
diff --git a/src/components/DownloadSection.jsx b/src/components/DownloadSection.jsx
index 5eac29b..9a7360d 100644
--- a/src/components/DownloadSection.jsx
+++ b/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');
diff --git a/src/components/admin/AnnouncementAdmin.jsx b/src/components/admin/AnnouncementAdmin.jsx
index 51b4bbf..6fbcbc0 100644
--- a/src/components/admin/AnnouncementAdmin.jsx
+++ b/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 (!confirm('삭제하시겠습니까?')) return;
+ if (!(await confirm('삭제하시겠습니까?'))) return;
try {
await deleteAnnouncement(id);
toast.success('공지사항이 삭제되었습니다.');
diff --git a/src/components/admin/AnnouncementAdmin.test.jsx b/src/components/admin/AnnouncementAdmin.test.jsx
new file mode 100644
index 0000000..618d142
--- /dev/null
+++ b/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();
+ 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();
+ expect(await screen.findByText('공지사항을 불러오지 못했습니다.')).toBeInTheDocument();
+ expect(screen.getByText('다시 시도')).toBeInTheDocument();
+ });
+
+ it('retries loading when "다시 시도" is clicked', async () => {
+ mockGetAnnouncements.mockRejectedValueOnce(new Error('fail'));
+ render();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ await screen.findByText('점검 안내');
+
+ const deleteButtons = screen.getAllByText('삭제');
+ fireEvent.click(deleteButtons[0]);
+
+ await waitFor(() => {
+ expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+ });
+ });
+ });
+});
diff --git a/src/components/admin/DownloadAdmin.jsx b/src/components/admin/DownloadAdmin.jsx
index 727c85d..dec0b2b 100644
--- a/src/components/admin/DownloadAdmin.jsx
+++ b/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';
diff --git a/src/components/admin/DownloadAdmin.test.jsx b/src/components/admin/DownloadAdmin.test.jsx
new file mode 100644
index 0000000..a08c188
--- /dev/null
+++ b/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();
+ 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();
+ expect(await screen.findByText('배포 정보를 불러올 수 없습니다.')).toBeInTheDocument();
+ expect(screen.getByText('다시 시도')).toBeInTheDocument();
+ });
+
+ it('retries loading on "다시 시도" click', async () => {
+ mockGetDownloadInfo.mockRejectedValueOnce(new Error('fail'));
+ render();
+ 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();
+ 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();
+ await screen.findByText('8 MB');
+ });
+
+ it('displays SHA256 hash prefix', async () => {
+ render();
+ expect(await screen.findByText(/SHA256: abc123def456/)).toBeInTheDocument();
+ });
+});
diff --git a/src/components/admin/UserAdmin.jsx b/src/components/admin/UserAdmin.jsx
index 8eafda3..dfa13f9 100644
--- a/src/components/admin/UserAdmin.jsx
+++ b/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 (!confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`)) return;
+ if (!(await 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 (!confirm(`${u.username} 계정을 삭제하시겠습니까?`)) return;
+ if (!(await confirm(`${u.username} 계정을 삭제하시겠습니까?`))) return;
try {
await deleteUser(u.id);
toast.success(`${u.username} 계정이 삭제되었습니다.`);
diff --git a/src/components/admin/UserAdmin.test.jsx b/src/components/admin/UserAdmin.test.jsx
new file mode 100644
index 0000000..cfabbdc
--- /dev/null
+++ b/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();
+ 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();
+ expect(await screen.findByText('유저 목록을 불러올 수 없습니다.')).toBeInTheDocument();
+ });
+
+ it('does not show action buttons for the current user', async () => {
+ render();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ 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();
+ await screen.findByText('player1');
+
+ const deleteButtons = screen.getAllByText('삭제');
+ fireEvent.click(deleteButtons[0]);
+
+ await waitFor(() => {
+ expect(mockToast.error).toHaveBeenCalledWith('삭제 실패');
+ });
+ });
+ });
+});
diff --git a/src/components/confirm/Confirm.css b/src/components/confirm/Confirm.css
new file mode 100644
index 0000000..d676896
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/confirm/ConfirmProvider.jsx b/src/components/confirm/ConfirmProvider.jsx
new file mode 100644
index 0000000..65a5601
--- /dev/null
+++ b/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 (
+
+ {children}
+ {dialog && (
+
+
e.stopPropagation()}>
+
{dialog.message}
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/confirm/confirmContextValue.js b/src/components/confirm/confirmContextValue.js
new file mode 100644
index 0000000..947b29a
--- /dev/null
+++ b/src/components/confirm/confirmContextValue.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ConfirmContext = createContext(null);
diff --git a/src/components/confirm/index.js b/src/components/confirm/index.js
new file mode 100644
index 0000000..3d6d67e
--- /dev/null
+++ b/src/components/confirm/index.js
@@ -0,0 +1,2 @@
+export { ConfirmProvider } from './ConfirmProvider';
+export { useConfirm } from './useConfirm';
diff --git a/src/components/confirm/useConfirm.js b/src/components/confirm/useConfirm.js
new file mode 100644
index 0000000..7f4d33d
--- /dev/null
+++ b/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;
+}