면흐름 설정 pop 수정

src/app/canvas/page.jsx

@@ -153,7 +153,7 @@ export default function CanvasPage() {
                     {/* <EachPropertyChange/> */}
 
                     {/* 면 흐름 설정 */}
-                    {/* <DrawingFlow/> */}
+                    <DrawingFlow/>
 
                     {/* 지붕모듈선택 */}
                     {/* <RoofModuleOption/> */}

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

@@ -10,7 +10,7 @@ export default function DrawingFlow(){
     const [compasDeg, setCompasDeg] = useState(0);
     return(
         <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lx`}>
+            <div className={`modal-pop-wrap ml`}>
                 <div className="modal-head">
                     <h1 className="title">面フローの設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -51,6 +51,7 @@ export default function DrawingFlow(){
                                     <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
                                 </div>
                             </div>
+                            <div className="draw-flow-wrap">
                                 <div className="compas-box">
                                     <div className="compas-box-inner">
                                         <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
@@ -84,6 +85,7 @@ export default function DrawingFlow(){
                                 </div>
                             </div>
                         </div>
+                    </div>
                     <div className="grid-btn-wrap">
                         <button className="btn-frame modal act">保存</button>
                     </div>

src/components/publishpage/PublishPage.jsx

@@ -163,11 +163,15 @@ export default function PublishPage() {
                     <li>2024-10-31</li>
                     <li>*그리드 이동, 보조선 이동, 보조선 복사 pop 수정</li>
                   </ul>
-                  <ul>
+                  <ul className='mb10'>
                     <li>2024-11-04</li>
                     <li>*배치면 초기설정 pop 이미지 불러오기 영역 수정</li>
                     <li>*견적서 견적 특이사항 영역 닫힘 열림 추가</li>
                   </ul>
+                  <ul>
+                    <li>2024-11-05</li>
+                    <li>*면 흐름 설정 pop 수정</li>
+                  </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>
               </tr>

src/styles/_modal.scss

@@ -1157,6 +1157,10 @@ $alert-color: #101010;
         .object-direction-wrap{
             flex: 1;
         }
+        &:first-child{
+            flex: none;
+            width: 195px;
+        }
     }
 }
 
@@ -1229,6 +1233,7 @@ $alert-color: #101010;
                 width: 5px;
                 height: 5px;
                 background-color: #fff;
+                border-radius: 50%;
             }
             i{
                 color: #fff;
@@ -1253,6 +1258,9 @@ $alert-color: #101010;
     }
 }
 
+.draw-flow-wrap{
+    margin: 10px 0;
+}
 
 // 지붕모듈선택
 .roof-module-tab{