diff --git a/frontend/src/pages/admin/AdminPage.tsx b/frontend/src/pages/admin/AdminPage.tsx
index bd3397fe..8661847a 100644
--- a/frontend/src/pages/admin/AdminPage.tsx
+++ b/frontend/src/pages/admin/AdminPage.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import '../../css/admin-page.css';
+import '@_css/admin-page.css';
const AdminPage: React.FC = () => {
return (
diff --git a/frontend/src/pages/admin/AdminThemeEditPage.tsx b/frontend/src/pages/admin/AdminThemeEditPage.tsx
index 0121d5dd..40f561fe 100644
--- a/frontend/src/pages/admin/AdminThemeEditPage.tsx
+++ b/frontend/src/pages/admin/AdminThemeEditPage.tsx
@@ -8,7 +8,7 @@ import {
import { Difficulty, type ThemeCreateRequestV2, type ThemeUpdateRequest, type ThemeV2 } from '@_api/theme/themeTypes';
import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import '../../css/admin-theme-edit-page.css';
+import '@_css/admin-theme-edit-page.css';
const AdminThemeEditPage: React.FC = () => {
const { themeId } = useParams<{ themeId: string }>();
diff --git a/frontend/src/pages/admin/AdminThemePage.tsx b/frontend/src/pages/admin/AdminThemePage.tsx
new file mode 100644
index 00000000..82ba9284
--- /dev/null
+++ b/frontend/src/pages/admin/AdminThemePage.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { fetchAdminThemes } from '@_api/theme/themeAPI';
+import type {AdminThemeSummaryRetrieveResponse} from '@_api/theme/themeTypes';
+import { isLoginRequiredError } from '@_api/apiClient';
+import '@_css/admin-theme-page.css';
+
+const AdminThemePage: React.FC = () => {
+ const [themes, setThemes] = useState
([]);
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const handleError = (err: any) => {
+ if (isLoginRequiredError(err)) {
+ alert('로그인이 필요해요.');
+ navigate('/login', { state: { from: location } });
+ } else {
+ const message = err.response?.data?.message || '알 수 없는 오류가 발생했습니다.';
+ alert(message);
+ console.error(err);
+ }
+ };
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetchAdminThemes();
+ setThemes(response.themes);
+ } catch (error) {
+ handleError(error);
+ }
+ };
+ fetchData();
+ }, []);
+
+ const handleAddClick = () => {
+ navigate('/admin/theme/edit/new');
+ };
+
+ const handleManageClick = (themeId: string) => {
+ navigate(`/admin/theme/edit/${themeId}`);
+ };
+
+ return (
+
+
테마 관리
+
+
+
+
+
+
+
+
+ | 이름 |
+ 난이도 |
+ 1인당 요금 |
+ 공개여부 |
+ |
+
+
+
+ {themes.map(theme => (
+
+ | {theme.name} |
+ {theme.difficulty} |
+ {theme.price.toLocaleString()}원 |
+ {theme.isOpen ? '공개' : '비공개'} |
+
+
+ |
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default AdminThemePage;