@su-record/vibe 0.4.5 → 0.4.6

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

@@ -1,369 +0,0 @@
-# 🚫 자동 안티패턴 회피
-
-## TypeScript 안티패턴
-
-### 1. any 타입 사용
-
-```typescript
-// ❌ any 사용
-function processData(data: any) {
-  return data.value; // 타입 안전성 상실
-}
-
-// ✅ unknown + type guard
-function processData(data: unknown) {
-  if (isValidData(data)) {
-    return data.value; // 타입 안전
-  }
-  throw new Error('Invalid data');
-}
-
-function isValidData(data: unknown): data is { value: string } {
-  return typeof data === 'object' && data !== null && 'value' in data;
-}
-```
-
-### 2. as any 강제 타입 캐스팅
-
-```typescript
-// ❌ as any로 타입 우회
-const user = response as any;
-user.name; // 런타임 에러 위험
-
-// ✅ 적절한 타입 정의
-interface User {
-  name: string;
-  email: string;
-}
-
-const user = response as User;
-user.name; // 타입 안전
-```
-
-### 3. @ts-ignore 남용
-
-```typescript
-// ❌ @ts-ignore로 에러 무시
-// @ts-ignore
-const result = problematicCode();
-
-// ✅ 타입 문제 근본 해결
-interface Expected {
-  id: string;
-}
-
-const result: Expected = {
-  id: String(problematicCode()),
-};
-```
-
-## React 안티패턴
-
-### 1. dangerouslySetInnerHTML 사용
-
-```typescript
-// ❌ XSS 취약점
-function Component({ html }: { html: string }) {
-  return <div dangerouslySetInnerHTML={{ __html: html }} />;
-}
-
-// ✅ 안전한 렌더링
-import DOMPurify from 'dompurify';
-
-function Component({ html }: { html: string }) {
-  const sanitized = DOMPurify.sanitize(html);
-  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
-}
-
-// ✅ 더 나은 방법: 마크다운 라이브러리 사용
-import ReactMarkdown from 'react-markdown';
-
-function Component({ markdown }: { markdown: string }) {
-  return <ReactMarkdown>{markdown}</ReactMarkdown>;
-}
-```
-
-### 2. Props Drilling (3단계 이상)
-
-```typescript
-// ❌ Props drilling
-function App() {
-  const [user, setUser] = useState<User>();
-  return <Parent user={user} />;
-}
-
-function Parent({ user }: { user: User }) {
-  return <Child user={user} />;
-}
-
-function Child({ user }: { user: User }) {
-  return <GrandChild user={user} />;
-}
-
-function GrandChild({ user }: { user: User }) {
-  return <div>{user.name}</div>;
-}
-
-// ✅ Context API 사용
-const UserContext = createContext<User | undefined>(undefined);
-
-function App() {
-  const [user, setUser] = useState<User>();
-  return (
-    <UserContext.Provider value={user}>
-      <Parent />
-    </UserContext.Provider>
-  );
-}
-
-function GrandChild() {
-  const user = useContext(UserContext);
-  return <div>{user?.name}</div>;
-}
-```
-
-### 3. useEffect 의존성 배열 누락
-
-```typescript
-// ❌ 의존성 누락
-function Component({ userId }: { userId: string }) {
-  const [user, setUser] = useState<User>();
-
-  useEffect(() => {
-    fetchUser(userId).then(setUser);
-  }, []); // userId 의존성 누락!
-
-  return <div>{user?.name}</div>;
-}
-
-// ✅ 모든 의존성 명시
-function Component({ userId }: { userId: string }) {
-  const [user, setUser] = useState<User>();
-
-  useEffect(() => {
-    fetchUser(userId).then(setUser);
-  }, [userId]); // 의존성 명시
-
-  return <div>{user?.name}</div>;
-}
-```
-
-## JavaScript 안티패턴
-
-### 1. var 사용
-
-```typescript
-// ❌ var 사용
-var count = 0;
-if (true) {
-  var count = 1; // 같은 변수!
-}
-console.log(count); // 1
-
-// ✅ const/let 사용
-let count = 0;
-if (true) {
-  let count = 1; // 블록 스코프
-}
-console.log(count); // 0
-```
-
-### 2. == 사용 (느슨한 비교)
-
-```typescript
-// ❌ == 사용
-if (value == null) { } // undefined도 매칭
-if ('5' == 5) { }      // true (타입 강제 변환)
-
-// ✅ === 사용
-if (value === null) { }
-if (value === undefined) { }
-if ('5' === 5) { }     // false
-```
-
-### 3. eval() 사용
-
-```typescript
-// ❌ eval() 사용 (보안 위험)
-const code = userInput;
-eval(code); // 임의 코드 실행 가능
-
-// ✅ 대안 구현
-const allowedOperations = {
-  add: (a: number, b: number) => a + b,
-  subtract: (a: number, b: number) => a - b,
-};
-
-const operation = allowedOperations[userInput];
-if (operation) {
-  result = operation(a, b);
-}
-```
-
-## CSS 안티패턴
-
-### 1. !important 남용
-
-```css
-/* ❌ !important 남용 */
-.button {
-  color: blue !important;
-  background: red !important;
-}
-
-/* ✅ 구체적인 선택자 사용 */
-.navigation .button.primary {
-  color: blue;
-  background: red;
-}
-```
-
-### 2. 인라인 스타일 남용
-
-```typescript
-// ❌ 인라인 스타일
-function Button() {
-  return (
-    <button
-      style={{
-        backgroundColor: 'blue',
-        color: 'white',
-        padding: '10px',
-        borderRadius: '5px',
-      }}
-    >
-      Click me
-    </button>
-  );
-}
-
-// ✅ CSS 클래스 사용
-function Button() {
-  return <button className="btn-primary">Click me</button>;
-}
-
-// styles.css
-.btn-primary {
-  background-color: blue;
-  color: white;
-  padding: 10px;
-  border-radius: 5px;
-}
-```
-
-## 성능 안티패턴
-
-### 1. 불필요한 리렌더링
-
-```typescript
-// ❌ 매번 새 객체/함수 생성
-function Parent() {
-  return <Child config={{ theme: 'dark' }} onClick={() => {}} />;
-  // 매 렌더마다 새 객체/함수 생성 → Child 리렌더
-}
-
-// ✅ useMemo/useCallback 사용
-function Parent() {
-  const config = useMemo(() => ({ theme: 'dark' }), []);
-  const handleClick = useCallback(() => {}, []);
-
-  return <Child config={config} onClick={handleClick} />;
-}
-```
-
-### 2. 동기적 무거운 연산
-
-```typescript
-// ❌ 메인 스레드 블로킹
-function Component({ data }: { data: number[] }) {
-  const result = data
-    .map(heavyComputation)
-    .filter(x => x > 0)
-    .reduce((a, b) => a + b);
-
-  return <div>{result}</div>;
-}
-
-// ✅ useMemo로 메모이제이션
-function Component({ data }: { data: number[] }) {
-  const result = useMemo(
-    () =>
-      data
-        .map(heavyComputation)
-        .filter(x => x > 0)
-        .reduce((a, b) => a + b),
-    [data]
-  );
-
-  return <div>{result}</div>;
-}
-```
-
-## 보안 안티패턴
-
-### 1. 민감 정보 하드코딩
-
-```typescript
-// ❌ API 키 하드코딩
-const API_KEY = 'sk-1234567890abcdef';
-
-// ✅ 환경 변수 사용
-const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
-```
-
-### 2. SQL Injection 취약점
-
-```typescript
-// ❌ 직접 문자열 연결
-const query = `SELECT * FROM users WHERE id = ${userId}`;
-
-// ✅ 파라미터화된 쿼리
-const query = 'SELECT * FROM users WHERE id = ?';
-db.execute(query, [userId]);
-```
-
-## 에러 처리 안티패턴
-
-### 1. 빈 catch 블록
-
-```typescript
-// ❌ 에러 무시
-try {
-  riskyOperation();
-} catch (e) {
-  // 아무것도 안 함
-}
-
-// ✅ 적절한 에러 처리
-try {
-  riskyOperation();
-} catch (error) {
-  console.error('Operation failed:', error);
-  showErrorNotification(error);
-  trackError(error);
-}
-```
-
-### 2. 에러 타입 확인 없이 처리
-
-```typescript
-// ❌ 모든 에러 동일하게 처리
-try {
-  await fetchData();
-} catch (error) {
-  showError('Failed'); // 구체적이지 않음
-}
-
-// ✅ 에러 타입별 처리
-try {
-  await fetchData();
-} catch (error) {
-  if (error instanceof NetworkError) {
-    showError('네트워크 연결을 확인해주세요');
-  } else if (error instanceof AuthError) {
-    redirectToLogin();
-  } else {
-    showError('알 수 없는 오류가 발생했습니다');
-  }
-}
-```

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

