feat: implement multi-tab JSON editor with enhanced functionality

README-ko.md

@@ -39,6 +39,19 @@ SvelteKit과 Svelte 5로 구축된 강력한 JSON 시각화 및 편집 도구입
 - **더 보기**: 20개 이상의 항목을 가진 노드를 "더 보기" 기능과 함께 자동 축소
 - **개별 토글**: 개별 참조 항목 확장/축소
 
+### 📑 다중 탭 지원
+
+- **여러 문서**: 별도의 탭에서 여러 JSON 문서 작업
+- **탭 관리**: 탭 생성, 이름 변경, 복제 및 닫기
+- **가져오기/내보내기**: JSON 파일 가져오기 및 개별 탭 내보내기
+- **키보드 단축키**:
+  - `Ctrl/Cmd + T`: 새 탭
+  - `Ctrl/Cmd + W`: 현재 탭 닫기
+  - `Ctrl/Cmd + Tab`: 다음 탭
+  - `Ctrl/Cmd + Shift + Tab`: 이전 탭
+  - `Ctrl/Cmd + 1-9`: 특정 탭으로 전환
+- **자동 저장**: 탭이 localStorage에 자동 저장됨
+
 ### 🌐 다국어 지원
 
 - **다중 언어**: 영어 및 한국어 지원

README.md

@@ -39,6 +39,19 @@ A powerful JSON visualization and editing tool built with SvelteKit and Svelte 5
 - **Show More**: Automatically collapse nodes with 20+ items with "show more" functionality
 - **Individual Toggles**: Expand/collapse individual reference items
 
+### 📑 Multi-Tab Support
+
+- **Multiple Documents**: Work with multiple JSON documents in separate tabs
+- **Tab Management**: Create, rename, duplicate, and close tabs
+- **Import/Export**: Import JSON files and export individual tabs
+- **Keyboard Shortcuts**:
+  - `Ctrl/Cmd + T`: New tab
+  - `Ctrl/Cmd + W`: Close current tab
+  - `Ctrl/Cmd + Tab`: Next tab
+  - `Ctrl/Cmd + Shift + Tab`: Previous tab
+  - `Ctrl/Cmd + 1-9`: Switch to specific tab
+- **Auto-save**: Tabs are automatically saved to localStorage
+
 ### 🌐 Internationalization
 
 - **Multi-language**: English and Korean support

eslint.config.js

@@ -60,15 +60,35 @@ export default [
 	},
 	{
 		ignores: [
+			// Build output
 			'.svelte-kit/**',
 			'build/**',
 			'dist/**',
 			'node_modules/**',
+			// Test reports
+			'playwright-report/**',
+			'test-results/**',
+			'coverage/**',
+			// Config and generated files
+			'*.config.js',
+			'*.config.ts',
+			'.DS_Store',
+			'*.min.js',
+			// Temporary files
+			'*.tmp',
+			'*.log',
 			'.env',
 			'.env.*',
 			'!.env.example',
 			'vite.config.js.timestamp-*',
 			'vite.config.ts.timestamp-*',
+			// IDE
+			'.vscode/**',
+			'.idea/**',
+			// Documentation
+			'CLAUDE.md',
+			'*.md',
+			// Generated i18n files
 			'src/i18n/i18n-*.ts'
 		]
 	}

package.json

@@ -62,6 +62,7 @@
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "^6.38.1",
+		"@faker-js/faker": "^9.9.0",
 		"@lucide/svelte": "^0.515.0",
 		"@xyflow/svelte": "^1.2.2",
 		"class-variance-authority": "^0.7.1",

src/i18n/en/index.ts

@@ -35,7 +35,10 @@ const en: BaseTranslation = {
 		clearAllConfirm:
 			'Are you sure you want to clear all settings? This will remove all saved headers, body, and URL from storage.',
 		cancel: 'Cancel',
-		save: 'Save'
+		save: 'Save',
+		regenerate: 'Regenerate',
+		regenerateTooltip: 'Regenerate values while preserving JSON structure',
+		regenerateSuccess: 'JSON values regenerated successfully'
 	},
 	graph: {
 		showMore: 'Show {count} more',
@@ -51,6 +54,15 @@ const en: BaseTranslation = {
 	},
 	footer: {
 		ready: 'Ready'
+	},
+	tabs: {
+		rename: 'Rename',
+		duplicate: 'Duplicate',
+		exportJson: 'Export JSON',
+		closeTab: 'Close Tab',
+		importJsonFile: 'Import JSON File',
+		newTab: 'New Tab',
+		import: 'Import'
 	}
 } satisfies BaseTranslation;
 

src/i18n/i18n-types.ts

