feat:문제집 이미지 업로드 구현(#20)

CS-tudy · Nov 4, 2023 · 556543b · 556543b
1 parent 64b70e6
commit 556543b
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 35 deletions.
diff --git a/src/api/workbook.ts b/src/api/workbook.ts
@@ -4,7 +4,7 @@ import { WorkbookSetForm } from 'types/Form';
 import { Workbook, WorkbookList, WorkbookQuestion } from 'types/api';
 
 // 문제집 생성
-export const workbookSet = async (formData: WorkbookSetForm) => {
+export const workbookSet = async (formData: WorkbookSetForm): Promise<any> => {
   const response = await instance.post('/api/workbook', formData);
   return response;
 };
@@ -46,14 +46,25 @@ export const updateWorkbook = async (formData: FieldValues) => {
 };
 
 export const workbookQuestionDelete = async (formData: FieldValues) => {
+  const { workbookId, questionIds } = formData;
+  const response = await instance.delete(`/api/workbook`, {
+    data: {
+      workbookId,
+      questionIds,
+    },
+  });
+  return response;
+};
+
+export const addWorkbookQuestion = async (formData: FieldValues) => {
   const response = await instance.post(
-    `/api/workbook/question/delete`,
+    `/api/workbook/workbook/questions`,
     formData,
   );
   return response;
 };
 
-export const addWorkbookQuestion = async (formData: FieldValues) => {
-  const response = await instance.post(`/api/workbook/question/add`, formData);
+export const uploadimageWorkbook = async (formData: FieldValues) => {
+  const response = await instance.post(`/api/upload`, formData);
   return response;
 };
diff --git a/src/components/commons/Admin/WorkbookImgModal/index.tsx b/src/components/commons/Admin/WorkbookImgModal/index.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import axios from 'axios';
+import useGetWorkbookList from 'hooks/@query/workbook/useGetWorkbookList';
+
+const WorkbookImageUpload = () => {
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleFileChange = (e: any) => {
+    setSelectedFile(e.target.files[0]);
+  };
+  const workbookList = useGetWorkbookList({ title: '', description: '' });
+  console.log(workbookList);
+  const lastWorkbook = workbookList?.content[workbookList?.content.length - 1];
+  const newId = lastWorkbook ? lastWorkbook.id + 1 : 1;
+  console.log(newId);
+
+  const handleUpload = () => {
+    if (!selectedFile) return;
+
+    setUploading(true);
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
+  };
+  return (
+    <div>
+      <input type="file" onChange={handleFileChange} />
+      <button onClick={handleUpload} disabled={!selectedFile || uploading}>
+        Upload Image
+      </button>
+    </div>
+  );
+};
+
+export default WorkbookImageUpload;
diff --git a/src/components/commons/Container/style.ts b/src/components/commons/Container/style.ts
@@ -13,7 +13,8 @@ export const Wrapper = styled.div`
 
 export const BodyWrapper = styled.div`
   width: 100%;
-  top: 20;
+  /* position: absolute;
+  top: 20; */
 `;
 
 export const ContentWrapper = styled.div`

diff --git a/src/components/commons/ContentHeaderWrapper/index.tsx b/src/components/commons/ContentHeaderWrapper/index.tsx
@@ -8,6 +8,7 @@ import StyleLink from '../StyleLink';
 import * as Styled from './style';
 import { isAdmin } from 'repository/auth';
 import { useUpdateWorkbook } from 'hooks/@query/workbook/useUpdateWorkbook';
+import { Button } from '../Button/Style';
 
 interface CreateContestProps {
   desc?: string;
@@ -51,13 +52,14 @@ const ContentHeaderWrapper = ({
       <div>
         {isAdmin() && admin && (
           <Styled.AdminWrapper>
-            <button
+            <Button
               type="button"
-              className="lg navy style"
               onClick={() => setIsActive(active => !active)}
+              variant="primary"
+              size="mideum"
             >
               문제집 정보 수정
-            </button>
+            </Button>
             {isActive && (
               <>
                 <button
@@ -105,4 +107,4 @@ const ContentHeaderWrapper = ({
   );
 };
 
-export default memo(ContentHeaderWrapper);
+export default ContentHeaderWrapper;
diff --git a/src/components/commons/ContentHeaderWrapper/style.ts b/src/components/commons/ContentHeaderWrapper/style.ts
@@ -5,6 +5,7 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 0 5vw;
 `;
 
 export const AdminWrapper = styled.div`

diff --git a/src/hooks/@query/workbook/useGetWorkbookList.ts b/src/hooks/@query/workbook/useGetWorkbookList.ts
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { getWorkbookList } from 'api/workbook';
 
 interface UseGetWorkbookListProps {
-  page: number;
+  page?: number;
   title?: string;
   description?: string;
 }

diff --git a/src/hooks/@query/workbook/useUploadWorkbook.ts b/src/hooks/@query/workbook/useUploadWorkbook.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateWorkbook } from 'api/workbook';
+
+interface UpdateWorkbookProps {
+  handleIsLoading: (isLoading: boolean) => void;
+  handleIsActive: (isActive: boolean) => void;
+}
+
+export const useUploadWorkbook = ({
+  handleIsLoading,
+  handleIsActive,
+}: UpdateWorkbookProps) => {
+  const queryClient = useQueryClient();
+  const { mutate: UpdateWorkbook } = useMutation(updateWorkbook, {
+    onSuccess: () => {
+      alert('문제집 정보 수정에 성공했습니다.');
+      queryClient.invalidateQueries(['workbook']);
+    },
+    onError: () => {
+      alert('문제집 정보 수정에 실패했습니다.');
+    },
+    onSettled: () => {
+      handleIsActive(false);
+      handleIsLoading(false);
+    },
+  });
+
+  return UpdateWorkbook;
+};
diff --git a/src/hooks/@query/workbook/useWorkbookSet.ts b/src/hooks/@query/workbook/useWorkbookSet.ts
@@ -3,9 +3,13 @@ import { workbookSet } from 'api/workbook';
 
 interface useWorkbookSetProps {
   handleIsLoading: (isLoading: boolean) => void;
+  handleIsModal: (isModalOpen: boolean) => void;
 }
 
-export const useWorkbookSet = ({ handleIsLoading }: useWorkbookSetProps) => {
+export const useWorkbookSet = ({
+  handleIsLoading,
+  handleIsModal,
+}: useWorkbookSetProps) => {
   const queryClient = useQueryClient();
   const { mutate: WorkbookSet } = useMutation(workbookSet, {
     onSuccess: () => {
@@ -17,6 +21,7 @@ export const useWorkbookSet = ({ handleIsLoading }: useWorkbookSetProps) => {
     },
     onSettled: () => {
       handleIsLoading(false);
+      handleIsModal(true);
     },
   });
 

diff --git a/src/pages/Admin/CreateWorkbook/index.tsx b/src/pages/Admin/CreateWorkbook/index.tsx
@@ -8,11 +8,12 @@ import { FormBody } from 'components/commons/Admin/FormBody/style';
 import AdminInput from 'components/commons/Admin/AdminInput';
 import FormSection from 'components/commons/Admin/FormSection';
 import { useWorkbookSet } from 'hooks/@query/workbook/useWorkbookSet';
+import { Button } from 'components/commons/Button/Style';
 
 const CreateWorkbook = () => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const {
     register,
     handleSubmit,
@@ -27,8 +28,11 @@ const CreateWorkbook = () => {
   const handleIsLoading = (isLoading: boolean) => {
     setIsLoading(isLoading);
   };
+  const handleIsModal = (isModalOpen: boolean) => {
+    setIsModalOpen(isModalOpen);
+  };
 
-  const WorkbookSet = useWorkbookSet({ handleIsLoading });
+  const WorkbookSet = useWorkbookSet({ handleIsLoading, handleIsModal });
 
   const onSubmit: SubmitHandler<FieldValues> = data => {
     setIsLoading(true);
@@ -64,10 +68,17 @@ const CreateWorkbook = () => {
                 required
               />
             </FormSection>
-            <button type="submit">문제집 등록하기</button>
-            <button type="button" onClick={() => navigate(-1)}>
+            <Button type="submit" variant="primary" size="mideum">
+              문제집 등록하기
+            </Button>
+            <Button
+              type="button"
+              onClick={() => navigate(-1)}
+              variant="gray"
+              size="mideum"
+            >
               돌아가기
-            </button>
+            </Button>
           </FormBody>
         </form>
       </ContentBodyWrapper>

diff --git a/src/pages/Admin/WorkbookProblemAdd/index.tsx b/src/pages/Admin/WorkbookProblemAdd/index.tsx
@@ -25,6 +25,7 @@ const WorkbookProblemAdd = () => {
     questionTitle: '',
     categoryTitle: '',
   });
+
   const page = 0;
   const { workbookQuestion } = useMixWorkbookWorkbookQuestion({
     questionId,

diff --git a/src/pages/Workbook/index.tsx b/src/pages/Workbook/index.tsx
@@ -2,13 +2,15 @@ import { FieldValues, useForm } from 'react-hook-form';
 import useWorkbookFilter from 'hooks/Workbook/useWorkbookFilter';
 import useGetWorkbookList from 'hooks/@query/workbook/useGetWorkbookList';
 import { WorkbookList } from 'types/api';
-import ContentBodyWrapper from 'components/commons/ContentBodyWrapper';
+import { Button } from 'components/commons/Button/Style';
+
 import * as S from './style';
 import NoData from 'components/commons/NoData';
 import ContentHeaderWrapper from 'components/commons/ContentHeaderWrapper';
 import ContentContainer from 'components/commons/ContentContainer';
 import Pagination from 'components/commons/Pagination';
 import WorkbookCards from 'components/unit/Workbook/WorkbookCards';
+import Container from 'components/commons/Container';
 
 const Workbook = () => {
   const { register, handleSubmit, reset } = useForm<FieldValues>({
@@ -17,7 +19,6 @@ const Workbook = () => {
     },
   });
   const { workbookFilter, handlePage, onSubmit } = useWorkbookFilter();
-  console.log(workbookFilter);
 
   const workbookList = useGetWorkbookList({
     page: workbookFilter.pageNumber,
@@ -39,30 +40,34 @@ const Workbook = () => {
             type="text"
             {...register('search', { required: true })}
           />
-          <button onClick={handleSubmit(onSubmit)} className="navy xl style">
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="primary"
+            size="small"
+          >
             검색
-          </button>
+          </Button>
           <button onClick={handleReset} className="ml xl  revert">
             버튼
           </button>
         </S.SearchWrapper>
       </ContentHeaderWrapper>
-      <ContentBodyWrapper>
+      <Container>
         {workbookList?.totalElements === 0 && (
           <NoData>문제집이 없습니다.</NoData>
         )}
         <WorkbookCards workbookList={workbookList as WorkbookList} />
-        {/* {(workbookList?.totalPages as number) > 1 && (
-              )} */}
-        <S.PaginationWrapper>
-          <Pagination
-            totalPages={workbookList?.totalPages as number}
-            handlePage={handlePage}
-            page={workbookFilter.pageNumber}
-            white
-          />
-        </S.PaginationWrapper>
-      </ContentBodyWrapper>
+        {(workbookList?.totalPages as number) > 1 && (
+          <S.PaginationWrapper>
+            <Pagination
+              totalPages={workbookList?.totalPages as number}
+              handlePage={handlePage}
+              page={workbookFilter.pageNumber}
+              white
+            />
+          </S.PaginationWrapper>
+        )}
+      </Container>
     </ContentContainer>
   );
 };

diff --git a/src/pages/WorkbookQuestion/index.tsx b/src/pages/WorkbookQuestion/index.tsx
@@ -12,6 +12,7 @@ import WorkbookQuestionTableLists from 'components/unit/WorkbookQuestion/Workboo
 import { isAdmin } from 'repository/auth';
 import WorkbookQuestionAdminOptionGroup from 'components/unit/WorkbookQuestion/WorkbookQuestionAdminOption';
 import { useMixWorkbookWorkbookQuestion } from 'hooks/@query/workbook/useMixWorkbookWorkbookQuestion';
+import { Button } from 'components/commons/Button/Style';
 
 const WorkbookQuestion = () => {
   const { questionId } = useParams();
@@ -48,13 +49,14 @@ const WorkbookQuestion = () => {
       <ContentHeaderWrapper admin desc={workbook?.description}>
         <S.CreateInfo>
           출시일: {workbook?.createdAt}
-          <button
+          <Button
             type="button"
-            className="gray style mt xl2"
             onClick={() => navigate(-1)}
+            variant="gray"
+            size="mideum"
           >
             돌아가기
-          </button>
+          </Button>
         </S.CreateInfo>
       </ContentHeaderWrapper>
       <ContentBodyWrapper>