diff --git a/src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx b/src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx index 2359f65..b4c6c36 100644 --- a/src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx +++ b/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} /> { ); }; -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 ( @@ -53,45 +58,31 @@ const RecruitSchedule = () => { - setGroup('OB')}> + onChangeGroup('OB')}> OB - setGroup('YB')}> + onChangeGroup('YB')}> YB -
- - - - - - - - - - - - -
+ + + {currentFields.application.map(({ id, label }) => ( + + ))} + + + + {currentFields.interview.map(({ id, label }) => ( + + ))} + + + + {currentFields.final.map(({ id, label }) => ( + + ))} +
); }; diff --git a/src/components/org/OrgAdmin/CommonSection/index.tsx b/src/components/org/OrgAdmin/CommonSection/index.tsx index 3f1e4cc..4db076f 100644 --- a/src/components/org/OrgAdmin/CommonSection/index.tsx +++ b/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 ( - + ); diff --git a/src/components/org/OrgAdmin/CommonSection/style.ts b/src/components/org/OrgAdmin/CommonSection/style.ts index 03ab886..4777e6b 100644 --- a/src/components/org/OrgAdmin/CommonSection/style.ts +++ b/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; diff --git a/src/components/org/OrgAdmin/index.tsx b/src/components/org/OrgAdmin/index.tsx index 457f4f7..ce0095a 100644 --- a/src/components/org/OrgAdmin/index.tsx +++ b/src/components/org/OrgAdmin/index.tsx @@ -3,7 +3,7 @@ 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'; @@ -11,16 +11,51 @@ 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('공통'); + const [group, setGroup] = useState('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 ( <> @@ -32,12 +67,14 @@ function OrgAdmin() { /> -
{ - console.log(data); - })}> + {selectedPart === '공통' ? ( - + { + setGroup(group); + }} + /> ) : selectedPart === '소개' ? ( ) : selectedPart === '홈' ? ( diff --git a/src/components/org/OrgAdmin/types.ts b/src/components/org/OrgAdmin/types.ts new file mode 100644 index 0000000..566a6d6 --- /dev/null +++ b/src/components/org/OrgAdmin/types.ts @@ -0,0 +1 @@ +export type Group = 'OB' | 'YB'; diff --git a/src/utils/org.ts b/src/utils/org.ts index 2f167e1..b909b68 100644 --- a/src/utils/org.ts +++ b/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 최종 결과 발표', + }, + ], + }, +};