From 859ecc389d4aa559dfcfb757de89319381414f23 Mon Sep 17 00:00:00 2001
From: Hsoohyeon <soohyeon062800@gmail.com>
Date: Mon, 20 Nov 2023 16:15:57 +0900
Subject: [PATCH] =?UTF-8?q?Modify:=20css=EC=9D=BC=EB=B6=80=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/pages/Setting/Setting.scss                |  27 +++-
 src/pages/Setting/component/AllowanceModal.js |  62 ++++----
 .../Setting/component/AllowanceModal.scss     | 128 ++++++++++-------
 src/pages/Setting/component/BudgetModal.js    |  50 ++++---
 src/pages/Setting/component/BudgetModal.scss  | 133 ++++++++++--------
 .../Setting/component/CalenderInput.scss      |   4 +
 src/pages/Setting/component/CompleteBtn.scss  |   2 +-
 .../Setting/component/SelectDropdown.scss     |   4 +
 8 files changed, 247 insertions(+), 163 deletions(-)

diff --git a/src/pages/Setting/Setting.scss b/src/pages/Setting/Setting.scss
index 01bb7fc..43c84ae 100644
--- a/src/pages/Setting/Setting.scss
+++ b/src/pages/Setting/Setting.scss
@@ -4,6 +4,8 @@
   min-width: 570px;
   min-height: 630px;
   height: 630px;
+  margin-left: 20px;
+  margin-top: 20px;
 
   @media screen and (max-width: 768px) {
     height: auto;
@@ -41,13 +43,16 @@
       .allowanceBtn {
         font-size: 20px;
         font-weight: 400;
-        color: #fff;
+        color: #14213d;
         border-radius: 6px;
-        border-color: none;
-        background-color: #94ad9f;
+        border-color: #ecfbf2;
+        background-color: #ecfbf2;
         padding: 10px;
         margin: 5px;
         width: 100%;
+        &:focus {
+          background-color: #3dd980;
+        }
       }
     }
 
@@ -55,7 +60,9 @@
       display: flex;
       align-items: center;
       font-size: 20px;
+      color: #14213d;
       margin-top: 20px;
+      margin-bottom: 20px;
       padding-left: 10px;
 
       .settingPwNum {
@@ -70,10 +77,13 @@
     .settingSecondInfo {
       display: flex;
       flex-direction: column;
-      border: 2px solid black;
+      // border: 2px solid black;
       border-radius: 6px;
       padding: 10px;
-      margin-top: 10px;
+      margin: 10px;
+      box-shadow:
+        0 19px 38px #d9d9d9,
+        0 15px 12px #d9d9d9;
 
       .settingContentName {
         font-size: 20px;
@@ -106,6 +116,10 @@
               height: 50px;
               border: 2px solid #777;
               border-radius: 6px;
+
+              &:focus {
+                outline: 1px solid #3dd980;
+              }
             }
           }
         }
@@ -125,6 +139,9 @@
             height: 50px;
             border: 2px solid #777;
             border-radius: 6px;
