diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md index f2a4748..27e7b4a 100644 --- a/docs/RELEASE-NOTES.md +++ b/docs/RELEASE-NOTES.md @@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/ko/1.0.0/). ## [Unreleased] +### 추가 + +- 다크/라이트 모드 전체 적용 (ThemeContext, 토글 버튼, 전 페이지 dark 클래스) (#15) +- API Key 신청 영구 사용 옵션 (#15) +- API Key Admin 키 관리 만료일 컬럼 (#15) +- Gateway API 경로 {변수} 패턴 매칭 지원 (#15) + +### 변경 + +- 사이드바 아이콘 링크체인으로 변경, 헤더/사이드바 높이 통일 (#15) +- 컨텐츠 영역 max-w-7xl 마진 통일 (#15) +- 전체 Actions 버튼 bg-color-100 스타일 통일 (#15) +- API Key Admin 권한 편집 제거 (승인 단계에서만 가능) (#15) +- My Keys ADMIN 직접 생성 제거 → Request 폼 통일 (#15) + ## [2026-04-08] ### 추가 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8ce7397..3f4f463 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,5 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; +import ThemeProvider from './store/ThemeContext'; import AuthProvider from './store/AuthContext'; import AuthLayout from './layouts/AuthLayout'; import MainLayout from './layouts/MainLayout'; @@ -22,6 +23,7 @@ const BASE_PATH = '/snp-connection'; const App = () => { return ( + }> @@ -47,6 +49,7 @@ const App = () => { + ); }; diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx index 6a3d913..e2e53b0 100644 --- a/frontend/src/components/ProtectedRoute.tsx +++ b/frontend/src/components/ProtectedRoute.tsx @@ -6,8 +6,8 @@ const ProtectedRoute = () => { if (isLoading) { return ( -
-
+
+
); } diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts new file mode 100644 index 0000000..6e59a54 --- /dev/null +++ b/frontend/src/hooks/useTheme.ts @@ -0,0 +1,8 @@ +import { useContext } from 'react'; +import { ThemeContext } from '../store/ThemeContext'; + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (!context) throw new Error('useTheme must be used within ThemeProvider'); + return context; +}; diff --git a/frontend/src/index.css b/frontend/src/index.css index d4b5078..3f570eb 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1 +1,8 @@ @import 'tailwindcss'; + +@custom-variant dark (&:where(.dark, .dark *)); + +/* Dark mode date input calendar icon */ +.dark input[type="date"]::-webkit-calendar-picker-indicator { + filter: invert(1); +} diff --git a/frontend/src/layouts/AuthLayout.tsx b/frontend/src/layouts/AuthLayout.tsx index 6819e6a..5b658cd 100644 --- a/frontend/src/layouts/AuthLayout.tsx +++ b/frontend/src/layouts/AuthLayout.tsx @@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom'; const AuthLayout = () => { return ( -
+
); diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx index 2930151..d29c28e 100644 --- a/frontend/src/layouts/MainLayout.tsx +++ b/frontend/src/layouts/MainLayout.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { Outlet, NavLink } from 'react-router-dom'; import { useAuth } from '../hooks/useAuth'; +import { useTheme } from '../hooks/useTheme'; interface NavGroup { label: string; @@ -37,6 +38,7 @@ const navGroups: NavGroup[] = [ const MainLayout = () => { const { user, logout } = useAuth(); + const { theme, toggleTheme } = useTheme(); const [openGroups, setOpenGroups] = useState>({ Monitoring: true, 'API Keys': true, @@ -57,9 +59,9 @@ const MainLayout = () => {
{/* Sidebar */}