chore(project-setup): Configure development environment and code quality tools

bis0908 · bis0908 · commit 384e5fb79ea4 · 2025-10-31T15:52:54.000+09:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,22 @@
+# EditorConfig는 다양한 에디터와 IDE에서 일관된 코딩 스타일을 유지하는 데 도움을 줍니다
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.{js,jsx,ts,tsx,json,css}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -251,4 +251,4 @@ $RECYCLE.BIN/
 .claude
 /documents/**
 
-.kiro
+.kiro
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,51 @@
+{
+  // Biome를 기본 포맷터로 설정
+  "editor.defaultFormatter": "biomejs.biome",
+  
+  // 저장 시 자동 포맷팅
+  "editor.formatOnSave": true,
+  
+  // 붙여넣기 시 자동 포맷팅
+  "editor.formatOnPaste": true,
+  
+  // 타입 시 자동 포맷팅 (선택사항)
+  "editor.formatOnType": false,
+  
+  // Biome 설정
+  "biome.enabled": true,
+  
+  // 파일 타입별 포맷터 설정
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  
+  // 줄바꿈 문자 설정 (LF로 통일)
+  "files.eol": "\n",
+  
+  // 저장 시 trailing whitespace 제거
+  "files.trimTrailingWhitespace": true,
+  
+  // 파일 끝에 빈 줄 추가
+  "files.insertFinalNewline": true
+}
diff --git a/README.md b/README.md
@@ -77,8 +77,32 @@ npm start
 
 # Run linter
 npm run lint
+
+# Format code with Biome
+npm run format
+
+# Check code formatting
+npm run format:check
+
+# Run Biome linter and formatter
+npm run biome:check
+
+# Auto-fix with Biome
+npm run biome:fix
 ```
 
+### Code Quality Tools
+
+This project uses **Biome** for fast and consistent code formatting and linting:
+
+- **Formatter**: Automatically formats JavaScript/TypeScript code
+- **Linter**: Catches common errors and enforces best practices
+- **Line Ending**: LF (Unix-style) for cross-platform compatibility
+- **Quote Style**: Double quotes
+- **Indent**: 2 spaces
+
+Configuration is in `biome.json` and `.editorconfig`.
+
 ## Implementation Status
 
 This project follows a spec-driven development approach. See `.kiro/specs/webrtc-1-to-1-communication/` for:
diff --git a/app/layout.js b/app/layout.js
@@ -1,14 +1,14 @@
-import './globals.css'
+import "./globals.css";
 
 export const metadata = {
-  title: 'WebRTC 1:1 Communication',
-  description: 'Real-time video chat and whiteboard collaboration',
-}
+  title: "WebRTC 1:1 Communication",
+  description: "Real-time video chat and whiteboard collaboration",
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="ko">
       <body suppressHydrationWarning>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/app/page.js b/app/page.js
@@ -6,5 +6,5 @@ export default function Home() {
         Real-time video chat and whiteboard collaboration
       </p>
     </main>
-  )
+  );
 }
diff --git a/biome.json b/biome.json
@@ -1,34 +1,58 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.2/schema.json",
-	"vcs": {
-		"enabled": true,
-		"clientKind": "git",
-		"useIgnoreFile": true
-	},
-	"files": {
-		"ignoreUnknown": false
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "space"
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "double"
-		}
-	},
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	}
+  "$schema": "https://biomejs.dev/schemas/2.3.2/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "app/**/*.js",
+      "app/**/*.jsx",
+      "components/**/*.js",
+      "components/**/*.jsx",
+      "contexts/**/*.js",
+      "hooks/**/*.js",
+      "lib/**/*.js",
+      "server/**/*.js",
+      "services/**/*.js",
+      "*.js",
+      "*.json"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "lineEnding": "lf"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "warn"
+      },
+      "suspicious": {
+        "noUnknownAtRules": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "es5"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
 }
diff --git a/jest.config.js b/jest.config.js
@@ -4,31 +4,28 @@
  */
 export default {
   // Node.js 환경에서 테스트 실행
-  testEnvironment: 'node',
-  
+  testEnvironment: "node",
+
   // ES6 modules 지원
   transform: {},
-  
+
   // 전역 변수 주입
   injectGlobals: true,
-  
+
   // 테스트 파일 패턴
-  testMatch: [
-    '**/*.test.js',
-    '**/*.spec.js'
-  ],
-  
+  testMatch: ["**/*.test.js", "**/*.spec.js"],
+
   // 커버리지 수집 대상
   collectCoverageFrom: [
-    'server/**/*.js',
-    '!server/**/*.test.js',
-    '!server/**/*.spec.js',
-    '!server/test-*.js'
+    "server/**/*.js",
+    "!server/**/*.test.js",
+    "!server/**/*.spec.js",
+    "!server/test-*.js",
   ],
-  
+
   // 테스트 타임아웃 (밀리초)
   testTimeout: 10000,
-  
+
   // 상세한 출력
-  verbose: true
+  verbose: true,
 };
diff --git a/lib/utils.js b/lib/utils.js
@@ -1,6 +1,6 @@
-import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+export default nextConfig;
diff --git a/package.json b/package.json
@@ -7,6 +7,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "biome:check": "biome check .",
+    "biome:fix": "biome check --write .",
     "server": "node server/index.js",
     "server:dev": "nodemon server/index.js",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
