모바일 - 과금관리 디자인 적용

src/main/resources/static/css/main.css

@@ -16760,6 +16760,14 @@ input[type=checkbox]:checked + .custom-checkbox {
   align-items: center;
   gap: 10px;
 }
+.form-inline .period-selects {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.form-inline .period-selects .period-unit {
+  margin-right: 10px;
+}
 
 .btnBox {
   margin-left: auto;
@@ -16953,16 +16961,36 @@ input[type=checkbox]:checked + .custom-checkbox {
   }
   .form-inline label {
     min-width: auto;
+    margin-bottom: 4px;
   }
   .form-inline .form-control {
     width: 100%;
   }
+  .form-inline--period .period-selects {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+  .form-inline--period .period-selects .form-control {
+    flex: 1;
+    min-width: 0;
+  }
+  .form-inline--period .period-selects .period-unit {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: #1A1A2E;
+  }
   .btnBox {
     margin-left: 0;
     width: 100%;
   }
   .btnBox .btn {
     width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
   .table-responsive {
     overflow-x: scroll;

src/main/resources/static/sass/pages/_commission.scss

@@ -61,6 +61,17 @@
   display: flex;
   align-items: center;
   gap: 10px;
+
+  // 조회기간 [년] [월] 컨테이너 - PC 기본 스타일
+  .period-selects {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .period-unit {
+      margin-right: 10px;
+    }
+  }
 }
 
 .btnBox {
@@ -286,11 +297,34 @@
 
     label {
       min-width: auto;
+      margin-bottom: $spacing-xs;
     }
 
     .form-control {
       width: 100%;
     }
+
+    // 조회기간: [년] [월] 한 줄 유지
+    &--period {
+      .period-selects {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $spacing-sm;
+        width: 100%;
+
+        .form-control {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .period-unit {
+          flex-shrink: 0;
+          font-size: $font-size-sm;
+          color: $text-dark;
+        }
+      }
+    }
   }
 
   .btnBox {
@@ -299,6 +333,9 @@
 
     .btn {
       width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 

src/main/resources/templates/views/apps/commission/commissionManage.html

@@ -29,14 +29,15 @@
         <option value="1" selected th:text="${organization?.orgName ?: 'ABC 핀테크'}"></option>
       </select>
     </span>
-    <span class="form-inline">
+    <span class="form-inline form-inline--period">
       <label for="forYear">조회기간</label>
+      <span class="period-selects">
         <select id="forYear" class="form-control">
           <option value="">- 선택 -</option>
           <option value="2023">2023</option>
           <option value="2024">2024</option>
           <option value="2025" selected>2025</option>
-      </select> <span>년</span>&nbsp;&nbsp;
+        </select> <span class="period-unit">년</span>
         <select id="forMonth" class="form-control">
           <option value="">- 선택 -</option>
           <option value="1">1</option>
@@ -51,7 +52,8 @@
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
-      </select> <span>월</span>
+        </select> <span class="period-unit">월</span>
+      </span>
     </span>
     <span class="btnBox">
       <button type="button" class="btn btn-primary" onclick="loadData()">