style: sidebar link component apply

DaleStudy · Jan 24, 2025 · 6db5d68 · 6db5d68
1 parent 5d95a24
commit 6db5d68
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 68 deletions.
diff --git a/src/assets/Github.png b/src/assets/Github.png
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
@@ -161,74 +161,30 @@
   font-size: 13px;
 }
 
-.returnButtonLink {
-  display: block;
-  margin-bottom: 15px;
-  align-self: flex-end;
-  width: 47%;
-  padding: 10px 0;
-  border: 1px solid var(--bg-400);
-  border-radius: 10px;
-  color: var(--bg-400) !important;
+.returnLinkWrapper {
+  display: flex;
+  justify-content: flex-end;
+
   font-size: 12px;
-  text-align: center;
+  margin-top: 15px;
+  margin-bottom: 15px;
 
   @media (min-width: 1080px) {
-    width: 80%;
+    justify-content: center;
     font-size: 14px;
     margin-top: 20px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &:hover {
-    background-color: var(--bg-400);
-    color: white !important;
-  }
-
-  &:active {
-    font-weight: var(--font-weight-bold);
-    color: var(--bg-400) !important;
-    background-color: white;
-    text-decoration: underline;
   }
 }
 
-.problemButtonLink {
-  display: block;
-  width: 135px;
-  padding: 10px 0;
-  background-color: var(--bg-400);
-  border: 1px solid var(--bg-400);
-  border-radius: 10px;
-  color: white !important;
+.problemLinkWrapper {
   font-size: 11px;
-  font-weight: var(--font-weight-bold);
-  text-align: center;
   margin-top: 20px;
-  margin-left: auto;
-  margin-right: auto;
-
-  &:hover {
-    background-color: var(--tertiary);
-    color: white !important;
-  }
-
-  &:active {
-    background-color: var(--bg-400);
-    font-weight: var(--font-weight-bold);
-    text-decoration: underline;
-  }
 }
 
 .githubLinkWrapper {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 5px;
+  font-size: 14px;
   margin-top: 10px;
-
-  .githubLink {
-    margin-top: 10px;
-    align-items: center;
-    img {
-      transform: translateY(8px);
-    }
-  }
 }
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -3,6 +3,7 @@ import type { Grade } from "../../api/services/types";
 import Github from "../../assets/Github.png";
 import GradeImage from "../GradeImage/GradeImage";
 import styles from "./Sidebar.module.css";
+import Link from "../Link/Link";
 
 interface SidebarErrorProps {
   isError: true;
@@ -77,21 +78,18 @@ export default function Sidebar(props: SidebarProps) {
             <span className={styles.gradientText}>{solvedProblems} </span>
             <span className={styles.solidText}> 문제</span>
           </div>
-          <div>
-            <a
-              className={styles.problemButtonLink}
+          <div className={styles.problemLinkWrapper}>
+            <Link
+              variant="primaryButton"
               href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}
             >
               풀이 보기
-            </a>
+            </Link>
           </div>
           <div className={styles.githubLinkWrapper}>
-            <a
-              className={styles.githubLink}
-              href={`https://github.com/${githubUsername}`}
-            >
+            <Link href={`https://github.com/${githubUsername}`}>
               <img src={Github} alt="github"></img> {githubUsername}
-            </a>
+            </Link>
           </div>
         </section>
 
@@ -107,9 +105,11 @@ export default function Sidebar(props: SidebarProps) {
           ))}
         </section>
       </div>
-      <a href="../" className={styles.returnButtonLink}>
-        리더보드로 돌아가기
-      </a>
+      <div className={styles.returnLinkWrapper}>
+        <Link variant="secondaryButton" href="/">
+          리더보드로 돌아가기
+        </Link>
+      </div>
     </div>
   );
 }