[Design] 카드 추가 타이틀 수정

pu2rile · Aug 8, 2024 · 8119acf · 8119acf
1 parent dfa26e6
commit 8119acf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/components/CardAddPage.css b/src/components/CardAddPage.css
@@ -23,6 +23,14 @@
   padding: 10px;
 }
 
+.card-add-header .card-title {
+  margin-left: 5px; /* 타이틀을 뒤로가기 버튼 옆으로 이동 */
+  flex-grow: 1; /* 타이틀이 남은 공간을 차지하도록 설정 */
+  font-size: 24px; /* 텍스트 크기 변경 */
+  font-weight: normal; /* 텍스트 굵기 변경 */
+  color: black; /* 텍스트 색상 변경 */
+}
+
 .card-add-header .back-icon {
   width: 24px; /* 아이콘 크기 조정 */
   height: 24px;

diff --git a/src/components/CardAddPage.js b/src/components/CardAddPage.js
@@ -30,7 +30,7 @@ const CardAddPage = ({ addCard, isOpen, onClose }) => {
           <button className="back-button" onClick={onClose}>
             <img src={`${process.env.PUBLIC_URL}/images/back-icon.png`} alt="뒤로가기" className="back-icon" />
           </button>
-          <h2 className="title">카드 추가</h2>
+          <h2 className="card-title">카드 추가</h2>
           <button className="close-button" onClick={onClose}>
             <img src={`${process.env.PUBLIC_URL}/images/close-icon.png`} alt="닫기" className="close-icon" />
           </button>

diff --git a/src/components/CardManagement.css b/src/components/CardManagement.css
@@ -1,5 +1,5 @@
 .card-header {
-    margin-top: -20px;
+    margin-top: -10px;
     margin-bottom: 40px;
     display: flex;
     align-items: center;
@@ -8,16 +8,16 @@
   }
 
   .card-header .card-title {
+    margin-left: -20px;
     font-size: 24px; /* 텍스트 크기 변경 */
     font-weight: normal; /* 텍스트 굵기 변경 */
-    color: #333; /* 텍스트 색상 변경 */
+    color: black; /* 텍스트 색상 변경 */
   }
 
   .card-header .close-button {
     margin-left: auto; /* 닫기 버튼을 오른쪽으로 정렬 */
     background: none; /* 버튼 배경 제거 */
-    border: none; /* 버튼 테두리 제거 */
-    padding: 10px;
+    margin-right: 20px;
     cursor: pointer;
   }
 
@@ -30,9 +30,10 @@
   .no-cards {
     text-align: center;
     padding: 20px;
-    color: #5f5f5f;
-    font-size: 20px;
+    color: #575757;
+    font-size: 25px;
     font-weight: bold;
+    margin-bottom: -30px;
   }
 
   .cards-list {
@@ -43,10 +44,10 @@
 
   /* 카드 추가 버튼 */
   .add-card-button {
-    background-color: #e3e3e3;
+    background-color: #e5e5e5;
     font-size: 30px;
     cursor: pointer;
-    color: #5f5f5f;
+    color: #575757;
     padding: 80px 160px; /* 내부 여백 */
     border-radius: 10px; /* 모서리 둥글게 */
     margin: 0 auto; /* 수평 가운데 정렬 */