feat(about): Enhancement hover

1ilsang · Mar 28, 2024 · 81c08ce · 81c08ce
1 parent 071f900
commit 81c08ce
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 26 deletions.
diff --git a/src/features/about/work/card/content/Container.tsx b/src/features/about/work/card/content/Container.tsx
@@ -34,14 +34,9 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
 
   return (
     <div className="project">
-      <div className="headline">
+      <div className="headline" onClick={handleDetailClick}>
         <div className="title-wrap">
-          <div
-            className={`title ${open ? 'unfold' : 'fold'}`}
-            onClick={handleDetailClick}
-          >
-            {name}
-          </div>
+          <div className={`title ${open ? 'unfold' : 'fold'}`}>{name}</div>
           <ProjectDate
             startDate={startDate}
             endDate={endDate}

diff --git a/src/features/about/work/card/content/Headline.tsx b/src/features/about/work/card/content/Headline.tsx
@@ -12,12 +12,8 @@ const ContentHeadline: FunctionComponent<ContentHeadlineProps> = ({
   hover = true,
 }) => {
   return (
-    <div className="headline">
-      <div
-        id={name}
-        onClick={onClick}
-        className={`title${hover ? ' hover' : ''}`}
-      >
+    <div className={`headline${hover ? ' hover' : ''}`} onClick={onClick}>
+      <div id={name} className="title">
         {name}
       </div>
     </div>

diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss
@@ -56,6 +56,10 @@ $target: #e73c7e;
   margin: 10px 0;
   color: $target;
 
+  :hover {
+    color: #e66295;
+  }
+
   .min {
     position: absolute;
     top: -3rem;

diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss
@@ -165,14 +165,6 @@
             user-select: none;
           }
 
-          .hover {
-            cursor: pointer;
-
-            &:hover {
-              color: $base-color;
-            }
-          }
-
           .date {
             padding-left: 4px;
             font-style: italic;
@@ -187,6 +179,14 @@
           }
         }
 
+        .hover {
+          cursor: pointer;
+
+          &:hover {
+            color: $highlight-color;
+          }
+        }
+
         .position {
           border-bottom: 1px dotted $min-color;
           margin-bottom: 15px;

diff --git a/src/features/styles/ui/about/project.scss b/src/features/styles/ui/about/project.scss
@@ -12,6 +12,11 @@
   .headline {
     display: flex;
     flex-direction: column;
+    cursor: pointer;
+
+    &:hover {
+      color: $highlight-color;
+    }
 
     .title-wrap {
       width: 100%;
@@ -21,13 +26,8 @@
     }
 
     .title {
-      cursor: pointer;
       font-size: 1.15rem;
       font-weight: 500;
-
-      &:hover {
-        color: $sub-color;
-      }
     }
 
     .fold {