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

[FE] refactor: 서술형 필수 질문에 최소/최대 문구 안내 추가 #566

Merged
merged 5 commits into from
Sep 5, 2024
Merged

[FE] refactor: 서술형 필수 질문에 최소/최대 문구 안내 추가 #566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ca10e8
refactor: TEXT_ANSWER_LENGTH 상수화
ImxYJL Sep 4, 2024
d242806
refactor: 서술형 필수 직문에 최소/최대 글자 수 표시 및 textarea의 placeholder 제거
ImxYJL Sep 4, 2024
ea2997a
test: 리팩토링에 따른 테스트 import 수정
ImxYJL Sep 4, 2024
792b3e2
refactor: 주관식 선택 문항에 대한 가이드라인 추가
ImxYJL Sep 4, 2024
b658e5e
refactor: 질문별 안내 문구를 설정하는 if문 개선
ImxYJL Sep 5, 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
1 change: 1 addition & 0 deletions frontend/src/pages/ReviewWritingPage/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './modal';
export * from './textarea';
5 changes: 5 additions & 0 deletions frontend/src/pages/ReviewWritingPage/constants/textarea.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const TEXT_ANSWER_LENGTH = {
min: 20,
max: 1000,
extra: 10,
};
12 changes: 11 additions & 1 deletion frontend/src/pages/ReviewWritingPage/form/components/QnABox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TEXT_ANSWER_LENGTH } from '@/pages/ReviewWritingPage/constants';
import { MultipleChoiceAnswer, TextAnswer } from '@/pages/ReviewWritingPage/form/components';
import { ReviewWritingCardQuestion } from '@/types';

Expand All @@ -16,11 +17,20 @@ const QnABox = ({ question }: QnABoxProps) => {
*/
const multipleLGuideline = (() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안내문구가 기존에는 객관식에 대해서만 있었는데, 주관식이 생겨서 함수로 분리해도 좋겠네요

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}개)`;
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand All @@ -22,7 +22,6 @@ const TextAnswer = ({ question }: TextAnswerProps) => {
$isError={errorMessage !== ''}
onChange={handleTextAnswerChange}
onBlur={handleTextAnswerBlur}
placeholder={`최소 ${minLength}자 이상, 최대 ${maxLength}자까지 입력 가능해요`}
/>
<S.TextareaInfoContainer>
<S.ReviewTextareaError>{errorMessage}</S.ReviewTextareaError>
Expand Down
7 changes: 1 addition & 6 deletions frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}자까지만 입력 가능해요`,
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/pages/ReviewWritingPage/form/hooks/answers/useTextAnswer/test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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[] = [
Expand Down