Refactor/#150/project form

src/components/Search/components/SearchBar.tsx

@@ -3,7 +3,7 @@ import { ChangeEventHandler } from "react"
 import { Input, InputProps } from "@chakra-ui/react"
 
 interface SearchBarProps extends Omit<InputProps, "onChange" | "onInput"> {
-  value: string
+  value?: string
   onChange: ChangeEventHandler<HTMLInputElement>
 }
 

src/components/Search/components/SearchResult.tsx

@@ -22,6 +22,7 @@ const SearchResult = ({
       overflow="hidden"
       zIndex="dropdown"
       flexDir="column"
+      cursor="pointer"
       {...props}>
       {children}
     </Flex>

src/components/Search/hooks/useInput.ts

@@ -1,12 +1,14 @@
-import { ChangeEventHandler, useCallback, useState } from "react"
+import { ChangeEventHandler, useState } from "react"
 
-export const useInput = (initialValue = "") => {
+import { useDebounce } from "@hooks/useDebounce"
+
+export const useInput = (initialValue = "", timer = 500) => {
   const [inputValue, setInputValue] = useState(initialValue)
 
-  const onInput: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+  const onInput: ChangeEventHandler<HTMLInputElement> = useDebounce((e) => {
     const inputValue = e.target.value.trim()
     setInputValue(inputValue)
-  }, [])
+  }, timer)
 
   return [inputValue, onInput] as const
 }

src/components/Tag/components/CloseButtonTag.tsx

@@ -4,7 +4,8 @@ import { MdCancel } from "react-icons/md"
 import { CommonTagProps } from "../types/commonTagProps"
 import CommonTag from "./CommonTag"
 
-interface CloseButtonTagProps extends Omit<CommonTagProps, "rightElement"> {
+interface CloseButtonTagProps
+  extends Omit<CommonTagProps, "rightElement" | "onClick"> {
   onClickCloseButton: MouseEventHandler
 }
 
@@ -17,6 +18,9 @@ const CloseButtonTag = ({
   return (
     <CommonTag
       leftElement={leftElement}
+      onClick={(e) => {
+        e.preventDefault()
+      }}
       label={label}
       rightElement={
         <MdCancel

src/constants/regExp.ts

@@ -0,0 +1,2 @@
+export const URL_REGEX =
+  /^(https?):\/\/([^:/\s]+)(:([^/]*))?((\/[^\s/]+)*)?\/?([^#\s?]*)(\?([^#\s]*))?(#(\w*))?$/

src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef } from "react"
+
+export const useDebounce = <T extends any[]>(
+  callback: (...params: T) => void,
+  time: number,
+) => {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  return (...params: T) => {
+    if (timer.current) clearTimeout(timer.current)
+
+    timer.current = setTimeout(() => {
+      callback(...params)
+      timer.current = null
+    }, time)
+  }
+}

src/pages/ProfileEditPage/hooks/useExample.ts

@@ -17,25 +17,25 @@ export const useExample = () => {
   })
 
   const appendNewFields = () => {
-    append({ category: "", stacks: [] })
+    append({ category: "", data: [] })
   }
 
   const setCategory = (index: number, value: string) => {
     setValue(`techStacks.${index}.category`, value)
   }
 
   const appendStack = (index: number, element: Skill) => {
-    const stacks = getValues(`techStacks.${index}.stacks`)
-    setValue(`techStacks.${index}.stacks`, [...stacks, element])
+    const stacks = getValues(`techStacks.${index}.data`)
+    setValue(`techStacks.${index}.data`, [...stacks, element])
   }
 
   const removeStack = (index: number, element: Skill) => {
-    const stacks = getValues(`techStacks.${index}.stacks`)
+    const stacks = getValues(`techStacks.${index}.data`)
     const filtered = stacks.filter((stack) => stack.id !== element.id)
-    setValue(`techStacks.${index}.stacks`, [...filtered])
+    setValue(`techStacks.${index}.data`, [...filtered])
   }
 
-  const selectedStacks = (index: number) => watch(`techStacks.${index}.stacks`)
+  const selectedStacks = (index: number) => watch(`techStacks.${index}.data`)
 
   return {
     fields,

src/pages/ProjectEditPage/components/MemberFields/MemberFields.tsx

@@ -1,10 +1,11 @@
-import { IoCloseCircle } from "react-icons/io5"
+import { Box, Button, Flex, Input } from "@chakra-ui/react"
 
-import { Button, Flex, Input } from "@chakra-ui/react"
+import { ErrorMessage } from "@components/ErrorMessage/ErrorMessage"
 
-import AvatarCard from "@components/AvatarCard/AvatarCard"
-
-import FieldContainer from "../FieldContainer"
+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"
 import { useMemberFieldsMethods } from "./hooks/useMemberFieldsMethods"
 
@@ -17,47 +18,76 @@ const MemberFields = () => {
     appendMembers,
     removeMembers,
     getSelectedMembers,
+    errors,
+    trigger,
   } = useMemberFieldsMethods()
 
   return (
     <Flex
       flexDir="column"
-      gap="10px">
+      gap="8px">
       {fields.map((field, idx) => {
         const selectedMembers = getSelectedMembers(idx)
+        register(`members.${idx}.data` as const, {
+          validate: (data) =>
+            data.length !== 0 || "팀원을 한명 이상 선택해주세요",
+        })
+
         return (
           <FieldContainer key={field.id}>
-            <IoCloseCircle
-              size="20"
-              onClick={() => deleteFields(idx)}
-            />
-            <Input
-              placeholder="카테고리를 입력해주세요"
-              width="20rem"
-              {...register(`members.${idx}.category`, { required: "true" })}
-            />
-            <UserSearchBox
-              onClick={({ id, nickname, profileImageUrl }) => {
-                appendMembers({ id, nickname, profileImageUrl }, idx)
-              }}
-              selectedMembers={getSelectedMembers(idx)}
-            />
-            {selectedMembers?.map((member, idx) => {
-              return (
-                <AvatarCard key={idx}>
-                  <IoCloseCircle
-                    size="20"
-                    onClick={() => removeMembers(member, idx)}
+            <Box>
+              <Input
+                placeholder="카테고리를 입력해주세요"
+                width="20rem"
+                {...register(`members.${idx}.category` as const, {
+                  required: "분야 입력은 필수입니다",
+                })}
+              />
+              <ErrorMessage
+                name={`members.${idx}.category` as const}
+                errors={errors}
+                render={({ message }) => <ErrorText message={message} />}
+              />
+            </Box>
+
+            <Box>
+              <ErrorMessage
+                name={`members.${idx}.data`}
+                errors={errors}
+                render={({ message }) => <ErrorText message={message} />}
+              />
+              <UserSearchBox
+                onClick={({ id, nickname, profileImageUrl }) => {
+                  appendMembers({ id, nickname, profileImageUrl }, idx)
+                  trigger(`members.${idx}.data` as const)
+                }}
+                selectedMembers={getSelectedMembers(idx)}
+              />
+            </Box>
+            <Box>
+              {selectedMembers?.map((member, idx) => {
+                return (
+                  <MemberAvatarCard
+                    key={idx}
+                    image={member.profileImageUrl || ""}
+                    text={member.nickname}
+                    onClick={() => {
+                      removeMembers(member, idx)
+                    }}
                   />
-                  <AvatarCard.Image src={member.profileImageUrl || ""} />
-                  <AvatarCard.Header text={member.nickname} />
-                </AvatarCard>
-              )
-            })}
+                )
+              })}
+            </Box>
+            {idx >= 1 && <CloseButton onClick={() => deleteFields(idx)} />}
           </FieldContainer>
         )
       })}
-      <Button onClick={appendNewFields}>팀원 추가하기</Button>
+      <Button
+        border="2px solid"
+        borderColor="blue.200"
+        onClick={appendNewFields}>
+        팀원 추가
+      </Button>
     </Flex>
   )
 }

src/pages/ProjectEditPage/components/MemberFields/components/MemberAvatarCard.tsx

@@ -0,0 +1,27 @@
+import { IoCloseCircle } from "react-icons/io5"
+
+import AvatarCard from "@components/AvatarCard/AvatarCard"
+
+const MemberAvatarCard = ({
+  image,
+  text,
+  onClick,
+}: {
+  image: string
+  text: string
+  onClick: () => void
+}) => {
+  return (
+    <AvatarCard>
+      <IoCloseCircle
+        size="20"
+        onClick={onClick}
+        cursor="pointer"
+      />
+      <AvatarCard.Image src={image || ""} />
+      <AvatarCard.Header text={text} />
+    </AvatarCard>
+  )
+}
+
+export default MemberAvatarCard

src/pages/ProjectEditPage/components/MemberFields/components/UserSearchBox.tsx

@@ -1,6 +1,14 @@
 import { Suspense } from "react"
 
-import { Box, BoxProps, Center, Spinner } from "@chakra-ui/react"
+import {
+  Avatar,
+  Box,
+  BoxProps,
+  Center,
+  Flex,
+  Spinner,
+  Text,
+} from "@chakra-ui/react"
 import { UserSummary } from "api-models"
 import { useOutsideClick } from "src/components/Search/hooks/useOutsideClick"
 
@@ -9,6 +17,7 @@ import { useInput } from "@components/Search/hooks/useInput"
 
 import { filterSelectedId } from "@pages/ProjectEditPage/utils/filterSelectedId"
 
+import SearchResultContainer from "../../styles/SearchResultContainer"
 import UserListFetcher from "./UserListFetcher"
 
 interface UserSearchBoxProps extends Omit<BoxProps, "onClick" | "ref"> {
@@ -43,10 +52,9 @@ const UserSearchBox = ({
       width="20rem"
       {...props}>
       <SearchBox.Input
-        value={inputValue}
         onChange={onInput}
         placeholder="닉네임을 검색해보세요"
-        variant="flushed"
+        variant="outline"
       />
       <Suspense
         fallback={
@@ -58,21 +66,33 @@ const UserSearchBox = ({
           value={inputValue}
           render={(data) => (
             <SearchBox.Result isFocused={isFocused}>
-              {filterSelectedId(data, selectedMembers)?.map(
-                ({ id, nickname, profileImageUrl }) => (
-                  <Box
-                    key={id}
-                    fontWeight={700}
-                    onClick={() => onClick({ id, nickname, profileImageUrl })}>
-                    #{nickname}
+              <SearchResultContainer>
+                {inputValue && (
+                  <Box onClick={() => handleClickNonUser(inputValue)}>
+                    {inputValue} 추가하기
                   </Box>
-                ),
-              )}
-              {inputValue && (
-                <Box onClick={() => handleClickNonUser(inputValue)}>
-                  {inputValue} 추가하기
-                </Box>
-              )}
+                )}
+                {filterSelectedId(data, selectedMembers)?.map(
+                  ({ id, nickname, profileImageUrl }, idx) => (
+                    <Flex
+                      key={idx}
+                      border="none"
+                      padding="5px"
+                      gap="10px"
+                      onClick={() =>
+                        onClick({ id, nickname, profileImageUrl })
+                      }>
+                      <Avatar
+                        src={profileImageUrl || ""}
+                        boxSize="10"
+                        borderRadius="full"
+                        objectFit="cover"
+                      />
+                      <Text>{nickname}</Text>
+                    </Flex>
+                  ),
+                )}
+              </SearchResultContainer>
             </SearchBox.Result>
           )}
         />