refactor: 모달 메세지 상수화

src/components/Modal/customs/LoginRequireModal.jsx

@@ -2,9 +2,10 @@ import { Modal } from 'components';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import theme from 'styles/theme';
-
-const MODAL_TITLE_LOGIN_REQUIRED = '로그인이 필요한 서비스입니다.';
-const MODAL_DESCRIPTION_LOGIN_REQUIRED = '로그인 화면으로 이동하시겠어요?';
+import {
+  MODAL_TITLE_LOGIN_REQUIRED,
+  MODAL_DESCRIPTION_LOGIN_REQUIRED,
+} from 'utils/constants/messages';
 
 const LoginRequireModal = ({ visible, onClose }) => {
   const navigate = useNavigate();

src/pages/LoginPage/index.jsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import { useUserContext } from 'contexts/UserContext';
 import { PageWrapper, LoginForm, Modal, Logo } from 'components';
+import { MODAL_LOGIN_FAIL_TITLE, MODAL_LOGIN_FAIL_DESCRIPTION } from 'utils/constants/messages';
 
 const LoginWrapper = styled.div`
   width: 100%;
@@ -54,8 +55,8 @@ const LoginPage = () => {
         <LoginForm onSubmit={handleSubmit}></LoginForm>
         <Modal visible={showModal} onClose={closeModal}>
           <Modal.Content
-            title="로그인에 실패했어요!"
-            description="이메일 및 비밀번호를 다시 확인해 주세요."
+            title={MODAL_LOGIN_FAIL_TITLE}
+            description={MODAL_LOGIN_FAIL_DESCRIPTION}
             onClose={closeModal}
           ></Modal.Content>
           <Modal.Button onClick={closeModal}>확인</Modal.Button>

src/pages/MyInfoEditPage/index.jsx

@@ -4,6 +4,7 @@ import { Text, PageWrapper, Input, Modal } from 'components';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import theme from 'styles/theme';
+import { MODAL_CHANGE_PASSWORD_TITLE } from 'utils/constants/messages';
 
 const MyInfoEditPage = () => {
   const { onChangePassword } = useUserContext();
@@ -102,7 +103,7 @@ const MyInfoEditPage = () => {
         </UserInfo>
         {isModal && (
           <Modal visible={isModal} onClose={onClose}>
-            <Modal.Content title="비밀번호가 변경됐어요!" onClose={onClose} />
+            <Modal.Content title={MODAL_CHANGE_PASSWORD_TITLE} onClose={onClose} />
             <Modal.Button
               onClick={() => {
                 onClose();

src/pages/MyInfoPage/UserDetails.jsx

@@ -5,6 +5,7 @@ import { LOGOUT, KEY } from 'utils/constants/icons/names';
 import { useUserContext } from 'contexts/UserContext';
 import theme from 'styles/theme';
 import { useNavigate } from 'react-router-dom';
+import { MODAL_LOGOUT_DESCRIPTION, MODAL_LOGOUT_TITLE } from 'utils/constants/messages';
 
 const UserDetails = () => {
   const navigate = useNavigate();
@@ -70,8 +71,8 @@ const UserDetails = () => {
       {isLogoutModal && (
         <Modal visible={isLogoutModal} onClose={onCloseLogout}>
           <Modal.Content
-            title="로그아웃 하시겠어요?"
-            description="로그아웃 시 로그인 화면으로 이동됩니다."
+            title={MODAL_LOGOUT_TITLE}
+            description={MODAL_LOGOUT_DESCRIPTION}
             onClose={onCloseLogout}
           />
           <Modal.Button

src/pages/PostEditPage/index.jsx

@@ -7,6 +7,7 @@ import useLocalToken from 'hooks/useLocalToken';
 import { imageToFile } from 'utils/functions/converter';
 import theme from 'styles/theme';
 import { useUserContext } from 'contexts/UserContext';
+import { MODAL_UPLOAD_IMAGE_TITLE, MODAL_UPLOAD_POST_TITLE } from 'utils/constants/messages';
 
 const { headerHeight } = theme.value;
 
@@ -85,13 +86,13 @@ const PostEditPage = () => {
     }
 
     if (!defaultImg && !BinaryImg) {
-      setModalMessage('이미지를 등록해 주세요!');
+      setModalMessage(MODAL_UPLOAD_IMAGE_TITLE);
       setIsModal(true);
       return;
     }
 
     if (!content) {
-      setModalMessage('게시글을 작성해 주세요!');
+      setModalMessage(MODAL_UPLOAD_POST_TITLE);
       setIsModal(true);
       return;
     }

src/pages/SignupPage/index.jsx

@@ -3,6 +3,15 @@ import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import useLocalStorage from 'hooks/useLocalStorage';
+import {
+  MODAL_SIGNUP_TITLE,
+  MODAL_SIGNUP_DESCRIPTION,
+  MODAL_SIGNUP_FAIL_TITLE,
+  MODAL_SIGNUP_FAIL_DESCRIPTION,
+  MODAL_SIGNUP_FAIL_NETWORK,
+  MODAL_SIGNUP_FAIL_EMAIL,
+} from 'utils/constants/messages';
+
 import { useUserContext } from 'contexts/UserContext';
 
 const SignupWrapper = styled.div`
@@ -49,9 +58,9 @@ const SignupPage = () => {
     } catch (e) {
       e.message = 'SignupError';
       if (e.code === 'ERR_BAD_REQUEST') {
-        setDescription('이미 가입된 이메일입니다.');
+        setDescription(MODAL_SIGNUP_FAIL_EMAIL);
       } else if (e.code === 'ERR_NETWORK') {
-        setDescription('네트워크 연결이 불안정합니다.');
+        setDescription(MODAL_SIGNUP_FAIL_NETWORK);
       }
       setShowModal(true);
       throw e;
@@ -64,16 +73,16 @@ const SignupPage = () => {
         <SignupForm onSubmit={handleSubmit}></SignupForm>
         <Modal visible={showLoginModal} onClose={closeLoginModal}>
           <Modal.Content
-            title="회원가입에 성공했어요!"
-            description="자동 로그인되어 메인 페이지로 이동합니다."
+            title={MODAL_SIGNUP_TITLE}
+            description={MODAL_SIGNUP_DESCRIPTION}
             onClose={closeLoginModal}
           ></Modal.Content>
           <Modal.Button onClick={onClick}>확인</Modal.Button>
         </Modal>
         <Modal visible={showModal} onClose={closeModal}>
           <Modal.Content
-            title="회원가입에 실패했어요!"
-            description={description ? description : '이메일 및 비밀번호를 다시 확인해 주세요.'}
+            title={MODAL_SIGNUP_FAIL_TITLE}
+            description={description ? description : MODAL_SIGNUP_FAIL_DESCRIPTION}
             onClose={closeModal}
           ></Modal.Content>
           <Modal.Button onClick={closeModal}>확인</Modal.Button>

src/pages/UserPage/UserData.jsx

@@ -15,6 +15,12 @@ import {
   UserDetail,
   NickName,
 } from './style';
+import {
+  MODAL_FOLLOW_DESCRIPTION,
+  MODAL_FOLLOW_TITLE,
+  MODAL_UNFOLLOW_DESCRIPTION,
+  MODAL_UNFOLLOW_TITLE,
+} from 'utils/constants/messages';
 
 const UserData = ({ user, pageUserId, userLevel }) => {
   const { currentUser, onFollow, onUnfollow } = useUserContext();
@@ -137,17 +143,17 @@ const UserData = ({ user, pageUserId, userLevel }) => {
 
       <Modal visible={isFollowModal} onClose={onCloseFollow}>
         <Modal.Content
-          title="팔로우 성공!"
-          description="성공적으로 팔로잉 했어요"
+          title={MODAL_FOLLOW_TITLE}
+          description={MODAL_FOLLOW_DESCRIPTION}
           onClose={onCloseFollow}
         />
         <Modal.Button onClick={onCloseFollow}>확인</Modal.Button>
       </Modal>
 
       <Modal visible={isUnFollowModal} onClose={onCloseUnFollow}>
         <Modal.Content
-          title="언팔하시겠어요?"
-          description="언팔하시면 팔로잉 목록에서 사용자가 사라져요"
+          title={MODAL_UNFOLLOW_TITLE}
+          description={MODAL_UNFOLLOW_DESCRIPTION}
           onClose={onCloseUnFollow}
         />
         <Modal.Button

src/utils/constants/messages.js

@@ -0,0 +1,23 @@
+export const MODAL_LOGOUT_TITLE = '로그아웃 하시겠어요?';
+export const MODAL_LOGOUT_DESCRIPTION = '로그아웃 시 로그인 화면으로 이동됩니다.';
+export const MODAL_CHANGE_PASSWORD_TITLE = '비밀번호가 변경됐어요!';
+export const MODAL_FOLLOW_TITLE = '팔로우 성공!';
+export const MODAL_FOLLOW_DESCRIPTION = '성공적으로 팔로잉 했어요';
+export const MODAL_FOLLOW_FAIL_TITLE = '팔로우에 실패 했어요!';
+export const MODAL_FOLLOW_FAIL_DESCRIPTION = '이미 팔로우하고 있는 사용자입니다.';
+export const MODAL_UNFOLLOW_TITLE = '언팔하시겠어요?';
+export const MODAL_UNFOLLOW_DESCRIPTION = '언팔하시면 팔로잉 목록에서 사용자가 사라져요';
+export const MODAL_UPLOAD_IMAGE_TITLE = '이미지를 등록해 주세요!';
+export const MODAL_UPLOAD_IMAGE_DESCRIPTION =
+  '2MB 이하의 jpg, jpeg, gif, png 파일만 등록가능합니다.';
+export const MODAL_UPLOAD_POST_TITLE = '게시글을 작성해 주세요!';
+export const MODAL_LOGIN_FAIL_TITLE = '로그인에 실패했어요!';
+export const MODAL_LOGIN_FAIL_DESCRIPTION = '이메일 및 비밀번호를 다시 확인해 주세요.';
+export const MODAL_SIGNUP_TITLE = '회원가입에 성공했어요!';
+export const MODAL_SIGNUP_DESCRIPTION = '자동 로그인되어 메인 페이지로 이동합니다.';
+export const MODAL_SIGNUP_FAIL_TITLE = '회원가입에 실패했어요!';
+export const MODAL_SIGNUP_FAIL_DESCRIPTION = '이메일 및 비밀번호를 다시 확인해 주세요.';
+export const MODAL_SIGNUP_FAIL_NETWORK = '네트워크 연결이 불안정합니다.';
+export const MODAL_SIGNUP_FAIL_EMAIL = '이미 가입된 이메일입니다.';
+export const MODAL_TITLE_LOGIN_REQUIRED = '로그인이 필요한 서비스입니다.';
+export const MODAL_DESCRIPTION_LOGIN_REQUIRED = '로그인 화면으로 이동하시겠어요?';