chore: 모달 content 상수파일 분리

Mile-Writings · Sep 12, 2024 · c36133b · c36133b
1 parent fc3f96c
commit c36133b
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 13 deletions.
diff --git a/src/pages/createGroup/CreateGroup.tsx b/src/pages/createGroup/CreateGroup.tsx
@@ -10,6 +10,7 @@ import { AuthorizationHeader, UnAuthorizationHeader } from '../../components/com
 import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/DefaultModal';
 import { DEFAULT_IMG_URL } from '../../constants/defaultImgUrl';
 import useModal from '../../hooks/useModal';
+import { MODAL } from './constants/modalContent';
 
 type CreateGroupAction =
   | { type: 'setGroupName'; value: string }
@@ -194,10 +195,14 @@ const CreateGroup = () => {
         isModalOpen={isModalOpen}
         onClickBg={handleCloseModal}
         sizeType="DEFAULT"
-        content={`생성 완료 시 필명 변경이 불가합니다. \n계속 하시겠습니까?`}
+        content={MODAL.ALERT_NICKNAME}
         modalImg="POST"
       >
-        <DefaultModalBtn type="POSITIVE" onClickLeft={handleCloseModal} onClickRight={createGroup} />
+        <DefaultModalBtn
+          type="POSITIVE"
+          onClickLeft={handleCloseModal}
+          onClickRight={createGroup}
+        />
       </DefaultModal>
     </CreateGroupWrapper>
   );

diff --git a/src/pages/createGroup/constants/modalContent.ts b/src/pages/createGroup/constants/modalContent.ts
@@ -0,0 +1,3 @@
+export const MODAL = {
+  ALERT_NICKNAME: `생성 완료 시 필명 변경이 불가합니다. \n계속 하시겠습니까?`,
+};
diff --git a/src/pages/groupFeed/components/CreateGroupBtn.tsx b/src/pages/groupFeed/components/CreateGroupBtn.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { MakeGroupPlusBtn, MakeGroupPlusHoverBtn } from '../../../assets/svgs';
 import { FullModal, FullModalBtn } from '../../../components/commons/modal/FullModal';
 import useModal from '../../../hooks/useModal';
