보조선 이동 다국어 적용

src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx

@@ -5,27 +5,29 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function AuxiliaryMove(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">補助線の移動 </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">移動する方向を入力してください</div>
+          <div className="grid-option-tit">{getMessage('modal.auxiliary.move.info')}</div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="move-form">
-                <p className="mb5">長さ</p>
+                <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
@@ -40,15 +42,39 @@ export default function AuxiliaryMove(props) {
                 </div>
               </div>
               <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
+                <button
+                  className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('↑')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('↓')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('←')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                  }}
+                ></button>
+                <button
+                  className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
+                  onClick={() => {
+                    setArrow1('→')
+                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                  }}
+                ></button>
               </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

src/locales/ja.json

@@ -293,7 +293,9 @@
   "contextmenu.select.move": "선택・이동(JA)",
   "contextmenu.wallline.remove": "외벽선 삭제(JA)",
   "contextmenu.size.edit": "サイズ変更",
-  "contextmenu.auxiliary.move": "보조선 이동(JA)",
+  "contextmenu.auxiliary.move": "補助線の移動",
+  "modal.auxiliary.move": "補助線の移動",
+  "modal.auxiliary.move.info": "移動する方向を入力してください",
   "contextmenu.auxiliary.copy": "보조선 복사(JA)",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",

src/locales/ko.json

@@ -299,6 +299,8 @@
   "contextmenu.wallline.remove": "외벽선 삭제",
   "contextmenu.size.edit": "사이즈 변경",
   "contextmenu.auxiliary.move": "보조선 이동",
+  "modal.auxiliary.move": "보조선 이동",
+  "modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
   "contextmenu.auxiliary.copy": "보조선 복사",
   "contextmenu.auxiliary.remove": "보조선 삭제",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",