From 26c4b1ad2a73e733bf1965af4c6bfd14c3289efe 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: Tue, 12 Nov 2024 09:17:23 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B6=88?=
 =?UTF-8?q?=EB=9F=AC=EC=98=A4=EA=B8=B0=20pop=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/images/canvas/side_icon10.svg   |  4 ++
 src/app/canvas/page.jsx                       |  4 ++
 src/components/canvas/CanvasMenu.jsx          |  1 +
 .../canvas/modal/imgload/ImgLoad.jsx          | 61 +++++++++++++++++++
 .../placementsetting/PlacementSettingPop.jsx  | 39 ------------
 src/components/publishpage/PublishPage.jsx    |  8 ++-
 src/styles/_contents.scss                     |  1 +
 src/styles/_modal.scss                        | 18 +++++-
 src/styles/_reset.scss                        | 57 +++++++++++++++++
 9 files changed, 152 insertions(+), 41 deletions(-)
 create mode 100644 public/static/images/canvas/side_icon10.svg
 create mode 100644 src/components/canvas/modal/imgload/ImgLoad.jsx

diff --git a/public/static/images/canvas/side_icon10.svg b/public/static/images/canvas/side_icon10.svg
new file mode 100644
index 0000000..d7eba9e
--- /dev/null
+++ b/public/static/images/canvas/side_icon10.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.75 3.94737H12.0625C13.6425 3.94737 14.4325 3.94737 15 4.31991C15.2457 4.48119 15.4567 4.68842 15.6208 4.92979C16 5.48734 16 6.26349 16 7.81579C16 8.02719 16.0003 8.01008 16 8.36842M8.5 3.94737L8.02492 3.01388C7.63134 2.24053 7.27167 1.46209 6.39944 1.14074C6.01742 1 5.58102 1 4.7082 1C3.34585 1 2.66467 1 2.15355 1.28023C1.7892 1.47999 1.48857 1.77535 1.28524 2.13331C1 2.63547 1 3.30469 1 4.64315V6.89474C1 10.3682 1 12.105 2.09835 13.1841C3.11612 14.184 4.7087 14.2574 7.75 14.2627" stroke="white" stroke-linecap="round"/>
+<path d="M12.7793 14.5884C13.3445 15.1372 14.2609 15.1372 14.8261 14.5884C15.3914 14.0396 15.3914 13.1498 14.8261 12.601L13.5469 11.3589C13.0473 10.8739 12.2733 10.8175 11.71 11.19M11.7208 9.51684C11.1556 8.96805 10.2392 8.96805 9.67397 9.51684C9.10876 10.0656 9.10876 10.9554 9.67397 11.5042L10.9532 12.7463C11.462 13.2403 12.2554 13.2896 12.8211 12.8942" stroke="white" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 4d5abe5..4823c29 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -65,6 +65,7 @@ import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
 import Footer from '@/components/layout/Footer'
 import ImageSize from '@/components/canvas/modal/imagesize/ImageSize'
 import MeasuredValueOption from '@/components/canvas/modal/measuredvalueoption/MeasuredValueOption'
