القائمة
금융/디스플레이 제조업 직장인 대상 생성형 AI 인터랙티브 교육 사이트. 마크다운 교육자료를 풍부한 학습 경험으로 변환. AI 교육, 교육 웹앱, 다크모드, Mermaid.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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 교육자료 변환 관련 모든 요청 시 반드시 사용.
استنادا إلى تصنيف 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 에러 우선 해결 |