+            &:focus {
+              outline: 1px solid #3dd980;
+            }
 
             &::placeholder {
               font-size: 20px;
diff --git a/src/pages/Setting/component/AllowanceModal.js b/src/pages/Setting/component/AllowanceModal.js
index 3a22991..17a19cf 100644
--- a/src/pages/Setting/component/AllowanceModal.js
+++ b/src/pages/Setting/component/AllowanceModal.js
@@ -59,36 +59,42 @@ const AllowanceModal = ({ isOpen, onClose }) => {
   }, []);
 
   return (
-    <div className={`modal ${isOpen ? 'open' : ''}`}>
-      <div className="allowanceInfo">
-        <h2 className="allowanceContentName">🗓️ 용돈 등록</h2>
-        <div className="allowanceContentList">
-          <CalenderInput
-            text="일자"
-            handleDateChange={(date) => handleInfo('date', date)}
-            date={settingInfo.date}
-          />
-          <SelectDropdown
-            text="대상 선택"
-            name="userName"
-            options={userList}
-            handleSelect={(e) => handleInfo('userName', e.target.value)}
-          />
-          <div className="allowance">
-            <label className="allowanceName">금액</label>
-            <input
-              className="allowanceInput"
-              type="text"
-              onChange={(e) => handleInfo('allowance', e.target.value)}
-              value={settingInfo.allowance}
+    <div className="allowanceModal">
+      <div className={`${isOpen ? 'backDrop' : ''}`} />
+      <div className={`modal ${isOpen ? 'open' : ''}`}>
+        <div className="allowanceInfo">
+          <h2 className="allowanceContentName">🗓️ 용돈 등록</h2>
+          <div className="allowanceContentList">
+            <CalenderInput
+              text="일자"
+              handleDateChange={(date) => handleInfo('date', date)}
+              date={settingInfo.date}
             />
+            <SelectDropdown
+              text="대상 선택"
+              name="userName"
+              options={userList}
+              handleSelect={(e) => handleInfo('userName', e.target.value)}
+            />
+            <div className="allowance">
+              <label className="allowanceName">금액</label>
+              <input
+                className="allowanceInput"
+                type="text"
+                onChange={(e) => handleInfo('allowance', e.target.value)}
+                value={settingInfo.allowance}
+              />
+            </div>
+          </div>
+          <div className="btn">
+            <CompleteBtn
+              className="completeBtnContainer"
+              onClick={handleClick}
+            />
+            <button className="closeBtn" onClick={onClose}>
+              닫기
+            </button>
           </div>
-        </div>
-        <div className="btn">
-          <CompleteBtn className="completeBtnContainer" onClick={handleClick} />
-          <button className="closeBtn" onClick={onClose}>
-            닫기
-          </button>
         </div>
       </div>
     </div>
diff --git a/src/pages/Setting/component/AllowanceModal.scss b/src/pages/Setting/component/AllowanceModal.scss
index b642aac..2710947 100644
--- a/src/pages/Setting/component/AllowanceModal.scss
+++ b/src/pages/Setting/component/AllowanceModal.scss
@@ -1,69 +1,93 @@
-.modal {
-  display: none;
-  /* 기본적으로 모달을 감추기 */
-
-  &.open {
-    display: block;
-    z-index: 1000;
-    position: absolute;
-    top: 50px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
+.allowanceModal {
+  .backDrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
   }
 
-  .allowanceInfo {
-    display: flex;
-    flex-direction: column;
-    border: 2px solid black;
-    border-radius: 6px;
-    padding: 10px;
-    width: 100%;
+  .modal {
+    z-index: 11;
+    display: none;
+    /* 기본적으로 모달을 감추기 */
 
-    .allowanceContentName {
-      font-size: 20px;
+    &.open {
+      display: block;
+      z-index: 1000;
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #fff;
+      margin-top: 20px;
+      border-radius: 6px;
+      border: 2px solid black;
     }
 
-    .allowanceContentList {
+    .allowanceInfo {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
+      padding: 10px;
+      width: 100%;
+
+      .allowanceContentName {
+        font-size: 20px;
+      }
 
-      .allowance {
+      .allowanceContentList {
         display: flex;
-        flex-direction: column;
-        margin: 5px;
+        flex-direction: row;
 
-        .allowanceName {
-          font-size: 20px;
-          padding: 10px;
+        .allowance {
+          display: flex;
+          flex-direction: column;
+          margin: 5px;
+
+          .allowanceName {
+            font-size: 20px;
+            padding: 10px;
+          }
+
+          .allowanceInput {
+            width: 200px;
+            height: 50px;
+            border: 2px solid #777;
+            border-radius: 6px;
+
+            &:focus {
+              outline: 1px solid #3dd980;
+            }
+          }
+        }
+      }
+      .btn {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        &:focus {
+          background-color: #3dd980;
         }
 
-        .allowanceInput {
-          width: 200px;
-          height: 50px;
-          border: 2px solid #777;
+        .closeBtn {
+          width: 10%;
+          height: 40px;
+          color: #14213d;
+          font-size: 20px;
+          margin: 5px;
+          margin-left: 10px;
           border-radius: 6px;
+          border: none;
+          background-color: #cbeaef;
+          text-align: center;
         }
-      }
-    }
-    .btn {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
 
-      .closeBtn {
-        width: 18%;
-        height: 40px;
-        color: #fff;
-        font-size: 20px;
-        margin: 5px;
-        border-radius: 6px;
-        border-color: #9fb9aa;
-        background-color: #4c97a4;
-        text-align: center;
-      }
-      .completeBtnContainer {
-        width: 100%;
+        .completeBtnContainer {
+          width: 100%;
+        }
       }
     }
   }
diff --git a/src/pages/Setting/component/BudgetModal.js b/src/pages/Setting/component/BudgetModal.js
index 0b4a236..15aefbe 100644
--- a/src/pages/Setting/component/BudgetModal.js
+++ b/src/pages/Setting/component/BudgetModal.js
@@ -43,30 +43,36 @@ const BudgetModal = ({ isOpen, onClose }) => {
   };
 
   return (
-    <div className={`modal${isOpen ? ' open' : ''}`}>
-      <div className="budgetInfo">
-        <h2 className="budgetContentName">🗓️ 예산 등록</h2>
-        <div className="budgetContentList">
-          <CalenderInput
-            text="일자"
-            handleDateChange={(date) => handleInfo('date', date)}
-            date={settingInfo.date}
-          />
-          <div className="budget">
-            <label className="budgetName">금액</label>
-            <input
-              className="budgetInput"
-              type="text"
-              onChange={(e) => handleInfo('budget', e.target.value)}
-              value={settingInfo.budget}
+    <div className="budgetModal">
+      <div className={`${isOpen ? 'backDrop' : ''}`} />
+      <div className={`modal ${isOpen ? 'open' : ''}`}>
+        <div className="budgetInfo">
+          <h2 className="budgetContentName">🗓️ 예산 등록</h2>
+          <div className="budgetContentList">
+            <CalenderInput
+              text="일자"
+              handleDateChange={(date) => handleInfo('date', date)}
+              date={settingInfo.date}
             />
+            <div className="budget">
+              <label className="budgetName">금액</label>
+              <input
+                className="budgetInput"
+                type="text"
+                onChange={(e) => handleInfo('budget', e.target.value)}
+                value={settingInfo.budget}
+              />
+            </div>
+          </div>
+          <div className="btn">
+            <CompleteBtn
+              className="completeBtnContainer"
+              onClick={handleClick}
+            />
+            <button className="closeBtn" onClick={onClose}>
+              닫기
+            </button>
           </div>
-        </div>
-        <div className="btn">
-          <CompleteBtn className="completeBtnContainer" onClick={handleClick} />
-          <button className="closeBtn" onClick={onClose}>
-            닫기
-          </button>
         </div>
       </div>
     </div>
diff --git a/src/pages/Setting/component/BudgetModal.scss b/src/pages/Setting/component/BudgetModal.scss
index 4666cd9..aefa18d 100644
--- a/src/pages/Setting/component/BudgetModal.scss
+++ b/src/pages/Setting/component/BudgetModal.scss
@@ -1,70 +1,93 @@
-.modal {
-  display: none;
-
-  &.open {
-    // display: block;
-    // z-index: 1000; //체계에 따라 관리하기 어려움(순서꼬일 수 있다.)
-    position: absolute;
-    width: max-content;
-    top: 50px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
+.budgetModal {
+  .backDrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
   }
 
-  .budgetInfo {
-    display: flex;
-    flex-direction: column;
-    border: 2px solid black;
-    border-radius: 6px;
-    padding: 10px;
-    width: 100%;
+  .modal {
+    z-index: 11;
+    display: none;
 
-    .budgetContentName {
-      font-size: 20px;
+    &.open {
+      // display: block;
+      // z-index: 1000; //체계에 따라 관리하기 어려움(순서꼬일 수 있다.)
+      position: absolute;
+      width: max-content;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      margin-top: 20px;
+      border-radius: 6px;
+      border: 2px solid black;
     }
 
-    .budgetContentList {
+    .budgetInfo {
       display: flex;
-      flex-direction: row;
-
-      .budget {
-        display: flex;
-        flex-direction: column;
-        margin: 5px;
+      flex-direction: column;
 
-        .budgetName {
-          font-size: 20px;
-          padding: 10px;
-        }
-        .budgetInput {
-          width: 100%; //화면 작을 때 너비조정(200px)
-          height: 50px;
-          border: 2px solid #777;
-          border-radius: 6px;
-        }
-      }
-    }
-    .btn {
-      display: flex;
-      justify-content: flex-end;
+      padding: 10px;
       width: 100%;
 
-      .closeBtn {
-        width: 18%;
-        height: 40px;
-        color: #fff;
+      .budgetContentName {
         font-size: 20px;
-        margin: 5px;
-        border-radius: 6px;
-        border-color: #9fb9aa;
-        background-color: #4c97a4;
-        text-align: center;
       }
-      .completeBtnContainer {
+
+      .budgetContentList {
+        display: flex;
+        flex-direction: row;
+
+        .budget {
+          display: flex;
+          flex-direction: column;
+          margin: 5px;
+
+          .budgetName {
+            font-size: 20px;
+            padding: 10px;
+          }
+          .budgetInput {
+            width: 100%; //화면 작을 때 너비조정(200px)
+            height: 50px;
+            border: 2px solid #777;
+            border-radius: 6px;
+            &:focus {
+              outline: 1px solid #3dd980;
+            }
+          }
+        }
+      }
+      .btn {
+        display: flex;
+        justify-content: flex-end;
         width: 100%;
+        &:focus {
+          background-color: #3dd980;
+        }
+
+        .closeBtn {
+          width: 18%;
+          height: 40px;
+          color: #14213d;
+          font-size: 20px;
+          margin: 5px;
+          margin-left: 10px;
+          border-radius: 6px;
+          border: none;
+          background-color: #cbeaef;
+          text-align: center;
+        }
+        .completeBtnContainer {
+          width: 100%;
+        }
       }
     }
   }
diff --git a/src/pages/Setting/component/CalenderInput.scss b/src/pages/Setting/component/CalenderInput.scss
index 3ba0d55..e1bd32a 100644
--- a/src/pages/Setting/component/CalenderInput.scss
+++ b/src/pages/Setting/component/CalenderInput.scss
@@ -13,5 +13,9 @@
     height: 50px;
     border: 2px solid #777;
     border-radius: 6px;
+
+    &:focus {
+      outline: 1px solid #3dd980;
+    }
   }
 }
diff --git a/src/pages/Setting/component/CompleteBtn.scss b/src/pages/Setting/component/CompleteBtn.scss
index f08a222..5c9fd4b 100644
--- a/src/pages/Setting/component/CompleteBtn.scss
+++ b/src/pages/Setting/component/CompleteBtn.scss
@@ -6,7 +6,7 @@
   font-size: 20px;
   font-weight: 400;
   border-radius: 6px;
-  border-color: #ecfbf2;
+  border: none;
   text-align: center;
   margin: 5px;
   cursor: pointer;
diff --git a/src/pages/Setting/component/SelectDropdown.scss b/src/pages/Setting/component/SelectDropdown.scss
index f21d61a..eecae98 100644
--- a/src/pages/Setting/component/SelectDropdown.scss
+++ b/src/pages/Setting/component/SelectDropdown.scss
@@ -13,5 +13,9 @@
     height: 50px;
     border: 2px solid #777;
     border-radius: 6px;
+
+    &:focus {
+      outline: 1px solid #3dd980;
+    }
   }
 }