# InsuRo Threads 콘텐츠 3모드 UI 구현

## 작업 개요
`/generate` 페이지에서 Threads 채널 선택 시, 기존 "연속 게시글 10개" 대신 **3가지 콘텐츠 모드**(텍스트/카드뉴스/영상)를 선택할 수 있는 UI를 구현한다.

## 프로젝트 경로
- InsuRo 루트: `/home/jay/projects/InsuRo/`
- 빌드: `cd /home/jay/projects/InsuRo && npx vite build`
- 타입체크: `npx tsc --noEmit`

## 수정 대상 파일 (2개만)

### 1. `src/data/generateOptions.ts` (111~150행)

**현재**:
```typescript
{
  value: "threads",
  label: "Threads",
  subtitle: "연속 게시글 10개",
  icon: Hash,
  prompt: `Threads 연속 게시글 10개를 작성합니다. ...`
}
```

**변경**:
- `subtitle`: `"연속 게시글 10개"` → `"텍스트/카드뉴스/영상 작성"`
- Threads 채널에 `modes` 배열 추가 (또는 별도 export):

```typescript
export const threadsContentModes = [
  {
    value: "text",
    label: "텍스트 작성",
    description: "텍스트 전용 Threads 게시글",
    icon: "✏️",
    available: true,
  },
  {
    value: "image",
    label: "카드뉴스 작성",
    description: "이미지/카드뉴스 게시글",
    icon: "🖼️",
    available: false, // 향후 개발
    comingSoon: true,
  },
  {
    value: "video",
    label: "영상 작성",
    description: "숏폼 영상 게시글",
    icon: "🎬",
    available: false, // 향후 개발
    comingSoon: true,
  },
];
```

- Threads 프롬프트는 텍스트 모드용으로 유지하되, 기존 "연속 게시글 10개" 프롬프트를 **단일 게시글/연속 게시글 선택**이 가능하도록 살짝 수정:
  - 기존 프롬프트 상단에 모드 선택 안내 추가

### 2. `src/pages/Generate.tsx`

**현재 동작**: 채널 탭(네이버블로그/티스토리/인스타그램/Threads/유튜브) 클릭 → 바로 주제 입력 + 생성 UI

**변경**: Threads 탭 클릭 시 → **모드 선택 카드 3개** 먼저 표시 → "텍스트 작성" 선택 시 기존 생성 UI 표시

**구현 방법**:

1. state 추가:
```typescript
const [threadsMode, setThreadsMode] = useState<string | null>(null);
```

2. Threads 탭이 활성화되었을 때, `threadsMode`가 null이면 모드 선택 카드 표시:
```tsx
{currentTab === "threads" && !threadsMode && (
  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 my-6">
    {threadsContentModes.map((mode) => (
      <Card
        key={mode.value}
        className={`p-6 text-center cursor-pointer transition-all hover:shadow-md ${
          mode.available
            ? "hover:border-primary"
            : "opacity-60 cursor-not-allowed"
        }`}
        onClick={() => mode.available && setThreadsMode(mode.value)}
      >
        <div className="text-3xl mb-3">{mode.icon}</div>
        <h3 className="font-bold text-sm mb-1">{mode.label}</h3>
        <p className="text-xs text-muted-foreground">{mode.description}</p>
        {mode.comingSoon && (
          <Badge variant="outline" className="mt-3 text-[10px]">
            업데이트 예정
          </Badge>
        )}
      </Card>
    ))}
  </div>
)}
```

3. `threadsMode === "text"` 일 때 기존 토픽 입력 + AI 생성 UI 표시 (현재 로직 그대로)

4. 모드 선택 후 **"← 모드 다시 선택"** 뒤로가기 버튼 추가:
```tsx
{currentTab === "threads" && threadsMode && (
  <Button variant="ghost" size="sm" onClick={() => setThreadsMode(null)} className="mb-4">
    ← 모드 다시 선택
  </Button>
)}
```

5. 채널 탭 변경 시 threadsMode 초기화:
```typescript
useEffect(() => {
  setResult("");
  setTopic("");
  setAiTopics([]);
  setAiTopicsRequested(false);
  setThreadsMode(null); // 추가
}, [currentTab]);
```

## 디자인 가이드
- 모드 카드: 기존 InsuRo 디자인 언어 사용 (Card + hover:shadow-md + border-primary)
- "업데이트 예정" 뱃지: 기존 Badge 컴포넌트 활용
- 카드뉴스/영상 모드는 클릭 불가 (opacity-60 + cursor-not-allowed)
- Shielded Geometry 디자인 철학 유지 (둥근 모서리, 여백, 절제된 색상)

## 주의사항
- 기존 Threads 텍스트 생성 로직을 **절대 깨뜨리지 말 것** — threadsMode="text" 선택 시 기존과 동일하게 동작
- 다른 채널(네이버블로그, 인스타그램 등)의 동작에 영향 없어야 함
- 타입 안전성: TypeScript 에러 0건 확인 필수
- 빌드 확인: `npx vite build` 성공 필수

## 테스트 체크리스트
- [ ] Threads 탭 클릭 시 3가지 모드 카드가 표시되는지
- [ ] "텍스트 작성" 클릭 시 기존 생성 UI가 나타나는지
- [ ] "카드뉴스 작성", "영상 작성"은 클릭 불가 + "업데이트 예정" 표시
- [ ] "← 모드 다시 선택" 버튼으로 모드 선택 화면으로 돌아가는지
- [ ] 다른 채널 탭으로 이동했다가 Threads로 돌아오면 모드 선택 초기화
- [ ] 네이버블로그/인스타그램 등 다른 채널 동작에 영향 없음
- [ ] TypeScript 에러 0건 (npx tsc --noEmit)
- [ ] Vite 빌드 성공 (npx vite build)