@su-record/vibe 2.4.56 → 2.4.57

package/vibe/rules/standards/anti-patterns.md

@@ -1,19 +1,19 @@
-# 🚫 자동 안티패턴 회피
+# Automatic Anti-Pattern Avoidance
 
-## TypeScript 안티패턴
+## TypeScript Anti-Patterns
 
-### 1. any 타입 사용
+### 1. Using any Type
 
 ```typescript
-// ❌ any 사용
+// ❌ Using any
 function processData(data: any) {
-  return data.value; // 타입 안전성 상실
+  return data.value; // Loss of type safety
 }
 
 // ✅ unknown + type guard
 function processData(data: unknown) {
   if (isValidData(data)) {
-    return data.value; // 타입 안전
+    return data.value; // Type safe
   }
   throw new Error('Invalid data');
 }
@@ -23,31 +23,31 @@ function isValidData(data: unknown): data is { value: string } {
 }
 ```
 
-### 2. as any 강제 타입 캐스팅
+### 2. Forced Type Casting with as any
 
 ```typescript
-// ❌ as any로 타입 우회
+// ❌ Bypassing types with as any
 const user = response as any;
-user.name; // 런타임 에러 위험
+user.name; // Runtime error risk
 
-// ✅ 적절한 타입 정의
+// ✅ Proper type definition
 interface User {
   name: string;
   email: string;
 }
 
 const user = response as User;
-user.name; // 타입 안전
+user.name; // Type safe
 ```
 
-### 3. @ts-ignore 남용
+### 3. Overusing @ts-ignore
 
 ```typescript
-// ❌ @ts-ignore로 에러 무시
+// ❌ Ignoring errors with @ts-ignore
 // @ts-ignore
 const result = problematicCode();
 
-// ✅ 타입 문제 근본 해결
+// ✅ Fix the type issue at its root
 interface Expected {
   id: string;
 }
@@ -57,17 +57,17 @@ const result: Expected = {
 };
 ```
 
-## React 안티패턴
+## React Anti-Patterns
 
-### 1. dangerouslySetInnerHTML 사용
+### 1. Using dangerouslySetInnerHTML
 
 ```typescript
-// ❌ XSS 취약점
+// ❌ XSS vulnerability
 function Component({ html }: { html: string }) {
   return <div dangerouslySetInnerHTML={{ __html: html }} />;
 }
 
-// ✅ 안전한 렌더링
+// ✅ Safe rendering
 import DOMPurify from 'dompurify';
 
 function Component({ html }: { html: string }) {
@@ -75,7 +75,7 @@ function Component({ html }: { html: string }) {
   return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
 }
 
-// ✅ 더 나은 방법: 마크다운 라이브러리 사용
+// ✅ Better approach: Use markdown library
 import ReactMarkdown from 'react-markdown';
 
 function Component({ markdown }: { markdown: string }) {
@@ -83,7 +83,7 @@ function Component({ markdown }: { markdown: string }) {
 }
 ```
 
-### 2. Props Drilling (3단계 이상)
+### 2. Props Drilling (More than 3 levels)
 
 ```typescript
 // ❌ Props drilling
@@ -104,7 +104,7 @@ function GrandChild({ user }: { user: User }) {
   return <div>{user.name}</div>;
 }
 
-// ✅ Context API 사용
+// ✅ Use Context API
 const UserContext = createContext<User | undefined>(undefined);
 
 function App() {
@@ -122,73 +122,73 @@ function GrandChild() {
 }
 ```
 
-### 3. useEffect 의존성 배열 누락
+### 3. Missing useEffect Dependency Array
 
 ```typescript
-// ❌ 의존성 누락
+// ❌ Missing dependency
 function Component({ userId }: { userId: string }) {
   const [user, setUser] = useState<User>();
 
   useEffect(() => {
     fetchUser(userId).then(setUser);
-  }, []); // userId 의존성 누락!
+  }, []); // Missing userId dependency!
 
   return <div>{user?.name}</div>;
 }
 
-// ✅ 모든 의존성 명시
+// ✅ Specify all dependencies
 function Component({ userId }: { userId: string }) {
   const [user, setUser] = useState<User>();
 
   useEffect(() => {
     fetchUser(userId).then(setUser);
-  }, [userId]); // 의존성 명시
+  }, [userId]); // Dependency specified
 
   return <div>{user?.name}</div>;
 }
 ```
 
-## JavaScript 안티패턴
+## JavaScript Anti-Patterns
 
