- 보조선 복사 추가

- 치수선 설정 추가
- 거리 측정 추가
- 도머 오프셋 추가
- 흐름 방향 설정 추가
- 선 속성 설정 추가
- 지붕재 설정 추가
- 도머 크기 변경 추가

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

@@ -0,0 +1,55 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+
+export default function AuxiliaryCopy(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">補助線のコピー </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">コピーする方向を入力してください</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">長さ</p>
+                <div className="input-move-wrap mb5">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+                <div className="input-move-wrap">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </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>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -0,0 +1,74 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function DimensionLineSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, setIsShow, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">表示の変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="guide">寸法線に表示する数値を入力してください</div>
+          <div className="mb-box">
+            <div className="slope-wrap">
+              <div className="outline-form mb15">
+                <span className="mr10">既存の長さ</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin block" defaultValue={5933} readOnly />
+                </div>
+              </div>
+              <div className="mb-box">
+                <div className="outline-form">
+                  <span className="mr10">変更の長さ</span>
+                  <div className="input-grid mr5">
+                    <input type="text" className="input-origin block" defaultValue={0} />
+                  </div>
+                </div>
+              </div>
+              <div className="d-check-box pop">
+                <input type="checkbox" id="ch99" />
+                <label htmlFor="ch99">コーナー・ゴールの場合</label>
+              </div>
+            </div>
+          </div>
+          <div className="slope-wrap">
+            <div className="warning">傾斜を着せてください。</div>
+            <div className="display-change-wrap">
+              <div className="outline-form mb15">
+                <span className="mr10">傾斜</span>
+                <div className="grid-select mr10">
+                  <QSelectBox title={'0'} option={SelectOption01} />
+                </div>
+                <span className="thin">寸法</span>
+              </div>
+              <div className="outline-form">
+                <span className="mr10">傾斜</span>
+                <div className="grid-select mr10">
+                  <QSelectBox title={'0'} option={SelectOption01} />
+                </div>
+                <span className="thin">寸法</span>
+              </div>
+            </div>
+            <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/distance/Distance.jsx

@@ -0,0 +1,67 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+
+export default function Distance(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, distance } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">距離測定 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">2点間距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">水平距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">垂直距離</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="input-grid mr5" style={{ width: '98px' }}>
+                      <input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
+                    </div>
+                    <span className="thin">mm</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">確認</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -0,0 +1,150 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useState } from 'react'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+
+const SelectOption01 = [{ name: 'M' }, { name: 'M' }, { name: 'M' }, { name: 'M' }]
+
+export default function FlowDirectionSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const [compasDeg, setCompasDeg] = useState(0)
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap lx`}>
+        <div className="modal-head">
+          <h1 className="title">面フローの設定 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="drawing-flow-wrap">
+            <div className="discrimination-box">
+              <div className="discrimination-tit mb15">流れ方向の設定</div>
+              <div className="guide">流れ方向を選択してください。</div>
+              <div className="object-direction-wrap">
+                <div className="plane-direction">
+                  <span className="top">北</span>
+                  <span className="right">ドン</span>
+                  <span className="bottom">南</span>
+                  <span className="left">立つ</span>
+                  <button className="plane-btn up"></button>
+                  <button className="plane-btn right"></button>
+                  <button className="plane-btn down act"></button>
+                  <button className="plane-btn left"></button>
+                </div>
+              </div>
+            </div>
+            <div className="discrimination-box">
+              <div className="discrimination-tit mb15">方位設定</div>
+              <div className="guide">シミュレーション計算の方向を指定します。面が向いている方位を選択してください。</div>
+              <div className="mb-box">
+                <div className="d-check-radio pop mb15">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">8方位に選ぶ</label>
+                </div>
+                <div className="grid-select ">
+                  <QSelectBox title={'M'} options={SelectOption01} />
+                </div>
+              </div>
+              <div className="mb-box">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio02" id="ra02" />
+                  <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
+                </div>
+              </div>
+              <div className="compas-box">
+                <div className="compas-box-inner">
+                  <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}>
+                    <i>13</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}>
+                    <i>12</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}>
+                    <i>11</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}>
+                    <i>10</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}>
+                    <i>9</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}>
+                    <i>8</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}>
+                    <i>7</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}>
+                    <i>6</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}>
+                    <i>5</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}>
+                    <i>4</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}>
+                    <i>3</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}>
+                    <i>2</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}>
+                    <i>1</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}>
+                    <i>24</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}>
+                    <i>23</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}>
+                    <i>22</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}>
+                    <i>21</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}>
+                    <i>20</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}>
+                    <i>19</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}>
+                    <i>18</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}>
+                    <i>17</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}>
+                    <i>16</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}>
+                    <i>15</i>
+                  </div>
+                  <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}>
+                    <i>14</i>
+                  </div>
+                  <div className="compas">
+                    <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -0,0 +1,104 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+
+export default function LinePropertySetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">各辺属性の変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="guide">
+            <span className="mb10">属性を変更する辺を選択してください。</span>
+            <span>選択した値 [龍丸]</span>
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">設定</div>
+            <div className="outline-wrap">
+              <div className="radio-grid-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">軒先</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" />
+                  <label htmlFor="ra02">ケラバ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra03" />
+                  <label htmlFor="ra03">龍丸</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra04" />
+                  <label htmlFor="ra04">ケラバ左</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra05" />
+                  <label htmlFor="ra05">ヨセムネ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra06" />
+                  <label htmlFor="ra06">ケラバ右</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra07" />
+                  <label htmlFor="ra07">片側の流れ</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra08" />
+                  <label htmlFor="ra08">谷</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra09" />
+                  <label htmlFor="ra09">壁取り</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra10" />
+                  <label htmlFor="ra10">Lの捨て渓谷</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra11" />
+                  <label htmlFor="ra11">壁取り(型)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra12" />
+                  <label htmlFor="ra12">マンサード</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra13" />
+                  <label htmlFor="ra13">壁取合(流れ)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra14" />
+                  <label htmlFor="ra14">設定なし</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra15" />
+                  <label htmlFor="ra15">壁取合(流れ左)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra16" />
+                  <label htmlFor="ra16">壁取り(流れ右)</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -0,0 +1,55 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+
+export default function DormerOffset(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title">도머 오프셋 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">移動する方向を入力してください</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="move-form">
+                <p className="mb5">長さ</p>
+                <div className="input-move-wrap mb5">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </div>
+                <div className="input-move-wrap">
+                  <div className="input-move">
+                    <input type="text" className="input-origin" defaultValue={910} />
+                  </div>
+                  <span>mm</span>
+                </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>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/RoofMaterialSetting.jsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useRecoilValue } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function RoofMaterialSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const roofMaterials = [
+    { name: '기와1', value: 'material1' },
+    { name: '기와2', value: 'material2' },
+    { name: '기와3', value: 'material3' },
+    { name: '기와4', value: 'material4' },
+    { name: '기와5', value: 'material5' },
+  ]
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xxxm`}>
+        <div className="modal-head">
+          <h1 className="title">変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="grid-select">
+              <QSelectBox title={'지붕재 선택'} options={roofMaterials} />
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">ストレージ</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useRecoilValue } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+import { canvasState } from '@/store/canvasAtom'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useState } from 'react'
+
+export default function SizeSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const [settingTarget, setSettingTarget] = useState(1)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const canvas = useRecoilValue(canvasState)
+  const { closePopup } = usePopup()
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap ssm`}>
+        <div className="modal-head">
+          <h1 className="title">サイズ変更 </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="slope-wrap">
+            <div className="size-option-top">
+              <div className="size-option-wrap">
+                <div className="size-option mb5">
+                  <input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
+                  <span className="normal-font">mm</span>
+                </div>
+                <div className="size-option">
+                  <input type="text" className="input-origin mr5" defaultValue={1000} />
+                  <span className="normal-font">mm</span>
+                </div>
+              </div>
+            </div>
+            <div className="size-inner-warp">
+              <div className="size-option-side">
+                <div className="size-option-wrap">
+                  <div className="size-option mb5">
+                    <input type="text" className="input-origin mr5" defaultValue={1000} readOnly />
+                    <span className="normal-font">mm</span>
+                  </div>
+                  <div className="size-option">
+                    <input type="text" className="input-origin mr5" defaultValue={1000} />
+                    <span className="normal-font">mm</span>
+                  </div>
+                </div>
+              </div>
+              <div className="size-check-wrap">
+                <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
+                <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
+                <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
+                <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
+                <div className="size-box"></div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">作成</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}