feat: 관리자 페이지 추가 (공지사항, 다운로드, 유저 관리)
- /admin 라우트 추가 (admin 권한 전용) - 공지사항 CRUD, 다운로드 정보 수정, 유저 권한/삭제 관리 - AuthContext에 role 추가 및 localStorage 저장 - 홈 헤더에 admin 링크 표시 (admin만 노출) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
200
src/components/admin/AdminCommon.css
Normal file
200
src/components/admin/AdminCommon.css
Normal file
@@ -0,0 +1,200 @@
|
||||
.admin-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.admin-section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(186, 205, 176, 0.12);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.admin-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(186, 205, 176, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.admin-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
border-color: rgba(186, 205, 176, 0.5);
|
||||
}
|
||||
|
||||
.admin-textarea {
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.admin-textarea:focus {
|
||||
border-color: rgba(186, 205, 176, 0.5);
|
||||
}
|
||||
|
||||
.admin-form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-admin-primary {
|
||||
padding: 10px 24px;
|
||||
background: #BACDB0;
|
||||
color: #2E2C2F;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-primary:hover { opacity: 0.9; }
|
||||
.btn-admin-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-admin-secondary {
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* List */
|
||||
.admin-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.admin-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.admin-list-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-list-title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-list-date {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-list-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-admin-edit {
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: rgba(186, 205, 176, 0.8);
|
||||
border: 1px solid rgba(186, 205, 176, 0.25);
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-edit:hover {
|
||||
background: rgba(186, 205, 176, 0.08);
|
||||
}
|
||||
|
||||
.btn-admin-delete {
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: rgba(229, 115, 115, 0.8);
|
||||
border: 1px solid rgba(229, 115, 115, 0.25);
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-delete:hover {
|
||||
background: rgba(229, 115, 115, 0.08);
|
||||
}
|
||||
|
||||
/* Role badge */
|
||||
.admin-role-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-role-badge.admin {
|
||||
background: rgba(186, 205, 176, 0.15);
|
||||
color: #BACDB0;
|
||||
}
|
||||
|
||||
.admin-role-badge.user {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
Reference in New Issue
Block a user