diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 6f300c8..390df7d 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -3,6 +3,9 @@
 import CanvasLayout from '@/components/canvas/CanvasLayout'
 import CanvasMenu from '@/components/canvas/CanvasMenu'
 import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
+import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
+import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
+import AuxiliarySize from '@/components/canvas/modal/auxiliarysupport/AuxiliarySize'
 import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
 import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
@@ -10,6 +13,7 @@ import GridOption from '@/components/canvas/modal/gridoption/GridOption'
 import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
 import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
+import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
 import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
 import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
@@ -33,13 +37,13 @@ export default function CanvasPage() {
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 배치면 초기 설정 */}
-                    <PlacementSettingPop/>
+                    {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}
 
                     {/* 점·선 그리드 설정 */}
-                    {modalOption.gridoption && <GridOption/>}
+                    {/* {modalOption.gridoption && <GridOption/>} */}
                     {/* {modalOption.gridcopy && <GridCopy/>} */}
                     {/* {modalOption.gridmove && <GridMove/>} */}
 
@@ -63,6 +67,14 @@ export default function CanvasPage() {
 
                     {/* 동선이동∙형 올림 내림 */}
                     {/* <MovingUpDonw/> */}
+
+                    {/* 외벽선 편집 및 오프셋 */}
+                    {/* <OuterWallOffset/> */}
+
+                    {/* 보조선 사이즈, 이동, 복사 */}
+                    <AuxiliarySize/>
+                    <AuxiliaryMove/>
+                    <AuxiliaryCopy/>
                 </div>
             </div>
         </div>
diff --git a/src/app/draggable/page.jsx b/src/app/draggable/page.jsx
index 7b4996b..5fa7715 100644
--- a/src/app/draggable/page.jsx
+++ b/src/app/draggable/page.jsx
@@ -10,9 +10,9 @@ export default function DraggablePage() {
     <>
       {!divIsShow ? <button onClick={() => setDivIsShow(true)}>show draggable div</button> : ''}
       {/* WithDraggable 태그로 이동하고 싶은 컴포넌트나 엘리먼트등을 감싸주면 WithDraggable 컴포넌트가 드래그 가능하게 만들어줍니다. */}
-      <WithDraggable isShow={divIsShow}>
+      <WithDraggable isShow={divIsShow} handle='.modal'>
         <div style={{ width: '200px', height: '200px', margin: '5px', padding: '5px', background: '#00ffee' }}>
-          <h1>test draggable div</h1>
+          <h1 className='modal'>test draggable div</h1>
           <div>
             <button onClick={() => setDivIsShow(false)}>close</button>
           </div>
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
new file mode 100644
index 0000000..d66839b
--- /dev/null
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
@@ -0,0 +1,47 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AuxiliaryCopy(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">補助線のコピー </h1>
+                    <button className="modal-close">닫기</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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
new file mode 100644
index 0000000..2a87627
--- /dev/null
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
@@ -0,0 +1,47 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AuxiliaryMove(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">補助線の移動 </h1>
+                    <button className="modal-close">닫기</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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
new file mode 100644
index 0000000..ac42056
--- /dev/null
+++ b/src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
@@ -0,0 +1,57 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function AuxiliarySize(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">補助線サイズ変更 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="discrimination-box mb10">
+                        <div className="d-check-radio pop mb10">
+                            <input type="radio" name="radio01" id="ra01" />
+                            <label htmlFor="ra01">1支店</label>
+                        </div>
+                        <div className="outline-form mb15">
+                            <div className="input-grid mr5" style={{flex: '1 1 auto'}}>
+                                <input type="text" className="input-origin block" defaultValue={100}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                        <div className="outline-form">
+                            <span style={{width: 'auto'}}>長さ</span>
+                            <div className="input-grid mr5">
+                                <input type="text" className="input-origin block" defaultValue={100}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                    <div className="discrimination-box ">
+                        <div className="d-check-radio pop mb10">
+                            <input type="radio" name="radio01" id="ra02" />
+                            <label htmlFor="ra02">2支店</label>
+                        </div>
+                        <div className="outline-form mb15">
+                            <div className="input-grid mr5" style={{flex: '1 1 auto'}}>
+                                <input type="text" className="input-origin block" defaultValue={100}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                        <div className="outline-form">
+                            <span style={{width: 'auto'}}>長さ</span>
+                            <div className="input-grid mr5">
+                                <input type="text" className="input-origin block" defaultValue={100}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/movingupdown/MovingTab02.jsx b/src/components/canvas/modal/movingupdown/MovingTab02.jsx
index d2836eb..aee6fa7 100644
--- a/src/components/canvas/modal/movingupdown/MovingTab02.jsx
+++ b/src/components/canvas/modal/movingupdown/MovingTab02.jsx
@@ -12,7 +12,7 @@ export default function MovingTab02(){
                         <div className="eaves-keraba-th">
                             <div className="d-check-radio pop">
                                 <input type="radio" name="radio01" id="ra01" />
-                                <label htmlFor="ra01">高さ変更：下、左</label>
+                                <label htmlFor="ra01">桁を上げる</label>
                             </div>
                         </div>
                         <div className="eaves-keraba-td">
@@ -27,7 +27,7 @@ export default function MovingTab02(){
                         <div className="eaves-keraba-th">
                             <div className="d-check-radio pop">
                                 <input type="radio" name="radio01" id="ra02" />
-                                <label htmlFor="ra02">高さ変更：上、右</label>
+                                <label htmlFor="ra02">桁数を下げる</label>
                             </div>
                         </div>
                         <div className="eaves-keraba-td">
diff --git a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
index 198558e..91a5b0e 100644
--- a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
+++ b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx
@@ -1,6 +1,7 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import { useState } from "react";
 import MovingTab01 from "./MovingTab01";
+import MovingTab02 from "./MovingTab02";
 
 const buttonMenu = [
     {id: 1, name: '銅線の移動軒'},
@@ -11,6 +12,7 @@ export default function MovingUpDonw(){
     const [buttonAct, setButtonAct] = useState(1);
 
     return(
+        <WithDraggable isShow={true}>
             <div className={`modal-pop-wrap r`}>
                 <div className="modal-head">
                 <h1 className="title">軒・ケラバ変更</h1>
@@ -31,13 +33,13 @@ export default function MovingUpDonw(){
                     <div className="properties-setting-wrap outer">
                         <div className="setting-tit">設定</div>
                         {buttonAct === 1 && <MovingTab01/>}
+                        {buttonAct === 2 && <MovingTab02/>}
                     </div>
                     <div className="grid-btn-wrap">
                         <button className="btn-frame modal act">保存</button>
                     </div>
                 </div>
             </div>
-        // <WithDraggable isShow={true}>
-        // </WithDraggable>
+        </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx b/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx
new file mode 100644
index 0000000..5e85085
--- /dev/null
+++ b/src/components/canvas/modal/outerwalloffset/OffsetTab01.jsx
@@ -0,0 +1,87 @@
+export default function OffsetTab01(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="guide sm">
+                    辺と始点を選択して長さと方向を指定してください。
+                </div>
+                <div className="discrimination-box mb10">
+                    <div className="d-check-radio pop mb10">
+                        <input type="radio" name="radio01" id="ra01" />
+                        <label htmlFor="ra01">1支店</label>
+                    </div>
+                    <div className="padding-form">
+                        <div className="eaves-keraba-table">
+                            <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: '100px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={100}/>
+                                        </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="grid-direction">
+                                            <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>
+                        </div>
+                    </div>
+                </div>
+                <div className="discrimination-box">
+                    <div className="d-check-radio pop mb10">
+                        <input type="radio" name="radio01" id="ra02" />
+                        <label htmlFor="ra02">2支店</label>
+                    </div>
+                    <div className="padding-form">
+                        <div className="eaves-keraba-table">
+                            <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: '100px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={100}/>
+                                        </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="grid-direction">
+                                            <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx b/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx
new file mode 100644
index 0000000..05f6321
--- /dev/null
+++ b/src/components/canvas/modal/outerwalloffset/OffsetTab02.jsx
@@ -0,0 +1,49 @@
+export default function OffsetTab02(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="guide sm">
+                    オフセットしたい外壁を選択してください。
+                </div>
+                <div className="discrimination-box mb10">
+                    <div className="d-check-radio pop mb10">
+                        <input type="radio" name="radio01" id="ra01" />
+                        <label htmlFor="ra01">1支店</label>
+                    </div>
+                    <div className="padding-form">
+                        <div className="eaves-keraba-table">
+                            <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: '100px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={100}/>
+                                        </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="grid-direction">
+                                            <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx
new file mode 100644
index 0000000..a131471
--- /dev/null
+++ b/src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx
@@ -0,0 +1,46 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+import OffsetTab01 from "./OffsetTab01";
+import OffsetTab02 from "./OffsetTab02";
+
+const buttonMenu = [
+    {id: 1, name: '外壁の編集'},
+    {id: 2, name: 'オフセット'},
+]
+
+
+export default function OuterWallOffset(){
+    const [buttonAct, setButtonAct] = useState(1);
+
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                <h1 className="title">外壁の編集とオフセット</h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="modal-btn-wrap">
+                        {buttonMenu.map((item) => (
+                            <button 
+                            key={item.id}
+                            className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} 
+                            onClick={() => setButtonAct(item.id)}
+                            >
+                                {item.name}
+                            </button>
+                        ))}
+                    </div>
+                    <div className="properties-setting-wrap outer">
+                        <div className="setting-tit">設定</div>
+                        {buttonAct === 1 && <OffsetTab01/>}
+                        {buttonAct === 2 && <OffsetTab02/>}
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 2e0183a..4adb6b5 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -468,6 +468,7 @@ $alert-color: #101010;
             margin-right: 0;
         }
     }
+
     .reset-btn{
         flex: none;
         width: 30px;
@@ -625,6 +626,9 @@ $alert-color: #101010;
         display: table-row;
         .eaves-keraba-th,
         .eaves-keraba-td{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: $pop-normal-weight;
             display: table-cell;
             vertical-align: middle;
             padding-bottom: 14px;
@@ -657,4 +661,7 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
     color: $pop-color;
     margin-bottom: 24px;
+    &.sm{
+        margin-bottom: 15px;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index a62ff48..7441ab0 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -606,6 +606,7 @@ input[type=text]{
     }
     &.pop{
         label{
+            font-size: 12px;
             &:before{
                 width: 16px;
                 height: 16px;