@@ -143,6 +143,18 @@ type RootTranslation = {
 		 * S​a​v​e
 		 */
 		save: string;
+		/**
+		 * R​e​g​e​n​e​r​a​t​e
+		 */
+		regenerate: string;
+		/**
+		 * R​e​g​e​n​e​r​a​t​e​ ​v​a​l​u​e​s​ ​w​h​i​l​e​ ​p​r​e​s​e​r​v​i​n​g​ ​J​S​O​N​ ​s​t​r​u​c​t​u​r​e
+		 */
+		regenerateTooltip: string;
+		/**
+		 * J​S​O​N​ ​v​a​l​u​e​s​ ​r​e​g​e​n​e​r​a​t​e​d​ ​s​u​c​c​e​s​s​f​u​l​l​y
+		 */
+		regenerateSuccess: string;
 	};
 	graph: {
 		/**
@@ -187,6 +199,36 @@ type RootTranslation = {
 		 */
 		ready: string;
 	};
+	tabs: {
+		/**
+		 * R​e​n​a​m​e
+		 */
+		rename: string;
+		/**
+		 * D​u​p​l​i​c​a​t​e
+		 */
+		duplicate: string;
+		/**
+		 * E​x​p​o​r​t​ ​J​S​O​N
+		 */
+		exportJson: string;
+		/**
+		 * C​l​o​s​e​ ​T​a​b
+		 */
+		closeTab: string;
+		/**
+		 * I​m​p​o​r​t​ ​J​S​O​N​ ​F​i​l​e
+		 */
+		importJsonFile: string;
+		/**
+		 * N​e​w​ ​T​a​b
+		 */
+		newTab: string;
+		/**
+		 * I​m​p​o​r​t
+		 */
+		import: string;
+	};
 };
 
 export type TranslationFunctions = {
@@ -317,6 +359,18 @@ export type TranslationFunctions = {
 		 * Save
 		 */
 		save: () => LocalizedString;
+		/**
+		 * Regenerate
+		 */
+		regenerate: () => LocalizedString;
+		/**
+		 * Regenerate values while preserving JSON structure
+		 */
+		regenerateTooltip: () => LocalizedString;
+		/**
+		 * JSON values regenerated successfully
+		 */
+		regenerateSuccess: () => LocalizedString;
 	};
 	graph: {
 		/**
@@ -360,6 +414,36 @@ export type TranslationFunctions = {
 		 */
 		ready: () => LocalizedString;
 	};
+	tabs: {
+		/**
+		 * Rename
+		 */
+		rename: () => LocalizedString;
+		/**
+		 * Duplicate
+		 */
+		duplicate: () => LocalizedString;
+		/**
+		 * Export JSON
+		 */
+		exportJson: () => LocalizedString;
+		/**
+		 * Close Tab
+		 */
+		closeTab: () => LocalizedString;
+		/**
+		 * Import JSON File
+		 */
+		importJsonFile: () => LocalizedString;
+		/**
+		 * New Tab
+		 */
+		newTab: () => LocalizedString;
+		/**
+		 * Import
+		 */
+		import: () => LocalizedString;
+	};
 };
 
 export type Formatters = {};

src/i18n/ko/index.ts

@@ -34,7 +34,10 @@ const ko: Translation = {
 		clearAll: '모두 지우기',
 		clearAllConfirm: '모든 설정을 지우시겠습니까? 저장된 헤더, 본문, URL이 모두 삭제됩니다.',
 		cancel: '취소',
-		save: '저장'
+		save: '저장',
+		regenerate: '재생성',
+		regenerateTooltip: 'JSON 구조를 유지하면서 값만 재생성',
+		regenerateSuccess: 'JSON 값이 성공적으로 재생성되었습니다'
 	},
 	graph: {
 		showMore: '{count} 개 더 보기',
@@ -50,6 +53,15 @@ const ko: Translation = {
 	},
 	footer: {
 		ready: '준비됨'
+	},
+	tabs: {
+		rename: '이름 변경',
+		duplicate: '복제',
+		exportJson: 'JSON 내보내기',
+		closeTab: '탭 닫기',
+		importJsonFile: 'JSON 파일 가져오기',
+		newTab: '새 탭',
+		import: '가져오기'
 	}
 } satisfies Translation;
 

src/lib/components/JsonEditor.svelte

@@ -4,6 +4,7 @@
 	import { EditorState } from '@codemirror/state';
 	import { json } from '@codemirror/lang-json';
 	import { syntaxTree } from '@codemirror/language';
+	import type { TreeCursor } from '@lezer/common';
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import { mode } from 'mode-watcher';
 	import { logger } from '$lib/logger';
@@ -26,7 +27,7 @@
 		}
 
 		// Recursive function to traverse with path context
-		function traverse(cursor: any, path: string[] = []) {
+		function traverse(cursor: TreeCursor, path: string[] = []) {
 			do {
 				const nodeName = cursor.name;