feat/chaeeun -> weekly9 branch merge (1차)

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.7gf6qi9ralg"
+    "revision": "0.1qemr4h2fp"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.14",
-    "@mui/styled-engine-sc": "^6.0.0-alpha.2",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@mui/material": "5.14.14",
+    "@mui/styled-engine-sc": "6.0.0-alpha.2",
     "@mui/x-date-pickers": "^6.16.3",
     "@phosphor-icons/react": "^2.0.13",
     "@reduxjs/toolkit": "^1.9.6",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^4.35.7",
+    "@types/sockjs-client": "^1.5.3",
+    "@types/stompjs": "^2.3.7",
     "axios": "^1.5.1",
     "dayjs": "^1.11.10",
     "eslint-config-prettier": "^9.0.0",
@@ -26,6 +29,7 @@
     "rc-slider": "^10.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-icons": "^4.11.0",
     "react-intersection-observer": "^9.5.2",
     "react-kakao-maps-sdk": "^1.1.21",
@@ -34,7 +38,8 @@
     "react-router-dom": "^6.16.0",
     "react-select": "^5.7.7",
     "react-window": "^1.8.9",
-    "swiper": "^10.3.1"
+    "sockjs-client": "^1.6.1",
+    "stompjs": "^2.3.3",
     "styled-components": "^6.0.8",
     "swiper": "^10.3.1",
     "vite-plugin-pwa": "^0.16.5"

src/App.tsx

@@ -8,37 +8,38 @@ import ChatList from './pages/ChatList';
 import ChatRoom from './pages/ChatRoom';
 import MatchList from './pages/MatchList';
 import Apply from './pages/Apply';
+import ApplyInquiry from './pages/ApplyInquiry';
 import Payment from './pages/Payment';
 import Review from './pages/Review';
 import Submit from './pages/Submit';
+import ApplySubmit from './pages/ApplySubmit';
 import AuthRoute from './pages/AuthRoute';
 import CurrentWalkingMap from './components/organisms/CurrentWalkingMap';
 import DetailNotification from './pages/DetailNotificationPage';
 import { Map } from './pages/TestPage';
 
 const App = () => {
   return (
-    <Router>
-      <Routes>
-        <Route path="/signin" element={<Login />} />
-        <Route path="/signup" element={<Register />} />
-        <Route path="/onboard" element={<OnBoarding />} />
-        <Route path="/" element={<Main />} />
-        <Route element={<AuthRoute />}>
-          <Route path="/profile" element={<ProfilePage />} />
-          <Route path="/chatlist" element={<ChatList />} />
-          <Route path="/chatroom" element={<ChatRoom />} />
-          <Route path="/walking" element={<CurrentWalkingMap />} />
-          <Route path="/matchlist" element={<MatchList />} />
-          <Route path="/apply" element={<Apply />} />
-          <Route path="/payments" element={<Payment />} />
-          <Route path='/review' element={<Review />} />
-          <Route path="/submit" element={<Submit />} />
-          <Route path="/test" element={<Map />} />
-          <Route path="/notification" element={<DetailNotification />} />
-        </Routes>
-      </Router>
-    </>
+    <Routes>
+      <Route path="/signin" element={<Login />} />
+      <Route path="/signup" element={<Register />} />
+      <Route path="/onboard" element={<OnBoarding />} />
+      <Route path="/" element={<Main />} />
+      <Route element={<AuthRoute />} />
+      <Route path="/profile" element={<ProfilePage />} />
+      <Route path="/chatlist" element={<ChatList />} />
+      <Route path="/chatroom" element={<ChatRoom />} />
+      <Route path="/walking" element={<CurrentWalkingMap />} />
+      <Route path="/matchlist" element={<MatchList />} />
+      <Route path="/apply" element={<Apply />} />
+      <Route path="/applyinquiry" element={<ApplyInquiry />} />
+      <Route path="/payments" element={<Payment />} />
+      <Route path="/review" element={<Review />} />
+      <Route path="/submit" element={<Submit />} />
+      <Route path="/applysubmit" element={<ApplySubmit />} />
+      <Route path="/test" element={<Map />} />
+      <Route path="/notification" element={<DetailNotification />} />
+    </Routes>
   );
 };
 

src/apis/apply.ts

@@ -0,0 +1,26 @@
+import { instance } from './index';
+
+export const PostApply = (
+  memberId: number,
+  notificationId: number,
+  aboutMe: string,
+  certificate: string,
+  experience: string,
+) => {
+  console.log('api 요청');
+  return instance.post(`api/application`, {
+    memberId: memberId,
+    notificationId: notificationId,
+    aboutMe: aboutMe,
+    certificate: certificate,
+    experience: experience,
+  });
+};
+
+export const GetApply = (memberId: number, applicationId: number) => {
+  return instance.get(`api/application/${memberId}`);
+};
+
+export const GetMatch = (notificationId: number) => {
+  return instance.get(`api/notification/${notificationId}/match`);
+};

src/apis/chat.ts

