prgrms-web-devcourse-final-project · eunjju2 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
diff --git a/.env.default b/.env.default
@@ -0,0 +1,4 @@
+VITE_KAKAOMAP_APP_KEY
+VITE_APP_SERVER_URL
+VITE_APP_TOSS_CLIENT_KEY
+VITE_APP_TOSS_SECRET_KEY
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -36,10 +36,16 @@ module.exports = {
         namedComponents: 'arrow-function',
       },
     ], // 화살표 함수 이용
-
+    'react/require-default-props': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
-
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        some: ['nesting', 'id'],
+      },
+    ],
+    'no-param-reassign': 'off',
     '@typescript-eslint/naming-convention': [
       'error',
       // 인터페이스 이름은 PascalCase를 사용하되, 'I'로 시작하지 않아야 함

diff --git a/index.html b/index.html
@@ -18,13 +18,14 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
     />
     <title>ROOM:IT</title>
-  </head>
-  <body>
-    <div id="root"></div>
     <script
       type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_APP_KEY%"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAOMAP_APP_KEY%&libraries=services"
     ></script>
+    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
     <script
       type="module"
       src="/src/main.tsx"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,18 +11,35 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.60.5",
+    "@tosspayments/tosspayments-sdk": "^2.3.2",
+    "@types/sockjs-client": "^1.5.4",
+    "@types/stompjs": "^2.3.9",
+    "@types/uuid": "^10.0.0",
     "axios": "^1.7.7",
+    "buffer": "^6.0.3",
+    "eventsource": "^2.0.2",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.13.1",
     "react-kakao-maps-sdk": "^1.1.27",
     "react-router-dom": "^6.28.0",
+    "react-spinners": "^0.14.1",
+    "react-textarea-autosize": "^8.5.5",
+    "react-toastify": "^10.0.6",
+    "sockjs-client": "^1.6.1",
+    "uuid": "^11.0.3",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@types/node": "^22.9.0",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",

diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/apis/.gitkeep b/src/apis/.gitkeep
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
@@ -0,0 +1,49 @@
+import {
+  removeAuthToken,
+  removeRole,
+  setAuthToken,
+  setRole,
+} from '@utils/auth';
+import { BusinessSignUpData, LoginData, UserSignUpData } from '@typings/types';
+import { authInstance, defaultInstance } from '.';
+
+// 사용자 회원가입
+export const postUserSignUp = async (user: UserSignUpData): Promise<void> => {
+  await defaultInstance.post('/api/v1/member/signup', user);
+};
+
+// 사용자 로그인
+export const postUserLogin = async (user: LoginData): Promise<void> => {
+  const response = await defaultInstance.post('/login/member', user, {
+    withCredentials: true,
+  });
+  const token = response.headers.authorization;
+  setAuthToken(token);
+  const { role } = response.data;
+  setRole(role);
+};
+
+// 사업자 회원가입
+export const postBusinessSignUp = async (
+  business: BusinessSignUpData,
+): Promise<void> => {
+  await defaultInstance.post('/api/v1/business/signup', business);
+};
+
+// 사업자 로그인
+export const postBusinessLogin = async (business: LoginData): Promise<void> => {
+  const response = await defaultInstance.post('/login/business', business, {
+    withCredentials: true,
+  });
+  const token = response.headers.authorization;
+  setAuthToken(token);
+  const { role } = response.data;
+  setRole(role);
+};
+
+// 로그아웃
+export const postLogOut = async (): Promise<void> => {
+  await authInstance.post('/logout');
+  removeAuthToken();
+  removeRole();
+};
diff --git a/src/apis/business.ts b/src/apis/business.ts
@@ -0,0 +1,26 @@
+import { Business, BusinessAlarm } from '@typings/types';
+import { authInstance } from '.';
+
+// 사업자 정보 조회
+export const getBusinessData = async (): Promise<Business> => {
+  const response = await authInstance.get('/api/v1/business');
+  return response.data;
+};
+
+// 사업자 알림
+export const getBusinessAlarm = async (): Promise<BusinessAlarm> => {
+  const response = await authInstance.get('/api/v1/notification/business');
+  return response.data;
+};
+
+// 사업자 정보 수정
+export const putEditBusinessInformation = async (
+  data: Business,
+): Promise<void> => {
+  await authInstance.put('/api/v1/business', data);
+};
+
+// 사업자 탈퇴
+export const deleteBusiness = async (): Promise<void> => {
+  await authInstance.delete('/api/v1/business');
+};
diff --git a/src/apis/chat.ts b/src/apis/chat.ts
@@ -0,0 +1,24 @@
+import { ChatListResponse, ChatMessageResponse } from '@typings/types';
+import { authInstance } from '.';
+
+// 메시지 기록 조회
+export const getMessage = async (
+  roomId: number,
+): Promise<ChatMessageResponse[]> => {
+  const response = await authInstance.get(`/api/v1/chat/room/${roomId}`);
+  return response.data;
+};
+
+// 채팅방 목록 조회
+export const getChatList = async (): Promise<ChatListResponse[]> => {
+  const response = await authInstance.get('/api/v1/chat/room');
+  return response.data;
+};
+
+// 채팅방 생성 요청
+export const postCreateChatRoom = async (
+  workplaceId: number,
+): Promise<number> => {
+  const response = await authInstance.post('/api/v1/chat/create', workplaceId);
+  return response.data;
+};
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -0,0 +1,124 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import { BASE_URL } from '@constants/constants';
+import {
+  getAuthToken,
+  removeAuthToken,
+  removeRole,
+  setAuthToken,
+} from '@utils/auth';
+import useAuthStore from '@store/authStore';
+import { toast } from 'react-toastify';
+
+// Default Instance
+const defaultInstance: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 2000,
+  headers: {
+    accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+});
+
+// Auth Instance
+const authInstance: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 2000,
+  headers: {
+    accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+// response interceptor (토큰 갱신)
+authInstance.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError) => {
+    // token 갱신하기
+    if (error.response && error.response.status === 401) {
+      try {
+        const response = await authInstance.post('/reissue');
+
+        if (response.status === 202) {
+          const token = response.headers.authorization;
+          setAuthToken(token);
+
+          const originalRequest = error.config as AxiosRequestConfig;
+          if (originalRequest.headers) {
+            originalRequest.headers.Authorization = `Bearer ${token}`;
+          }
+          return await authInstance(originalRequest); // 실패했던 요청 재시도
+        }
+      } catch (refreshError) {
+        // 로그아웃 처리
+        const { storeLogout } = useAuthStore();
+        authInstance.post('/logout');
+        removeAuthToken();
+        removeRole();
+        storeLogout();
+        window.location.replace('/');
+      }
+    }
+    return Promise.reject(error);
+  },
+);
+
+// request interceptor
+authInstance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const accessToken = getAuthToken();
+    if (config.headers && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// response interceptor
+const responseInterceptor = (response: AxiosResponse) => response;
+
+// error handling
+export const onError = (message: string): void => {
+  toast.error(message);
+};
+
+const errorInterceptor = (error: AxiosError) => {
+  if (error.response) {
+    const { message, code } = error.response.data as {
+      code: string;
+      message: string;
+    };
+    if (
+      // 특정 코드(B004, B005, B006)에서는 toast를 띄우지 않음
+      error.response.status === 409 &&
+      ['B004', 'B005', 'B006'].includes(code)
+    ) {
+      return Promise.reject(error);
+    }
+
+    onError(message || '요청 처리 중 오류가 발생했습니다.');
+  }
+
+  if (!error.response) {
+    onError('네트워크 연결을 확인해주세요.');
+  }
+
+  return Promise.reject(error);
+};
+
+defaultInstance.interceptors.response.use(
+  responseInterceptor,
+  errorInterceptor,
+);
+authInstance.interceptors.response.use(responseInterceptor, errorInterceptor);
+
+export { defaultInstance, authInstance };
diff --git a/src/apis/member.ts b/src/apis/member.ts
@@ -0,0 +1,24 @@
+import { Alarm, Member } from '@typings/types';
+import { authInstance } from '.';
+
+// 로그인한 유저 정보 조회
+export const getUserData = async (): Promise<Member> => {
+  const response = await authInstance.get('/api/v1/member');
+  return response.data;
+};
+
+// 유저 알림
+export const getUserAlarm = async (): Promise<Alarm> => {
+  const response = await authInstance.get('/api/v1/notification/member');
+  return response.data;
+};
+
+// 회원 정보 수정
+export const putEditMemberInformation = async (data: Member): Promise<void> => {
+  await authInstance.put('/api/v1/member', data);
+};
+
+// 사용자 탈퇴
+export const deleteMember = async (): Promise<void> => {
+  await authInstance.delete('/api/v1/member');
+};