[FE][Feat] #197 : 로그인 api 연동

- 로그인 dto 추가
- 로그인 api 연동

frontend/src/api/auth.api.ts

@@ -0,0 +1,27 @@
+import { getApiClient } from '@/api/client.api.ts';
+import { ResponseDto } from '@/api/dto/response.dto.ts';
+import { LoginResEntity } from '@/api/dto/auth.dto.ts';
+
+export const doLogin = (id: string, password: string): Promise<ResponseDto<LoginResEntity>> => {
+  const promiseFn = (
+    fnResolve: (value: ResponseDto<LoginResEntity>) => void,
+    fnReject: (reason?: any) => void,
+  ) => {
+    const apiClient = getApiClient();
+    apiClient
+      .post('/auth/login', { id, password })
+      .then(res => {
+        if (!res.data.success) {
+          console.error(res);
+          fnReject(`msg.${res.data.resultMsg}`);
+        } else {
+          fnResolve(new ResponseDto<LoginResEntity>(res.data));
+        }
+      })
+      .catch(err => {
+        console.error(err);
+        fnReject('msg.RESULT_FAILED');
+      });
+  };
+  return new Promise(promiseFn);
+};

frontend/src/api/client.api.ts

@@ -0,0 +1,31 @@
+import { AppConfig } from '@/constants';
+import { loadLocalData } from '@/utils/common/manageLocalData.ts';
+import axios from 'axios';
+
+let apiClient = axios.create({
+  baseURL: AppConfig.API_SERVER,
+  headers: {
+    'Content-type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Credentials': true,
+  },
+});
+
+export function setApiToken(token: string): void {
+  if (apiClient) apiClient.defaults.headers.common.Authorization = `Bearer ${token}`;
+}
+
+export const getApiClient = () => {
+  const token = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN);
+  if (token) setApiToken(token);
+  if (!apiClient) {
+    apiClient = axios.create({
+      baseURL: AppConfig.API_SERVER,
+      headers: {
+        'Content-type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  }
+  return apiClient;
+};

frontend/src/api/dto/auth.dto.ts

@@ -0,0 +1,5 @@
+export class LoginResEntity {
+  token: string | undefined;
+
+  userId: string | undefined;
+}

frontend/src/api/dto/response.dto.ts

@@ -0,0 +1,16 @@
+export class ResponseDto<T> {
+  resultCode = 0;
+
+  resultMsg = '';
+
+  data?: T;
+
+  totalCount = 0;
+
+  constructor(data?: any) {
+    if (data.resultCode) this.resultCode = data.resultCode;
+    if (data.resultMsg) this.resultMsg = data.resultMsg;
+    if (data.data) this.data = data.data;
+    if (data.totalCount) this.totalCount = data.totalCount;
+  }
+}

frontend/src/component/authmodal/AuthModal.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { Modal } from '@/component/common/modal/Modal';
+import { doLogin } from '@/api/auth.api.ts';
+import { saveLocalData } from '@/utils/common/manageLocalData.ts';
+import { AppConfig } from '@/constants.ts';
 
 interface IAuthModalProps {
   /** 모달이 열려 있는지 여부를 나타냅니다. */
@@ -43,7 +46,13 @@ export const AuthModal = (props: IAuthModalProps) => {
   };
 
   const handleLoginClick = () => {
-    console.log('로그인 데이터:', loginData);
+    doLogin(loginData.id, loginData.pw).then(el => {
+      if (el.data?.token && el.data?.userId) {
+        saveLocalData(AppConfig.KEYS.LOGIN_TOKEN, el.data.token);
+        saveLocalData(AppConfig.KEYS.LOGIN_USER, el.data.userId);
+      }
+      window.location.reload();
+    });
   };
 
   const handleSignUpClick = () => {
@@ -63,7 +72,7 @@ export const AuthModal = (props: IAuthModalProps) => {
   };
 
   return (
-    <Modal isOpen={props.isOpen} onClose={props.onClose}>
+    <Modal isOpen={props.isOpen}>
       {modalType === 'login' ? (
         <>
           <Modal.Header content="Log In" onClose={props.onClose} />

frontend/src/constants.ts

@@ -0,0 +1,17 @@
+export const KEYS = {
+  LOGIN_USER: 'LUT',
+  LOGIN_TOKEN: 'LUT_TK',
+};
+
+export const AppConfig = {
+  /**
+   * API SERVER
+   */
+  API_SERVER: 'http://223.130.151.43:3001/api',
+  // API_SERVER: 'http://localhost:3001/api',
+
+  /**
+   * ETC
+   */
+  KEYS,
+};

frontend/src/pages/Main.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { getUserLocation } from '@/hooks/getUserLocation';
 import { Map } from '@/component/maps/Map';
 import { BottomSheet } from '@/component/BottomSheet/BottomSheet';

frontend/src/utils/common/manageLocalData.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import lzString from 'lz-string'
+
+export function saveLocalData(key: string, val: string): void {
+  if (typeof window !== 'undefined') {
+    const storage = window.localStorage;
+
+    if (storage) {
+      try {
+        storage.setItem(key, lzString.compressToUTF16(val));
+      } catch (e) {
+        console.error('Storage Full ... clean old data...');
+        for (const k in storage) {
+          if (k.indexOf('DATA_MESSAGE_DETAIL_') > -1) {
+            storage.removeItem(k);
+          }
+        }
+        storage.setItem(key, lzString.compressToUTF16(val));
+      }
+    }
+  }
+}
+
+export function loadLocalData(key: string): string | null {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+
+    if (storage) {
+      const keyValue = storage.getItem(key);
+      if (keyValue) return lzString.decompressFromUTF16(keyValue);
+    }
+  }
+  return null;
+}
+
+export function clearLocalData() {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+
+    if (storage) {
+      storage.clear();
+    }
+  }
+}
+
+export function removeLocalData(key: string): void {
+  if (typeof window !== undefined) {
+    const storage = window.localStorage;
+    if (storage) {
+      storage.removeItem(key);
+    }
+  }
+}