feat: [academy] 프론트엔드 개발 백과사전 추가

- 10개 섹션: HTML/CSS/JS, 프레임워크, 반응형, 브라우저, API, 도구, 성능
- purple 테마, 기존 아카데미 패턴 동일 적용
- 전문용어 툴팁 26개 추가 (frontend-dev 도메인)

app/Http/Controllers/AcademyController.php

@@ -34,4 +34,13 @@ public function serverKnowledge(Request $request): View|Response
 
         return view('academy.server-knowledge');
     }
+
+    public function frontendDev(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('academy.frontend-dev'));
+        }
+
+        return view('academy.frontend-dev');
+    }
 }

resources/views/components/academy-glossary.blade.php

@@ -1,7 +1,7 @@
 {{--
     Academy Glossary Tooltip Component
     @include('components.academy-glossary', ['domain' => 'fire-shutter'])
-    도메인: fire-shutter | it-planning | server-knowledge
+    도메인: fire-shutter | it-planning | server-knowledge | frontend-dev
 --}}
 
 @push('styles')
@@ -169,6 +169,35 @@
     "이해관계자": "프로젝트의 결과에 영향을 받거나 영향을 미치는 사람 또는 조직.",
     "로드맵": "제품·프로젝트의 중장기 계획을 시간 축으로 시각화한 전략 문서."
 };
+@elseif($domain === 'frontend-dev')
+window.__GLOSSARY_DATA['frontend-dev'] = {
+    "DOM": "문서 객체 모델(Document Object Model). 브라우저가 HTML을 읽어 만든 트리 구조. JavaScript로 조작할 수 있다.",
+    "시맨틱 태그": "의미를 가진 HTML 태그. header, nav, main, footer 등. 검색엔진과 스크린리더가 콘텐츠를 이해하는 데 도움을 준다.",
+    "박스모델": "CSS에서 모든 요소를 상자로 취급하는 개념. content → padding → border → margin 순으로 구성된다.",
+    "Flexbox": "1차원(가로 또는 세로) 레이아웃을 쉽게 구현하는 CSS 기능. display: flex로 활성화한다.",
+    "Grid": "2차원(행+열) 레이아웃을 구현하는 CSS 기능. 바둑판처럼 요소를 배치할 수 있다.",
+    "미디어쿼리": "화면 크기에 따라 다른 CSS를 적용하는 규칙. @media (min-width: 768px) 형태로 사용한다.",
+    "viewport": "브라우저에서 웹 콘텐츠가 표시되는 영역. meta viewport 태그로 모바일 대응을 설정한다.",
+    "브레이크포인트": "반응형 디자인에서 레이아웃이 전환되는 화면 너비 기준점. 예: 768px, 1024px.",
+    "컴포넌트": "재사용 가능한 UI 조각. 버튼, 카드, 모달 등을 독립적인 단위로 만들어 조합한다.",
+    "상태관리": "애플리케이션 내 데이터(상태)를 체계적으로 관리하는 방법. Redux, Zustand 등의 라이브러리를 사용한다.",
+    "SPA": "Single Page Application. 페이지 전환 없이 하나의 페이지에서 콘텐츠를 동적으로 교체하는 웹 앱.",
+    "SSR": "Server-Side Rendering. 서버에서 HTML을 생성하여 브라우저에 전달하는 방식. SEO와 초기 로딩에 유리하다.",
+    "CSR": "Client-Side Rendering. 브라우저에서 JavaScript로 HTML을 생성하는 방식. SPA의 기본 렌더링 방식이다.",
+    "번들러": "여러 JavaScript/CSS 파일을 하나로 합치고 최적화하는 도구. Vite, Webpack이 대표적이다.",
+    "트랜스파일러": "최신 JavaScript 문법을 구형 브라우저에서도 동작하도록 변환하는 도구. Babel이 대표적이다.",
+    "린터": "코드의 오류, 스타일 위반, 잠재적 버그를 자동으로 검출하는 도구. ESLint가 대표적이다.",
+    "CDN": "Content Delivery Network. 전 세계에 분산된 서버로 콘텐츠를 빠르게 전달하는 네트워크.",
+    "CORS": "Cross-Origin Resource Sharing. 다른 도메인 간 리소스 공유를 제어하는 브라우저 보안 정책.",
+    "REST API": "URL과 HTTP 메서드(GET/POST/PUT/DELETE)로 자원을 관리하는 웹 API 설계 방식.",
+    "JSON": "JavaScript Object Notation. 서버와 클라이언트 간 데이터를 주고받는 경량 텍스트 형식.",
+    "npm": "Node Package Manager. JavaScript 패키지를 설치·관리하는 도구이자 세계 최대 패키지 저장소.",
+    "반응형 디자인": "화면 크기에 따라 레이아웃이 자동으로 조정되는 웹 디자인 방식.",
+    "이벤트 리스너": "사용자 행동(클릭, 입력 등)을 감지하여 정해진 함수를 실행하는 메커니즘.",
+    "콜백": "다른 함수의 인자로 전달되어 나중에 호출되는 함수. 비동기 처리의 기본 패턴이다.",
+    "Promise": "비동기 작업의 완료 또는 실패를 나타내는 객체. then/catch로 결과를 처리한다.",
+    "가상 DOM": "실제 DOM의 가벼운 복사본. React가 변경 사항을 비교하여 최소한의 실제 DOM만 업데이트한다."
+};
 @elseif($domain === 'server-knowledge')
 window.__GLOSSARY_DATA['server-knowledge'] = {
     "Nginx": "고성능 웹 서버 소프트웨어. 리버스 프록시, 로드 밸런싱 등을 처리한다.",

routes/web.php

@@ -1464,6 +1464,7 @@
     Route::get('/fire-shutter', [\App\Http\Controllers\AcademyController::class, 'fireShutter'])->name('fire-shutter');
     Route::get('/it-planning', [\App\Http\Controllers\AcademyController::class, 'itPlanning'])->name('it-planning');
     Route::get('/server-knowledge', [\App\Http\Controllers\AcademyController::class, 'serverKnowledge'])->name('server-knowledge');
+    Route::get('/frontend-dev', [\App\Http\Controllers\AcademyController::class, 'frontendDev'])->name('frontend-dev');
 });
 
 // SAM E-Sign - 인증 필요