pricelees/roomescape-refactored
1
0
Fork 0
generated from pricelees/issue-pr-template
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 테마 API에서의 변경 사항 및 HQ / STORE에 따른 어드민 페이지 프론트엔드 반영

Browse Source
This commit is contained in:
이상진 2025-09-15 14:37:58 +09:00
parent 78baa271bb
commit b839c76a65
14 changed files with 285 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/apiClient.ts
View File

@ -48,7 +48,6 @@ async function request<T>(
},
};
const accessToken = localStorage.getItem('accessToken');
if (accessToken) {
if (!config.headers) {
@ -57,7 +56,6 @@ async function request<T>(
config.headers['Authorization'] = `Bearer ${accessToken}`;
}
if (method.toUpperCase() !== 'GET') {
config.data = data;
}

4
frontend/src/api/common/commonTypes.ts Normal file
View File

@ -0,0 +1,4 @@
export interface OperatorInfo {
id: string;
name: string;
}

6
frontend/src/api/schedule/scheduleAPI.ts
View File

@ -8,15 +8,15 @@ import type {
ScheduleUpdateRequest
} from './scheduleTypes';
export const findAvailableThemesByDate = async (date: string): Promise<AvailableThemeIdListResponse> => {
export const fetchAvailableThemesByDate = async (date: string): Promise<AvailableThemeIdListResponse> => {
return await apiClient.get<AvailableThemeIdListResponse>(`/schedules/themes?date=${date}`);
};
export const findSchedules = async (date: string, themeId: string): Promise<ScheduleRetrieveListResponse> => {
export const fetchSchedulesByDateAndTheme = async (date: string, themeId: string): Promise<ScheduleRetrieveListResponse> => {
return await apiClient.get<ScheduleRetrieveListResponse>(`/schedules?date=${date}&themeId=${themeId}`);
};
export const findScheduleById = async (id: string): Promise<ScheduleDetailRetrieveResponse> => {
export const fetchScheduleById = async (id: string): Promise<ScheduleDetailRetrieveResponse> => {
return await apiClient.get<ScheduleDetailRetrieveResponse>(`/schedules/${id}`);
}

6
frontend/src/api/schedule/scheduleTypes.ts
View File

@ -1,3 +1,5 @@
import type { OperatorInfo } from '@_api/common/commonTypes';
export type ScheduleStatus = 'AVAILABLE' | 'HOLD' | 'RESERVED' | 'BLOCKED';
export const ScheduleStatus = {
@ -44,7 +46,7 @@ export interface ScheduleDetailRetrieveResponse {
time: string; // "HH:mm"
status: ScheduleStatus;
createdAt: string; // or Date
createdBy: string;
createdBy: OperatorInfo;
updatedAt: string; // or Date
updatedBy: string;
updatedBy: OperatorInfo;
}

16
frontend/src/api/theme/themeAPI.ts
View File

@ -2,10 +2,12 @@ import apiClient from '@_api/apiClient';
import type {
AdminThemeDetailRetrieveResponse,
AdminThemeSummaryRetrieveListResponse,
SimpleActiveThemeListResponse,
ThemeCreateRequest,
ThemeCreateResponse,
ThemeIdListResponse,
ThemeInfoListResponse,
ThemeInfoResponse,
ThemeUpdateRequest
} from './themeTypes';
@ -29,10 +31,14 @@ export const deleteTheme = async (id: string): Promise<void> => {
await apiClient.del<any>(`/admin/themes/${id}`);
};
export const fetchUserThemes = async (): Promise<ThemeInfoListResponse> => {
return await apiClient.get<ThemeInfoListResponse>('/themes');
};
export const findThemesByIds = async (request: ThemeIdListResponse): Promise<ThemeInfoListResponse> => {
export const fetchThemesByIds = async (request: ThemeIdListResponse): Promise<ThemeInfoListResponse> => {
return await apiClient.post<ThemeInfoListResponse>('/themes/batch', request);
};
export const fetchThemeById = async (id: string): Promise<ThemeInfoResponse> => {
return await apiClient.get<ThemeInfoResponse>(`/themes/${id}`);
}
export const fetchActiveThemes = async (): Promise<SimpleActiveThemeListResponse> => {
return await apiClient.get<SimpleActiveThemeListResponse>('/admin/themes/active');
};

49
frontend/src/api/theme/themeTypes.ts
View File

@ -1,3 +1,5 @@
import type { OperatorInfo } from '@_api/common/commonTypes';
export interface AdminThemeDetailResponse {
id: string;
name: string;
@ -10,11 +12,11 @@ export interface AdminThemeDetailResponse {
availableMinutes: number;
expectedMinutesFrom: number;
expectedMinutesTo: number;
isOpen: boolean;
isActive: boolean;
createDate: string; // Assuming ISO string format
updatedDate: string; // Assuming ISO string format
createdBy: string;
updatedBy: string;
createdBy: OperatorInfo;
updatedBy: OperatorInfo;
}
export interface ThemeCreateRequest {
@ -28,7 +30,7 @@ export interface ThemeCreateRequest {
availableMinutes: number;
expectedMinutesFrom: number;
expectedMinutesTo: number;
isOpen: boolean;
isActive: boolean;
}
export interface ThemeCreateResponse {
@ -43,10 +45,11 @@ export interface ThemeUpdateRequest {
price?: number;
minParticipants?: number;
maxParticipants?: number;
availableMinutes?: number;
expectedMinutesFrom?: number;
expectedMinutesTo?: number;
isOpen?: boolean;
isActive?: boolean;
}
export interface AdminThemeSummaryRetrieveResponse {
@ -54,7 +57,7 @@ export interface AdminThemeSummaryRetrieveResponse {
name: string;
difficulty: Difficulty;
price: number;
isOpen: boolean;
isActive: boolean;
}
export interface AdminThemeSummaryRetrieveListResponse {
@ -73,11 +76,11 @@ export interface AdminThemeDetailRetrieveResponse {
availableMinutes: number;
expectedMinutesFrom: number;
expectedMinutesTo: number;
isOpen: boolean;
isActive: boolean;
createdAt: string; // LocalDateTime in Kotlin, map to string (ISO format)
createdBy: string;
createdBy: OperatorInfo;
updatedAt: string; // LocalDateTime in Kotlin, map to string (ISO format)
updatedBy: string;
updatedBy: OperatorInfo;
}
export interface ThemeInfoResponse {
@ -102,18 +105,34 @@ export interface ThemeIdListResponse {
themeIds: string[];
}
// @ts-ignore
export enum Difficulty {
VERY_EASY = '매우 쉬움',
EASY = '쉬움',
NORMAL = '보통',
HARD = '어려움',
VERY_HARD = '매우 어려움',
VERY_EASY = 'VERY_EASY',
EASY = 'EASY',
NORMAL = 'NORMAL',
HARD = 'HARD',
VERY_HARD = 'VERY_HARD',
}
export const DifficultyKoreanMap: Record<Difficulty, string> = {
[Difficulty.VERY_EASY]: '매우 쉬움',
[Difficulty.EASY]: '쉬움',
[Difficulty.NORMAL]: '보통',
[Difficulty.HARD]: '어려움',
[Difficulty.VERY_HARD]: '매우 어려움',
};
export function mapThemeResponse(res: any): ThemeInfoResponse {
return {
...res,
difficulty: Difficulty[res.difficulty as keyof typeof Difficulty],
}
}
export interface SimpleActiveThemeResponse {
id: string;
name: string;
}
export interface SimpleActiveThemeListResponse {
themes: SimpleActiveThemeResponse[];
}

6
frontend/src/context/AdminAuthContext.tsx
View File

@ -27,7 +27,7 @@ export const AdminAuthProvider: React.FC<{ children: ReactNode }> = ({ children
useEffect(() => {
try {
const token = localStorage.getItem('adminAccessToken');
const token = localStorage.getItem('accessToken');
const storedName = localStorage.getItem('adminName');
const storedType = localStorage.getItem('adminType') as AdminType | null;
const storedStoreId = localStorage.getItem('adminStoreId');
@ -48,7 +48,7 @@ export const AdminAuthProvider: React.FC<{ children: ReactNode }> = ({ children
const login = async (data: Omit<LoginRequest, 'principalType'>) => {
const response = await apiLogin(data);
localStorage.setItem('adminAccessToken', response.accessToken);
localStorage.setItem('accessToken', response.accessToken);
localStorage.setItem('adminName', response.name);
localStorage.setItem('adminType', response.type);
if (response.storeId) {
@ -69,7 +69,7 @@ export const AdminAuthProvider: React.FC<{ children: ReactNode }> = ({ children
try {
await apiLogout();
} finally {
localStorage.removeItem('adminAccessToken');
localStorage.removeItem('accessToken');
localStorage.removeItem('adminName');
localStorage.removeItem('adminType');
localStorage.removeItem('adminStoreId');

102
frontend/src/css/admin-schedule-page.css
View File

@ -212,3 +212,105 @@ th {
color: #212529;
margin-right: 0.5rem;
}
.theme-selector-button-group {
display: flex;
flex-direction: row !important;
align-items: flex-end;
gap: 0.5rem;
}
.theme-selector-button-group .form-select {
flex-grow: 1;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 600px;
position: relative;
}
.modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #888;
}
.modal-title {
font-size: 1.75rem;
font-weight: bold;
margin-top: 0;
margin-bottom: 1.5rem;
text-align: center;
}
.theme-modal-thumbnail {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.theme-modal-description {
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 1.5rem;
}
.theme-modal-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
background-color: #f9f9f9;
padding: 1rem;
border-radius: 8px;
}
.info-item {
display: flex;
justify-content: space-between;
padding: 0.5rem;
border-bottom: 1px solid #eee;
}
.info-item:last-child {
border-bottom: none;
}
.info-item strong {
font-weight: 600;
color: #333;
}
.info-item span {
color: #666;
}
.theme-details-button {
align-self: center !important;
}

4
frontend/src/pages/HomePage.tsx
View File

@ -2,7 +2,7 @@ import {fetchMostReservedThemeIds} from '@_api/reservation/reservationAPI';
import '@_css/home-page-v2.css';
import React, {useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {findThemesByIds} from '@_api/theme/themeAPI';
import {fetchThemesByIds} from '@_api/theme/themeAPI';
import {mapThemeResponse, type ThemeInfoResponse} from '@_api/theme/themeTypes';
const HomePage: React.FC = () => {
@ -25,7 +25,7 @@ const HomePage: React.FC = () => {
if (themeIds === undefined) return;
if (themeIds.length === 0) return;
const response = await findThemesByIds({ themeIds: themeIds });
const response = await fetchThemesByIds({ themeIds: themeIds });
setRanking(response.themes.map(mapThemeResponse));
} catch (err) {
console.error('Error fetching ranking:', err);

10
frontend/src/pages/ReservationStep1Page.tsx
View File

@ -1,7 +1,7 @@
import {isLoginRequiredError} from '@_api/apiClient';
import {findAvailableThemesByDate, findSchedules, holdSchedule} from '@_api/schedule/scheduleAPI';
import {fetchAvailableThemesByDate, fetchSchedulesByDateAndTheme, holdSchedule} from '@_api/schedule/scheduleAPI';
import {type ScheduleRetrieveResponse, ScheduleStatus} from '@_api/schedule/scheduleTypes';
import {findThemesByIds} from '@_api/theme/themeAPI';
import {fetchThemesByIds} from '@_api/theme/themeAPI';
import {mapThemeResponse, type ThemeInfoResponse} from '@_api/theme/themeTypes';
import '@_css/reservation-v2-1.css';
import React, {useEffect, useState} from 'react';
@ -35,13 +35,13 @@ const ReservationStep1Page: React.FC = () => {
useEffect(() => {
if (selectedDate) {
const dateStr = selectedDate.toLocaleDateString('en-CA'); // yyyy-mm-dd
findAvailableThemesByDate(dateStr)
fetchAvailableThemesByDate(dateStr)
.then(res => {
console.log('Available themes response:', res);
const themeIds: string[] = res.themeIds;
console.log('Available theme IDs:', themeIds);
if (themeIds.length > 0) {
return findThemesByIds({ themeIds });
return fetchThemesByIds({ themeIds });
} else {
return Promise.resolve({ themes: [] });
}
@ -69,7 +69,7 @@ const ReservationStep1Page: React.FC = () => {
useEffect(() => {
if (selectedDate && selectedTheme) {
const dateStr = selectedDate.toLocaleDateString('en-CA');
findSchedules(dateStr, selectedTheme.id)
fetchSchedulesByDateAndTheme(dateStr, selectedTheme.id)
.then(res => {
setSchedules(res.schedules);
setSelectedSchedule(null);

8
frontend/src/pages/admin/AdminNavbar.tsx
View File

@ -1,10 +1,10 @@
import {useAdminAuth} from '@_context/AdminAuthContext';
import { useAdminAuth } from '@_context/AdminAuthContext';
import React from 'react';
import {Link, useNavigate} from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import '@_css/navbar.css';
const AdminNavbar: React.FC = () => {
const { isAdmin, name, logout } = useAdminAuth();
const { isAdmin, name, type, logout } = useAdminAuth();
const navigate = useNavigate();
const handleLogout = async (e: React.MouseEvent) => {
@ -21,7 +21,7 @@ const AdminNavbar: React.FC = () => {
<nav className="navbar-container">
<div className="nav-links">
<Link className="nav-link" to="/admin">홈</Link>
<Link className="nav-link" to="/admin/theme">테마</Link>
{type === 'HQ' && <Link className="nav-link" to="/admin/theme">테마</Link>}
<Link className="nav-link" to="/admin/schedule">일정</Link>
</div>
<div className="nav-actions">

135
frontend/src/pages/admin/AdminSchedulePage.tsx
View File

@ -1,9 +1,9 @@
import {isLoginRequiredError} from '@_api/apiClient';
import { isLoginRequiredError } from '@_api/apiClient';
import {
createSchedule,
deleteSchedule,
findScheduleById,
findSchedules,
fetchScheduleById,
fetchSchedulesByDateAndTheme,
updateSchedule
} from '@_api/schedule/scheduleAPI';
import {
@ -11,11 +11,12 @@ import {
type ScheduleRetrieveResponse,
ScheduleStatus
} from '@_api/schedule/scheduleTypes';
import {fetchAdminThemes} from '@_api/theme/themeAPI';
import type {AdminThemeSummaryRetrieveResponse} from '@_api/theme/themeTypes';
import { fetchActiveThemes, fetchThemeById } from '@_api/theme/themeAPI';
import { DifficultyKoreanMap, type ThemeInfoResponse } from '@_api/theme/themeTypes';
import { useAdminAuth } from '@_context/AdminAuthContext';
import '@_css/admin-schedule-page.css';
import React, {Fragment, useEffect, useState} from 'react';
import {useLocation, useNavigate} from 'react-router-dom';
import React, { Fragment, useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const getScheduleStatusText = (status: ScheduleStatus): string => {
switch (status) {
@ -32,9 +33,14 @@ const getScheduleStatusText = (status: ScheduleStatus): string => {
}
};
type ThemeForSchedule = {
id: string;
name: string;
}
const AdminSchedulePage: React.FC = () => {
const [schedules, setSchedules] = useState<ScheduleRetrieveResponse[]>([]);
const [themes, setThemes] = useState<AdminThemeSummaryRetrieveResponse[]>([]);
const [themes, setThemes] = useState<ThemeForSchedule[]>([]);
const [selectedThemeId, setSelectedThemeId] = useState<string>('');
const [selectedDate, setSelectedDate] = useState<string>(new Date().toLocaleDateString('en-CA'));
@ -47,8 +53,13 @@ const AdminSchedulePage: React.FC = () => {
const [isEditing, setIsEditing] = useState(false);
const [editingSchedule, setEditingSchedule] = useState<ScheduleDetailRetrieveResponse | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedThemeDetails, setSelectedThemeDetails] = useState<ThemeInfoResponse | null>(null);
const [isLoadingThemeDetails, setIsLoadingThemeDetails] = useState<boolean>(false);
const navigate = useNavigate();
const location = useLocation();
const { type: adminType } = useAdminAuth();
const handleError = (err: any) => {
if (isLoginRequiredError(err)) {
@ -62,19 +73,28 @@ const AdminSchedulePage: React.FC = () => {
};
useEffect(() => {
fetchAdminThemes()
.then(res => {
setThemes(res.themes);
if (res.themes.length > 0) {
setSelectedThemeId(String(res.themes[0].id));
if (!adminType) return;
const fetchThemesForSchedule = async () => {
try {
let themeData: ThemeForSchedule[];
const res = await fetchActiveThemes();
themeData = res.themes.map(t => ({ id: String(t.id), name: t.name }));
setThemes(themeData);
if (themeData.length > 0) {
setSelectedThemeId(themeData[0].id);
}
})
.catch(handleError);
}, []);
} catch (error) {
handleError(error);
}
};
fetchThemesForSchedule();
}, [adminType]);
const fetchSchedules = () => {
if (selectedDate && selectedThemeId) {
findSchedules(selectedDate, selectedThemeId)
fetchSchedulesByDateAndTheme(selectedDate, selectedThemeId)
.then(res => setSchedules(res.schedules))
.catch(err => {
setSchedules([]);
@ -89,6 +109,21 @@ const AdminSchedulePage: React.FC = () => {
fetchSchedules();
}, [selectedDate, selectedThemeId]);
const handleShowThemeDetails = async () => {
if (!selectedThemeId) return;
setIsModalOpen(true);
setIsLoadingThemeDetails(true);
try {
const details = await fetchThemeById(selectedThemeId);
setSelectedThemeDetails(details);
} catch (error) {
handleError(error);
setIsModalOpen(false); // Close modal on error
} finally {
setIsLoadingThemeDetails(false);
}
};
const handleAddSchedule = async () => {
if (!newScheduleTime) {
alert('시간을 입력해주세요.');
@ -134,7 +169,7 @@ const AdminSchedulePage: React.FC = () => {
if (!detailedSchedules[scheduleId]) {
setIsLoadingDetails(true);
try {
const details = await findScheduleById(scheduleId);
const details = await fetchScheduleById(scheduleId);
setDetailedSchedules(prev => ({ ...prev, [scheduleId]: details }));
} catch (error) {
handleError(error);
@ -173,7 +208,7 @@ const AdminSchedulePage: React.FC = () => {
status: editingSchedule.status,
});
// Refresh data
const details = await findScheduleById(editingSchedule.id);
const details = await fetchScheduleById(editingSchedule.id);
setDetailedSchedules(prev => ({ ...prev, [editingSchedule.id]: details }));
setSchedules(schedules.map(s => s.id === editingSchedule.id ? { ...s, time: details.time, status: details.status } : s));
@ -199,18 +234,27 @@ const AdminSchedulePage: React.FC = () => {
onChange={e => setSelectedDate(e.target.value)}
/>
</div>
<div className="form-group">
<div className="form-group theme-selector-group">
<label className="form-label" htmlFor="theme-filter">테마</label>
<select
id="theme-filter"
className="form-select"
value={selectedThemeId}
onChange={e => setSelectedThemeId(e.target.value)}
>
{themes.map(theme => (
<option key={theme.id} value={theme.id}>{theme.name}</option>
))}
</select>
<div className='theme-selector-button-group'>
<select
id="theme-filter"
className="form-select"
value={selectedThemeId}
onChange={e => setSelectedThemeId(e.target.value)}
>
{themes.map(theme => (
<option key={theme.id} value={theme.id}>{theme.name}</option>
))}
</select>
<button
className={'btn btn-secondary theme-details-button'}
onClick={handleShowThemeDetails}
disabled={!selectedThemeId}
>
테마 상세
</button>
</div>
</div>
</div>
@ -254,8 +298,8 @@ const AdminSchedulePage: React.FC = () => {
<div className="audit-body">
<p><strong>생성일:</strong> {new Date(detailedSchedules[schedule.id].createdAt).toLocaleString()}</p>
<p><strong>수정일:</strong> {new Date(detailedSchedules[schedule.id].updatedAt).toLocaleString()}</p>
<p><strong>생성자:</strong> {detailedSchedules[schedule.id].createdBy}</p>
<p><strong>수정자:</strong> {detailedSchedules[schedule.id].updatedBy}</p>
<p><strong>생성자:</strong> {detailedSchedules[schedule.id].createdBy.name}</p>
<p><strong>수정자:</strong> {detailedSchedules[schedule.id].updatedBy.name}</p>
</div>
</div>
@ -318,6 +362,33 @@ const AdminSchedulePage: React.FC = () => {
</table>
</div>
</div>
{isModalOpen && (
<div className="modal-overlay">
<div className="modal-content">
<button className="modal-close-btn" onClick={() => setIsModalOpen(false)}>×</button>
{isLoadingThemeDetails ? (
<p>로딩 중...</p>
) : selectedThemeDetails ? (
<div className="theme-details-modal">
<h3 className="modal-title">{selectedThemeDetails.name}</h3>
<img src={selectedThemeDetails.thumbnailUrl} alt={selectedThemeDetails.name} className="theme-modal-thumbnail" />
<p className="theme-modal-description">{selectedThemeDetails.description}</p>
<div className="theme-modal-info-grid">
<div className="info-item"><strong>난이도</strong><span>{DifficultyKoreanMap[selectedThemeDetails.difficulty]}</span></div>
<div className="info-item"><strong>가격</strong><span>{selectedThemeDetails.price.toLocaleString()}원</span></div>
<div className="info-item"><strong>최소 인원</strong><span>{selectedThemeDetails.minParticipants}명</span></div>
<div className="info-item"><strong>최대 인원</strong><span>{selectedThemeDetails.maxParticipants}명</span></div>
<div className="info-item"><strong>소요 시간</strong><span>{selectedThemeDetails.availableMinutes}분</span></div>
<div className="info-item"><strong>예상 시간</strong><span>{selectedThemeDetails.expectedMinutesFrom} ~ {selectedThemeDetails.expectedMinutesTo}분</span></div>
</div>
</div>
) : (
<p>테마 정보를 불러올 수 없습니다.</p>
)}
</div>
</div>
)}
</div>
);
};

17
frontend/src/pages/admin/AdminThemeEditPage.tsx
View File

@ -3,6 +3,7 @@ import {createTheme, deleteTheme, fetchAdminThemeDetail, updateTheme} from '@_ap
import {
type AdminThemeDetailResponse,
Difficulty,
DifficultyKoreanMap,
type ThemeCreateRequest,
type ThemeUpdateRequest
} from '@_api/theme/themeTypes';
@ -46,7 +47,7 @@ const AdminThemeEditPage: React.FC = () => {
availableMinutes: 60,
expectedMinutesFrom: 50,
expectedMinutesTo: 70,
isOpen: true,
isActive: true,
};
setTheme(newTheme);
setOriginalTheme(newTheme);
@ -67,7 +68,7 @@ const AdminThemeEditPage: React.FC = () => {
availableMinutes: data.availableMinutes,
expectedMinutesFrom: data.expectedMinutesFrom,
expectedMinutesTo: data.expectedMinutesTo,
isOpen: data.isOpen,
isActive: data.isActive,
createDate: data.createdAt, // Map createdAt to createDate
updatedDate: data.updatedAt, // Map updatedAt to updatedDate
createdBy: data.createdBy,
@ -85,7 +86,7 @@ const AdminThemeEditPage: React.FC = () => {
const { name, value, type } = e.target;
let processedValue: string | number | boolean = value;
if (name === 'isOpen') {
if (name === 'isActive') {
processedValue = value === 'true';
} else if (type === 'checkbox') {
processedValue = (e.target as HTMLInputElement).checked;
@ -178,12 +179,12 @@ const AdminThemeEditPage: React.FC = () => {
<div className="form-group">
<label className="form-label" htmlFor="difficulty">난이도</label>
<select id="difficulty" name="difficulty" className="form-select" value={theme.difficulty} onChange={handleChange} disabled={!isEditing}>
{Object.values(Difficulty).map(d => <option key={d} value={d}>{d}</option>)}
{Object.values(Difficulty).map(d => <option key={d} value={d}>{DifficultyKoreanMap[d]}</option>)}
</select>
</div>
<div className="form-group">
<label className="form-label" htmlFor="isOpen">공개 여부</label>
<select id="isOpen" name="isOpen" className="form-select" value={String(theme.isOpen)} onChange={handleChange} disabled={!isEditing}>
<label className="form-label" htmlFor="isActive">공개 여부</label>
<select id="isActive" name="isActive" className="form-select" value={String(theme.isActive)} onChange={handleChange} disabled={!isEditing}>
<option value="true">공개</option>
<option value="false">비공개</option>
</select>
@ -247,8 +248,8 @@ const AdminThemeEditPage: React.FC = () => {
<div className="audit-body">
<p><strong>생성일:</strong> {new Date(theme.createDate).toLocaleString()}</p>
<p><strong>수정일:</strong> {new Date(theme.updatedDate).toLocaleString()}</p>
<p><strong>생성자:</strong> {theme.createdBy}</p>
<p><strong>수정자:</strong> {theme.updatedBy}</p>
<p><strong>생성자:</strong> {theme.createdBy.name}</p>
<p><strong>수정자:</strong> {theme.updatedBy.name}</p>
</div>
</div>
)}

2
frontend/src/pages/admin/AdminThemePage.tsx
View File

@ -65,7 +65,7 @@ const AdminThemePage: React.FC = () => {
<td>{theme.name}</td>
<td>{theme.difficulty}</td>
<td>{theme.price.toLocaleString()}원</td>
<td>{theme.isOpen ? '공개' : '비공개'}</td>
<td>{theme.isActive ? '공개' : '비공개'}</td>
<td>
<button className="btn btn-secondary" onClick={() => handleManageClick(theme.id)}>관리</button>
</td>