From 8c045f5b9b529bf7d9137f91ce3f91fa4c91a11e Mon Sep 17 00:00:00 2001
From: seondy <seondy99@gmail.com>
Date: Sun, 25 Aug 2024 20:27:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Modal=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=ED=99=94=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Modal/index.jsx     | 15 +++++++------
 gamgyul-front/src/constants/String.jsx        | 21 +++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/gamgyul-front/src/components/common/Modal/index.jsx b/gamgyul-front/src/components/common/Modal/index.jsx
index 279f138..86bf485 100644
--- 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
index 0c26b74..aed3b87 100644
--- 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: "" },
+};