Merge pull request #283 from Team-TenTen/feature/#282/image-compression

이미지 용량 최적화

package.json

@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.0.18",
     "@tanstack/react-query": "^5.8.4",
     "@types/js-cookie": "^3.0.6",
+    "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",

src/components/Space/SpaceForm.tsx

@@ -10,6 +10,7 @@ import {
   fetchSettingSpace,
 } from '@/services/space/space'
 import { CreateSpaceReqBody, SpaceDetailResBody } from '@/types'
+import imageCompression from 'browser-image-compression'
 import Image from 'next/image'
 import { usePathname, useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
@@ -35,7 +36,6 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
   const spaceId = Number(path.split('/')[2])
   const router = useRouter()
   const getSpace = useGetSpace()
-
   const {
     register,
     getValues,
@@ -58,15 +58,18 @@ const SpaceForm = ({ spaceType, space }: SpaceFormProps) => {
     setThumnail(space?.spaceImagePath)
   }, [space])
 
-  const handleFileChange = (e?: ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e?: ChangeEvent<HTMLInputElement>) => {
     e?.preventDefault()
     if (e?.target.files) {
       const blob = new Blob([e.target.files[0]], {
         type: e.target.files[0].type,
       })
       const thumbNailImage = URL.createObjectURL(blob)
       setThumnail(thumbNailImage)
-      setImageFile(e?.target.files[0])
+      const resizingBlob = await imageCompression(e?.target.files[0], {
+        maxSizeMB: 0.5,
+      })
+      setImageFile(resizingBlob)
     }
   }
 

src/components/UserInfoForm/UserInfoForm.tsx

@@ -8,6 +8,7 @@ import { fetchPostUserProfile } from '@/services/user/profile/profile'
 import { UserProfileResBody } from '@/types'
 import { cls } from '@/utils'
 import { CheckIcon } from '@heroicons/react/24/solid'
+import imageCompression from 'browser-image-compression'
 import Cookies from 'js-cookie'
 import { useRouter } from 'next/navigation'
 import Button from '../common/Button/Button'
@@ -67,7 +68,7 @@ const UserInfoForm = ({ userData, formType }: UserInfoFormProps) => {
     },
   })
 
-  const handleFileChange = (e?: ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (e?: ChangeEvent<HTMLInputElement>) => {
     e?.preventDefault()
 
     if (e?.target.files) {
@@ -77,7 +78,10 @@ const UserInfoForm = ({ userData, formType }: UserInfoFormProps) => {
 
       const thumbNailImage = URL.createObjectURL(blob)
       setThumnail(thumbNailImage)
-      setImageFile(e.target.files[0])
+      const resizingBlob = await imageCompression(e?.target.files[0], {
+        maxSizeMB: 0.5,
+      })
+      setImageFile(resizingBlob)
     }
   }
 

src/components/common/SearchModal/SearchModal.tsx

@@ -57,7 +57,7 @@ const SearchModal = ({ onClose }: SearchModalProps) => {
           </div>
           <div className="grow">
             <Input
-              {...register('search', { required: true })}
+              {...register('search')}
               placeholder="검색어를 입력하세요."
               inputButton={true}
               buttonText="검색"

src/components/common/SearchModal/hooks/useSearchModal.ts

@@ -6,6 +6,7 @@ import {
 } from 'react-hook-form'
 import { mock_trendData } from '@/data'
 import { useRouter } from 'next/navigation'
+import { notify } from '../../Toast/Toast'
 import { SearchFormValues } from '../SearchModal'
 
 export interface useSearchModalProps {
@@ -43,6 +44,11 @@ const useSearchModal = ({
   }
 
   const onSubmit: SubmitHandler<SearchFormValues> = (data) => {
+    if (data.search.length === 1) {
+      notify('info', '검색어는 최소 2글자여야 합니다.')
+      return
+    }
+
     router.push(`/search?target=${data.target}&keyword=${data.search}`)
   }
 

src/hooks/useProfileSpacesSearch.ts

@@ -1,5 +1,6 @@
 import { SubmitHandler, UseFormSetValue } from 'react-hook-form'
 import { SearchFormValue } from '@/app/(routes)/user/[userId]/space/page'
+import { notify } from '@/components/common/Toast/Toast'
 import { useRouter } from 'next/navigation'
 
 export interface UseSpaceSearchProps {
@@ -18,6 +19,10 @@ const useProfileSpacesSearch = ({
     type === 'space' ? `/user/${userId}/space?` : `/user/${userId}/favorite?`
 
   const onSubmit: SubmitHandler<SearchFormValue> = (data) => {
+    if (data.keyword.length === 1) {
+      notify('info', '검색어는 최소 2글자여야 합니다.')
+      return
+    }
     if (category) {
       router.push(`${basePath}category=${category}&keyword=${data.keyword}`)
     } else {