From d079fe5948e66dea7d6caedddde9b353ae9f3a13 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 22 Oct 2024 10:09:43 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_contents.scss | 5 ++++-
 src/styles/_modal.scss    | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index ee823bab..f70745b3 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -424,8 +424,11 @@
     // &::-webkit-scrollbar-track {
     //     background-color: #fff;
     // }
-    canvas{
+    .canvas-container{
+        margin: 0 auto;
         background-color: #fff;
+    }
+    canvas{
         position: absolute;
         top: 0;
         left: 0;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 5a8167eb..9dc39b65 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1629,7 +1629,7 @@ $alert-color: #101010;
         min-height: 80px;
         background-color: #fff;
     }
-
+    
 }
 
 // 치수선 설정

From 30267703e7a8956fc8047a444f422d91dc12c1f4 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 22 Oct 2024 10:13:17 +0900
Subject: [PATCH 2/3] =?UTF-8?q?usePopup=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/font/FontSetting.jsx    | 24 +++++-----
 .../floor-plan/modal/grid/DotLineGrid.jsx     |  6 +--
 .../floor-plan/modal/setting01/GridOption.jsx | 43 ++++++++++++-----
 .../modal/setting01/SecondOption.jsx          | 46 ++++++++++++++++---
 .../dimensionLine/DimensionLineSetting.jsx    | 29 ++++++++----
 src/hooks/usePopup.js                         |  6 +++
 src/locales/ja.json                           |  8 ++++
 src/locales/ko.json                           |  8 ++++
 8 files changed, 128 insertions(+), 42 deletions(-)

diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx
index 0e4754b0..d4896ab3 100644
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@@ -2,6 +2,7 @@ import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
 import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },
