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: "" }, +};