From a4b3783f1bbb9e4c99cbd2a835dad0ce199c879c 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, 4 Nov 2024 16:39:58 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=EA=B2=AC?=
 =?UTF-8?q?=EC=A0=81=20=ED=8A=B9=EC=9D=B4=EC=82=AC=ED=95=AD=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=9E=AC=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/estiment_arr_color.svg |  3 +++
 src/components/canvas/CanvasEstimate.jsx           |  4 ++--
 src/styles/_contents.scss                          | 11 ++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 public/static/images/canvas/estiment_arr_color.svg

diff --git a/public/static/images/canvas/estiment_arr_color.svg b/public/static/images/canvas/estiment_arr_color.svg
new file mode 100644
index 0000000..45588c7
--- /dev/null
+++ b/public/static/images/canvas/estiment_arr_color.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 7174" d="M1 1L5.5 5.5L10 1" stroke="#C2D0DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx
index 93ec14e..2f49ea5 100644
--- a/src/components/canvas/CanvasEstimate.jsx
+++ b/src/components/canvas/CanvasEstimate.jsx
@@ -220,8 +220,8 @@ export default function CanvasEstimate() {
                                 <div className="product_tit">製品情報</div>
                             </div>
                             <div className="left-unit-box">
-                                <button className="estimate-arr-btn down mr5" onClick={() => setHidden(false)}></button>
-                                <button className="estimate-arr-btn up" onClick={() => setHidden(true)}></button>
+                                <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
+                                <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
                             </div>
                         </div>
                         <div className={`estimate-check-wrap ${hidden ? 'hide':''}`}>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index a81f624..6715d48 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -832,12 +832,21 @@
     display: block;
     width: 20px;
     height: 20px;
-    background: #94A0AD url(../../public/static/images/canvas/estiment_arr.svg)no-repeat center;
+    background-color: #94A0AD;
+    border: 1px solid #94A0AD;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../../public/static/images/canvas/estiment_arr.svg);
     background-size: 11px 7px;
     border-radius: 2px;
     &.up{
         rotate: 180deg;
     }
+    &.on{
+        background-color: #fff;
+        border-color: #C2D0DD;
+        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
+    }
 }
 .estimate-check-wrap{
     .estimate-check-inner{