diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx
index 2402b3e0..426724eb 100644
--- a/src/components/floor-plan/modal/basic/step/Module.jsx
+++ b/src/components/floor-plan/modal/basic/step/Module.jsx
@@ -11,6 +11,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -185,11 +186,23 @@ export default function Module({ setTabNum }) {
                   <div className="eaves-keraba-td">
                     <div className="outline-form">
                       <div className="grid-select mr10">
-                        <input
-                          type="text"
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => setInputInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => setInputInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>
diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx
index 6359163f..fdf599be 100644
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx
@@ -10,6 +10,7 @@ import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Swal from 'sweetalert2'
 import { normalizeDecimal} from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
@@ -436,13 +437,26 @@ export const Orientation = forwardRef((props, ref) => {
                     <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
                   </div>
                   <div className="input-grid mr10" style={{ width: '60px' }}>
-                    <input
-                      type="text"
+                    {/*<input*/}
+                    {/*  type="text"*/}
+                    {/*  className="input-origin block"*/}
+                    {/*  value={inputCompasDeg}*/}
+                    {/*  readOnly={!hasAnglePassivity}*/}
+                    {/*  placeholder={0}*/}
+                    {/*  onChange={(e) => checkDegree(e.target.value)}*/}
+                    {/*/>*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
                       className="input-origin block"
                       value={inputCompasDeg}
                       readOnly={!hasAnglePassivity}
-                      placeholder={0}
-                      onChange={(e) => checkDegree(e.target.value)}
+                      onChange={(value) => setInputCompasDeg(value)}
+                      options={{
+                        allowNegative: true,
+                        allowDecimal: false
+                      }}
                     />
                   </div>
                   <span className="thin">°</span>
@@ -533,7 +547,19 @@ export const Orientation = forwardRef((props, ref) => {
                   <div className="outline-form mt15">
                     <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
                     <div className="input-grid mr10" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />
+                      {/*<input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={inputMargin}
+                        onChange={(value) => setInputMargin(value)}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">m</span>
                   </div>
@@ -561,11 +587,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
                       <div className="input-grid mr10">
-                        <input
-                          type="text"
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputInstallHeight}*/}
+                        {/*  onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
                           value={inputInstallHeight}
-                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
+                          onChange={(value) => handleChangeInstallHeight(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">m</span>
@@ -589,11 +627,23 @@ export const Orientation = forwardRef((props, ref) => {
                     <div className="outline-form">
                       <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
                       <div className="input-grid mr10">
-                        <input
-                          type="text"
+                        {/*<input*/}
+                        {/*  type="text"*/}
+                        {/*  className="input-origin block"*/}
+                        {/*  value={inputVerticalSnowCover}*/}
+                        {/*  onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}*/}
+                        {/*/>*/}
+                        <CalculatorInput
+                          id=""
+                          name=""
+                          label=""
                           className="input-origin block"
-                          value={inputVerticalSnowCover}
-                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
+                          value={inputInstallHeight}
+                          onChange={(value) => handleChangeVerticalSnowCover(value)}
+                          options={{
+                            allowNegative: false,
+                            allowDecimal: false
+                          }}
                         />
                       </div>
                       <span className="thin">cm</span>
diff --git a/src/components/floor-plan/modal/basic/step/Trestle.jsx b/src/components/floor-plan/modal/basic/step/Trestle.jsx
index 13f46a31..a1061a87 100644
--- a/src/components/floor-plan/modal/basic/step/Trestle.jsx
+++ b/src/components/floor-plan/modal/basic/step/Trestle.jsx
@@ -10,6 +10,7 @@ import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useStat
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Swal from 'sweetalert2'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const Trestle = forwardRef((props, ref) => {
   const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
@@ -885,12 +886,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
                 <div className="input-grid mr10">
-                  <input
-                    type="number"
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={eavesMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setEavesMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={eavesMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
-                    onChange={(e) => setEavesMargin(+e.target.value)}
+                    onChange={(value) => setEavesMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -898,12 +911,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
                 <div className="input-grid mr10">
-                  <input
-                    type="number"
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={ridgeMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setRidgeMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={ridgeMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
-                    onChange={(e) => setRidgeMargin(+e.target.value)}
+                    onChange={(value) => setRidgeMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
@@ -911,12 +936,24 @@ const Trestle = forwardRef((props, ref) => {
               <div className="outline-form ">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
                 <div className="input-grid mr10">
-                  <input
-                    type="number"
+                  {/*<input*/}
+                  {/*  type="number"*/}
+                  {/*  className="input-origin block"*/}
+                  {/*  value={kerabaMargin ?? 0}*/}
+                  {/*  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}*/}
+                  {/*  onChange={(e) => setKerabaMargin(+e.target.value)}*/}
+                  {/*/>*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
                     className="input-origin block"
                     value={kerabaMargin ?? 0}
-                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
-                    onChange={(e) => setKerabaMargin(+e.target.value)}
+                    onChange={(value) => setKerabaMargin(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
                   />
                 </div>
                 <span className="thin">mm</span>
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index e0843b5d..dfcc547c 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -23,6 +23,7 @@ import { QcastContext } from '@/app/QcastProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useSwal } from '@/hooks/useSwal'
 import { sanitizeIntegerInputEvent } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function StuffDetail() {
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@@ -1204,8 +1205,10 @@ export default function StuffDetail() {
   }
 
   // 저장
-  const onValid = async () => {
-    const formData = form.getValues()
+  const onValid = async (actionType) => {
+    const formData = form.getValues();
+    if(actionType !== 'save') return false
+    console.log('Action type:', actionType); // 'save' 또는 'tempSave'
     let errors = {}
     let fieldNm
 
@@ -1715,7 +1718,7 @@ export default function StuffDetail() {
                 <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                   {getMessage('stuff.detail.btn.tempSave')}
                 </button>
-                <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                <button  type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                   {getMessage('stuff.detail.btn.save')}
                 </button>
                 <button
@@ -2113,13 +2116,25 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr10" style={{ width: '200px' }}>
-                          <input
-                            type="text"
+                          {/*<input*/}
+                          {/*  type="text"*/}
+                          {/*  className="input-light"*/}
+                          {/*  onInput={handleKeyUp}*/}
+                          {/*  onBlur={handleBlur}*/}
+                          {/*  value={form.watch('verticalSnowCover') || ''}*/}
+                          {/*  {...register('verticalSnowCover')}*/}
+                          {/*/>*/}
+                          <CalculatorInput
+                            id=""
+                            name=""
+                            label=""
                             className="input-light"
-                            onInput={handleKeyUp}
-                            onBlur={handleBlur}
                             value={form.watch('verticalSnowCover') || ''}
-                            {...register('verticalSnowCover')}
+                            onChange={()=>{}}
+                            options={{
+                              allowNegative: false,
+                              allowDecimal: false
+                            }}
                           />
                         </div>
                         <span className="mr10">cm</span>
@@ -2173,13 +2188,25 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr10" style={{ width: '200px' }}>
-                          <input
-                            type="text"
+                          {/*<input*/}
+                          {/*  type="text"*/}
+                          {/*  className="input-light"*/}
+                          {/*  onInput={handleKeyUp}*/}
+                          {/*  onBlur={handleBlur}*/}
+                          {/*  value={form.watch('installHeight') || ''}*/}
+                          {/*  {...register('installHeight')}*/}
+                          {/*/>*/}
+                          <CalculatorInput
+                            id=""
+                            name=""
+                            label=""
                             className="input-light"
-                            onInput={handleKeyUp}
-                            onBlur={handleBlur}
                             value={form.watch('installHeight') || ''}
-                            {...register('installHeight')}
+                            onChange={()=>{}}
+                            options={{
+                              allowNegative: false,
+                              allowDecimal: false
+                            }}
                           />
                         </div>
                         <span>m</span>
@@ -2216,7 +2243,7 @@ export default function StuffDetail() {
               <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                 {getMessage('stuff.detail.btn.tempSave')}
               </button>
-              <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+              <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                 {getMessage('stuff.detail.btn.save')}
               </button>
               <button
@@ -2253,7 +2280,7 @@ export default function StuffDetail() {
                       >
                         {getMessage('stuff.detail.btn.moveList')}
                       </button>
-                      <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                      <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.save')}
                       </button>
                       <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@@ -2267,7 +2294,7 @@ export default function StuffDetail() {
                       <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.tempSave')}
                       </button>
-                      <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                      <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                         {getMessage('stuff.detail.btn.save')}
                       </button>
                       <button
@@ -2685,13 +2712,25 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr10" style={{ width: '200px' }}>
-                              <input
-                                type="text"
+                              {/*<input*/}
+                              {/*  type="text"*/}
+                              {/*  className="input-light"*/}
+                              {/*  onInput={handleKeyUp}*/}
+                              {/*  onBlur={handleBlur}*/}
+                              {/*  value={form.watch('verticalSnowCover') || ''}*/}
+                              {/*  {...register('verticalSnowCover')}*/}
+                              {/*/>*/}
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-light"
-                                onInput={handleKeyUp}
-                                onBlur={handleBlur}
                                 value={form.watch('verticalSnowCover') || ''}
-                                {...register('verticalSnowCover')}
+                                onChange={()=>{}}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: false
+                                }}
                               />
                             </div>
                             <span className="mr10">cm</span>
@@ -2748,13 +2787,26 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr10" style={{ width: '200px' }}>
-                              <input
-                                type="text"
+                              {/*<input*/}
+                              {/*  type="text"*/}
+                              {/*  className="input-light"*/}
+                              {/*  onInput={handleKeyUp}*/}
+                              {/*  onBlur={handleBlur}*/}
+                              {/*  value={form.watch('installHeight') || ''}*/}
+                              {/*  {...register('installHeight')}*/}
+                              {/*/>*/}
+
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-light"
-                                onInput={handleKeyUp}
-                                onBlur={handleBlur}
                                 value={form.watch('installHeight') || ''}
-                                {...register('installHeight')}
+                                onChange={()=>{}}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: false
+                                }}
                               />
                             </div>
                             <span>m</span>
@@ -2835,7 +2887,7 @@ export default function StuffDetail() {
                     >
                       {getMessage('stuff.detail.btn.moveList')}
                     </button>
-                    <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                    <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.save')}
                     </button>
                     <button type="button" className="btn-origin grey" onClick={onDelete} style={{ display: showButton }}>
@@ -2849,7 +2901,7 @@ export default function StuffDetail() {
                     <button type="button" className="btn-origin grey mr5" onClick={onTempSave} style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.tempSave')}
                     </button>
-                    <button type="submit" className="btn-origin navy mr5" style={{ display: showButton }}>
+                    <button type="button" onClick={() => onValid('save')} className="btn-origin navy mr5" style={{ display: showButton }}>
                       {getMessage('stuff.detail.btn.save')}
                     </button>
                     <button
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 3a38edd8..f8c011f0 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -2957,11 +2957,12 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
                 ridgePoint.x2 += pointVector.x * offset
                 ridgePoint.y2 += pointVector.y * offset
               }
-            } else {
-              ridgePoint.x2 += pointVector.x * offset
-              ridgePoint.y2 += pointVector.y * offset
             }
+          } else {
+            ridgePoint.x2 += pointVector.x * offset
+            ridgePoint.y2 += pointVector.y * offset
           }
+          // }
         } else if (drivePoint) {
           ridgePoint.x2 = drivePoint.x
           ridgePoint.y2 = drivePoint.y
@@ -3398,8 +3399,18 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
                 default:
                   break
               }
-              point[2] += pointVector.x * offset
-              point[3] += pointVector.y * offset
+              if (oppLine.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
+                if (drivePoint) {
+                  point[2] = drivePoint.x
+                  point[3] = drivePoint.y
+                } else {
+                  point[2] += pointVector.x * offset
+                  point[3] += pointVector.y * offset
+                }
+              } else {
+                point[2] += pointVector.x * offset
+                point[3] += pointVector.y * offset
+              }
             } else if (drivePoint) {
               point[2] = drivePoint.x
               point[3] = drivePoint.y
@@ -4316,8 +4327,8 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
 
         const intersect = lineIntersection(currLine.start, currLine.end, nextLine.start, nextLine.end, canvas)
         if (intersect) {
-          const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' })
-          canvas.add(checkCircle).renderAll()
+          /*const checkCircle = new fabric.Circle({ left: intersect.x, top: intersect.y, radius: 5, fill: 'blue', parentId: roofId, name: 'check' })
+          canvas.add(checkCircle).renderAll()*/
           let distance1 = Math.sqrt(Math.pow(intersect.x - currLine.start.x, 2) + Math.pow(intersect.y - currLine.start.y, 2))
           let distance2 = Math.sqrt(Math.pow(intersect.x - nextLine.start.x, 2) + Math.pow(intersect.y - nextLine.start.y, 2))
           let point = [currLine.start.x, currLine.start.y, intersect.x, intersect.y]
@@ -4799,13 +4810,17 @@ export const drawRoofByAttribute = (roofId, canvas, textMode) => {
           allLinesPoints.filter((p) => almostEqual(p.x, line.start.x) && almostEqual(p.y, line.start.y)).length < 3 &&
           allLinesPoints.filter((p) => almostEqual(p.x, line.end.x) && almostEqual(p.y, line.end.y)).length === 0
         ) {
-          if (startOnLine && endOnLine) {
-            if (line.degree === 0) {
-              innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
-            } else {
-              innerLines.push(
-                drawHipLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode, null, line.degree, line.degree),
-              )
+          if (line.type === TYPES.RIDGE && baseLines.length === 4 && (startOnLine || endOnLine)) {
+            innerLines.push(drawRidgeLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
+          } else {
+            if (startOnLine && endOnLine) {
+              if (line.degree === 0) {
+                innerLines.push(drawRoofLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode))
+              } else {
+                innerLines.push(
+                  drawHipLine([line.start.x, line.start.y, line.end.x, line.end.y], canvas, roof, textMode, null, line.degree, line.degree),
+                )
+              }
             }
           }
         }
diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js
index 383c82e0..de7bd91f 100644
--- a/src/util/skeleton-utils.js
+++ b/src/util/skeleton-utils.js
@@ -608,126 +608,140 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     canvas.renderAll();
   });
 
-  if((roof.moveUpDown??0 > 0) || (roof.moveFlowLine??0 > 0)  ) {
+  //if((roof.moveUpDown??0 > 0) ) {
 
-    const getMoveUpDownLine = () => {
-  // 같은 라인이 없으므로 새 다각형 라인 생성
-  //라인 편집
-  //  let i = 0
-  const currentRoofLines = canvas.getObjects().filter((obj) => obj.lineName === 'roofLine' && obj.attributes.roofId === roofId)
-  let roofLineRects = canvas.getObjects().filter((obj) => obj.name === 'roofLineRect' && obj.roofId === roofId)
+    // 같은 라인이 없으므로 새 다각형 라인 생성
+    //라인 편집
+    //  let i = 0
+    const currentRoofLines = canvas.getObjects().filter((obj) => obj.lineName === 'roofLine' && obj.attributes.roofId === roofId)
+    let roofLineRects = canvas.getObjects().filter((obj) => obj.name === 'roofLineRect' && obj.roofId === roofId)
 
 
-  roofLineRects.forEach((roofLineRect) => {
-    canvas.remove(roofLineRect)
-    canvas.renderAll()
-  })
+    roofLineRects.forEach((roofLineRect) => {
+      canvas.remove(roofLineRect)
+      canvas.renderAll()
+    })
 
-  let helpLines = canvas.getObjects().filter((obj) => obj.lineName === 'helpLine' && obj.roofId === roofId)
-  helpLines.forEach((helpLine) => {
-    canvas.remove(helpLine)
-    canvas.renderAll()
-  })
+    let helpLines = canvas.getObjects().filter((obj) => obj.lineName === 'helpLine' && obj.roofId === roofId)
+    helpLines.forEach((helpLine) => {
+      canvas.remove(helpLine)
+      canvas.renderAll()
+    })
 
-  function sortCurrentRoofLines(lines) {
-    return [...lines].sort((a, b) => {
-      // Get all coordinates in a consistent order
-      const getCoords = (line) => {
-        const x1 = line.x1 ?? line.get('x1');
-        const y1 = line.y1 ?? line.get('y1');
-        const x2 = line.x2 ?? line.get('x2');
-        const y2 = line.y2 ?? line.get('y2');
+    function sortCurrentRoofLines(lines) {
+      return [...lines].sort((a, b) => {
+        // Get all coordinates in a consistent order
+        const getCoords = (line) => {
+          const x1 = line.x1 ?? line.get('x1');
+          const y1 = line.y1 ?? line.get('y1');
+          const x2 = line.x2 ?? line.get('x2');
+          const y2 = line.y2 ?? line.get('y2');
 
-        // Sort points left-to-right, then top-to-bottom
-        return x1 < x2 || (x1 === x2 && y1 < y2)
-          ? [x1, y1, x2, y2]
-          : [x2, y2, x1, y1];
-      };
+          // Sort points left-to-right, then top-to-bottom
+          return x1 < x2 || (x1 === x2 && y1 < y2)
+            ? [x1, y1, x2, y2]
+            : [x2, y2, x1, y1];
+        };
 
-      const aCoords = getCoords(a);
-      const bCoords = getCoords(b);
+        const aCoords = getCoords(a);
+        const bCoords = getCoords(b);
 
-      // Compare each coordinate in order
-      for (let i = 0; i < 4; i++) {
-        if (Math.abs(aCoords[i] - bCoords[i]) > 0.1) {
-          return aCoords[i] - bCoords[i];
+        // Compare each coordinate in order
+        for (let i = 0; i < 4; i++) {
+          if (Math.abs(aCoords[i] - bCoords[i]) > 0.1) {
+            return aCoords[i] - bCoords[i];
+          }
         }
-      }
-      return 0;
-    });
-  }
+        return 0;
+      });
+    }
+
+
+    // function sortCurrentRoofLines(lines) {
+    //   return [...lines].sort((a, b) => {
+    //     const aX = a.x1 ?? a.get('x1')
+    //     const aY = a.y1 ?? a.get('y1')
+    //     const bX = b.x1 ?? b.get('x1')
+    //     const bY = b.y1 ?? b.get('y1')
+
+    //     if (aX !== bX) return aX - bX
+    //     return aY - bY
+    //   })
+    // }
+
 
     // 각 라인 집합 정렬
 
-  // roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정
-  const alignLineDirection = (sourceLines, targetLines) => {
-    return sourceLines.map(sourceLine => {
-      // 가장 가까운 targetLine 찾기
-      const nearestTarget = targetLines.reduce((nearest, targetLine) => {
-        const sourceCenter = {
-          x: (sourceLine.x1 + sourceLine.x2) / 2,
-          y: (sourceLine.y1 + sourceLine.y2) / 2
+    // roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정
+    const alignLineDirection = (sourceLines, targetLines) => {
+      return sourceLines.map(sourceLine => {
+        // 가장 가까운 targetLine 찾기
+        const nearestTarget = targetLines.reduce((nearest, targetLine) => {
+          const sourceCenter = {
+            x: (sourceLine.x1 + sourceLine.x2) / 2,
+            y: (sourceLine.y1 + sourceLine.y2) / 2
+          };
+          const targetCenter = {
+            x: (targetLine.x1 + targetLine.x2) / 2,
+            y: (targetLine.y1 + targetLine.y2) / 2
+          };
+          const distance = Math.hypot(
+            sourceCenter.x - targetCenter.x,
+            sourceCenter.y - targetCenter.y
+          );
+
+          return !nearest || distance < nearest.distance
+            ? { line: targetLine, distance }
+            : nearest;
+        }, null)?.line;
+
+        if (!nearestTarget) return sourceLine;
+
+        // 방향이 반대인지 확인 (벡터 내적을 사용)
+        const sourceVec = {
+          x: sourceLine.x2 - sourceLine.x1,
+          y: sourceLine.y2 - sourceLine.y1
         };
-        const targetCenter = {
-          x: (targetLine.x1 + targetLine.x2) / 2,
-          y: (targetLine.y1 + targetLine.y2) / 2
+        const targetVec = {
+          x: nearestTarget.x2 - nearestTarget.x1,
+          y: nearestTarget.y2 - nearestTarget.y1
         };
-        const distance = Math.hypot(
-          sourceCenter.x - targetCenter.x,
-          sourceCenter.y - targetCenter.y
-        );
 
-        return !nearest || distance < nearest.distance
-          ? { line: targetLine, distance }
-          : nearest;
-      }, null)?.line;
+        const dotProduct = sourceVec.x * targetVec.x + sourceVec.y * targetVec.y;
 
-      if (!nearestTarget) return sourceLine;
+        // 내적이 음수이면 방향이 반대이므로 뒤집기
+        if (dotProduct < 0) {
+          return {
+            ...sourceLine,
+            x1: sourceLine.x2,
+            y1: sourceLine.y2,
+            x2: sourceLine.x1,
+            y2: sourceLine.y1
+          };
+        }
 
-      // 방향이 반대인지 확인 (벡터 내적을 사용)
-      const sourceVec = {
-        x: sourceLine.x2 - sourceLine.x1,
-        y: sourceLine.y2 - sourceLine.y1
-      };
-      const targetVec = {
-        x: nearestTarget.x2 - nearestTarget.x1,
-        y: nearestTarget.y2 - nearestTarget.y1
-      };
+        return sourceLine;
+      });
+    };
 
-      const dotProduct = sourceVec.x * targetVec.x + sourceVec.y * targetVec.y;
+    console.log("wallBaseLines", wall.baseLines)
+   // const sortedWallLines = sortCurrentRoofLines(wall.lines);
+    // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
+    const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
+    const sortedCurrentRoofLines = sortCurrentRoofLines(alignedCurrentRoofLines);
+   // const sortedRoofLines = sortCurrentRoofLines(roofLines);
+    const sortedWallBaseLines = sortCurrentRoofLines(wall.baseLines);
+   // const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, wallLines);
+    const sortRoofLines = sortBaseLinesByWallLines(roofLines, wallLines);
 
-      // 내적이 음수이면 방향이 반대이므로 뒤집기
-      if (dotProduct < 0) {
-        return {
-          ...sourceLine,
-          x1: sourceLine.x2,
-          y1: sourceLine.y2,
-          x2: sourceLine.x1,
-          y2: sourceLine.y1
-        };
-      }
+    // 원본 wallLines를 복사하여 사용
+    const sortedWallLines = [...wallLines];
+    const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, sortedWallLines);
+    const sortedRoofLines = sortBaseLinesByWallLines(roofLines, sortedWallLines);
 
-      return sourceLine;
-    });
-  };
-
-  // const sortedWallLines = sortCurrentRoofLines(wall.lines);
-  // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
-  const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
-  const sortedCurrentRoofLines = sortCurrentRoofLines(alignedCurrentRoofLines);
-  // const sortedRoofLines = sortCurrentRoofLines(roofLines);
-  const sortedWallBaseLines = sortCurrentRoofLines(wall.baseLines);
-  // const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, wallLines);
-  const sortRoofLines = sortBaseLinesByWallLines(roofLines, wallLines);
-
-  // 원본 wallLines를 복사하여 사용
-  const sortedWallLines = [...wallLines];
-  const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, sortedWallLines);
-  const sortedRoofLines = sortBaseLinesByWallLines(roofLines, sortedWallLines);
-
-  //wall.lines 는 기본 벽 라인
-  //wall.baseLine은 움직인라인
-  const movedLines = []
+    //wall.lines 는 기본 벽 라인
+    //wall.baseLine은 움직인라인
+    const movedLines = []
 
   // 조건에 맞는 라인들만 필터링
   const validWallLines = wallLines.filter((wallLine, index) => wallLine.idx - 1 === index);
@@ -743,762 +757,757 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
 
     //  const roofLine = sortRoofLines[index];
 
-    if (roofLine.attributes.wallLine !== wallLine.id || (roofLine.idx - 1) !== index) {
-      console.log("wallLine2::::", wallLine.id)
-      console.log('roofLine:::', roofLine.attributes.wallLine)
-      console.log("w:::", wallLine.startPoint, wallLine.endPoint)
-      console.log("R:::", roofLine.startPoint, roofLine.endPoint)
-      console.log("not matching roofLine", roofLine);
-      return false
-    }//roofLines.find(line => line.attributes.wallLineId === wallLine.attributes.wallId);
+      if(roofLine.attributes.wallLine !== wallLine.id || (roofLine.idx - 1) !== index ){
+        console.log("wallLine2::::", wallLine.id)
+        console.log('roofLine:::',roofLine.attributes.wallLine)
+        console.log("w:::",wallLine.startPoint, wallLine.endPoint)
+        console.log("R:::",roofLine.startPoint, roofLine.endPoint)
+        console.log("not matching roofLine", roofLine);
+        return false
+      }//roofLines.find(line => line.attributes.wallLineId === wallLine.attributes.wallId);
 
     //  const currentRoofLine = currentRoofLines[index];
     //  const moveLine = wall.baseLines[index]
     //  const wallBaseLine = wall.baseLines[index]
-    //console.log("wallBaseLine", wallBaseLine);
+      //console.log("wallBaseLine", wallBaseLine);
 
-    //roofline 외곽선 설정
-    console.log("index::::", index)
-    console.log('roofLine:::', roofLine)
-    console.log('wallLine', wallLine)
-    console.log('wallBaseLine', wallBaseLine)
+      //roofline 외곽선 설정
+      console.log("index::::", index)
+      console.log('roofLine:::',roofLine)
+      console.log('wallLine', wallLine)
+      console.log('wallBaseLine', wallBaseLine)
 
 
-    const origin = moveLine.attributes?.originPoint
-    if (!origin) return
+      const origin = moveLine.attributes?.originPoint
+      if (!origin) return
 
-    if (isSamePoint(moveLine, wallLine)) {
+      if (isSamePoint(moveLine, wallLine)) {
 
-      return false
-    }
+        return false
+      }
 
-    const movedStart = Math.abs(moveLine.x1 - wallLine.x1) > EPSILON || Math.abs(moveLine.y1 - origin.y1) > EPSILON
-    const movedEnd = Math.abs(moveLine.x2 - wallLine.x2) > EPSILON || Math.abs(moveLine.y2 - origin.y2) > EPSILON
+      const movedStart = Math.abs(moveLine.x1 - wallLine.x1) > EPSILON || Math.abs(moveLine.y1 - origin.y1) > EPSILON
+      const movedEnd = Math.abs(moveLine.x2 - wallLine.x2) > EPSILON || Math.abs(moveLine.y2 - origin.y2) > EPSILON
 
 
-    const fullyMoved = movedStart && movedEnd
+      const fullyMoved = movedStart && movedEnd
 
 
 //반시계 방향
-    let newPStart //= {x:roofLine.x1, y:roofLine.y1}
-    let newPEnd  //=  {x:movedLines.x2, y:movedLines.y2}
+      let newPStart //= {x:roofLine.x1, y:roofLine.y1}
+      let newPEnd  //=  {x:movedLines.x2, y:movedLines.y2}
 
 //현재 roof는 무조건 시계방향
 
-    const getAddLine = (p1, p2, stroke = '') => {
-      movedLines.push({ index, p1, p2 })
+      const getAddLine = (p1, p2, stroke = '') => {
+        movedLines.push({ index, p1, p2 })
 
 // Usage:
-      // let mergeLines = mergeMovedLines(movedLines);
-      //console.log("mergeLines:::::::", mergeLines);
-      const line = new QLine([p1.x, p1.y, p2.x, p2.y], {
-        parentId   : roof.id,
-        fontSize   : roof.fontSize,
-        stroke     : '#3FBAE6',
-        strokeWidth: 4,
-        name       : 'eaveHelpLine',
-        lineName   : 'eaveHelpLine',
-        visible    : true,
-        roofId     : roofId,
-        selectable: true,
-        hoverCursor: 'pointer',
-        attributes : {
-          type   : 'eaveHelpLine',
-          isStart: true,
-          pitch  : wallLine.attributes.pitch,
-        }
-      });
-
-      //coordinateText(line)
-      canvas.add(line)
-      line.bringToFront()
-      canvas.renderAll();
-      return line
-    }
-
-    //getAddLine(roofLine.startPoint, roofLine.endPoint, ) //외곽선을 그린다
-
-    newPStart = { x: roofLine.x1, y: roofLine.y1 }
-    newPEnd = { x: roofLine.x2, y: roofLine.y2 }
-
-    const getInnerLines = (lines, point) => {
-
-    }
-    let isIn = false
-    let isOut = false
-
-//두 포인트가 변경된 라인인
-    if (fullyMoved) {
-      //반시계방향향
-
-      const mLine = getSelectLinePosition(wall, wallBaseLine)
-
-      if (getOrientation(roofLine) === 'vertical') {
-
-        if (['left', 'right'].includes(mLine.position)) {
-          if (Math.abs(wallLine.x1 - wallBaseLine.x1) < 0.1 || Math.abs(wallLine.x2 - wallBaseLine.x2) < 0.1) {
-            return false
+        // let mergeLines = mergeMovedLines(movedLines);
+        //console.log("mergeLines:::::::", mergeLines);
+        const line = new QLine([p1.x, p1.y, p2.x, p2.y], {
+          parentId   : roof.id,
+          fontSize   : roof.fontSize,
+          stroke     : '#3FBAE6',
+          strokeWidth: 4,
+          name       : 'eaveHelpLine',
+          lineName   : 'eaveHelpLine',
+          selectable : true,
+          visible    : true,
+          roofId     : roofId,
+          attributes : {
+            type: 'eaveHelpLine',
+            isStart : true,
+            pitch: wallLine.attributes.pitch,
           }
-          const positionType =
-            (mLine.position === 'left' && wallLine.x1 < wallBaseLine.x1) ||
-            (mLine.position === 'right' && wallLine.x1 > wallBaseLine.x1)
-              ? 'in' : 'out';
-          const condition = `${mLine.position}_${positionType}`;
-          let isStartEnd = findInteriorPoint(wallBaseLine, sortedBaseLines)
-          let sPoint, ePoint;
-          if (condition === 'left_in') {
-            isIn = true
-
-            if (isStartEnd.start) {
-              newPEnd.y = roofLine.y2;
-              newPEnd.x = roofLine.x2;
-
-              const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
-              ePoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 };
-              newPStart.y = wallBaseLine.y1
-
-              findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_start' });
-              const newPointX = Big(roofLine.x1).plus(moveDist).abs().toNumber()
-              const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
-              const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
-              let idx = (0 > index - 1) ? roofLines.length : index
-              const pLineX = roofLines[idx - 1].x1
-
-              getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
-              getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
-
-              if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
-                getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
-              }
-            }
-
-            if (isStartEnd.end) {
-              newPStart.y = roofLine.y1;
-              newPStart.x = roofLine.x1;
-
-              const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
-              ePoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 };
-              newPEnd.y = wallBaseLine.y2
-
-              findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_end' });
-              const newPointX = Big(roofLine.x1).plus(moveDist).toNumber()
-              const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
-              const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const pLineX = roofLines[idx + 1].x2
-
-              getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
-              getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
-
-              if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
-                getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
-              }
-              //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
-            }
-
-          } else if (condition === 'left_out') {
-            console.log("left_out::::isStartEnd:::::", isStartEnd);
-            if (isStartEnd.start) {
-
-              const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
-              const aStartY = Big(roofLine.y1).minus(moveDist).abs().toNumber()
-              const bStartY = Big(wallLine.y1).minus(moveDist).abs().toNumber()
-              const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x2 })
-
-              const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
-              newPStart.y = aStartY
-              newPEnd.y = roofLine.y2 //Big(roofLine.y2).minus(eLineY).toNumber()
-              let idx = (0 >= index - 1) ? roofLines.length : index
-              const newLine = roofLines[idx - 1];
-
-              if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
-                if (inLine) {
-                  if (inLine.x1 < inLine.x2) {
-                    getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
-                  } else {
-                    getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: bStartY, x: wallLine.x2 }, 'pink')
-                  }
-
-                }
-                getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
-                getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
-                findPoints.push({ y: aStartY, x: newPStart.x, position: 'left_out_start' });
-              } else {
-                const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
-                newPStart.y = Big(newPStart.y).minus(cLineY).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                if (inLine) {
-                  if (inLine.x1 < inLine.x2) {
-                    getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                  }
-                } else {
-                  //newPStart.y = wallLine.y1;
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
-                  newPStart.y = Big(wallBaseLine.y1).minus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                  if (inLine) {
-                    if (inLine.x2 > inLine.x1) {
-                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-            }
-
-
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
-              const aStartY = Big(roofLine.y2).plus(moveDist).toNumber()
-              const bStartY = Big(wallLine.y2).plus(moveDist).toNumber()
-              const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
-              console.log("startLines:::::::", inLine);
-              const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
-              newPEnd.y = aStartY
-              newPStart.y = roofLine.y1//Big(roofLine.y1).plus(eLineY).toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const newLine = roofLines[idx + 1];
-
-              if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
-                if (inLine) {
-                  if (inLine.x1 < inLine.x2) {
-                    getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink')
-                  }
-                }
-                getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
-                getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
-                findPoints.push({ y: aStartY, x: newPEnd.x, position: 'left_out_end' });
-              } else {
-                const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
-                newPEnd.y = Big(newPEnd.y).plus(cLineY).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                if (inLine) {
-                  if (inLine.x1 < inLine.x2) {
-                    getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                  }
-                } else {
-
-                  // newPEnd.y = wallLine.y2
-
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
-                  newPEnd.y = Big(wallBaseLine.y2).plus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                  if (inLine) {
-                    if (inLine.x2 > inLine.x1) {
-                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-              findPoints.push({ y: newPStart.y, x: newPEnd.x, position: 'left_out_end' });
-            }
-          } else if (condition === 'right_in') {
-            if (isStartEnd.start) {
-
-              newPEnd.y = roofLine.y2;
-              newPEnd.x = roofLine.x2;
-
-              const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
-              ePoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 };
-              newPStart.y = wallBaseLine.y1
-
-              findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_start' });
-              const newPointX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
-              const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
-              const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
-              let idx = (0 >= index - 1) ? roofLines.length : index
-              const pLineX = roofLines[idx - 1].x1
-
-              getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
-              //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
-
-              if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
-                getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
-              }
-            }
-
-            if (isStartEnd.end) {
-              newPStart.y = roofLine.y1;
-              newPStart.x = roofLine.x1;
-
-              const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
-              ePoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 };
-              newPEnd.y = wallBaseLine.y2
-
-              findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_end' });
-              const newPointX = Big(roofLine.x1).minus(moveDist).toNumber()
-              const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
-              const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const pLineX = roofLines[idx + 1].x2
-
-              getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
-              getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
-
-              if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
-                getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
-              }
-              getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
-            }
-
-          } else if (condition === 'right_out') {
-            console.log("right_out::::isStartEnd:::::", isStartEnd);
-            if (isStartEnd.start) { //x1 inside
-              const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
-              const aStartY = Big(roofLine.y1).plus(moveDist).abs().toNumber()
-              const bStartY = Big(wallLine.y1).plus(moveDist).abs().toNumber()
-              const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
-              console.log("startLines:::::::", inLine);
-              const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
-              newPStart.y = aStartY
-              newPEnd.y = roofLine.y2//Big(roofLine.y2).plus(eLineY).toNumber()
-              let idx = (0 >= index - 1) ? roofLines.length : index
-              const newLine = roofLines[idx - 1];
-
-              if (Math.abs(wallBaseLine.y1 - wallLine.y1) < 0.1) {
-                if (inLine) {
-                  if (inLine.x2 < inLine.x1) {
-                    getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x2 }, 'pink')
-                  }
-                }
-                getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
-                getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
-                findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_start' });
-              } else {
-                const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
-                newPStart.y = Big(newPStart.y).plus(cLineY).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                if (inLine) {
-                  if (inLine.x2 < inLine.x1) {
-                    getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                  }
-                } else {
-                  //newPStart.y = wallLine.y1;
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.x1).minus(roofLine.x1).abs().toNumber();
-                  newPStart.y = Big(wallBaseLine.y1).plus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                  if (inLine) {
-                    if (inLine.x2 > inLine.x1) {
-                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                    }
-                  }
-
-                }
-
-              }
-
-            }
-
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
-              const aStartY = Big(roofLine.y2).minus(moveDist).abs().toNumber()
-              const bStartY = Big(wallLine.y2).minus(moveDist).abs().toNumber()
-              const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
-              console.log("startLines:::::::", inLine);
-              const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
-              newPEnd.y = aStartY
-              newPStart.y = roofLine.y1//Big(roofLine.y1).minus(eLineY).toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const newLine = roofLines[idx + 1];
-              if (inLine) {
-                if (inLine.x2 < inLine.x1) {
-                  getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
-                } else {
-                  getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink')
-                }
-              }
-              if (Math.abs(wallBaseLine.y2 - wallLine.y2) < 0.1) {
-                getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
-                getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
-                findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_end' });
-              } else {
-                const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
-                newPEnd.y = Big(newPEnd.y).minus(cLineY).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                if (inLine) {
-                  if (inLine.x2 < inLine.x1) {
-                    getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                  }
-                } else {
-                  //newPEnd.y = wallLine.y2;
-
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
-                  newPEnd.y = Big(wallBaseLine.y2).minus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                  if (inLine) {
-                    if (inLine.x2 > inLine.x1) {
-                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                    }
-                  }
-
-                }
-
-              }
-            }
-          }
-        }
-      } else if (getOrientation(roofLine) === 'horizontal') { //red
-
-        if (['top', 'bottom'].includes(mLine.position)) {
-          if (Math.abs(wallLine.y1 - wallBaseLine.y1) < 0.1 || Math.abs(wallLine.y2 - wallBaseLine.y2) < 0.1) {
-            return false
-          }
-          const positionType =
-            (mLine.position === 'top' && wallLine.y1 < wallBaseLine.y1) ||
-            (mLine.position === 'bottom' && wallLine.y1 > wallBaseLine.y1)
-              ? 'in' : 'out';
-
-          const condition = `${mLine.position}_${positionType}`;
-          let isStartEnd = findInteriorPoint(wallBaseLine, sortedBaseLines)
-
-          let sPoint, ePoint;
-
-          if (condition === 'top_in') {
-            if (isStartEnd.start) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              sPoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 };
-              newPStart.x = wallBaseLine.x1;
-
-
-              const newPointY = Big(roofLine.y2).plus(moveDist).toNumber()
-
-              const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
-              const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
-              let idx = (0 >= index - 1) ? roofLines.length : index
-              const pLineY = roofLines[idx - 1].y1
-              getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
-              findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_start' });
-
-              if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
-                getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
-              }
-              //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
-
-            }
-
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
-              sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }
-              newPEnd.x = wallBaseLine.x2
-
-              const newPointY = Big(roofLine.y1).plus(moveDist).toNumber()
-
-              const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber()
-              const pLineX = Big(roofLine.x2).minus(0).abs().toNumber()
-              let idx = roofLines.length < index + 1 ? 0 : index
-              const pLineY = roofLines[idx + 1].y2
-              getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
-              findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_end' });
-
-              if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
-                getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
-              }
-
-
-              //getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
-            }
-
-          } else if (condition === 'top_out') {
-            console.log("top_out isStartEnd:::::::", isStartEnd);
-
-            if (isStartEnd.start) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              const aStartX = Big(roofLine.x1).plus(moveDist).toNumber()
-              const bStartX = Big(wallLine.x1).plus(moveDist).toNumber()
-              const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: newPEnd.y })
-
-              const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
-              newPEnd.x = roofLine.x2 //Big(newPEnd.x).plus(eLineX).toNumber()
-              newPStart.x = aStartX
-              let idx = (0 > index - 1) ? roofLines.length : index
-              const newLine = roofLines[idx - 1];
-
-              if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
-                if (inLine) {
-                  if (inLine.y2 > inLine.y1) {
-                    getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
-                  } else {
-                    getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
-                  }
-                }
-                getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
-                getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
-                findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_start' });
-              } else {
-                const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
-                newPStart.x = Big(newPStart.x).plus(cLineX).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                if (inLine) {
-                  if (inLine.y2 > inLine.y1) {
-                    getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                  }
-
-                } else {
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
-                  newPStart.x = Big(wallBaseLine.x1).plus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                  if (inLine) {
-                    if (inLine.y2 > inLine.y1) {
-                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-            }
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              const aStartX = Big(roofLine.x2).minus(moveDist).abs().toNumber()
-              const bStartX = Big(wallLine.x2).minus(moveDist).abs().toNumber()
-              const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: newPEnd.y })
-              console.log("startLines:::::::", inLine);
-              const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
-              newPStart.x = roofLine.x1;//Big(newPStart.x).minus(eLineX).abs().toNumber()
-              newPEnd.x = aStartX
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const newLine = roofLines[idx + 1];
-
-              if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
-                if (inLine) {
-                  if (inLine.y2 > inLine.y1) {
-                    getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
-                  } else {
-                    getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
-                  }
-
-                }
-                getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
-                getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
-                findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_end' });
-              } else {
-                const cLineX = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
-                newPEnd.x = Big(newPEnd.x).minus(cLineX).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                if (inLine) {
-                  if (inLine.y2 > inLine.y1) {
-                    getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                  }
-                } else {
-                  //newPEnd.x = wallLine.x2;
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
-                  newPEnd.x = Big(wallBaseLine.x2).minus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                  if (inLine) {
-                    if (inLine.y1 > inLine.y2) {
-                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-            }
-          } else if (condition === 'bottom_in') {
-            if (isStartEnd.start) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              sPoint = { x: wallBaseLine.x1, y: wallBaseLine.y1 };
-              newPStart.x = wallBaseLine.x1;
-
-
-              const newPointY = Big(roofLine.y2).minus(moveDist).toNumber()
-
-              const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
-              const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
-              let idx = (0 > index - 1) ? roofLines.length : index
-              const pLineY = roofLines[idx - 1].y1
-              getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
-              findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_start' });
-
-              if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
-                getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
-              }
-              getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
-            }
-
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
-              sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 };
-              newPEnd.x = wallBaseLine.x2;
-
-
-              const newPointY = Big(roofLine.y1).minus(moveDist).toNumber()
-
-              const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber()
-              const pLineX = Big(roofLine.x2).minus(0).abs().toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const pLineY = roofLines[idx + 1].y2
-              getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
-              findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_end' });
-
-              if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
-                getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
-                getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
-              }
-              getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
-
-            }
-          } else if (condition === 'bottom_out') {
-            console.log("bottom_out isStartEnd:::::::", isStartEnd);
-            if (isStartEnd.start) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              const aStartX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
-              const bStartX = Big(wallLine.x1).minus(moveDist).abs().toNumber()
-              const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: roofLine.y1 })
-              console.log("startLines:::::::", inLine);
-              const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
-              newPEnd.x = roofLine.x2//Big(roofLine.x2).minus(eLineX).toNumber()
-              newPStart.x = aStartX
-              let idx = (0 > index - 1) ? roofLines.length : index
-              const newLine = roofLines[idx - 1];
-
-
-              if (Math.abs(wallBaseLine.x1 - wallLine.x1) < 0.1) {
-                if (inLine) {
-                  if (inLine.y2 < inLine.y1) {
-                    getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
-                  } else {
-                    getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
-                  }
-                }
-                getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
-                getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
-                findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_start' });
-              } else {
-                const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
-                newPStart.x = Big(newPStart.x).minus(cLineX).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                if (inLine) {
-                  if (inLine.y2 < inLine.y1) {
-                    getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                  }
-                } else {
-                  //newPStart.x = wallLine.x1;
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
-                  newPStart.x = Big(wallBaseLine.x1).minus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
-                  if (inLine) {
-                    if (inLine.y2 > inLine.y1) {
-                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-            }
-
-            if (isStartEnd.end) {
-              const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
-              const aStartX = Big(roofLine.x2).plus(moveDist).toNumber()
-              const bStartX = Big(wallLine.x2).plus(moveDist).toNumber()
-              const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: roofLine.y1 })
-              console.log("startLines:::::::", inLine);
-              const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
-              newPEnd.x = aStartX
-              newPStart.x = roofLine.x1;//Big(roofLine.x1).plus(eLineX).toNumber()
-              let idx = (roofLines.length < index + 1) ? 0 : index
-              const newLine = roofLines[idx + 1];
-
-              if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
-                if (inLine) {
-                  if (inLine.y2 < inLine.y1) {
-                    getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
-                  } else {
-                    getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
-                  }
-                }
-                getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
-                getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
-                findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_end' });
-              } else {
-                const cLineX = Big(wallBaseLine.y2).minus(wallLine.y2).abs().toNumber()
-                newPEnd.x = Big(newPEnd.x).plus(cLineX).toNumber();
-                const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                if (inLine) {
-                  if (inLine.y2 < inLine.y1) {
-                    getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                  } else {
-                    getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                  }
-                } else {
-                  //newPEnd.x = wallLine.x2;
-                  //외곽 라인 그리기
-                  const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
-                  newPEnd.x = Big(wallBaseLine.x2).plus(rLineM).abs().toNumber();
-                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
-                  if (inLine) {
-                    if (inLine.y1 > inLine.y2) {
-                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
-                    } else {
-                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
-                    }
-                  }
-                }
-
-              }
-            }
-          }
-        }
+        });
+        //coordinateText(line)
+        canvas.add(line)
+        canvas.renderAll();
+        return line
       }
 
