[#24] 지표 입력 폼 스타일 수정

primus-teoSprint · Apr 7, 2024 · e9780a5 · e9780a5
1 parent 0763ced
commit e9780a5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css
@@ -20,17 +20,20 @@
 
 .item_name_input {
   width: 200px;
-  margin-right: 16px;
+  margin-right: 12px;
 }
 .score_container {
-  margin-right: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .score_container > span {
   font-size: 14px;
-  font-weight: bold;
+  font-weight: 700;
+  margin-right: 4px;
 }
 .item_score_input {
-  width: 40px;
+  width: 35px;
   margin-right: 4px;
 }
 .delete_btn {
@@ -45,10 +48,18 @@
   text-align: center;
 }
 
-.columnWrapper {
+.btnWrapper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  margin: 15px 0;
+}
 
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: auto;
   gap: 3px;
 }
 
@@ -60,5 +71,5 @@
 
 .checkbox {
   accent-color: var(--purple-700);
-  margin-bottom: 20px;
+  margin-right: 10px;
 }
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
@@ -95,7 +95,15 @@ function ActiveInvestmentItem({
             <span>점</span>
           </div>
         </div>
-        <div className={S.columnWrapper}>
+      </div>
+      <div className={S.btnWrapper}>
+        <input
+          type="checkbox"
+          className={S.checkbox}
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
+        <div className={S.rowWrapper}>
           <button
             type="button"
             className={S.delete_btn}
@@ -106,12 +114,6 @@ function ActiveInvestmentItem({
           <ItemAddBtn />
         </div>
       </div>
-      <input
-        type="checkbox"
-        className={S.checkbox}
-        checked={isChecked}
-        onChange={handleCheckboxChange}
-      />
     </>
   )
 }