+import { MODAL } from '../constants/modalContent';
 
 interface groupCountProps {
   groupCount: number;
@@ -35,7 +36,7 @@ const CreateGroupBtn = ({ groupCount }: groupCountProps) => {
       </CreateGroupBtnWrapper>
       <FullModal
         isModalOpen={isModalOpen}
-        content="글모임은 최대 5개까지 가입할 수 있습니다."
+        content={MODAL.ALERT_GROUP_LIMIT}
         onClickBg={handleCloseModal}
       >
         <FullModalBtn

diff --git a/src/pages/groupFeed/constants/modalContent.ts b/src/pages/groupFeed/constants/modalContent.ts
@@ -0,0 +1,4 @@
+export const MODAL = {
+    ALERT_GROUP_LIMIT: `글모임은 최대 5개까지 가입할 수 있습니다.`,
+  };
+
diff --git a/src/pages/groupInvite/GroupInvite.tsx b/src/pages/groupInvite/GroupInvite.tsx
@@ -12,6 +12,7 @@ import { useGetGroupInfo } from './hooks/queries';
 import { useFetchHeaderGroup } from '../groupFeed/hooks/queries';
 import { FullModal, FullModalBtn } from '../../components/commons/modal/FullModal';
 import useModal from '../../hooks/useModal';
+import { MODAL } from './constants/modalContent';
 
 const GroupInvite = () => {
   const navigate = useNavigate();
@@ -79,7 +80,7 @@ const GroupInvite = () => {
         <Spacing marginBottom="7.7" />
       </GroupInviteWrapper>
 
-      <FullModal isModalOpen={isModalOpen} content="글모임은 최대 5개까지 가입할 수 있습니다.">
+      <FullModal isModalOpen={isModalOpen} content={MODAL.ALERT_GROUP_LIMIT}>
         <FullModalBtn
           isPrimary={false}
           content="확인"

diff --git a/src/pages/groupInvite/components/UserInfoInput.tsx b/src/pages/groupInvite/components/UserInfoInput.tsx
@@ -8,6 +8,7 @@ import { useGetWriterNameConflict, usePostGroupMemberJoin } from '../hooks/queri
 import { DefaultModal, DefaultModalBtn } from '../../../components/commons/modal/DefaultModal';
 import Spacing from '../../../components/commons/Spacing';
 import useModal from '../../../hooks/useModal';
+import { MODAL } from '../constants/modalContent';
 
 interface userInfoStateType {
   writerName?: string;
@@ -210,7 +211,7 @@ const UserInfoInput = (props: UserInfoInputPropTypes) => {
       <DefaultModal
         isModalOpen={isModalOpen}
         onClickBg={handleCloseModal}
-        content={`가입 완료 시 필명 변경이 불가합니다. \n계속 하시겠습니까?`}
+        content={MODAL.ALERT_NICKNAME}
         modalImg="POST"
       >
         <DefaultModalBtn

diff --git a/src/pages/groupInvite/constants/modalContent.ts b/src/pages/groupInvite/constants/modalContent.ts
@@ -0,0 +1,4 @@
+export const MODAL = {
+  ALERT_NICKNAME: `가입 완료 시 필명 변경이 불가합니다. \n계속 하시겠습니까?`,
+  ALERT_GROUP_LIMIT: `글모임은 최대 5개까지 가입할 수 있습니다.`,
+};
diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx
@@ -26,6 +26,7 @@ import CuriousBtn from './components/CuriousBtn';
 import { useCheckPostAuth, useDeletePost, useGetPostDetail } from './hooks/queries';
 import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/DefaultModal';
 import useModal from '../../hooks/useModal';
+import { MODAL } from './constants/modalContent';
 
 const PostDetail = () => {
   const navigate = useNavigate();
@@ -189,7 +190,7 @@ const PostDetail = () => {
       <DefaultModal
         isModalOpen={isModalOpen}
         onClickBg={handleCloseModal}
-        content={modalType === 'DELETE' ? `정말로 삭제하시겠어요?` : `정말로 수정하시겠어요?`}
+        content={modalType === 'DELETE' ? MODAL.POST_DELETE : MODAL.POST_EDIT}
         modalImg={modalType === 'DELETE' ? 'DELETE' : 'EDIT'}
       >
         <DefaultModalBtn

diff --git a/src/pages/postDetail/constants/modalContent.ts b/src/pages/postDetail/constants/modalContent.ts
@@ -0,0 +1,4 @@
+export const MODAL = {
+  POST_DELETE: `정말로 삭제하시겠어요?`,
+  POST_EDIT: `정말로 수정하시겠어요?`,
+};
diff --git a/src/pages/postPage/PostPage.tsx b/src/pages/postPage/PostPage.tsx
@@ -31,6 +31,7 @@ import { DefaultModal, DefaultModalBtn } from '../../components/commons/modal/De
 import { FullModal, FullModalBtn } from '../../components/commons/modal/FullModal';
 import Spacing from '../../components/commons/Spacing';
 import useModal from '../../hooks/useModal';
+import { MODAL } from './constants/modalContent';
 
 // editor content API 관련
 interface editorStateType {
@@ -394,7 +395,7 @@ const PostPage = () => {
       case 'tempSave':
         return {
           ...state,
-          title: '임시저장 하시겠습니까?',
+          title: MODAL.TEMP_SAVE,
           leftBtnText: '아니오',
           leftBtnFn: () => handleCloseModal(),
           rightBtnText: '예',
@@ -406,7 +407,7 @@ const PostPage = () => {
       case 'postContent':
         return {
           ...state,
-          title: '제출이 완료되었습니다',
+          title: MODAL.POST_CONTENT,
           leftBtnText: '홈으로 가기',
           leftBtnFn: () => navigate(`/group/${groupId}`),
           rightBtnText: '글 확인하기',
@@ -418,7 +419,7 @@ const PostPage = () => {
       case 'putTempSaveContent':
         return {
           ...state,
-          title: '제출이 완료되었습니다',
+          title: MODAL.POST_CONTENT,
           leftBtnText: '홈으로 가기',
           leftBtnFn: () => navigate('/'),
           rightBtnText: '글 확인하기',
@@ -430,7 +431,7 @@ const PostPage = () => {
       case 'putNewTempSaveContent':
         return {
           ...state,
-          title: '이미 임시저장된 글이 있습니다. \n덮어쓰시겠습니까?',
+          title: MODAL.PUT_NEW_TEMP_SAVE_CONTENT,
           leftBtnText: '예',
           leftBtnFn: tempSaveHandler,
           rightBtnText: '아니오',
@@ -442,7 +443,7 @@ const PostPage = () => {
       case 'editContent':
         return {
           ...state,
-          title: '수정이 완료되었습니다.',
+          title: MODAL.EDIT_CONTENT,
           leftBtnText: '홈으로 가기',
           leftBtnFn: () => navigate('/'),
           rightBtnText: '글 확인하기',
@@ -454,7 +455,7 @@ const PostPage = () => {
       case 'exitEditPage':
         return {
           ...state,
-          title: '작성 중이 글이 있습니다. \n 페이지를 나가시겠습니까?',
+          title: MODAL.EXIT_EDIT_PAGE,
           leftBtnText: '예',
           leftBtnFn: () => navigate(`/group/${groupId}`),
           rightBtnText: '아니오',
@@ -585,7 +586,7 @@ const PostPage = () => {
       <Spacing marginBottom="8" />
 
       {/* 임시저장 이어쓰기 관련 모달 */}
-      <FullModal isModalOpen={showTempContinueModal} content="임시 저장된 글을 계속 이어 쓸까요?">
+      <FullModal isModalOpen={showTempContinueModal} content={MODAL.TEMP_CONTINUE}>
         <FullModalBtn isPrimary={true} content="새로 쓰기" onClick={onClickNewPostBtn} />
         <FullModalBtn isPrimary={false} content="이어 쓰기" onClick={onClickContinueTempBtn} />
         <Spacing marginBottom="0.2" />

diff --git a/src/pages/postPage/constants/modalContent.ts b/src/pages/postPage/constants/modalContent.ts
@@ -0,0 +1,9 @@
+export const MODAL = {
+    TEMP_SAVE: `임시저장 하시겠습니까?`,
+    POST_CONTENT: `제출이 완료되었습니다`,
+    PUT_NEW_TEMP_SAVE_CONTENT: `이미 임시저장된 글이 있습니다. \n덮어쓰시겠습니까?`,
+    EDIT_CONTENT: `수정이 완료되었습니다.`,
+    EXIT_EDIT_PAGE: `작성 중이 글이 있습니다. \n 페이지를 나가시겠습니까?`,
+    TEMP_CONTINUE: `임시 저장된 글을 계속 이어 쓸까요?`,
+  };
+