feat: 네비게이션 bar 버튼 css 적용

GC-MapleWind · Nov 19, 2024 · 7fe1577 · 7fe1577
1 parent 0fc2cb1
commit 7fe1577
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -21,10 +21,11 @@ const NavBar = () => {
         <header>
             <nav>
                 <ul>
-                    <li><Link to="/"><img src="../../public/logo.svg" alt="홈 아이콘" className={styles.logo}/></Link></li>
-                    <li><Link to="/ranking">랭킹</Link></li>
-                    <li><Link to="/statistics">통계</Link></li>
-                    <li><Link to="/profile">내 정보</Link></li>
+                    <li className={styles.navItem}><Link to="/"><img src="../../public/logo.svg" alt="홈 아이콘"
+                                                                     className={styles.logo}/></Link></li>
+                    <li className={styles.navItem}><Link to="/ranking">랭킹</Link></li>
+                    <li className={styles.navItem}><Link to="/statistics">통계</Link></li>
+                    <li className={styles.navItem}><Link to="/profile">내 정보</Link></li>
                     <li style={{marginLeft: 'auto'}}>
                         <input type="text" placeholder="검색"/>
                     </li>

diff --git a/src/styles/NavBar.module.css b/src/styles/NavBar.module.css
@@ -16,3 +16,17 @@ ul {
     height: 100%;
 }
 
+.navItem a {
+    color: inherit; /* li의 색상을 상속받음 */
+    text-decoration: none; /* 밑줄 제거 */
+}
+
+.navItem a:hover {
+    color: #FF6D6A; /* 호버 상태에서 색상 변경 */
+}
+
+li {
+    color: rgba(0, 0, 0, 0.54); /* text-black-54 */
+    font-weight: 600; /* font-semibold */
+    font-size: 1.3rem; /* text-sm */
+}