A301/a301_client
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ErrorBoundary 개선 + admin CSS 모듈화

Browse Source 
- ErrorBoundary에 에러 유형/메시지 표시 + 다시 시도/새로고침 버튼 추가
- admin 컴포넌트 CSS Modules 전환 (클래스명 충돌 방지)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
tolelom
2026-03-18 16:59:11 +09:00
parent eaa3319c5d
commit 2cea340163
8 changed files with 282 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/ErrorBoundary.css Normal file
View File

@@ -0,0 +1,99 @@
.error-boundary {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
background-color: #2E2C2F;
}
.error-boundary-card {
text-align: center;
max-width: 440px;
padding: 40px 32px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}
.error-boundary-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
border-radius: 50%;
background: rgba(229, 115, 115, 0.12);
color: rgba(229, 115, 115, 0.9);
font-size: 1.5rem;
font-weight: 700;
line-height: 56px;
}
.error-boundary-title {
font-size: 1.25rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 8px 0;
}
.error-boundary-desc {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 20px 0;
}
.error-boundary-detail {
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
margin-bottom: 24px;
text-align: left;
}
.error-boundary-type {
font-size: 0.75rem;
font-weight: 600;
color: rgba(229, 115, 115, 0.8);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.error-boundary-message {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin: 6px 0 0 0;
word-break: break-word;
font-family: monospace;
}
.error-boundary-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.error-boundary-btn {
padding: 10px 24px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
border: none;
transition: opacity 0.2s;
}
.error-boundary-btn:hover {
opacity: 0.85;
}
.error-boundary-btn-primary {
background: #BACDB0;
color: #2E2C2F;
font-weight: 600;
}
.error-boundary-btn-secondary {
background: transparent;
color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.15);
}

43
src/components/ErrorBoundary.jsx
View File

@@ -1,31 +1,54 @@
import { Component } from 'react'; import { Component } from 'react';
import './ErrorBoundary.css';
export default class ErrorBoundary extends Component { export default class ErrorBoundary extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { hasError: false }; this.state = { hasError: false, error: null };
} }
static getDerivedStateFromError() { static getDerivedStateFromError(error) {
return { hasError: true }; return { hasError: true, error };
} }
componentDidCatch(error, errorInfo) { componentDidCatch(error, errorInfo) {
console.error('Uncaught error:', error, errorInfo); console.error('Uncaught error:', error, errorInfo);
} }
handleRetry = () => {
this.setState({ hasError: false, error: null });
};
render() { render() {
if (this.state.hasError) { if (this.state.hasError) {
const { error } = this.state;
const errorType = error?.name || 'Error';
const errorMessage = error?.message || '알 수 없는 오류가 발생했습니다.';
return ( return (
<div style={{ padding: '2rem', textAlign: 'center', color: '#ccc' }}> <div className="error-boundary">
<h2>문제가 발생했습니다</h2> <div className="error-boundary-card">
<p>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.</p> <div className="error-boundary-icon">!</div>
<button onClick={() => window.location.reload()} style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}> <h2 className="error-boundary-title">문제가 발생했습니다</h2>
새로고침 <p className="error-boundary-desc">
</button> 예기치 않은 오류로 페이지를 표시할 수 없습니다.
</p>
<div className="error-boundary-detail">
<span className="error-boundary-type">{errorType}</span>
<p className="error-boundary-message">{errorMessage}</p>
</div>
<div className="error-boundary-actions">
<button className="error-boundary-btn error-boundary-btn-primary" onClick={this.handleRetry}>
다시 시도
</button>
<button className="error-boundary-btn error-boundary-btn-secondary" onClick={() => window.location.reload()}>
새로고침
</button>
</div>
</div>
</div> </div>
); );
} }
return this.props.children; return this.props.children;
} }
} }

130
src/components/admin/AdminCommon.css → src/components/admin/AdminCommon.module.css
View File

