fix: 호버시 하단 border 처리

YAPP-Github · Mar 22, 2024 · 95646ad · 95646ad
1 parent 0eeccd5
commit 95646ad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
@@ -119,20 +119,20 @@ const ProfilePage = () => {
         />
         <div className={styles.textButtonWrapper}>
           <button
-            className={styles.textButton}
+            className={styles.textButtonTextWrapper}
             onClick={() => {
               localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
               Cookies.remove(STORAGE_KEY.REFRESH_TOKEN);
               router.push(ROUTES.LANDING);
             }}
           >
-            로그아웃
+            <span className={styles.textButton}>로그아웃</span>
           </button>
           <button
-            className={styles.textButton}
+            className={styles.textButtonTextWrapper}
             onClick={exitModalProps.handleOpen}
           >
-            회원탈퇴
+            <span className={styles.textButton}>회원탈퇴</span>
           </button>
         </div>
       </div>

diff --git a/src/domain/계정설정/index.css.ts b/src/domain/계정설정/index.css.ts
@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
+import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
 
 export const container = style({
@@ -56,11 +57,20 @@ export const textButtonWrapper = style({
   justifyContent: 'flex-end',
 });
 
-export const textButton = style({
+export const textButtonTextWrapper = style({
   padding: '16px 24px',
-  color: COLORS['Grey/500'],
-  fontSize: '17px',
-  fontWeight: '500',
-  lineHeight: '27px',
-  letterSpacing: '-0.3px',
 });
+
+export const textButton = style([
+  sprinkles({
+    typography: '17/Body/Medium',
+  }),
+  {
+    color: COLORS['Grey/500'],
+
+    ':hover': {
+      color: COLORS['Grey/700'],
+      borderBottom: `1.5px solid ${COLORS['Grey/700']}`,
+    },
+  },
+]);