Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] 지원하기 탭 hook-form 고도화 #156

Merged
merged 6 commits into from
Nov 28, 2024
Merged

[FEATURE] 지원하기 탭 hook-form 고도화 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
70a9426
fix: form validation off
eonseok-jeon Nov 28, 2024
85f0006
fix: 배포 누르면 revalidate 안 되는 에러 해결
eonseok-jeon Nov 28, 2024
4e4043e
feat: 파트별 소개 필수 입력 받도록 구현
eonseok-jeon Nov 28, 2024
f2336ca
feat: fna 필수 입력 받도록 구현
eonseok-jeon Nov 28, 2024
e9513e5
refactor: 반복되는 로직 제거
eonseok-jeon Nov 28, 2024
dca389b
fix: type error 해결
eonseok-jeon Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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