-### 1. var 사용
+### 1. Using var
 
 ```typescript
-// ❌ var 사용
+// ❌ Using var
 var count = 0;
 if (true) {
-  var count = 1; // 같은 변수!
+  var count = 1; // Same variable!
 }
 console.log(count); // 1
 
-// ✅ const/let 사용
+// ✅ Use const/let
 let count = 0;
 if (true) {
-  let count = 1; // 블록 스코프
+  let count = 1; // Block scope
 }
 console.log(count); // 0
 ```
 
-### 2. == 사용 (느슨한 비교)
+### 2. Using == (Loose Comparison)
 
 ```typescript
-// ❌ == 사용
-if (value == null) { } // undefined도 매칭
-if ('5' == 5) { }      // true (타입 강제 변환)
+// ❌ Using ==
+if (value == null) { } // Also matches undefined
+if ('5' == 5) { }      // true (type coercion)
 
-// ✅ === 사용
+// ✅ Use ===
 if (value === null) { }
 if (value === undefined) { }
 if ('5' === 5) { }     // false
 ```
 
-### 3. eval() 사용
+### 3. Using eval()
 
 ```typescript
-// ❌ eval() 사용 (보안 위험)
+// ❌ Using eval() (security risk)
 const code = userInput;
-eval(code); // 임의 코드 실행 가능
+eval(code); // Can execute arbitrary code
 
-// ✅ 대안 구현
+// ✅ Alternative implementation
 const allowedOperations = {
   add: (a: number, b: number) => a + b,
   subtract: (a: number, b: number) => a - b,
@@ -200,28 +200,28 @@ if (operation) {
 }
 ```
 
-## CSS 안티패턴
+## CSS Anti-Patterns
 
-### 1. !important 남용
+### 1. Overusing !important
 
 ```css
-/* ❌ !important 남용 */
+/* ❌ Overusing !important */
 .button {
   color: blue !important;
   background: red !important;
 }
 
-/* ✅ 구체적인 선택자 사용 */
+/* ✅ Use specific selectors */
 .navigation .button.primary {
   color: blue;
   background: red;
 }
 ```
 
-### 2. 인라인 스타일 남용
+### 2. Overusing Inline Styles
 
 ```typescript
-// ❌ 인라인 스타일
+// ❌ Inline styles
 function Button() {
   return (
     <button
@@ -237,7 +237,7 @@ function Button() {
   );
 }
 
-// ✅ CSS 클래스 사용
+// ✅ Use CSS classes
 function Button() {
   return <button className="btn-primary">Click me</button>;
 }
@@ -251,18 +251,18 @@ function Button() {
 }
 ```
 
-## 성능 안티패턴
+## Performance Anti-Patterns
 
-### 1. 불필요한 리렌더링
+### 1. Unnecessary Re-renders
 
 ```typescript
-// ❌ 매번 새 객체/함수 생성
+// ❌ Creating new objects/functions every render
 function Parent() {
   return <Child config={{ theme: 'dark' }} onClick={() => {}} />;
-  // 매 렌더마다 새 객체/함수 생성 → Child 리렌더
+  // New object/function created every render → Child re-renders
 }
 
-// ✅ useMemo/useCallback 사용
+// ✅ Use useMemo/useCallback
 function Parent() {
   const config = useMemo(() => ({ theme: 'dark' }), []);
   const handleClick = useCallback(() => {}, []);
@@ -271,10 +271,10 @@ function Parent() {
 }
 ```
 
-### 2. 동기적 무거운 연산
+### 2. Synchronous Heavy Computations
 
 ```typescript
-// ❌ 메인 스레드 블로킹
+// ❌ Blocking main thread
 function Component({ data }: { data: number[] }) {
   const result = data
     .map(heavyComputation)
@@ -284,7 +284,7 @@ function Component({ data }: { data: number[] }) {
   return <div>{result}</div>;
 }
 
-// ✅ useMemo로 메모이제이션
+// ✅ Memoization with useMemo
 function Component({ data }: { data: number[] }) {
   const result = useMemo(
     () =>
@@ -299,42 +299,42 @@ function Component({ data }: { data: number[] }) {
 }
 ```
 
-## 보안 안티패턴
+## Security Anti-Patterns
 
-### 1. 민감 정보 하드코딩
+### 1. Hardcoding Sensitive Information
 
 ```typescript
-// ❌ API 키 하드코딩
+// ❌ Hardcoded API key
 const API_KEY = 'sk-1234567890abcdef';
 
-// ✅ 환경 변수 사용
+// ✅ Use environment variables
 const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
 ```
 
-### 2. SQL Injection 취약점
+### 2. SQL Injection Vulnerability
 
 ```typescript
-// ❌ 직접 문자열 연결
+// ❌ Direct string concatenation
 const query = `SELECT * FROM users WHERE id = ${userId}`;
 
-// ✅ 파라미터화된 쿼리
+// ✅ Parameterized query
 const query = 'SELECT * FROM users WHERE id = ?';
 db.execute(query, [userId]);
 ```
 
