[Feature] 코드 블록 및 구문 하이라이트 기능

[herokwon]

⭐ 기능 / 아이디어

Lexical 프레임워크 기반 텍스트 편집기에 코드 블록 + 구문 하이라이트 + 인라인 코드 + 복사 버튼 기능을 추가합니다.

• 코드 블록: @lexical/code 패키지를 활용하여 블록 단위 코드 입력 지원
• 구문 하이라이트: 언어별 토큰화
• 인라인 코드: 텍스트 포맷 code 토글 및 백틱(`) 자동 변환
• 복사 버튼: 코드 블록 콘텐츠 클립보드 복사

💡 세부 사항

요소 타입 :

• 기본 UI 요소 (Button, Input 등)
• 레이아웃 요소 (Grid, Container 등)
• 복합 요소 (Modal, Dropdown 등)
• 유틸리티/훅
• 디자인 토큰/테마 향상
• 문서 개선
• CI/CD

요구 사항 :

• 접근성 준수 (WCAG)
• 모바일 반응형
• 다크모드 지원
• TypeScript 정의
• Storybook 스토리

사용 예시 :

1. 툴바에서 "코드 블록" 버튼 클릭 → 현재 블록을 CodeNode로 변환
2. 언어 드롭다운 선택 → javascript, python, html 등 선택 → 자동 하이라이트
3. 코드 블록 우측 "Copy" 버튼 → 클립보드에 전체 코드 복사
4. 인라인 코드: console.log('Hello') 입력 → 자동 포맷 적용

🎨 디자인 참조

코드 블록 예시:
┌─────────────────────────────────────┐
│ javascript ▼  [Copy]                │ ← 상단 오른쪽 버튼들
├─────────────────────────────────────┤
│ const hello = 'world';              │
│ console.log(hello);                 │ ← 하이라이트 적용
└─────────────────────────────────────┘

💬 참고 사항 (스크린샷, URL 등)

• @lexical/code