[FE] refactor: 사용자 테스트에서 피드백 받은 사소한 버그 수정

frontend/src/components/AnswerListRecheckModal/index.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 
+import { MultilineTextViewer } from '@/components';
 import { ReviewWritingAnswer, ReviewWritingCardSection } from '@/types';
 
 import CheckboxItem from '../common/CheckboxItem';
@@ -54,7 +55,9 @@ const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }:
                           ))}
                         </div>
                       )}
-                      <div>{question.questionType === 'TEXT' && <div>{findTextAnswer(question.questionId)}</div>}</div>
+                      {question.questionType === 'TEXT' && (
+                        <MultilineTextViewer text={findTextAnswer(question.questionId) || ''} />
+                      )}
                     </S.ContentContainer>
                   </Fragment>
                 ))}

frontend/src/components/common/LongReviewItem/index.tsx

@@ -8,13 +8,15 @@ interface LongReviewItemProps extends TextareaHTMLAttributes<HTMLTextAreaElement
   minLength: number;
   maxLength: number;
   initialValue?: string;
+  required: boolean;
   handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
 const LongReviewItem = ({
   minLength,
   maxLength,
   initialValue = '',
+  required,
   handleTextareaChange,
   style,
   ...rest
@@ -23,6 +25,7 @@ const LongReviewItem = ({
     minLength,
     maxLength,
     initialValue,
+    required,
   });
 
   const handleWriteTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -38,6 +41,7 @@ const LongReviewItem = ({
         $style={style}
         onChange={handleWriteTextarea}
         onBlur={handleBlur}
+        placeholder={`최대 ${maxLength}자까지 입력 가능해요.`}
         {...rest}
       />
       <S.TextareaInfoContainer>

frontend/src/components/common/MultilineTextViewer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as S from './styles';
 
 interface MultilineTextViewerProps {
   text: string;
@@ -8,10 +8,10 @@ const MultilineTextViewer = ({ text }: MultilineTextViewerProps) => {
   return (
     <>
       {text.split('\n').map((line, index) => (
-        <React.Fragment key={index}>
+        <S.MultilineText key={index}>
           {line}
           <br />
-        </React.Fragment>
+        </S.MultilineText>
       ))}
     </>
   );

frontend/src/components/common/MultilineTextViewer/styles.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const MultilineText = styled.div`
+  word-wrap: break-word;
+`;

frontend/src/components/layouts/Topbar/components/Logo/index.tsx

@@ -1,12 +1,20 @@
 // import LogoIcon from '../../../../../assets/logo.svg';
 
+import { useNavigate } from 'react-router';
+
 import * as S from './styles';
 
 const Logo = () => {
+  const navigate = useNavigate();
+
+  const handleLogoClick = () => {
+    navigate('/');
+  };
+
   return (
     <S.Logo>
       {/* <img src={LogoIcon} alt="로고 아이콘" /> */}
-      <S.LogoText>
+      <S.LogoText onClick={handleLogoClick}>
         <span>REVIEW</span>
         <span>ME</span>
       </S.LogoText>

frontend/src/components/layouts/Topbar/components/Logo/styles.ts

@@ -12,6 +12,7 @@ export const Logo = styled.div`
 `;
 
 export const LogoText = styled.div`
+  cursor: pointer;
   line-height: 8rem;
   text-align: center;
 

frontend/src/components/layouts/Topbar/index.tsx

@@ -14,7 +14,7 @@ const Topbar = ({ openSidebar }: TopbarProps) => {
   return (
     <S.Layout>
       <S.Container>
-        <SidebarOpenButton openSidebar={openSidebar} />
+        {/* <SidebarOpenButton openSidebar={openSidebar} /> */}
         <Logo />
       </S.Container>
       <S.Container>

frontend/src/hooks/useLongReviewItem.ts

@@ -4,9 +4,10 @@ interface UseLongReviewItemProps {
   minLength: number;
   maxLength: number;
   initialValue?: string;
+  required: boolean;
 }
 
-const useLongReviewItem = ({ minLength, maxLength, initialValue }: UseLongReviewItemProps) => {
+const useLongReviewItem = ({ minLength, maxLength, initialValue, required }: UseLongReviewItemProps) => {
   const [value, setValue] = useState(initialValue);
   const [isError, setIsError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -19,7 +20,10 @@ const useLongReviewItem = ({ minLength, maxLength, initialValue }: UseLongReview
 
   const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
-    if (value.length < minLength) {
+    const errorOnRequired = required && value.length < minLength;
+    const errorOnNotRequired = !required && value.length > 0 && value.length < minLength;
+
+    if (errorOnRequired || errorOnNotRequired) {
       setIsError(true);
       setErrorMessage(`최소 ${minLength}자 이상 작성해 주세요.`);
     } else {

frontend/src/pages/ReviewWritingCardFromPage/QnABox/index.tsx

@@ -28,7 +28,9 @@ const QnABox = ({ question, updateAnswerMap, updateAnswerValidationMap }: QnABox
     if (!optionGroup) return;
 
     const { minCount, maxCount } = optionGroup;
-    if (!maxCount) return `(최소 ${minCount}개 이상)`;
+
+    const isAllSelectAvailable = maxCount === optionGroup.options.length;
+    if (!maxCount || isAllSelectAvailable) return `(최소 ${minCount}개 이상)`;
 
     return `(${minCount}개 ~ ${maxCount}개)`;
   })();
@@ -38,6 +40,7 @@ const QnABox = ({ question, updateAnswerMap, updateAnswerValidationMap }: QnABox
       <S.QuestionTitle>
         {question.content}
         {question.required && <S.QuestionRequiredMark>*</S.QuestionRequiredMark>}
+        {question.questionType === 'TEXT' && ` (최소 ${TEXT_ANSWER_LENGTH.min}자 이상)`}
         <S.MultipleGuideline>{multipleGuideline ?? ''}</S.MultipleGuideline>
       </S.QuestionTitle>
       {question.guideline && <S.QuestionGuideline>{question.guideline}</S.QuestionGuideline>}
@@ -67,6 +70,7 @@ const QnABox = ({ question, updateAnswerMap, updateAnswerValidationMap }: QnABox
           minLength={TEXT_ANSWER_LENGTH.min}
           maxLength={TEXT_ANSWER_LENGTH.max}
           handleTextareaChange={handleTextAnswerChange}
+          required={question.required}
         />
       )}
     </S.QnASection>

frontend/src/styles/reset.ts

@@ -103,6 +103,7 @@ const reset = () => css`
 
   button {
     cursor: pointer;
+    user-select: none;
 
     box-sizing: border-box;
     margin: 0;