-## 에러 처리 안티패턴
+## Error Handling Anti-Patterns
 
-### 1. 빈 catch 블록
+### 1. Empty catch Block
 
 ```typescript
-// ❌ 에러 무시
+// ❌ Ignoring errors
 try {
   riskyOperation();
 } catch (e) {
-  // 아무것도 안 함
+  // Does nothing
 }
 
-// ✅ 적절한 에러 처리
+// ✅ Proper error handling
 try {
   riskyOperation();
 } catch (error) {
@@ -344,26 +344,26 @@ try {
 }
 ```
 
-### 2. 에러 타입 확인 없이 처리
+### 2. Handling Without Error Type Check
 
 ```typescript
-// ❌ 모든 에러 동일하게 처리
+// ❌ Treating all errors the same
 try {
   await fetchData();
 } catch (error) {
-  showError('Failed'); // 구체적이지 않음
+  showError('Failed'); // Not specific
 }
 
-// ✅ 에러 타입별 처리
+// ✅ Handle by error type
 try {
   await fetchData();
 } catch (error) {
   if (error instanceof NetworkError) {
-    showError('네트워크 연결을 확인해주세요');
+    showError('Please check your network connection');
   } else if (error instanceof AuthError) {
     redirectToLogin();
   } else {
-    showError('알 수 없는 오류가 발생했습니다');
+    showError('An unknown error occurred');
   }
 }
 ```

package/vibe/rules/standards/code-structure.md

@@ -1,17 +1,17 @@
-# 🏗️ 코드 구조 자동화 규칙
+# Code Structure Automation Rules
 
-## 컴포넌트 구조 (엄격한 순서)
+## Component Structure (Strict Order)
 
 ```typescript
-// 1. Import 문
+// 1. Import statements
 import React, { useState, useEffect } from 'react';
 
-// 2. 타입/인터페이스 정의
+// 2. Type/Interface definitions
 interface Props {
   userId: string;
 }
 
-// 3. 컴포넌트 정의
+// 3. Component definition
 function UserProfile({ userId }: Props) {
   // 4. State & Refs
   const [user, setUser] = useState<User | null>(null);
@@ -45,17 +45,17 @@ function UserProfile({ userId }: Props) {
 }
 ```
 
-## 함수 분리 기준
+## Function Separation Criteria
 
-### 1. 함수 길이 기준
+### 1. Function Length Criteria
 
 ```typescript
-// ❌ 20줄 초과 - 분리 필요
+// ❌ Over 20 lines - needs separation
 function processUserData(user: User) {
-  // 30줄의 복잡한 로직
+  // 30 lines of complex logic
 }
 
-// ✅ 단일 책임으로 분리
+// ✅ Separate by single responsibility
 function processUserData(user: User) {
   const validated = validateUser(user);
   const transformed = transformUserData(validated);
@@ -67,19 +67,19 @@ function transformUserData(user: User) { /* ... */ }
 function saveUserData(user: User) { /* ... */ }
 ```
 
-### 2. 컴포넌트 JSX 길이 기준
+### 2. Component JSX Length Criteria
 
 ```typescript
-// ❌ JSX 50줄 초과 - 분리 필요
+// ❌ JSX over 50 lines - needs separation
 function Dashboard() {
   return (
     <div>
-      {/* 60줄의 복잡한 JSX */}
+      {/* 60 lines of complex JSX */}
     </div>
   );
 }
 
-// ✅ 서브 컴포넌트 추출
+// ✅ Extract sub-components
 function Dashboard() {
   return (
     <div>
@@ -95,37 +95,37 @@ function DashboardContent() { /* ... */ }
 function DashboardFooter() { /* ... */ }
 ```
 
-### 3. 중첩 깊이 기준
+### 3. Nesting Depth Criteria
 
 ```typescript
-// ❌ 중첩 3단계 초과
+// ❌ Nesting over 3 levels
 function processData(data: Data) {
   if (data) {
     if (data.isValid) {
       if (data.user) {
         if (data.user.isActive) {
-          // 너무 깊은 중첩
+          // Too deep nesting
         }
       }
     }
   }
 }
 
-// ✅ Early return으로 평탄화
+// ✅ Flatten with early returns
 function processData(data: Data) {
   if (!data) return null;
   if (!data.isValid) return null;
   if (!data.user) return null;
   if (!data.user.isActive) return null;
 
-  // 로직 실행
+  // Execute logic
 }
 ```
 
 ### 4. Cyclomatic Complexity > 10
 
 ```typescript
-// ❌ 복잡도 높음 (15)
+// ❌ High complexity (15)
 function calculatePrice(item: Item) {
   let price = item.basePrice;
   if (item.discount) price *= 0.9;
@@ -133,11 +133,11 @@ function calculatePrice(item: Item) {
   if (item.seasonal) price *= 0.95;
   if (item.member) price *= 0.85;
   if (item.firstTime) price *= 0.9;
-  // ... 더 많은 조건
+  // ... more conditions
   return price;
 }
 
-// ✅ 복잡도 감소 (3)
+// ✅ Reduced complexity (3)
 function calculatePrice(item: Item) {
   const basePrice = item.basePrice;
   const discounts = getApplicableDiscounts(item);
@@ -148,20 +148,20 @@ function calculatePrice(item: Item) {
 ### 5. Cognitive Complexity > 15
 
 ```typescript
