Merge pull request #122 from side-peek/feature/#47/team

[Feature/#47/team] 팀원 검색 컴포넌트

package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.0",

src/apis/user/getUserListByNickname.ts

@@ -0,0 +1,10 @@
+import { getUserListResponseType } from "api-models"
+
+import { baseInstance } from "../axiosInstance"
+
+export const getUserListByNickname = async (keyword: string) => {
+  const { data } = await baseInstance.get<getUserListResponseType>(
+    `/api/v1/users/nickname?keyword=${keyword}`,
+  )
+  return data
+}

src/components/Search/SearchMain.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode, forwardRef } from "react"
 
 import { Box, BoxProps } from "@chakra-ui/react"
 
@@ -9,16 +9,21 @@ interface SearchLayoutProps extends BoxProps {
   children: ReactNode
 }
 
-const SearchMain = ({ children, ...props }: SearchLayoutProps) => {
-  return (
-    <Box
-      borderRadius="0.5rem"
-      backgroundColor="white"
-      {...props}>
-      {children}
-    </Box>
-  )
-}
+const SearchMain = forwardRef(
+  ({ children, ...props }: SearchLayoutProps, ref) => {
+    return (
+      <Box
+        ref={ref}
+        borderRadius="0.5rem"
+        backgroundColor="white"
+        {...props}>
+        {children}
+      </Box>
+    )
+  },
+)
+
+SearchMain.displayName = "SearchMain"
 
 const SearchBox = Object.assign(SearchMain, {
   Input: SearchBar,

src/components/Search/components/SearchResult.tsx

@@ -3,10 +3,19 @@ import { ReactNode } from "react"
 import { Flex, FlexProps } from "@chakra-ui/react"
 
 interface SearchResultProps extends FlexProps {
+  isFocused?: boolean
   children?: ReactNode
 }
 
-const SearchResult = ({ children, ...props }: SearchResultProps) => {
+const SearchResult = ({
+  isFocused = true,
+  children,
+  ...props
+}: SearchResultProps) => {
+  if (!isFocused) {
+    return null
+  }
+
   return (
     <Flex
       position="relative"

src/pages/ProjectEditPage/ProjectEditPage.tsx

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

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

@@ -0,0 +1,41 @@
+import { forwardRef } from "react"
+import { DropzoneInputProps } from "react-dropzone"
+import { IoCameraOutline } from "react-icons/io5"
+
+import { Center, FormLabel, Text } from "@chakra-ui/react"
+
+interface FileUploadBoxProps extends DropzoneInputProps {
+  id: string
+  placeholder: string
+  boxSize?: string | number
+  backgroundColor?: string
+}
+
+const FileUploadBox = forwardRef<HTMLInputElement, FileUploadBoxProps>(
+  ({ id, placeholder, boxSize, backgroundColor, ...props }, ref) => {
+    return (
+      <Center
+        bgColor={backgroundColor || "grey.300"}
+        boxSize={boxSize}>
+        <FormLabel htmlFor={id}>
+          <Center
+            flexDir="column"
+            cursor="pointer">
+            <IoCameraOutline size="3rem" />
+            <Text>{placeholder}</Text>
+          </Center>
+        </FormLabel>
+        <input
+          type="file"
+          id={id}
+          ref={ref}
+          {...props}
+        />
+      </Center>
+    )
+  },
+)
+
+FileUploadBox.displayName = "FileUploadBox"
+
+export default FileUploadBox

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

@@ -0,0 +1,34 @@
+import { ReactNode } from "react"
+import {
+  DropzoneInputProps,
+  DropzoneOptions,
+  useDropzone,
+} from "react-dropzone"
+
+import { Box } from "@chakra-ui/react"
+
+interface FileUploadAreaProps extends DropzoneOptions {
+  children: (props: DropzoneInputProps) => ReactNode
+}
+
+const FileUploadSection = ({
+  onDrop,
+  accept,
+  children,
+  ...props
+}: FileUploadAreaProps) => {
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept,
+    ...props,
+  })
+  return (
+    <Box
+      {...getRootProps()}
+      aria-label="File-Upload">
+      {children(getInputProps())}
+    </Box>
+  )
+}
+
+export default FileUploadSection

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

@@ -0,0 +1,52 @@
+import FileUploadBox from "@pages/ProjectEditPage/components/Files/FileUploadBox"
+import { useFileUpload } from "@pages/ProjectEditPage/hooks/useFileUpload"
+import { useProjectFormContext } from "@pages/ProjectEditPage/hooks/useProjectFormContext"
+
+import FileUploadSection from "./FileUploadSection"
+
+const Overview = () => {
+  const MAX_FILE_UPLOAD = 6
+  const { getValues, setValue, watch } = useProjectFormContext()
+  const { onChangeFile } = useFileUpload()
+
+  console.log(watch("overviewImageUrl"))
+
+  const onDropFile = async (files: File[]) => {
+    const prevImageUrls = getValues("overviewImageUrl")
+    if (
+      prevImageUrls &&
+      prevImageUrls.length + files.length > Number(`${MAX_FILE_UPLOAD}`)
+    ) {
+      alert("최대 6개까지 업로드 가능합니다")
+      return
+    }
+    const fileUrls = await onChangeFile(files)
+    if (!fileUrls.length) {
+      return
+    }
+    setValue("overviewImageUrl", [...prevImageUrls, ...fileUrls])
+  }
+
+  return (
+    <>
+      <FileUploadSection
+        onDrop={onDropFile}
+        maxFiles={6}
+        disabled={
+          getValues("overviewImageUrl").length >= Number(`${MAX_FILE_UPLOAD}`)
+        }
+        multiple={true}
+        accept={{ "image/*": [".jpeg", ".png"] }}>
+        {(inputProps) => (
+          <FileUploadBox
+            {...inputProps}
+            id="overviewImageUrl"
+            placeholder="최대 6개까지 업로드 가능합니다"
+          />
+        )}
+      </FileUploadSection>
+    </>
+  )
+}
+
+export default Overview

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

@@ -0,0 +1,45 @@
+import { Box, Img } from "@chakra-ui/react"
+
+import FileUploadBox from "@pages/ProjectEditPage/components/Files/FileUploadBox"
+import { useFileUpload } from "@pages/ProjectEditPage/hooks/useFileUpload"
+import { useProjectFormContext } from "@pages/ProjectEditPage/hooks/useProjectFormContext"
+
+import FileUploadSection from "./FileUploadSection"
+
+const Thumbnail = () => {
+  const { getValues, setValue, watch } = useProjectFormContext()
+  const { onChangeFile } = useFileUpload()
+
+  const onDropFile = async (file: File[]) => {
+    const fileUrls = await onChangeFile(file)
+    if (!fileUrls.length) {
+      return
+    }
+    setValue("thumbnailUrl", fileUrls[0])
+  }
+
+  console.log(watch("thumbnailUrl"))
+
+  return (
+    <>
+      <FileUploadSection
+        onDrop={onDropFile}
+        maxFiles={1}
+        multiple={false}
+        accept={{ "image/*": [".jpeg", ".png"] }}>
+        {(inputProps) => (
+          <FileUploadBox
+            {...inputProps}
+            id="thumbnail"
+            placeholder="대표 사진을 업로드해주세요"
+          />
+        )}
+      </FileUploadSection>
+      <Box>
+        <Img src={getValues("thumbnailUrl")} />
+      </Box>
+    </>
+  )
+}
+
+export default Thumbnail