refactor: LongReviewItem이 질문과 change/error handler를 prop으로 받을 수 있도록 수정

woowacourse-teams · Aug 11, 2024 · 5589422 · 5589422
1 parent 312b86b
commit 5589422
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 32 deletions.
diff --git a/frontend/src/components/common/LongReviewItem/index.tsx b/frontend/src/components/common/LongReviewItem/index.tsx
@@ -1,50 +1,59 @@
 import React, { TextareaHTMLAttributes } from 'react';
 
-import useLongReviewItem from '@/hooks/useLongReviewItem';
+import useLongReviewValidate from '@/hooks/useLongReviewValidate';
 
 import * as S from './styles';
 
-interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface ReviewQuestion {
+  order?: number;
+  content: string;
+}
+interface ReviewAnswer {
   minLength: number;
   maxLength: number;
-  initialValue?: string;
   handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleErrorChange: (isError: boolean) => void;
+}
+interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  question: ReviewQuestion;
+  answer: ReviewAnswer;
 }
 
-const LongReviewItem = ({
-  minLength,
-  maxLength,
-  initialValue = '',
-  handleTextareaChange,
-  style,
-  ...rest
-}: LongReviewItemProps) => {
-  const { value, textLength, isError, errorMessage, handleChange, handleBlur } = useLongReviewItem({
-    minLength,
-    maxLength,
-    initialValue,
+const LongReviewItem = ({ question, answer, style, ...rest }: LongReviewItemProps) => {
+  const { value, isError, errorMessage, handleChangeValidation, handleBlurValidation } = useLongReviewValidate({
+    minLength: answer.minLength,
+    maxLength: answer.maxLength,
+    handleErrorChange: answer.handleErrorChange,
   });
 
-  const handleWriteTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    handleChange(e);
-    handleTextareaChange(e);
+  const handleWrite = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    handleChangeValidation(e);
+    answer.handleTextareaChange(e);
   };
 
+  const textLength = `${value.length} / ${answer.maxLength}`;
+
   return (
-    <S.TextareaContainer>
-      <S.Textarea
-        value={value}
-        $isError={isError}
-        $style={style}
-        onChange={handleWriteTextarea}
-        onBlur={handleBlur}
-        {...rest}
-      />
-      <S.TextareaInfoContainer>
-        <S.ReviewTextareaError>{isError && errorMessage}</S.ReviewTextareaError>
-        <S.ReviewTextLength>{textLength}</S.ReviewTextLength>
-      </S.TextareaInfoContainer>
-    </S.TextareaContainer>
+    <S.LongReviewContainer>
+      <S.Question>
+        {question.order && question.order + '. '}
+        {question.content}
+      </S.Question>
+      <S.TextareaContainer>
+        <S.Textarea
+          value={value}
+          $isError={isError}
+          $style={style}
+          onChange={handleWrite}
+          onBlur={handleBlurValidation}
+          {...rest}
+        />
+        <S.TextareaInfoContainer>
+          <S.ReviewTextareaError>{isError && errorMessage}</S.ReviewTextareaError>
+          <S.ReviewTextLength>{textLength}</S.ReviewTextLength>
+        </S.TextareaInfoContainer>
+      </S.TextareaContainer>
+    </S.LongReviewContainer>
   );
 };
 

diff --git a/frontend/src/components/common/LongReviewItem/styles.ts b/frontend/src/components/common/LongReviewItem/styles.ts
@@ -1,5 +1,15 @@
 import styled from '@emotion/styled';
 
+export const LongReviewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Question = styled.p`
+  margin-bottom: 0.8rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;
+
 export const TextareaContainer = styled.div`
   display: flex;
   flex-direction: column;