[FEATURE] 배포 API 붙이기

src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx

@@ -27,26 +27,32 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label={'coreValue1_imageFileName'}
+            label={'coreValue1.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
             <StInput
-              {...register('coreValue1_value', {
+              {...register('coreValue1.value', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue1_value?.message !== undefined}
-              errorMessage={errors.coreValue1_value?.message as string}
+              isError={(errors as any).coreValue1?.value?.message !== undefined}
+              errorMessage={
+                (errors as any).coreValue1?.value?.message as string
+              }
               labelText="가치"
               placeholder="ex. 용기"
             />
             <StInput
-              {...register('coreValue1_description', {
+              {...register('coreValue1.description', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue1_description?.message !== undefined}
-              errorMessage={errors.coreValue1_description?.message as string}
+              isError={
+                (errors as any).coreValue1?.description?.message !== undefined
+              }
+              errorMessage={
+                (errors as any).coreValue1?.description?.message as string
+              }
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
@@ -60,26 +66,32 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label={'coreValue2_imageFileName'}
+            label={'coreValue2.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
             <StInput
-              {...register('coreValue2_value', {
+              {...register('coreValue2.value', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue2_value?.message !== undefined}
-              errorMessage={errors.coreValue2_value?.message as string}
+              isError={(errors as any).coreValue2?.value?.message !== undefined}
+              errorMessage={
+                (errors as any).coreValue2?.value?.message as string
+              }
               labelText="가치"
               placeholder="ex. 몰입"
             />
             <StInput
-              {...register('coreValue2_description', {
+              {...register('coreValue2.description', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue2_description?.message !== undefined}
-              errorMessage={errors.coreValue2_description?.message as string}
+              isError={
+                (errors as any).coreValue2?.description?.message !== undefined
+              }
+              errorMessage={
+                (errors as any).coreValue2?.description?.message as string
+              }
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 포기하지 않고 깊이 몰입하는 사람"
@@ -93,26 +105,32 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label={'coreValue3_imageFileName'}
+            label={'coreValue3.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
             <StInput
-              {...register('coreValue3_value', {
+              {...register('coreValue3.value', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue3_value?.message !== undefined}
-              errorMessage={errors.coreValue3_value?.message as string}
+              isError={(errors as any).coreValue3?.value?.message !== undefined}
+              errorMessage={
+                (errors as any).coreValue3?.value?.message as string
+              }
               labelText="가치"
               placeholder="ex. 화합"
             />
             <StInput
-              {...register('coreValue3_description', {
+              {...register('coreValue3.description', {
                 required: true && VALIDATION_CHECK.required.errorText,
               })}
-              isError={errors.coreValue3_description?.message !== undefined}
-              errorMessage={errors.coreValue3_description?.message as string}
+              isError={
+                (errors as any).coreValue3?.description?.message !== undefined
+              }
+              errorMessage={
+                (errors as any).coreValue3?.description?.message as string
+              }
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 서로를 배려하며 함께 화합하는 사람"

src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx

@@ -42,15 +42,15 @@ const Curriculum = () => {
                 0{idx + 1}
               </StWeek>
               <StInput
-                {...register(`partCurriculum_${selectedPart}_${idx}`, {
+                {...register(`partCurriculum.${selectedPart}.${idx}`, {
                   required: true && VALIDATION_CHECK.required.errorText,
                 })}
                 isError={
-                  errors[`partCurriculum_${selectedPart}_${idx}`]?.message !==
+                  (errors as any).partCurriculum?.selectedPart?.idx?.message !==
                   undefined
                 }
                 errorMessage={
-                  errors[`partCurriculum_${selectedPart}_${idx}`]
+                  (errors as any).partCurriculum?.selectedPart?.idx
                     ?.message as string
                 }
                 id={`${selectedPart} week${idx}`}

src/components/org/OrgAdmin/AboutSection/Executives/ExecInfo.tsx

@@ -29,58 +29,72 @@ const ExecInfo = ({ selectedExec }: ExecInfoProps) => {
         <StDescription>사진은 1:1 비율로 올려주세요.</StDescription>
         <MyDropzone
           method={method}
-          label={`${selectedExec}_profileImageFileName`}
+          label={`member.${selectedExec}.profileImageFileName`}
           width="168px"
           height="168px"
           shape="circle"
         />
       </StPhotoWrapper>
       <StInput
-        {...register(`${selectedExec}_name`, {
+        {...register(`member.${selectedExec}.name`, {
           required: true && VALIDATION_CHECK.required.errorText,
         })}
-        isError={errors[`${selectedExec}_name`]?.message !== undefined}
-        errorMessage={errors[`${selectedExec}_name`]?.message as string}
+        isError={
+          (errors as any).member?.selectedExec?.name?.message !== undefined
+        }
+        errorMessage={
+          (errors as any).member?.selectedExec?.name?.message as string
+        }
         labelText="이름"
         placeholder="ex. 김솝트"
       />
       <StInput
-        {...register(`${selectedExec}_affiliation`, {
+        {...register(`member.${selectedExec}.affiliation`, {
           required: true && VALIDATION_CHECK.required.errorText,
         })}
-        isError={errors[`${selectedExec}_affiliation`]?.message !== undefined}
-        errorMessage={errors[`${selectedExec}_affiliation`]?.message as string}
+        isError={
+          (errors as any).member?.selectedExec?.affiliation?.message !==
+          undefined
+        }
+        errorMessage={
+          (errors as any).member?.selectedExec?.affiliation?.message as string
+        }
         labelText="소속"
         placeholder="ex. 솝트대학교 / 솝트컴퍼니 / 앱잼 프로덕트명"
       />
       <StInput
-        {...register(`${selectedExec}_introduction`, {
+        {...register(`member.${selectedExec}.introduction`, {
           required: true && VALIDATION_CHECK.required.errorText,
         })}
-        isError={errors[`${selectedExec}_introduction`]?.message !== undefined}
-        errorMessage={errors[`${selectedExec}_introduction`]?.message as string}
+        isError={
+          (errors as any).member?.selectedExec?.introduction?.message !==
+          undefined
+        }
+        errorMessage={
+          (errors as any).member?.selectedExec?.introduction?.message as string
+        }
         labelText="한 줄 소개"
         placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
       />
       <StSNSWrapper>
         <span>SNS</span>
         <SNSInput
-          label={`${selectedExec}_sns_email`}
+          label={`member.${selectedExec}.sns.email`}
           icon={IcMailLogo}
           placeholder="ex. [email protected]"
         />
         <SNSInput
-          label={`${selectedExec}_sns_linkedin`}
+          label={`member.${selectedExec}.sns.linkedin`}
           icon={IcLinkedinLogo}
           placeholder="ex. https://www.linkedin.com/..."
         />
         <SNSInput
-          label={`${selectedExec}_sns_github`}
+          label={`member.${selectedExec}.sns.github`}
           icon={IcGithubLogo}
           placeholder="ex. https://github.com/..."
         />
         <SNSInput
-          label={`${selectedExec}_sns_behance`}
+          label={`member.${selectedExec}.sns.behance`}
           icon={IcBehanceLogo}
           placeholder="ex. https://www.behance.net/..."
         />

src/components/org/OrgAdmin/MyDropzone/index.tsx

@@ -40,10 +40,18 @@ const MyDropzone = ({
     (acceptedFiles: File[]) => {
       const file = acceptedFiles[0];
       if (file) {
+        const sanitizedFileName = file.name
+          .trim() // 앞뒤 공백 제거
+          .replace(/\s+/g, '_'); // 띄어쓰기를 언더스코어로 변경
+
         const reader = new FileReader();
-        reader.onloadend = () => {
+        reader.onloadend = async () => {
           setPreviewUrl(reader.result as string);
-          setValue(label, reader.result, { shouldValidate: true });
+          setValue(
+            label,
+            { fileName: sanitizedFileName, file },
+            { shouldValidate: true },
+          );
         };
         reader.readAsDataURL(file);
       }
@@ -81,7 +89,7 @@ const MyDropzone = ({
           {...getInputProps()}
         />
         {previewUrl ? (
-          <StImgPreview src={previewUrl} alt="공홈 지원하기 탭 헤더 이미지" />
+          <StImgPreview src={previewUrl} alt="에러가 발생했어요." />
         ) : isDragActive ? (
           <p>이미지를 드래그 해주세요...</p>
         ) : (

src/components/org/OrgAdmin/RecruitSection/Header.tsx

@@ -26,7 +26,7 @@ const Header = () => {
           이미지는 1920*580 크기로 올려주세요. ‘지원하기’탭 가장 상단에 보여지는
           이미지예요.
         </StDescription>
-        <MyDropzone method={method} label="recruitHeaderImageFileName" />
+        <MyDropzone method={method} label="recruitHeaderImage" />
       </StTitleWrapper>
     </StWrapper>
   );

src/components/org/OrgAdmin/api.ts

@@ -0,0 +1,36 @@
+import createFetch from 'openapi-fetch';
+
+import { paths } from '@/__generated__/api';
+import { getToken } from '@/utils/auth';
+
+export const fetcher = createFetch<paths>({
+  baseUrl: process.env.NEXT_PUBLIC_ORG_API,
+  headers: {
+    Authorization: getToken('ACCESS'),
+  },
+});
+
+export const sendData = async (data: any) => {
+  const res = await fetcher.POST('/admin', {
+    body: data,
+  });
+
+  return res;
+};
+
+export const sendPresignedURL = async (url: string, data: any) => {
+  const res = await fetch(url, {
+    method: 'POST',
+    body: data,
+  });
+
+  return res;
+};
+
+export const sendDataConfirm = async (data: any) => {
+  const res = await fetcher.POST('/admin/confirm', {
+    body: data,
+  });
+
+  return res;
+};

src/components/org/OrgAdmin/home/api.ts

@@ -1,10 +1,11 @@
 import axios from 'axios';
 
-import { fetch } from '@/components/org/api';
 import { getToken } from '@/utils/auth';
 
+import { fetcher } from '../api';
+
 export const getAdminInfo = async () => {
-  const { data } = await fetch.GET('/admin', {
+  const { data } = await fetcher.GET('/admin', {
     params: {
       query: {
         generation: '34',
@@ -16,7 +17,7 @@ export const getAdminInfo = async () => {
 };
 
 export const postNews = async (formData: any) => {
-  const res = await fetch.POST('/admin/news', formData);
+  const res = await fetcher.POST('/admin/news', formData);
 
   return res;
 };