frontend/src/api/apiClient.ts

@@ -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;
     }

frontend/src/api/common/commonTypes.ts

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

frontend/src/api/schedule/scheduleAPI.ts

@@ -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}`);
 }
 

frontend/src/api/schedule/scheduleTypes.ts

@@ -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;
 }

frontend/src/api/theme/themeAPI.ts

@@ -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');
+};

frontend/src/api/theme/themeTypes.ts

@@ -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[];
 }

frontend/src/context/AdminAuthContext.tsx

@@ -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');

frontend/src/css/admin-schedule-page.css

@@ -211,4 +211,106 @@ th {
 .audit-body p strong {
     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;
 }

frontend/src/pages/HomePage.tsx

@@ -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);

frontend/src/pages/ReservationStep1Page.tsx

@@ -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);

frontend/src/pages/admin/AdminNavbar.tsx

@@ -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">

frontend/src/pages/admin/AdminSchedulePage.tsx

@@ -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>
     );
 };

frontend/src/pages/admin/AdminThemeEditPage.tsx

@@ -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>
                 )}

frontend/src/pages/admin/AdminThemePage.tsx

@@ -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>