-      getAddLine(newPStart, newPEnd, 'red')
-      //canvas.remove(roofLine)
-    } else {
-      getAddLine(roofLine.startPoint, roofLine.endPoint,)
-    }
+      //getAddLine(roofLine.startPoint, roofLine.endPoint, ) //외곽선을 그린다
+
+      newPStart = { x: roofLine.x1, y: roofLine.y1 }
+      newPEnd = { x: roofLine.x2, y: roofLine.y2 }
+
+      const getInnerLines = (lines, point) => {
+
+      }
+      let isIn = false
+      let isOut = false
+
+//두 포인트가 변경된 라인인
+      if (fullyMoved ) {
+        //반시계방향향
+
+        const mLine = getSelectLinePosition(wall, wallBaseLine)
+
+        if (getOrientation(roofLine) === 'vertical') {
+
+          if (['left', 'right'].includes(mLine.position)) {
+            if(Math.abs(wallLine.x1 - wallBaseLine.x1) < 0.1 || Math.abs(wallLine.x2 - wallBaseLine.x2) < 0.1) {
+              return false
+            }
+            const positionType =
+              (mLine.position === 'left' && wallLine.x1 < wallBaseLine.x1) ||
+              (mLine.position === 'right' && wallLine.x1 > wallBaseLine.x1)
+                ? 'in' : 'out';
+            const condition = `${mLine.position}_${positionType}`;
+            let isStartEnd = findInteriorPoint(wallBaseLine, sortedBaseLines)
+            let sPoint, ePoint;
+            if(condition === 'left_in') {
+              isIn = true
+
+              if (isStartEnd.start ) {
+                newPEnd.y = roofLine.y2;
+                newPEnd.x = roofLine.x2;
+
+                const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
+                ePoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
+                newPStart.y = wallBaseLine.y1
+
+                findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_start' });
+                const newPointX = Big(roofLine.x1).plus(moveDist).abs().toNumber()
+                const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
+                const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
+                let idx = (0 > index - 1)?roofLines.length:index
+                const pLineX = roofLines[idx-1].x1
+
+                getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
+                getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
+
+                if(Math.abs(wallBaseLine.y1 -  wallLine.y1) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
+                  getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
+                }
+              }
+
+              if(isStartEnd.end) {
+                newPStart.y = roofLine.y1;
+                newPStart.x = roofLine.x1;
+
+                const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
+                ePoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
+                newPEnd.y = wallBaseLine.y2
+
+                findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'left_in_end' });
+                const newPointX = Big(roofLine.x1).plus(moveDist).toNumber()
+                const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
+                const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const pLineX = roofLines[idx+1].x2
+
+                getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
+                getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
+
+                if(Math.abs(wallBaseLine.y2 -  wallLine.y2) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
+                  getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
+                }
+                //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
+              }
+
+            }else if(condition === 'left_out') {
+              console.log("left_out::::isStartEnd:::::", isStartEnd);
+              if(isStartEnd.start){
+
+                const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
+                const aStartY = Big(roofLine.y1).minus(moveDist).abs().toNumber()
+                const bStartY = Big(wallLine.y1).minus(moveDist).abs().toNumber()
+                const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x2 })
+
+                const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
+                newPStart.y = aStartY
+                newPEnd.y = roofLine.y2 //Big(roofLine.y2).minus(eLineY).toNumber()
+                let idx = (0 >= index - 1)?roofLines.length:index
+                const newLine = roofLines[idx-1];
+
+                if(Math.abs(wallBaseLine.y1 -  wallLine.y1) < 0.1) {
+                  if(inLine){
+                    if(inLine.x1 < inLine.x2) {
+                      getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
+                    }else{
+                      getAddLine({ y: inLine.y2, x: inLine.x2 },{ y: bStartY, x: wallLine.x2 },  'pink')
+                    }
+
+                  }
+                  getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
+                  getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
+                  findPoints.push({ y: aStartY, x: newPStart.x, position: 'left_out_start' });
+                }else{
+                  const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
+                  newPStart.y = Big(newPStart.y).minus(cLineY).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                  if(inLine){
+                    if(inLine.x1 < inLine.x2) {
+                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1},{ y: newPStart.y, x: newPStart.x },  'purple')
+                    }
+                  }else {
+                    //newPStart.y = wallLine.y1;
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
+                    newPStart.y = Big(wallBaseLine.y1).minus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                    if(inLine) {
+                      if (inLine.x2 > inLine.x1) {
+                        getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                      } else {
+                        getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
+                      }
+                    }
+                  }
+
+                }
+              }
 
 
-    canvas.renderAll()
-  });
-}
-    getMoveUpDownLine()
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
+                const aStartY = Big(roofLine.y2).plus(moveDist).toNumber()
+                const bStartY = Big(wallLine.y2).plus(moveDist).toNumber()
+                const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
+                console.log("startLines:::::::", inLine);
+                const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
+                newPEnd.y = aStartY
+                newPStart.y = roofLine.y1//Big(roofLine.y1).plus(eLineY).toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const newLine = roofLines[idx+1];
 
