[Refactoring ⚙️] 유효성 적용 변경 및 스타일 일부적용

side-peek · Mar 20, 2024 · ac5495c · ac5495c
1 parent 5b0509b
commit ac5495c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 45 deletions.
diff --git a/src/pages/ProjectEditPage/components/MemberFields/MemberFields.tsx b/src/pages/ProjectEditPage/components/MemberFields/MemberFields.tsx
@@ -1,8 +1,9 @@
-import { Box, Button, Input, Text } from "@chakra-ui/react"
+import { Box, Button, Flex, Input } from "@chakra-ui/react"
 
 import { ErrorMessage } from "@components/ErrorMessage/ErrorMessage"
 
 import CloseButton from "../styles/CloseButton"
+import ErrorText from "../styles/ErrorText"
 import FieldContainer from "../styles/FieldContainer"
 import MemberAvatarCard from "./components/MemberAvatarCard"
 import UserSearchBox from "./components/UserSearchBox"
@@ -22,16 +23,14 @@ const MemberFields = () => {
   } = useMemberFieldsMethods()
 
   return (
-    <>
+    <Flex
+      flexDir="column"
+      gap="8px">
       {fields.map((field, idx) => {
         const selectedMembers = getSelectedMembers(idx)
-        register(`members.${idx}.data`, {
-          validate: {
-            isEmpty: (data) => {
-              console.log(data.length)
-              return data.length !== 0
-            },
-          },
+        register(`members.${idx}.data` as const, {
+          validate: (data) =>
+            data.length !== 0 || "팀원을 한명 이상 선택해주세요",
         })
 
         return (
@@ -40,43 +39,27 @@ const MemberFields = () => {
               <Input
                 placeholder="카테고리를 입력해주세요"
                 width="20rem"
-                {...register(`members.${idx}.category`, {
+                {...register(`members.${idx}.category` as const, {
                   required: "분야 입력은 필수입니다",
                 })}
               />
               <ErrorMessage
-                name={`members.${idx}.category`}
+                name={`members.${idx}.category` as const}
                 errors={errors}
-                render={({ message }) => {
-                  return (
-                    <Text
-                      as="b"
-                      color="red.200">
-                      {message}
-                    </Text>
-                  )
-                }}
+                render={({ message }) => <ErrorText message={message} />}
               />
             </Box>
 
             <Box>
               <ErrorMessage
                 name={`members.${idx}.data`}
                 errors={errors}
-                render={({ message }) => {
-                  return (
-                    <Text
-                      as="b"
-                      color="red.200">
-                      {message}
-                    </Text>
-                  )
-                }}
+                render={({ message }) => <ErrorText message={message} />}
               />
               <UserSearchBox
                 onClick={({ id, nickname, profileImageUrl }) => {
                   appendMembers({ id, nickname, profileImageUrl }, idx)
-                  trigger(`members.${idx}.data`)
+                  trigger(`members.${idx}.data` as const)
                 }}
                 selectedMembers={getSelectedMembers(idx)}
               />
@@ -99,8 +82,13 @@ const MemberFields = () => {
           </FieldContainer>
         )
       })}
-      <Button onClick={appendNewFields}>팀원 추가하기</Button>
-    </>
+      <Button
+        border="2px solid"
+        borderColor="blue.200"
+        onClick={appendNewFields}>
+        팀원 추가
+      </Button>
+    </Flex>
   )
 }
 

diff --git a/src/pages/ProjectEditPage/components/ProjectInputBox.tsx b/src/pages/ProjectEditPage/components/ProjectInputBox.tsx
@@ -3,8 +3,11 @@ import { useFormContext } from "react-hook-form"
 
 import { BoxProps, Flex, InputElementProps, Text } from "@chakra-ui/react"
 
+import { ErrorMessage } from "@components/ErrorMessage/ErrorMessage"
+
 import { projectInputRegister } from "../constants/registerOptions"
 import { ProjectFormValues } from "../types/ProjectFormValues"
+import ErrorText from "./styles/ErrorText"
 
 interface TextInputProps extends BoxProps {
   name: keyof ProjectFormValues
@@ -30,8 +33,11 @@ const ProjectInputBox = ({ name, label, footer, children }: TextInputProps) => {
           {label}
         </Text>
       </label>
-      {errors[name] && <Text>{errors[name]?.message}</Text>}
-
+      <ErrorMessage
+        name={name}
+        errors={errors}
+        render={({ message }) => <ErrorText message={message} />}
+      />
       {isValidElement(children) &&
         cloneElement(children as ReactElement<InputElementProps>, {
           id: name,

diff --git a/src/pages/ProjectEditPage/components/TechStacksFields/TechStackFields.tsx b/src/pages/ProjectEditPage/components/TechStacksFields/TechStackFields.tsx
@@ -39,24 +39,19 @@ const TechStacksFields = () => {
       gap="8px">
       {fields.map((field, index) => {
         register(`techStacks.${index}.data`, {
-          validate: {
-            isEmpty: (data) => {
-              return data.length !== 0
-            },
-          },
+          validate: (data) => data.length !== 0 || "하나 이상 선택해주세요",
         })
-
         return (
           <FieldContainer key={field.id}>
             <Box>
               <Input
                 placeholder="기술스택 분야를 입력해주세요"
                 {...register(`techStacks.${index}.category`, {
-                  required: "분야를 입력해주세요",
+                  required: "분야 입력은 필수입니다",
                 })}
               />
               <ErrorMessage
-                name={`techStacks[${index}].category`}
+                name={`techStacks[${index}].category` as const}
                 errors={errors}
                 render={({ message }) => {
                   return (
@@ -72,7 +67,7 @@ const TechStacksFields = () => {
 
             <Box>
               <ErrorMessage
-                name={`techStacks.${index}.data`}
+                name={`techStacks.${index}.data` as const}
                 errors={errors}
                 render={({ message }) => {
                   return (
@@ -84,7 +79,6 @@ const TechStacksFields = () => {
                   )
                 }}
               />
-
               <StackSearchBox
                 render={({ techStacks }) => {
                   return (
@@ -140,7 +134,12 @@ const TechStacksFields = () => {
           </FieldContainer>
         )
       })}
-      <Button onClick={appendNewFields}>기술스택 추가</Button>
+      <Button
+        border="2px solid"
+        borderColor="blue.200"
+        onClick={appendNewFields}>
+        기술스택 추가
+      </Button>
     </Flex>
   )
 }