# InsuRo Phase 1: 라우트 정리 + Dashboard 공지 DB 연동

## 작업 개요
InsuRo 프론트엔드 라우트 구조 정리 및 하드코딩 제거

## 작업 항목 (4개)

### 1. routes.ts 단일 소스 구축
**목적**: App.tsx와 AppSidebar.tsx가 별도로 라우트를 정의 → 단일 소스로 통합

**파일 생성**: `src/config/routes.ts`
```typescript
import { LucideIcon } from "lucide-react";

export type RouteConfig = {
  path: string;
  title: string;
  icon?: LucideIcon;
  section: string; // 사이드바 섹션명
  premiumOnly?: boolean;
  adminOnly?: boolean;
  component: React.LazyExoticComponent<React.ComponentType>;
};
```

**변경 파일**:
- `src/App.tsx` — routes.ts에서 라우트 목록 import, Route 자동 생성
- `src/components/AppSidebar.tsx` — routes.ts에서 메뉴 목록 import, 메뉴 자동 생성
- 두 파일 모두 하드코딩된 라우트/메뉴 목록 제거

**주의사항**:
- lazy() import는 routes.ts에서 정의
- 기존 작동하는 라우트가 깨지지 않도록 검증 필수
- 관리자 섹션(adminOnly)과 프리미엄 섹션(premiumOnly) 구분 유지

### 2. patent/npv 라우트 정리
**현황 확인**: App.tsx에 patent, npv 관련 라우트가 있는지 확인
- 있으면: 라우트 + import + 페이지 파일 모두 삭제
- 없으면: 다른 곳(사이드바, HelpGuide 등)에서 참조 제거
- `grep -r "patent\|npv\|Patent\|Npv\|NpvCalculator" src/` 로 전체 검색 후 잔여 참조 제거

### 3. ai-onestop, ai-automation 맛보기/잠금 페이지 생성
**현황**: 사이드바에 premiumOnly로 등록, 클릭 시 toast "개발 중" 표시
**변경**: 실제 페이지 컴포넌트 생성 + 라우트 등록

**각 페이지 구조** (2개 모두 같은 패턴):
```
┌─────────────────────────────────┐
│  [아이콘] AI 원스탑 포스팅       │
│                                 │
│  이 기능은 [플랜명] 이상         │
│  구독 시 사용할 수 있습니다      │
│                                 │
│  [기능 소개 3줄]                 │
│  - 키워드 입력만으로 전 채널 포스팅│
│  - AI가 채널별 최적화 콘텐츠 생성 │
│  - 예약 발행 + 성과 분석          │
│                                 │
│  [ 🔒 플랜 업그레이드 ]          │
│           ↓ /pricing 이동        │
└─────────────────────────────────┘
```

**파일 생성**:
- `src/pages/AiOnestop.tsx` — AI 원스탑 포스팅 잠금 페이지
- `src/pages/AiAutomation.tsx` — AI 포스팅 자동화 잠금 페이지

**사이드바 변경**:
- 기존: 클릭 시 toast + `href="#"` → 변경: 실제 라우트로 네비게이션
- premiumOnly 배지는 유지
- 무료 사용자: 잠금 페이지 표시
- 프리미엄 사용자: 잠금 페이지이지만 "개발 중" 표시 (아직 기능 미구현이므로)

**사용할 컴포넌트**: 기존 PlanGuard 활용하지 않음 (이 페이지 자체가 잠금 페이지이므로)
대신 DashboardLayout + Card + Button(→/pricing) 조합으로 직접 구성

### 4. Dashboard 공지 하드코딩 → DB 동적 연동
**현황**: `src/pages/Dashboard.tsx` 라인 81-86에 하드코딩된 notices 배열 4개

**변경**:
- 하드코딩 notices 배열 제거
- Supabase `notices` 테이블에서 최신 4건 조회 (created_at DESC, limit 4)
- useQuery 사용 (React Query)
- 로딩 중: Skeleton 표시
- 데이터 없을 때: "등록된 공지가 없습니다" 표시
- 날짜 포맷: date-fns의 format 사용 (yyyy. M. d)

**참고 코드**: `src/pages/AdminNotices.tsx`에서 notices 테이블 조회 패턴 참고
```typescript
const { data: notices } = useQuery({
  queryKey: ["dashboard-notices"],
  queryFn: async () => {
    const { data, error } = await supabase
      .from("notices")
      .select("id, title, created_at")
      .order("created_at", { ascending: false })
      .limit(4);
    if (error) throw error;
    return data;
  },
});
```

## 파일 영향 범위
- 생성: `src/config/routes.ts`, `src/pages/AiOnestop.tsx`, `src/pages/AiAutomation.tsx`
- 수정: `src/App.tsx`, `src/components/AppSidebar.tsx`, `src/pages/Dashboard.tsx`
- 삭제: patent/npv 관련 파일 (있을 경우)

## 검증 기준
1. `npm run build` 성공 (에러 0건)
2. 기존 49개 라우트 정상 작동 (깨진 라우트 없음)
3. 사이드바 메뉴 구조 동일 (시각적 변경 없음)
4. Dashboard 공지 DB에서 동적 조회 확인
5. ai-onestop, ai-automation 페이지 접근 시 잠금 UI 표시
6. pyright 타입 체크 에러 0건

## 프로젝트 경로
- `/home/jay/projects/InsuRo/`
- 프로젝트 타입: React + Vite + TypeScript + Supabase
- UI 라이브러리: shadcn/ui (Tailwind CSS)