Merge pull request #138 from JECT-Study/feat/IN-271

feat(IN-271): 경쟁사 영상 분석 - 선택 액션바 및 AI 인사이트 구현

Author: shunn2

src/features/competitor/api/competitorApi.ts

@@ -3,6 +3,8 @@ import { axiosInstance } from '@/shared/api'
 import type {
   BrandCollaborationsQuery,
   BrandCollaborationsResponseDto,
+  BrandCollaborationsTrendsRequest,
+  BrandCollaborationsTrendsResponseDto,
 } from '../model/types'
 
 export async function fetchBrandCollaborations(
@@ -16,3 +18,13 @@ export async function fetchBrandCollaborations(
   })
   return res.data.responseDto
 }
+
+/* AI 분석 인사이트 — 선택한 영상들로 콘텐츠/채널/전략 분석 결과 조회 */
+export async function fetchBrandCollaborationsTrends(
+  body: BrandCollaborationsTrendsRequest
+): Promise<BrandCollaborationsTrendsResponseDto> {
+  const res = await axiosInstance.post<
+    ApiResponse<BrandCollaborationsTrendsResponseDto>
+  >('/brand-collaborations/trends', body)
+  return res.data.responseDto
+}

src/features/competitor/index.ts

@@ -7,6 +7,12 @@ export type {
   BrandCollaborationsSort,
   BrandCollaborationsResponseDto,
   BrandCollaborationsQuery,
+  BrandCollaborationsTrendsRequest,
+  BrandCollaborationsTrendsResponseDto,
+  TrendsContentKeywords,
+  TrendsChannelCharacteristics,
+  TrendsCategoryDistribution,
+  TrendsStrategyInsight,
 } from './model/types'
 export { DEFAULT_COMPETITOR_FILTER } from './model/types'
 
@@ -23,4 +29,9 @@ export {
   toBrandCollaborationsQuery,
 } from './model/useBrandCollaborations'
 
-export { fetchBrandCollaborations } from './api/competitorApi'
+export { useBrandCollaborationsTrends } from './model/useBrandCollaborationsTrends'
+
+export {
+  fetchBrandCollaborations,
+  fetchBrandCollaborationsTrends,
+} from './api/competitorApi'

src/features/competitor/model/types.ts

@@ -88,3 +88,53 @@ export interface BrandCollaborationsResponseDto {
   pageInfo: PageInfo
   sort: BrandCollaborationsSort
 }
+
+/* ─────────── AI 분석 인사이트 ─────────── */
+
+/* trends 요청 body */
+export interface BrandCollaborationsTrendsRequest {
+  /* 분석할 YouTube 영상 ID 목록 (1~10개) */
+  youtubeVideoIds: string[]
+}
+
+/* AI 분석 키워드 정보 */
+export interface TrendsContentKeywords {
+  /* AI 추출 공통 키워드 목록 — AI 실패 시 [] */
+  keywords: string[]
+  /* 키워드 요약 (AI 생성) — AI 실패 시 null */
+  keywordSummary: string | null
+}
+
+/* 카테고리별 비율 */
+export interface TrendsCategoryDistribution {
+  category: string
+  /* 0~100 (소수점 1자리) */
+  percentage: number
+}
+
+/* 협업 채널 통계 */
+export interface TrendsChannelCharacteristics {
+  channelCount: number
+  avgSubscribers: number
+  minSubscribers: number
+  maxSubscribers: number
+  /* 평균 업로드 주기 (일) — Nullable */
+  uploadIntervalDays: number | null
+  /* 결과 없으면 [] */
+  categoryDistribution: TrendsCategoryDistribution[]
+}
+
+/* AI 전략 인사이트 */
+export interface TrendsStrategyInsight {
+  /* PPL 의도 분석 요약 — AI 실패 시 null */
+  pplIntent: string | null
+  /* 경쟁사 협업 전략의 강점 — AI 실패 시 null */
+  competitivePoints: string | null
+}
+
+/* trends 응답 DTO */
+export interface BrandCollaborationsTrendsResponseDto {
+  contentKeywords: TrendsContentKeywords
+  channelCharacteristics: TrendsChannelCharacteristics
+  strategyInsight: TrendsStrategyInsight
+}

src/features/competitor/model/useBrandCollaborationsTrends.ts

@@ -0,0 +1,33 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchBrandCollaborationsTrends } from '../api/competitorApi'
+
+interface UseBrandCollaborationsTrendsOptions {
+  /* 분석 대상 영상 ID 배열 (1~10) */
+  videoIds: string[]
+  enabled?: boolean
+}
+
+/**
+ * 선택한 영상들로 AI 분석 인사이트(trends) 조회
+ * - queryKey에 정렬된 videoIds를 포함해 동일 영상셋이면 캐시 재사용
+ * - 빈 배열이거나 10개 초과면 자동 비활성화
+ */
+export function useBrandCollaborationsTrends({
+  videoIds,
+  enabled = true,
+}: UseBrandCollaborationsTrendsOptions) {
+  const sortedIds = [...videoIds].sort()
+  const isValidCount = sortedIds.length > 0 && sortedIds.length <= 10
+
+  return useQuery({
+    queryKey: ['brand-collaborations-trends', sortedIds],
+    queryFn: () =>
+      fetchBrandCollaborationsTrends({ youtubeVideoIds: sortedIds }),
+    enabled: enabled && isValidCount,
+    /* 같은 영상셋이면 새 조건이 되기 전까지 stale 처리 안 함 */
+    staleTime: Infinity,
+  })
+}

