[FE] 회원가입시 예외처리를 하고, 한줄평 글자 1칸초과하는것을 해결한다. (#1040)

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "index.tsx",
   "license": "MIT",
+  "packageManager": "[email protected]",
   "scripts": {
     "build": "cross-env NODE_ENV=production API_ENV=production webpack --mode=production --config webpack.prod.js",
     "build:dev-fe": "cross-env NODE_ENV=production API_ENV=development webpack --mode=production --config webpack.prod.js",

frontend/src/components/NewChecklist/SubmitModalWithSummary/SubmitModalWithSummary.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
+import { ChangeEvent } from 'react';
 
 import Button from '@/components/_common/Button/Button';
 import CounterBox from '@/components/_common/CounterBox/CounterBox';
 import FormField from '@/components/_common/FormField/FormField';
 import Modal from '@/components/_common/Modal/Modal';
 import { MODAL_MESSAGE } from '@/constants/messages/message';
+import { BRIEF_COMMENT_MAX_LENGTH } from '@/constants/system';
 import useMutateChecklist from '@/hooks/useMutateChecklist';
 import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 import { trackSubmitChecklist } from '@/service/amplitude/trackEvent';
@@ -53,6 +55,10 @@ const SubmitModalWithSummary = ({
     onError();
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= BRIEF_COMMENT_MAX_LENGTH) summary.onChange(e);
+  };
+
   return (
     <Modal isOpen={isModalOpen} onClose={modalClose}>
       <Modal.header>
@@ -63,14 +69,14 @@ const SubmitModalWithSummary = ({
           <FormField.Input
             placeholder="바쁘시면 스킵도 괜찮아요!"
             autoFocus
-            onChange={summary.onChange}
+            onChange={handleChange}
             name="summary"
             value={summary.rawValue}
-            maxLength={15}
+            maxLength={BRIEF_COMMENT_MAX_LENGTH}
             height={'small'}
           />
           <S.CounterContainer>
-            <CounterBox currentCount={summary.rawValue?.length || 0} totalCount={15} />
+            <CounterBox currentCount={summary.rawValue?.length || 0} totalCount={BRIEF_COMMENT_MAX_LENGTH} />
           </S.CounterContainer>
           <Button size="full" color="dark" onClick={handleSaveChecklist} isSquare label="체크리스트 저장하기" />
         </S.Wrapper>

frontend/src/constants/system.ts

@@ -22,3 +22,6 @@ export const EMPTY_INDICATOR = ' - ';
 export const MIN_GOOD_SCORE = 70;
 
 export const MIN_SOSO_SCORE = 30;
+
+// 체크리스트 작성
+export const BRIEF_COMMENT_MAX_LENGTH = 15;

frontend/src/hooks/query/usePostSignInQuery.ts

@@ -13,7 +13,9 @@ const usePostSignInQuery = () => {
   const { init } = amplitudeInitializer();
   const { showToast } = useToast();
 
+  queryClient.setMutationDefaults(['auth', 'sign-in'], { onError: undefined });
   return useMutation({
+    mutationKey: ['auth', 'sign-in'],
     mutationFn: postSignIn,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });

frontend/src/hooks/query/usePostSignUpQuery.ts

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { postSignUp } from '@/apis/user';
+import useToast from '@/hooks/useToast';
+
+const usePostSignUpQuery = () => {
+  const client = useQueryClient();
+  client.setMutationDefaults(['auth', 'sign-up'], { onError: undefined });
+  const { showToast } = useToast();
+  return useMutation({
+    mutationKey: ['auth', 'sign-up'],
+    mutationFn: postSignUp,
+    onSuccess: () => {
+      showToast({ message: '회원가입이 완료되었습니다.', type: 'confirm' });
+    },
+    throwOnError: false,
+  });
+};
+
+export default usePostSignUpQuery;

frontend/src/pages/ChecklistListPage.tsx

@@ -51,7 +51,7 @@ const ChecklistListPage = () => {
           <CustomBanner
             onClick={handleClickMoveQuestionSelectPage}
             Icon={<LampIcon width={30} height={30} aria-hidden="true" />}
-            title={'체크리스트를 비교해서 보기'}
+            title={'체크리스트를 비교'}
             buttonColor={theme.palette.yellow600}
             buttonText="비교하기"
             buttonDetailText={'체크리스트 질문을 편집하려면 이 버튼을 누르세요.'}

frontend/src/pages/RoomCompareSelectPage.tsx

@@ -24,7 +24,7 @@ const RoomCompareSelectPage = () => {
 
   useEffect(() => {
     if (userChecklists.length < MIN_ROOM_COMPARE_COUNT) {
-      showToast({ message: '비교 기능은 작성한 체크리스트가 2개 이상일 때만 가능합니다.' });
+      showToast({ message: '비교 기능은 작성한 체크리스트가 2개 이상일 때만 가능합니다.', type: 'info' });
       navigate(ROUTE_PATH.checklistList);
     }
   }, [userChecklists.length, navigate, showToast]);

frontend/src/pages/SignUpPage.tsx

@@ -2,19 +2,17 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { postSignUp } from '@/apis/user';
 import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets';
 import Button from '@/components/_common/Button/Button';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
 import { ROUTE_PATH } from '@/constants/routePath';
-import useToast from '@/hooks/useToast';
+import usePostSignUpQuery from '@/hooks/query/usePostSignUpQuery';
 import useValidateInput from '@/hooks/useValidateInput';
 import { flexCenter, title3, title4 } from '@/styles/common';
 import { validateEmail, validateLength, validatePassword, validatePasswordConfirm } from '@/utils/authValidation';
 
 const SignUpPage = () => {
-  const { showToast } = useToast();
   const [postErrorMessage, setPostErrorMessage] = useState('');
   const navigate = useNavigate();
 
@@ -60,16 +58,17 @@ const SignUpPage = () => {
 
   const disabled = !isEmailValidated || !isNameValidated || !isPasswordValidated || !isPasswordConfirmValidated;
 
-  const handleSubmit = async () => {
-    const response = await postSignUp({ name, email, password });
-    if (response.status === 201) {
-      showToast({ message: '회원가입이 완료되었습니다.', type: 'confirm' });
-      navigate(ROUTE_PATH.signIn);
-    } else {
-      const errorData = await response.json();
-      const errorMessage = errorData.message;
-      setPostErrorMessage(errorMessage);
-    }
+  const { mutate, isSuccess } = usePostSignUpQuery();
+  if (isSuccess) navigate(ROUTE_PATH.signIn);
+
+  const handleSubmit = () => {
+    mutate(
+      { name, email, password },
+      {
+        onError: error => setPostErrorMessage(error.message),
+        onSuccess: () => setPostErrorMessage(''),
+      },
+    );
   };
 
   const handleMoveSignIn = () => {
@@ -81,7 +80,7 @@ const SignUpPage = () => {
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.keyCode === 13 && !disabled) {
+    if (event.key === 'Enter' && !disabled) {
       handleSubmit();
     }
   };