[ Web ] [ Feat ] about 깃허브 방문 버튼 hover press 컬러 추가 (#40)

capstone-kw-jjiggle · Nov 2, 2024 · 1f79269 · 1f79269
1 parent 3541b8d
commit 1f79269
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/apps/web/src/app/about/_components/aboutDeveloper/aboutDeveloper.css.ts b/apps/web/src/app/about/_components/aboutDeveloper/aboutDeveloper.css.ts
@@ -46,6 +46,17 @@ export const userPositionStyle = style({
   color: globalTheme.colors.blue_main,
 });
 
+export const githubLinkBtnStyle = style({
+  ...globalTheme.fonts.bodyReg16,
+  color: globalTheme.colors.blue_33,
+  ':hover': {
+    color: globalTheme.colors.blue_hover,
+  },
+  ':active': {
+    color: globalTheme.colors.blue_press,
+  },
+});
+
 export const userNameStyle = style({
   ...globalTheme.fonts.subheadBold20,
   color: globalTheme.colors.gray_19,

diff --git a/apps/web/src/app/about/_components/aboutDeveloper/aboutDeveloper.tsx b/apps/web/src/app/about/_components/aboutDeveloper/aboutDeveloper.tsx
@@ -16,6 +16,7 @@ import {
   userNameStyle,
   userCommentStyle,
   divUserCommentStyle,
+  githubLinkBtnStyle,
 } from './aboutDeveloper.css';
 
 const AboutDeveloper = ({
@@ -49,7 +50,7 @@ const AboutDeveloper = ({
       <div className={divMainContentStyle}>
         <div className={divSubContentStyle1}>
           <p className={userPositionStyle}>{userPosition}</p>
-          <a href={userGithub} className="">
+          <a href={userGithub} className={githubLinkBtnStyle}>
             github 방문
           </a>
         </div>