Merge pull request #150 from ITZipProject/main

# 1/11 까지의 작업내용 머지

Author: zyyyun

package-lock.json

@@ -36,14 +36,16 @@
     "framer-motion": "^11.11.11",
     "install": "^0.13.0",
     "iron-session": "^8.0.2",
-    "jotai": "^2.9.0",
+    "jotai": "^2.11.0",
     "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.446.0",
     "next": "^14.2.15",
     "npm": "^10.8.3",
     "prisma": "^5.16.1",
     "react": "^18",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "react-hot-toast": "^2.4.1",
@@ -87,7 +89,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-tailwindcss": "^3.17.4",
-    "msw": "^1.3.4",
+    "msw": "^2.6.8",
     "postcss": "^8",
     "remark-gfm": "^4.0.0",
     "storybook": "^8.1.11",

package.json

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.9'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,26 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
 
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

public/mockServiceWorker.js

@@ -1,21 +1,20 @@
 /* eslint-disable */
 
+import { tokenAtom } from '@/store/useTokenStore';
 import axios, { AxiosError } from 'axios';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
-import { accessTokenAtom } from '@/store/useTokenStore';
-
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 export const useSolvedacLinkStatus = () => {
   const [isSolvedacLinked, setIsSolvedacLinked] = useState<boolean | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const [accessToken] = useAtom(accessTokenAtom);
+  const [token] = useAtom(tokenAtom);
 
   useEffect(() => {
-    if (!accessToken) {
+    if (!token.accessToken) {
       setIsSolvedacLinked(null);
       setLoading(false);
       return;
@@ -27,7 +26,7 @@ export const useSolvedacLinkStatus = () => {
         const response = await axios.get('algorithm/user', {
           baseURL: apiUrl,
           headers: {
-            Authorization: `Bearer ${accessToken}`,
+            Authorization: `Bearer ${token.accessToken}`,
           },
         });
         console.log('response: ', response);
@@ -54,7 +53,7 @@ export const useSolvedacLinkStatus = () => {
     };
 
     checkSolvedacLinkStatus();
-  }, [accessToken]);
+  }, [token.accessToken]);
 
   return { isSolvedacLinked, loading, error };
 };

src/api/algorithm/fetchCheckSolvedAcUser.ts

@@ -1,19 +1,18 @@
 /* eslint-disable */
+import { tokenAtom } from '@/store/useTokenStore';
 import axios, { AxiosError } from 'axios';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 
-import { accessTokenAtom } from '@/store/useTokenStore';
-
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 export const useSolvedacLink = (username: string | null) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
-  const [accessToken] = useAtom(accessTokenAtom);
+  const [token] = useAtom(tokenAtom);
 
   const linkSolvedAcUser = async () => {
-    if (!username || !accessToken) {
+    if (!username || !token.accessToken) {
       setError('아이디를 입력하거나 로그인 상태를 확인해주세요.');
       return;
     }
@@ -26,7 +25,7 @@ export const useSolvedacLink = (username: string | null) => {
         {
           baseURL: apiUrl,
           headers: {
-            Authorization: `Bearer ${accessToken}`,
+            Authorization: `Bearer ${token.accessToken}`,
           },
           params: { username }, // 쿼리 파라미터로 username 전달
         },

src/api/algorithm/fetchLinkSolvedAcUser.ts

@@ -1,62 +1,130 @@
+import { LoginResponse } from '@/types/auth';
+
 import instance from '../axiosInstance';
 
+// 중첩된 data 구조를 반영하는 API 응답 타입
+interface ApiResponse<T> {
+  data: {
+    data: T;
+    message?: string;
+    status?: number;
+    accessToken?: string;
+    refreshToken?: string;
+  };
+}
+
+// 이메일 중복 체크 (인증 없이 요청)
 export const checkEmail = async (email: string) => {
-  const result = await instance.get('/user/checkDuplicateEmail', {
-    params: {
-      email,
-    },
-    headers: {
-      'No-Auth': true,
-    },
-  });
-  return result;
+  try {
+    const res = await instance.get<ApiResponse<boolean>>('/user/checkDuplicateEmail', {
+      params: { email },
+      headers: { noAuth: true },
+    });
+    return {
+      success: true,
+      data: res.data.data,
+    };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : '이메일 중복 체크 오류',
+    };
+  }
 };
 
+// 인증 코드 전송 (인증 없이 요청)
 export const sendCode = async (email: string) => {
-  const result = await instance.post(
-    '/user/authEmail',
-    { email },
-    {
-      headers: {
-        'No-Auth': true,
+  try {
+    const res = await instance.post<ApiResponse<{ message: string }>>(
+      '/user/authEmail',
+      { email },
+      {
+        headers: { noAuth: true },
       },
-    },
-  );
-  return result;
+    );
+    return {
+      success: true,
+      data: res.data.data,
+    };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : '인증 코드 전송 오류',
+    };
+  }
 };
 
+// 인증 코드 확인 (인증 없이 요청)
 export const checkCode = async (email: string, authCode: string) => {
-  const result = await instance.get('/user/authEmail', {
-    params: {
-      email,
-      authCode,
-    },
-    headers: {
-      'No-Auth': true,
-    },
-  });
-  return result;
+  try {
+    const res = await instance.get<ApiResponse<boolean>>('/user/authEmail', {
+      params: { email, authCode },
+      headers: { noAuth: true },
+    });
+    console.log('checkCode___', res);
+    return {
+      success: true,
+      data: res.data.data,
+    };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : '인증 코드 확인 오류',
+    };
+  }
 };
 
-export const createAccount = async (
+// 계정 생성 (인증 없이 요청)
+export const joinAction = async (
   email: string,
   password: string,
   password_check: string,
   auth_code: string,
 ) => {
-  const result = await instance.post(
-    '/user/join',
-    {
-      email,
-      password,
-      password_check,
-      auth_code,
-    },
-    {
-      headers: {
-        'No-Auth': true,
+  try {
+    const res = await instance.post<ApiResponse<boolean>>(
+      '/user/join',
+      { email, password, passwordCheck: password_check, authCode: auth_code },
+      {
+        headers: { noAuth: true },
+      },
+    );
+    return {
+      success: true,
+      data: res.data.data,
+    };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : '계정 생성 오류',
+    };
+  }
+};
+
+// 로그인 요청 (인증 없이 요청)
+export const loginAction = async (email: string, password: string) => {
+  try {
+    const res = await instance.post<ApiResponse<LoginResponse>>(
+      '/user/login',
+      { email, password },
+      { headers: { noAuth: true } },
+    );
+    if (!res.data.data.accessToken || !res.data.data.refreshToken) {
+      throw new Error('토큰이 없습니다');
+    }
+
+    return {
+      success: true,
+      data: {
+        accessToken: res.data.data.accessToken,
+        refreshToken: res.data.data.refreshToken,
       },
-    },
-  );
-  return result;
+      status: res.status,
+    };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : '로그인 오류',
+    };
+  }
 };