# InsuRo — Threads 콘텐츠 기능 스펙 (코드 기반)

**작성일**: 2026-03-13
**수정일**: 2026-03-13 (실제 코드 확인 후 전면 수정)
**상태**: 설계 확정 (제이회장님 승인)
**관련 미팅**: `memory/meetings/2026-03-13-insuro-threadauto-integration.md`
**API 세팅 가이드**: `memory/research/meta-threads-api-setup-guide.md`

---

## 0. 현재 상태 (AS-IS)

### 사이드바 (`AppSidebar.tsx` 73~157행)
"AI 마케팅" 섹션에 이미 5개 메뉴 존재:
- AI 키워드 분석 (`/keyword-analysis`)
- **AI 콘텐츠 작성** (`/generate`) ← 이미 존재
- 콘텐츠 관리 (`/contents`)
- AI 원스탑 포스팅 (`/ai-onestop`) ← `premiumOnly: true`, 미구현
- **AI 포스팅 자동화** (`/ai-automation`) ← `premiumOnly: true`, 미구현

### 콘텐츠 작성 페이지 (`Generate.tsx`)
**Threads가 이미 채널 중 하나로 존재** (`generateOptions.ts` 111~150행):
- 5개 채널: 네이버 블로그, 티스토리 블로그, 인스타그램, **Threads**, 유튜브&릴스
- Threads 현재 기능: "연속 게시글 10개" 텍스트 생성 (AI 텍스트만)
- ⚠️ 이미지/영상 생성 모드 없음 — 텍스트 전용

### API 키 가이드 페이지 (`/api-key`, `ApiGuide.tsx`)
- 이미 존재하는 가이드 페이지. 여기에 Threads API 가이드 추가 가능

### 설정 페이지 (`/settings`, `Settings.tsx`)
- 7단계 설정: 프로필 → 조직 → API키 → 규정 → AI프롬프트 → 테마 → 금소법

---

## 1. 변경 사항 (TO-BE)

### 1-1. 사이드바 변경 — 없음
기존 메뉴 구조 유지. 새 메뉴 추가 불필요:
- "AI 콘텐츠 작성" (`/generate`) — 이미 있음
- "AI 포스팅 자동화" (`/ai-automation`) — 이미 있음 (향후 개발)

### 1-2. `/generate` 페이지 — Threads 탭 수정

**현재**: Threads 선택 시 → "연속 게시글 10개" 텍스트 생성만
**변경**: Threads 선택 시 → **3가지 모드 선택 UI** 표시

```
Threads 탭 클릭
  └─ 모드 선택 카드 3개
      ├─ [✏️ 텍스트 작성] — 텍스트 전용 게시글
      ├─ [🖼️ 카드뉴스 작성] — 이미지/캐러셀 게시글
      └─ [🎬 영상 작성] — 숏폼 영상 게시글
```

**수정 대상 파일**:
- `src/data/generateOptions.ts` — channels 배열에서 threads 항목 수정
  - `subtitle: "연속 게시글 10개"` → `subtitle: "텍스트/카드뉴스/영상 작성"`
  - 모드 선택 데이터 구조 추가
- `src/pages/Generate.tsx` — Threads 선택 시 모드 선택 UI 분기 추가
- `src/components/ImageGeneratorPanel.tsx` — 카드뉴스 모드 연동 (기존 이미지 생성기 활용)

### 1-3. 3가지 콘텐츠 모드 상세

**모드 A: 텍스트 작성** (기존 로직 유지 + 개선)
- 현재 "연속 게시글 10개" → **단일 게시글 OR 연속 게시글** 선택 가능
- AI 초안 생성 → 편집 → 발행
- Threads 500자 제한 준수
- 금소법 키워드 필터 적용 (기존 complianceFilter 활용)

**모드 B: 카드뉴스(이미지) 작성** (신규)
- 기존 `ImageGeneratorPanel.tsx` 확장
- 템플릿 선택 → AI 내용 생성 → 카드뉴스 이미지 렌더링 → 미리보기 → 발행
- 4:5 비율 (1080×1350px)
- 캐러셀 최대 20장
- 렌더링: Worker에서 Pillow/ThreadAuto 엔진 호출

**모드 C: 영상(숏폼) 작성** (신규, 향후 개발)
- 스크립트 생성 → 영상 렌더링(Remotion) → 미리보기 → 발행
- 에반 6원칙 적용

### 1-4. API 키 가이드 페이지 — Threads 섹션 추가

**수정 대상**: `src/pages/ApiGuide.tsx`
- 기존 네이버 키워드 API 가이드 아래에 **"Threads API 연결 가이드"** 섹션 추가
- 5단계 위저드: `memory/research/meta-threads-api-setup-guide.md` 9-4절 내용
- 스크린샷 + 진행률 바 + 용어 치환

### 1-5. 설정 페이지 — Threads 토큰 입력 단계 추가

**수정 대상**: `src/pages/Settings.tsx`
- 기존 Step 3 (API 키)에 **Threads 토큰 입력 필드** 추가
- 또는 새 Step으로 "Threads 연결" 단계 추가
- 토큰 입력 → AES-256-GCM 암호화 → Supabase 저장

