Merge pull request #73 from baegyeong/feature/admin-page

[feat]: 관리자 학생 인증 페이지, 공고 작성 페이지 (useQuery, useMutation 위주)

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/list/${id}`);
+};
+
+export const adminAuthList = () => {
+  return instance.get('/admin/auth/list');
+};

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/components/organisms/AuthDetail.jsx

@@ -1,7 +1,7 @@
 const AuthDetail = ({ user }) => {
   return (
     <>
-      <div className="text-lg">{user.nickname}</div>
+      <p className="text-lg">{user.nickname}</p>
       <img src={user.imageUrl} alt="student" />
     </>
   );

src/constant/auth.js

@@ -0,0 +1,2 @@
+export const REJECT = '거절';
+export const APPROVE = '승인';

src/constant/postWrite/intro.js

@@ -0,0 +1,7 @@
+const intro = {
+  TITLE: '어떤 음료를 픽업 받으실 건가요?',
+  SUB_TITLE: '픽업을 위한 정보를 입력합니다.',
+  START_POST: '공고 작성하기',
+};
+
+export default intro;

src/pages/AdminAuthPage.jsx

@@ -1,25 +1,72 @@
 import { useEffect, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useParams, useNavigate } from 'react-router-dom';
 import OtherNav from '../components/atoms/OtherNav';
 import AuthDetail from '../components/organisms/AuthDetail';
+import Button from '../components/atoms/Button';
+import { REJECT, APPROVE } from '../constant/auth';
+import { adminAuth } from '../apis/admin';
 
 const AdminAuthPage = () => {
-  //   const { id } = useParams();
+  const { id } = useParams();
+  const navigate = useNavigate();
   const [userInfo, setUserInfo] = useState([]);
+  const btnWidth = 'w-[8rem]';
+  const btnHeight = 'h-[2.2rem]';
 
   useEffect(() => {
-    fetch('/admin/auth/1')
+    fetch(`/admin/auth/${id}`)
       .then((response) => response.json())
       .then((data) => {
-        const userArray = data.response;
-        setUserInfo(userArray);
+        setUserInfo(data.response);
       });
   }, []);
 
+  // eslint-disable-next-line
+  const { data: userDetail } = useQuery(['admin_auth_approval', id], () => adminAuth(id), {
+    select: (data) => data?.response,
+  });
+
+  const { mutate: handleAuth } = useMutation({
+    mutationFn: adminAuth,
+    onSuccess: () => {
+      navigate('/admin');
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  const handleApprove = () => {
+    handleAuth({ user_id: id });
+  };
+
+  const handleReject = () => {
+    navigate('/admin');
+  };
+
   return (
-    <div className="page--layout">
-      <OtherNav />
-      <div className="pt-[25px] p-[35px]">
-        <AuthDetail user={userInfo} />
+    <div className="page--layout flex flex-col justify-between">
+      <div>
+        <OtherNav />
+        <div className="pt-[25px] p-[35px]">
+          <AuthDetail user={userInfo} />
+        </div>
+      </div>
+      <div className="flex place-content-around p-[35px] mb-[20px]">
+        <Button
+          onClick={handleReject}
+          width={btnWidth}
+          height={btnHeight}
+          bgColor="bg-white"
+          textColor="text-blue"
+          bdRadius="rounded-lg border-blue border-2"
+        >
+          {REJECT}
+        </Button>
+        <Button onClick={handleApprove} width={btnWidth} height={btnHeight} bgColor="bg-blue">
+          {APPROVE}
+        </Button>
       </div>
     </div>
   );

src/pages/AdminPage.jsx

@@ -1,10 +1,16 @@
+/* eslint-disable */
 import { useEffect, useState } from 'react';
 import AuthRequest from '../components/organisms/AuthRequest';
 import OtherNav from '../components/atoms/OtherNav';
+import { adminAuthList } from '../apis/admin';
+import { useInView } from 'react-intersection-observer';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 const AdminPage = () => {
   const [userInfo, setUserInfo] = useState([]);
+  const { inView } = useInView();
 
+  // msw
   useEffect(() => {
     fetch('/admin')
       .then((response) => response.json())
@@ -14,6 +20,25 @@ const AdminPage = () => {
       });
   }, []);
 
+  // react-query
+  const { data, fetchNextPage, isLoading, refetch } = useInfiniteQuery(
+    ['adminAuthList'],
+    ({ pageParam = 0 }) => adminAuthList(pageParam),
+    {
+      getNextPageParam: (lastPage) => (!lastPage.isLast ? lastPage.nextPage : undefined),
+      onSuccess: (data) => {
+        console.log(data);
+      },
+      retry: false,
+    },
+  );
+
+  useEffect(() => {
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [inView]);
+
   return (
     <djiv className="page--layout">
       <OtherNav />
@@ -22,6 +47,7 @@ const AdminPage = () => {
         {userInfo.map((item) => {
           return <AuthRequest key={item.id} user={item} />;
         })}
+        {isLoading && <div>로딩중</div>}
       </div>
     </djiv>
   );

src/pages/PostWriteIntroPage.jsx

@@ -2,20 +2,21 @@ import { Link } from 'react-router-dom';
 import Button from '../components/atoms/Button';
 import OtherNav from '../components/atoms/OtherNav';
 import routes from '../constant/routes';
+import intro from '../constant/postWrite/intro';
 
 const PostWriteIntroPage = () => {
   return (
     <div className="page--layout bg-sky-blue flex flex-col justify-between">
       <OtherNav iconColor="#fff" bgColor="#000" />
       <div>
         <div className="text-white p-8">
-          <div className="font-bold text-xl">어떤 음료를 픽업 받으실 건가요?</div>
-          <div>픽업을 위한 정보를 입력합니다.</div>
+          <div className="font-bold text-xl">{intro.TITLE}</div>
+          <div>{intro.SUB_TITLE}</div>
         </div>
         <div className="flex justify-center mb-14">
           <Link to={routes.postWrite}>
             <Button width="w-[19rem]" height=" h-[2.5rem]" bgColor="bg-white" textColor="text-sky-blue">
-              공고 작성하기
+              {intro.START_POST}
             </Button>
           </Link>
         </div>

src/pages/PostWritePage.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm, FormProvider } from 'react-hook-form';
+import { useMutation } from '@tanstack/react-query';
 import Swal from 'sweetalert2';
 import OtherNav from '../components/atoms/OtherNav';
 import BtnNavigate from '../components/molecules/BtnNavigate';
@@ -13,6 +14,7 @@ import { DESTINATION } from '../constant/postWrite/orderRequest';
 import { HOUR, MINUTE } from '../constant/postWrite/orderDeadLine';
 import { registerMessage } from '../utils/alert';
 import dateAndTime from '../utils/dateAndTime';
+import writePost from '../apis/postWrite';
 
 const PostWritePage = () => {
   const navigate = useNavigate();
@@ -25,16 +27,29 @@ const PostWritePage = () => {
     name: [STORE, `${BEVERAGE}[0].value`, DESTINATION, HOUR, MINUTE],
   });
 
+  const { mutate } = useMutation({
+    mutationFn: writePost,
+  });
+
+  // msw
   const onSubmit = (data) => {
     const request = { ...data };
     request.finishedAt = dateAndTime(data);
 
+    // msw
     fetch('/articles/write', {
       method: 'POST',
       body: JSON.stringify(data),
     })
       .then((response) => response.json())
       .then((result) => console.log(result));
+
+    // react-query
+    mutate(data, {
+      onError: (error) => {
+        console.error(error);
+      },
+    });
   };
 
   const handleAlert = (data) => {