[chore] recruit merge #1388

.github/workflows/main-deploy.yml

@@ -1,6 +1,7 @@
 name: Deploy to 42ggClientS3
 
 on:
+  workflow_dispatch:
   push:
     branches:
       - deploy

components/admin/recruitments/RecruitmentsHistoryList.tsx

@@ -48,7 +48,7 @@ function RecruitmentsHistoryList({
   setPage: Dispatch<SetStateAction<RecruitmentsPages>>;
 }) {
   const [recruitData, setRecruitData] = useState<IrecruitTable>({
-    recruitmentDtoList: [],
+    recruitments: [],
     totalPage: 0,
     currentPage: 0,
   });
@@ -64,7 +64,7 @@ function RecruitmentsHistoryList({
       );
       // FIXME : 페이지네이션 x 임시로 1페이지로 고정
       setRecruitData({
-        recruitmentDtoList: res.data.recruitments,
+        recruitments: res.data.recruitments,
         totalPage: 1,
         currentPage: 1,
       });
@@ -173,8 +173,8 @@ function RecruitmentsHistoryList({
         <Table className={styles.table} aria-label='customized table'>
           <AdminTableHead tableName={'recruitment'} table={tableTitle} />
           <TableBody className={styles.tableBody}>
-            {recruitData.recruitmentDtoList.length > 0 ? (
-              recruitData.recruitmentDtoList.map((recruit: Irecruit) => (
+            {recruitData.recruitments.length > 0 ? (
+              recruitData.recruitments.map((recruit: Irecruit) => (
                 <TableRow className={styles.tableRow} key={recruit.id}>
                   {tableFormat['recruitment'].columns.map(
                     (columnName: string, index: number) => (

components/admin/recruitments/RecruitmentsMain.tsx

@@ -1,25 +1,23 @@
 import { Dispatch, SetStateAction } from 'react';
-import {
-  RecruitmentsMainProps,
-  RecruitmentsPages,
-} from 'types/admin/adminRecruitmentsTypes';
+import { Button } from '@mui/material';
+import { RecruitmentsMainProps } from 'types/admin/adminRecruitmentsTypes';
 import styles from 'styles/admin/store/StoreMain.module.scss';
-import RecruitmentEdit from './recruitmentsEdit/RecruitmentEdit';
 import RecruitmentsHistoryList from './RecruitmentsHistoryList';
 
 function RecruitmentsMain({ setPage }: RecruitmentsMainProps) {
   //return menutab
   return (
     <div className={styles.mainContainer}>
       <div className={styles.subContainer}>
-        <button
+        <Button
+          variant='contained'
           className={styles.sectionTitle}
           onClick={() => {
             setPage({ pageType: 'EDIT', props: { mode: 'CREATE', setPage } });
           }}
         >
-          지원 공고 등록
-        </button>
+          새 모집공고 등록
+        </Button>
       </div>
       <div className={styles.subContainer}>
         <div className={styles.sectionTitle}>변경 이력</div>

components/admin/recruitments/recruitmentsDetail/RecruitmentDetail.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
+import HomeIcon from '@mui/icons-material/Home';
+import { IconButton } from '@mui/material';
 import {
   Iquestion,
   Irecruit,
   RecruitmentDetailProps,
-  RecruitmentsMainProps,
 } from 'types/admin/adminRecruitmentsTypes';
 import { instance } from 'utils/axios';
 import { toastState } from 'utils/recoil/toast';
@@ -24,7 +25,7 @@ export default function RecruitmentDetail({
     endDate: new Date(),
     generation: '',
     contents: '',
-    form: [],
+    forms: [],
   });
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -33,16 +34,16 @@ export default function RecruitmentDetail({
   const getRecruitmentInfo = async () => {
     setIsLoading(true);
     try {
-      const res = await instance.get('/recruitments/' + recruit.id);
+      const res = await instance.get(`admin/recruitments/${recruit.id}`);
       const data: Irecruit = {
         id: recruit.id,
-        status: recruit.status,
+        isFinish: recruit.isFinish,
         title: res.data.title,
         startDate: new Date(res.data.startDate),
         endDate: new Date(res.data.endDate),
         generation: res.data.generation,
         contents: res.data.contents,
-        form: res.data.form,
+        forms: res.data.forms,
       };
       setRecruitmentInfo(data);
       setIsLoading(false);
@@ -62,14 +63,14 @@ export default function RecruitmentDetail({
 
   return (
     <div className={styles.container}>
-      <button
+      <IconButton
+        aria-label='메인으로 가기'
         onClick={() => {
-          const props = { setPage: setPage } as RecruitmentsMainProps;
-          setPage({ pageType: 'MAIN', props: props });
+          setPage({ pageType: 'MAIN', props: null });
         }}
       >
-        홈으로 돌아가기
-      </button>
+        <HomeIcon />
+      </IconButton>
       {isLoading ? (
         <p>로딩중...</p>
       ) : (
@@ -83,7 +84,7 @@ export default function RecruitmentDetail({
           <QuillDescriptionViewer
             contents={recruitmentInfo.contents as string}
           />
-          <QuestionForm form={recruitmentInfo.form as Iquestion[]} />
+          <QuestionForm form={recruitmentInfo.forms as Iquestion[]} />
         </>
       )}
     </div>

components/admin/recruitments/recruitmentsDetail/components/ActionSelectorButtons.tsx

@@ -1,27 +1,12 @@
-import {
-  ChangeEvent,
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import {
-  Button,
-  FormControl,
-  FormControlLabel,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-  Switch,
-} from '@mui/material';
+import { Button, FormControlLabel, Switch } from '@mui/material';
 import {
   Irecruit,
   RecruitmentEditProps,
   RecruitmentsPages,
 } from 'types/admin/adminRecruitmentsTypes';
+import { instance } from 'utils/axios';
 import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/recruitments/recruitmentDetail/components/ActionSelectorButtons.module.scss';
 
@@ -34,13 +19,13 @@ interface ActionSelectorButtonsProps {
 export default function ActionSelectorButtons({
   setPage,
   recruitmentInfo,
-  actionType,
 }: ActionSelectorButtonsProps) {
-  const STATE = recruitmentInfo.status === '모집중' ? false : true;
-
-  const [isEnded, setIsEnded] = useState<boolean>(STATE);
+  const [isFinish, setIsFinish] = useState<boolean>(
+    recruitmentInfo.isFinish as boolean
+  );
 
   const isStarted = recruitmentInfo.startDate > new Date();
+  const setSnackBar = useSetRecoilState(toastState);
 
   const goToEditPage = (mode: string) => {
     setPage({
@@ -53,19 +38,55 @@ export default function ActionSelectorButtons({
     });
   };
 
-  const switchChangeHandler = (
+  const deleteRecruitHandler = async () => {
+    try {
+      const res = await instance.delete(
+        `/admin/recruitments/${recruitmentInfo.id}`
+      );
+      alert('성공적으로 삭제가 완료되었습니다.');
+      setPage({ pageType: 'MAIN', props: null });
+    } catch (e: any) {
+      setSnackBar({
+        toastName: 'post recruitment',
+        severity: 'error',
+        message: e.response.data.message,
+        clicked: true,
+      });
+    }
+  };
+
+  const switchChangeHandler = async (
     e: ChangeEvent<HTMLInputElement>,
     checked: boolean
   ) => {
-    // 공고 상태 수정 API 호출
-    setIsEnded(checked);
+    try {
+      const res = await instance.patch(
+        `/admin/recruitments/${recruitmentInfo.id}/status`,
+        {
+          finish: !checked,
+        }
+      );
+      setIsFinish(!checked);
+      console.log(res);
+    } catch (e: any) {
+      setSnackBar({
+        toastName: 'patch recruitment',
+        severity: 'error',
+        message: 'API 요청에 실패하였습니다.',
+        clicked: true,
+      });
+    }
   };
 
   return (
     <>
       {isStarted ? (
         <div className={styles.mainContainer}>
-          <Button variant='contained' className={styles.button}>
+          <Button
+            variant='contained'
+            className={styles.button}
+            onClick={deleteRecruitHandler}
+          >
             삭제하기
           </Button>
           <Button
@@ -81,12 +102,12 @@ export default function ActionSelectorButtons({
           <FormControlLabel
             control={
               <Switch
-                checked={isEnded}
+                checked={!isFinish}
                 onChange={switchChangeHandler}
                 inputProps={{ 'aria-label': 'controlled' }}
               />
             }
-            label={isEnded ? '완료' : '모집중'}
+            label={isFinish ? '모집완료' : '모집중'}
           />
           <Button
             variant='contained'

components/admin/recruitments/recruitmentsDetail/components/QuestionForm.tsx

@@ -18,15 +18,8 @@ function MultiCheckInput({ checkList }: CheckInputProps) {
               <Grid item xs={1} alignItems='center'>
                 <CheckBox />
               </Grid>
-              <Grid item xs={10}>
-                <TextField
-                  fullWidth
-                  required
-                  label='직접입력'
-                  value={checkItem.content}
-                  size='small'
-                  variant='standard'
-                />
+              <Grid item xs={10} alignContent={'center'}>
+                <div>{checkItem.contents}</div>
               </Grid>
             </Grid>
           );
@@ -45,15 +38,16 @@ function SingleCheckInput({ checkList }: CheckInputProps) {
               <Grid item xs={1}>
                 <Radio value={idx} />
               </Grid>
-              <Grid item xs={10}>
-                <TextField
+              <Grid item xs={10} alignContent={'center'}>
+                <div>{checkItem.contents}</div>
+                {/* <TextField
                   fullWidth
                   required
                   label='직접입력'
                   value={checkItem.content}
                   size='small'
                   variant='standard'
-                />
+                /> */}
               </Grid>
             </Grid>
           );
@@ -82,6 +76,7 @@ function Question({ question }: QuestionProps) {
             fullWidth
             value={question.question}
             size='small'
+            disabled
           />
         </Grid>
         <Grid item xs={12}>

components/admin/recruitments/recruitmentsDetail/components/QuillDescriptionViewer.tsx

@@ -5,11 +5,6 @@ import 'react-quill/dist/quill.snow.css';
 import DynamicQuill from 'components/DynamicQuill';
 import styles from 'styles/admin/recruitments/recruitmentDetail/components/QuillDescription.module.scss';
 
-const Quill = dynamic(() => import('react-quill'), {
-  ssr: false,
-  loading: () => <p>Loading ...</p>,
-});
-
 interface QuillDescriptionViewerProps {
   contents: string;
 }

components/admin/recruitments/recruitmentsEdit/RecruitmentEdit.tsx

@@ -1,3 +1,5 @@
+import HomeIcon from '@mui/icons-material/Home';
+import { IconButton } from '@mui/material';
 import {
   Iquestion,
   Irecruit,
@@ -16,7 +18,7 @@ const emptyRecruitmentEditInfo: Irecruit = {
   endDate: new Date(),
   generation: '',
   contents: '',
-  form: [],
+  forms: [],
 };
 
 export default function RecruitmentEdit({
@@ -37,13 +39,14 @@ export default function RecruitmentEdit({
 
   return (
     <div className={styles.container}>
-      <button
+      <IconButton
+        aria-label='메인으로 가기'
         onClick={() => {
           setPage({ pageType: 'MAIN', props: null });
         }}
       >
-        메인으로가기
-      </button>
+        <HomeIcon />
+      </IconButton>
       <TitleTimeRangeSelector
         recruitmentEditInfo={recruitmentEditInfo}
         setRecruitmentEditInfoField={setRecruitmentEditInfoField}
@@ -53,13 +56,14 @@ export default function RecruitmentEdit({
         setRecruitmentEditInfoField={setRecruitmentEditInfoField}
       />
       <QuestionFormBuilder
-        form={recruitmentEditInfo.form as Iquestion[]}
+        form={recruitmentEditInfo.forms as Iquestion[]}
         formManager={formManager}
       />
       <ActionSelectorButtons
         recruitmentEditInfo={recruitmentEditInfo}
         importRecruitmentInfo={importRecruitmentInfo}
         actionType={mode}
+        setPage={setPage}
       />
     </div>
   );