Fix/qa 01 19

.gitignore

@@ -11,6 +11,10 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
+
+# Vercel
+.vercel
 
 # Editor directories and files
 .vscode/*

src/components/Modal/ExperimentDetail/ExperimentDetail.tsx

@@ -41,7 +41,6 @@ const ExperimentDetail = ({ modalData: { experimentId } }: { modalData: Experime
     if (!experimentDetail) return [];
 
     const { buyAt, status, buyScore, buyPrice, currentScore, currentPrice, roi, country } = experimentDetail;
-    console.log(roi);
     const currency = STOCK_COUNTRY_MAP[country].currency;
     return [
       {

src/components/Search/StockChart/StockChart.tsx

@@ -1167,7 +1167,6 @@ const StockChart = ({
   const [chartData, updateChartData] = useStockChartQuery(stockId, selectedPeriod);
 
   const handlePeriodClick = (period: PERIOD_CODE) => (e: React.MouseEvent<HTMLDivElement>) => {
-    console.log(period);
     e.preventDefault();
     e.stopPropagation();
     setSelectedPeriod(period);

src/components/SearchBar/PopularStocks/PopularStocks.tsx

@@ -14,7 +14,6 @@ const PopularStocks = () => {
   const { addRecentStock } = useRecentStocks();
 
   const [popularStocks] = usePopularStockFetchQuery();
-  console.log(popularStocks);
 
   const handlePopularStockClick = (symbolName: string, country: StockCountryKey) => () => {
     addRecentStock(symbolName, country);

src/components/ShortView/Tutorial/Tutorial.tsx

@@ -74,7 +74,6 @@ const ShortViewTutorial = () => {
   const [tutorialWatched, setTutorialWatched] = useLocalStorageState<boolean>('tutorial_watched_shortview');
 
   const handleClickTutorialEnd = () => {
-    console.log('tutorial end');
     setTutorialWatched(true);
   };
 

src/controllers/common/base.ts

@@ -47,10 +47,7 @@ const fetchAuthData = async (path: string, init: RequestInit = {}, isFormData: b
     });
 
     if (res.status === 401) {
-      // console.log('Error 401: 인증 에러 발생. refetch 시도');
-
       const refreshToken = localStorage.getItem('refresh_token');
-      console.log(1, refreshToken);
 
       const reissueRes = await fetch(`${baseURL}/auth/reissue`, {
         method: 'POST',

src/hooks/useAuthInfo.ts

@@ -42,7 +42,6 @@ const useAuthInfo = () => {
   };
 
   const setAuthInfo = (accessToken: string, refreshToken: string, userInfo: UserInfo) => {
-    console.log(2, accessToken);
     setAccessToken(accessToken);
     setRefreshToken(refreshToken);
     setUserInfo(userInfo);

src/hooks/useSocialAuth.ts

@@ -79,9 +79,7 @@ export const useSocialAuth = () => {
   );
 
   const handleOAuthCallback = useCallback(
-    async (code: string, provider: string, state: string) => {
-      console.log('🔵 [웹] handleOAuthCallback 시작:', { code, provider, state });
-
+    async (code: string, provider: string, _state: string) => {
       clearAuthInfo();
       setIsLoading(true);
       setError(null);
@@ -90,10 +88,7 @@ export const useSocialAuth = () => {
         // API는 state로 redirect URI의 base64 인코딩 값을 기대합니다
         const redirectUri = window.location.origin + `/login/oauth2/code/${provider}`;
         const apiState = btoa(redirectUri);
-
-        console.log('🔵 [웹] fetchOAuth2Login 호출 시작', { redirectUri, apiState });
         const res = await fetchOAuth2Login(code, apiState, provider as ProviderKey);
-        console.log('🔵 [웹] fetchOAuth2Login 응답:', res);
 
         if (res.state === 'NEED_REGISTER') {
           // WebView에서는 네이티브에 메시지 전송
@@ -167,12 +162,9 @@ export const useSocialAuth = () => {
   const handleWebViewMessage = useCallback(
     (event: MessageEvent) => {
       try {
-        console.log('🔔 [웹] WebView 메시지 수신:', event.data);
         const { type, data } = JSON.parse(event.data);
-        console.log('🔔 [웹] 파싱된 메시지:', { type, data });
 
         if (type === MESSAGE_TYPES.AUTH_SUCCESS) {
-          console.log('✅ [웹] AUTH_SUCCESS 처리:', data);
           handleOAuthCallback(data.code, data.provider, data.state || '');
         } else if (type === MESSAGE_TYPES.AUTH_ERROR) {
           console.error('OAuth auth error:', data.error);
@@ -234,16 +226,13 @@ export const useSocialAuth = () => {
   // WebView 메시지 리스너 등록
   useEffect(() => {
     if (!isWebView) {
-      console.log('⚠️ [웹] WebView 환경이 아님 - 메시지 리스너 미등록');
       return;
     }
 
-    console.log('✅ [웹] WebView 메시지 리스너 등록');
     window.addEventListener('message', handleWebViewMessage);
     document.addEventListener('message', handleWebViewMessage as EventListener);
 
     return () => {
-      console.log('🗑️ [웹] WebView 메시지 리스너 제거');
       window.removeEventListener('message', handleWebViewMessage);
       document.removeEventListener('message', handleWebViewMessage as EventListener);
     };

src/pages/Favorites/Favorites.tsx

@@ -80,7 +80,6 @@ const Favorites = () => {
   };
 
   const handleNotificationToggle = () => {
-    console.log(currentNotificationItemRef.current);
     if (!currentNotificationItemRef.current) return;
     toggleNotification(currentNotificationItemRef.current);
     closeOffNotificationModal();

src/pages/Register/Register.tsx

@@ -255,8 +255,6 @@ const Register = () => {
       provider.toUpperCase(),
     );
 
-    console.log(profileImage);
-
     if (!res) return;
 
     // sessionStorage 정리

src/pages/ShortView/ShortView.tsx

@@ -57,7 +57,6 @@ const ShortView = () => {
     if (isFetchingNextShortview) return;
     if (shortviewStocks.length === 0) return;
     if (currentIdx >= shortviewStocks.length - 2) {
-      console.log('fetch next');
       fetchNextShortview();
     }
   }, [currentIdx, shortviewStocks, isFetchingNextShortview]);

src/router/index.tsx

@@ -1,24 +1,27 @@
+import { Suspense, lazy } from 'react';
 import { Outlet, ScrollRestoration, createBrowserRouter } from 'react-router-dom';
-import AboutPage from '@pages/About/About';
-import Favorites from '@pages/Favorites/Favorites';
-import Lab from '@pages/Lab/Lab';
-import RecordSheet from '@pages/Lab/RecordSheet/RecordSheet';
-import LabStep from '@pages/Lab/Step/Step';
-import Login from '@pages/Login/Login';
-import Done from '@pages/MyPage/Done/Done';
-import EditProfile from '@pages/MyPage/Edit/Edit';
-import MyPage from '@pages/MyPage/MyPage';
-import NotificationPage from '@pages/Notification/Notification';
-import OAuthCallback from '@pages/OAuthCallback/OAuthCallback';
-import Register from '@pages/Register/Register';
-import ShortView from '@pages/ShortView/ShortView';
-import Term from '@pages/Term/Term';
-import Usage from '@pages/Usage/Usage';
-import Withdraw from '@pages/Withdraw/Withdraw';
-import WithdrawDone from '@pages/WithdrawDone/WithdrawDone';
 import Mainlayout from '../layout/Mainlayout/Mainlayout';
-import Home from '../pages/Home/Home';
-import Search from '../pages/Search/Search';
+
+// Lazy load all pages for code splitting
+const Home = lazy(() => import('../pages/Home/Home'));
+const Search = lazy(() => import('../pages/Search/Search'));
+const AboutPage = lazy(() => import('@pages/About/About'));
+const Favorites = lazy(() => import('@pages/Favorites/Favorites'));
+const Lab = lazy(() => import('@pages/Lab/Lab'));
+const RecordSheet = lazy(() => import('@pages/Lab/RecordSheet/RecordSheet'));
+const LabStep = lazy(() => import('@pages/Lab/Step/Step'));
+const Login = lazy(() => import('@pages/Login/Login'));
+const Done = lazy(() => import('@pages/MyPage/Done/Done'));
+const EditProfile = lazy(() => import('@pages/MyPage/Edit/Edit'));
+const MyPage = lazy(() => import('@pages/MyPage/MyPage'));
+const NotificationPage = lazy(() => import('@pages/Notification/Notification'));
+const OAuthCallback = lazy(() => import('@pages/OAuthCallback/OAuthCallback'));
+const Register = lazy(() => import('@pages/Register/Register'));
+const ShortView = lazy(() => import('@pages/ShortView/ShortView'));
+const Term = lazy(() => import('@pages/Term/Term'));
+const Usage = lazy(() => import('@pages/Usage/Usage'));
+const Withdraw = lazy(() => import('@pages/Withdraw/Withdraw'));
+const WithdrawDone = lazy(() => import('@pages/WithdrawDone/WithdrawDone'));
 
 export type TermKey = 'agreeTerm' | 'agreePrivacy' | 'agreeMarketing';
 
@@ -48,7 +51,9 @@ export const webPath = {
 const Root = () => {
   return (
     <Mainlayout>
-      <Outlet />
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
       <ScrollRestoration />
     </Mainlayout>
   );

src/utils/wasm/WordCloudWasm.ts

@@ -4,7 +4,6 @@ export async function LoadWordCloudWASM(width: number, height: number): Promise<
   // const response = await fetch('/wasm/wordcloud.wasm');
   // const buffer = await response.arrayBuffer();
   // const module = await WebAssembly.compile(buffer);
-  // console.log(WebAssembly.Module.imports(module));
 
   return new Promise((resolve, reject) => {
     Module({
@@ -17,9 +16,6 @@ export async function LoadWordCloudWASM(width: number, height: number): Promise<
       },
     })
       .then(({ exports }) => {
-        // console.log('WASM exports:', exports);
-        // console.log('Available functions:', Object.keys(exports));
-
         // 타입 안전성을 위한 타입 단언
         const wasmExports = exports as any;
 

vercel.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "framework": "vite",
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/(.*\\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp|avif))",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/sw.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/manifest.webmanifest",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "X-XSS-Protection",
+          "value": "1; mode=block"
+        },
+        {
+          "key": "Referrer-Policy",
+          "value": "strict-origin-when-cross-origin"
+        }
+      ]
+    }
+  ]
+}

vite.config.ts

@@ -6,6 +6,9 @@ import svgr from 'vite-plugin-svgr';
 import wasm from 'vite-plugin-wasm';
 
 export default defineConfig({
+  esbuild: {
+    drop: ['console', 'debugger'], // production 빌드 시 console과 debugger 제거
+  },
   plugins: [
     react(),
     svgr(),
@@ -62,6 +65,37 @@ export default defineConfig({
       },
     }),
   ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // React 관련 라이브러리를 별도 청크로 분리
+          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+          // React Query를 별도 청크로 분리
+          'query-vendor': ['react-query'],
+          // UI 라이브러리를 별도 청크로 분리
+          'ui-vendor': ['@emotion/react', '@emotion/styled', 'framer-motion'],
+        },
+        // 파일명 해시 추가로 브라우저 캐싱 최적화
+        entryFileNames: 'assets/[name]-[hash].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+      },
+    },
+    // 500KB 목표로 설정 (Vercel 권장)
+    chunkSizeWarningLimit: 500,
+    // 소스맵 비활성화로 빌드 크기 감소
+    sourcemap: false,
+    // 최소화 옵션
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+        pure_funcs: ['console.log', 'console.info', 'console.debug'],
+      },
+    },
+  },
   resolve: {
     alias: [
       { find: '@ts', replacement: '/src/ts' },