---

## 2. Supabase DB 변경

### 신규 테이블
```sql
-- 사용자별 Threads 토큰 저장
create table threads_tokens (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id) not null,
  encrypted_token text not null,        -- AES-256-GCM 암호화
  token_type text default 'long_lived',
  expires_at timestamptz not null,
  created_at timestamptz default now(),
  updated_at timestamptz default now()
);

-- RLS: 본인 토큰만 접근
alter table threads_tokens enable row level security;
create policy "Users can manage own tokens"
  on threads_tokens for all using (auth.uid() = user_id);

-- 발행 이력
create table threads_posts (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id) not null,
  content_type text not null,           -- 'text' | 'image' | 'video'
  content_text text,
  media_urls text[],
  threads_post_id text,                 -- Meta 발행 후 받는 ID
  status text default 'draft',          -- 'draft' | 'pending' | 'published' | 'failed'
  published_at timestamptz,
  created_at timestamptz default now()
);
```

### 기존 테이블 활용
- `contents` — 기존 콘텐츠 관리 테이블에 `channel = 'threads'` + `content_type` 컬럼 활용

---

## 3. 백엔드 변경

### 신규 Supabase Edge Functions
- `threads-publish` — 토큰 복호화 → Meta API 발행
- `threads-token-refresh` — 크론잡: 만료 7일 전 자동 갱신
- `threads-verify` — 토큰 유효성 확인 + 테스트 게시

### Worker (향후 Phase 2)
- pgmq 기반 Job Queue → Worker 컨테이너 → Meta API
- 이미지/영상 렌더링은 Worker에서 처리 (ThreadAuto 엔진 활용)

---

## 4. 보안

- **토큰**: AES-256-GCM 암호화 + Supabase RLS
- **마스터키**: 환경변수/KMS
- **토큰 갱신**: 만료 7일 전 자동 크론잡
- **감사 로그**: 발행/토큰접근 불변 로그

---

## 5. 법적 안전장치

- **금소법 키워드 필터**: 기존 `complianceFilter` 로직 활용 + 확장
- **#AI생성 자동태그**: 모든 AI 생성 콘텐츠에 자동 부착
- **경쟁사명 블랙리스트**: 특정 보험사/상품명 직접 언급 차단

---

## 6. 플랜 구조

- **무료**: 월 5회 발행
- **프로**: 무제한 발행 + 우선 지원
- 기존 PlanGuard + useFeatureGate 훅 활용

---

## 7. Phase 로드맵

### Phase 1: 텍스트 발행 + 세팅
1. `generateOptions.ts` — Threads subtitle 변경 ("텍스트/카드뉴스/영상 작성")
2. `Generate.tsx` — Threads 모드 선택 UI (3카드), 텍스트 모드 먼저
3. `ApiGuide.tsx` — Threads API 연결 가이드 섹션 추가
4. `Settings.tsx` — Threads 토큰 입력 필드 추가
5. Supabase — `threads_tokens`, `threads_posts` 테이블 생성
6. Edge Function — `threads-publish` (텍스트 발행)
7. Edge Function — `threads-verify` (토큰 검증 + 테스트)
8. 금소법 필터 + #AI생성 태그 적용

### Phase 2: 카드뉴스(이미지) 발행
1. `ImageGeneratorPanel.tsx` 확장 — 카드뉴스 템플릿 + 미리보기
2. Worker 컨테이너 — 이미지 렌더링 (Pillow)
3. 이미지 서빙 (공개 HTTPS URL)
4. `threads-publish` 확장 — IMAGE/CAROUSEL 타입

### Phase 3: 영상 발행
1. 영상 스크립트 생성 UI
2. Worker — Remotion 영상 렌더링
3. `threads-publish` 확장 — VIDEO 타입

### Phase 4: 자동화 + 고도화
1. `ai-automation` 페이지 구현 — 스케줄 발행
2. 토큰 자동 갱신 크론잡
3. 성과 분석 (Insights API)
4. 채널 확장 (Instagram, 네이버블로그)

---

## 8. 수정 대상 파일 전체 목록

### 프론트엔드 (React/TypeScript)
- `src/data/generateOptions.ts` — Threads 채널 설정 수정
- `src/pages/Generate.tsx` — 모드 선택 UI 분기
- `src/pages/ApiGuide.tsx` — Threads 가이드 섹션 추가
- `src/pages/Settings.tsx` — Threads 토큰 입력 추가
- `src/components/ImageGeneratorPanel.tsx` — 카드뉴스 모드 연동 (Phase 2)
- `src/components/AppSidebar.tsx` — 변경 없음 (이미 존재)

### 백엔드 (Supabase)
- `supabase/migrations/` — threads_tokens, threads_posts 테이블
- `supabase/functions/threads-publish/` — 발행 Edge Function
- `supabase/functions/threads-verify/` — 토큰 검증
- `supabase/functions/threads-token-refresh/` — 자동 갱신 (Phase 4)

### 프로젝트 경로
- InsuRo: `/home/jay/projects/InsuRo/`
- ThreadAuto (참조): `/home/jay/projects/ThreadAuto/`