Rc list upload (#60)

components/board/board.menubar.jsx

@@ -11,6 +11,9 @@ export default class BoardMenubar extends Component {
             POPO 설정값
           </Menu.Item>
         </Link>
+        <Menu.Item href={'/board/rc-students-list'} passHref>
+          RC 사생 명단 업로드
+        </Menu.Item>
         <Link href={'/board/whitebook'} passHref>
           <Menu.Item>
             생활백서

components/common/csv-upload.form.jsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Button, Form } from "semantic-ui-react"
+import { CsvUpload } from "@/utils/file-upload";
+import { Axios } from "axios";
+import { PoPoAxios } from "@/utils/axios.instance";
+
+const CsvUploadForm = ({ label, uploadUri }) => {
+  const [uploadedFile, setUploadedFile] = useState(null)
+
+  return (
+    <Form>
+      <Form.Input
+        label={label}
+        type={'file'}
+        accept={'csv'}
+        onChange={async (evt) => {
+          const file = evt.target.files[0];
+          setUploadedFile(file);
+        }}
+      />
+
+      <Button onClick={async () => {
+          CsvUpload(uploadUri, uploadedFile)
+          .catch(err => {
+            const errMsg = err.response.data.message;
+            alert(`업로드에 실패했습니다.\n${errMsg}`);
+          })
+
+          PoPoAxios.get('/setting/sync-rc-students-list', { withCredentials: true })
+          .then(res => {
+            alert('업로드가 완료 되었습니다!');
+          })
+          .catch(err => {
+            const errMsg = err.response.data.message;
+            alert(`유저 목록 업데이트에 실패했습니다.\n${errMsg}`);
+          })
+      }}>
+        업로드
+      </Button>
+    </Form>
+  )
+}
+
+export default CsvUploadForm;

components/common/image-upload.form.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Form, Image } from "semantic-ui-react"
-import { ImageUpload } from "@/utils/image-upload";
+import { ImageUpload } from "@/utils/file-upload";
 
 const ImageUploadForm = ({ type, uploadApiUri, originalImageUrl }) => {
   const [image_url, setImageUrl] = useState(originalImageUrl)

pages/board/rc-students-list.jsx

@@ -0,0 +1,72 @@
+import BoardLayout from '@/components/board/board.layout'
+import { PoPoAxios } from '@/utils/axios.instance';
+import CsvUploadForm from '@/components/common/csv-upload.form';
+import { Button } from 'semantic-ui-react';
+
+const RcStudentsListPage = ({ popoRcStdntCnt, totalRcStdntCnt }) => {
+  return (
+    <BoardLayout>
+      <h3>RC 사생 명단 업로드</h3>
+      <div>
+        RC 사생에게만 RC 장소 예약을 받기 위해 RC 사생 명단 정보가 필요합니다.
+        아래 주소에서 CSV 파일을 다운 받아 요 형식에 맞춰 입력 후, 다시 CSV 파일을 업로드 해주세요.
+        CSV 파일이 업로드 되면, RC 사생 명단 초기화 후 업로드 된 명단에 있는 Povis ID를 가진 모든 유저를 RC 사생으로 분류합니다.
+        만약 RC 사생 명단 업로드 후에 RC 사생이 추가로 가입한다면, 자동으로 RC 사생으로 분류됩니다.
+      </div>
+
+      <ul>
+        <li>
+          POPO 가입 RC 사생 수: {popoRcStdntCnt}명 ({Number((popoRcStdntCnt / totalRcStdntCnt * 100).toFixed(1))}%) 
+        </li>
+        <li>
+          전체 RC 사생 수: {totalRcStdntCnt}명            
+        </li>
+      </ul>
+
+      <div style={{marginTop: 4, gap: 8}}>
+        <Button
+          size='tiny'
+          href={`${PoPoAxios.getUri()}/setting/download-rc-students-list`}
+        >
+          CSV 다운로드
+        </Button>
+
+        <Button
+          size='tiny'
+          onClick={() => {
+            PoPoAxios.get('/setting/sync-rc-students-list', { withCredentials: true })
+            .then(() => {
+              alert('싱크에 성공 했습니다.');
+              window.location.reload();
+            })
+            .catch((err) => {
+              const errMsg = err.response.data.message;
+              alert(`목록 싱크에 실패했습니다.\n${errMsg}`)
+            })
+          }}
+        >
+          RC 사생 명단 Sync
+        </Button>
+      </div>
+
+      <div style={{marginTop: 12}}>
+        <CsvUploadForm
+          label={'RC 사생 명단'}
+          uploadUri={'/setting/rc-students-list'}
+        />
+      </div>
+    </BoardLayout>
+  )
+}
+
+export default RcStudentsListPage;
+
+export async function getServerSideProps() {
+  const res1 = await PoPoAxios.get('/user/count/RC_STUDENT');
+  const popoRcStdntCnt = res1.data;
+
+  const res2 = await PoPoAxios.get('/setting/count-rc-students-list');
+  const totalRcStdntCnt = res2.data;
+
+  return { props: { popoRcStdntCnt, totalRcStdntCnt } }
+}

utils/image-upload.js → utils/file-upload.js

@@ -9,3 +9,13 @@ export function ImageUpload(uri, image_file) {
     headers: { "Content-Type": "multipart/form-data" },
   });
 }
+
+export function CsvUpload(uri, csv_file) {
+  let formData = new FormData();
+  formData.append("csv_file", csv_file);
+
+  return PoPoAxios.post(uri, formData, {
+    withCredentials: true,
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+}