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

{{--
    Academy Glossary Tooltip Component
    @include('components.academy-glossary', ['domain' => 'fire-shutter'])
    도메인: fire-shutter | it-planning | server-knowledge | frontend-dev
--}}

@push('styles')
<style>
/* ── Glossary Tooltip ── */
.glossary-term {
    position: relative;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: help;
    transition: text-decoration-color 0.15s ease;
}

.glossary-term:hover {
    text-decoration-color: #3b82f6;
}

/* 툴팁 화살표 */
.glossary-term::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 42;
}

/* 툴팁 풍선 */
.glossary-term::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 280px;
    width: max-content;
    white-space: normal;
    word-break: keep-all;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 42;
}

/* hover 시 표시 */
.glossary-term:hover::before,
.glossary-term:hover::after {
    opacity: 1;
}
.glossary-term:hover::after {
    transform: translateX(-50%) scale(1);
}

/* 모바일: 탭 토글 */
.glossary-term.is-tooltip-active::before,
.glossary-term.is-tooltip-active::after {
    opacity: 1;
}
.glossary-term.is-tooltip-active::after {
    transform: translateX(-50%) scale(1);
}

/* 화면 좌측 넘침 방지 */
.glossary-term::after {
    min-width: 160px;
}

/* hover 미지원 기기에서 hover 효과 비활성화 */
@media (hover: none) {
    .glossary-term:hover::before,
    .glossary-term:hover::after {
        opacity: 0;
    }
    .glossary-term:hover::after {
        transform: translateX(-50%) scale(0.95);
    }
    .glossary-term.is-tooltip-active::before,
    .glossary-term.is-tooltip-active::after {
        opacity: 1;
    }
    .glossary-term.is-tooltip-active::after {
        transform: translateX(-50%) scale(1);
    }
}
</style>
@endpush

<script>
window.__GLOSSARY_DOMAIN = @json($domain);
window.__GLOSSARY_DATA = window.__GLOSSARY_DATA || {};