-// ❌ 인지 복잡도 높음
+// ❌ High cognitive complexity
 function processOrder(order: Order) {
   if (order.isPremium) {
     for (let item of order.items) {
       if (item.category === 'electronics') {
         if (item.price > 1000) {
-          // 중첩된 복잡한 로직
+          // Nested complex logic
         }
       }
     }
   }
 }
 
-// ✅ 인지 복잡도 감소
+// ✅ Reduced cognitive complexity
 function processOrder(order: Order) {
   if (!order.isPremium) return;
 
@@ -172,7 +172,7 @@ function processOrder(order: Order) {
 }
 ```
 
-## 파일 구조 표준
+## File Structure Standard
 
 ```typescript
 // 📁 user-profile.component.tsx
@@ -189,23 +189,23 @@ type UserRole = 'admin' | 'user';
 const MAX_BIO_LENGTH = 500;
 const DEFAULT_AVATAR = '/avatar.png';
 
-// 4. Helper Functions (내부 전용)
+// 4. Helper Functions (internal only)
 function formatUserName(name: string) { }
 
 // 5. Main Component
 export function UserProfile() { }
 
-// 6. Sub Components (export하지 않음)
+// 6. Sub Components (not exported)
 function ProfileHeader() { }
 function ProfileContent() { }
 ```
 
-## 모듈 구성 원칙
+## Module Organization Principles
 
-### 1. 응집도 (Cohesion)
+### 1. Cohesion
 
 ```typescript
-// ✅ 높은 응집도 - 관련 기능만 모음
+// ✅ High cohesion - only related functions
 // 📁 user.service.ts
 export class UserService {
   getUser(id: string) { }
@@ -213,8 +213,8 @@ export class UserService {
   deleteUser(id: string) { }
 }
 
-// ❌ 낮은 응집도 - 관련 없는 기능 혼재
-// 📁 utils.ts (안티패턴)
+// ❌ Low cohesion - unrelated functions mixed
+// 📁 utils.ts (anti-pattern)
 export class Utils {
   validateEmail(email: string) { }
   formatCurrency(amount: number) { }
@@ -222,10 +222,10 @@ export class Utils {
 }
 ```
 
-### 2. 결합도 (Coupling)
+### 2. Coupling
 
 ```typescript
-// ✅ 느슨한 결합 - 인터페이스 의존
+// ✅ Loose coupling - depends on interface
 interface Storage {
   save(key: string, value: unknown): void;
   load(key: string): unknown;
@@ -235,16 +235,16 @@ class UserService {
   constructor(private storage: Storage) { }
 }
 
-// ❌ 강한 결합 - 구현체 직접 의존
+// ❌ Tight coupling - depends on implementation directly
 class UserService {
-  private storage = new LocalStorage(); // 직접 의존
+  private storage = new LocalStorage(); // Direct dependency
 }
 ```
 
-## 함수 매개변수 제한
+## Function Parameter Limit
 
 ```typescript
-// ❌ 매개변수 5개 초과
+// ❌ Over 5 parameters
 function createUser(
   name: string,
   email: string,
@@ -254,7 +254,7 @@ function createUser(
   role: string
 ) { }
 
-// ✅ 객체로 그룹화
+// ✅ Group into object
 interface CreateUserParams {
   name: string;
   email: string;
@@ -267,19 +267,19 @@ interface CreateUserParams {
 function createUser(params: CreateUserParams) { }
 ```
 
-## 순환 의존성 방지
+## Preventing Circular Dependencies
 
 ```typescript
-// ❌ 순환 의존성
+// ❌ Circular dependency
 // fileA.ts
 import { funcB } from './fileB';
 export function funcA() { funcB(); }
 
 // fileB.ts
-import { funcA } from './fileA'; // 순환!
+import { funcA } from './fileA'; // Circular!
 export function funcB() { funcA(); }
 
-// ✅ 공통 모듈 분리
+// ✅ Separate common module
 // shared.ts
 export function sharedFunc() { }