From 70068afbc79f92cfda2cd07cc71613ccd0bef4cc 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, 29 Oct 2024 15:24:02 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=EC=84=A4=EC=A0=95=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementsetting/PlacementSettingPop.jsx  | 14 ++---
 src/styles/_modal.scss                        | 51 +++++++++----------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
index 62ce0f1..d28e9be 100644
--- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
+++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
@@ -156,14 +156,16 @@ export default function PlacementSettingPop(){
                                     <th>ファイルを読み込む</th>
                                     <td>
                                         <div className="flex-box">
-                                            <button className="img-edit-btn">
-                                                <span className="img-edit"></span>
-                                                <span>ファイルの追加</span>
-                                            </button>
+                                            <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/>
-                                                <span className="img-check suc"></span>
-                                                <span className="img-check fail"></span>
+                                                <button className="img-check"></button>
                                             </div>
                                         </div>
                                     </td>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 06713e5..361aa95 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -476,26 +476,29 @@ $alert-color: #101010;
     }
 }
 
-.img-edit-btn{
+.img-edit-wrap{
     flex: none;
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #101010;
-    background-color: #fff;
-    border-radius: 2px;
-    .img-edit{
-        width: 16px;
-        height: 16px;
-        background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
-        background-size: cover;
-        margin-right: 5px;
-    }
-    &:hover{
-        background-color: #ebebeb;
+    .img-edit-btn{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #101010;
+        background-color: #fff;
+        border-radius: 2px;
+        transition: all .15s ease-in-out;
+        .img-edit{
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+            background-size: cover;
+            margin-right: 5px;
+        }
+        &:hover{
+            background-color: #ebebeb;
+        }
     }
 }
 .img-name-wrap{
@@ -505,21 +508,17 @@ $alert-color: #101010;
     margin-left: 10px;
     input{
         flex: 1;
-        margin-right: 5px;
+
     }
     .img-check{
         flex: none;
         width: 18px;
         height: 18px;
+        margin-left: 5px;
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-        &.suc{
-            background-image: url(../../public/static/images/canvas/img_check_success.svg);
-        }
-        &.fail{
-            background-image: url(../../public/static/images/canvas/img_check_fail.svg);
-        }
+        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
     }
 }