[FEATURE] 공통 탭 hook-form 고도화

src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx

@@ -50,8 +50,8 @@ const BrandingSubColor = () => {
           type="text"
           maxLength={9}
           placeholder="ex. #ffffff"
-          isError={errors.subColor?.message != undefined}
-          errorMessage={errors.subColor?.message as string}
+          isError={errors.brandingColor_point?.message != undefined}
+          errorMessage={errors.brandingColor_point?.message as string}
         />
         <StColorPreview
           type="color"

src/components/org/OrgAdmin/CommonSection/RecruitSchedule.tsx

@@ -1,8 +1,7 @@
 import { Chip } from '@sopt-makers/ui';
-import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { VALIDATION_CHECK } from '@/utils/org';
+import { SCHEDULE_FIELDS, VALIDATION_CHECK } from '@/utils/org';
 
 import {
   StDescription,
@@ -11,6 +10,7 @@ import {
   StTitleWrapper,
   StWrapper,
 } from '../style';
+import { Group } from '../types';
 import { StDateWrapper, StRadioWrapper } from './style';
 
 interface ScheduleInputProps {
@@ -41,8 +41,13 @@ const ScheduleInput = ({ id, label }: ScheduleInputProps) => {
   );
 };
 
-const RecruitSchedule = () => {
-  const [group, setGroup] = useState<'OB' | 'YB'>('OB');
+interface RecruitScheduleProps {
+  group: Group;
+  onChangeGroup: (group: Group) => void;
+}
+
+const RecruitSchedule = ({ group, onChangeGroup }: RecruitScheduleProps) => {
+  const currentFields = SCHEDULE_FIELDS[group];
 
   return (
     <StWrapper>
@@ -53,45 +58,31 @@ const RecruitSchedule = () => {
         </StDescription>
       </StTitleWrapper>
       <StRadioWrapper>
-        <Chip active={group === 'OB'} onClick={() => setGroup('OB')}>
+        <Chip active={group === 'OB'} onClick={() => onChangeGroup('OB')}>
           OB
         </Chip>
-        <Chip active={group === 'YB'} onClick={() => setGroup('YB')}>
+        <Chip active={group === 'YB'} onClick={() => onChangeGroup('YB')}>
           YB
         </Chip>
       </StRadioWrapper>
-      <div key={group}>
-        <StDateWrapper>
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_applicationStartTime`}
-            label={`${group} 서류 접수 시작`}
-          />
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_applicationEndTime`}
-            label={`${group} 서류 접수 마감`}
-          />
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_applicationResultTime`}
-            label={`${group} 서류 결과 발표`}
-          />
-        </StDateWrapper>
-        <StDateWrapper>
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_interviewStartTime`}
-            label={`${group} 면접 시작`}
-          />
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_interviewEndTime`}
-            label={`${group} 면접 마감`}
-          />
-        </StDateWrapper>
-        <StDateWrapper>
-          <ScheduleInput
-            id={`recruitSchedule_${group}_schedule_finalResultTime`}
-            label={`${group} 최종 결과 발표`}
-          />
-        </StDateWrapper>
-      </div>
+
+      <StDateWrapper>
+        {currentFields.application.map(({ id, label }) => (
+          <ScheduleInput key={id} id={id} label={label} />
+        ))}
+      </StDateWrapper>
+
+      <StDateWrapper>
+        {currentFields.interview.map(({ id, label }) => (
+          <ScheduleInput key={id} id={id} label={label} />
+        ))}
+      </StDateWrapper>
+
+      <StDateWrapper>
+        {currentFields.final.map(({ id, label }) => (
+          <ScheduleInput key={id} id={id} label={label} />
+        ))}
+      </StDateWrapper>
     </StWrapper>
   );
 };

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

@@ -1,13 +1,19 @@
 import { StContainer } from '../style';
+import type { Group } from '../types';
 import BrandingColor from './BrandingColor';
 import GenerationInformation from './GenerationInformation';
 import RecruitSchedule from './RecruitSchedule';
 
-const CommonSection = () => {
+interface CommonSectionProps {
+  group: Group;
+  onChangeGroup: (group: Group) => void;
+}
+
+const CommonSection = ({ group, onChangeGroup }: CommonSectionProps) => {
   return (
     <StContainer>
       <GenerationInformation />
-      <RecruitSchedule />
+      <RecruitSchedule group={group} onChangeGroup={onChangeGroup} />
       <BrandingColor />
     </StContainer>
   );

src/components/org/OrgAdmin/CommonSection/style.ts

@@ -37,12 +37,12 @@ export const StDateWrapper = styled(StInputWrapper)`
 
 export const StColorWrapper = styled.div`
   position: relative;
-  display: flex;
-  align-items: flex-end;
-  gap: 10px;
 `;
 
 export const StColorPreview = styled.input`
+  position: absolute;
+  top: 26px;
+  left: 348px;
   width: 48px;
   height: 48px;
   padding: 0;

src/components/org/OrgAdmin/index.tsx

@@ -3,24 +3,59 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { StListHeader } from '@/components/attendanceAdmin/session/SessionList/style';
 import FilterButton from '@/components/common/FilterButton';
-import { ORG_ADMIN_LIST } from '@/utils/org';
+import { ORG_ADMIN_LIST, SCHEDULE_FIELDS } from '@/utils/org';
 
 import AboutSection from './AboutSection';
 import SubmitIcon from './assets/SubmitIcon';
 import CommonSection from './CommonSection';
 import HomeSection from './home/HomeSection';
 import RecruitSection from './RecruitSection';
 import { StSubmitButton, StSubmitText } from './style';
+import { Group } from './types';
 
 function OrgAdmin() {
   const [selectedPart, setSelectedPart] = useState<ORG_ADMIN>('공통');
+  const [group, setGroup] = useState<Group>('OB');
   const methods = useForm({ mode: 'onBlur' });
-  const { handleSubmit } = methods;
+  const { handleSubmit, getValues } = methods;
 
   const onChangePart = (part: ORG_ADMIN): void => {
     setSelectedPart(part);
   };
 
+  const validateSchedule = () => {
+    const validateGroup = (groupKey: Group) => {
+      const groupFields = SCHEDULE_FIELDS[groupKey];
+      return Object.values(groupFields)
+        .flat()
+        .map((field) => getValues(field.id))
+        .every((value) => !!value);
+    };
+
+    const isOBValid = validateGroup('OB');
+    if (!isOBValid) {
+      setSelectedPart('공통');
+      setGroup('OB');
+      return false;
+    }
+
+    const isYBValid = validateGroup('YB');
+    if (!isYBValid) {
+      setSelectedPart('공통');
+      setGroup('YB');
+      return false;
+    }
+
+    return true;
+  };
+
+  const onSubmit = (data: any) => {
+    const isValid = validateSchedule();
+    if (isValid) {
+      console.log(data);
+    }
+  };
+
   return (
     <>
       <StListHeader>
@@ -32,12 +67,14 @@ function OrgAdmin() {
         />
       </StListHeader>
       <FormProvider {...methods}>
-        <form
-          onSubmit={handleSubmit((data) => {
-            console.log(data);
-          })}>
+        <form onSubmit={handleSubmit(onSubmit)}>
           {selectedPart === '공통' ? (
-            <CommonSection />
+            <CommonSection
+              group={group}
+              onChangeGroup={(group: Group) => {
+                setGroup(group);
+              }}
+            />
           ) : selectedPart === '소개' ? (
             <AboutSection />
           ) : selectedPart === '홈' ? (

src/components/org/OrgAdmin/types.ts

@@ -0,0 +1 @@
+export type Group = 'OB' | 'YB';

src/utils/org.ts

@@ -40,3 +40,70 @@ export const PART_LIST = [
   '웹',
   '서버',
 ] as const;
+
+export const SCHEDULE_FIELDS = {
+  OB: {
+    application: [
+      {
+        id: 'recruitSchedule_OB_schedule_applicationStartTime',
+        label: 'OB 서류 접수 시작',
+      },
+      {
+        id: 'recruitSchedule_OB_schedule_applicationEndTime',
+        label: 'OB 서류 접수 마감',
+      },
+      {
+        id: 'recruitSchedule_OB_schedule_applicationResultTime',
+        label: 'OB 서류 결과 발표',
+      },
+    ],
+    interview: [
+      {
+        id: 'recruitSchedule_OB_schedule_interviewStartTime',
+        label: 'OB 면접 시작',
+      },
+      {
+        id: 'recruitSchedule_OB_schedule_interviewEndTime',
+        label: 'OB 면접 마감',
+      },
+    ],
+    final: [
+      {
+        id: 'recruitSchedule_OB_schedule_finalResultTime',
+        label: 'OB 최종 결과 발표',
+      },
+    ],
+  },
+  YB: {
+    application: [
+      {
+        id: 'recruitSchedule_YB_schedule_applicationStartTime',
+        label: 'YB 서류 접수 시작',
+      },
+      {
+        id: 'recruitSchedule_YB_schedule_applicationEndTime',
+        label: 'YB 서류 접수 마감',
+      },
+      {
+        id: 'recruitSchedule_YB_schedule_applicationResultTime',
+        label: 'YB 서류 결과 발표',
+      },
+    ],
+    interview: [
+      {
+        id: 'recruitSchedule_YB_schedule_interviewStartTime',
+        label: 'YB 면접 시작',
+      },
+      {
+        id: 'recruitSchedule_YB_schedule_interviewEndTime',
+        label: 'YB 면접 마감',
+      },
+    ],
+    final: [
+      {
+        id: 'recruitSchedule_YB_schedule_finalResultTime',
+        label: 'YB 최종 결과 발표',
+      },
+    ],
+  },
+};