left right bar 추가

src/app/canvas/page.jsx

@@ -109,7 +109,7 @@ export default function CanvasPage() {
                     {/* <RoofShapeOption/> */}
 
                     {/* 지붕형상 수동 설정 */}
-                    {/* <ManualRoofShape/> */}
+                    {/* <ManualRoofShape/>  */}
 
                     {/* 보조선 작성 */}
                     {/* <AuxiliarylineOption/> */}
@@ -164,7 +164,7 @@ export default function CanvasPage() {
                     {/* <HexagonalRoofOption/> */}
 
                     {/* 회로 및 가대설정 */}
-                    <CircuitStandSetting/>
+                    {/* <CircuitStandSetting/> */}
 
                     {/* 모듈 부가기능 */}
 

src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx

@@ -9,6 +9,8 @@ export default function AdditionalBundleCopy(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、コピー方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx

@@ -9,6 +9,8 @@ export default function AdditionalBundleMove(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、移動方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx

@@ -9,6 +9,8 @@ export default function AdditionalColumnCopy(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、コピー方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx

@@ -9,6 +9,8 @@ export default function AdditionalColumnMove(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、移動方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx

@@ -9,6 +9,8 @@ export default function AdditionalCopy(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、コピー方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx

@@ -9,6 +9,8 @@ export default function AdditionalMove(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、移動方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx

@@ -9,6 +9,8 @@ export default function AllModuleCopy(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、コピー方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx

@@ -9,6 +9,8 @@ export default function AllModuleMove(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     間隔を設定し、移動方向を選択します。
                     </div>

src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx

@@ -9,6 +9,8 @@ export default function AllModuleNumChange(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                     回路番号を入力してください。
                     </div>

src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx

@@ -17,6 +17,8 @@ export default function AdditionalBundleDelete(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="properties-setting-wrap">
                         <div className="setting-tit">削除列をどのようにしますか？</div>
                         <div className="additional-wrap">

src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx

@@ -17,6 +17,8 @@ export default function AdditionalBundleEdit(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="properties-setting-wrap">
                         <div className="setting-tit">挿入する方向を選択してください。</div>
                         <div className="additional-wrap">

src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx

@@ -17,6 +17,8 @@ export default function AdditionalColumnDelete(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="properties-setting-wrap">
                         <div className="setting-tit">削除列をどのようにしますか？</div>
                         <div className="additional-wrap">

src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx

@@ -17,6 +17,8 @@ export default function AdditionalColumnEdit(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="properties-setting-wrap">
                         <div className="setting-tit">挿入する方向を選択してください。</div>
                         <div className="additional-wrap">

src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx

@@ -16,6 +16,8 @@ export default function ArrangementSetting(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         <button 
                         className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} 

src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx

@@ -25,6 +25,8 @@ export default function AuxiliarylineOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx

@@ -9,6 +9,8 @@ export default function AuxiliaryCopy(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                         コピーする方向を入力してください
                     </div>

src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx

@@ -9,6 +9,8 @@ export default function AuxiliaryMove(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                         移動する方向を入力してください
                     </div>

src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx

@@ -9,6 +9,8 @@ export default function AuxiliarySize(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="discrimination-box mb10">
                         <div className="d-check-radio pop mb10">
                             <input type="radio" name="radio01" id="ra01" />

src/components/canvas/modal/colorselect/ColorSelect.jsx

@@ -10,6 +10,8 @@ export default function ColorSelect (){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="color-setting-wrap">
                         <div className="color-tit">COLOR PICKER</div>
                         <div className="color-picker">

src/components/canvas/modal/displaychange/DisplayChange.jsx

@@ -14,6 +14,8 @@ export default function DisplayChange(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="guide">
                         寸法線に表示する数値を入力してください
                     </div>

src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx

@@ -9,6 +9,8 @@ export default function DistanceMeasurement01(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="outline-form">
                             <span className="mr10" style={{width: 'auto'}}>水平距離</span>

src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx

@@ -9,6 +9,8 @@ export default function DistanceMeasurement02(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="eaves-keraba-table">
                             <div className="eaves-keraba-item">

src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx

@@ -9,6 +9,8 @@ export default function DistanceMeasurement03(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="outline-form">
                             <span className="mr10" style={{width: 'auto'}}>垂直距離</span>

src/components/canvas/modal/drawingflow/DrawingFlow.jsx

@@ -16,6 +16,8 @@ export default function DrawingFlow(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="drawing-flow-wrap">
                         <div className="discrimination-box">
                             <div className="discrimination-tit mb15">流れ方向の設定</div>

src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx

@@ -9,6 +9,8 @@ export default function EachPropertyChange() {
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="guide">
                         <span className="mb10">属性を変更する辺を選択してください。</span>
                         <span>選択した値 [龍丸]</span>

src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx

@@ -23,6 +23,8 @@ export default function EvaseKerabaOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/font_lineoption/FontOption.jsx

@@ -12,6 +12,8 @@ export default function FontOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="font-option-warp">
                             <div className="font-option-item">

src/components/canvas/modal/font_lineoption/LineOption.jsx

@@ -13,6 +13,8 @@ export default function LineOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="font-btn-wrap">
                         <button className="btn-frame modal">フォント設定</button>
                     </div>

src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx

@@ -9,6 +9,8 @@ export default function ShapeSizeOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="outline-form mb10">
                             <span style={{width: 'auto'}}>ガロ</span>

src/components/canvas/modal/gridoption/GridCopy.jsx

@@ -24,6 +24,8 @@ export default function GridCopy() {
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                         間隔を設定し、コピー方向を選択します
                     </div>

src/components/canvas/modal/gridoption/GridMove.jsx

@@ -24,6 +24,8 @@ export default function GridMove() {
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-option-tit">
                         移動する方向を入力してください
                     </div>

src/components/canvas/modal/gridoption/GridOption.jsx

@@ -29,6 +29,8 @@ export default function GridOption() {
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="grid-check-form">
                         <div className="d-check-box pop">
                             <input type="checkbox" id="ch01" />

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx

@@ -14,6 +14,8 @@ export default function HexagonalRoofOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="roof-module-tab">
                         <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>防衛設定</div>
                         <span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span>

src/components/canvas/modal/imagesize/ImageSize.jsx

@@ -11,6 +11,8 @@ export default function ImageSize(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="range-wrap">
                         <input type="range" id="size" name="volume" min="20" max="200" step={10} value={sizeValue} onChange={(e) => setSizeValue(e.target.value)}/>
                         <label htmlFor="size">{sizeValue}%</label>

src/components/canvas/modal/imgload/ImgLoad.jsx

@@ -9,6 +9,8 @@ export default function ImgLoad(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="img-flex-box">
                         <span className="normal-font mr10">サイズ調整と回転</span>
                         <label className="toggle-btn">

src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx

@@ -20,6 +20,8 @@ export default function ManualRoofShape(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/measuredvalueoption/MeasuredValueOption.jsx

@@ -9,6 +9,8 @@ export default function MeasuredValueOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="guide">
                         <span>※隅棟・谷・棟の実際の寸法を入力してください。</span>
                     </div>

src/components/canvas/modal/movingupdown/MovingUpDown.jsx

@@ -19,6 +19,8 @@ export default function MovingUpDonw(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/objectoption/ObjectOption.jsx

@@ -22,6 +22,8 @@ export default function ObjectOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx

@@ -30,6 +30,8 @@ export default function OuterLineWall (){
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         <button 
                         className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} 

src/components/canvas/modal/outerwalloffset/OuterWallOffset.jsx

@@ -20,6 +20,8 @@ export default function OuterWallOffset(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         {buttonMenu.map((item) => (
                             <button 

src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx

@@ -33,6 +33,8 @@ export default function PlaneShapeOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="plane-frame-wrap">
                         <div className="plane-shape-wrap">
                             <div className="plane-shape-menu">

src/components/canvas/modal/roofallocation/RoofAllocation.jsx

@@ -17,6 +17,8 @@ export default function RoofAllocation() {
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="properties-guide">
                         ※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。
                     </div>

src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx

@@ -14,6 +14,8 @@ export default function RoofModuleOption(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="roof-module-tab">
                         <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>防衛設定</div>
                         <span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span>

src/components/canvas/modal/roofselect/RoofSelect.jsx

@@ -14,6 +14,8 @@ export default function RoofSelect(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="grid-select">
                             <Qselect title={'53A'} option={SelectOption}/>

src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx

@@ -28,6 +28,8 @@ export default function RoofShapeOption() {
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="roof-shape-menu">
                         {shapeMenu.map((item) => (
                             <button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act': ''}`} onClick={() => setShapeNum(item.id)}>

src/components/canvas/modal/settoing01/SettingModal01.jsx

@@ -39,6 +39,8 @@ export default function SettingModal01 (){
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="modal-btn-wrap">
                         <button 
                         className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} 

src/components/canvas/modal/sizechange/SizeChang.jsx

@@ -11,6 +11,8 @@ export default function SizeChange(){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="size-option-top">
                             <div className="size-option-wrap">

src/components/canvas/modal/slopeoption/SlopeOption.jsx

@@ -9,6 +9,8 @@ export default function SlopeOption (){
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
+                <div className="left-bar handle"></div>
+                <div className="right-bar handle"></div>
                     <div className="slope-wrap">
                         <div className="outline-form">
                             <span className="mr10" style={{width: 'auto'}}>斜傾</span>