메뉴
금융/디스플레이 제조업 직장인 대상 생성형 AI 인터랙티브 교육 사이트. 마크다운 교육자료를 풍부한 학습 경험으로 변환. AI 교육, 교육 웹앱, 다크모드, Mermaid.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | ai-edu-site |
| description | 금융/디스플레이 제조업 직장인 대상 생성형 AI 인터랙티브 교육 사이트. 마크다운 교육자료를 풍부한 학습 경험으로 변환. AI 교육, 교육 웹앱, 다크모드, Mermaid. |
금융/디스플레이 제조업 직장인을 위한 생성형 AI 인터랙티브 교육 사이트. 6개 마크다운 교육 모듈을 Next.js 기반의 풍부한 학습 경험으로 변환한다.
/ — 홈: 6개 모듈 카드 그리드
/learn/[moduleId] — 모듈별 인터랙티브 학습 페이지
/learn/[moduleId])| 항목 | 기술 |
|---|---|
| 프레임워크 | Next.js 14+ (App Router, 정적 export) |
| 스타일링 | Tailwind CSS 4 + CSS 커스텀 속성 |
| 폰트 | Pretendard (CDN) |
| 마크다운 | react-markdown + remark-gfm + rehype-highlight |
| 다이어그램 | Mermaid.js |
| 아이콘 | Lucide React |
| 배포 | GitHub Pages (basePath: '/ai-edu') |
site/
├── app/
│ ├── layout.tsx # 루트 레이아웃 (Pretendard, FOUC 방지 스크립트)
│ ├── page.tsx # 홈 (모듈 카드 그리드)
│ ├── globals.css # 라이트/다크 테마 + 프로즈 타이포그래피
│ ├── types.ts # TOCItem 타입
│ ├── lib/
│ │ ├── modules.ts # 모듈 설정 (id, title, description, duration, keywords)
│ │ └── markdown.ts # readModuleMarkdown(), extractTOC(), slugify()
│ ├── components/
│ │ ├── Header.tsx # 사이트 헤더 + ThemeToggle
│ │ ├── ThemeToggle.tsx # 다크모드 토글 (light/dark/system)
│ │ ├── MarkdownRenderer.tsx # react-markdown + 커스텀 컴포넌트
│ │ ├── MermaidDiagram.tsx # Mermaid 다이어그램 렌더러
│ │ ├── TableOfContents.tsx # 사이드바 목차 + 스크롤 스파이
│ │ ├── CopyButton.tsx # 코드 복사 버튼
│ │ └── CalloutBox.tsx # 팁/경고 콜아웃 (MarkdownRenderer 내장)
│ └── learn/
│ └── [moduleId]/page.tsx # 모듈별 학습 페이지
├── content/
│ └── module-1~6.md # 마크다운 교육자료
└── public/ # 정적 파일
slugify() 함수를 lib/markdown.ts에서 공유extractTOC()와 MarkdownRenderer의 h2/h3가 동일한 slugify로 ID 생성--site-bg, --site-text 등)@media (prefers-color-scheme: dark) 시스템 자동 감지[data-theme="dark"] / [data-theme="light"] 수동 오버라이드MermaidDiagram.tsx: 클라이언트 렌더링, data-theme 변화 감지output: 'export', basePath: '/ai-edu'generateStaticParams()로 6개 모듈 경로 사전 생성--site-bg: #FFFFFF
--site-bg-secondary: #F8FAFC
--site-text: #1A1A2E
--site-text-secondary: #64748B
--site-accent: #2563EB
--site-accent-light: #EFF6FF
--site-border: #E2E8F0
--site-code-bg: #F1F5F9
--site-bg: #0F172A
--site-bg-secondary: #1E293B
--site-text: #E2E8F0
--site-text-secondary: #94A3B8
--site-accent: #60A5FA
--site-accent-light: #1E3A5F
--site-border: #334155
--site-code-bg: #1E293B
content/에 복사content/module-N.md 수정lib/modules.ts에 모듈 설정 추가/수정npm run build → 배포| 상황 | 전략 |
|---|---|
| 마크다운 파싱 실패 | 해당 모듈 notFound() 반환 |
| Mermaid 렌더링 실패 | 원본 코드 텍스트 폴백 표시 |
| TOC ID 불일치 | slugify() 공유 함수로 방지 |
| 다크모드 FOUC | 인라인 스크립트로 paint 전 테마 적용 |
| 빌드 에러 | TypeScript 에러 우선 해결 |
KDB생명 사내 데이터 식별자(DB 컬럼명·테이블명·상품 코드값·시스템명·그룹사 사업명)를 사이트 게재 전 익명화하는 규칙 모음. 'KDB 데이터 노출 방지', '사내 식별자 마스킹', '컬럼명 익명화', '상품 코드 일반화' 요청 시 또는 site/content/*.md에 보강 콘텐츠를 추가할 때 반드시 사용.
kdb_edu_final.md(개정판)의 신규 보강 콘텐츠를 사이트(site/content/module-*.md)에 병합하고 KDB 사내 데이터 식별자를 익명화한 뒤 빌드·배포까지 수행하는 오케스트레이터. '개정판 반영', '보강 콘텐츠 추가', 'kdb_edu_final 적용', '사이트 보강해줘', '교육자료 개정 반영', 'KDB 데이터 노출 방지' 요청 시 반드시 사용.
한국산업은행(KDB) 교육자료 사이트의 제조업 콘텐츠를 금융(KDB) 맥락으로 변환·검증·배포하는 오케스트레이터. 'KDB로 바꿔줘', '제조업 제거', '금융권 맞춤', '2025년도 2026년도 변경', 'github pages 배포', '다시 변환', '재실행', '부분 수정' 등 KDB 교육자료 변환 관련 모든 요청 시 반드시 사용.