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 4 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,
};
14 changes: 12 additions & 2 deletions 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 @@ -15,12 +16,21 @@ 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;
const { optionGroup, questionType } = question;

// NOTE: 객관식일 경우의 안내 문구 처리
Copy link
Contributor

Choose a reason for hiding this comment

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

NOTE 다음은 주관식에 대한 내용이기 때문에 해당 주석 삭제하거나 객관식에 대한 안내문구 코드쪽으로 옮겨주세요.

if (questionType === 'TEXT') {
const guideline = question.required
? `(최소 ${TEXT_ANSWER_LENGTH.min}자 ~ 최대 ${TEXT_ANSWER_LENGTH.max}자)`
: `(최대 ${TEXT_ANSWER_LENGTH.max}자)`;
return guideline;
}

if (!optionGroup) return;
Copy link
Contributor

Choose a reason for hiding this comment

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

optionGroup은 주관식은 null이고, 객관식은 null값이 아니에요.
주관식에 대한 if 문이 생겼기 때문에 if (!optionGroup) return; 은 삭제해주세요.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

if (!optionGroup) return;을 지우면 const { minCount, maxCount } = optionGroup;에서 에러가 나서 지우지 않았습니다. 대신 if (!optionGroup)을 주관식 가이드라인 설정의 if문으로 돌릴 수 있는데, 이 if문이 주관식을 처리한다는 게 직관적으로 보이지 않아서 일부러 questionType === 'TEXT'로 체크했었습니다.
그런데 if문에 주석을 단다면 가독성 문제를 해결할 수 있을 것 같아 if (!optionGroup) return;을 주관식 if문으로 두었습니다!

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