src/pages/competitor/ui/CompetitorPage.tsx

@@ -7,6 +7,7 @@ import { Lightbulb } from 'lucide-react'
 
 import {
   CompetitorFilterPanel,
+  CompetitorInsightSection,
   CompetitorResultSection,
   CompetitorSelectionBar,
 } from '@/widgets/competitor'
@@ -37,6 +38,12 @@ export function CompetitorPage() {
     new Set()
   )
 
+  /* 분석 트리거된 영상 ID 배열 — '영상 분석하기' 클릭 시 선택 영상의 스냅샷 */
+  const [analyzedVideoIds, setAnalyzedVideoIds] = useState<string[]>([])
+
+  /* 상세 검색 영역 열림 상태 — 분석 완료 시 자동 닫기 위해 페이지에서 관리 */
+  const [isDetailOpen, setIsDetailOpen] = useState(false)
+
   const { data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useBrandCollaborations({ filter: appliedFilter })
 
@@ -50,17 +57,19 @@ export function CompetitorPage() {
     setDraftFilter((prev) => ({ ...prev, [key]: value }))
   }
 
-  /* 초기화: 편집 필터 + 적용 필터 + 선택 영상 모두 초기 상태로 */
+  /* 초기화: 편집 필터 + 적용 필터 + 선택/분석 영상 모두 초기 상태로 */
   function handleReset() {
     setDraftFilter(DEFAULT_COMPETITOR_FILTER)
     setAppliedFilter(null)
     setSelectedVideoIds(new Set())
+    setAnalyzedVideoIds([])
   }
 
   /* 검색: 편집 필터를 확정. 동일 조건 재검색 시에도 강제 refetch */
   function handleSearch() {
     setAppliedFilter(draftFilter)
     setSelectedVideoIds(new Set())
+    setAnalyzedVideoIds([])
     queryClient.invalidateQueries({ queryKey: ['brand-collaborations'] })
   }
 
@@ -86,12 +95,16 @@ export function CompetitorPage() {
     })
   }
 
+  /* Clear All: 선택 영상 + 분석 결과만 초기화 (검색 필터/영상 리스트 유지) */
   function handleClearSelection() {
     setSelectedVideoIds(new Set())
+    setAnalyzedVideoIds([])
   }
 
