Merge pull request #856 from KEEPER31337/feature/helper_text_constant…

…s로_빼기_#847

Feature/helper text constants로 빼기 #847

src/constants/helperText.ts

@@ -0,0 +1,62 @@
+export const COMMON = {
+  success: {},
+  error: {
+    required: '필수 정보입니다.',
+    onlyNumber: '숫자만 입력 가능합니다.',
+    onlyHttps: 'https:// 로 시작해야 합니다.',
+    minLength: (min: number) => `${min}글자 이상 입력해주세요.` as const,
+    maxLength: (max: number) => `최대 글자수 ${max}글자를 초과했습니다.` as const,
+  },
+} as const;
+
+export const EMAIL_MSG = {
+  success: {},
+  error: {
+    formatError: '이메일 형식을 확인해주세요.',
+  },
+} as const;
+
+export const CONFIRM_PASSWORD_MSG = {
+  success: {
+    match: '비밀번호가 일치합니다.',
+  },
+  error: {
+    mismatch: '비밀번호가 일치하지 않습니다.',
+    formatError: '8~20자 영문과 숫자를 사용하세요.',
+  },
+} as const;
+
+export const NAME_MSG = {
+  success: {},
+  error: {
+    formatError: '1~20자 한글, 영어만 가능합니다.',
+  },
+} as const;
+
+export const SEND_POINT_MSG = {
+  success: {},
+  error: {
+    overMaxValue: '보유 포인트보다 많은 포인트를 보낼 수 없습니다.',
+  },
+} as const;
+
+export const LOGIN_ID_MSG = {
+  success: {},
+  error: {
+    formatError: '4~12자 영어, 숫자, _ 만 가능합니다.',
+  },
+} as const;
+
+export const STUDY_MSG = {
+  success: {},
+  error: {
+    onlyGitLink: '깃허브 링크만 입력이 가능합니다.',
+  },
+} as const;
+
+export const BOARD_MSG = {
+  success: {},
+  error: {
+    requiredPassword: '작성자가 아니면 비밀번호가 필요합니다.',
+  },
+};

src/pages/Profile/Modal/EditAccountModal.tsx

@@ -14,7 +14,7 @@ import {
   useWithdrawalMutation,
 } from '@api/memberApi';
 import { useCheckEmailDuplicationQuery } from '@api/signUpApi';
-import { REQUIRE_ERROR_MSG } from '@constants/errorMsg';
+import { COMMON, EMAIL_MSG, PASSWORD_MSG } from '@constants/helperText';
 import memberState from '@recoil/member.recoil';
 import { emailRegex } from '@utils/validateEmail';
 import FilledButton from '@components/Button/FilledButton';
