[DEV] 리포트 생성 요청 시 프로그레스바 기능 추가

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.1.1",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.85.2",

frontend/src/App.tsx

@@ -2,7 +2,6 @@ import { RouterProvider } from 'react-router-dom'
 import { router } from './router/router'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { GlobalReportPoller } from './components/GlobalReportPoller'
 import { queryClient } from './utils/queryClient'
 import GlobalModal from './components/GlobalModal'
 
@@ -11,11 +10,8 @@ function App() {
         <>
             <QueryClientProvider client={queryClient}>
                 <ReactQueryDevtools initialIsOpen={false} />
-
                 <RouterProvider router={router} />
                 <GlobalModal />
-                {/* 전역 폴러 */}
-                <GlobalReportPoller />
             </QueryClientProvider>
         </>
     )

frontend/src/api/report.ts

@@ -17,6 +17,7 @@ import type {
     ReportStatusDto,
     ResponseReportById,
     ResponseReportByUrl,
+    ResponseReportStatus,
 } from '../types/report/new'
 
 // URL로 리포트 분석 요청
@@ -60,7 +61,7 @@ export const getReportComments = async ({ reportId, type }: ReportCommentsDto):
 }
 
 // 리포트 분석 상태 조회
-export const getReportStatus = async ({ reportId }: ReportStatusDto) => {
+export const getReportStatus = async ({ reportId }: ReportStatusDto): Promise<ResponseReportStatus> => {
     const { data } = await axiosInstance.get(`/reports/${reportId}/status`)
     return data
 }

frontend/src/components/GlobalProcessingModal.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useMemo } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useReportStore, type ProcessingReport } from '../stores/reportStore'
+import { useReportProgress, useReportStatus } from '../hooks/report'
+import { useAuthStore } from '../stores/authStore'
+import { useDeleteMyReport } from '../hooks/report/useDeleteMyReport'
+import X from '../assets/icons/X.svg?react'
+import { useToastStore } from '../stores/toastStore'
+
+interface ProcessingReportItemProps {
+    item: ProcessingReport
+}
+
+export const ProcessingReportItem = ({ item }: ProcessingReportItemProps) => {
+    const navigate = useNavigate()
+    const removeReport = useReportStore((state) => state.removeReport)
+    const hideReport = useReportStore((state) => state.hideReport)
+    const showToast = useToastStore((state) => state.showToast)
+
+    // 1. 상태 폴링 (완료/실패 여부 체크 & 서버 상태 동기화용)
+    const { isCompleted, isFailed, rawResult } = useReportStatus(item.reportId)
+
+    // 2. SSE 연결 (실시간 진행률 수신)
+    const { currentStep } = useReportProgress(
+        item.reportId,
+        !isCompleted && !isFailed, // 완료나 실패가 아닐 때만 SSE 연결
+        rawResult // 서버의 현재 상태 (재진입 시 동기화용)
+    )
+
+    const progressStyle = useMemo(() => {
+        switch (currentStep) {
+            case 1:
+                return { width: '25%', duration: '10000ms' }
+            case 2:
+                return { width: '50%', duration: '15000ms' }
+            case 3:
+                return { width: '90%', duration: '20000ms' }
+            case 4:
+                return { width: '100%', duration: '100ms' }
+            default:
+                return { width: '5%', duration: '0ms' }
+        }
+    }, [currentStep])
+
+    const channelId = useAuthStore((state) => state.channelId)
+    const { mutate: deleteReport } = useDeleteMyReport({ channelId: channelId || 0 })
+
+    // 실패 처리
+    useEffect(() => {
+        if (isFailed) {
+            removeReport(item.reportId)
+            deleteReport({ reportId: item.reportId })
+        }
+    }, [isFailed, removeReport, item.reportId, deleteReport])
+
+    const handleCloseProgress = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        hideReport(item.reportId)
+
+        showToast(
+            '리포트 생성이 백그라운드에서 계속됩니다.',
+            `리포트는 '저장소'에서 확인하실 수 있습니다.`,
+            'default',
+            6000
+        )
+    }
+
+    const handleCloseComplete = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        removeReport(item.reportId)
+    }
+
+    const handleViewReport = () => {
+        navigate(`/report/${item.reportId}?video=${item.videoId}`)
+        removeReport(item.reportId)
+    }
+
+    // ✅ CASE A: 완료된 경우 (완료 모달 표시)
+    if (isCompleted) {
+        return (
+            <div
+                onClick={(e) => e.stopPropagation()}
+                className={`
+                    relative flex flex-col mx-auto w-[calc(100%-16px)] tablet:w-[384px] desktop:w-[486px]
+                    space-y-4 tablet:space-y-6 bg-surface-elevate-l2 p-6 rounded-3xl
+                `}
+            >
+                <button
+                    type="button"
+                    onClick={handleCloseComplete}
+                    aria-label="Close modal"
+                    className="cursor-pointer absolute top-4 right-4 tablet:top-6 tablet:right-6 "
+                >
+                    <X />
+                </button>
+
+                <div className="whitespace-pre-line space-y-2">
+                    <h1
+                        id="modal-title"
+                        className="
+                            font-title-20b
+                            whitespace-pre-line tablet:whitespace-nowrap
+                        "
+                    >
+                        리포트 생성이 완료되었습니다.
+                    </h1>
+                    <p id="modal-description" className="font-body-16r text-gray-600">
+                        [{item.title}] 리포트가 완성되었습니다.
+                    </p>
+                </div>
+
+                <button
+                    onClick={handleViewReport}
+                    className="cursor-pointer w-full bg-primary-500 px-4 py-2 rounded-2xl font-body-16b"
+                >
+                    리포트로 이동
+                </button>
+            </div>
+        )
+    }
+
+    // ✅ CASE B: 생성 중인데 사용자가 '닫기'를 누른 경우
+    if (item.isHidden) {
+        return null
+    }
+
+    // ✅ CASE C: 생성 중이고 화면에 보여야 하는 경우 (진행 모달)
+    return (
+        <div
+            onClick={() => navigate(`/report/${item.reportId}?video=${item.videoId}`)}
+            className={`
+                    relative flex flex-col mx-auto w-[calc(100%-16px)] tablet:w-[384px] desktop:w-[486px]
+                    space-y-4 tablet:space-y-6 bg-surface-elevate-l2 p-6 rounded-3xl
+                `}
+        >
+            <button
+                type="button"
+                onClick={handleCloseProgress}
+                aria-label="Close modal"
+                className="cursor-pointer absolute top-4 right-4 tablet:top-6 tablet:right-6 "
+            >
+                <X />
+            </button>
+
+            <div className="whitespace-pre-line space-y-2">
+                <h1 className="font-title-20b whitespace-pre-line tablet:whitespace-nowrap">
+                    {currentStep === 1 && '유튜브 데이터 수집 중..'}
+                    {currentStep === 2 && '영상 지표 및 댓글 분석 중..'}
+                    {currentStep === 3 && '이탈 구간과 알고리즘 최적화 분석 중..'}
+                    {currentStep === 4 && '리포트 완성'}
+                </h1>
+                <p id="modal-description" className="font-body-16r text-gray-600 whitespace-pre-wrap">
+                    [{item.title}] 리포트를 생성 중입니다.
+                </p>
+
+                {/* 프로그레스 바 */}
+                <div className="h-1 w-full bg-gray-100 rounded-full overflow-hidden">
+                    <div
+                        className="h-full bg-primary-500 rounded-full transition-all ease-out"
+                        style={{
+                            width: progressStyle.width,
+                            transitionDuration: progressStyle.duration,
+                        }}
+                    />
+                </div>
+            </div>
+
+            <button
+                onClick={handleViewReport}
+                className="cursor-pointer w-full bg-primary-500 px-4 py-2 rounded-2xl font-body-16b"
+            >
+                리포트로 이동
+            </button>
+        </div>
+    )
+}
+
+export const GlobalProcessingModal = () => {
+    const { pathname } = useLocation()
+    const reports = useReportStore((state) => state.reports)
+    const isAuth = useAuthStore((state) => state.isAuth)
+
+    if (!isAuth) return null
+    if (reports.length === 0) return null
+
+    return (
+        <div className="fixed right-0 bottom-2 tablet:bottom-8 tablet:right-8 z-50 flex flex-col-reverse gap-2 tablet:gap-4">
+            {reports.map((report) => {
+                // 현재 보고 있는 리포트 페이지의 모달은 숨김
+                const isCurrentPage = pathname.includes(`/report/${report.reportId}`)
+                if (isCurrentPage) return null
+
+                return <ProcessingReportItem key={report.reportId} item={report} />
+            })}
+        </div>
+    )
+}