+import ImgLoad from '@/components/canvas/modal/imgload/ImgLoad'
 
 export default function CanvasPage() {
     const modalOption = useRecoilValue(modalState);
@@ -203,6 +204,9 @@ export default function CanvasPage() {
 
                     {/* 실측치 설정 */}
                     {/* <MeasuredValueOption/> */}
+
+                    {/* 이미지 불러오기 */}
+                    <ImgLoad/>
                 </div>
             </div>
             {menuValue === 5 && <Footer/>}
diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx
index 6de51d6..dcc376f 100644
--- a/src/components/canvas/CanvasMenu.jsx
+++ b/src/components/canvas/CanvasMenu.jsx
@@ -67,6 +67,7 @@ export default function CanvasMenu({setMenuValue}) {
                                 <Qselect title={'瓦53A'} option={SelectOption}/>
                             </div>
                             <div className="btn-from">
+                                <button className="btn10"></button>
                                 <button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
                                 <button className="btn05"></button>
                                 <button className="btn06"></button>
diff --git a/src/components/canvas/modal/imgload/ImgLoad.jsx b/src/components/canvas/modal/imgload/ImgLoad.jsx
new file mode 100644
index 0000000..7b016cc
--- /dev/null
+++ b/src/components/canvas/modal/imgload/ImgLoad.jsx
@@ -0,0 +1,61 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function ImgLoad(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap r`}>
+                <div className="modal-head">
+                    <h1 className="title">画像を読み込む </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="img-flex-box">
+                        <span className="normal-font mr10">サイズ調整と回転</span>
+                        <label className="toggle-btn">
+                            <input type="checkbox"/>
+                            <span className="slider"></span>
+                        </label>
+                    </div>
+                    <div className="img-load-from">
+                        <div className="img-load-item">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio03" id="ra06" />
+                                <label htmlFor="ra06">ファイルを読み込む</label>
+                            </div>
+                            <div className="img-flex-box">
+                                <div className="img-edit-wrap">
+                                    <label className="img-edit-btn" htmlFor="img_file">
+                                        <span className="img-edit"></span>
+                                        ファイルの追加
+                                    </label>
+                                    <input type="file" id="img_file" style={{display: 'none'}}/>
+                                </div>
+                                <div className="img-name-wrap">
+                                    <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
+                                    <button className="img-check"></button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="img-load-item">
+                            <div className="d-check-radio pop">
+                                <input type="radio" name="radio03" id="ra06" />
+                                <label htmlFor="ra06">アドレスを読み込む</label>
+                            </div>
+                            <div className="img-flex-box for-address">
+                                <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'}/>
+                                <div className="img-edit-wrap">
+                                    <button className="img-edit-btn">完了</button>
+                                </div>
+                                <span className="check-address fail"></span>
+                                <span className="check-address success"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">完了</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
index 81a08cc..99f236f 100644
--- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
+++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
@@ -158,46 +158,7 @@ export default function PlacementSettingPop(){
                                         </div> */}
                                     </td>
                                 </tr>
-                                <tr>
-                                    <th>ファイルを読み込む</th>
-                                    <td>
-                                        <div className="pop-form-radio mb10">
-                                            <div className="d-check-radio pop">
-                                                <input type="radio" name="radio03" id="ra06" />
-                                                <label htmlFor="ra06">ファイルを読み込む</label>
-                                            </div>
-                                            <div className="d-check-radio pop">
-                                                <input type="radio" name="radio03" id="ra07" />
-                                                <label htmlFor="ra07">アドレスを読み込む</label>
-                                            </div>
-                                        </div>
 
-                                        {/* 파일 불러오기 */}
-                                        <div className="flex-box">
-                                            <div className="img-edit-wrap">
-                                                <label className="img-edit-btn" htmlFor="img_file">
-                                                    <span className="img-edit"></span>
-                                                    ファイルの追加
-                                                </label>
-                                                <input type="file" id="img_file" style={{display: 'none'}}/>
-                                            </div>
-                                            <div className="img-name-wrap">
-                                                <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
-                                                <button className="img-check"></button>
-                                            </div>
-                                        </div>
-
-                                        {/* 주소 불러오기 */}
-                                        <div className="flex-box for-address">
-                                            <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'}/>
-                                            <div className="img-edit-wrap mr5">
-                                                <button className="img-edit-btn">完了</button>
-                                            </div>
-                                            <span className="check-address fail"></span>
-                                            <span className="check-address success"></span>
-                                        </div>
-                                    </td>
-                                </tr>
                             </tbody>
                         </table>
                     </div>
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index 553a90d..a90f099 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/src/components/publishpage/PublishPage.jsx
@@ -172,10 +172,16 @@ export default function PublishPage() {
                     <li>2024-11-05</li>
                     <li>*면 흐름 설정 pop 수정</li>
                   </ul>
-                  <ul>
+                  <ul className='mb10'>
                     <li>2024-11-07</li>
                     <li>*실측치 설정 pop 추가</li>
                   </ul>
+                  <ul>
+                    <li>2024-11-12</li>
+                    <li>*캔버스 메뉴 이미지 불러오기 버튼 추가</li>
+                    <li>*이미지 불러오기 팝업 추가</li>
+                    <li>*배치면 초기설정 이미지 불러오기 삭제</li>
+                  </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>
               </tr>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 6715d48..48b3540 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -114,6 +114,7 @@
                     &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
                     &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
                     &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+                    &.btn10{background-image: url(../../public/static/images/canvas/side_icon10.svg); background-size: 15px 14px;}
                     &:hover{
                         background-color: #1083E3;
                     }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 01b47c4..cd6a602 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -411,7 +411,6 @@ $alert-color: #101010;
                 .flex-box{
                     display: flex;
                     align-items: center;
-                    height: 100%;
                 }
             }
             &:first-child{
@@ -1910,4 +1909,21 @@ $alert-color: #101010;
         color: #fff;
         font-weight: 500;
     }
+}
+
+// 이미지 불러오기
+.img-flex-box{
+    display: flex;
+    align-items: center;
+}
+.img-load-from{
+    margin-top: 20px;
+    .img-load-item{
+        border-top: 1px solid #424242;
+        padding: 18px 0;
+        .d-check-radio{
+            margin-bottom: 20px;
+        }
+    }
+    border-bottom: 1px solid #424242;
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 60cb3b8..799796b 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -910,4 +910,61 @@ input[type=text]{
             color: #999999;
         }
     }
+}
+
+// toggle
+.toggle-btn {
+    position: relative;
+    display: inline-block;
+    width: 55px;
+    height: 20px;
+    input {
+        display: none;
+    }
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #454545;
+    transition: .4s;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 20px;
+    color: white;
+    font-size: 12px;
+    font-weight: 400;
+    &:after {
+        content: 'OFF';
+        position: absolute;
+        right: 7px;
+        color: white;
+        font-size: 12px;
+        font-weight: 400;
+    }
+    &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 2px;
+        bottom: 2px;
+        background-color: white;
+        transition: .4s;
+        border-radius: 50%;
+    }
+}
+input:checked + .slider {
+    background-color: #2563EB;
+    &:after {
+        content: 'ON';
+        left: 10px;
+        right: auto;
+    }
+    &:before {
+        transform: translateX(35px);
+    }
 }
\ No newline at end of file