Merge pull request #164 from side-peek/refactor/#150/projectRewrite

Refactor/#150/project rewrite

src/apis/project/postProject.ts

@@ -1,4 +1,4 @@
-import { postProjectPayload } from "api-models"
+import { Project, postProjectPayload } from "api-models"
 import { AxiosRequestConfig } from "axios"
 
 import { ENDPOINTS } from "@constants/endPoints"
@@ -8,6 +8,9 @@ import { authInstance } from "../axiosInstance"
 export const postProject = async (
   body: postProjectPayload,
   config: AxiosRequestConfig = {},
-) => {
-  await authInstance.post(ENDPOINTS.UPLOAD_PROJECT, body, { ...config })
+): Promise<Project> => {
+  const { data } = await authInstance.post(ENDPOINTS.UPLOAD_PROJECT, body, {
+    ...config,
+  })
+  return data
 }

src/apis/project/putProject.ts

@@ -1,13 +1,16 @@
-import { putProjectPayload } from "api-models"
-import { AxiosRequestConfig } from "axios"
+import { Project, putProjectPayload } from "api-models"
 
 import { ENDPOINTS } from "@constants/endPoints"
 
 import { authInstance } from "../axiosInstance"
 
 export const putProject = async (
-  { projectId, ...body }: putProjectPayload,
-  config: AxiosRequestConfig = {},
-) => {
-  await authInstance.put(ENDPOINTS.PUT_PROJECT(projectId), body, { ...config })
+  projectId: number,
+  body: putProjectPayload,
+): Promise<Project> => {
+  const { data } = await authInstance.put(
+    ENDPOINTS.PUT_PROJECT(projectId),
+    body,
+  )
+  return data
 }

src/pages/ProjectEditPage/ProjectEditPage.tsx

@@ -1,11 +1,11 @@
 import { Box } from "@chakra-ui/react"
 
-import ProjectForm from "./components/ProjectForm"
+import DefaultValueFetcher from "./components/DefaultValueFetcher"
 
 const ProjectEditPage = () => {
   return (
     <Box padding="3rem">
-      <ProjectForm />
+      <DefaultValueFetcher />
     </Box>
   )
 }

src/pages/ProjectEditPage/components/DefaultValueFetcher.tsx

@@ -0,0 +1,30 @@
+import { useSearchParams } from "react-router-dom"
+
+import { Spinner } from "@chakra-ui/react"
+
+import { useGetProjectEdit } from "../hooks/useGetProject"
+import ProjectFormProvider from "../stores/ProjectFormProvider"
+import ProjectForm from "./ProjectForm"
+
+const DefaultValueFetcher = () => {
+  const [searchParams] = useSearchParams()
+  const projectId = searchParams.get("projectId")
+
+  const { data: projectDetailInfo, isLoading } = useGetProjectEdit(
+    Number(projectId),
+  )
+
+  if (isLoading) {
+    return <Spinner />
+  }
+
+  return (
+    <ProjectFormProvider
+      defaultValues={projectDetailInfo}
+      projectId={Number(projectId)}>
+      <ProjectForm />
+    </ProjectFormProvider>
+  )
+}
+
+export default DefaultValueFetcher

src/pages/ProjectEditPage/components/Editors/Description.tsx

@@ -1,88 +1,112 @@
 import { Controller, FieldPath } from "react-hook-form"
 
-import { Box } from "@chakra-ui/react"
+import { Box, useToast } from "@chakra-ui/react"
 import MDEditor, { commands } from "@uiw/react-md-editor"
 
-import { useFileUpload } from "@pages/ProjectEditPage/hooks/useFileUpload"
+import { ErrorMessage } from "@components/ErrorMessage/ErrorMessage"
+
+import { usePostFileMutation } from "@pages/ProjectEditPage/hooks/usePostFileMutation"
+// import { useFileUpload } from "@pages/ProjectEditPage/hooks/useFileUpload"
 import { useProjectFormContext } from "@pages/ProjectEditPage/hooks/useProjectFormContext"
 import { ProjectFormValues } from "@pages/ProjectEditPage/types/ProjectFormValues"
 
 import FileUploadBox from "../Files/FileUploadBox"
 import FileUploadSection from "../Files/FileUploadSection"
