canvas 팝업 수정

src/app/canvas/page.jsx

@@ -63,6 +63,7 @@ import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSize
 import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
 import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
 import Footer from '@/components/layout/Footer'
+import ImageSize from '@/components/canvas/modal/imagesize/ImageSize'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -89,7 +90,7 @@ export default function CanvasPage() {
                     {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
-                    {/* {modalOption.option && <SettingModal01/>} */}
+                    {modalOption.option && <SettingModal01/>}
 
                     {/* 점·선 그리드 설정 */}
                     {/* {modalOption.gridoption && <GridOption/>} */}
@@ -195,6 +196,9 @@ export default function CanvasPage() {
 
                     {/* 사이즈 변경 */}
                     {/* <SizeChange/> */}
+
+                    {/* 이미지 크기 조절 */}
+                    <ImageSize/>
                 </div>
             </div>
             {menuValue === 5 && <Footer/>}

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

@@ -0,0 +1,22 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import { useState } from "react";
+
+export default function ImageSize(){
+    const [sizeValue, setSizeValue] = useState(100)
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">画像のサイズ変更 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="range-wrap">
+                        <input type="range" id="size" name="volume" min="20" max="200" step={10} value={sizeValue} onChange={(e) => setSizeValue(e.target.value)}/>
+                        <label htmlFor="size">{sizeValue}%</label>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}

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

@@ -7,7 +7,8 @@ const buttonList01 = [
     {id: 6, name: '回路番号表示'},
     {id: 7, name: '流れ方向表示'},
     {id: 8, name: '架台表示'},
-    {id: 9, name: '集計表表示'},
+    {id: 9, name: '画像表示'},
+    {id: 10, name: '集計表表示'},
 ]
 const buttonList02 = [
     {id: 1, name: 'ボーダーのみ'},

src/components/publishpage/PublishPage.jsx

@@ -142,8 +142,14 @@ export default function PublishPage() {
                   </Link>
                 </td>
                 <td className="coding_stat_web"></td>
-                <td className='red al-c'></td>
-                <td className="t-center">2024-10-11</td>
+                <td className='red al-c'>
+                  <ul>
+                    <li>2024-10-28</li>
+                    <li>canvas-setting pop 수정</li>
+                    <li>이미지 크기조절 pop 추가</li>
+                  </ul>
+                </td>
+                <td className="t-center">2024-10-28</td>
               </tr>
               <tr>
                 <td className="t-center">

src/styles/_modal.scss

@@ -1788,4 +1788,22 @@ $alert-color: #101010;
             flex: none;
         }
     }
+}
+
+//이미지 크기 설정
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 35px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
 }