fix: resolve ESLint errors and apply Prettier formatting

.eslintignore

@@ -0,0 +1,31 @@
+# Build output
+build/
+dist/
+.svelte-kit/
+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
+
+# IDE
+.vscode/
+.idea/
+
+# Documentation
+CLAUDE.md
+*.md

.github/workflows/docker-publish.yml

@@ -54,4 +54,4 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-to: type=gha,mode=max

.github/workflows/pr-checks.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   lint-and-format:
     runs-on: ubuntu-latest
-    
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -30,4 +30,4 @@ jobs:
         run: npm run format:check
 
       - name: Type check
-        run: npm run check
+        run: npm run check

README-ko.md

@@ -1,6 +1,6 @@
 # PDJsonEditor
 
-*[English](README.md)*
+_[English](README.md)_
 
 SvelteKit과 Svelte 5로 구축된 강력한 JSON 시각화 및 편집 도구입니다. JSON 데이터를 코드 에디터와 인터랙티브 그래프 뷰에서 동시에 보고 편집할 수 있습니다.
 
@@ -11,60 +11,70 @@ SvelteKit과 Svelte 5로 구축된 강력한 JSON 시각화 및 편집 도구입
 ## ✨ 주요 기능
 
 ### 📝 고급 JSON 에디터
+
 - **문법 강조**: CodeMirror 기반 JSON 문법 강조 기능
 - **실시간 검증**: 즉시 JSON 문법 검증 및 오류 리포팅
 - **포맷 & 압축**: 원클릭 JSON 포맷팅 및 압축 기능
 - **네비게이션**: 그래프 노드 클릭으로 해당 JSON 위치로 이동
 
 ### 🔗 HTTP 요청 통합
+
 - **다중 메소드 지원**: GET, POST, PUT, DELETE, PATCH 요청
 - **커스텀 헤더**: HTTP 헤더 추가 및 관리
 - **요청 본문**: POST/PUT/PATCH용 커스텀 요청 본문 설정
 - **URL 가져오기**: URL에서 직접 JSON 데이터 가져오기
 
 ### 📊 인터랙티브 그래프 시각화
+
 - **트리 구조**: JSON을 인터랙티브 트리 그래프로 시각화
 - **컴팩트 노드**: 원시 값 그룹화 디스플레이
 - **확장/축소**: 시각적 표시와 함께 노드 확장 토글
 - **참조 네비게이션**: 관련 객체와 배열 간 네비게이션
 - **자동 레이아웃**: Dagre 기반 자동 그래프 레이아웃
 
 ### 🎯 스마트 노드 디스플레이
+
 - **그룹화된 원시 값**: 명확성을 위해 부모 노드에서 원시 값 그룹화
 - **참조 타입**: 객체와 배열을 참조로 표시 (예: `address {3}`, `hobbies [3]`)
 - **더 보기**: 20개 이상의 항목을 가진 노드를 "더 보기" 기능과 함께 자동 축소
 - **개별 토글**: 개별 참조 항목 확장/축소
 
 ### 🌐 다국어 지원
+
 - **다중 언어**: 영어 및 한국어 지원
 - **언어 전환기**: 헤더에서 쉬운 언어 전환
 - **지속적 설정**: localStorage에 언어 설정 저장
 
 ## 🚀 시작하기
 
 ### 필수 조건
+
 - Node.js v20.19 이상
 - npm 또는 yarn 패키지 매니저
 
 ### 설치
 
 1. **저장소 클론**
+
 ```bash
 git clone https://github.com/podosoft-dev/pdjsoneditor.git
 cd pdjsoneditor
 ```
 
 2. **의존성 설치**
+
 ```bash
 npm install
 ```
 
 3. **개발 서버 시작**
+
 ```bash
 npm run dev
 ```
 
 4. **브라우저에서 열기**
+
 ```
 http://localhost:5173
 ```
@@ -141,11 +151,12 @@ services:
     image: ghcr.io/podosoft-dev/pdjsoneditor:latest
     container_name: pdjsoneditor
     ports:
