refactor: 사전 식물 등록 신청 FormData 컨벤션을 맞춘다. (#360)

* refactor: formdata 컨벤션 통일

* design: 검색창 등록 신청 링크 위치 변경

* feat: 이미지 확장자 제한

* refactor: 사진 등록하기 버튼에서 가능한 확장자 명시

frontend/src/apis/dictionaryPlantRegistration.ts

@@ -7,7 +7,7 @@ const register = (form: DictionaryPlantRegistrationForm) => {
   const { name, image } = form;
   const formData = new FormData();
 
-  if (name) formData.append('name', name);
+  if (name) formData.append('request', JSON.stringify({ name }));
   if (image) formData.append('image', image);
 
   return fetch(DICTIONARY_PLANT_REGISTRATION_URL, {

frontend/src/components/search/SearchBox/SearchBox.style.ts

@@ -32,6 +32,8 @@ export const Input = styled.input`
 
 export const ResultMessage = styled.p`
   display: flex;
+  flex-direction: column;
+  row-gap: 5px;
   align-items: center;
   justify-content: center;
 

frontend/src/components/search/SearchBox/index.tsx

@@ -81,15 +81,15 @@ const SearchBox = (props: SearchBoxProps) => {
               ))}
             </ResultList>
             <ResultMessage>
-              찾는 식물이 없으신가요? &nbsp;&nbsp;&nbsp;
+              찾는 식물이 없으신가요?
               <StyledLink to={URL_PATH.newDictionaryPlantRequest} state={searchName}>
                 등록 신청하기
               </StyledLink>
             </ResultMessage>
           </>
         ) : (
           <ResultMessage>
-            {MESSAGE.noSearchResult} &nbsp;&nbsp;&nbsp;
+            {MESSAGE.noSearchResult}
             <StyledLink to={URL_PATH.newDictionaryPlantRequest} state={searchName}>
               등록 신청하기
             </StyledLink>

frontend/src/constants/index.ts

@@ -83,3 +83,5 @@ export const DAYS_OF_THE_WEEK = ['일', '월', '화', '수', '목', '금', '토'
 export const NO_PREVIOUS_VALUE = 'EMPTY';
 
 export const NO_INFORMATION = '정보없음';
+
+export const ALLOWED_IMAGE_EXTENSIONS = ['image/jpg', 'image/jpeg', 'image/png', 'image/heic'];

frontend/src/pages/NewDictionaryPlantRequest/Form/index.tsx

@@ -12,7 +12,7 @@ import {
 } from './Form.style';
 import useDictionaryPlantRegister from 'hooks/queries/dictionaryPlantRegistration/useDictionaryPlantRegister';
 import useAddToast from 'hooks/useAddToast';
-import { getFirstImage, getImageUrl } from 'utils/image';
+import { getFirstImage, getImageUrl, isAllowedImageExtension } from 'utils/image';
 import { NUMBER } from 'constants/index';
 
 interface FormProps {
@@ -53,6 +53,10 @@ const Form = (props: FormProps) => {
 
     const firstImage = getFirstImage(files);
     if (!firstImage) addToast('warning', '5MB 이하의 사진을 올려주세요!');
+    if (firstImage && !isAllowedImageExtension(firstImage)) {
+      addToast('warning', '지원하지 않는 확장자입니다!');
+      return;
+    }
     setImage(firstImage ? firstImage : image);
   };
 
@@ -81,7 +85,11 @@ const Form = (props: FormProps) => {
         <HiddenInput ref={fileInputRef} type="file" accept="image/*" onChange={setImageIfValid} />
         <ImageContent>
           <UploadButton type="button" aria-label="사진 등록하기" onClick={accessFileInput}>
-            {image ? <Thumbnail src={getImageUrl(image)} alt={image.name} /> : '사진 등록하기'}
+            {image ? (
+              <Thumbnail src={getImageUrl(image)} alt={image.name} />
+            ) : (
+              '사진 등록하기 (jpg, jpeg, png, heic)'
+            )}
           </UploadButton>
           <ImageName>{image ? image.name : '아직 사진을 올리지 않았어요.'}</ImageName>
         </ImageContent>

frontend/src/utils/image.ts

@@ -1,3 +1,5 @@
+import { ALLOWED_IMAGE_EXTENSIONS } from 'constants/index';
+
 export const getFirstImage = (fileList: FileList, maxByteSize: File['size'] = 5_000_000) => {
   const firstImage = Array.from(fileList).find(
     (file) => /^image/.test(file.type) && file.size <= maxByteSize
@@ -9,3 +11,6 @@ export const getImageUrl = (file: File) => {
   if (!/^image/.test(file.type)) throw new Error('file type is not image');
   return URL.createObjectURL(file);
 };
+
+export const isAllowedImageExtension = (file: File) =>
+  ALLOWED_IMAGE_EXTENSIONS.includes(file.type.toLowerCase());