@@ -1,10 +1,10 @@
.admin-section { .section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
} }
.admin-section-title { .sectionTitle {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
@@ -14,7 +14,7 @@
} }
/* Form */ /* Form */
.admin-form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@@ -24,18 +24,18 @@
border-radius: 10px; border-radius: 10px;
} }
.admin-field { .field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
} }
.admin-label { .label {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.admin-input { .input {
padding: 10px 14px; padding: 10px 14px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(186, 205, 176, 0.15); border: 1px solid rgba(186, 205, 176, 0.15);
@@ -46,11 +46,11 @@
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.admin-input:focus { .input:focus {
border-color: rgba(186, 205, 176, 0.5); border-color: rgba(186, 205, 176, 0.5);
} }
.admin-textarea { .textarea {
padding: 10px 14px; padding: 10px 14px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(186, 205, 176, 0.15); border: 1px solid rgba(186, 205, 176, 0.15);
@@ -63,24 +63,24 @@
font-family: inherit; font-family: inherit;
} }
.admin-textarea:focus { .textarea:focus {
border-color: rgba(186, 205, 176, 0.5); border-color: rgba(186, 205, 176, 0.5);
} }
.admin-error { .error {
font-size: 0.85rem; font-size: 0.85rem;
color: rgba(229, 115, 115, 0.9); color: rgba(229, 115, 115, 0.9);
margin: 0; margin: 0;
} }
.admin-form-actions { .formActions {
display: flex; display: flex;
gap: 8px; gap: 8px;
margin-top: 4px; margin-top: 4px;
} }
/* Buttons */ /* Buttons */
.btn-admin-primary { .btnPrimary {
padding: 10px 24px; padding: 10px 24px;
background: #BACDB0; background: #BACDB0;
color: #2E2C2F; color: #2E2C2F;
@@ -92,10 +92,10 @@
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.btn-admin-primary:hover { opacity: 0.9; } .btnPrimary:hover { opacity: 0.9; }
.btn-admin-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btnPrimary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-admin-secondary { .btnSecondary {
padding: 10px 20px; padding: 10px 20px;
background: transparent; background: transparent;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@@ -106,12 +106,12 @@
transition: background 0.2s; transition: background 0.2s;
} }
.btn-admin-secondary:hover { .btnSecondary:hover {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
} }
/* List */ /* List */
.admin-list { .list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -120,7 +120,7 @@
gap: 4px; gap: 4px;
} }
.admin-list-item { .listItem {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -130,14 +130,14 @@
border-radius: 8px; border-radius: 8px;
} }
.admin-list-info { .listInfo {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
min-width: 0; min-width: 0;
} }
.admin-list-title { .listTitle {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
white-space: nowrap; white-space: nowrap;
@@ -145,19 +145,19 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.admin-list-date { .listDate {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
flex-shrink: 0; flex-shrink: 0;
} }
.admin-list-actions { .listActions {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-shrink: 0; flex-shrink: 0;
} }
.btn-admin-edit { .btnEdit {
padding: 6px 14px; padding: 6px 14px;
background: transparent; background: transparent;
color: rgba(186, 205, 176, 0.8); color: rgba(186, 205, 176, 0.8);
@@ -168,11 +168,11 @@
transition: background 0.2s; transition: background 0.2s;
} }
.btn-admin-edit:hover { .btnEdit:hover {
background: rgba(186, 205, 176, 0.08); background: rgba(186, 205, 176, 0.08);
} }
.btn-admin-delete { .btnDelete {
padding: 6px 14px; padding: 6px 14px;
background: transparent; background: transparent;
color: rgba(229, 115, 115, 0.8); color: rgba(229, 115, 115, 0.8);
@@ -183,25 +183,25 @@
transition: background 0.2s; transition: background 0.2s;
} }
.btn-admin-delete:hover { .btnDelete:hover {
background: rgba(229, 115, 115, 0.08); background: rgba(229, 115, 115, 0.08);
} }
/* Deploy block */ /* Deploy block */
.admin-deploy-block { .deployBlock {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.admin-deploy-header { .deployHeader {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.admin-deploy-label { .deployLabel {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@@ -210,32 +210,32 @@
} }
/* File input */ /* File input */
.admin-input-file { .inputFile {
padding: 8px 0; padding: 8px 0;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
} }
.admin-input-file:disabled { .inputFile:disabled {
opacity: 0.4; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
} }
/* Field hint */ /* Field hint */
.admin-field-hint { .fieldHint {
font-size: 0.75rem; font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
} }
/* Upload progress */ /* Upload progress */
.admin-upload-progress { .uploadProgress {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.admin-upload-bar { .uploadBar {
flex: 1; flex: 1;
height: 6px; height: 6px;
background: #BACDB0; background: #BACDB0;
@@ -243,7 +243,7 @@
transition: width 0.2s; transition: width 0.2s;
} }
.admin-upload-pct { .uploadPct {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
min-width: 36px; min-width: 36px;
@@ -251,7 +251,7 @@
} }
/* Current build info */ /* Current build info */
.admin-current-build { .currentBuild {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
@@ -261,13 +261,13 @@
border-radius: 8px; border-radius: 8px;
} }
.admin-meta-row { .metaRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
} }
.admin-meta-item { .metaItem {
font-size: 0.78rem; font-size: 0.78rem;
color: rgba(186, 205, 176, 0.8); color: rgba(186, 205, 176, 0.8);
background: rgba(186, 205, 176, 0.08); background: rgba(186, 205, 176, 0.08);
@@ -276,85 +276,101 @@
border: 1px solid rgba(186, 205, 176, 0.15); border: 1px solid rgba(186, 205, 176, 0.15);
} }
.admin-meta-hash { .metaHash {
composes: metaItem;
font-family: monospace; font-family: monospace;
cursor: help; cursor: help;
} }
/* Role badge */ /* Role badge */
.admin-list-empty { .listEmpty {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.35);
padding: 12px 16px; padding: 12px 16px;
margin: 0; margin: 0;
} }
.admin-role-badge { .roleBadge {
font-size: 0.7rem; font-size: 0.7rem;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
font-weight: 600; font-weight: 600;
} }
.admin-role-badge.admin { .roleBadgeAdmin {
composes: roleBadge;
background: rgba(186, 205, 176, 0.15); background: rgba(186, 205, 176, 0.15);
color: #BACDB0; color: #BACDB0;
} }
.admin-role-badge.user { .roleBadgeUser {
composes: roleBadge;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
} }
.errorBlock {
display: flex;
flex-direction: column;
gap: 8px;
}
.loading {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.35);
padding: 12px 16px;
margin: 0;
}
/* Mobile responsive */ /* Mobile responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.admin-form { .form {
padding: 16px 12px; padding: 16px 12px;
} }
.admin-input, .input,
.admin-textarea { .textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.admin-list-item { .listItem {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
padding: 10px 12px; padding: 10px 12px;
} }
.admin-list-info { .listInfo {
width: 100%; width: 100%;
} }
.admin-list-actions { .listActions {
width: 100%; width: 100%;
justify-content: flex-end; justify-content: flex-end;
} }
.admin-form-actions { .formActions {
flex-direction: column; flex-direction: column;
} }
.admin-form-actions button { .formActions button {
width: 100%; width: 100%;
min-height: 44px; min-height: 44px;
} }
.btn-admin-primary, .btnPrimary,
.btn-admin-secondary, .btnSecondary,
.btn-admin-edit, .btnEdit,
.btn-admin-delete { .btnDelete {
min-height: 44px; min-height: 44px;
} }
.admin-meta-row { .metaRow {
flex-direction: column; flex-direction: column;
} }
.admin-deploy-header { .deployHeader {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }

50
src/components/admin/AnnouncementAdmin.jsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements'; import { getAnnouncements, createAnnouncement, updateAnnouncement, deleteAnnouncement } from '../../api/announcements';
import { useToast } from '../toast/useToast'; import { useToast } from '../toast/useToast';
import { useConfirm } from '../confirm/useConfirm'; import { useConfirm } from '../confirm/useConfirm';
import './AdminCommon.css'; import s from './AdminCommon.module.css';
export default function AnnouncementAdmin() { export default function AnnouncementAdmin() {
const toast = useToast(); const toast = useToast();
@@ -77,30 +77,30 @@ export default function AnnouncementAdmin() {
if (fetchLoading) { if (fetchLoading) {
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">공지사항 관리</h2> <h2 className={s.sectionTitle}>공지사항 관리</h2>
<p className="admin-loading">불러오는 중...</p> <p className={s.loading}>불러오는 중...</p>
</div> </div>
); );
} }
if (fetchError) { if (fetchError) {
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">공지사항 관리</h2> <h2 className={s.sectionTitle}>공지사항 관리</h2>
<p className="admin-error">{fetchError}</p> <p className={s.error}>{fetchError}</p>
<button className="btn-admin-secondary" onClick={load}>다시 시도</button> <button className={s.btnSecondary} onClick={load}>다시 시도</button>
</div> </div>
); );
} }
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">공지사항 관리</h2> <h2 className={s.sectionTitle}>공지사항 관리</h2>
<form className="admin-form" onSubmit={handleSubmit}> <form className={s.form} onSubmit={handleSubmit}>
<input <input
className="admin-input" className={s.input}
placeholder="제목" placeholder="제목"
value={form.title} value={form.title}
onChange={(e) => setForm({ ...form, title: e.target.value })} onChange={(e) => setForm({ ...form, title: e.target.value })}
@@ -108,7 +108,7 @@ export default function AnnouncementAdmin() {
aria-label="공지사항 제목" aria-label="공지사항 제목"
/> />
<textarea <textarea
className="admin-textarea" className={s.textarea}
placeholder="내용" placeholder="내용"
rows={4} rows={4}
value={form.content} value={form.content}
@@ -116,29 +116,29 @@ export default function AnnouncementAdmin() {
maxLength={10000} maxLength={10000}
aria-label="공지사항 내용" aria-label="공지사항 내용"
/> />
{error && <p className="admin-error">{error}</p>} {error && <p className={s.error}>{error}</p>}
<div className="admin-form-actions"> <div className={s.formActions}>
<button className="btn-admin-primary" type="submit" disabled={loading}> <button className={s.btnPrimary} type="submit" disabled={loading}>
{editingId ? '수정 완료' : '공지 등록'} {editingId ? '수정 완료' : '공지 등록'}
</button> </button>
{editingId && ( {editingId && (
<button className="btn-admin-secondary" type="button" onClick={handleCancel}> <button className={s.btnSecondary} type="button" onClick={handleCancel}>
취소 취소
</button> </button>
)} )}
</div> </div>
</form> </form>
<ul className="admin-list"> <ul className={s.list}>
{list.map((item) => ( {list.map((item) => (
<li key={item.id} className="admin-list-item"> <li key={item.id} className={s.listItem}>
<div className="admin-list-info"> <div className={s.listInfo}>
<span className="admin-list-title">{item.title}</span> <span className={s.listTitle}>{item.title}</span>
<span className="admin-list-date">{item.createdAt?.slice(0, 10)}</span> <span className={s.listDate}>{item.createdAt?.slice(0, 10)}</span>
</div> </div>
<div className="admin-list-actions"> <div className={s.listActions}>
<button className="btn-admin-edit" onClick={() => handleEdit(item)}>수정</button> <button className={s.btnEdit} onClick={() => handleEdit(item)}>수정</button>
<button className="btn-admin-delete" onClick={() => handleDelete(item.id)}>삭제</button> <button className={s.btnDelete} onClick={() => handleDelete(item.id)}>삭제</button>
</div> </div>
</li> </li>
))} ))}

46
src/components/admin/DownloadAdmin.jsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { getDownloadInfo } from '../../api/download'; import { getDownloadInfo } from '../../api/download';
import { useToast } from '../toast/useToast'; import { useToast } from '../toast/useToast';
import UploadForm from './UploadForm'; import UploadForm from './UploadForm';
import './AdminCommon.css'; import s from './AdminCommon.module.css';
export default function DownloadAdmin() { export default function DownloadAdmin() {
const toast = useToast(); const toast = useToast();
@@ -31,34 +31,34 @@ export default function DownloadAdmin() {
if (loading) { if (loading) {
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">게임 배포 관리</h2> <h2 className={s.sectionTitle}>게임 배포 관리</h2>
<p className="admin-loading">불러오는 중...</p> <p className={s.loading}>불러오는 중...</p>
</div> </div>
); );
} }
if (loadError) { if (loadError) {
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">게임 배포 관리</h2> <h2 className={s.sectionTitle}>게임 배포 관리</h2>
<p className="admin-error">{loadError}</p> <p className={s.error}>{loadError}</p>
<button className="btn-admin-secondary" onClick={load}>다시 시도</button> <button className={s.btnSecondary} onClick={load}>다시 시도</button>
</div> </div>
); );
} }
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">게임 배포 관리</h2> <h2 className={s.sectionTitle}>게임 배포 관리</h2>
{/* 런처 섹션 */} {/* 런처 섹션 */}
<div className="admin-deploy-block"> <div className={s.deployBlock}>
<div className="admin-deploy-header"> <div className={s.deployHeader}>
<span className="admin-deploy-label">런처</span> <span className={s.deployLabel}>런처</span>
{info?.launcherUrl && ( {info?.launcherUrl && (
<div className="admin-meta-row"> <div className={s.metaRow}>
{info.launcherSize && <span className="admin-meta-item">{info.launcherSize}</span>} {info.launcherSize && <span className={s.metaItem}>{info.launcherSize}</span>}
</div> </div>
)} )}
</div> </div>
@@ -72,16 +72,16 @@ export default function DownloadAdmin() {
</div> </div>
{/* 게임 섹션 */} {/* 게임 섹션 */}
<div className="admin-deploy-block"> <div className={s.deployBlock}>
<div className="admin-deploy-header"> <div className={s.deployHeader}>
<span className="admin-deploy-label">게임</span> <span className={s.deployLabel}>게임</span>
{info?.url && ( {info?.url && (
<div className="admin-meta-row"> <div className={s.metaRow}>
{info.version && <span className="admin-meta-item">{info.version}</span>} {info.version && <span className={s.metaItem}>{info.version}</span>}
{info.fileName && <span className="admin-meta-item">{info.fileName}</span>} {info.fileName && <span className={s.metaItem}>{info.fileName}</span>}
{info.fileSize && <span className="admin-meta-item">{info.fileSize}</span>} {info.fileSize && <span className={s.metaItem}>{info.fileSize}</span>}
{info.fileHash && ( {info.fileHash && (
<span className="admin-meta-item admin-meta-hash" title={info.fileHash}> <span className={s.metaHash} title={info.fileHash}>
SHA256: {info.fileHash.slice(0, 12)}... SHA256: {info.fileHash.slice(0, 12)}...
</span> </span>
)} )}

23
src/components/admin/UploadForm.jsx
View File

@@ -1,6 +1,7 @@
import { useState, useRef } from 'react'; import { useState, useRef } from 'react';
import { apiUpload } from '../../api/client'; import { apiUpload } from '../../api/client';
import { useToast } from '../toast/useToast'; import { useToast } from '../toast/useToast';
import s from './AdminCommon.module.css';
export default function UploadForm({ title, hint, accept, endpoint, onSuccess }) { export default function UploadForm({ title, hint, accept, endpoint, onSuccess }) {
const toast = useToast(); const toast = useToast();
@@ -62,31 +63,31 @@ export default function UploadForm({ title, hint, accept, endpoint, onSuccess })
}; };
return ( return (
<form className="admin-form" onSubmit={handleUpload}> <form className={s.form} onSubmit={handleUpload}>
<div className="admin-field"> <div className={s.field}>
<label className="admin-label">{title}</label> <label className={s.label}>{title}</label>
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
accept={accept} accept={accept}
className="admin-input-file" className={s.inputFile}
onChange={handleFileChange} onChange={handleFileChange}
disabled={uploading} disabled={uploading}
/> />
<span className="admin-field-hint">{hint}</span> <span className={s.fieldHint}>{hint}</span>
</div> </div>
{uploading && ( {uploading && (
<div className="admin-upload-progress"> <div className={s.uploadProgress}>
<div className="admin-upload-bar" style={{ width: `${progress}%` }} /> <div className={s.uploadBar} style={{ width: `${progress}%` }} />
<span className="admin-upload-pct">{progress}%</span> <span className={s.uploadPct}>{progress}%</span>
</div> </div>
)} )}
{error && <p className="admin-error">{error}</p>} {error && <p className={s.error}>{error}</p>}
<div className="admin-form-actions"> <div className={s.formActions}>
<button className="btn-admin-primary" type="submit" disabled={uploading || !file}> <button className={s.btnPrimary} type="submit" disabled={uploading || !file}>
{uploading ? `업로드 중... (${progress}%)` : '업로드'} {uploading ? `업로드 중... (${progress}%)` : '업로드'}
</button> </button>
</div> </div>

32
src/components/admin/UserAdmin.jsx
View File

@@ -3,7 +3,7 @@ import { getUsers, updateUserRole, deleteUser } from '../../api/users';
import { useAuth } from '../../context/useAuth'; import { useAuth } from '../../context/useAuth';
import { useToast } from '../toast/useToast'; import { useToast } from '../toast/useToast';
import { useConfirm } from '../confirm/useConfirm'; import { useConfirm } from '../confirm/useConfirm';
import './AdminCommon.css'; import s from './AdminCommon.module.css';
export default function UserAdmin() { export default function UserAdmin() {
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
@@ -51,29 +51,29 @@ export default function UserAdmin() {
}; };
return ( return (
<div className="admin-section"> <div className={s.section}>
<h2 className="admin-section-title">유저 관리</h2> <h2 className={s.sectionTitle}>유저 관리</h2>
{fetchError && ( {fetchError && (
<div className="admin-error-block"> <div className={s.errorBlock}>
<p className="admin-error">유저 목록을 불러올 수 없습니다.</p> <p className={s.error}>유저 목록을 불러올 수 없습니다.</p>
<button className="btn-admin-secondary" onClick={load}>다시 시도</button> <button className={s.btnSecondary} onClick={load}>다시 시도</button>
</div> </div>
)} )}
{loading && <p className="admin-list-empty">불러오는 중...</p>} {loading && <p className={s.listEmpty}>불러오는 중...</p>}
{!loading && users.length === 0 && <p className="admin-list-empty">등록된 유저가 없습니다.</p>} {!loading && users.length === 0 && <p className={s.listEmpty}>등록된 유저가 없습니다.</p>}
<ul className="admin-list"> <ul className={s.list}>
{users.map((u) => ( {users.map((u) => (
<li key={u.id} className="admin-list-item"> <li key={u.id} className={s.listItem}>
<div className="admin-list-info"> <div className={s.listInfo}>
<span className="admin-list-title">{u.username}</span> <span className={s.listTitle}>{u.username}</span>
<span className={`admin-role-badge ${u.role}`}>{u.role}</span> <span className={u.role === 'admin' ? s.roleBadgeAdmin : s.roleBadgeUser}>{u.role}</span>
</div> </div>
{u.username !== me?.username && ( {u.username !== me?.username && (
<div className="admin-list-actions"> <div className={s.listActions}>
<button className="btn-admin-edit" onClick={() => handleRoleToggle(u)}> <button className={s.btnEdit} onClick={() => handleRoleToggle(u)}>
{u.role === 'admin' ? '일반으로' : '관리자로'} {u.role === 'admin' ? '일반으로' : '관리자로'}
</button> </button>
<button className="btn-admin-delete" onClick={() => handleDelete(u)}>삭제</button> <button className={s.btnDelete} onClick={() => handleDelete(u)}>삭제</button>
</div> </div>
)} )}
</li> </li>

3
src/components/admin/UserAdmin.test.jsx
View File

@@ -63,8 +63,7 @@ describe('UserAdmin', () => {
// admin1 row should not have edit/delete buttons // admin1 row should not have edit/delete buttons
const listItems = screen.getAllByRole('listitem'); const listItems = screen.getAllByRole('listitem');
const admin1Item = listItems.find((li) => li.textContent.includes('admin1')); const admin1Item = listItems.find((li) => li.textContent.includes('admin1'));
expect(admin1Item.querySelector('.btn-admin-edit')).toBeNull(); expect(admin1Item.querySelector('button')).toBeNull();
expect(admin1Item.querySelector('.btn-admin-delete')).toBeNull();
}); });
it('shows role badge for each user', async () => { it('shows role badge for each user', async () => {