@@ -97,7 +97,7 @@ const EditEmailSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: '필수 정보입니다.',
+            required: COMMON.error.required,
           }}
           render={({ field, fieldState: { error } }) => {
             return (
@@ -117,10 +117,10 @@ const EditEmailSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: REQUIRE_ERROR_MSG,
+            required: COMMON.error.required,
             pattern: {
               value: emailRegex,
-              message: '이메일 주소를 다시 확인해주세요.',
+              message: EMAIL_MSG.error.formatError,
             },
           }}
           render={({ field, fieldState: { error, isDirty } }) => {
@@ -144,7 +144,7 @@ const EditEmailSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: REQUIRE_ERROR_MSG,
+            required: COMMON.error.required,
           }}
           render={({ field, fieldState: { error } }) => {
             return (
@@ -206,7 +206,7 @@ const EditPasswordSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: '필수 정보입니다.',
+            required: COMMON.error.required,
           }}
           render={({ field, fieldState: { error } }) => {
             return (
@@ -226,14 +226,14 @@ const EditPasswordSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: '필수 정보입니다.',
+            required: COMMON.error.required,
             minLength: {
               value: 8,
-              message: '8글자 이상 입력해주세요.',
+              message: COMMON.error.minLength(8),
             },
             pattern: {
               value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,20}$/,
-              message: '8~20자 영문과 숫자를 사용하세요.',
+              message: PASSWORD_MSG.error.formatError,
             },
           }}
           render={({ field, fieldState: { error } }) => {
@@ -254,11 +254,11 @@ const EditPasswordSection = () => {
           defaultValue=""
           control={control}
           rules={{
-            required: '필수 정보입니다.',
+            required: COMMON.error.required,
             validate: {
               confirmMatchPassward: (value) => {
-                if (getValues('newPassword') !== value) return '비밀번호가 일치하지 않습니다.';
-                setPasswordConfirmSuccessMsg('비밀번호가 일치합니다.');
+                if (getValues('newPassword') !== value) return PASSWORD_MSG.error.incorrect;
+                setPasswordConfirmSuccessMsg(PASSWORD_MSG.success.correct);
                 return undefined;
               },
             },
@@ -348,7 +348,7 @@ const EditAccountModal = ({ open, onClose }: EditAccountModalProps) => {
             defaultValue=""
             control={control}
             rules={{
-              required: '필수 정보입니다.',
+              required: COMMON.error.required,
             }}
             render={({ field, fieldState: { error } }) => {
               return (

src/pages/Profile/Modal/EditProfileModal.tsx

@@ -3,7 +3,7 @@ import { Controller, FieldValues, SubmitHandler, useForm } from 'react-hook-form
 import { Stack } from '@mui/material';
 import { ProfileInfo } from '@api/dto';
 import { useEditProfileMutation, useEditProfileThumbnailMutation } from '@api/memberApi';
-import { REQUIRE_ERROR_MSG } from '@constants/errorMsg';
+import { COMMON, NAME_MSG } from '@constants/helperText';
 import StandardDatePicker from '@components/DatePicker/StandardDatePicker';
 import StandardInput from '@components/Input/StandardInput';
 import ActionModal from '@components/Modal/ActionModal';
@@ -65,14 +65,14 @@ const EditProfileModal = ({ profileInfo, open, onClose }: EditProfileModalProps)
             defaultValue={profileInfo.realName}
             control={control}
             rules={{
-              required: REQUIRE_ERROR_MSG,
+              required: COMMON.error.required,
               maxLength: {
                 value: NAME_MAX_LENGTH,
-                message: `이름은 최대 ${NAME_MAX_LENGTH}글자 입력이 가능합니다.`,
+                message: COMMON.error.maxLength(NAME_MAX_LENGTH),
               },
               pattern: {
                 value: /^[가-힣a-zA-Z]{1,20}$/,
-                message: '1~20자 한글, 영어만 가능합니다.',
+                message: NAME_MSG.error.formatError,
               },
             }}
             render={({ field, fieldState: { error } }) => {

src/pages/Profile/Modal/SendPointModal.tsx

@@ -4,7 +4,7 @@ import { InputLabel } from '@mui/material';
 import { useRecoilValue } from 'recoil';
 import { useGetProfileQuery } from '@api/memberApi';
 import { useSendPointMutation } from '@api/pointApi';
-import { REQUIRE_ERROR_MSG } from '@constants/errorMsg';
+import { COMMON, SEND_POINT_MSG } from '@constants/helperText';
 import memberState from '@recoil/member.recoil';
 import StandardInput from '@components/Input/StandardInput';
 import ActionModal from '@components/Modal/ActionModal';
@@ -69,14 +69,14 @@ const SendPointModal = ({ open, onClose, sendTo }: SendPointModalProps) => {
               defaultValue={1}
               control={control}
               rules={{
-                required: REQUIRE_ERROR_MSG,
+                required: COMMON.error.required,
                 max: {
                   value: profileInfo.point,
-                  message: '보유 포인트보다 많은 포인트를 보낼 수 없습니다.',
+                  message: SEND_POINT_MSG.error.overMaxValue,
                 },
                 pattern: {
                   value: /^[0-9]+$/,
-                  message: '숫자만 입력 가능합니다.',
+                  message: COMMON.error.onlyNumber,
                 },
               }}
               render={({ field, fieldState: { error } }) => (
@@ -97,10 +97,10 @@ const SendPointModal = ({ open, onClose, sendTo }: SendPointModalProps) => {
               defaultValue=""
               control={control}
               rules={{
-                required: REQUIRE_ERROR_MSG,
+                required: COMMON.error.required,
                 maxLength: {
                   value: SEND_POINT_MAX_LENGTH,
-                  message: `최대 ${SEND_POINT_MAX_LENGTH}글자 입력이 가능합니다.`,
+                  message: COMMON.error.maxLength(SEND_POINT_MAX_LENGTH),
                 },
               }}
               render={({ field, fieldState: { error } }) => (

src/pages/SignUp/Section/SignUpFirstInputSection.tsx

@@ -6,6 +6,7 @@ import { VscCheck } from 'react-icons/vsc';
 import { useSetRecoilState } from 'recoil';
 
 import { signUpKeys, useCheckLoginIdDuplicationQuery } from '@api/signUpApi';
+import { COMMON, LOGIN_ID_MSG, PASSWORD_MSG } from '@constants/helperText';
 import FilledButton from '@components/Button/FilledButton';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import StandardInput from '@components/Input/StandardInput';
@@ -71,14 +72,14 @@ const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProp
         defaultValue=""
         control={control}
         rules={{
-          required: '필수 정보입니다.',
+          required: COMMON.error.required,
           minLength: {
             value: 4,
-            message: '4글자 이상 입력해주세요.',
+            message: COMMON.error.minLength(4),
           },
           pattern: {
             value: /^[a-zA-Z0-9_]{4,12}$/,
-            message: '4~12자 영어, 숫자, _ 만 가능합니다.',
+            message: LOGIN_ID_MSG.error.formatError,
           },
         }}
         render={({ field, fieldState: { error, isDirty } }) => {
@@ -107,14 +108,14 @@ const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProp
         defaultValue=""
         control={control}
         rules={{
-          required: '필수 정보입니다.',
+          required: COMMON.error.required,
           minLength: {
             value: 8,
-            message: '8글자 이상 입력해주세요.',
+            message: COMMON.error.minLength(8),
           },
           pattern: {
             value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,20}$/,
-            message: '8~20자 영문과 숫자를 사용하세요.',
+            message: PASSWORD_MSG.error.formatError,
           },
         }}
         render={({ field, fieldState: { error } }) => {
@@ -135,11 +136,11 @@ const SignUpFirstInputSection = ({ setCurrentStep }: SignUpFirstInputSectionProp
         defaultValue=""
         control={control}
         rules={{
-          required: '필수 정보입니다.',
+          required: COMMON.error.required,
           validate: {
             confirmMatchPassward: (value) => {
-              if (getValues('password') !== value) return '비밀번호가 일치하지 않습니다.';
-              setPasswordConfirmSuccessMsg('비밀번호가 일치합니다.');
+              if (getValues('password') !== value) return PASSWORD_MSG.error.incorrect;
+              setPasswordConfirmSuccessMsg(PASSWORD_MSG.success.correct);
               return undefined;
             },
           },

src/pages/SignUp/Section/SignUpSecondInputSection.tsx

@@ -5,7 +5,7 @@ import { Stack } from '@mui/material';
 import { VscCheck } from 'react-icons/vsc';
 import { useSetRecoilState } from 'recoil';
 import { signUpKeys, useCheckStudentIdDuplicationQuery } from '@api/signUpApi';
-import { NUMBER_ERROR_MSG, REQUIRE_ERROR_MSG } from '@constants/errorMsg';
+import { COMMON, NAME_MSG } from '@constants/helperText';
 import FilledButton from '@components/Button/FilledButton';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import StandardDatePicker from '@components/DatePicker/StandardDatePicker';
@@ -78,14 +78,14 @@ const SignUpSecondInputSection = ({ setCurrentStep }: SignUpFirstInputSectionPro
         defaultValue=""
         control={control}
         rules={{
-          required: REQUIRE_ERROR_MSG,
+          required: COMMON.error.required,
           maxLength: {
             value: NAME_MAX_LENGTH,
-            message: `이름은 최대 ${NAME_MAX_LENGTH}글자 입력이 가능합니다.`,
+            message: COMMON.error.maxLength(NAME_MAX_LENGTH),
           },
           pattern: {
             value: /^[가-힣a-zA-Z]{1,20}$/,
-            message: '1~20자 한글, 영어만 가능합니다.',
+            message: NAME_MSG.error.formatError,
           },
         }}
         render={({ field, fieldState: { error } }) => {
@@ -99,10 +99,10 @@ const SignUpSecondInputSection = ({ setCurrentStep }: SignUpFirstInputSectionPro
         defaultValue=""
         control={control}
         rules={{
-          required: REQUIRE_ERROR_MSG,
+          required: COMMON.error.required,
           pattern: {
             value: /^[0-9]+$/,
-            message: NUMBER_ERROR_MSG,
+            message: COMMON.error.onlyNumber,
           },
         }}
         render={({ field, fieldState: { error, isDirty } }) => {

src/pages/SignUp/Section/SignUpThirdInputSection.tsx

@@ -6,7 +6,7 @@ import { Stack, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import { useRecoilValue } from 'recoil';
 import { useCheckEmailDuplicationQuery, useEmailAuthMutation, useSignUpMutation } from '@api/signUpApi';
-import { REQUIRE_ERROR_MSG } from '@constants/errorMsg';
+import { COMMON, EMAIL_MSG } from '@constants/helperText';
 import { emailRegex } from '@utils/validateEmail';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import EmailAuthInput from '@components/Input/EmailAuthInput';
@@ -92,10 +92,10 @@ const SignUpThirdInputSection = () => {
         defaultValue=""
         control={control}
         rules={{
-          required: REQUIRE_ERROR_MSG,
+          required: COMMON.error.required,
           pattern: {
             value: emailRegex,
-            message: '이메일 주소를 다시 확인해주세요.',
+            message: EMAIL_MSG.error.formatError,
           },
         }}
         render={({ field, fieldState: { error, isDirty } }) => {
@@ -119,7 +119,7 @@ const SignUpThirdInputSection = () => {
         defaultValue=""
         control={control}
         rules={{
-          required: REQUIRE_ERROR_MSG,
+          required: COMMON.error.required,
         }}
         render={({ field, fieldState: { error } }) => {
           return (

src/pages/SignUp/SignUp.tsx

@@ -7,15 +7,15 @@ import SignUpFirstInputSection from './Section/SignUpFirstInputSection';
 import SignUpSecondInputSection from './Section/SignUpSecondInputSection';
 import SignUpThirdInputSection from './Section/SignUpThirdInputSection';
 
-const SignUp = () => {
-  const TOTAL_STEPS = 3;
+const TOTAL_STEPS = 3;
+const STEP_INFO_MESSAGE = {
+  1: '로그인에 사용할\n아이디와 비밀번호를 등록해 주세요.',
+  2: '프로필 정보를 등록해 주세요.',
+  3: '이메일 주소를 입력해주세요.\n입력한 이메일 주소로 인증 코드가 발송됩니다.',
+};
 
+const SignUp = () => {
   const [currentStep, setCurrentStep] = useState<1 | 2 | 3>(1);
-  const stepInfoMsg = {
-    1: '로그인에 사용할\n아이디와 비밀번호를 등록해 주세요.',
-    2: '프로필 정보를 등록해 주세요.',
-    3: '이메일 주소를 입력해주세요.\n입력한 이메일 주소로 인증 코드가 발송됩니다.',
-  };
 
   const stepInputSection = {
     1: <SignUpFirstInputSection setCurrentStep={setCurrentStep} />,
@@ -29,7 +29,7 @@ const SignUp = () => {
       <Box className="h-[560px] w-full border border-pointBlue px-10 py-14 sm:h-[492px] sm:w-[690px] sm:px-24">
         <Stack className="relative h-full w-full">
           <StepProgress className="mb-2 w-32" currentStep={currentStep} totalStep={TOTAL_STEPS} />
-          <Typography className="!mb-8 whitespace-pre !font-semibold">{stepInfoMsg[currentStep]}</Typography>
+          <Typography className="!mb-8 whitespace-pre !font-semibold">{STEP_INFO_MESSAGE[currentStep]}</Typography>
           {stepInputSection[currentStep]}
         </Stack>
       </Box>