From d1b44c7e868447eb1c490e3aeeb9e6c353696fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Mon, 28 Oct 2024 16:06:19 +0900
Subject: [PATCH] =?UTF-8?q?canvas=20=ED=8C=9D=EC=97=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/canvas/page.jsx                       |  6 ++++-
 .../canvas/modal/imagesize/ImageSize.jsx      | 22 +++++++++++++++++++
 .../canvas/modal/settoing01/FirstOption.jsx   |  3 ++-
 src/components/publishpage/PublishPage.jsx    | 10 +++++++--
 src/styles/_modal.scss                        | 18 +++++++++++++++
 5 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/components/canvas/modal/imagesize/ImageSize.jsx

diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 7a409f0..bee72a7 100644
--- a/src/app/canvas/page.jsx
+++ b/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/>}
diff --git a/src/components/canvas/modal/imagesize/ImageSize.jsx b/src/components/canvas/modal/imagesize/ImageSize.jsx
new file mode 100644
index 0000000..4c1ca9a
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/settoing01/FirstOption.jsx b/src/components/canvas/modal/settoing01/FirstOption.jsx
index 111963c..f51bb69 100644
--- a/src/components/canvas/modal/settoing01/FirstOption.jsx
+++ b/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: 'ボーダーのみ'},
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index c97df05..7eb6c8f 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/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">
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9dc39b6..62fad51 100644
--- a/src/styles/_modal.scss
+++ b/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;
+    }
 }
\ No newline at end of file