Design: 모바일 스타일 수정

codeit-bootcamp-frontend · Apr 28, 2024 · 0c6cfc4 · 0c6cfc4
1 parent 637015d
commit 0c6cfc4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git a/src/Components/FolderMain/FolderMain.jsx b/src/Components/FolderMain/FolderMain.jsx
@@ -100,16 +100,22 @@ function FolderMain() {
                     )}
                 </div>
                 <div className={styles.main_sub_nav}>
-                    <p>{activeButton}</p>
+                    <p className={styles.active_button}>{activeButton}</p>
                     {activeButton !== "전체" && (
                         <div className={styles.main_sub_nav_side}>
                             <button
                                 className={styles.main_sub_nav_side_items}
                                 id='shareFolderBtn'
                                 onClick={() => openModal("share")}
                             >
-                                <img src={share} width={18} height={18} alt='폴더 공유' />
-                                공유
+                                <img
+                                    src={share}
+                                    width={18}
+                                    height={18}
+                                    alt='폴더 공유'
+                                    className={styles.icons}
+                                />
+                                <span className={styles.icon_text}>공유</span>
                             </button>
                             {modalType === "share" && (
                                 <Modal
@@ -124,8 +130,14 @@ function FolderMain() {
                                 className={styles.main_sub_nav_side_items}
                                 onClick={() => openModal("edit")}
                             >
-                                <img src={pen} width={18} height={18} alt='폴더 이름 변경' />
-                                이름 변경
+                                <img
+                                    src={pen}
+                                    width={18}
+                                    height={18}
+                                    alt='폴더 이름 변경'
+                                    className={styles.icons}
+                                />
+                                <span className={styles.icon_text}>이름 변경</span>
                             </button>
                             {modalType === "edit" && (
                                 <Modal
@@ -143,7 +155,7 @@ function FolderMain() {
                                 onClick={() => openModal("deleteFolder")}
                             >
                                 <img src={delete_icon} width={18} height={18} alt='폴더 삭제' />
-                                삭제
+                                <span className={styles.icon_text}>삭제</span>
                             </button>
                             {modalType === "deleteFolder" && (
                                 <Modal

diff --git a/src/Components/FolderMain/FolderMain.module.css b/src/Components/FolderMain/FolderMain.module.css
@@ -1,5 +1,5 @@
-@import '../../global.css';
-@import '../../reset.css';
+@import "../../global.css";
+@import "../../reset.css";
 
 /* m a i n */
 .main {
@@ -118,9 +118,6 @@ input:focus {
     display: flex;
     align-items: center;
     gap: 4px;
-    color: #9fa6b2;
-    font-size: 14px;
-    font-weight: 600;
     cursor: pointer;
 }
 
@@ -150,6 +147,12 @@ input:focus {
     background-color: var(--gray4);
 }
 
+.icon_text {
+    color: #9fa6b2;
+    font-size: 14px;
+    font-weight: 500;
+}
+
 /* tablet */
 @media (min-width: 768px) and (max-width: 1199px) {
     .section {
@@ -177,4 +180,15 @@ input:focus {
         border: 1px solid var(--white);
         font-size: 16px;
     }
+
+    .active_button {
+        width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .icon_text {
+        display: none;
+    }
 }