@@ -42,7 +43,8 @@ const fontColors = [
   { name: '남색', value: 'darkblue' },
 ]
 export default function FontSetting(props) {
-  const { id, setIsShow, font, setFont, fontSize, setFontSize } = props
+  const { id, setIsShow, font, setFont, fontSize, setFontSize, pos = { x: 455, y: 180 } } = props
+  const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [originFont, setOriginFont] = useState(font)
   const [originFontSize, setOriginFontSize] = useState(fontSize)
@@ -50,10 +52,10 @@ export default function FontSetting(props) {
   const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
   const [selectedFontColor, setSelectedFontColor] = useState(null)
   return (
-    <WithDraggable isShow={true} pos={{ x: 455, y: 180 }}>
-      <div className={`modal-pop-wrap lrr`}>
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap lrr mount`}>
         <div className="modal-head">
-          <h1 className="title">フォント </h1>
+          <h1 className="title">{getMessage('modal.font')} </h1>
           <button
             className="modal-close"
             onClick={() => {
@@ -68,32 +70,32 @@ export default function FontSetting(props) {
           <div className="slope-wrap">
             <div className="font-option-warp">
               <div className="font-option-item">
-                <div className="option-item-tit">文字(F)</div>
+                <div className="option-item-tit">{getMessage('modal.font')}(F)</div>
                 <div className="grid-select">
                   <QSelectBox options={fonts} value={selectedFont} onChange={(e) => setSelectedFont(e)} />
                 </div>
               </div>
               <div className="font-option-item">
-                <div className="option-item-tit">フォントスタイル(Y)</div>
+                <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
                 <div className="grid-select">
                   <QSelectBox options={fontOptions} onChange={(e) => setSelectedFont(e)} />
                 </div>
               </div>
               <div className="font-option-item">
-                <div className="option-item-tit">サイズ(S)</div>
+                <div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
                 <div className="grid-select">
                   <QSelectBox options={fontSizes} value={selectedFontSize} onChange={(e) => setSelectedFontSize(e)} />
                 </div>
               </div>
               <div className="font-option-item">
-                <div className="option-item-tit">フォン</div>
+                <div className="option-item-tit">{getMessage('modal.font.color')}</div>
                 <div className="grid-select">
                   <QSelectBox title={''} options={fontColors} value={selectedFontColor} onChange={(e) => setSelectedFontColor(e)} />
                 </div>
               </div>
             </div>
             <div className="font-ex-wrap">
-              <div className="font-ex-tit">見る</div>
+              <div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
               <div className="font-ex-box">
                 <span
                   style={{
@@ -107,7 +109,7 @@ export default function FontSetting(props) {
                 </span>
               </div>
             </div>
-            <div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
+            <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
           </div>
           <div className="grid-btn-wrap">
             <button
@@ -119,7 +121,7 @@ export default function FontSetting(props) {
                 closePopup(id)
               }}
             >
-              ストレージ
+              {getMessage('modal.common.save')}
             </button>
           </div>
         </div>
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index ed9ffa21..376cac03 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -21,7 +21,7 @@ export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
-  const { id, setShowDotLineGridModal } = props
+  const { id, setIsShow, pos = { x: 840, y: -815 } } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
   const gridColor = useRecoilValue(gridColorState)
   const canvas = useRecoilValue(canvasState)
@@ -311,14 +311,14 @@ export default function DotLineGrid(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 840, y: -815 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
           <button
             className="modal-close"
             onClick={() => {
-              setShowDotLineGridModal(false)
+              setIsShow(false)
               closePopup(id)
             }}
           >
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index ca8e4f92..39e721fc 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -22,23 +22,32 @@ export default function GridOption() {
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
   const { addPopup, closePopup } = usePopup()
-  let [colorId, dotLineId] = ''
+  // const [colorId, setColorId] = useState(uuidv4())
+  // const [dotLineId, setDotLineId] = useState(uuidv4())
+
+  let colorId = null
+  let dotLineId = null
+
+  useEffect(() => {
+    colorId = uuidv4()
+    dotLineId = uuidv4()
+  }, [])
 
   useEffect(() => {
-    console.log('GridOption useEffect 실행')
-    console.log(color)
     setGridColor(color.hex)
   }, [color])
 
   useEffect(() => {
-    console.log(showColorPickerModal)
     gridOptions[3].selected = showColorPickerModal
     setGridOptions([...gridOptions])
   }, [showColorPickerModal])
 
   useEffect(() => {
-    colorId = uuidv4()
-    dotLineId = uuidv4()
+    gridOptions[2].selected = showDotLineGridModal
+    setGridOptions([...gridOptions])
+  }, [showDotLineGridModal])
+
+  useEffect(() => {
     return () => {
       setSettingModalGridOptions((prev) => {
         const newSettingOptions = [...prev]
@@ -50,7 +59,7 @@ export default function GridOption() {
 
   const onClickOption = (option) => {
     const newGridOptions = [...gridOptions]
-
+    console.log(colorId, dotLineId)
     newGridOptions.map((item) => {
       if (item.id === option.id) {
         item.selected = !item.selected
@@ -67,10 +76,8 @@ export default function GridOption() {
     if (option.id === 2) {
       // 점.선 그리드
       if (option.selected) {
-        setShowDotLineGridModal(true)
-        addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
+        addPopup(dotLineId, 2, <DotLineGrid {...dotListGridProps} />)
       } else {
-        setShowDotLineGridModal(false)
         closePopup(dotLineId)
       }
     }
@@ -85,7 +92,7 @@ export default function GridOption() {
       // 그리드 색 설정
       if (option.selected) {
         setShowColorPickerModal(true)
-        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
+        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
       } else {
         setShowColorPickerModal(false)
         closePopup(colorId)
@@ -95,11 +102,25 @@ export default function GridOption() {
     setGridOptions(newGridOptions)
   }
 
+  const dotListGridProps = {
+    id: dotLineId,
+    setIsShow: setShowDotLineGridModal,
+    pos: {
+      x: 845,
+      y: 180,
+    },
+  }
+
   const colorPickerProps = {
+    id: colorId,
     color: gridColor,
     setColor: setGridColor,
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
+    pos: {
+      x: 785,
+      y: 180,
+    },
   }
 
   return (
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index 0efb2aab..ca5edc32 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -9,6 +9,7 @@ import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimens
 import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import FontSetting from '@/components/common/font/FontSetting'
+import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
 
 export default function SecondOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@@ -22,9 +23,10 @@ export default function SecondOption() {
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
   const { swalFire } = useSwal()
-  const { addPopup } = usePopup()
+  const { addPopup, closePopup, closePopups } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
+  const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
@@ -134,14 +136,21 @@ export default function SecondOption() {
     }
     setAdsorptionRange(option.range)
   }
-  const dimensionId = uuidv4()
-  const fontId = uuidv4()
+  let dimensionId = null
+  let fontId = null
+  let planSizeId = null
   const [pixel, setPixel] = useState(1)
   const [color, setColor] = useState('#FF0000')
   const [font, setFont] = useState(null)
   const [fontSize, setFontSize] = useState('#FF0000')
   const [fontColor, setFontColor] = useState('#FF0000')
 
+  useEffect(() => {
+    dimensionId = uuidv4()
+    fontId = uuidv4()
+    planSizeId = uuidv4()
+  }, [])
+
   const dimensionProps = {
     color,
     setColor,
@@ -158,19 +167,42 @@ export default function SecondOption() {
     setIsShow: setShowDimensionLineSettingModal,
   }
 
+  const [horizon, setHorizon] = useState(1600)
+  const [vertical, setVertical] = useState(1600)
+  const planSizeProps = {
+    id: planSizeId,
+    horizon,
+    setHorizon,
+    vertical,
+    setVertical,
+    setIsShow: setShowPlanSizeSettingModal,
+    pos: { x: 1020, y: 180 },
+  }
+
   const handlePopup = (type) => {
     const id = uuidv4()
 
     switch (type) {
       case 'dimensionLine':
-        setShowDimensionLineSettingModal(true)
-        addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        if (!showDimensionLineSettingModal) {
+          setShowDimensionLineSettingModal(true)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+        } else {
+          setShowDimensionLineSettingModal(false)
+          closePopups([dimensionId, fontId])
+        }
+
         break
       case 'font1': //문자 글꼴변경
       case 'font2': //흐름 방향 글꼴 변경
       case 'font3': //치수 글꼴변경
       case 'font4': //회로번호 글꼴변경
-        addPopup(fontId, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
+        addPopup(fontId, 2, <FontSetting id={fontId} setShowFontSettingModal={setShowFontSettingModal} />)
+        break
+      case 'planSize':
+        setShowPlanSizeSettingModal(true)
+        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
+        break
     }
   }
 
@@ -203,7 +235,7 @@ export default function SecondOption() {
           <button className={`arr-btn ${showDimensionLineSettingModal ? 'act' : ''}`} onClick={() => handlePopup('dimensionLine')}>
             <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
           </button>
-          <button className="arr-btn">
+          <button className={`arr-btn ${showPlanSizeSettingModal ? 'act' : ''}`} onClick={() => handlePopup('planSize')}>
             <span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
           </button>
           <button
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index 0f532ae9..d9b3059c 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -24,11 +24,12 @@ export default function DimensionLineSetting(props) {
     setFontSize,
     pixel,
     setPixel,
+    isShow,
     setIsShow,
     id,
     pos = { x: 985, y: 180 },
   } = props
-  const { addPopup, closePopup } = usePopup()
+  const { addPopup, closePopup, closePopups } = usePopup()
   const pixels = Array.from({ length: 5 }).map((_, index) => {
     return { name: index + 1, value: index + 1 }
   })
@@ -37,11 +38,17 @@ export default function DimensionLineSetting(props) {
   const [originFontColor, setOriginFontColor] = useState(fontColor)
   const [originFontSize, setOriginFontSize] = useState(fontSize)
   const [originPixel, setOriginPixel] = useState(pixel)
-  const fontModalId = uuidv4()
-  const colorModalId = uuidv4()
+  const [fontModalId, setFontModalId] = useState(uuidv4())
+  const [colorModalId, setColorModalId] = useState(uuidv4())
+
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showFontModal, setShowFontModal] = useState(false)
   const { getMessage } = useMessage()
+  useEffect(() => {
+    if (!isShow) {
+      closePopups([fontModalId, colorModalId])
+    }
+  }, [isShow])
   const colorPickerProps = {
     isShow: showColorPickerModal,
     setIsShow: setShowColorPickerModal,
@@ -49,8 +56,8 @@ export default function DimensionLineSetting(props) {
     setColor: setOriginColor,
     id: colorModalId,
     pos: {
-      x: 480,
-      y: -815,
+      x: 495,
+      y: 180,
     },
   }
 
@@ -67,8 +74,8 @@ export default function DimensionLineSetting(props) {
     setFontSize: setOriginFontSize,
     id: fontModalId,
     pos: {
-      x: 480,
-      y: -815,
+      x: 455,
+      y: 180,
     },
   }
   const popupHandle = (type) => {
@@ -99,8 +106,10 @@ export default function DimensionLineSetting(props) {
           <button
             className="modal-close"
             onClick={() => {
-              setIsShow(false)
-              closePopup(id)
+              console.log('fontModalId', fontModalId)
+              console.log('colorModalId', colorModalId)
+              closePopups([fontModalId, colorModalId, id])
+              // setIsShow(false)
             }}
           >
             닫기
@@ -161,7 +170,7 @@ export default function DimensionLineSetting(props) {
                 setColor(originColor)
                 setFont(originFont)
                 setIsShow(false)
-                closePopup(id)
+                closePopups([fontModalId, colorModalId, id])
               }}
             >
               {getMessage('modal.common.save')}
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js
index f62fd6c5..ed056958 100644
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@@ -14,9 +14,14 @@ export function usePopup() {
   }
 
   const closePopup = (id) => {
+    console.log(id)
     setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
   }
 
+  const closePopups = (ids) => {
+    setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
+  }
+
   const closeAll = () => {
     setPopup({ children: [] })
   }
@@ -34,6 +39,7 @@ export function usePopup() {
     setPopup,
     addPopup,
     closePopup,
+    closePopups,
     closeAll,
   }
 }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index b5d24361..95b2a6fc 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -157,6 +157,14 @@
   "plan.mode.vertical.horizontal": "垂直水平モード",
   "plan.mode.free": "프리 모드(JA)",
   "modal.font.setting": "フォント設定",
+  "modal.font": "フォント",
+  "modal.font.style": "フォントスタイル",
+  "modal.font.size": "サイズ",
+  "modal.font.color": "フォン",
+  "common.horizon": "ガロ",
+  "common.vertical": "縦ロ",
+  "modal.font.setting.display": "見る",
+  "modal.font.setting.info": "ントです。プリンタと画面 でも同じフォントを使用します.",
   "modal.canvas.setting": "Canvas設定",
   "modal.canvas.setting.display": "ディスプレイ設定",
   "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index d46633ea..892de514 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -161,6 +161,14 @@
   "plan.mode.vertical.horizontal": "수직 수평 모드",
   "plan.mode.free": "프리 모드",
   "modal.font.setting": "글꼴 설정",
+  "modal.font": "글꼴",
+  "modal.font.style": "글꼴 스타일",
+  "modal.font.size": "크기",
+  "modal.font.color": "글꼴 색",
+  "common.horizon": "가로",
+  "common.vertical": "세로",
+  "modal.font.setting.display": "보기",
+  "modal.font.setting.info": "이것은 Open Type 글꼴입니다. 프린터 및 화면에서도 같은 글꼴을 사용합니다.",
   "modal.canvas.setting": "Canvas 설정",
   "modal.canvas.setting.display": "디스플레이 설정",
   "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",

From f09cce0e6a9543c9f7a9f8c15847529ade8337ed Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 22 Oct 2024 10:13:37 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=EB=8F=84=EB=A9=B4=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting01/planSize/PlanSizeSetting.jsx    | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
new file mode 100644
index 00000000..0986fa57
--- /dev/null
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -0,0 +1,67 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+
+export default function PlanSizeSetting(props) {
+  const { horizon, setHorizon, vertical, setVertical, id, pos = { x: 985, y: 180 }, setIsShow } = props
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const [originHorizon, setOriginHorizon] = useState(horizon)
+  const [originVertical, setOriginVertical] = useState(vertical)
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xsm`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="outline-form mb10">
+              <span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
+              <div className="input-grid mr5" style={{ width: '90px' }}>
+                <input type="text" className="input-origin block" value={originHorizon} onChange={(e) => setOriginHorizon(Number(e.target.value))} />
+              </div>
+              <span className="thin">mm</span>
+            </div>
+            <div className="outline-form">
+              <span style={{ width: 'auto' }}>{getMessage('common.vertical')}</span>
+              <div className="input-grid mr5" style={{ width: '90px' }}>
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={originVertical}
+                  onChange={(e) => setOriginVertical(Number(e.target.value))}
+                />
+              </div>
+              <span className="thin">mm</span>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setHorizon(originHorizon)
+                setVertical(originVertical)
+                setIsShow(false)
+                closePopup(id)
+              }}
+            >
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}