[DEPLOY] 회원 탈퇴 API 연결 등 적용

frontend/package.json

@@ -21,6 +21,7 @@
     "react": "^19.1.2",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.2",
+    "react-ga4": "^2.1.0",
     "react-hook-form": "^7.60.0",
     "react-markdown": "^10.1.0",
     "react-responsive": "^10.0.1",

frontend/src/App.tsx

@@ -11,6 +11,7 @@ function App() {
         <>
             <QueryClientProvider client={queryClient}>
                 <ReactQueryDevtools initialIsOpen={false} />
+
                 <RouterProvider router={router} />
                 <GlobalModal />
                 {/* 전역 폴러 */}

frontend/src/api/user.ts

@@ -33,3 +33,8 @@ export const fetchMyProfile = async () => {
     const { data } = await axiosInstance.get('/members')
     return data
 }
+
+export const withdrawMember = async () => {
+    const { data } = await axiosInstance.delete('/members/withdraw')
+    return data
+}

frontend/src/components/GoogleAnalytics.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { initGA, trackPageView } from '../utils/analytics'
+
+/**
+ * Google Analytics 초기화 및 페이지뷰 트래킹을 담당하는 컴포넌트
+ */
+export const GoogleAnalytics = () => {
+    const location = useLocation()
+
+    // GA 초기화 (최초 1회만 실행)
+    useEffect(() => {
+        initGA()
+    }, [])
+
+    // 페이지 이동 시 페이지뷰 트래킹
+    useEffect(() => {
+        trackPageView(location.pathname + location.search)
+    }, [location])
+
+    return null
+}

frontend/src/hooks/idea/usePatchIdeaBookmark.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { patchReportIdeaBookmark } from '../../api/idea'
 import type { PatchIdeaBookmarkDto, ResponseGetGeneratedIdea, ResponsePatchIdeaBookmark } from '../../types/idea'
+
 interface OptimisticUpdateContext {
     previousIdeasResponse?: ResponseGetGeneratedIdea
 }

frontend/src/hooks/idea/usePostIdea.ts

@@ -15,11 +15,12 @@ export default function usePostIdea() {
         },
         onError: (error) => {
             const state = error.response?.status
+            const errorMessage = error.response?.data?.message || 'Unknown error'
+
             if (state === 400) {
                 openModal('GENERATING_LIMIT')
                 return
             }
-            const errorMessage = error.response?.data?.message
             console.error('아이디어 생성 실패:', errorMessage)
         },
     })

frontend/src/hooks/main/useUrlInput.ts

@@ -9,7 +9,16 @@ import { useQueryClient } from '@tanstack/react-query'
 
 const PENDING_KEY = 'pending-url'
 
-export const useUrlInput = (onRequestUrlSuccess?: (reportId: number, videoId: number) => void) => {
+interface UseUrlInputCallbacks {
+    onRequestUrlSuccess?: (reportId: number, videoId: number) => void
+    onTrackEvent?: (event: {
+        category: string
+        action: string
+        label: string
+    }) => void
+}
+
+export const useUrlInput = ({ onRequestUrlSuccess, onTrackEvent }: UseUrlInputCallbacks = {}) => {
     const [isActive, setIsActive] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
@@ -36,10 +45,22 @@ export const useUrlInput = (onRequestUrlSuccess?: (reportId: number, videoId: nu
                 })
             }
 
+            onTrackEvent?.({
+                category: 'Report',
+                action: 'Generate Report Success',
+                label: 'Main Page URL Input',
+            })
+
             onRequestUrlSuccess?.(reportId, videoId)
             setError(null)
         },
         onError: ({ code, message }) => {
+            onTrackEvent?.({
+                category: 'Report',
+                action: 'Generate Report Error',
+                label: code,
+            })
+
             if (code === 'YOUTUBE400') {
                 setError('유효한 유튜브 URL을 입력해주세요.')
             } else if (code === 'VIDEO403') {
@@ -59,6 +80,7 @@ export const useUrlInput = (onRequestUrlSuccess?: (reportId: number, videoId: nu
     const url = watch('url')
 
     // URL이 변경될 때만 에러 상태를 초기화
+
     useEffect(() => {
         if (error) {
             setError(null)
@@ -88,10 +110,23 @@ export const useUrlInput = (onRequestUrlSuccess?: (reportId: number, videoId: nu
             } catch {
                 alert('URL 임시 저장 실패')
             }
+
+            onTrackEvent?.({
+                category: 'User',
+                action: 'Login Required',
+                label: 'URL Input - Not Authenticated',
+            })
+
             openLoginFlow() // 비로그인 상태에서 요청할 경우 로그인 플로우를 시작
             return
         }
 
+        onTrackEvent?.({
+            category: 'Report',
+            action: 'Generate Report Request',
+            label: 'Main Page URL Input',
+        })
+
         setError(null)
         requestNewReport({ url }) // 리포트 생성 요청
     }

frontend/src/hooks/report/useDeleteMyReport.ts

@@ -1,20 +1,49 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import type { DeleteMyReport, ResponseDeleteMyReport } from '../../types/report/all'
+import type { BriefReport, DeleteMyReport, ResponseDeleteMyReport } from '../../types/report/all'
 import { deleteMyReport } from '../../api/report'
 
+type MyReportQueryData = {
+    reportList: BriefReport[]
+    totalElements: number
+}
+
+type DeleteReportContext = {
+    previousData?: MyReportQueryData
+}
+
 export const useDeleteMyReport = ({ channelId }: { channelId: number | undefined }) => {
     const queryClient = useQueryClient()
 
-    return useMutation<ResponseDeleteMyReport, Error, DeleteMyReport>({
+    return useMutation<ResponseDeleteMyReport, Error, DeleteMyReport, DeleteReportContext>({
         mutationFn: deleteMyReport,
-        onSuccess: () => {
+
+        onMutate: async ({ reportId }) => {
+            if (typeof channelId !== 'number') return {}
+            const queryKey = ['my', 'report', channelId]
+            await queryClient.cancelQueries({ queryKey })
+            const previousData = queryClient.getQueryData<MyReportQueryData>(queryKey)
+            queryClient.setQueryData<MyReportQueryData>(queryKey, (old) => {
+                if (!old) return old
+                return {
+                    ...old,
+                    reportList: old.reportList.filter((report) => report.reportId !== reportId),
+                    totalElements: old.totalElements - 1,
+                }
+            })
+            return { previousData }
+        },
+        onError: (_error, _variables, context) => {
+            if (typeof channelId === 'number' && context?.previousData) {
+                queryClient.setQueryData(['my', 'report', channelId], context.previousData)
+            }
+            alert('리포트 삭제 중 오류가 발생했습니다.')
+        },
+
+        onSettled: () => {
             if (typeof channelId === 'number') {
                 queryClient.invalidateQueries({ queryKey: ['my', 'report', channelId] })
                 queryClient.invalidateQueries({ queryKey: ['recommendedVideos'] })
             }
         },
-        onError: () => {
-            alert('리포트 삭제 중 오류가 발생했습니다.')
-        },
     })
 }