+import ErrorText from "../styles/ErrorText"
 import UploadIcon from "./components/UpdateIcon"
 
 const Description = ({ name }: { name: FieldPath<ProjectFormValues> }) => {
-  const { control } = useProjectFormContext()
-  const { onChangeFile } = useFileUpload()
+  const {
+    control,
+    formState: { errors },
+  } = useProjectFormContext()
+
+  const toast = useToast()
+
+  const { mutateAsync } = usePostFileMutation({
+    onError: () => {
+      toast({
+        status: "error",
+        title: "파일 업로드에 실패했습니다",
+      })
+    },
+  })
 
   return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field: { onChange, onBlur, value } }) => (
-        <MDEditor
-          onChange={onChange}
-          onBlur={onBlur}
-          value={value as string}
-          commands={[
-            commands.image,
-            commands.divider,
-            commands.divider,
-            commands.fullscreen,
-            commands.group(
-              [
-                commands.title1,
-                commands.title2,
-                commands.title3,
-                commands.title4,
-                commands.title5,
-                commands.title6,
-              ],
-              {
-                name: "title",
-                groupName: "title",
+    <>
+      <ErrorMessage
+        name={name}
+        errors={errors}
+        render={({ message }) => <ErrorText message={message} />}
+      />
+      <Controller
+        control={control}
+        name={name}
+        // rules={{ required: "필수로 입력해주세요" }}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <MDEditor
+            onChange={onChange}
+            onBlur={onBlur}
+            value={value as string}
+            commands={[
+              commands.image,
+              commands.divider,
+              commands.divider,
+              commands.fullscreen,
+              commands.group(
+                [
+                  commands.title1,
+                  commands.title2,
+                  commands.title3,
+                  commands.title4,
+                  commands.title5,
+                  commands.title6,
+                ],
+                {
+                  name: "title",
+                  groupName: "title",
+                  buttonProps: { "aria-label": "Insert title" },
+                },
+              ),
+              commands.group([], {
+                name: "update",
+                groupName: "update",
+                icon: <UploadIcon />,
                 buttonProps: { "aria-label": "Insert title" },
-              },
-            ),
-            commands.group([], {
-              name: "update",
-              groupName: "update",
-              icon: <UploadIcon />,
-              buttonProps: { "aria-label": "Insert title" },
-              children: ({ close, textApi }) => {
-                return (
-                  <Box>
-                    <FileUploadSection
-                      onDrop={async (e) => {
-                        const fileUrl = await onChangeFile(e)
-                        if (!fileUrl.length) {
-                          return
-                        }
-                        textApi?.replaceSelection(`![](${[fileUrl[0]]})`)
-                      }}
-                      maxFiles={1}
-                      multiple={false}
-                      accept={{ "image/*": [".jpeg", ".png"] }}>
-                      {(inputProps) => (
-                        <FileUploadBox
-                          {...inputProps}
-                          id="thumbnail"
-                          placeholder="대표 사진을 업로드해주세요"
-                        />
-                      )}
-                    </FileUploadSection>
-                    <button
-                      type="button"
-                      onClick={close}>
-                      Close
-                    </button>
-                  </Box>
-                )
-              },
-            }),
-          ]}
-        />
-      )}></Controller>
+                children: ({ close, textApi }) => {
+                  return (
+                    <Box>
+                      <FileUploadSection
+                        onDrop={async (files) => {
+                          const { fileUrl } = await mutateAsync(files[0])
+                          textApi?.replaceSelection(`![](${[fileUrl]})`)
+                          close()
+                        }}
+                        maxFiles={1}
+                        multiple={false}
+                        accept={{ "image/*": [".jpeg", ".png"] }}>
+                        {(inputProps) => (
+                          <FileUploadBox
+                            {...inputProps}
+                            id="thumbnail"
+                            placeholder="대표 사진을 업로드해주세요"
+                          />
+                        )}
+                      </FileUploadSection>
+                      <button
+                        type="button"
+                        onClick={close}>
+                        Close
+                      </button>
+                    </Box>
+                  )
+                },
+              }),
+            ]}
+          />
+        )}
+      />
+    </>
   )
 }
 

src/pages/ProjectEditPage/components/Files/FileUploadBox.tsx

@@ -12,17 +12,16 @@ interface FileUploadBoxProps extends DropzoneInputProps {
 }
 
 const FileUploadBox = forwardRef<HTMLInputElement, FileUploadBoxProps>(
-  ({ id, placeholder, boxSize, backgroundColor, ...props }, ref) => {
+  ({ id, placeholder, ...props }, ref) => {
     return (
-      <Center
-        bgColor={backgroundColor || "grey.300"}
-        boxSize={boxSize}>
+      <>
         <FormLabel htmlFor={id}>
           <Center
             flexDir="column"
-            cursor="pointer">
+            justifyContent="center"
+            alignItems="center">
             <IoCameraOutline size="3rem" />
-            <Text>{placeholder}</Text>
+            <Text textAlign="center">{placeholder}</Text>
           </Center>
         </FormLabel>
         <input
@@ -31,7 +30,7 @@ const FileUploadBox = forwardRef<HTMLInputElement, FileUploadBoxProps>(
           ref={ref}
           {...props}
         />
-      </Center>
+      </>
     )
   },
 )

src/pages/ProjectEditPage/components/Files/FileUploadSection.tsx

@@ -9,6 +9,7 @@ import { Box } from "@chakra-ui/react"
 
 interface FileUploadAreaProps extends DropzoneOptions {
   children: (props: DropzoneInputProps) => ReactNode
+  size?: string | number
 }
 
 const FileUploadSection = ({
@@ -24,6 +25,7 @@ const FileUploadSection = ({
   })
   return (
     <Box
+      width="100%"
       {...getRootProps()}
       aria-label="File-Upload">
       {children(getInputProps())}