@@ -1,291 +0,0 @@
-# 🏗️ 코드 구조 자동화 규칙
-
-## 컴포넌트 구조 (엄격한 순서)
-
-```typescript
-// 1. Import 문
-import React, { useState, useEffect } from 'react';
-
-// 2. 타입/인터페이스 정의
-interface Props {
-  userId: string;
-}
-
-// 3. 컴포넌트 정의
-function UserProfile({ userId }: Props) {
-  // 4. State & Refs
-  const [user, setUser] = useState<User | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // 5. Custom Hooks
-  const { isAuthenticated } = useAuth();
-  const { data, loading } = useUserData(userId);
-
-  // 6. Event Handlers
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-    // ...
-  };
-
-  // 7. Effects
-  useEffect(() => {
-    // ...
-  }, [userId]);
-
-  // 8. Early returns
-  if (loading) return <Spinner />;
-  if (!user) return <NotFound />;
-
-  // 9. Main return JSX
-  return (
-    <div>
-      {/* ... */}
-    </div>
-  );
-}
-```
-
-## 함수 분리 기준
-
-### 1. 함수 길이 기준
-
-```typescript
-// ❌ 20줄 초과 - 분리 필요
-function processUserData(user: User) {
-  // 30줄의 복잡한 로직
-}
-
-// ✅ 단일 책임으로 분리
-function processUserData(user: User) {
-  const validated = validateUser(user);
-  const transformed = transformUserData(validated);
-  return saveUserData(transformed);
-}
-
-function validateUser(user: User) { /* ... */ }
-function transformUserData(user: User) { /* ... */ }
-function saveUserData(user: User) { /* ... */ }
-```
-
-### 2. 컴포넌트 JSX 길이 기준
-
-```typescript
-// ❌ JSX 50줄 초과 - 분리 필요
-function Dashboard() {
-  return (
-    <div>
-      {/* 60줄의 복잡한 JSX */}
-    </div>
-  );
-}
-
-// ✅ 서브 컴포넌트 추출
-function Dashboard() {
-  return (
-    <div>
-      <DashboardHeader />
-      <DashboardContent />
-      <DashboardFooter />
-    </div>
-  );
-}
-
-function DashboardHeader() { /* ... */ }
-function DashboardContent() { /* ... */ }
-function DashboardFooter() { /* ... */ }
-```
-
-### 3. 중첩 깊이 기준
-
-```typescript
-// ❌ 중첩 3단계 초과
-function processData(data: Data) {
-  if (data) {
-    if (data.isValid) {
-      if (data.user) {
-        if (data.user.isActive) {
-          // 너무 깊은 중첩
-        }
-      }
-    }
-  }
-}
-
-// ✅ Early return으로 평탄화
-function processData(data: Data) {
-  if (!data) return null;
-  if (!data.isValid) return null;
-  if (!data.user) return null;
-  if (!data.user.isActive) return null;
-
-  // 로직 실행
-}
-```
-
-### 4. Cyclomatic Complexity > 10
-
-```typescript
-// ❌ 복잡도 높음 (15)
-function calculatePrice(item: Item) {
-  let price = item.basePrice;
-  if (item.discount) price *= 0.9;
-  if (item.bulk) price *= 0.8;
-  if (item.seasonal) price *= 0.95;
-  if (item.member) price *= 0.85;
-  if (item.firstTime) price *= 0.9;
-  // ... 더 많은 조건
-  return price;
-}
-
-// ✅ 복잡도 감소 (3)
-function calculatePrice(item: Item) {
-  const basePrice = item.basePrice;
-  const discounts = getApplicableDiscounts(item);
-  return applyDiscounts(basePrice, discounts);
-}
-```
-
-### 5. Cognitive Complexity > 15
-
-```typescript
-// ❌ 인지 복잡도 높음
-function processOrder(order: Order) {
-  if (order.isPremium) {
-    for (let item of order.items) {
-      if (item.category === 'electronics') {
-        if (item.price > 1000) {
-          // 중첩된 복잡한 로직
-        }
-      }
-    }
-  }
-}
-
-// ✅ 인지 복잡도 감소
-function processOrder(order: Order) {
-  if (!order.isPremium) return;
-
-  const electronics = filterElectronics(order.items);
-  const expensive = filterExpensive(electronics);
-
-  processItems(expensive);
-}
-```
-
-## 파일 구조 표준
-
-```typescript
-// 📁 user-profile.component.tsx
-
-// 1. Imports
-import { ... } from 'react';
-import { ... } from '@/lib';
-
-// 2. Types
-interface UserProfileProps { }
-type UserRole = 'admin' | 'user';
-
-// 3. Constants
-const MAX_BIO_LENGTH = 500;
-const DEFAULT_AVATAR = '/avatar.png';
-
-// 4. Helper Functions (내부 전용)
-function formatUserName(name: string) { }
-
-// 5. Main Component
-export function UserProfile() { }
-
-// 6. Sub Components (export하지 않음)
-function ProfileHeader() { }
-function ProfileContent() { }
-```
-
-## 모듈 구성 원칙
-
-### 1. 응집도 (Cohesion)
-
-```typescript
-// ✅ 높은 응집도 - 관련 기능만 모음
-// 📁 user.service.ts
-export class UserService {
-  getUser(id: string) { }
-  updateUser(id: string, data: User) { }
-  deleteUser(id: string) { }
-}
-
-// ❌ 낮은 응집도 - 관련 없는 기능 혼재
-// 📁 utils.ts (안티패턴)
-export class Utils {
-  validateEmail(email: string) { }
-  formatCurrency(amount: number) { }
-  uploadFile(file: File) { }
-}
-```
-
-### 2. 결합도 (Coupling)
-
-```typescript
-// ✅ 느슨한 결합 - 인터페이스 의존
-interface Storage {
-  save(key: string, value: unknown): void;
-  load(key: string): unknown;
-}
-
-class UserService {
-  constructor(private storage: Storage) { }
-}
-
-// ❌ 강한 결합 - 구현체 직접 의존
-class UserService {
-  private storage = new LocalStorage(); // 직접 의존
-}
-```
-
-## 함수 매개변수 제한
-
-```typescript
-// ❌ 매개변수 5개 초과
-function createUser(
-  name: string,
-  email: string,
-  age: number,
-  address: string,
-  phone: string,
-  role: string
-) { }
-
-// ✅ 객체로 그룹화
-interface CreateUserParams {
-  name: string;
-  email: string;
-  age: number;
-  address: string;
-  phone: string;
-  role: string;
-}
-
-function createUser(params: CreateUserParams) { }
-```
-
-## 순환 의존성 방지
-
-```typescript
-// ❌ 순환 의존성
-// fileA.ts
-import { funcB } from './fileB';
-export function funcA() { funcB(); }
-
-// fileB.ts
-import { funcA } from './fileA'; // 순환!
-export function funcB() { funcA(); }
-
-// ✅ 공통 모듈 분리
-// shared.ts
-export function sharedFunc() { }
-
-// fileA.ts
-import { sharedFunc } from './shared';
-
-// fileB.ts
-import { sharedFunc } from './shared';
-```