Merge pull request #122 from YIMSEBIN/Weekly

Fix: 회사등록 multipart/form-data로 변경 및 API 연결
kakao-tech-campus-2nd-step3 · Nov 8, 2024 · 231aba5 · 231aba5
2 parents f946f72 + f06dc94
commit 231aba5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/apis/registerCompany/hooks/useRegisterCompany.ts b/src/apis/registerCompany/hooks/useRegisterCompany.ts
@@ -7,13 +7,18 @@ export type CompanyRequestData = {
   industryOccupation?: string;
   brand?: string;
   revenuePerYear?: number;
-  logoImage?: string;
+  logoImage?: File;
 };
 
 export const getPostCompanyPath = () => `${APIPath.registerCompany}`;
 
-export const postCompany = async (req: CompanyRequestData) => {
-  const response = await clientInstance.post(getPostCompanyPath(), req);
+export const postCompany = async (req: FormData) => {
+  const response = await clientInstance.post(getPostCompanyPath(), req, {
+    headers: {
+      Accept: 'multipart/form-data',
+      'Content-Type': 'multipart/form-data',
+    },
+  });
   return response.data;
 };
 

diff --git a/src/pages/registerCompany/RegisterCompany.tsx b/src/pages/registerCompany/RegisterCompany.tsx
@@ -1,4 +1,4 @@
-import { usePostCompany } from '@/apis/registerCompany/hooks/useRegisterCompany';
+import { CompanyRequestData, usePostCompany } from '@/apis/registerCompany/hooks/useRegisterCompany';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
@@ -12,16 +12,17 @@ const default_inputs = {
   industryOccupation: '',
   brand: '',
   revenuePerYear: 0,
-  logoImage: '',
+  logoImage: undefined as File | undefined,
 };
 
 export default function RegisterCompany() {
   const { t } = useTranslation();
   const mutation = usePostCompany();
   const navigate = useNavigate();
-  const [inputs, setInputs] = useState({ ...default_inputs });
+  const [inputs, setInputs] = useState<CompanyRequestData>({ ...default_inputs });
+  const [file, setFile] = useState<File | null>(null);
 
-  const { name, industryOccupation, brand, revenuePerYear, logoImage } = inputs;
+  const { name, industryOccupation, brand, revenuePerYear } = inputs;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value, name } = e.target;
@@ -31,8 +32,29 @@ export default function RegisterCompany() {
     });
   };
 
+  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newfile = e.target.files?.[0];
+    if (newfile) {
+      setFile(newfile);
+    }
+  };
+
   const handlePostCompany = () => {
-    mutation.mutate(inputs, {
+    const formData = new FormData();
+
+    const companyRequest = {
+      name: inputs.name,
+      industryOccupation: inputs.industryOccupation,
+      brand: inputs.brand,
+      revenuePerYear: inputs.revenuePerYear,
+    };
+
+    formData.append('companyRequest', JSON.stringify(companyRequest));
+
+    if (file) {
+      formData.append('logoImage', file);
+    }
+    mutation.mutate(formData, {
       onSuccess: () => {
         navigate(ROUTE_PATH.HOME);
       },
@@ -41,6 +63,7 @@ export default function RegisterCompany() {
       },
     });
   };
+
   return (
     <Layout>
       <section>
@@ -56,8 +79,7 @@ export default function RegisterCompany() {
                     label={t('registerCompany.LOGOIMAGE')}
                     name="logoImage"
                     type="file"
-                    value={logoImage}
-                    onChange={onChange}
+                    onChange={onFileChange}
                     // style={{ width: '570px', height: '48px' }}
                   ></Input>
                 </InputContainer>