Merge pull request #292 from manNomi/init/centry

manNomi · web-flow · commit cb905ec3ed4a · 2025-10-28T11:02:41.000+09:00
fix: sentry guide
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-select": "^2.1.6",
     "@react-google-maps/api": "^2.19.2",
-    "@sentry/nextjs": "^7.107.0",
+    "@sentry/nextjs": "^10.22.0",
     "@stomp/stompjs": "^7.1.1",
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -3,13 +3,16 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
   dsn: process.env.SENTRY_DSN || "",
   environment: process.env.SENTRY_ENVIRONMENT || "development",
+
+  // Performance Monitoring: 모든 트랜잭션 샘플링 (프로덕션에서는 0.1~0.3 권장)
   tracesSampleRate: 1.0,
 
   // Replay 샘플링 설정
   replaysSessionSampleRate: 0.1, // 일반 세션의 10%
   replaysOnErrorSampleRate: 1.0, // 에러 발생 시 100%
 
   integrations: [
+    // Browser Tracing: 페이지 로드 및 네비게이션 성능 측정
     Sentry.browserTracingIntegration({
       tracePropagationTargets: [
         "localhost",
@@ -19,8 +22,10 @@ Sentry.init({
         /^https:\/\/(www\.)?solid[\-]?connection\.com/,
       ],
       // Web Vitals 자동 수집 활성화
-      enableInp: true, // Interaction to Next Paint
+      enableInp: true, // Interaction to Next Paint (INP) 측정
     }),
+
+    // Session Replay: 사용자 세션 녹화
     Sentry.replayIntegration({
       maskAllText: true,
       blockAllMedia: true,
diff --git a/src/api/auth/client/useDeleteUserAccount.ts b/src/api/auth/client/useDeleteUserAccount.ts
@@ -3,7 +3,6 @@ import { useRouter } from "next/navigation";
 import { AxiosResponse } from "axios";
 
 import { axiosInstance } from "@/utils/axiosInstance";
-import { removeAccessTokenToLS } from "@/utils/localStorageUtils";
 
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
@@ -23,8 +22,8 @@ const useDeleteUserAccount = () => {
       router.replace("/");
     },
     onSuccess: () => {
+      // Zustand persist가 자동으로 localStorage에서 제거
       clearAccessToken();
-      removeAccessTokenToLS();
       queryClient.clear();
     },
     onError: (error) => {
diff --git a/src/api/auth/client/usePostAppleAuth.ts b/src/api/auth/client/usePostAppleAuth.ts
@@ -2,9 +2,7 @@ import { useRouter } from "next/navigation";
 
 import { AxiosResponse } from "axios";
 
-import { isCookieLoginEnabled } from "@/utils/authUtils";
 import { publicAxiosInstance } from "@/utils/axiosInstance";
-import { saveAccessTokenToLS } from "@/utils/localStorageUtils";
 
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
@@ -43,13 +41,9 @@ const usePostAppleAuth = () => {
       const { data } = response;
 
       if (data.isRegistered) {
-        // 기존 회원일 시 - 토큰 저장하고 홈으로 이동
+        // 기존 회원일 시 - Zustand persist가 자동으로 localStorage에 저장
+        // refreshToken은 서버에서 HTTP-only 쿠키로 자동 설정됨
         useAuthStore.getState().setAccessToken(data.accessToken);
-
-        // 로컬스토리지 모드일 때만 리프레시 토큰을 로컬스토리지에 저장
-        if (!isCookieLoginEnabled()) {
-          saveAccessTokenToLS(data.accessToken);
-        }
       } else {
         // 새로운 회원일 시 - 회원가입 페이지로 이동
         router.push(`/sign-up?token=${data.signUpToken}`);
diff --git a/src/api/auth/client/usePostEmailAuth.ts b/src/api/auth/client/usePostEmailAuth.ts
@@ -2,9 +2,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 
 import { AxiosResponse } from "axios";
 
-import { isCookieLoginEnabled } from "@/utils/authUtils";
 import { publicAxiosInstance } from "@/utils/axiosInstance";
-import { saveAccessTokenToLS } from "@/utils/localStorageUtils";
 
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
@@ -33,15 +31,10 @@ const usePostEmailAuth = () => {
     onSuccess: (data) => {
       const { accessToken } = data.data;
 
-      // 액세스 토큰은 항상 Zustand 스토어에 저장
+      // Zustand persist가 자동으로 localStorage에 저장
+      // refreshToken은 서버에서 HTTP-only 쿠키로 자동 설정됨
       setAccessToken(accessToken);
 
-      // 로컬스토리지 모드일 때만 리프레시 토큰을 로컬스토리지에 저장
-      // 쿠키 모드일 때는 서버에서 HTTP-only 쿠키로 자동 설정됨
-      if (!isCookieLoginEnabled() && accessToken) {
-        saveAccessTokenToLS(accessToken);
-      }
-
       // 안전한 리다이렉트 처리 - 오픈 리다이렉트 방지
       const redirectParam = searchParams.get("redirect");
       let safeRedirect = "/"; // 기본값
diff --git a/src/api/auth/client/usePostKakaoAuth.ts b/src/api/auth/client/usePostKakaoAuth.ts
@@ -2,9 +2,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 
 import { AxiosResponse } from "axios";
 
-import { isCookieLoginEnabled } from "@/utils/authUtils";
 import { publicAxiosInstance } from "@/utils/axiosInstance";
-import { saveAccessTokenToLS } from "@/utils/localStorageUtils";
 
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
@@ -45,14 +43,10 @@ const usePostKakaoAuth = () => {
       const { data } = response;
 
       if (data.isRegistered) {
-        // 기존 회원일 시 - 토큰 저장하고 홈으로 이동
+        // 기존 회원일 시 - Zustand persist가 자동으로 localStorage에 저장
+        // refreshToken은 서버에서 HTTP-only 쿠키로 자동 설정됨
         setAccessToken(data.accessToken);
 
-        // 로컬스토리지 모드일 때만 리프레시 토큰을 로컬스토리지에 저장
-        if (!isCookieLoginEnabled() && data.accessToken) {
-          saveAccessTokenToLS(data.accessToken);
-        }
-
         // 안전한 리다이렉트 처리 - 오픈 리다이렉트 방지
         const redirectParam = searchParams.get("redirect");
         let safeRedirect = "/"; // 기본값
diff --git a/src/api/auth/client/usePostLogout.ts b/src/api/auth/client/usePostLogout.ts
@@ -1,7 +1,6 @@
 import { AxiosResponse } from "axios";
 
 import { axiosInstance } from "@/utils/axiosInstance";
-import { removeAccessTokenToLS } from "@/utils/localStorageUtils";
 
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -15,8 +14,8 @@ const usePostLogout = () => {
   return useMutation({
     mutationFn: postLogout,
     onSuccess: () => {
+      // Zustand persist가 자동으로 localStorage에서 제거
       clearAccessToken();
-      removeAccessTokenToLS();
       queryClient.clear();
       // 로그아웃 후 홈으로 리다이렉트
       window.location.href = "/";
diff --git a/src/app/web-vitals.tsx b/src/app/web-vitals.tsx
@@ -2,44 +2,23 @@
 
 import { useReportWebVitals } from "next/web-vitals";
 
-import * as Sentry from "@sentry/nextjs";
-
 /**
- * Next.js Web Vitals를 Sentry로 전송하는 컴포넌트
+ * Next.js Web Vitals를 개발 환경에서 콘솔로 확인하는 컴포넌트
  *
- * 측정되는 메트릭:
+ * 📊 Sentry로 자동 수집되는 메트릭:
  * - CLS (Cumulative Layout Shift): 레이아웃 안정성
  * - FCP (First Contentful Paint): 첫 콘텐츠 표시 시간
  * - FID (First Input Delay): 첫 입력 지연 (INP로 대체 예정)
  * - INP (Interaction to Next Paint): 상호작용 응답성
  * - LCP (Largest Contentful Paint): 최대 콘텐츠 표시 시간
  * - TTFB (Time to First Byte): 첫 바이트까지의 시간
+ *
+ * ℹ️ Sentry의 browserTracingIntegration (enableInp: true)이 활성화되어 있어
+ *    Web Vitals가 자동으로 수집됩니다. 수동으로 span을 생성할 필요가 없습니다.
  */
 export function WebVitals() {
   useReportWebVitals((metric) => {
-    // Web Vitals를 Sentry 트랜잭션으로 전송
-    const { name, value, rating, navigationType, id } = metric;
-
-    // Sentry의 현재 트랜잭션에 measurement 추가 (v7 API)
-    const transaction = Sentry.getCurrentHub().getScope()?.getTransaction();
-    if (transaction) {
-      // CLS는 unitless 메트릭이므로 unit을 생략, 나머지는 millisecond
-      if (name === "CLS") {
-        transaction.setMeasurement(name, value);
-      } else {
-        transaction.setMeasurement(name, value, "millisecond");
-      }
-      transaction.setTag(`${name}.rating`, rating);
-      transaction.setTag("navigation.type", navigationType);
-    }
-
-    // 각 메트릭을 개별 컨텍스트 키로 저장 (덮어쓰기 방지)
-    Sentry.getCurrentScope().setContext(`web-vitals.${name}`, {
-      value,
-      rating,
-      navigationType,
-      id,
-    });
+    const { name, value, rating, navigationType } = metric;
 
     // 개발 환경에서는 콘솔에도 출력
     if (process.env.NODE_ENV === "development") {
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -11,12 +11,14 @@ export function middleware(request: NextRequest) {
   //   return NextResponse.next();
   // }
 
-  // 쿠키 기반 인증이 활성화된 경우에만 미들웨어 적용
-  const isCookieAuthEnabled = process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true";
-  if (!isCookieAuthEnabled) {
+  // 서버 사이드 인증 체크가 활성화된 경우에만 미들웨어 적용
+  // (RefreshToken은 항상 HTTP-only 쿠키로 관리됨)
+  const isServerSideAuthEnabled = process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true";
+  if (!isServerSideAuthEnabled) {
     return NextResponse.next();
   }
 
+  // HTTP-only 쿠키의 refreshToken 확인
   const refreshToken = request.cookies.get("refreshToken")?.value;
 
   // 정확한 경로 매칭 - startsWith 대신 정확한 경로나 세그먼트 기반 매칭 사용
diff --git a/src/utils/authUtils.ts b/src/utils/authUtils.ts
@@ -61,7 +61,3 @@ export const appleLogin = async () => {
     throw error;
   }
 };
-
-export const isCookieLoginEnabled = (): boolean => {
-  return process.env.NEXT_PUBLIC_COOKIE_LOGIN_ENABLED === "true";
-};
diff --git a/src/utils/axiosInstance.ts b/src/utils/axiosInstance.ts
@@ -1,7 +1,5 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
 
-import { isCookieLoginEnabled } from "@/utils/authUtils";
-
 import postReissueToken from "@/api/auth/server/postReissueToken";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { toast } from "@/lib/zustand/useToastStore";
@@ -69,15 +67,11 @@ axiosInstance.interceptors.request.use(
         if (reissuePromise) {
           await reissuePromise;
         } else {
-          // 새로운 reissue 프로세스 시작
+          // 새로운 reissue 프로세스 시작 (HTTP-only 쿠키의 refreshToken 사용)
           reissuePromise = (async () => {
             setLoading(true);
             try {
-              if (isCookieLoginEnabled()) {
-                await postReissueToken();
-              } else {
-                clearAccessToken();
-              }
+              await postReissueToken();
             } catch {
               clearAccessToken();
             } finally {
diff --git a/src/utils/localStorageUtils.ts b/src/utils/localStorageUtils.ts
@@ -1,12 +1,46 @@
+/**
+ * @deprecated 이 함수들은 더 이상 사용되지 않습니다.
+ * 대신 useAuthStore의 setAccessToken, clearAccessToken을 사용하세요.
+ * Zustand persist가 자동으로 localStorage를 관리합니다.
+ *
+ * @example
+ * // ❌ 사용하지 마세요:
+ * import { saveAccessTokenToLS } from "@/utils/localStorageUtils";
+ * saveAccessTokenToLS(token);
+ *
+ * // ✅ 대신 이렇게 사용하세요:
+ * import useAuthStore from "@/lib/zustand/useAuthStore";
+ * const { setAccessToken } = useAuthStore();
+ * setAccessToken(token);
+ */
+
+/**
+ * @deprecated useAuthStore의 setAccessToken을 사용하세요
+ */
 export const saveAccessTokenToLS = (token: string) => {
+  console.warn(
+    "[DEPRECATED] saveAccessTokenToLS는 더 이상 사용되지 않습니다. useAuthStore의 setAccessToken을 사용하세요.",
+  );
   localStorage.setItem("accessToken", token);
 };
 
+/**
+ * @deprecated useAuthStore의 clearAccessToken을 사용하세요
+ */
 export const removeAccessTokenToLS = () => {
+  console.warn(
+    "[DEPRECATED] removeAccessTokenToLS는 더 이상 사용되지 않습니다. useAuthStore의 clearAccessToken을 사용하세요.",
+  );
   localStorage.removeItem("accessToken");
 };
 
+/**
+ * @deprecated useAuthStore의 accessToken 상태를 직접 읽으세요
+ */
 export const getAccessTokenFromLS = (): string | null => {
+  console.warn(
+    "[DEPRECATED] getAccessTokenFromLS는 더 이상 사용되지 않습니다. useAuthStore의 accessToken 상태를 사용하세요.",
+  );
   if (typeof window === "undefined") return null;
   return localStorage.getItem("accessToken");
 };
