Merge pull request #11 from wecode-bootcamp-korea/fix/setting-add

Modify: css일부 수정
wecode-bootcamp-korea · Nov 20, 2023 · cee6f98 · cee6f98
2 parents 92ac265 + 859ecc3
commit cee6f98
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 163 deletions.
diff --git 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,21 +43,26 @@
       .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;
+        }
       }
     }
 
     .settingFirstInfo {
       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
@@ -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
@@ -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
@@ -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>