From 1c99204a553ca6107ce9e600bcfe0be2a4808cfe Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 18:08:04 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/auxiliary/AuxiliaryMove.jsx         | 42 +++++++++++++++----
 src/locales/ja.json                           |  4 +-
 src/locales/ko.json                           |  2 +
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
index 8b2aca85..db4ad159 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
+++ b/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>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 4740d5a0..ffdcb110 100644
--- a/src/locales/ja.json
+++ b/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)",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 05f4bcf3..1e8cb1bb 100644
--- a/src/locales/ko.json
+++ b/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": "보조선 수직이등분선",