Merge pull request #76 from Step3-kakao-tech-campus/develop

[9주차] : 개발 사항 Merge(develop → master)

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "@tanstack/react-query": "^4.35.3",
     "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^5.17.0",

src/App.js

@@ -11,7 +11,8 @@ import MyPage from './pages/MyPage';
 import AdminPage from './pages/AdminPage';
 import AdminAuthPage from './pages/AdminAuthPage';
 import ErrorPage from './pages/ErrorPage';
-import ProtectedRoute from './components/templates/ProtectedRoute';
+import ProtectedRoute from './components/layout/ProtectedRoute';
+import UploadStudentCardPage from './pages/UploadStudentCardPage';
 import routes from './constant/routes';
 
 import './global.css';
@@ -26,6 +27,11 @@ function App() {
         <Route path={routes.login} element={<LoginPage />} />
         <Route path={routes.loginKakao} element={<KakaoOuathPage />} />
         <Route path={routes.registerBank} element={<RegisterBankPage />} />
+        <Route path={routes.post} element={<PostListPage />} />
+        <Route path={routes.detailPost} element={<PostDetailPage />} />
+        {/* 아래 각 페이지들에 대해 requiedAuth 추가 필요 */}
+        <Route path={routes.postWriteIntro} element={<PostWriteIntroPage />} />
+        <Route path={routes.postWrite} element={<PostWritePage />} />
         <Route
           path={routes.mypage}
           element={
@@ -34,13 +40,10 @@ function App() {
             </ProtectedRoute>
           }
         />
-        <Route path={routes.post} element={<PostListPage />} />
-        <Route path={routes.detailPost} element={<PostDetailPage />} />
-        <Route path={routes.postWriteIntro} element={<PostWriteIntroPage />} />
-        <Route path={routes.postWrite} element={<PostWritePage />} />
-        <Route path={routes.error} element={<ErrorPage />} />
+        <Route path={routes.uploadStudentCard} element={<UploadStudentCardPage />} />
         <Route path={routes.admin} element={<AdminPage />} />
         <Route path={routes.adminAuth} element={<AdminAuthPage />} />
+        <Route path={routes.error} element={<ErrorPage />} />
       </Routes>
     </BrowserRouter>
   );

src/apis/admin.js

@@ -0,0 +1,13 @@
+import { instance } from './index';
+
+export const adminAuth = () => {
+  return instance.put('/admin/auth/approval');
+};
+
+export const adminAuthDetail = (id = 1) => {
+  return instance.get(`/admin/auth/list/${id}`);
+};
+
+export const adminAuthList = () => {
+  return instance.get('/admin/auth/list');
+};

src/apis/index.js

@@ -34,11 +34,11 @@ instance.interceptors.response.use(
   (error) => {
     // 401 error : 인증되지 않음 - 로그인 화면으로 이동
     // token은 백엔드에서 유효하지 않다면 401(Unauthorized) Http code를 보내주기에, 로그인하도록 처리
-    if (error.response.status === 401) {
+    if (error.error.status === 401) {
       Swal.fire({
         icon: 'error',
         title: '로그인을 진행해주세요!',
-        text: error.response.data.error.message,
+        text: error.error.message,
         confirmButtonText: '확인',
       }).then(() => {
         window.location.href = '/login';
@@ -48,11 +48,11 @@ instance.interceptors.response.use(
 
     // 404 error : 지정한 리소스를 찾을 수 없음
     // 에러 메시지를 띄워주고 & 잘못된 경로로 이동 시 ErrorPage로 이동
-    if (error.response.status === 404) {
+    if (error.error.status === 404) {
       Swal.fire({
         icon: 'error',
         title: '아이쿠! 에러가 발생했네요😅',
-        text: error.response.data.error.message,
+        text: error.error.message,
         confirmButtonText: '확인',
       }).then(() => {
         window.location.href = '/errorPage';
@@ -63,8 +63,8 @@ instance.interceptors.response.use(
     // 401, 404 외의 다른 error에 대한 처리 및 에러 메시지 확인 가능
     Swal.fire({
       icon: 'error',
-      title: '내용을 다시 확인해 주세요!',
-      text: error.response.data.error.message,
+      title: '아래와 같은 에러가 발생했습니다!',
+      text: error.error.message,
       confirmButtonText: '확인',
     });
     // 성공인지 실패인지 여부에 따라 resolve, reject 처리

src/apis/myPage.js

@@ -0,0 +1,29 @@
+import { instance } from './index';
+
+// 마이페이지 조회 (닉네임, 유저등급)
+// eslint-disable-next-line import/prefer-default-export
+export const getMyPage = () => {
+  return instance.get('/mypage');
+};
+
+// presigned URL 가져오기
+// eslint-disable-next-line import/prefer-default-export
+export const getPresignedUrl = () => {
+  return instance.get('/mypage/image/url');
+};
+
+// 유저등급 조회
+// eslint-disable-next-line import/prefer-default-export
+export const getUserAuth = () => {
+  return instance.get('/mypage/auth');
+};
+
+// 회원수정
+
+// 공고글 목록(작성자)
+
+// 공고글 상세확인(작성자)
+
+// 공고글 목록(피커)
+
+// 공고글 상세확인(피커)

src/apis/post.js

@@ -13,3 +13,9 @@ import { instance } from './index';
 export const getPosts = (offset = '') => {
   return instance.get(`/articles?offset=${offset}&limit=10`);
 };
+
+// 메인페이지 공고 최근 3개
+// eslint-disable-next-line import/prefer-default-export
+export const getLastPosts = () => {
+  return instance.get('/articles/latest');
+};

src/apis/postDetail.js

@@ -1,7 +1,24 @@
-import instance from './index';
+import { instance } from './index';
 
-export const postDetail = (boardId = '') => {
-  return instance.get(`/articles/before/${boardId}`);
+// 공고상세페이지 받아오기 (피커, 작성자용)
+/* eslint-disable-next-line */
+export const postDetail = (boardId) => {
+  return instance.get(`/post/${boardId}`);
 };
 
-export default postDetail;
+// 매칭후 공고상세페이지 받아오기(피커정보있음) (작성자용)
+/* eslint-disable-next-line */
+export const postDetailWriter = (boardId) => {
+  return instance.get(`/articles/after/${boardId}`);
+};
+
+// 매칭하기 (피커용)
+/* eslint-disable-next-line */
+export const postDetailPicker = (data) => {
+  const { arrivalTime, boardId } = data;
+  return instance.post('/articles/agree', { arrivalTime, boardId });
+};
+
+// 공고글 삭제
+
+// 공고글 수정

src/apis/postWrite.js

@@ -1,4 +1,4 @@
-import instance from './index';
+import { instance } from './index';
 
 const writePost = (data) => {
   const { store, beverage, destination, tip, request, finishedAt } = data;

src/apis/register.js

@@ -1,7 +1,8 @@
 import { instance } from './index';
 
 const registerBank = (userInfo) => {
-  return instance.post('/users/register/input', userInfo);
+  console.log('계좌정보 등록 : ', userInfo);
+  return instance.post('/signup', userInfo);
 };
 
 export default registerBank;

src/apis/uploadCard.js

@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+const imageInstance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL,
+  timeout: 1000,
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+});
+
+imageInstance.interceptors.request.use((config) => {
+  const token = localStorage.getItem('accessToken');
+  if (token) {
+    // eslint-disable-next-line no-param-reassign
+    config.headers.Authorization = `${token}`;
+  }
+  return config;
+});
+
+imageInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    console.log(error);
+    return Promise.reject(error.response);
+  },
+);
+
+const uploadCard = (imageData) => {
+  const formData = {
+    key: 'image',
+    value: imageData,
+  };
+  console.log(formData);
+  return imageInstance.post('/mypage/image/url', formData);
+};
+
+export default uploadCard;

src/components/atoms/Card.jsx

@@ -22,10 +22,7 @@ const Card = ({
       className={`w-80 h-20 rounded-xl border-[#8B8B8B] border m-auto my-[15px] 
       ${match ? 'bg-[#000000]/50' : ''}`}
     >
-      <Link
-        to={match ? './' : to}
-        className={`relative flex justify-between py-2 px-3 ${match ? 'cursor-default' : ''}`}
-      >
+      <Link to={to} className={`relative flex justify-between py-2 px-3 ${match ? 'cursor-default' : ''}`}>
         <div>
           <div className="flex items-center">
             <MdOutlineLocationOn className="mr-1" style={{ color: '#0075FF' }} />

src/components/atoms/ErrorMsg.jsx

@@ -1,5 +1,8 @@
-const ErrorMsg = () => {
-  return <p className="text-red-600 text-sm">필수 입력 항목입니다.</p>;
+// eslint-disable-next-line
+import { ErrorMessage } from '@hookform/error-message';
+
+const ErrorMsg = ({ errors, name, as, render }) => {
+  return <ErrorMessage className="text-red-600 text-sm" errors={errors} name={name} as={as} render={render} />;
 };
 
 export default ErrorMsg;

src/components/organisms/Info.jsx → src/components/atoms/Info.jsx

@@ -1,30 +1,42 @@
+import time from '../../utils/time';
+
 /* eslint-disable */
-const Info = () => {
+const Info = ({ response }) => {
+  // 마감시간
+  let finishTime = new Date(response.finishedAt);
+
+  // 메뉴들 나열하는 거
+  const showMenu = (item) => {
+    return item.map(({ name }) => {
+      return <div key={name}>{name}</div>;
+    });
+  };
+
   return (
     <div className="px-8 pt-6">
       {/* 주문정보 */}
       <div>
         <div className="text-xl font-bold text-blue py-2">주문 정보</div>
-        <div>아이스 아메리카노 1잔</div>
+        <div>{showMenu(response.beverage)}</div>
       </div>
       {/* 요청사항 */}
       <div className="my-12">
         <div className="text-xl font-bold text-blue py-2">요청 사항</div>
         <div>
           <div className="flex">
             <div className="text-zinc-400">픽업팁</div>
-            <div className="ml-8">3000원</div>
+            <div className="ml-8">{response.tip}원</div>
           </div>
           <div className="flex">
             <div className="text-zinc-400">요청사항</div>
-            <div className="ml-5">1층 도착하시면 연락주세요!</div>
+            <div className="ml-5">{response.request}</div>
           </div>
         </div>
       </div>
       {/* 마감기한 */}
       <div className="my-12">
         <div className="text-xl font-bold text-blue py-2">마감기한</div>
-        <div>오늘 14시 10분까지</div>
+        <div>{time(finishTime)}</div>
       </div>
     </div>
   );

src/components/atoms/TextArea.jsx

@@ -4,10 +4,10 @@ const TextArea = ({ register, placeholder, id, name, ...inputProps }) => {
       id={id}
       placeholder={placeholder}
       name={name}
-      {...register(name)}
       type="text"
       rows="3"
       {...inputProps}
+      {...register}
       className="w-[18rem] rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-4"
     />
   );

src/components/atoms/Input.jsx → src/components/atoms/input/Input.jsx

@@ -5,8 +5,8 @@ const Input = ({ register, required, type, value, name, placeholder, width = 'w-
       name={name}
       value={value}
       placeholder={placeholder}
-      {...register(name, { required })}
       {...inputProps}
+      {...register}
       className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`}
     />
   );

src/components/atoms/input/RangeInput.jsx

@@ -0,0 +1,17 @@
+import '../../../styles/thumb.css';
+
+const RangeInput = ({ name, register }) => {
+  return (
+    <input
+      name={name}
+      {...register}
+      type="range"
+      max="2500"
+      min="1000"
+      step="500"
+      className="custom-thumb w-[17rem] bg-gray-200 rounded-lg appearance-none"
+    />
+  );
+};
+
+export default RangeInput;

src/components/atoms/SelectInput.jsx → src/components/atoms/input/SelectInput.jsx

@@ -1,4 +1,4 @@
-import cafe from '../../constant/cafe';
+import cafe from '../../../constant/cafe';
 
 const SelectInput = ({
   register,
@@ -15,8 +15,8 @@ const SelectInput = ({
       type={type}
       name={name}
       placeholder={placeholder}
-      {...register(name, { required })}
       {...inputProps}
+      {...register}
       className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`}
     >
       <option value="">=== 선택 ===</option>