Skip to content

Commit

Permalink
[FEATURE] 지원하기 탭 hook-form 고도화
Browse files Browse the repository at this point in the history
  • Loading branch information
@eonseok-jeon
eonseok-jeon authored Nov 28, 2024
2 parents 7d430df + dca389b commit bb86fbd
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 165 deletions.
6 changes: 3 additions & 3 deletions src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { PART_LIST, VALIDATION_CHECK } from '@/utils/org';
import { PART_KO, PART_LIST, VALIDATION_CHECK } from '@/utils/org';

import PartCategory from '../../PartCategory';
import { StInput, StTitle, StWrapper } from '../style';
Expand All @@ -21,9 +21,9 @@ const Curriculum = () => {
formState: { errors },
} = useFormContext();

const [selectedPart, setSelectedPart] = useState('기획');
const [selectedPart, setSelectedPart] = useState<PART_KO>('기획');

const handleSetSelectedPart = (value: string) => {
const handleSetSelectedPart = (value: PART_KO) => {
setSelectedPart(value);
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/org/OrgAdmin/PartCategory/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Chip } from '@sopt-makers/ui';

import { PART_LIST } from '@/utils/org';
import { PART_KO, PART_LIST } from '@/utils/org';

import { StPartCategoryWrapper } from './style';

interface PartCategoryProps {
selectedPart: string;
onSetSelectedPart: (part: string) => void;
selectedPart: PART_KO;
onSetSelectedPart: (part: PART_KO) => void;
}
const PartCategory = ({
selectedPart,
Expand Down
216 changes: 83 additions & 133 deletions src/components/org/OrgAdmin/RecruitSection/Fna.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,39 @@
import { useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { VALIDATION_CHECK } from '@/utils/org';
import { PART_KO, VALIDATION_CHECK } from '@/utils/org';

import PartCategory from '../PartCategory';
import { StTextArea, StTitle, StTitleWrapper, StWrapper } from '../style';
import { StFnaWrapper, StTextAreaWrapper } from './style';

const Fna = () => {
const QUESTION_NUMBERS = [0, 1, 2];

interface FnaProps {
fnaPart: PART_KO;
onChangeFnaPart: (part: PART_KO) => void;
}

const Fna = ({ fnaPart, onChangeFnaPart }: FnaProps) => {
const {
register,
clearErrors,
setError,
formState: { errors },
} = useFormContext();

const [selectedPart, setSelectedPart] = useState('기획');
const handleSetSelectedPart = (value: PART_KO) => {
onChangeFnaPart(value);
};

const handleSetSelectedPart = (value: string) => {
setSelectedPart(value);
const handleValidation = (field: string, value: string) => {
if (value) {
clearErrors(field);
} else {
setError(field, {
type: 'required',
message: VALIDATION_CHECK.required.errorText,
});
}
};

return (
Expand All @@ -25,135 +42,68 @@ const Fna = () => {
<StTitle>자주 묻는 질문</StTitle>
</StTitleWrapper>
<PartCategory
selectedPart={selectedPart}
selectedPart={fnaPart}
onSetSelectedPart={handleSetSelectedPart}
/>
<StTextAreaWrapper key={selectedPart}>
<StFnaWrapper>
<StTextArea
{...register(
`recruitQuestion_${selectedPart}_questions_0_question`,
{
required: true && VALIDATION_CHECK.required.errorText,
},
)}
topAddon={{
labelText: '질문1',
}}
required
fixedHeight={74}
maxHeight={74}
placeholder="질문을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_0_question`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_0_question`]
?.message as string
}
/>
<StTextArea
{...register(`recruitQuestion_${selectedPart}_questions_0_answer`, {
required: true && VALIDATION_CHECK.required.errorText,
})}
required
fixedHeight={74}
maxHeight={74}
placeholder="답변을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_0_answer`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_0_answer`]
?.message as string
}
/>
</StFnaWrapper>
<StFnaWrapper>
<StTextArea
{...register(
`recruitQuestion_${selectedPart}_questions_1_question`,
{
required: true && VALIDATION_CHECK.required.errorText,
},
)}
topAddon={{
labelText: '질문2',
}}
required
fixedHeight={74}
maxHeight={74}
placeholder="질문을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_1_question`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_1_question`]
?.message as string
}
/>
<StTextArea
{...register(`recruitQuestion_${selectedPart}_questions_1_answer`, {
required: true && VALIDATION_CHECK.required.errorText,
})}
required
fixedHeight={74}
maxHeight={74}
placeholder="답변을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_1_answer`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_1_answer`]
?.message as string
}
/>
</StFnaWrapper>
<StFnaWrapper>
<StTextArea
{...register(
`recruitQuestion_${selectedPart}_questions_2_question`,
{
required: true && VALIDATION_CHECK.required.errorText,
},
)}
topAddon={{
labelText: '질문3',
}}
required
fixedHeight={74}
maxHeight={74}
placeholder="질문을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_2_question`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_2_question`]
?.message as string
}
/>
<StTextArea
{...register(`recruitQuestion_${selectedPart}_questions_2_answer`, {
required: true && VALIDATION_CHECK.required.errorText,
})}
fixedHeight={74}
maxHeight={74}
placeholder="답변을 입력해주세요."
isError={
errors[`recruitQuestion_${selectedPart}_questions_2_answer`]
?.message != undefined
}
errorMessage={
errors[`recruitQuestion_${selectedPart}_questions_2_answer`]
?.message as string
}
/>
</StFnaWrapper>
<StTextAreaWrapper key={fnaPart}>
{QUESTION_NUMBERS.map((index) => (
<StFnaWrapper key={index}>
<StTextArea
{...register(
`recruitQuestion_${fnaPart}_questions_${index}_question`,
{
required: VALIDATION_CHECK.required.errorText,
},
)}
topAddon={{
labelText: `질문 ${index + 1}`,
}}
required
fixedHeight={74}
maxHeight={74}
placeholder="질문을 입력해주세요."
onChange={(e) =>
handleValidation(
`recruitQuestion_${fnaPart}_questions_${index}_question`,
e.currentTarget.value,
)
}
isError={
!!errors[
`recruitQuestion_${fnaPart}_questions_${index}_question`
]
}
errorMessage={
errors[`recruitQuestion_${fnaPart}_questions_${index}_question`]
?.message as string
}
/>
<StTextArea
{...register(
`recruitQuestion_${fnaPart}_questions_${index}_answer`,
{
required: VALIDATION_CHECK.required.errorText,
},
)}
fixedHeight={74}
maxHeight={74}
placeholder="답변을 입력해주세요."
onChange={(e) =>
handleValidation(
`recruitQuestion_${fnaPart}_questions_${index}_answer`,
e.currentTarget.value,
)
}
isError={
!!errors[`recruitQuestion_${fnaPart}_questions_${index}_answer`]
}
errorMessage={
errors[`recruitQuestion_${fnaPart}_questions_${index}_answer`]
?.message as string
}
/>
</StFnaWrapper>
))}
</StTextAreaWrapper>
</StWrapper>
);
Expand Down
61 changes: 44 additions & 17 deletions src/components/org/OrgAdmin/RecruitSection/PartCurriculum.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
import { useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { VALIDATION_CHECK } from '@/utils/org';
import { PART_KO, VALIDATION_CHECK } from '@/utils/org';

import PartCategory from '../PartCategory';
import { StTextArea, StTitle, StTitleWrapper, StWrapper } from '../style';
import { StTextAreaWrapper } from './style';

const PartCurriculum = () => {
interface RecruitSectionProps {
curriculumPart: PART_KO;
onChangeCurriculumPart: (part: PART_KO) => void;
}

const PartCurriculum = ({
curriculumPart,
onChangeCurriculumPart,
}: RecruitSectionProps) => {
const {
register,
clearErrors,
setError,
formState: { errors },
} = useFormContext();

const [selectedPart, setSelectedPart] = useState('기획');

const handleSetSelectedPart = (value: string) => {
setSelectedPart(value);
const handleSetSelectedPart = (value: PART_KO) => {
onChangeCurriculumPart(value);
};

return (
Expand All @@ -25,32 +32,42 @@ const PartCurriculum = () => {
<StTitle>파트별 소개</StTitle>
</StTitleWrapper>
<PartCategory
selectedPart={selectedPart}
selectedPart={curriculumPart}
onSetSelectedPart={handleSetSelectedPart}
/>
<StTextAreaWrapper key={selectedPart}>
<StTextAreaWrapper key={curriculumPart}>
<StTextArea
{...register(`recruitPartCurriculum_${selectedPart}_content`, {
{...register(`recruitPartCurriculum_${curriculumPart}_content`, {
required: true && VALIDATION_CHECK.required.errorText,
})}
topAddon={{
labelText: `${selectedPart} 파트는 이런 걸 배워요.`,
labelText: `${curriculumPart} 파트는 이런 걸 배워요.`,
}}
required
fixedHeight={158}
maxHeight={158}
placeholder="파트별 설명을 작성해주세요."
onChange={(e) => {
if (e.currentTarget.value) {
clearErrors(`recruitPartCurriculum_${curriculumPart}_content`);
} else {
setError(`recruitPartCurriculum_${curriculumPart}_content`, {
type: 'required',
message: VALIDATION_CHECK.required.errorText,
});
}
}}
isError={
errors[`recruitPartCurriculum_${selectedPart}_content`]?.message !=
undefined
errors[`recruitPartCurriculum_${curriculumPart}_content`]
?.message != undefined
}
errorMessage={
errors[`recruitPartCurriculum_${selectedPart}_content`]
errors[`recruitPartCurriculum_${curriculumPart}_content`]
?.message as string
}
/>
<StTextArea
{...register(`recruitPartCurriculum_${selectedPart}_preference`, {
{...register(`recruitPartCurriculum_${curriculumPart}_preference`, {
required: true && VALIDATION_CHECK.required.errorText,
})}
topAddon={{
Expand All @@ -63,12 +80,22 @@ const PartCurriculum = () => {
ex.
- 어려움과 고민을 편하게 나누고 공감할 수 있는 유대감과 열린 마음을 가진 분
- 타 파트와 협업하며 존중과 신뢰를 바탕으로 원활한 팀워크를 만들어갈 수 있는 분`}
onChange={(e) => {
if (e.currentTarget.value) {
clearErrors(`recruitPartCurriculum_${curriculumPart}_preference`);
} else {
setError(`recruitPartCurriculum_${curriculumPart}_preference`, {
type: 'required',
message: VALIDATION_CHECK.required.errorText,
});
}
}}
isError={
errors[`recruitPartCurriculum_${selectedPart}_preference`]
errors[`recruitPartCurriculum_${curriculumPart}_preference`]
?.message != undefined
}
errorMessage={
errors[`recruitPartCurriculum_${selectedPart}_preference`]
errors[`recruitPartCurriculum_${curriculumPart}_preference`]
?.message as string
}
/>
Expand Down
Loading

0 comments on commit bb86fbd

Please sign in to comment.