merge: [FE] 로그인 쿠키 테스트 환경 구축 & 구글 로그인 기능 추가 (#159)

boostcampwm2023 · Nov 29, 2023 · 2f70922 · 2f70922
2 parents 19c13b1 + 8460c1e
commit 2f70922
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 17 deletions.
diff --git a/frontEnd/.eslintrc.cjs b/frontEnd/.eslintrc.cjs
@@ -31,4 +31,5 @@ module.exports = {
     'react/no-danger': 'off',
     'react/require-default-props': 'off',
   },
+  ignorePatterns: ['vite.config.ts'],
 };
diff --git a/frontEnd/src/apis/AuthRequest.ts b/frontEnd/src/apis/AuthRequest.ts
@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { VITE_API_URL } from '@/constants/env';
+import { MODE, VITE_API_URL } from '@/constants/env';
 
 const AuthRequest = axios.create({
-  baseURL: VITE_API_URL,
+  baseURL: MODE === 'development' ? '/' : VITE_API_URL,
   withCredentials: true,
 });
 

diff --git a/frontEnd/src/apis/Request.ts b/frontEnd/src/apis/Request.ts
@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { VITE_API_URL } from '@/constants/env';
+import { MODE, VITE_API_URL } from '@/constants/env';
 
 const Request = axios.create({
-  baseURL: VITE_API_URL,
+  baseURL: MODE === 'development' ? '/' : VITE_API_URL,
 });
 
 export default Request;
diff --git a/frontEnd/src/apis/getDevCookie.ts b/frontEnd/src/apis/getDevCookie.ts
@@ -0,0 +1,8 @@
+import Request from './Request';
+
+export default async function getDevCookie() {
+  const { headers } = await Request.get('/auth/dev');
+  const auth = headers.authorization;
+  const accessToken = auth.split('Bearer')[1];
+  return accessToken;
+}
diff --git a/frontEnd/src/components/room/modal/LoginModal.tsx b/frontEnd/src/components/room/modal/LoginModal.tsx
@@ -1,8 +1,39 @@
+import { ReactNode } from 'react';
+import { MODE } from '@/constants/env';
+import getDevCookie from '@/apis/getDevCookie';
+
+type LoginButtonWrapperProps = {
+  handleClick: () => void;
+  className: string;
+  type: 'github' | 'google';
+  children: ReactNode;
+};
+
+function LoginButtonWrapper({ handleClick, className, type, children }: LoginButtonWrapperProps) {
+  const nextPath = window.location.pathname.split('/')[1];
+
+  if (MODE === 'development')
+    return (
+      <button type="button" onClick={handleClick} className={className}>
+        {children}
+      </button>
+    );
+
+  return (
+    <a href={`https://api.algoitni.site/auth/${type}?next=${nextPath};`} onClick={handleClick} className={className}>
+      {children}
+    </a>
+  );
+}
+
 export default function LoginModal({ code }: { code: string }) {
-  const handleClick = () => {
+  const handleClick = async () => {
+    if (MODE === 'development') {
+      const token = await getDevCookie();
+      document.cookie = `access_token=${token};`;
+    }
     localStorage.setItem('code', code);
   };
-  const nextPath = window.location.pathname.split('/')[1];
 
   return (
     <div className="flex items-center justify-center gap-8 min-w-[600px]">
@@ -13,18 +44,14 @@ export default function LoginModal({ code }: { code: string }) {
         <h1 className="text-2xl font-bold">소셜로그인</h1>
         <div className="flex flex-col gap-4">
           <div className="flex flex-col justify-between h-full gap-4">
-            <a
-              href={`https://api.algoitni.site/auth/github?next=${nextPath}`}
-              onClick={handleClick}
-              className="flex items-center p-4 text-white bg-black rounded-full"
-            >
+            <LoginButtonWrapper type="github" handleClick={handleClick} className="flex items-center p-4 text-white bg-black rounded-full">
               <img src="/github.png" className="w-8 h-8" alt="github" />
               <span className="text-xl font-bold px-11 basis-[90%]">Github Login</span>
-            </a>
-            <a href="https://algoitni.site" className="flex items-center p-4 border-2 rounded-full">
+            </LoginButtonWrapper>
+            <LoginButtonWrapper type="google" handleClick={handleClick} className="flex items-center p-4 border-2 rounded-full">
               <img src="/google.png" className="w-8 h-8" alt="google" />
               <span className="text-xl font-bold px-11 basis-[90%]">Google Login</span>
-            </a>
+            </LoginButtonWrapper>
           </div>
         </div>
       </div>

diff --git a/frontEnd/src/components/room/modal/tests/SaveModal.test.tsx b/frontEnd/src/components/room/modal/tests/SaveModal.test.tsx
@@ -6,6 +6,16 @@ import reactQueryClient from '@/configs/reactQueryClient';
 
 const hide = jest.fn();
 jest.mock('@/apis/postUserCode', () => {});
+jest.mock('@/constants/env', () => ({
+  VITE_SOCKET_URL: '',
+  VITE_STUN_URL: '',
+  VITE_TURN_URL: '',
+  VITE_TURN_USERNAME: '',
+  VITE_TURN_CREDENTIAL: '',
+  VITE_API_URL: '',
+  VITE_CHAT_URL: '',
+  MODE: '',
+}));
 
 describe('SaveModal기능테스트', () => {
   it('값이 없을때는 저장 버튼을 눌러도 제출하지 않는다.', () => {

diff --git a/frontEnd/src/constants/env.ts b/frontEnd/src/constants/env.ts
@@ -1,4 +1,4 @@
-const { VITE_SOCKET_URL, VITE_STUN_URL, VITE_TURN_URL, VITE_TURN_USERNAME, VITE_TURN_CREDENTIAL, VITE_API_URL, VITE_CHAT_URL } = import.meta
-  .env;
+const { VITE_SOCKET_URL, VITE_STUN_URL, VITE_TURN_URL, VITE_TURN_USERNAME, VITE_TURN_CREDENTIAL, VITE_API_URL, VITE_CHAT_URL, MODE } =
+  import.meta.env;
 
-export { VITE_SOCKET_URL, VITE_STUN_URL, VITE_TURN_URL, VITE_TURN_USERNAME, VITE_TURN_CREDENTIAL, VITE_API_URL, VITE_CHAT_URL };
+export { VITE_SOCKET_URL, VITE_STUN_URL, VITE_TURN_URL, VITE_TURN_USERNAME, VITE_TURN_CREDENTIAL, VITE_API_URL, VITE_CHAT_URL, MODE };
diff --git a/frontEnd/src/pages/tests/Room.test.tsx b/frontEnd/src/pages/tests/Room.test.tsx
@@ -25,6 +25,9 @@ jest.mock('@/constants/env', () => ({
   VITE_TURN_URL: '',
   VITE_TURN_USERNAME: '',
   VITE_TURN_CREDENTIAL: '',
+  VITE_API_URL: '',
+  VITE_CHAT_URL: '',
+  MODE: '',
 }));
 
 describe('Room 조건부 렌더링 테스트', () => {

diff --git a/frontEnd/vite.config.ts b/frontEnd/vite.config.ts
@@ -5,6 +5,14 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/codes': {
+        target: 'https://api.algoitni.site',
+        changeOrigin: true,
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),