From 81c91114779f5dff2c4ea4f4a00c6d820bac9b3b Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Tue, 12 Nov 2024 10:45:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8F=84=EB=A9=B4=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EC=97=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/images/canvas/side_icon10.svg |  4 ++
 src/components/floor-plan/CanvasMenu.jsx    |  1 +
 src/components/floor-plan/modal/ImgLoad.jsx | 61 +++++++++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 public/static/images/canvas/side_icon10.svg
 create mode 100644 src/components/floor-plan/modal/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 00000000..d7eba9ec
--- /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/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index e544dbec..09758a1e 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -235,6 +235,7 @@ export default function CanvasMenu(props) {
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
               </div>
               <div className="btn-from">
+                <button className="btn10"></button>
                 {/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
                 <button className="btn04" onClick={handlePopup}></button>
                 <button className="btn05"></button>
diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx
new file mode 100644
index 00000000..52ca977c
--- /dev/null
+++ b/src/components/floor-plan/modal/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>
+  )
+}