[fix & refactor] : 백엔드 API 연동 과정에서 변수 수정 & 버그 수정

Dockerfile

@@ -1,8 +1,7 @@
 # node 16 이미지를 기반으로 함
 FROM krmp-d2hub-idock.9rum.cc/goorm/node:16
 
-ENV REACT_APP_REST_API_KEY=bd3e8c1b259f545078e29a64ccbb3828
-ENV REACT_APP_BASE_URL=https://ka8d1b2b62898a.user-app.krampoline.com
+ENV REACT_APP_API_URL=api
 
 # 작업 디렉토리 설정
 WORKDIR /usr/src/app

src/components/molecules/BankForm.jsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
-import { useMutation } from '@tanstack/react-query';
 import Button from '@components/atoms/button/Button';
+import axios from 'axios';
 import banks from '@/constant/bank';
 import routes from '@/constant/routes';
-import registerBank from '@/apis/register';
 import { bankInvalidMessage, unknownErrorMessage, loginSuccessMessage } from '@/utils/alert';
 
 const BankForm = () => {
@@ -15,19 +14,6 @@ const BankForm = () => {
 
   const navigate = useNavigate();
 
-  const { mutate } = useMutation({
-    mutationFn: registerBank,
-    onSuccess: (response) => {
-      localStorage.setItem('userAuth', response.data.response.userAuth);
-      Swal.fire(loginSuccessMessage);
-      navigate(routes.home); // 회원가입 이후 로그인을 할 수 있도록 로그인 페이지로 이동시킴
-    },
-    onError: () => {
-      Swal.fire(unknownErrorMessage);
-      navigate(routes.error);
-    },
-  });
-
   // 계좌 은행을 선택할 때 호출될 함수
   const handleBankChange = (e) => {
     setAccountBank(e.target.value);
@@ -42,10 +28,24 @@ const BankForm = () => {
   const handleSubmit = () => {
     if (formValid) {
       // 입력 정보 post 처리 이후 홈 페이지 이동(회원가입 완료)
-      mutate({
-        bankName: accountBank,
-        accountNum: accountNumber,
-      });
+      axios
+        .post('/api/signup', {
+          bankName: accountBank,
+          accountNum: accountNumber,
+        })
+        .then((response) => {
+          console.log('response 값 : ', response);
+          // 성공적으로 회원가입 처리가 되면 로컬 스토리지에 인증정보를 저장하고 홈으로 이동
+          localStorage.setItem('userAuth', 'USER');
+          Swal.fire(loginSuccessMessage);
+          navigate(routes.home);
+        })
+        .catch((error) => {
+          // 에러가 발생하면 알림을 띄우고 에러 페이지로 이동
+          console.log(error);
+          Swal.fire(unknownErrorMessage);
+          navigate(routes.error);
+        });
     } else {
       Swal.fire(bankInvalidMessage);
     }

src/index.js

@@ -5,26 +5,32 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-async function deferRender() {
-  if (process.env.NODE_ENV !== 'development') {
-    return;
-  }
+// async function deferRender() {
+//   if (process.env.NODE_ENV !== 'development') {
+//     return;
+//   }
 
-  const { worker } = await import('./mocks/browser');
+//   const { worker } = await import('./mocks/browser');
 
-  return worker.start();
-}
+//   return worker.start();
+// }
 
 const queryClient = new QueryClient();
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
-deferRender().then(() => {
-  root.render(
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>,
-  );
-});
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>,
+);
+
+// deferRender().then(() => {
+//   root.render(
+//     <QueryClientProvider client={queryClient}>
+//       <App />
+//     </QueryClientProvider>,
+//   );
+// });
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/pages/ArticleDetailPage.jsx

@@ -9,45 +9,25 @@ import { useQuery } from '@tanstack/react-query';
 import { getArticleDetail } from '@/apis/articleDetail.js';
 
 const ArticleDetailPage = () => {
-  // 샘플데이터
-  const sample = {
-    boardId: 1,
-    shopName: '스타벅스 전대후문점',
-    destination: '공과대학 7호관',
-    beverage: [
-      {
-        name: '아이스 아메리카노 1잔',
-      },
-      {
-        name: '핫 아메리카노 1잔',
-      },
-    ],
-    tip: 3000,
-    request: '1층 도착하시면 연락주세요!',
-    finishedAt: 15468965196,
-    pickerBank: '농협',
-    pickerAccount: '00000000000000',
-    arriveTime: '14시 20분 도착예정',
-    pickerPhoneNumber: '010-1234-1234',
-    isMatch: false,
-    same: false,
-  };
+  const { id } = useParams();
+  const { data } = useQuery([`article/${id}`], () => getArticleDetail(id));
+  const article = data?.data.response;
 
-  // const { id } = useParams();
-  // const { data } = useQuery([`article/${id}`], () => getArticleDetail(id));
-  // const article = data?.data.response;
-  const article = sample;
+  // useQuery data 디버깅용
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
 
   /* eslint no-else-return: "error" */
   const showDetailPage = (article) => {
     // 작성자이고 매칭됐을 때
-    if (article.same && article.isMatch) {
+    if (article.isRequester && article.isMatch) {
       return <WriterMatch response={article} />;
       // 작성자이고 매칭 안됐을 때
-    } else if (article.same && !article.isMatch) {
+    } else if (article.isRequester && !article.isMatch) {
       return <WriterNoMatch response={article} />;
       // 피커이고 매칭 됐을 때
-    } else if (!article.same && article.isMatch) {
+    } else if (!article.isRequester && article.isMatch) {
       return <PickerMatch response={article} />;
     }
     // 피커이고 매칭 안됐을 때

src/pages/KakaoOuathPage.jsx

@@ -1,39 +1,44 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
-import { useQuery } from '@tanstack/react-query';
 import Loader from '@components/atoms/Loader';
+import axios from 'axios';
 import routes from '@/constant/routes';
-import { loginSuccessMessage } from '@/utils/alert';
-import getLoginInfo from '@/apis/login';
+import { loginSuccessMessage, unknownErrorMessage } from '@/utils/alert';
 
 // 리다이렉팅 처리 화면
 const KakaoOuathPage = () => {
   const navigate = useNavigate();
-  const { data } = useQuery(['getLoginInfo'], getLoginInfo);
-  // 로그인 완료시 로그인 성공 메시지를 띄우고 유저 정보를 받아옴(토큰 등)
-  // 그리고 로그인 완료 처리를 하고, 액세스 토큰을 계속 담아 보냄
-  // 로그인 완료되면 홈 페이지로 이동시킴
 
   // 회원가입 유무에 따라 2가지로 분기됨
   // 회원가입 O - 토큰을 저장하고 바로 로그인 처리하고 홈페이지 이동
   // 회원가입 X - 토큰을 저장하고 계좌정보 입력 페이지 이동 - 계좌정보를 입력하고 나면 바로 로그인 처리하고 홈페이지 이동
   useEffect(() => {
-    if (data) {
-      const status = data.data.success;
-      if (status) {
-        const userInfo = data.data.response;
-        const { userAuth, AccessToken } = userInfo;
-        localStorage.setItem('accessToken', AccessToken);
-        localStorage.setItem('userAuth', userAuth);
-        if (localStorage.getItem('userAuth') === 'GUEST') {
-          navigate(routes.registerBank);
-        } else {
-          Swal.fire(loginSuccessMessage).then(routes.home);
+    axios
+      .get('/api/login/callback')
+      .then((response) => {
+        console.log('response 값 : ', response);
+        const { status } = response;
+        if (status === 200) {
+          const userInfo = response.data.response;
+          const { userAuth, AccessToken } = userInfo;
+          localStorage.setItem('accessToken', AccessToken);
+          localStorage.setItem('userAuth', userAuth);
+          if (userAuth === 'GUEST') {
+            navigate(routes.registerBank); // GUEST인 경우 은행 등록 페이지로 이동
+          } else {
+            Swal.fire(loginSuccessMessage).then(() => {
+              navigate(routes.home); // 로그인 성공 메시지 후 홈으로 이동
+            });
+          }
         }
-      }
-    }
-  }, [data]);
+      })
+      .catch((error) => {
+        // 요청 중 오류가 발생한 경우 처리
+        console.error('Login Callback Error:', error);
+        Swal.fire(unknownErrorMessage).then(routes.error);
+      });
+  }, []);
 
   return (
     <div className="page--layout">

src/pages/mypage/MyPagePickupArticleDetailPage.jsx

@@ -1,39 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PickerMatchTemplate from '@components/templates/articleDetail/PickerMatchTemplate';
-// import { getMyPagePickupArticleDetail } from '@/apis/ArticleDetail';
-// import { useQuery } from '@tanstack/react-query';
-// import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getMyPagePickupArticleDetail } from '@/apis/ArticleDetail';
 
 const MyPagePickupArticleDetailPage = () => {
-  const data = {
-    success: true,
-    response: {
-      shopName: '스타벅스 전대후문점',
-      destination: '공과대학 7호관',
-      beverage: [
-        {
-          name: '아이스 아메리카노 1잔',
-        },
-        {
-          name: '핫 아메리카노 1잔',
-        },
-      ],
-      tip: 3000,
-      request: '1층 도착하시면 연락주세요!',
-      finishedAt: 15468965196,
-    },
-    error: null,
-  };
-
   // useParams + useQuery로 데이터를 받아와서
   // data를 data?.response로 받아서 PickerMatchTemplate으로 보내주면 됨
-  // const { id } = useParams();
-  // const { data } = useQuery(['getMyPagePickupArticleDetail'], () => getMyPagePickupArticleDetail(id));
-  // const article = data?.response;
+  const { id } = useParams();
+  const { data } = useQuery(['getMyPagePickupArticleDetail'], () => getMyPagePickupArticleDetail(id));
+  const articles = data?.response?.content;
+
+  // useQuery data 디버깅용
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
 
   return (
     <div className="page--layout">
-      <PickerMatchTemplate response={data?.response} />
+      <PickerMatchTemplate response={articles} />
     </div>
   );
 };

src/pages/mypage/MyPagePickupArticleListPage.jsx

@@ -1,90 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import OtherNav from '@components/atoms/nav/OtherNav';
 import MyPagePickupArticleCards from '@components/molecules/MyPagePickupArticleCards';
-// import { useQuery } from '@tanstack/react-query';
-// import { getPickupArticles } from '@/apis/article';
+import { useQuery } from '@tanstack/react-query';
+import { getPickupArticles } from '@/apis/article';
 
 const PickupArticlePage = () => {
   // 픽업한 공고글 목록 조회(마이페이지) 요청
   // 데이터를 받아와서 공고글 목록을 articles 변수에 담고
   // MyPagePickupArticleCards로 articles를 props로 넘겨주면 끝
-  // const { data } = useQuery(['getPickerArticles'], () => getPickerArticles());
-  // const articles = data?.response?.content;
+  const { data } = useQuery(['getPickupArticles'], () => getPickupArticles());
+  const articles = data?.response?.content;
 
-  const articles = [
-    {
-      boardId: 9,
-      shopName: '전남대 후문 더벤티',
-      destination: '공과대학 7호관',
-      finishedAt: 1696992289,
-      tip: 1500,
-      isMatch: true,
-    },
-    {
-      boardId: 8,
-      shopName: '전남대 후문 스타벅스',
-      destination: '공과대학 7호관',
-      finishedAt: 1696992289,
-      tip: 1500,
-      isMatch: true,
-    },
-    {
-      boardId: 7,
-      shopName: '전남대 후문 더벤티',
-      destination: '공과대학 6호관',
-      finishedAt: 1696040640,
-      tip: 1000,
-      isMatch: true,
-    },
-    {
-      boardId: 6,
-      shopName: '전남대 후문 이디야',
-      destination: '공과대학 7호관',
-      finishedAt: 1696040640,
-      tip: 1500,
-      isMatch: true,
-    },
-    {
-      boardId: 5,
-      shopName: '전남대 후문 공차',
-      destination: '공과대학 7호관',
-      finishedAt: 1696992289,
-      tip: 1000,
-      isMatch: true,
-    },
-    {
-      boardId: 4,
-      shopName: '전남대 후문 스타벅스',
-      destination: '공과대학 7호관',
-      finishedAt: 1696040640,
-      tip: 1000,
-      isMatch: true,
-    },
-    {
-      boardId: 3,
-      shopName: '전남대 후문 스타벅스',
-      destination: '공과대학 7호관',
-      finishedAt: 1696040640,
-      tip: 1000,
-      isMatch: true,
-    },
-    {
-      boardId: 2,
-      shopName: '전남대 후문 이디야',
-      destination: '공과대학 7호관',
-      finishedAt: 1696040640,
-      tip: 1000,
-      isMatch: true,
-    },
-    {
-      boardId: 1,
-      shopName: '전남대 후문 공차',
-      destination: '공과대학 7호관',
-      finishedAt: 1696040640,
-      tip: 1000,
-      isMatch: true,
-    },
-  ];
+  // useQuery data 디버깅용
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
 
   return (
     <div className="page--layout">