-}
+};
diff --git a/server/handlers/socketHandler.js b/server/handlers/socketHandler.js
@@ -42,9 +42,7 @@ const registerSocketHandlers = (io, socket, roomManager) => {
     }
 
     const { roomId: validatedRoomId } = result.data;
-    console.log(
-      `[room:join] 소켓 ${socket.id}가 방 ${validatedRoomId} 참가 시도`,
-    );
+    console.log(`[room:join] 소켓 ${socket.id}가 방 ${validatedRoomId} 참가 시도`);
 
     // 방 정원 확인
     if (roomManager.isRoomFull(validatedRoomId)) {
@@ -86,14 +84,12 @@ const registerSocketHandlers = (io, socket, roomManager) => {
     });
 
     console.log(
-      `[room:join] 소켓 ${socket.id}가 방 ${validatedRoomId}에 참가 완료, 기존 참가자: ${participants.length}명`,
+      `[room:join] 소켓 ${socket.id}가 방 ${validatedRoomId}에 참가 완료, 기존 참가자: ${participants.length}명`
     );
 
     // 방의 다른 참가자들에게 새 참가자 알림
     socket.to(validatedRoomId).emit("room:participant-joined", socket.id);
-    console.log(
-      `[room:join] 방 ${validatedRoomId}의 다른 참가자들에게 알림 전송`,
-    );
+    console.log(`[room:join] 방 ${validatedRoomId}의 다른 참가자들에게 알림 전송`);
   });
 
   /**
@@ -113,9 +109,7 @@ const registerSocketHandlers = (io, socket, roomManager) => {
     }
 
     const { roomId: validatedRoomId } = result.data;
-    console.log(
-      `[room:leave] 소켓 ${socket.id}가 방 ${validatedRoomId} 퇴장 시도`,
-    );
+    console.log(`[room:leave] 소켓 ${socket.id}가 방 ${validatedRoomId} 퇴장 시도`);
     handleRoomLeave(io, socket, roomManager, validatedRoomId);
   });
 
@@ -214,9 +208,7 @@ const registerSocketHandlers = (io, socket, roomManager) => {
     }
 
     const { roomId, event } = result.data;
-    console.log(
-      `[whiteboard:event] 방 ${roomId}에서 이벤트 발생: ${event.type}`,
-    );
+    console.log(`[whiteboard:event] 방 ${roomId}에서 이벤트 발생: ${event.type}`);
 
     // 참가자 활동 시간 업데이트
     roomManager.updateParticipantActivity(socket.id);
@@ -235,7 +227,7 @@ const registerSocketHandlers = (io, socket, roomManager) => {
   socket.on("heartbeat", () => {
     // 참가자 활동 시간 업데이트
     roomManager.updateParticipantActivity(socket.id);
-    
+
     // 응답 전송
     socket.emit("heartbeat:ack");
   });
@@ -282,9 +274,7 @@ const handleRoomLeave = (io, socket, roomManager, roomId) => {
     // 방의 다른 참가자들에게 퇴장 알림
     socket.to(roomId).emit("room:participant-left", socket.id);
 
-    console.log(
-      `[handleRoomLeave] 소켓 ${socket.id}가 방 ${roomId}에서 퇴장 완료`,
-    );
+    console.log(`[handleRoomLeave] 소켓 ${socket.id}가 방 ${roomId}에서 퇴장 완료`);
   }
 };
 
@@ -301,7 +291,9 @@ export const notifyInactiveParticipants = (io, inactiveParticipants) => {
   for (const { socketId, roomId } of inactiveParticipants) {
     // 방의 다른 참가자들에게 퇴장 알림
     io.to(roomId).emit("room:participant-left", socketId);
-    console.log(`[notifyInactiveParticipants] 무응답 참가자 퇴장 알림: ${socketId} (방: ${roomId})`);
+    console.log(
+      `[notifyInactiveParticipants] 무응답 참가자 퇴장 알림: ${socketId} (방: ${roomId})`
+    );
   }
 };
 
diff --git a/server/handlers/socketHandler.test.js b/server/handlers/socketHandler.test.js
diff --git a/server/index.js b/server/index.js
diff --git a/server/managers/RoomManager.js b/server/managers/RoomManager.js
diff --git a/server/schemas/socketSchemas.js b/server/schemas/socketSchemas.js
diff --git a/server/test-socket-handlers.js b/server/test-socket-handlers.js
diff --git a/tailwind.config.js b/tailwind.config.js

-Original file line number
+Diff line change
 .claude
 /documents/**
 -.kiro
 +.kiro
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@ export default function Home() {`
`6`	`6`	`Real-time video chat and whiteboard collaboration`
`7`	`7`	`</p>`
`8`	`8`	`</main>`
`9`		`- )`
	`9`	`+ );`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`		`-import { clsx } from "clsx"`
`2`		`-import { twMerge } from "tailwind-merge"`
	`1`	`+import { clsx } from "clsx";`
	`2`	`+import { twMerge } from "tailwind-merge";`
`3`	`3`
`4`	`4`	`export function cn(...inputs) {`
`5`		`- return twMerge(clsx(inputs))`
	`5`	`+ return twMerge(clsx(inputs));`
`6`	`6`	`}`