From eaa3319c5d3a58cdeb9347ebe639903952cf49a4 Mon Sep 17 00:00:00 2001 From: tolelom <98kimsungmin@naver.com> Date: Wed, 18 Mar 2026 16:44:04 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=20=EA=B0=9C=EC=84=A0=20+=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20+=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=EC=9E=90=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 에러 코드 기반 한국어 매핑 (8개 코드, parseError 개선) - window.confirm → 커스텀 ConfirmDialog (다크 테마, Promise 기반) - launch URL 파라미터 ticket → token 통일 - 관리자 테스트 27개 추가 (공지사항 12 + 다운로드 6 + 유저 9) Co-Authored-By: Claude Opus 4.6 (1M context) --- src/App.jsx | 5 +- src/api/client.js | 17 +- src/components/DownloadSection.jsx | 2 +- src/components/admin/AnnouncementAdmin.jsx | 6 +- .../admin/AnnouncementAdmin.test.jsx | 187 ++++++++++++++++++ src/components/admin/DownloadAdmin.jsx | 1 - src/components/admin/DownloadAdmin.test.jsx | 85 ++++++++ src/components/admin/UserAdmin.jsx | 9 +- src/components/admin/UserAdmin.test.jsx | 162 +++++++++++++++ src/components/confirm/Confirm.css | 76 +++++++ src/components/confirm/ConfirmProvider.jsx | 46 +++++ src/components/confirm/confirmContextValue.js | 3 + src/components/confirm/index.js | 2 + src/components/confirm/useConfirm.js | 8 + 14 files changed, 597 insertions(+), 12 deletions(-) create mode 100644 src/components/admin/AnnouncementAdmin.test.jsx create mode 100644 src/components/admin/DownloadAdmin.test.jsx create mode 100644 src/components/admin/UserAdmin.test.jsx create mode 100644 src/components/confirm/Confirm.css create mode 100644 src/components/confirm/ConfirmProvider.jsx create mode 100644 src/components/confirm/confirmContextValue.js create mode 100644 src/components/confirm/index.js create mode 100644 src/components/confirm/useConfirm.js 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; +}