-      - "3000:3000"
+      - '3000:3000'
     restart: unless-stopped
 ```
 
 그 다음 실행:
+
 ```bash
 docker-compose up -d
 ```
@@ -155,17 +166,20 @@ docker-compose up -d
 ## 📖 사용 방법
 
 ### 기본 JSON 편집
+
 1. **JSON 붙여넣기 또는 입력**: 왼쪽 에디터 패널에서
 2. **구조 보기**: 오른쪽 그래프 패널에서
 3. **뷰 간 네비게이션**: 노드 클릭 또는 에디터 사용
 
 ### URL에서 데이터 가져오기
+
 1. **HTTP 메소드 선택**: 드롭다운에서 (GET, POST, PUT, DELETE, PATCH)
 2. **URL 입력**: 입력 필드에
 3. **헤더와 본문 설정**: Settings 버튼 사용 (선택사항)
 4. **"Go" 클릭**: JSON 데이터를 가져와서 로드
 
 ### 그래프 상호작용
+
 - **확장/축소**: 노드의 색깔있는 핸들 클릭
 - **더 보기**: 많은 항목이 있는 노드에서 "더 보기" 클릭
 - **네비게이션**: 노드 클릭으로 해당 JSON 위치로 이동
@@ -193,4 +207,4 @@ docker-compose up -d
 
 <div align="center">
   <strong><a href="https://podosoft.io">PODOSOFT</a>에서 ❤️로 만들었습니다</strong>
-</div>
+</div>

README.md

@@ -1,6 +1,6 @@
 # PDJsonEditor
 
-*[한국어](README-ko.md)*
+_[한국어](README-ko.md)_
 
 A powerful JSON visualization and editing tool built with SvelteKit and Svelte 5. View and edit JSON data simultaneously in both code editor and interactive graph views.
 
@@ -11,60 +11,70 @@ A powerful JSON visualization and editing tool built with SvelteKit and Svelte 5
 ## ✨ Features
 
 ### 📝 Advanced JSON Editor
+
 - **Syntax Highlighting**: CodeMirror-powered editor with JSON syntax highlighting
 - **Real-time Validation**: Instant JSON syntax validation and error reporting
 - **Format & Minify**: One-click JSON formatting and minification
 - **Navigation**: Click on graph nodes to jump to corresponding JSON location
 
 ### 🔗 HTTP Request Integration
+
 - **Multi-Method Support**: GET, POST, PUT, DELETE, PATCH requests
 - **Custom Headers**: Add and manage HTTP headers
 - **Request Body**: Configure custom request bodies for POST/PUT/PATCH
 - **URL Import**: Fetch JSON data directly from URLs
 
 ### 📊 Interactive Graph Visualization
+
 - **Tree Structure**: Visualize JSON as an interactive tree graph
 - **Compact Nodes**: Compact display grouping primitive values
 - **Expand/Collapse**: Toggle node expansion with visual indicators
 - **Reference Navigation**: Navigate between related objects and arrays
 - **Auto Layout**: Dagre-powered automatic graph layout
 
 ### 🎯 Smart Node Display
+
 - **Grouped Primitives**: Primitive values grouped in parent nodes for clarity
 - **Reference Types**: Objects and arrays shown as references (e.g., `address {3}`, `hobbies [3]`)
 - **Show More**: Automatically collapse nodes with 20+ items with "show more" functionality
 - **Individual Toggles**: Expand/collapse individual reference items
 
 ### 🌐 Internationalization
+
 - **Multi-language**: English and Korean support
 - **Language Switcher**: Easy language switching in header
 - **Persistent Settings**: Language preference saved in localStorage
 
 ## 🚀 Getting Started
 
 ### Prerequisites
+
 - Node.js v20.19 or higher
 - npm or yarn package manager
 
 ### Installation
 
 1. **Clone the repository**
+
 ```bash
 git clone https://github.com/podosoft-dev/pdjsoneditor.git
 cd pdjsoneditor
 ```
 
 2. **Install dependencies**
+
 ```bash
 npm install
 ```
 
 3. **Start development server**
+
 ```bash
 npm run dev
 ```
 
 4. **Open in browser**
+
 ```
 http://localhost:5173
 ```
@@ -141,11 +151,12 @@ services:
     image: ghcr.io/podosoft-dev/pdjsoneditor:latest
     container_name: pdjsoneditor
     ports:
-      - "3000:3000"
+      - '3000:3000'
     restart: unless-stopped
 ```
 
 Then run:
