Merge pull request #162 from boostcampwm-2024/fix/login

[FE] 로그인 방식 쿠키로 변경 & production dev mode 분리

FE/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

FE/src/components/Login/index.tsx

@@ -33,6 +33,25 @@ export default function Login() {
     toggleModal();
   };
 
+  const handleKakaoBtnClick = async () => {
+    if (import.meta.env.DEV) {
+      const res = await login(
+        import.meta.env.VITE_TEST_ID,
+        import.meta.env.VITE_TEST_PW,
+      );
+
+      if ('error' in res) {
+        setErrorCode(res.statusCode);
+        return;
+      }
+
+      document.cookie = `accessToken=${res.accessToken}; path=/;`;
+      return;
+    }
+
+    window.location.href = `${import.meta.env.VITE_API_URL}/auth/kakao`;
+  };
+
   return (
     <>
       <Overay onClick={() => toggleModal()} />
@@ -67,11 +86,12 @@ export default function Login() {
             로그인
           </button>
         </form>
-        <button className='flex items-center justify-center gap-2 rounded-3xl bg-yellow-300 px-3.5 py-2 transition hover:bg-yellow-400'>
+        <button
+          className='flex items-center justify-center gap-2 rounded-3xl bg-yellow-300 px-3.5 py-2 transition hover:bg-yellow-400'
+          onClick={handleKakaoBtnClick}
+        >
           <ChatBubbleOvalLeftIcon className='size-5' />
-          <a href={`${import.meta.env.VITE_API_URL}/auth/kakao`}>
-            카카오 계정으로 로그인
-          </a>
+          카카오 계정으로 로그인
         </button>
       </section>
     </>

FE/src/components/StocksDetail/TradeAlertModal.tsx

@@ -1,6 +1,6 @@
 import Overay from 'components/ModalOveray';
 import { buyStock } from 'service/stocks';
-import useAuthStore from 'store/authStore';
+// import useAuthStore from 'store/authStore';
 import useTradeAlertModalStore from 'store/tradeAlertModalStore';
 
 type TradeAlertModalProps = {
@@ -17,17 +17,17 @@ export default function TradeAlertModal({
   count,
 }: TradeAlertModalProps) {
   const { toggleModal } = useTradeAlertModalStore();
-  const { accessToken } = useAuthStore();
+  // const { accessToken } = useAuthStore();
 
-  if (!accessToken) {
-    console.log('accessToken 없음!');
-    return;
-  }
+  // if (!accessToken) {
+  //   console.log('accessToken 없음!');
+  //   return;
+  // }
 
   const charge = 55; // 수수료 임시
 
   const handleBuy = async () => {
-    const res = await buyStock(code, +price, count, accessToken);
+    const res = await buyStock(code, +price, count);
     if (res.ok) toggleModal();
   };
 

FE/src/components/StocksDetail/TradeSection.tsx

@@ -11,7 +11,6 @@ import emptyAnimation from 'assets/emptyAnimation.json';
 import { StockDetailType } from 'types';
 import useTradeAlertModalStore from 'store/tradeAlertModalStore';
 import TradeAlertModal from './TradeAlertModal';
-import useAuthStore from 'store/authStore';
 
 type TradeSectionProps = {
   code: string;
@@ -29,7 +28,6 @@ export default function TradeSection({ code, data }: TradeSectionProps) {
   const [lowerLimitFlag, setLowerLimitFlag] = useState<boolean>(false);
   const [lackAssetFlag, setLackAssetFlag] = useState<boolean>(false);
   const { isOpen, toggleModal } = useTradeAlertModalStore();
-  const { accessToken } = useAuthStore();
 
   const [count, setCount] = useState<number>(0);
 
@@ -63,7 +61,7 @@ export default function TradeSection({ code, data }: TradeSectionProps) {
       setCurrPrice(stck_mxpr);
 
       setUpperLimitFlag(true);
-      timerRef.current = setTimeout(() => {
+      timerRef.current = window.setTimeout(() => {
         setUpperLimitFlag(false);
       }, 2000);
       return;
@@ -76,7 +74,7 @@ export default function TradeSection({ code, data }: TradeSectionProps) {
       setCurrPrice(stck_llam);
 
       setLowerLimitFlag(true);
-      timerRef.current = setTimeout(() => {
+      timerRef.current = window.setTimeout(() => {
         setLowerLimitFlag(false);
       }, 2000);
       return;
@@ -85,16 +83,12 @@ export default function TradeSection({ code, data }: TradeSectionProps) {
 
   const handleBuy = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (!accessToken) {
-      console.log('accessToken 없음!');
-      return;
-    }
 
     const price = +currPrice * count;
 
     if (price > MyAsset) {
       setLackAssetFlag(true);
-      timerRef.current = setTimeout(() => {
+      timerRef.current = window.setTimeout(() => {
         setLackAssetFlag(false);
       }, 2000);
       return;

FE/src/service/stocks.ts

@@ -23,17 +23,16 @@ export async function getStocksChartDataByCode(
   }).then((res) => res.json());
 }
 
-export async function buyStock(
-  code: string,
-  price: number,
-  amount: number,
-  token: string,
-) {
-  return fetch(`${import.meta.env.VITE_API_URL}/stocks/trade/buy`, {
+export async function buyStock(code: string, price: number, amount: number) {
+  const url = import.meta.env.PROD
+    ? `${import.meta.env.VITE_API_URL}/stocks/trade/buy`
+    : '/api/stocks/trade/buy';
+
+  return fetch(url, {
     method: 'POST',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
     body: JSON.stringify({
       stock_code: code,

FE/vite.config.ts

@@ -1,12 +1,23 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
-  server: {
-    host: true,
-    open: true,
-  },
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    plugins: [react(), tsconfigPaths()],
+    server: {
+      host: true,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_SERVER_URL,
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+  };
 });