From 068138e76218a7ad751e6391e052a09540293796 Mon Sep 17 00:00:00 2001
From: 1ilsang <1ilsang@naver.com>
Date: Thu, 15 Feb 2024 19:24:29 +0900
Subject: [PATCH] feat(style): Add highlight transition

---
 .../shared/components/ExternalLink.tsx        |  2 +-
 src/features/styles/common.scss               | 23 +++++++++++++++++++
 src/features/styles/markdown/index.scss       |  9 ++++----
 src/features/styles/ui/about/index.scss       |  3 +--
 src/features/styles/ui/navigation.scss        |  1 +
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/features/shared/components/ExternalLink.tsx b/src/features/shared/components/ExternalLink.tsx
index 1d074ec4..985823c5 100644
--- a/src/features/shared/components/ExternalLink.tsx
+++ b/src/features/shared/components/ExternalLink.tsx
@@ -14,7 +14,7 @@ const ExternalLink: FunctionComponent<ExternalLinkProps> = ({
 }) => {
   return (
     <a
-      className={`hashtag ${classNames}`}
+      className={`highlighter ${classNames}`}
       href={href}
       rel="noopener noreferrer"
       target="_blank"
diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss
index 12e72a8f..af304b85 100644
--- a/src/features/styles/common.scss
+++ b/src/features/styles/common.scss
@@ -205,6 +205,29 @@ $target: #e73c7e;
   font-size: small;
 }
 
+.highlighter {
+  display: inline-block;
+  color: $highlight-color;
+  line-height: 1.1;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background-color: $highlight-color;
+    transition: width 0.5s ease;
+    width: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
 .progress {
   display: flex;
   flex-direction: column;
diff --git a/src/features/styles/markdown/index.scss b/src/features/styles/markdown/index.scss
index 38f87752..a76161b3 100644
--- a/src/features/styles/markdown/index.scss
+++ b/src/features/styles/markdown/index.scss
@@ -24,12 +24,11 @@
 
   a {
     color: $highlight-color;
-  }
 
-  a:hover,
-  summary:hover {
-    text-decoration-line: underline;
-    cursor: pointer;
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
   }
 
   u {
diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss
index 1e65e283..f8433937 100644
--- a/src/features/styles/ui/about/index.scss
+++ b/src/features/styles/ui/about/index.scss
@@ -200,11 +200,10 @@
         }
 
         .link {
-          color: #28b592;
+          color: #21997b;
 
           &:hover {
             color: $highlight-color;
-            text-decoration-line: underline;
           }
         }
       }
diff --git a/src/features/styles/ui/navigation.scss b/src/features/styles/ui/navigation.scss
index adbcfa22..0bb5f799 100644
--- a/src/features/styles/ui/navigation.scss
+++ b/src/features/styles/ui/navigation.scss
@@ -54,6 +54,7 @@
 
   ::-webkit-progress-value {
     background-color: #28bc97;
+    transition: width 0.3s ease-out;
   }
 }