diff --git a/frontend/src/pages/ReviewWritingPage/constants/index.ts b/frontend/src/pages/ReviewWritingPage/constants/index.ts index 133aa7420..18f5aa63b 100644 --- a/frontend/src/pages/ReviewWritingPage/constants/index.ts +++ b/frontend/src/pages/ReviewWritingPage/constants/index.ts @@ -1 +1,2 @@ export * from './modal'; +export * from './textarea'; diff --git a/frontend/src/pages/ReviewWritingPage/constants/textarea.ts b/frontend/src/pages/ReviewWritingPage/constants/textarea.ts new file mode 100644 index 000000000..e678d67de --- /dev/null +++ b/frontend/src/pages/ReviewWritingPage/constants/textarea.ts @@ -0,0 +1,5 @@ +export const TEXT_ANSWER_LENGTH = { + min: 20, + max: 1000, + extra: 10, +}; diff --git a/frontend/src/pages/ReviewWritingPage/form/components/QnABox/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/QnABox/index.tsx index 7c5fee946..d83f48a7e 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/QnABox/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/QnABox/index.tsx @@ -1,3 +1,4 @@ +import { TEXT_ANSWER_LENGTH } from '@/pages/ReviewWritingPage/constants'; import { MultipleChoiceAnswer, TextAnswer } from '@/pages/ReviewWritingPage/form/components'; import { ReviewWritingCardQuestion } from '@/types'; @@ -16,11 +17,20 @@ const QnABox = ({ question }: QnABoxProps) => { */ const multipleLGuideline = (() => { const { optionGroup } = question; - if (!optionGroup) return; + // NOTE: 주관식일 경우의 안내 문구 처리 + if (!optionGroup) { + const guideline = question.required + ? `(최소 ${TEXT_ANSWER_LENGTH.min}자 ~ 최대 ${TEXT_ANSWER_LENGTH.max}자)` + : `(최대 ${TEXT_ANSWER_LENGTH.max}자)`; + return guideline; + } + + // NOTE: 객관식일 경우의 안내 문구 처리 const { minCount, maxCount } = optionGroup; const isAllSelectAvailable = maxCount === optionGroup.options.length; + if (!maxCount || isAllSelectAvailable) return `(최소 ${minCount}개 이상)`; return `(${minCount}개 ~ ${maxCount}개)`; diff --git a/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx b/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx index 3b8fe9e9a..9f76b4f13 100644 --- a/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx @@ -8,7 +8,7 @@ interface TextAnswerProps { } const TextAnswer = ({ question }: TextAnswerProps) => { - const { text, minLength, maxLength, errorMessage, handleTextAnswerBlur, handleTextAnswerChange } = useTextAnswer({ + const { text, maxLength, errorMessage, handleTextAnswerBlur, handleTextAnswerChange } = useTextAnswer({ question, }); @@ -22,7 +22,6 @@ const TextAnswer = ({ question }: TextAnswerProps) => { $isError={errorMessage !== ''} onChange={handleTextAnswerChange} onBlur={handleTextAnswerBlur} - placeholder={`최소 ${minLength}자 이상, 최대 ${maxLength}자까지 입력 가능해요`} /> {errorMessage} diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/index.ts b/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/index.ts index 2dea901db..ee0f18ebe 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/index.ts +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/index.ts @@ -1,15 +1,10 @@ import { useState } from 'react'; +import { TEXT_ANSWER_LENGTH } from '@/pages/ReviewWritingPage/constants'; import { ReviewWritingAnswer, ReviewWritingCardQuestion } from '@/types'; import useUpdateReviewerAnswer from '../useUpdateReviewerAnswer'; -export const TEXT_ANSWER_LENGTH = { - min: 20, - max: 1000, - extra: 10, -}; - export const TEXT_ANSWER_ERROR_MESSAGE = { min: `최소 ${TEXT_ANSWER_LENGTH.min}자 이상 작성해 주세요`, max: `최대 ${TEXT_ANSWER_LENGTH.max}자까지만 입력 가능해요`, diff --git a/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/test.tsx b/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/test.tsx index df0525110..ba9a35b3f 100644 --- a/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/test.tsx +++ b/frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/test.tsx @@ -2,6 +2,7 @@ import { act, renderHook, waitFor } from '@testing-library/react'; import { RecoilRoot, RecoilState, useRecoilValue } from 'recoil'; import { FEEDBACK_SECTION } from '@/mocks/mockData'; +import { TEXT_ANSWER_LENGTH } from '@/pages/ReviewWritingPage/constants'; import { answerMapAtom, answerValidationMapAtom, @@ -12,7 +13,7 @@ import { EssentialPropsWithChildren, ReviewWritingCardSection } from '@/types'; import useUpdateDefaultAnswers from '../useUpdateDefaultAnswers'; -import useTextAnswer, { TEXT_ANSWER_ERROR_MESSAGE, TEXT_ANSWER_LENGTH } from '.'; +import useTextAnswer, { TEXT_ANSWER_ERROR_MESSAGE } from '.'; const MOCK_SECTION_LIST = [FEEDBACK_SECTION]; const NOT_REQUIRED_MOCK_SECTION_LIST: ReviewWritingCardSection[] = [