frontend/src/components/GlobalToast.tsx

@@ -0,0 +1,52 @@
+import { createPortal } from 'react-dom'
+import * as motion from 'motion/react-client'
+import { AnimatePresence } from 'motion/react'
+import { useToastStore } from '../stores/toastStore'
+
+import ErrorIcon from '../assets/icons/error.svg?react'
+import ToastBlur from '../assets/ellipses/toast.svg?react'
+
+export const GlobalToast = () => {
+    const { isVisible, title, description, type, hideToast } = useToastStore()
+
+    const renderIcon = () => {
+        if (type === 'error') return <ErrorIcon />
+        return <ErrorIcon />
+    }
+
+    return createPortal(
+        <AnimatePresence>
+            {isVisible && (
+                <div className="fixed top-0 left-0 right-0 flex justify-center z-[9999] pointer-events-none">
+                    <motion.div
+                        initial={{ opacity: 0, y: 0 }}
+                        animate={{ opacity: 1, y: [0, 40, 28, 32] }}
+                        exit={{ opacity: 0, y: 0 }}
+                        transition={{
+                            duration: 0.8,
+                            ease: 'easeOut',
+                        }}
+                        className="pointer-events-auto relative overflow-hidden rounded-lg desktop:left-10"
+                        onClick={hideToast}
+                    >
+                        <ToastBlur className="absolute inset-0" />
+
+                        <div className="relative z-10 flex flex-row items-center w-[288px] tablet:w-[384px] px-4 py-3 gap-4 bg-surface-elevate-l1/90 backdrop-blur-sm">
+                            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-surface-elevate-l2 shrink-0">
+                                {renderIcon()}
+                            </div>
+
+                            <div className="flex-1 flex flex-col min-w-0">
+                                {title && <h3 className="font-body-16b text-gray-900 truncate">{title}</h3>}
+                                {description && (
+                                    <p className="font-caption-14r text-gray-600 break-keep">{description}</p>
+                                )}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>,
+        document.body
+    )
+}

frontend/src/constants/sse.ts

@@ -0,0 +1 @@
+export const SSE_URL = 'https://api.chaneling.com/sse/connect'

frontend/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useNavbarControls'
+export * from './useIsMobile'

frontend/src/hooks/report/index.ts

@@ -1 +1,4 @@
 export * from './useGetDummyReport'
+export * from './useReportStatus'
+export * from './useReportProgress'
+export * from './useGetVideoData'

frontend/src/hooks/report/useGetVideoData.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { getVideoData } from '../../api/report'
 
-export default function useGetVideoData(videoId: number | undefined) {
+export function useGetVideoData(videoId: number | undefined) {
     return useQuery({
         queryKey: ['video', videoId],
         queryFn: async () => getVideoData({ videoId }),