+  /* '영상 분석하기' — 현재 선택 영상으로 trends 분석 트리거 */
   function handleAnalyze() {
-    /* TODO: 분석 결과 페이지가 만들어지면 push 처리 (IN-270 범위 밖) */
+    if (selectedVideoIds.size === 0) return
+    setAnalyzedVideoIds(Array.from(selectedVideoIds))
   }
 
   return (
@@ -101,11 +114,20 @@ export function CompetitorPage() {
         onChange={handleChange}
         onReset={handleReset}
         onSearch={handleSearch}
+        isDetailOpen={isDetailOpen}
+        onDetailOpenChange={setIsDetailOpen}
       />
 
       <div className='flex w-full flex-col gap-16 px-24 pt-24'>
         <AnalysisInsightCard hasResults={hasResults} />
 
+        {analyzedVideoIds.length > 0 && (
+          <CompetitorInsightSection
+            videoIds={analyzedVideoIds}
+            onAnalysisComplete={() => setIsDetailOpen(false)}
+          />
+        )}
+
         {appliedFilter && (
           <>
             <CompetitorSelectionBar

src/shared/api/msw/handlers/brandCollaborationsHandlers.ts

@@ -4,14 +4,29 @@ import { mockBrandCollaborations } from '@/features/competitor/mock/mockBrandCol
 
 const PAGE_SIZE = 9
 
+const mockTrendsKeywords = [
+  '부스터 프로',
+  '피부관리',
+  '메디큐브',
+  '광채피부',
+  '홈케어',
+  '모공관리',
+  '리프팅',
+  '내돈내산',
+  '루틴',
+  '전후비교',
+  '피부장벽',
+  '콜라겐',
+  '뷰티디바이스',
+]
+
 export const brandCollaborationsHandlers = [
   http.get(
     `${process.env.NEXT_PUBLIC_API_URL}/brand-collaborations`,
     ({ request }) => {
       const url = new URL(request.url)
       const cursor = url.searchParams.get('cursor')
-      const pageSize =
-        Number(url.searchParams.get('pageSize')) || PAGE_SIZE
+      const pageSize = Number(url.searchParams.get('pageSize')) || PAGE_SIZE
       const sortCriteria = url.searchParams.get('sortCriteria') ?? 'LATEST'
       const sortOrder = url.searchParams.get('sortOrder') ?? 'DESC'
 
@@ -43,4 +58,42 @@ export const brandCollaborationsHandlers = [
       })
     }
   ),
+  http.post(
+    `${process.env.NEXT_PUBLIC_API_URL}/brand-collaborations/trends`,
+    async ({ request }) => {
+      const body = (await request.json()) as { youtubeVideoIds: string[] }
+      /* 선택 영상 1개당 채널 1개 매칭으로 가정 */
+      const channelCount = body.youtubeVideoIds.length
+
+      return HttpResponse.json({
+        success: true,
+        responseDto: {
+          contentKeywords: {
+            keywords: mockTrendsKeywords,
+            keywordSummary:
+              '3개 영상 모두 홈 피부관리 루틴 맥락에서 메디큐브 디바이스를 소개합니다. 특히 "내돈내산"처럼 자발적 구매처럼 보이는 연출이 반복되며, 사용 전·후 피부 비교 장면을 중심으로 제품 효과를 시각적으로 강조하는 구조가 공통적입니다.',
+          },
+          channelCharacteristics: {
+            channelCount,
+            avgSubscribers: 620000,
+            minSubscribers: 50000,
+            maxSubscribers: 3000000,
+            uploadIntervalDays: 3.9,
+            categoryDistribution: [
+              { category: '뷰티/스킨케어', percentage: 71.0 },
+              { category: '라이프 스타일', percentage: 18.0 },
+              { category: '건강/웰니스', percentage: 11.0 },
+            ],
+          },
+          strategyInsight: {
+            pplIntent:
+              '메디큐브는 병원 피부과의 홈케어 대체재라는 포지셔닝을 가집니다. 선정된 채널들은 구독자가 이미 피부 고민을 가진 20~30대 여성으로 구성되어 있어, 별도의 타겟팅 없이 높은 구매 의향층에 직접 도달할 수 있는 채널입니다. 특히 재협업 7개 채널은 초기 캠페인에서 전환율이 높았던 채널로, 지속 노출로 브랜드 신뢰도를 쌓는 전략으로 해석됩니다.',
+            competitivePoints:
+              '"병원 안 가도 되는 홈케어" 메시지가 핵심입니다. 전·후 비교 장면, 수치 기반 효과(콜라겐 200% 등), 크리에이터의 실제 피부 변화 서사를 통해 제품 신뢰를 구축합니다. 광고처럼 보이지 않는 "내돈내산" 연출 전략도 공통적으로 사용됩니다.',
+          },
+        },
+        error: null,
+      })
+    }
+  ),
 ]

src/shared/api/msw/handlers/videosHandlers.ts

@@ -49,7 +49,7 @@ export const videosHandlers = [
       videos = videos.sort(sortFns[sort] ?? sortFns.LATEST)
 
       return HttpResponse.json({
-        isSuccess: true,
+        success: true,
         responseDto: { ...basePage, videos },
         error: null,
       })

src/widgets/competitor/competitorFilter/ui/CompetitorFilterPanel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useRef, useEffect, useState } from 'react'
 import { cn } from '@/shared/lib/utils'
 import { formatDate } from '@/shared/lib/format'
 import { Button } from '@/shared/ui/button'
@@ -24,15 +24,26 @@ interface CompetitorFilterPanelProps {
   ) => void
   onReset: () => void
   onSearch: () => void
+  /* 상세 검색 영역 열림 상태 (외부 controlled 가능) — 미전달 시 내부 state로 동작 */
+  isDetailOpen?: boolean
+  onDetailOpenChange?: (open: boolean) => void
 }
 
 export function CompetitorFilterPanel({
   filter,
   onChange,
   onReset,
   onSearch,
+  isDetailOpen: isDetailOpenProp,
+  onDetailOpenChange,
 }: CompetitorFilterPanelProps) {
-  const [isDetailOpen, setIsDetailOpen] = useState(false)
+  /* controlled/uncontrolled 모두 지원 */
+  const [isDetailOpenInternal, setIsDetailOpenInternal] = useState(false)
+  const isDetailOpen = isDetailOpenProp ?? isDetailOpenInternal
+  const setIsDetailOpen = (next: boolean) => {
+    onDetailOpenChange?.(next)
+    if (isDetailOpenProp === undefined) setIsDetailOpenInternal(next)
+  }
 
   return (
     <div className='flex w-full flex-col gap-24 bg-background-gray-default py-24'>
@@ -102,7 +113,7 @@ export function CompetitorFilterPanel({
       <div className='flex justify-center'>
         <button
           type='button'
-          onClick={() => setIsDetailOpen((prev) => !prev)}
+          onClick={() => setIsDetailOpen(!isDetailOpen)}
           className='flex cursor-pointer items-center gap-4 rounded-full px-16 py-6 text-noto-label-md-normal text-text-and-icon-secondary transition-colors hover:bg-background-gray-default'>
           상세 검색
           <IconChevronDown

src/widgets/competitor/competitorInsight/index.ts

@@ -0,0 +1 @@
+export { CompetitorInsightSection } from './ui/CompetitorInsightSection'