Merge pull request #59 from side-peek/feature/#47/projectForm

[Feature/#47/project form] 프로젝트 작성 form Text 관련 Input 부분 구현

src/pages/ProjectEditPage/components/ProjectEditForm.tsx

@@ -0,0 +1,72 @@
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form"
+
+import { Box, Button, Input, Textarea } from "@chakra-ui/react"
+
+import { ProjectFormDefaultValues } from "../constants/defaultValues"
+import { ProjectFormValues } from "../types/ProjectFormValues"
+import InputBox from "./ProjectInputBox"
+
+const ProjectEditForm = () => {
+  const methods = useForm<ProjectFormValues>({
+    defaultValues: ProjectFormDefaultValues,
+  })
+
+  const submitEventHandler: SubmitHandler<ProjectFormValues> = (data) => {
+    console.log(data)
+  }
+
+  return (
+    <Box>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(submitEventHandler)}>
+          <InputBox
+            name="thumbnailUrl"
+            label="사진">
+            <input
+              type="file"
+              accept="image/*"
+            />
+          </InputBox>
+
+          <InputBox
+            name="name"
+            label="제목"
+            footer="제목은 필수입니다">
+            <Input />
+          </InputBox>
+
+          <InputBox
+            name="subName"
+            label="소제목">
+            <Input />
+          </InputBox>
+
+          <InputBox
+            name="overview"
+            label="요약">
+            <Textarea
+              resize="none"
+              height="10rem"
+            />
+          </InputBox>
+
+          <InputBox
+            name="githubUrl"
+            label="Github URL">
+            <Input />
+          </InputBox>
+
+          <InputBox
+            name="deployUrl"
+            label="배포 URL">
+            <Input />
+          </InputBox>
+
+          <Button type="submit" />
+        </form>
+      </FormProvider>
+    </Box>
+  )
+}
+
+export default ProjectEditForm

src/pages/ProjectEditPage/components/ProjectInputBox.tsx

@@ -0,0 +1,50 @@
+import { ReactElement, cloneElement, isValidElement } from "react"
+import { useFormContext } from "react-hook-form"
+
+import { Box, BoxProps, InputElementProps, Text } from "@chakra-ui/react"
+
+import { projectInputRegisters } from "../constants/registerOptions"
+import { ProjectFormValues } from "../types/ProjectFormValues"
+
+interface TextInputProps extends BoxProps {
+  name: keyof ProjectFormValues
+  label: string
+  footer?: string
+  children?: ReactElement
+}
+
+const ProjectInputBox = ({ name, label, footer, children }: TextInputProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<ProjectFormValues>()
+
+  return (
+    <Box>
+      <label htmlFor={name}>
+        <Text
+          fontSize="md"
+          as="b">
+          {label}
+        </Text>
+      </label>
+      {errors[name] && <Text>{errors[name]?.message}</Text>}
+
+      {isValidElement(children) &&
+        cloneElement(children as ReactElement<InputElementProps>, {
+          id: name,
+          ...register(name, projectInputRegisters[name]),
+        })}
+
+      {footer && (
+        <Text
+          fontSize="sm"
+          color="grey">
+          {footer}
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+export default ProjectInputBox

src/pages/ProjectEditPage/constants/defaultValues.ts

@@ -0,0 +1,12 @@
+import { ProjectFormValues } from "../types/ProjectFormValues"
+
+export const ProjectFormDefaultValues: ProjectFormValues = {
+  name: "",
+  subName: "",
+  overview: "",
+  thumbnailUrl: "",
+  githubUrl: "",
+  deployUrl: "",
+  startDate: "",
+  endDate: "",
+}

src/pages/ProjectEditPage/constants/registerOptions.ts

@@ -0,0 +1,27 @@
+import { RegisterOptions } from "react-hook-form"
+
+import { ProjectFormValues } from "../types/ProjectFormValues"
+
+const TITLE_MAX_LENGTH = 50
+const OVERVIEW_MAX_LENGTH = 300
+
+export const projectInputRegisters = {
+  name: {
+    required: `제목은 필수입니다.${TITLE_MAX_LENGTH} 이내로 입력해주세요.`,
+    maxLength: TITLE_MAX_LENGTH,
+  },
+
+  subName: {},
+
+  overview: { maxLength: OVERVIEW_MAX_LENGTH },
+
+  githubUrl: { required: "Github URL은 필수입니다" },
+
+  deployUrl: {},
+
+  thumbnailUrl: {},
+
+  startDate: { required: "프로젝트 시작 날짜를 입력해주세요" },
+
+  endDate: { required: "프로젝트 완성 날짜를 입력해주세요" },
+} satisfies Record<keyof ProjectFormValues, RegisterOptions>

src/pages/ProjectEditPage/types/ProjectFormValues.ts

@@ -0,0 +1,11 @@
+//TODO : 내용 추가해서 최종적으로는 Project 타입을 상속받는 방향으로 수정
+export type ProjectFormValues = {
+  name: string
+  subName: string
+  overview: string
+  thumbnailUrl: string
+  githubUrl: string
+  deployUrl: string
+  startDate: string //2002-02
+  endDate: string //동일
+}