e104d1b47c5e0f9d7904ac5485c06a75e1b5c849
UX/UI 개편 Phase A-7. uiState와 결합한 layer/dialog 컴포넌트. 신규 컴포넌트 (lib/components/ui/) - Drawer.svelte: 단일 slot drawer (id: 'sidebar' | 'meta'). ui.isDrawerOpen(id)로 표시 여부 결정. 새 drawer 열면 이전 drawer 자동 close. side(left/right) + width(sidebar/rail). backdrop 클릭으로 close. z-drawer 사용. 8대 원칙 #2. - Modal.svelte: stack 지원 modal (5대 원칙 #2 — confirm 위에 nested 가능). native <dialog> 대신 div 기반 — top-layer가 단일이라 <dialog>로는 stack 불가. z-index = z-modal + (stackIndex * 2): backdrop과 panel을 별개의 stacking context로 두기 위해 *2. 최상단 modal만 focus trap + 키보드 nav 활성, 아래는 inert 처리. 수동 Tab/Shift+Tab cycling. closable + IconButton(X) 헤더, footer snippet 지원. - ConfirmDialog.svelte: Modal 위 얇은 wrapper. 삭제/되돌릴 수 없는 작업에 사용. tone(danger/primary), confirmLabel/cancelLabel, onconfirm 콜백. ui.openModal(id)로 호출. - Tabs.svelte: ARIA tablist + tab + tabpanel. 좌우 화살표 / Home / End 키 nav, \$props.id() 기반 SSR-safe ID. tabs: { id, label, disabled? }[], value \$bindable. children snippet은 (activeId) => UI 시그니처 — DocumentViewer 편집/미리보기 토글 등 단일 컨테이너 레이아웃에 쓰기 좋게 설계. 이로써 Phase A 프리미티브 13종 완비: Button, IconButton, Card, Badge, Skeleton, EmptyState, TextInput, Textarea, Select, Drawer, Modal, ConfirmDialog, Tabs. 모든 컴포넌트는 Svelte 5 runes mode strict, @theme 토큰만 사용, focus-visible ring 통일, slot은 {@render children?.()}로 작성. svelte-check: 0 errors / 8 warnings (전부 기존 latent, 새 코드 무관) build: 2.07s 무경고 남은 Phase A: - A-8 토큰 swap (Sidebar/TagPill/UploadDropzone/PreviewPanel/DocumentCard/ DocumentTable/+layout toast — baseline 421건 → 0건) - A-9 __styleguide 라우트 (전체 시각 검증 + Modal stack 데모) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
hyungi_Document_Server
Self-hosted 개인 지식관리(PKM) 웹 애플리케이션
기술 스택
- 백엔드: FastAPI + SQLAlchemy (async)
- 데이터베이스: PostgreSQL 16 + pgvector + pg_trgm
- 프론트엔드: SvelteKit
- 문서 파싱: kordoc (HWP/HWPX/PDF → Markdown)
- AI: Qwen3.5-35B-A3B (MLX), nomic-embed-text, Claude API (폴백)
- 인프라: Docker Compose, Caddy, Synology NAS
주요 기능
- 문서 자동 분류/태그/요약 (AI 기반)
- 전문검색 + 벡터 유사도 검색
- HWP/PDF/Markdown 문서 뷰어
- 법령 변경 모니터링 (산업안전보건법 등)
- 이메일 자동 수집 (MailPlus IMAP)
- 일일 다이제스트
- CalDAV 태스크 연동 (Synology Calendar)
Quick Start
git clone https://git.hyungi.net/hyungi/hyungi_document_server.git hyungi_Document_Server
cd hyungi_Document_Server
# 인증 정보 설정
cp credentials.env.example credentials.env
nano credentials.env # 실제 값 입력
# 실행
docker compose up -d
http://localhost:8000/docs 에서 API 문서 확인
디렉토리 구조
├── app/ FastAPI 백엔드 (API, 워커, AI 클라이언트)
├── frontend/ SvelteKit 프론트엔드
├── services/kordoc/ 문서 파싱 마이크로서비스 (Node.js)
├── gpu-server/ GPU 서버 배포 (AI Gateway)
├── migrations/ PostgreSQL 스키마
├── docs/ 설계 문서, 배포 가이드
└── tests/ 테스트 코드
인프라 구성
| 서버 | 역할 |
|---|---|
| Mac mini M4 Pro | Docker Compose (FastAPI, PostgreSQL, kordoc, Caddy) + MLX AI |
| Synology NAS | 파일 원본 저장, Synology Office/Drive/Calendar/MailPlus |
| GPU 서버 | AI Gateway, 벡터 임베딩, OCR, 리랭킹 |
문서
Description
Languages
Python
51.4%
Svelte
39.7%
TypeScript
3%
HTML
3%
CSS
1.1%
Other
1.8%