-  }
+                if(Math.abs(wallBaseLine.y2 -  wallLine.y2) < 0.1) {
+                  if(inLine){
+                    if(inLine.x1 < inLine.x2) {
+                      getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: bStartY, x: wallLine.x1 }, 'pink')
+                    }
+                  }
+                  getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
+                  getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
+                  findPoints.push({ y: aStartY, x: newPEnd.x, position: 'left_out_end' });
+                }else{
+                  const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
+                  newPEnd.y = Big(newPEnd.y).plus(cLineY).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                  if(inLine){
+                    if(inLine.x1 < inLine.x2) {
+                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x },  'purple')
+                    }
+                  }else {
+
+                   // newPEnd.y = wallLine.y2
+
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
+                    newPEnd.y = Big(wallBaseLine.y2).plus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                    if(inLine) {
+                      if (inLine.x2 > inLine.x1) {
+                        getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                      } else {
+                        getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
+                      }
+                    }
+                  }
+
+                }
+                findPoints.push({ y: newPStart.y, x: newPEnd.x, position: 'left_out_end' });
+              }
+            }else if(condition === 'right_in') {
+              if (isStartEnd.start ) {
+
+                newPEnd.y = roofLine.y2;
+                newPEnd.x = roofLine.x2;
+
+                const moveDist = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
+                ePoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
+                newPStart.y = wallBaseLine.y1
+
+                findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_start'});
+                const newPointX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
+                const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
+                const pLineY = Big(roofLine.y1).minus(0).abs().toNumber()
+                let idx = (0 >= index - 1)?roofLines.length:index
+                const pLineX = roofLines[idx-1].x1
+
+                getAddLine({ x: newPStart.x, y: newPStart.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
+                //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
+
+                if(Math.abs(wallBaseLine.y1 -  wallLine.y1) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
+                  getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
+                }
+              }
+
+              if(isStartEnd.end) {
+                newPStart.y = roofLine.y1;
+                newPStart.x = roofLine.x1;
+
+                const moveDist = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
+                ePoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
+                newPEnd.y = wallBaseLine.y2
+
+                findPoints.push({ x: ePoint.x, y: ePoint.y, position: 'right_in_end' });
+                const newPointX = Big(roofLine.x1).minus(moveDist).toNumber()
+                const pDist = Big(wallLine.x1).minus(roofLine.x1).abs().toNumber()
+                const pLineY = Big(roofLine.y2).minus(0).abs().toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const pLineX = roofLines[idx+1].x2
+
+                getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: ePoint.x, y: ePoint.y }, 'blue')
+                getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: newPointX, y: roofLine.y1 }, 'orange')
+
+                if(Math.abs(wallBaseLine.y2 -  wallLine.y2) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: newPointX, y: pLineY }, 'green')
+                  getAddLine({ x: newPointX, y: pLineY }, { x: ePoint.x, y: ePoint.y }, 'pink')
+                }
+                getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: newPointX, y: roofLine.y2 }, 'orange')
+              }
+
+            }else if(condition === 'right_out') {
+              console.log("right_out::::isStartEnd:::::", isStartEnd);
+              if (isStartEnd.start ) { //x1 inside
+                const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
+                const aStartY = Big(roofLine.y1).plus(moveDist).abs().toNumber()
+                const bStartY = Big(wallLine.y1).plus(moveDist).abs().toNumber()
+                const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
+                console.log("startLines:::::::", inLine);
+                const eLineY = Big(bStartY).minus(wallLine.y1).abs().toNumber()
+                newPStart.y = aStartY
+                newPEnd.y = roofLine.y2//Big(roofLine.y2).plus(eLineY).toNumber()
+                let idx = (0 >= index - 1)?roofLines.length:index
+                const newLine = roofLines[idx-1];
+
+                if(Math.abs(wallBaseLine.y1 -  wallLine.y1) < 0.1) {
+                  if(inLine){
+                    if(inLine.x2 < inLine.x1) {
+                      getAddLine({ y: bStartY, x: wallLine.x2 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: bStartY, x: wallLine.x2 },  'pink')
+                    }
+                  }
+                  getAddLine({ y: bStartY, x: wallLine.x2 }, { y: roofLine.y1, x: wallLine.x1 }, 'magenta')
+                  getAddLine({ y: newLine.y1, x: newLine.x1 }, { y: newLine.y2, x: wallLine.x2 }, 'Gray')
+                  findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_start' });
+                }else{
+                    const cLineY = Big(wallBaseLine.x1).minus(wallLine.x1).abs().toNumber()
+                    newPStart.y = Big(newPStart.y).plus(cLineY).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                  if(inLine){
+                    if(inLine.x2 < inLine.x1 ) {
+                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPStart.y, x: newPStart.x },  'purple')
+                    }
+                  }else {
+                    //newPStart.y = wallLine.y1;
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.x1).minus(roofLine.x1).abs().toNumber();
+                    newPStart.y = Big(wallBaseLine.y1).plus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                    if(inLine){
+                      if(inLine.x2 > inLine.x1 ) {
+                        getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x } , 'purple')
+                      }
+                    }
+
+                  }
+
+                }
+
+              }
+
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.x1).minus(wallBaseLine.x1).abs().toNumber()
+                const aStartY = Big(roofLine.y2).minus(moveDist).abs().toNumber()
+                const bStartY = Big(wallLine.y2).minus(moveDist).abs().toNumber()
+                const inLine = findLineContainingPoint(innerLines, { y: aStartY, x: roofLine.x1 })
+                console.log("startLines:::::::", inLine);
+                const eLineY = Big(bStartY).minus(wallLine.y2).abs().toNumber()
+                newPEnd.y = aStartY
+                newPStart.y = roofLine.y1//Big(roofLine.y1).minus(eLineY).toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const newLine = roofLines[idx+1];
+                if(inLine){
+                  if(inLine.x2 < inLine.x1) {
+                    getAddLine({ y: bStartY, x: wallLine.x1 }, { y: inLine.y2, x: inLine.x2 }, 'pink')
+                  }else{
+                    getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: bStartY, x: wallLine.x1 },  'pink')
+                  }
+                }
+                if(Math.abs(wallBaseLine.y2 -  wallLine.y2) < 0.1) {
+                  getAddLine({ y: bStartY, x: wallLine.x1 }, { y: roofLine.y2, x: wallLine.x2 }, 'magenta')
+                  getAddLine({ y: newLine.y2, x: newLine.x2 }, { y: newLine.y1, x: wallLine.x1 }, 'Gray')
+                  findPoints.push({ y: aStartY, x: newPEnd.x, position: 'right_out_end' });
+                }else{
+                  const cLineY = Big(wallBaseLine.x2).minus(wallLine.x2).abs().toNumber()
+                  newPEnd.y = Big(newPEnd.y).minus(cLineY).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                  if(inLine){
+                    if(inLine.x2 < inLine.x1) {
+                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x }, 'purple')
+                    }
+                  }else {
+                    //newPEnd.y = wallLine.y2;
+
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.x2).minus(roofLine.x2).abs().toNumber();
+                    newPEnd.y = Big(wallBaseLine.y2).minus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                    if(inLine){
+                      if(inLine.x2 > inLine.x1 ) {
+                        getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y2, x: inLine.x2}, { y: newPEnd.y, x: newPEnd.x } , 'purple')
+                      }
+                    }
+
+                  }
+
+                }
+              }
+            }
+          }
+        } else if (getOrientation(roofLine) === 'horizontal') { //red
+
+          if (['top', 'bottom'].includes(mLine.position)) {
+            if(Math.abs(wallLine.y1 - wallBaseLine.y1) < 0.1 || Math.abs(wallLine.y2 - wallBaseLine.y2) < 0.1) {
+              return false
+            }
+            const positionType =
+              (mLine.position === 'top' && wallLine.y1 < wallBaseLine.y1) ||
+              (mLine.position === 'bottom' && wallLine.y1 > wallBaseLine.y1)
+                ? 'in' : 'out';
+
+            const condition = `${mLine.position}_${positionType}`;
+            let isStartEnd = findInteriorPoint(wallBaseLine,  sortedBaseLines)
+
+            let sPoint, ePoint;
+
+            if(condition === 'top_in') {
+              if (isStartEnd.start ) {
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                sPoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
+                newPStart.x = wallBaseLine.x1;
+
+
+                const newPointY = Big(roofLine.y2).plus(moveDist).toNumber()
+
+                const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
+                const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
+                let idx = (0 >= index - 1)?roofLines.length:index
+                const pLineY = roofLines[idx-1].y1
+                getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
+                findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_start' });
+
+                if(Math.abs(wallBaseLine.x1 -  wallLine.x1) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
+                  getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
+                }
+                //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
+
+              }
+
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
+                sPoint = { x: wallBaseLine.x2, y: wallBaseLine.y2 }
+                newPEnd.x = wallBaseLine.x2
+
+                const newPointY = Big(roofLine.y1).plus(moveDist).toNumber()
+
+                const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber()
+                const pLineX = Big(roofLine.x2).minus(0).abs().toNumber()
+                let idx = roofLines.length < index + 1 ? 0 : index
+                const pLineY = roofLines[idx + 1].y2
+                getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
+                findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'top_in_end' });
+
+                if (Math.abs(wallBaseLine.x2 - wallLine.x2) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
+                  getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
+                }
+
+
+                //getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
+              }
+
+            }else if(condition === 'top_out') {
+              console.log("top_out isStartEnd:::::::", isStartEnd);
+
+              if (isStartEnd.start ) {
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                const aStartX = Big(roofLine.x1).plus(moveDist).toNumber()
+                const bStartX = Big(wallLine.x1).plus(moveDist).toNumber()
+                const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: newPEnd.y })
+
+                const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
+                newPEnd.x = roofLine.x2 //Big(newPEnd.x).plus(eLineX).toNumber()
+                newPStart.x = aStartX
+                let idx = (0 > index - 1)?roofLines.length:index
+                const newLine = roofLines[idx-1];
+
+                if(Math.abs(wallBaseLine.x1 -  wallLine.x1) < 0.1) {
+                  if(inLine){
+                    if(inLine.y2 > inLine.y1 ) {
+                      getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
+                    }else{
+                      getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
+                    }
+                  }
+                  getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
+                  getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
+                  findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_start' });
+                }else{
+                  const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
+                  newPStart.x = Big(newPStart.x).plus(cLineX).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                  if(inLine){
+                    if(inLine.y2 > inLine.y1 ) {
+                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x } , 'purple')
+                    }
+
+                  }else {
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
+                    newPStart.x = Big(wallBaseLine.x1).plus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                    if(inLine){
+                      if(inLine.y2 > inLine.y1 ) {
+                        getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x } , 'purple')
+                      }
+                    }
+                  }
+
+                }
+              }
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                const aStartX = Big(roofLine.x2).minus(moveDist).abs().toNumber()
+                const bStartX = Big(wallLine.x2).minus(moveDist).abs().toNumber()
+                const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: newPEnd.y })
+                console.log("startLines:::::::", inLine);
+                const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
+                newPStart.x = roofLine.x1;//Big(newPStart.x).minus(eLineX).abs().toNumber()
+                newPEnd.x = aStartX
+                let idx = (roofLines.length < index + 1)?0:index
+                const newLine = roofLines[idx+1];
+
+                if(Math.abs(wallBaseLine.x2 -  wallLine.x2) < 0.1) {
+                  if(inLine){
+                    if(inLine.y2 > inLine.y1 ){
+                      getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
+                    }else{
+                      getAddLine({ x: inLine.x1, y: inLine.y1 },{ x: bStartX, y: wallLine.y1 },  'pink')
+                    }
+
+                  }
+                  getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
+                  getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
+                  findPoints.push({ x: aStartX, y: newPEnd.y, position: 'top_out_end' });
+                }else{
+                  const cLineX = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
+                  newPEnd.x = Big(newPEnd.x).minus(cLineX).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                  if(inLine){
+                    if(inLine.y2 > inLine.y1 ) {
+                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x },  'purple')
+                    }
+                  }else {
+                    //newPEnd.x = wallLine.x2;
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
+                    newPEnd.x = Big(wallBaseLine.x2).minus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                    if(inLine){
+                      if(inLine.y1 > inLine.y2 ) {
+                        getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPEnd.y, x: newPEnd.x } , 'purple')
+                      }
+                    }
+                  }
+
+                }
+              }
+            }else if(condition === 'bottom_in') {
+              if (isStartEnd.start ) {
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                sPoint = {x: wallBaseLine.x1, y: wallBaseLine.y1};
+                newPStart.x = wallBaseLine.x1;
+
+
+                const newPointY = Big(roofLine.y2).minus(moveDist).toNumber()
+
+                const pDist = Big(wallLine.y2).minus(roofLine.y2).abs().toNumber()
+                const pLineX = Big(roofLine.x1).minus(0).abs().toNumber()
+                let idx = (0 > index - 1)?roofLines.length:index
+                const pLineY = roofLines[idx-1].y1
+                getAddLine({ x: newPStart.x, y: newPStart.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
+                findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_start' });
+
+                if(Math.abs(wallBaseLine.x1 -  wallLine.x1) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
+                  getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
+                }
+                getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
+              }
+
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.y2).minus(wallBaseLine.y2).abs().toNumber()
+                sPoint = {x: wallBaseLine.x2, y: wallBaseLine.y2};
+                newPEnd.x = wallBaseLine.x2;
+
+
+                const newPointY = Big(roofLine.y1).minus(moveDist).toNumber()
+
+                const pDist = Big(wallLine.y1).minus(roofLine.y1).abs().toNumber()
+                const pLineX = Big(roofLine.x2).minus(0).abs().toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const pLineY = roofLines[idx+1].y2
+                getAddLine({ x: newPEnd.x, y: newPEnd.y }, { x: sPoint.x, y: sPoint.y }, 'blue')
+                findPoints.push({ x: sPoint.x, y: sPoint.y, position: 'bottom_in_end' });
+
+                if(Math.abs(wallBaseLine.x2 -  wallLine.x2) < 0.1) {
+                  getAddLine({ x: pLineX, y: pLineY }, { x: pLineX, y: newPointY }, 'green')
+                  getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
+                }
+                getAddLine({ x: roofLine.x1, y: roofLine.y1 }, { x: roofLine.x1, y: newPointY }, 'orange')
+
+              }
+            }else if(condition === 'bottom_out') {
+              console.log("bottom_out isStartEnd:::::::", isStartEnd);
+              if (isStartEnd.start ) {
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                const aStartX = Big(roofLine.x1).minus(moveDist).abs().toNumber()
+                const bStartX = Big(wallLine.x1).minus(moveDist).abs().toNumber()
+                const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: roofLine.y1 })
+                console.log("startLines:::::::", inLine);
+                const eLineX = Big(bStartX).minus(wallLine.x1).abs().toNumber()
+                newPEnd.x = roofLine.x2//Big(roofLine.x2).minus(eLineX).toNumber()
+                newPStart.x = aStartX
+                let idx = (0 > index - 1)?roofLines.length:index
+                const newLine = roofLines[idx-1];
+
+
+                if(Math.abs(wallBaseLine.x1 -  wallLine.x1) < 0.1) {
+                  if(inLine){
+                    if(inLine.y2 < inLine.y1 ) {
+                      getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
+                    }else{
+                      getAddLine({ x: inLine.x1, y: inLine.y1 },{ x: bStartX, y: wallLine.y1 },  'pink')
+                    }
+                  }
+                  getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x1, y: wallLine.y1 }, 'magenta')
+                  getAddLine({ x: newLine.x1, y: newLine.y1 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
+                  findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_start' });
+                }else{
+                  const cLineX = Big(wallBaseLine.y1).minus(wallLine.y1).abs().toNumber()
+                  newPStart.x = Big(newPStart.x).minus(cLineX).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                  if(inLine){
+                    if(inLine.y2 < inLine.y1 ) {
+                      getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPStart.y, x: newPStart.x },  'purple')
+                    }
+                  }else{
+                    //newPStart.x = wallLine.x1;
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.y1).minus(roofLine.y1).abs().toNumber();
+                    newPStart.x = Big(wallBaseLine.x1).minus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPStart.y, x: newPStart.x })
+                    if(inLine){
+                      if(inLine.y2 > inLine.y1 ) {
+                        getAddLine({ y: newPStart.y, x: newPStart.x }, { y: inLine.y1, x: inLine.x1 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y2, x: inLine.x2 }, { y: newPStart.y, x: newPStart.x } , 'purple')
+                      }
+                    }
+                  }
+
+                }
+              }
+
+              if(isStartEnd.end){
+                const moveDist = Big(wallLine.y1).minus(wallBaseLine.y1).abs().toNumber()
+                const aStartX = Big(roofLine.x2).plus(moveDist).toNumber()
+                const bStartX = Big(wallLine.x2).plus(moveDist).toNumber()
+                const inLine = findLineContainingPoint(innerLines, { x: aStartX, y: roofLine.y1 })
+                console.log("startLines:::::::", inLine);
+                const eLineX = Big(bStartX).minus(wallLine.x2).abs().toNumber()
+                newPEnd.x = aStartX
+                newPStart.x = roofLine.x1;//Big(roofLine.x1).plus(eLineX).toNumber()
+                let idx = (roofLines.length < index + 1)?0:index
+                const newLine = roofLines[idx + 1];
+
+                if(Math.abs(wallBaseLine.x2 -  wallLine.x2) < 0.1) {
+                  if(inLine){
+                    if(inLine.y2 < inLine.y1 ) {
+                      getAddLine({ x: bStartX, y: wallLine.y1 }, { x: inLine.x2, y: inLine.y2 }, 'pink')
+                    }else{
+                      getAddLine({ x: inLine.x1, y: inLine.y1 }, { x: bStartX, y: wallLine.y1 }, 'pink')
+                    }
+                  }
+                  getAddLine({ x: bStartX, y: wallLine.y1 }, { x: roofLine.x2, y: wallLine.y2 }, 'magenta')
+                  getAddLine({ x: newLine.x2, y: newLine.y2 }, { x: newLine.x1, y: wallLine.y1 }, 'Gray')
+                  findPoints.push({ x: aStartX, y: newPEnd.y, position: 'bottom_out_end' });
+                }else{
+                  const cLineX = Big(wallBaseLine.y2).minus(wallLine.y2).abs().toNumber()
+                  newPEnd.x = Big(newPEnd.x).plus(cLineX).toNumber();
+                  const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                  if(inLine){
+                    if(inLine.y2 < inLine.y1 ) {
+                      getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                    }else{
+                      getAddLine({ y: inLine.y1, x: inLine.x1 },{ y: newPEnd.y, x: newPEnd.x },  'purple')
+                    }
+                  }else{
+                    //newPEnd.x = wallLine.x2;
+                    //외곽 라인 그리기
+                    const rLineM = Big(wallBaseLine.y2).minus(roofLine.y2).abs().toNumber();
+                    newPEnd.x = Big(wallBaseLine.x2).plus(rLineM).abs().toNumber();
+                    const inLine = findLineContainingPoint(innerLines, { y: newPEnd.y, x: newPEnd.x })
+                    if(inLine){
+                      if(inLine.y1 > inLine.y2 ) {
+                        getAddLine({ y: newPEnd.y, x: newPEnd.x }, { y: inLine.y2, x: inLine.x2 }, 'purple')
+                      }else{
+                        getAddLine({ y: inLine.y1, x: inLine.x1 }, { y: newPEnd.y, x: newPEnd.x } , 'purple')
+                      }
+                    }
+                  }
+
+                }
+              }
+            }
+          }
+        }
+
+        getAddLine(newPStart, newPEnd, 'red')
+        //canvas.remove(roofLine)
+      }else{
+        getAddLine(roofLine.startPoint, roofLine.endPoint, )
+      }
+
+
+
+      canvas.renderAll()
+    });
+ // }
 
   if (findPoints.length > 0) {
     // 모든 점에 대해 라인 업데이트를 누적