+
 ```bash
 docker-compose up -d
 ```
@@ -155,17 +166,20 @@ Access the application at `http://localhost:3000`
 ## 📖 Usage
 
 ### Basic JSON Editing
+
 1. **Paste or type JSON** in the left editor panel
 2. **View the structure** in the right graph panel
 3. **Navigate between views** by clicking nodes or using the editor
 
 ### Fetching Data from URLs
+
 1. **Select HTTP method** from the dropdown (GET, POST, PUT, DELETE, PATCH)
 2. **Enter the URL** in the input field
 3. **Configure headers and body** using the Settings button (optional)
 4. **Click "Go"** to fetch and load the JSON data
 
 ### Graph Interaction
+
 - **Expand/Collapse**: Click the colored handles on nodes
 - **Show More**: Click "Show more" on nodes with many items
 - **Navigate**: Click nodes to jump to corresponding JSON location
@@ -193,4 +207,4 @@ If you encounter any issues or have questions, please [open an issue](https://gi
 
 <div align="center">
   <strong>Made with ❤️ by <a href="https://podosoft.io">PODOSOFT</a></strong>
-</div>
+</div>

docker-compose.yml

@@ -8,15 +8,15 @@ services:
     image: pdjsoneditor:latest
     container_name: pdjsoneditor
     ports:
-      - "3000:3000"
+      - '3000:3000'
     environment:
       - NODE_ENV=production
       - HOST=0.0.0.0
       - PORT=3000
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000"]
+      test: ['CMD', 'wget', '--no-verbose', '--tries=1', '--spider', 'http://localhost:3000']
       interval: 30s
       timeout: 10s
       retries: 3
-      start_period: 40s
+      start_period: 40s

playwright.config.ts

@@ -22,36 +22,33 @@ export default defineConfig({
 	/* Opt out of parallel tests on CI. */
 	workers: process.env.CI ? 1 : undefined,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
-	reporter: [
-		['html', { outputFolder: 'playwright-report' }],
-		['list']
-	],
+	reporter: [['html', { outputFolder: 'playwright-report' }], ['list']],
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Base URL to use in actions like `await page.goto('/')`. */
 		baseURL: 'http://localhost:5173',
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: 'on-first-retry',
 		/* Take screenshot on failure */
-		screenshot: 'only-on-failure',
+		screenshot: 'only-on-failure'
 	},
 
 	/* Configure projects for major browsers */
 	projects: [
 		{
 			name: 'chromium',
-			use: { ...devices['Desktop Chrome'] },
+			use: { ...devices['Desktop Chrome'] }
 		},
 
 		{
 			name: 'firefox',
-			use: { ...devices['Desktop Firefox'] },
+			use: { ...devices['Desktop Firefox'] }
 		},
 
 		{
 			name: 'webkit',
-			use: { ...devices['Desktop Safari'] },
-		},
+			use: { ...devices['Desktop Safari'] }
+		}
 
 		/* Test against mobile viewports. */
 		// {
@@ -80,13 +77,13 @@ export default defineConfig({
 			command: 'npm run dev',
 			url: 'http://localhost:5173',
 			reuseExistingServer: !process.env.CI,
-			timeout: 120 * 1000,
+			timeout: 120 * 1000
 		},
 		{
 			command: 'npm run test:server',
 			url: 'http://localhost:3001',
 			reuseExistingServer: !process.env.CI,
-			timeout: 120 * 1000,
+			timeout: 120 * 1000
 		}
-	],
-});
+	]
+});

src/i18n/en/index.ts

@@ -30,9 +30,10 @@ const en: BaseTranslation = {
 		bodyDescription: 'Configure the request body for POST/PUT/PATCH requests.',
 		bodyPlaceholder: 'Enter request body (JSON, XML, etc.)',
 		useEditorContent: 'Use editor content as request body',
-		sendAsRawText: 'Send as raw text (don\'t parse as JSON)',
+		sendAsRawText: "Send as raw text (don't parse as JSON)",
 		clearAll: 'Clear All',
-		clearAllConfirm: 'Are you sure you want to clear all settings? This will remove all saved headers, body, and URL from storage.',
+		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'
 	},