개발자를 위한 정보 관리 대시보드 외부 서버 없이 브라우저 로컬 스토리지(IndexedDB)만 사용하는 무설치 웹 앱
서버·DB·API 접속 정보부터 메모·문서까지, 개발에 필요한 모든 정보를 한 곳에서 관리하는 도구입니다. 카드 기반 대시보드 + 탭 편집 방식으로 접속 정보·노트·API 정보를 타입별로 구조화 관리합니다.
- 완전 로컬: 모든 데이터는 브라우저 IndexedDB에만 저장
- AI 활용: Smart Paste(텍스트→구조화), 콘텐츠 요약 — 공유 키(IP당 20회/일) 또는 본인 API 키(Anthropic · Google · OpenAI) 직접 입력 선택
- 무설치: 빌드 결과물을 브라우저에서 바로 실행 (GitHub Pages 배포)
- 5종 카드 타입: Server, DB, API, Note (마크다운+코드), Document (다중 섹션 문서)
| 항목 | 선택 | 버전 |
|---|---|---|
| Framework | React + Vite (SPA) | React 19.2 / Vite 7.3 |
| Language | TypeScript Strict Mode | 5.9.3 |
| Data | Dexie.js (IndexedDB 래퍼) | 4.3 |
| State | Jotai (전역 UI 상태) + useLiveQuery (DB 반응형) |
2.18 / dexie-react-hooks 4.2 |
| Editor | CodeMirror 6 (json, sql, js/ts, python, yaml, html, css) | 6.x |
| Test | Vitest | 4.1 |
| Keybindings | @tanstack/react-hotkeys (단축키 시스템) | - |
| File I/O | File System Access API + <input> 폴백 |
- |
| Search | Fuse.js (키워드 퍼지 검색) | 7.1 |
| AI | Claude / Gemini / GPT-4o (Vercel Edge Function 프록시, 공유 키 IP당 20회/일 또는 BYOK) | - |
| Styling | Tailwind CSS v4 (@tailwindcss/vite 플러그인) |
4.2 |
| DnD | @dnd-kit/core + @dnd-kit/sortable | 6.3 / 10.0 |
| Markdown | marked + DOMPurify | 17.0 / 3.3 |
| Icons | lucide-react | 0.577 |
| Toast | sonner | 2.0 |
api/ # Vercel Edge Function 프록시
│ └── v1/
│ ├── messages.ts # 멀티 프로바이더 프록시 (Anthropic/Google/OpenAI BYOK 분기, rate limit 헤더)
│ └── error-report.ts # Discord webhook 에러 리포트
vercel.json # Vercel 프로젝트 설정 (rewrites, framework null)
src/
├── core/
│ ├── db.ts # Dexie v4 스키마 v14 + 마이그레이션 (selectedProvider, userApiKey)
│ ├── types.ts # CardField, StructuredContent, HybridContent, FIELD_SCHEMAS, TYPE_META
│ ├── content.ts # parseContent, serializeContent, extractSearchText
│ ├── ai.ts # Claude API 래퍼 (smartPaste, markdownSmartPaste, summarize, documentSmartPaste)
│ ├── ai-schemas.ts # SMART_PASTE_SCHEMA, MARKDOWN_PASTE_SCHEMA, SUMMARY_SCHEMA, DOCUMENT_PASTE_SCHEMA
│ ├── keybindings.ts # 키바인딩 코어 타입/상수 (DEFAULT_KEYBINDINGS, validate, getEffectiveBindings)
│ └── duplicate-check.ts # 중복 host/url 경고
├── features/
│ ├── sidebar/
│ │ ├── treeUtils.ts # buildTree, getRootItems, collectDescendants
│ │ ├── TreeNode.tsx # 재귀 폴더 트리, ItemRow, DnD 정렬, 인라인 이름 변경
│ │ └── Sidebar.tsx # useLiveQuery, DnD 컨텍스트, 새 폴더/카드 버튼, 테마 토글
│ ├── cards/
│ │ ├── CardDetailEditor.tsx # 탭 편집 (제목·타입·태그·CodeMirror, document→DocumentEditor 위임)
│ │ ├── CardFormModal.tsx # 카드 생성 모달 (5종 타입, document Smart Paste)
│ │ ├── DocumentEditor.tsx # document 전용 에디터 (DnD 섹션 정렬, Ctrl+S)
│ │ ├── NoteEditor.tsx # Note 카드 CodeMirror 에디터 (주석 하이라이팅)
│ │ ├── MarkdownEditorWithToggle.tsx # Note 카드 소스/미리보기 토글 래퍼
│ │ ├── SmartPastePanel.tsx # Smart Paste UI (Claude AI 단일 호출)
│ │ ├── CardFloatingView.tsx # 카드 플로팅 뷰 (AI 요약, HybridDocumentView)
│ │ ├── InfoCard.tsx # 카드 그리드 단위 (DocumentPreview 포함)
│ │ ├── CardContent.tsx # 카드 내 필드 표시
│ │ ├── FieldRow.tsx # 필드 행 (복사 버튼 등)
│ │ ├── StructuredFieldInput.tsx # 구조화 필드 입력
│ │ ├── fieldHelpers.ts # 필드 유틸 함수
│ │ └── sections/ # document 섹션 뷰 컴포넌트
│ │ ├── SectionWrapper.tsx # 공통 헤더 (접기/드래그/삭제)
│ │ ├── CredentialSectionView.tsx # 접속 정보 (마스킹/복사)
│ │ ├── UrlSectionView.tsx # URL 목록 (메모카드 포함)
│ │ ├── EnvSectionView.tsx # 환경변수 (secret 마스킹)
│ │ ├── CodeSectionView.tsx # 코드 스니펫 (CodeMirror 6, 리사이즈)
│ │ └── MarkdownSectionView.tsx # 자유 텍스트 (리사이즈 + 미리보기 토글)
│ ├── dashboard/
│ │ ├── Dashboard.tsx # 대시보드 뷰 (AppHeader + CardGrid/Editor 분기)
│ │ ├── AppHeader.tsx # 헤더 조합 래퍼 (TabBar + SearchFilterBar)
│ │ ├── TabBar.tsx # 탭 목록 + 오버플로우 메뉴 + 드래그 순서 변경 (@dnd-kit)
│ │ ├── SearchFilterBar.tsx # 키워드 검색 + 타입/태그 필터 + 공지 버튼
│ │ └── CardGrid.tsx # 카드 그리드 레이아웃
│ ├── onboarding/
│ │ ├── AnnouncementModal.tsx # 공지사항 + 릴리즈노트 모달
│ │ ├── GuideModal.tsx # 사용 가이드 슬라이드 스테퍼
│ │ ├── announcement-utils.ts # 24시간 dismiss 유틸 (localStorage)
│ │ ├── release-notes.ts # 릴리즈노트 데이터
│ │ └── guide-steps.ts # 가이드 슬라이드 데이터
│ ├── storage/
│ │ ├── schema.ts # ExportSchema 타입 정의 + 유효성 검사 (LEGACY_TYPE_MAP)
│ │ ├── export.ts # 전체/선택 DB 덤프 → JSON (FSAA + Blob 폴백)
│ │ ├── import.ts # JSON → DB Append/Replace (2-Pass 폴더 리매핑)
│ │ ├── ImportModeModal.tsx # 가져오기 모드 선택 모달
│ │ └── StorageButtons.tsx # 내보내기/가져오기 UI 버튼
│ ├── settings/
│ │ ├── SettingsModal.tsx # 환경설정 모달 (일반 + AI + 단축키 3탭)
│ │ ├── AISettingsTab.tsx # AI 탭 — Provider 드롭다운, API Key 입력/저장, 잔여 횟수 표시
│ │ └── KeybindingsTab.tsx # 단축키 커스터마이징 탭 (카테고리별 그룹, 키 녹화, 충돌 감지)
├── store/
│ ├── atoms.ts # Jotai atoms (탭, AI usage/provider/key, 검색, 대시보드, 온보딩)
│ └── tabHelpers.ts # openTab(), closeTab() 헬퍼 함수
└── shared/
├── components/
│ ├── AIUsageBanner.tsx # 공유 키 잔여 횟수 배너 (SmartPaste·요약 패널 상단)
│ ├── Modal.tsx # 공통 모달 (백드롭+ESC+중앙정렬, elevated/width/maxHeight)
│ ├── ModalHeader.tsx # 공통 모달 헤더 (제목+아이콘+X 닫기)
│ ├── Button.tsx # 공통 버튼 (primary/secondary/ghost/danger, sm/md)
│ ├── IconButton.tsx # 아이콘 버튼 (tooltip, sm/md)
│ ├── Input.tsx # 공통 텍스트 입력 (sm/md)
│ ├── TextArea.tsx # 공통 텍스트영역 (autoResize)
│ ├── Dropdown.tsx # 드롭다운 (trigger+items)
│ ├── Badge.tsx # 배지/태그 (xs/sm, default/accent/muted)
│ ├── AIErrorModal.tsx # AI 에러 모달 (에러 유형별 안내)
│ └── ContextMenu.tsx # 우클릭 메뉴 (이름 변경, 삭제)
├── hooks/
│ ├── useGlobalKeyboardShortcuts.ts # 전역 단축키 핸들러 (@tanstack/react-hotkeys 연동)
│ ├── useHotkeyRecorder.ts # 키 녹화 훅 (단축키 설정 UI용)
│ ├── useMarkdownHtml.ts # 마크다운 → HTML 변환 훅 (marked + DOMPurify)
│ ├── usePasswordReveal.ts # 비밀번호 표시/숨기기 토글 훅
│ ├── useClickOutside.ts # 외부 클릭 감지
│ └── useResizableHeight.ts # 드래그 리사이즈
└── utils/
├── cn.ts # className 조합 유틸리티 (falsy 자동 제거)
├── clipboard.ts # 클립보드 복사
├── editorExtensions.ts # CodeMirror 주석 하이라이팅 확장 (MatchDecorator)
├── editorKeymap.ts # CodeMirror 에디터 단축키 빌더
├── url.ts # URL 유효성 검사 (isSafeUrl)
├── highlight.tsx # 검색 키워드 하이라이트
└── error-report-dedup.ts # 에러 리포트 중복 전송 방지 (sessionStorage)
folders: ++id, parentId, name, order
items: ++id, folderId, title, *tags, type, order, pinned, updatedAt
config: id (단일 레코드, id=1 고정)
→ selectedProvider: 'anthropic' | 'google' | 'openai'
→ userApiKey: string (빈 문자열 = 공유 키 모드)
카드 타입 5종
| 타입 | 아이콘 | 콘텐츠 포맷 | 주요 필드 |
|---|---|---|---|
| Server | Terminal | StructuredContent | host, port, username, password, keyPath, note |
| DB | Database | StructuredContent | host, port, dbName, username, password, note |
| API | Globe | StructuredContent | url, method, apiKey, token, headers, note |
| Note | FileText | StructuredContent | content (자유 텍스트 + 코드, 마크다운 미리보기 토글) |
| Document | FileStack | HybridContent | 다중 섹션 (markdown, credentials, urls, env, code) |
interface HybridContent {
format: 'hybrid'
sections: AnySection[] // 5종: MarkdownSection, CredentialSection, UrlSection, EnvSection, CodeSection
}하나의 문서 안에 접속 정보 + URL + 환경변수 + 코드 + 메모를 섹션 단위로 조합 가능
- 5종 카드 타입으로 서버, DB, API, 메모, 문서를 체계적으로 관리
- 폴더 트리 계층 구조 + 태그 횡단 분류
- 드래그 앤 드롭 — 카드 그리드 순서 변경 + 폴더 간 이동
- 다중 선택 (Ctrl+Click, Shift+Click) 및 일괄 작업
- Fuse.js 키워드 검색 — 제목, 태그, 콘텐츠 통합 퍼지 매칭
- 타입/태그 필터 조합
- CodeMirror 6 기반 코드 에디터 (JSON, SQL, JavaScript, TypeScript, Python, YAML, HTML, CSS, Dockerfile)
//주석 하이라이팅 — MatchDecorator로 언어 모드 무관 시각적 강조 (Note 에디터 + Document 코드 섹션)- Note 카드 미리보기 토글 (소스/스플릿, 마크다운 렌더링)
- Document 섹션 편집 — DnD 정렬, 섹션별 접기/펼치기, 리사이즈, 섹션별 Smart Paste, 메모(markdown) 섹션 소스/미리보기 토글
- 저장 버튼 — 헤더에 상시 표시 (dirty 상태 연동, Ctrl+S 병행)
- JSON 내보내기/가져오기 (전체/선택, Append/Replace 모드)
- File System Access API +
<input>폴백 (Firefox 대응) - 자동 백업 알림 — 7일 경과 또는 미백업+10건 이상 시 toast 알림
- IndexedDB 영속 스토리지 (navigator.storage.persist)
- 다크/라이트 테마 전환
- 사이드바 접기/펼치기 — 헤더 접기 버튼 + hover 핸들로 복원
- 탭 기반 편집 — 다중 탭 동시 편집, Ctrl+S 저장
- 단축키 커스터마이징 — 환경설정 > 단축키 탭에서 카테고리별 키 재설정 (키 녹화, 충돌 감지, 브라우저 예약키 차단, 대안 키 제안)
- 키보드 단축키 — 새 카드(Mod+Alt+N), 검색(Mod+K), 탭 닫기(Mod+Alt+W), 저장(Mod+S), 줄 주석 토글(Mod+/) 등 14종
- 공지사항 & 사용 가이드 — 초회 접근 시 자동 표시
공유 키 모드 (기본) — 별도 설정 없이 사용 가능, IP당 20회/일 BYOK 모드 — 설정 > AI 탭에서 본인 API 키 입력 시 무제한 사용 (Anthropic · Google Gemini · OpenAI)
Vercel Edge Function 프록시 (api/v1/messages.ts)
├── 공유 키 모드: Anthropic Claude (Sonnet) — IP당 20회/일, X-RateLimit 헤더 응답
└── BYOK 모드: X-User-Api-Key + X-Provider 헤더 → provider별 분기
├── anthropic → Claude API 직접 전달
├── google → Gemini generateContent API (요청/응답 형식 정규화)
└── openai → ChatCompletions API (요청/응답 형식 정규화)
클라이언트 모델 매핑:
anthropic: Sonnet 4.6 (fast + quality)
google: Gemini 2.5 Flash (fast + quality)
openai: GPT-4o-mini (fast) / GPT-4o (quality)
| 기능 | 설명 |
|---|---|
| Smart Paste | 자유 텍스트 붙여넣기 → 카드 필드 자동 매핑 |
| MD Smart Paste | 자유 텍스트 → 마크다운 자동 변환 (헤더, 리스트, 표, 코드블록 등) |
| Document Smart Paste | 자유 텍스트 → Section[] 구조화 (document 타입) |
| 섹션별 Smart Paste | 각 섹션 타입에 맞는 텍스트 파싱 (env=KEY=VALUE, urls=URL추출 등) |
| 콘텐츠 요약 | 카드 내용 → 핵심 요약 + 키포인트 |
| 잔여 횟수 표시 | SmartPaste/요약 패널 상단 배너 — 공유 키 모드에서 오늘 남은 횟수 + 진행 바 |
| # | 항목 | 요약 | 우선순위 |
|---|---|---|---|
TabBar, SearchFilterBar 서브 컴포넌트 분리 |
|||
InfoCard 메뉴 > 복제, Document 타입 섹션 deep copy + nanoid 재발급 |
|||
--sidebar-width CSS 변수 동적 조절 |
|||
| 7 | 섹션 복제 기능 | SectionWrapper 메뉴에 "복제" 옵션 추가 (deep copy + nanoid 재발급) |
P3 |
| 8 | Credential extra → textarea | extra 필드를 textarea로 교체 (SSH 키 등 멀티라인 데이터 지원) |
P3 |
aria-pressed, 태그 드롭다운 role="listbox", 모달 role="dialog" aria-modal 추가 |
|||
| 13 | 클립보드 자동 지우기 | 비밀번호·토큰 복사 후 10초 타이머로 navigator.clipboard.writeText('') 자동 호출 (보안 강화) |
P3 |
| 14 | 내보내기 민감 필드 제외 | JSON 내보내기 시 password / apiKey / token 필드 제외 체크박스 옵션 추가 | P3 |
| 15 | DB 쿼리 성능 최적화 | CardGrid 전체 items 로드 → 타입 인덱스(where('type')) 활용 필터링, 태그 추출 쿼리 최적화 (대규모 데이터 10K+ 대응) |
P3 |
| 16 | Note/Document 카드 그리드 표시 개선 | 카드 크기 고정 유지, 메모/문서 내용 미리보기가 잘려 보이는 문제 개선 — 텍스트 클리핑 최적화, 섹션 요약 표시 개선 | P2 |
| 항목 | 내용 |
|---|---|
| FSAA 브라우저 지원 | File System Access API는 Chrome/Edge 전용. Firefox → <input> 폴백 자동 적용 |
| 모바일 제한적 지원 | 햄버거 메뉴 + 오버레이 드로어 구현. 카드 편집 UI는 데스크탑 최적화 |
좁은 화면 헤더 레이아웃 수정
- 좁은 창 탭/검색 겹침 수정 —
SearchFilterBar가shrink-0고정폭이라 좁은 창에서 탭 컨테이너를 0폭으로 밀어내 탭 제목과 검색 영역이 겹치던 문제 해결 - 타입 필터 반응형 — 헤더 컨테이너 쿼리(
@container) 기반으로 헤더 폭이 좁아지면(@4xl미만) 타입 필터 6버튼을 '필터' 드롭다운으로 접어 공간 확보 (기존 태그·정렬 드롭다운과 일관) TabBar탭 목록overflow-hidden클리핑 추가 — 탭 오버플로우 시 검색 영역 침범 방지
카드 콘텐츠 암호화 & 커맨드 팔레트
- 카드 콘텐츠 암호화 — 설정 > 보안 탭에서 활성화, 패스프레이즈로 잠금, 앱 재시작 시 재입력 필요
- 보안 탭 신설 — 환경설정 > 보안에서 암호화 활성화·비활성화·패스프레이즈 변경
- 커맨드 팔레트 —
Mod+Shift+P로 명령 빠르게 실행, 검색으로 명령 탐색 및 단축키 확인 - 암호화 백업 — 암호화 상태로 내보내기·가져오기, 암호화 파일 자동 감지
LLM 멀티 프로바이더 BYOK 확장
- BYOK (Bring Your Own Key) — 설정 > AI 탭에서 Anthropic·Google Gemini·OpenAI API 키 직접 입력, 일일 제한 없이 본인 quota 사용
- 멀티 프로바이더 라우팅 — Vercel Edge Function이
X-Provider헤더 기반으로 provider별 API 분기 호출 및 응답 형식 정규화 (클라이언트 코드 무변경) - 공유 키 일일 한도 조정 — IP당 50회/일 → 20회/일, 모든 기능 모델을 Haiku → Sonnet으로 품질 상향
- 잔여 횟수 실시간 표시 — SmartPaste·요약 패널 상단 배너에 오늘 남은 횟수 + 진행 바 + "내 키 사용 →" 버튼
- AI 설정 탭 신설 — 환경설정 2탭(일반·단축키) → 3탭(일반·AI·단축키), Provider 드롭다운 + API Key 저장/지우기 + 잔여 횟수 표시
- DB v14 마이그레이션 — AppConfig에
selectedProvider,userApiKey필드 추가 (기존 데이터 자동 업그레이드) - BYOK 에러 코드 —
byok_auth_error(잘못된 키),byok_quota_exceeded(사용자 한도 초과) 분리
탭 드래그 순서 변경 & 폴더 이동 개선 & 코드 품질 개선
- 탭 드래그 순서 변경 — TabBar에서 @dnd-kit으로 탭을 드래그하여 순서 재배치 가능
- 폴더 cross-parent 이동 — 폴더를 다른 부모 폴더 영역으로 드래그하면 계층 이동 (순환 참조 방지)
- InfoCard 컨텍스트 메뉴 버블링 방지 — 메뉴 항목 클릭이 카드 클릭으로 전파되던 버그 수정
- card.save 단축키 동적화 — 하드코딩된 Ctrl+S를 effectiveKeys 기반 useHotkey로 교체 (사용자 재맵핑 반영)
- 일괄 삭제 / 폴더 이동 에러 처리 보강 — DB 실패 시 toast.error 표시
- SECTION_META 상수 통합 — 섹션 아이콘·레이블·이모지 5파일 중복 정의를 shared/constants에 단일화
- parseAIResult<T> 헬퍼 추출 — ai.ts 4개 메서드의 반복 캐스팅 패턴 제거
- dirty 계산 IIFE → useMemo — CardDetailEditor 렌더 최적화
사이드바 리사이즈 & 반응형 레이아웃 & 접근성 강화
- 사이드바 드래그 리사이즈 — 오른쪽 가장자리 드래그로 너비 조절 (180~480px), 새로고침 후에도 유지
- 반응형 모바일 레이아웃 — 768px 이하에서 햄버거 버튼 + 사이드바 오버레이 드로어
- 접근성 강화 — role="tree", aria-pressed, aria-selected, aria-expanded 적용
Document 프리셋 & 코드 언어 확장 & 카드 복제/정렬
- Document 섹션 프리셋 4종 — 카드 생성 시 빈 문서 / 서버 접속 / API 문서 / 레포 관리 템플릿 선택
- Code 섹션 언어 7종 추가 — yaml, python, javascript, typescript, html, css, dockerfile (동적 import)
- 카드 복제 — 컨텍스트 메뉴 > 복제로 카드 deep copy (Document 타입은 섹션 ID 재발급)
- 정렬 드롭다운 — 최신순 / 오래된순 / 이름순 전환
- 다중 선택 폴더 이동 — 선택한 카드를 다른 폴더로 일괄 이동 모달
- Vitest 단위 테스트 21개 추가 (content.ts 핵심 로직)
코드 품질 개선
parseContent방어 검증 강화 — sections/fields 배열 내부 필드 타입 검사 추가, 손상 JSON 입력 시 legacy 안전 fallbackEnvSectionViewshowVal동기화 —useEffect로entry.secret외부 변경 시 표시 상태 자동 반영TreeNode이중 캐스팅 제거 —handleClick시그니처를MouseEvent | KeyboardEvent유니온으로 확장SearchFilterBarX버튼 UX 수정 — 검색어 지우기 버튼이 typeFilter/tagFilter까지 초기화하던 문제 수정 (searchQuery만 초기화)DocumentEditorSmart Paste 파서 분리 — 75행 인라인 switch-case를parseSectionPaste순수 함수로 추출 (URL_REGEX,CREDENTIAL_PATTERNS상수화)- CSS 유틸 클래스 4종 추가 —
.subtle-icon-btn,.menu-item-btn,.btn-primary,.section-label(9개 파일 반복 패턴 공통화)
버그 수정
- Smart Paste 타입 스키마 오류 수정 —
detectedType열거값에 폐기된'markdown'잔존 →'note'로 정정 - 단축키 설정에서 Escape 키가 취소 대신 단축키로 등록되는 버그 수정
exportSelectedItems()완료 후lastExportAt미갱신 수정 (백업 알림 기준 불일치 해소)CardFormModal저장 실패 시 토스트 오류 표시 누락 수정release-notes.tsv1.3.2 항목 미등록 수정
코드 품질 개선
useMarkdownHtml훅 추출 — 마크다운 렌더링 패턴 4곳 중복 제거editorExtensions.ts추출 — CodeMirror//주석 하이라이팅 중복 제거CardDetailEditor.tsx분리 →NoteEditor.tsx,MarkdownEditorWithToggle.tsxSidebar.handleDragEnd→treeUtils.ts순수 함수 3종(moveItemsToFolder,reorderItems,reorderFolders)으로 분리TreeNode.tsx폴더/아이템 리네임 로직 →RenameInput컴포넌트로 통합Button,IconButton—ButtonHTMLAttributes상속 (aria-, data- 속성 전달 지원)TabBar탭 닫기 버튼 HTML 명세 준수 (<button>내<span role="button">중첩 제거)Dropdown키보드 접근성 추가 (Enter/Space 열기)- Claude API 응답 런타임 필드 검증 추가 (4개 메서드)
AI_ERROR_LABELS타입Record<AIErrorCode, string>으로 강화
파비콘 교체
- 앱 파비콘을 Vite 기본 아이콘에서 DevNote D 로고로 교체 (브라우저 탭·작업표시줄에 반영)
Document View 접속 정보 개선
- 주소 단일 행(
username@host:port) → 호스트 / 사용자명 두 행으로 분리 표시 - 각 필드에 개별 복사 버튼 제공
카드 그리드 DnD 순서 변경
- 메인 카드 그리드에서 드래그앤드롭으로 카드 배치 순서 변경
- hover 시
GripVertical드래그 핸들 표시, 드래그 중 반투명·드롭 대상 ring 하이라이트 - drop 시 IndexedDB
order필드 일괄 갱신 (새로고침 후에도 순서 유지) - 검색 중 DnD 자동 비활성화 (Fuse.js 관련도 순 결과에서는 순서 변경 불필요)
코드베이스 리팩토링
- 공통 UI 컴포넌트 10종 추출 — Modal, ModalHeader, Button, IconButton, Input, TextArea, Dropdown, Badge, AIErrorModal, ContextMenu
usePasswordReveal훅 생성 — 3곳 비밀번호 표시/숨기기 패턴 통합cn()유틸리티 도입 — className 조합 간결화- 전체 function 선언 → const 화살표 함수 변환 (42개 파일, 69+ 함수)
- CSS
@layer components등록 —.label-text,.meta-text,.subtle-btn반복 패턴 공통화 - 매직넘버 상수화 (
TREE_DEPTH_INDENT_PX),useClickOutside훅 적용 확대 - 총 538줄 순감소 (+480 / -1,018)
단축키 커스터마이징 시스템
- 환경설정 > 단축키 탭 신설 — 14종 명령을 카테고리별(카드/폴더/탭/검색/UI/에디터)로 그룹화
- 키 녹화 모드 — 설정 버튼 클릭 후 원하는 키 입력으로 즉시 등록
- 충돌 감지 및 브라우저 예약키 차단 (Mod+N, Mod+T 등) + 경고 표시
- 대안 키 자동 제안 (Alt·Shift 변형 조합)
- 기본값 초기화 버튼 (단일 항목 / 전체)
- Jotai
keybindingOverridesAtom으로 IndexedDB 영속 저장
Note 카드 (구 Markdown)
- 카드 타입 명칭 변경:
markdown→note(DB v13 자동 마이그레이션) - 기존 사용자 데이터 마이그레이션 자동 적용 (앱 시작 시 1회)
- JSON 가져오기 시 구
markdown타입 자동 변환 (LEGACY_TYPE_MAP)
에디터 // 주석 하이라이팅
- MatchDecorator로
//.*패턴 감지 → muted/italic 색상 강조 - 언어 모드(text/bash/sql/json) 무관하게 동작
- Note 에디터(NoteEditor) + Document 코드 섹션(MiniCodeEditor) 양쪽 적용
API 프록시 Vercel 마이그레이션
- Cloudflare Worker → Vercel Edge Function으로 API 프록시 이전
- Cloudflare-to-Cloudflare WAF 간헐적 403 차단 문제 근본 해결
- 지수 백오프 + 지터 재시도 (403/429/529, 최대 3회)
- User-Agent·Accept 헤더 추가로 WAF 봇 감지 방지
- Cloudflare WAF HTML challenge 감지 로직 추가
- 에러 리포트에 request-id, 재시도 횟수 디버깅 정보 포함
- 환경변수 리네이밍:
VITE_WORKER_URL→VITE_API_URL - URL trailing slash 자동 제거 방어 로직 추가
추가
- 카드/폴더 삭제 시 확인 대화상자 표시
- Markdown Smart Paste — 자유 텍스트를 Claude AI로 마크다운 정리 (헤더, 표, 코드블록 등 자동 변환)
- 사용 가이드에 AI Smart Paste 단계 추가
제거
- 개인 API 키(BYOK) 설정 UI 제거 — 공유 키 단일 체제로 완전 전환
- 오프라인 정규식 파서(Tier 1) 제거 — Smart Paste 전체를 Claude AI 단일 호출로 통합
AI 공유 키 단일 체제 전환
- Cloudflare Workers 공유 키 모드 — API 키 없이 AI 기능 사용 가능 (IP당 50회/일 rate limit)
- AI 모델 자동 분기 — Smart Paste·요약은 Haiku(속도 우선), Document Smart Paste는 Sonnet(품질 우선)으로 자동 선택
- Claude Haiku 4.5 모델 ID 수정 (
claude-haiku-4-5-20251001) — 기존 잘못된 ID로 인한 오류 수정
버그 수정
- Smart Paste API 오탐 수정 — URL에 'api' 키워드가 포함된 경우 api 타입으로 오감지되던 문제 해결. curl 명령 / 인증 키 / HTTP 메서드+URL 조합이 있을 때만 api로 감지
- Note 카드 Smart Paste 타입 고정 — 텍스트 붙여넣기 시 타입 자동 감지가 note를 다른 타입으로 오인하던 문제 해결
- Document 카드 상단 컬러 테두리 누락 수정
리팩토링
AppHeader.tsx분리 — 단일 파일(387줄)을TabBar,SearchFilterBar서브 컴포넌트로 분리
MD Smart Paste 마크다운 변환
- 자유 텍스트를 마크다운으로 자동 변환:
1)①→ 순서 리스트,•▸→ 불릿 리스트, 독립 URL → 링크, 들여쓰기 → 펜스 코드블록,===/___→ 구분선
개선사항
- 섹션별 Smart Paste — 각 섹션 헤더에 붙여넣기 버튼 추가 (타입별 자동 파싱)
- 사이드바 접기/펼치기 토글 추가
- Card Edit 저장 버튼 추가 (dirty 상태 연동)
버그 수정
- CapsLock 상태에서 Ctrl+S 저장 안 되던 오류 수정
- Document URL 섹션 라벨 입력 글씨 잘림 수정
- Document 메모 섹션에서
1),1.형식 텍스트가 View Modal에서 생략되던 오류 수정
DevNote 첫 번째 정식 릴리즈
핵심 기능
- 5종 카드 타입 — Server, DB, API, Markdown, Document
- Document 카드 — 5종 섹션 에디터 (Markdown, Code, Credentials, URLs, Env), DnD 섹션 정렬
- 폴더 트리 & 드래그 앤 드롭 — 계층 구조 관리, 폴더 간 이동
- Smart Paste — 클립보드 붙여넣기로 카드 자동 생성 (Claude AI)
- Fuse.js 키워드 검색 — 제목, 태그, 콘텐츠 통합 퍼지 매칭
- 타입/태그 필터 & 다중 선택 — Ctrl+Click, Shift+Click 지원
- 탭 기반 편집 — 다중 탭 동시 편집, CodeMirror 6 에디터
- Markdown 에디터 미리보기 — 소스/스플릿 토글
- JSON 내보내기/가져오기 — 전체/선택, Append/Replace 모드, 자동 백업 알림
- 다크/라이트 테마 — 즉시 전환
- AI 콘텐츠 요약 — Vercel Edge Function 공유 키
- 공지사항 & 사용 가이드 — 초회 접근 시 자동 표시, 릴리즈노트
보안
- XSS 방지: URL 프로토콜 검증 (http/https만 허용)
- AI API 키 클라이언트 미보유 (Vercel Edge Function 프록시를 통해서만 호출)
- IndexedDB 영속 스토리지 (navigator.storage.persist)
npm install
npm run dev # http://localhost:3000
npm run build # dist/ 빌드
npm run lint # ESLint 검사이 프로젝트는 MIT License로 배포됩니다.