@if($domain === 'fire-shutter')
window.__GLOSSARY_DATA['fire-shutter'] = {
    "슬랫": "셔터를 구성하는 금속 띠 형태의 판재. 여러 장이 연결되어 커튼 면을 형성한다.",
    "인터록킹": "슬랫과 슬랫을 서로 맞물리게 결합하는 방식. 분리되지 않으면서도 유연하게 감긴다.",
    "가이드레일": "셔터 양쪽에 설치된 레일. 슬랫이 이 레일을 따라 상하로 이동한다.",
    "샤프트": "셔터 상부에 위치한 회전축. 슬랫이 이 축에 감기며 올라간다.",
    "감속기": "모터의 고속 회전을 저속·고토크로 변환하는 장치. 셔터가 천천히 안전하게 내려온다.",
    "거버너": "셔터 하강 속도를 일정하게 제어하는 조속기. 과속 낙하를 방지한다.",
    "차연재": "셔터 틈새에 부착하여 연기 유입을 차단하는 소재. 화재 시 연기 확산을 막는다.",
    "EGI": "전기아연도금강판(Electro-Galvanized Iron). 아연 도금으로 내식성을 높인 강판이다.",
    "비차열": "화염은 차단하되 열 전달은 허용하는 방화 등급. 일반 방화셔터에 적용된다.",
    "차열": "화염과 열 전달 모두를 차단하는 상위 방화 등급. 피난 통로 등에 요구된다.",
    "방화구획": "건물을 일정 면적으로 나누어 화재 확산을 막는 구획. 건축법으로 의무화되어 있다.",
    "연동제어기": "화재 감지기 신호를 받아 셔터를 자동으로 폐쇄하는 제어 장치.",
    "연기감지기": "공기 중 연기 입자를 감지하여 화재 경보를 발생시키는 센서.",
    "열감지기": "주변 온도 상승을 감지하여 화재 경보를 발생시키는 센서.",
    "일부폐쇄": "셔터가 바닥에서 일정 높이(약 1.5m)까지만 내려오는 1차 폐쇄 단계.",
    "완전폐쇄": "셔터가 바닥까지 완전히 내려오는 최종 폐쇄 단계.",
    "롤포밍": "코일 강판을 연속 롤러로 통과시켜 원하는 단면 형상을 만드는 성형 공법.",
    "자동폐쇄기": "화재 시 외부 신호 없이도 셔터를 자동으로 닫히게 하는 장치.",
    "전자브레이크": "전자석을 이용하여 셔터의 정지·하강을 제어하는 브레이크.",
    "밸런스 스프링": "셔터 무게를 상쇄하여 모터 부하를 줄이고 수동 조작을 가능하게 하는 스프링.",
    "웜기어": "웜(나사축)과 웜휠이 맞물리는 감속 기어. 역회전 방지 기능이 있다.",
    "강판형": "일반 강판 슬랫으로 구성된 셔터 유형. 차열·비차열 성능을 모두 구현 가능하다.",
    "스크린형": "내화 섬유(유리섬유 등) 소재로 구성된 셔터 유형. 경량이고 투시가 가능하다.",
    "분리형": "감속기와 제어 장치가 셔터 본체와 별도로 설치되는 구조.",
    "일체형": "감속기와 제어 장치가 셔터 본체에 내장된 구조. 설치 공간이 절약된다.",
    "내화충전재": "셔터 내부에 충전하여 열 전달을 차단하는 단열 소재.",
    "SPHC": "열간압연 일반구조용 강판(Steel Plate Hot Commercial). 셔터 프레임 소재로 사용된다."
};
@elseif($domain === 'it-planning')
window.__GLOSSARY_DATA['it-planning'] = {
    "PRD": "제품 요구사항 문서(Product Requirements Document). 무엇을 왜 만들지 정의한 기획서.",
    "IA": "정보 구조(Information Architecture). 서비스의 메뉴·화면·콘텐츠 계층 구조를 설계한 것.",
    "와이어프레임": "화면 배치를 선과 도형으로 간략히 표현한 설계도. 디자인 이전 단계에서 사용한다.",
    "프로토타입": "실제 동작을 시뮬레이션하는 시제품. 사용성 검증을 위해 클릭 가능한 형태로 만든다.",
    "MoSCoW": "Must/Should/Could/Won't로 우선순위를 분류하는 기법.",
    "RICE": "Reach·Impact·Confidence·Effort로 기능 우선순위를 점수화하는 프레임워크.",
    "스코프 크리프": "프로젝트 범위가 통제 없이 점점 확장되는 현상. 일정 지연의 주요 원인이다.",
    "페르소나": "대표 사용자 유형을 가상의 인물로 구체화한 것. 사용자 중심 기획의 기초 자료.",
    "VOC": "고객의 소리(Voice of Customer). 사용자 피드백·요구사항을 수집·분석한 데이터.",
    "MECE": "상호 배타적이고 전체를 포괄하는 분류 원칙(Mutually Exclusive, Collectively Exhaustive).",
    "유스케이스": "사용자가 시스템과 상호작용하는 시나리오를 단계별로 기술한 것.",
    "플로우차트": "업무나 시스템의 처리 흐름을 도형과 화살표로 시각화한 다이어그램.",
    "ERD": "엔티티-관계 다이어그램(Entity-Relationship Diagram). 데이터베이스 테이블 간 관계를 표현한다.",
    "스프린트": "애자일 개발에서 1~4주 단위의 반복 개발 주기. 매 주기마다 결과물을 산출한다.",
    "백로그": "개발해야 할 기능·작업을 우선순위로 정리한 목록. 스프린트 계획의 입력값이다.",
    "MVP": "최소 기능 제품(Minimum Viable Product). 핵심 기능만으로 시장 반응을 검증하는 첫 버전.",
    "A/B 테스트": "두 가지 시안을 사용자에게 무작위 노출하여 성과를 비교하는 실험 방법.",
    "스토리보드": "화면 흐름과 사용자 인터랙션을 시각적으로 정리한 기획 산출물.",
    "KPI": "핵심 성과 지표(Key Performance Indicator). 목표 달성도를 측정하는 정량 지표.",
    "OKR": "목표와 핵심결과(Objectives and Key Results). 목표 설정 및 성과 관리 프레임워크.",
    "린 스타트업": "가설→실험→학습 순환으로 빠르게 제품을 검증하는 창업 방법론.",
    "디자인 씽킹": "사용자 공감→문제 정의→아이디어→프로토타입→테스트 5단계 혁신 방법론.",
    "애자일": "변화에 유연하게 대응하며 반복적으로 개발하는 소프트웨어 개발 방법론.",
    "칸반": "작업을 시각적 보드로 관리하며, 진행 중 작업 수(WIP)를 제한하는 워크플로우 방법.",
    "스크럼": "스프린트 단위로 개발하며 데일리 스탠드업, 회고 등 정해진 이벤트를 수행하는 애자일 프레임워크.",
    "이해관계자": "프로젝트의 결과에 영향을 받거나 영향을 미치는 사람 또는 조직.",
    "로드맵": "제품·프로젝트의 중장기 계획을 시간 축으로 시각화한 전략 문서."
};
@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": "고성능 웹 서버 소프트웨어. 리버스 프록시, 로드 밸런싱 등을 처리한다.",
    "PHP-FPM": "PHP FastCGI Process Manager. PHP 스크립트를 처리하는 프로세스 관리자.",
    "MySQL": "오픈소스 관계형 데이터베이스 관리 시스템(RDBMS). SQL로 데이터를 관리한다.",
    "Docker": "애플리케이션을 컨테이너로 패키징하여 어디서나 동일하게 실행할 수 있게 하는 플랫폼.",
    "컨테이너": "앱과 실행 환경을 격리하여 패키징한 가상화 단위. VM보다 가볍고 빠르다.",
    "SSH": "Secure Shell. 원격 서버에 암호화된 통신으로 안전하게 접속하는 프로토콜.",
    "Git": "소스 코드 버전 관리 시스템. 변경 이력을 추적하고 협업을 지원한다.",
    "Hook": "특정 이벤트 발생 시 자동으로 실행되는 스크립트. Git Hook, Webhook 등이 있다.",
    "chmod": "파일·디렉토리의 접근 권한(읽기/쓰기/실행)을 변경하는 리눅스 명령어.",
    "chown": "파일·디렉토리의 소유자와 소유 그룹을 변경하는 리눅스 명령어.",
    "umask": "새로 생성되는 파일의 기본 권한을 제어하는 설정값.",
    "502 Bad Gateway": "웹 서버가 백엔드(PHP-FPM 등)로부터 정상 응답을 받지 못할 때 발생하는 오류.",
    "리버스 프록시": "클라이언트 요청을 받아 백엔드 서버로 전달하는 중간 서버. Nginx가 대표적이다.",
    "포트": "네트워크 통신에서 프로세스를 구분하는 번호. HTTP는 80, HTTPS는 443을 사용한다.",
    "HTTPS": "HTTP에 SSL/TLS 암호화를 적용한 보안 통신 프로토콜.",
    "SSL/TLS": "인터넷 통신을 암호화하여 데이터를 보호하는 보안 프로토콜.",
    "DNS": "도메인 이름(예: example.com)을 IP 주소로 변환하는 시스템.",
    "IP 주소": "네트워크에서 장치를 식별하는 고유 번호. IPv4(예: 192.168.1.1)와 IPv6가 있다.",
    "프로세스": "실행 중인 프로그램의 인스턴스. 각각 고유 PID를 가진다.",
    "데몬": "백그라운드에서 지속적으로 실행되는 서비스 프로세스. 이름 뒤에 d를 붙인다(예: mysqld).",
    "로그": "시스템·애플리케이션의 동작 기록. 오류 추적과 모니터링에 필수적이다.",
    "배포": "개발 완료된 코드를 서버에 적용하여 사용자에게 서비스하는 과정.",
    "크론": "리눅스에서 정해진 시간에 명령을 자동 실행하는 스케줄러.",
    "방화벽": "허가되지 않은 네트워크 접근을 차단하는 보안 시스템. iptables, ufw 등이 있다.",
    "sudo": "일반 사용자가 관리자(root) 권한으로 명령을 실행할 수 있게 하는 명령어.",
    "systemctl": "systemd 서비스를 시작·중지·재시작·상태확인하는 관리 명령어."
};
@endif
</script>
<script src="{{ asset('js/academy-glossary.js') }}" defer></script>