@@ -0,0 +1,22 @@
+import { instance } from './index';
+
+export const GetChatList = (userId: number) => {
+  console.log('api 요청 되고 있니?');
+  return instance.get(`api/chat/list`);
+};
+
+export const PostWalk = (userId: number, matchingId: number) => {
+  console.log('api 요청');
+  return instance.post(`api/walk/${userId}/${matchingId}`, {
+    userId: userId,
+    matchingId: matchingId,
+  });
+};
+
+export const PostChatRoom = (notiMemberId: number, appMemberId: number) => {
+  console.log('api 요청');
+  return instance.post(`api/chatroom/create`, {
+    notiMemberId: notiMemberId,
+    appMemberId: appMemberId,
+  });
+};

src/apis/index.ts

@@ -22,7 +22,7 @@ import { getCookie } from '../utils/cookie';
 // };
 
 export const instance = axios.create({
-  baseURL: process.env.VITE_APP_BASE_URL,
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
   timeout: 1000,
   headers: {
     'Content-Type': 'application/json',
@@ -32,8 +32,8 @@ export const instance = axios.create({
 instance.interceptors.request.use((config) => {
   const token = getCookie('user');
   if (token) {
-    const parsedToken = JSON.parse(token).value;
-    config.headers['Authorization'] = `${parsedToken}`;
+    // const parsedToken = JSON.parse(token).value;
+    config.headers['Authorization'] = `${token}`;
   }
   return config;
 });

src/apis/notification.ts

@@ -18,45 +18,26 @@ type FiltersProps = {
  * @returns notification list data
  */
 export const fetchNotifications = (
-  search: string,
+  debouncedSearch: string,
   filters: FiltersProps,
-  pageParam?: number,
+  pageParam: number = 0,
+  lat: number,
+  lng: number,
 ) => {
   // 필터 처리된 데이터를 불러온다.
-  const filterUrlTerm = filters.size
-    .map((size, idx) => {
-      if (idx === filters.size.length - 1) {
-        return `size=${size}`;
-      } else {
-        return `size=${size}&`;
-      }
-    })
-    .concat(
-      filters.breed.map((breed, idx) => {
-        if (idx === filters.breed.length - 1) {
-          return `breed=${breed}`;
-        } else {
-          return `breed=${breed}&`;
-        }
-      }),
-    );
+  const big = filters.size.join(',');
+  const breed = filters.breed.join(',');
 
-  if (search) {
-    filterUrlTerm.push(`&word=${search}`);
-
-    return instance.get(`/search?${filterUrlTerm}`, {
-      params: {
-        nextCursorRequest: pageParam,
-        word: search,
-      },
-    });
-  } else {
-    return instance.get(`/home?${filterUrlTerm}`, {
-      params: {
-        nextCursorRequest: pageParam,
-      },
-    });
-  }
+  return instance.get('api/home', {
+    params: {
+      key: pageParam || null,
+      big: big || null,
+      breed: breed || null,
+      search: debouncedSearch || null,
+      latitude: lat,
+      longitude: lng,
+    },
+  });
 };
 
 /**

src/apis/payment.ts

@@ -1,11 +1,9 @@
 import { instance } from './index';
 
-const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
-
 export const getPayment = (matchingId: number) => {
-  return instance.get(`${BASE_URL}/api/payment`, {
-    params: {
-      matchingId: matchingId,
-    },
-  });
+  return instance.get(`api/payment/${matchingId}`);
+};
+
+export const postPayment = (notificationId: number, walkId: any) => {
+  return instance.post(`api/payment/${notificationId}/${walkId}`);
 };

src/apis/review.ts

@@ -14,8 +14,6 @@ type ReviewProps = {
   dogBowl: number;
 };
 
-const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
-
 export const PostReview = (info: ReviewProps) => {
-  return instance.post(`${BASE_URL}api/review`, info);
+  return instance.post(`api/review`, info);
 };

src/apis/user.ts

@@ -1,14 +1,12 @@
 import { instance } from './index';
 
-const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
-
 export const register = (data: {
   email: string;
   password: string;
   nickname: string;
 }) => {
   const { email, password, nickname } = data;
-  return instance.post(`${BASE_URL}/api/member/signup`, {
+  return instance.post('api/member/signup', {
     email: email,
     password: password,
     nickname: nickname,
@@ -17,7 +15,7 @@ export const register = (data: {
 
 export const login = (data: { email: string; password: string }) => {
   const { email, password } = data;
-  return instance.post(`${BASE_URL}/api/login`, {
+  return instance.post('api/member/login', {
     email: email,
     password: password,
   });

src/components/atoms/PageLoading.tsx

@@ -0,0 +1,13 @@
+import * as S from '../../styles/atoms/PageLoading';
+
+const PageLoading = () => {
+  return (
+    <S.Container>
+      <S.ModalWrapper>
+        <S.Spinner />
+      </S.ModalWrapper>
+    </S.Container>
+  );
+};
+
+export default PageLoading;