feat: Modal 텍스트 상수화 및 적용

gamgyul-code · Aug 25, 2024 · 8c045f5 · 8c045f5
1 parent 9a66705
commit 8c045f5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/gamgyul-front/src/components/common/Modal/index.jsx b/gamgyul-front/src/components/common/Modal/index.jsx
@@ -3,8 +3,10 @@ import styled from "styled-components";
 import { theme } from "../../../style/theme";
 import { applyFontStyles } from "../../../utils/fontStyles";
 import Button from "../Button";
+import { COMMON_TEXT, MODAL_TEXT } from "../../../constants/String";
 
 const Modal = ({ onClose, onClick, type }) => {
+  const language = "KR";
   const [routeValue, setRouteValue] = useState("");
   const isSaveButtonDisabled = type === "SAVE" && routeValue.trim() === "";
   // 경로 삭제일 때 : 확인 => 경로 삭제 api 요청 / 취소 => 모달 닫기
@@ -13,11 +15,11 @@ const Modal = ({ onClose, onClick, type }) => {
   return (
     <ModalOverlayContainer>
       <ModalContents>
-        {type === "DELETE" && <ModalDeleteH2>경로를 삭제 하시겠어요?</ModalDeleteH2>}
+        {type === "DELETE" && <ModalDeleteH2>{MODAL_TEXT[language].ROUTE_DELETE_MESSAGE}</ModalDeleteH2>}
         {type === "SAVE" && (
           <ModalRoutesSection>
-            <h2>경로 이름</h2>
-            <p>경로를 저장하려면 이름이 필요합니다.</p>
+            <h2>{MODAL_TEXT[language].ROUTE_NAME}</h2>
+            <p>{MODAL_TEXT[language].ROUTE_NAME_MESSAGE}</p>
             <StyledInputBox
               type="text"
               id="route-input"
@@ -29,10 +31,10 @@ const Modal = ({ onClose, onClick, type }) => {
         )}
         <div>
           <StyledModalBtn type="small" onClick={onClose} color="gray">
-            취소
+            {COMMON_TEXT[language].CANCEL_BUTTON}
           </StyledModalBtn>
           <StyledModalBtn type="small" onClick={() => onClick(routeValue)} disabled={isSaveButtonDisabled}>
-            확인
+            {COMMON_TEXT[language].CHECK_BUTTON}
           </StyledModalBtn>
         </div>
       </ModalContents>
@@ -43,9 +45,10 @@ const Modal = ({ onClose, onClick, type }) => {
 const ModalDeleteH2 = styled.h2`
   width: 100%;
   padding: 0 8px;
-  margin-top: 80px;
+  margin-top: 56px;
   box-sizing: border-box;
   text-align: center;
+  white-space: pre-line;
 `;
 
 const ModalOverlayContainer = styled.div`

diff --git a/gamgyul-front/src/constants/String.jsx b/gamgyul-front/src/constants/String.jsx
@@ -45,3 +45,24 @@ export const ROUTE_COMPLETE_PAGE_TEXT = {
   JP: { ROUTE_COMPLETE_MESSAGE: "", ROUTE_COMPLETE_BUTTON: "" },
   CH: { ROUTE_COMPLETE_MESSAGE: "", ROUTE_COMPLETE_BUTTON: "" },
 };
+
+/** Modal String */
+export const MODAL_TEXT = {
+  EN: { ROUTE_NAME: "", ROUTE_NAME_MESSAGE: "", ROUTE_PLACEHOLDER: "", ROUTE_DELETE_MESSAGE: "" },
+  KR: {
+    ROUTE_NAME: "경로 이름",
+    ROUTE_NAME_MESSAGE: "경로를 저장하려면 이름이 필요합니다.",
+    ROUTE_PLACEHOLDER: "이름을 입력해주세요.",
+    ROUTE_DELETE_MESSAGE: "경로를 정말\n삭제 하시겠어요?",
+  },
+  JP: { ROUTE_NAME: "", ROUTE_NAME_MESSAGE: "", ROUTE_PLACEHOLDER: "", ROUTE_DELETE_MESSAGE: "" },
+  CH: { ROUTE_NAME: "", ROUTE_NAME_MESSAGE: "", ROUTE_PLACEHOLDER: "", ROUTE_DELETE_MESSAGE: "" },
+};
+
+/** Common String */
+export const COMMON_TEXT = {
+  EN: { CHECK_BUTTON: "", CANCEL_BUTTON: "" },
+  KR: { CHECK_BUTTON: "확인", CANCEL_BUTTON: "취소" },
+  JP: { CHECK_BUTTON: "", CANCEL_BUTTON: "" },
+  CH: { CHECK_BUTTON: "", CANCEL_BUTTON: "" },
+};