feat: add interaction to try link button

sopt-makers · Oct 25, 2023 · 39c07bd · 39c07bd
1 parent 7df93c1
commit 39c07bd
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import Image from 'next/image';
+import { css } from '@emotion/react';
 import icArrowStickRight from '@src/assets/icons/ic_arrow_stick_right.svg';
 import { textSingularLineEllipsis } from '@src/lib/styles/textEllipsis';
 
@@ -106,6 +107,16 @@ const Chip = styled.div`
   }
 `;
 
+const tryArrowBaseCss = css`
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid ${colors.gray30};
+  top: 50%;
+  transform: translateY(-50%);
+  background-image: url(${icArrowStickRight});
+`;
+
 const TryLink = styled.a`
   cursor: pointer;
   position: relative;
@@ -114,30 +125,40 @@ const TryLink = styled.a`
   font-weight: 500;
   line-height: 165%;
   letter-spacing: -0.24px;
+  padding-left: 10px;
   padding-top: 2px;
   padding-bottom: 2px;
-  padding-right: 31px;
+  padding-right: 36px;
+  border-radius: 15px;
+  transition: 200ms;
 
   &::after {
-    content: '';
-    right: 6px;
+    right: 11px;
     width: 18px;
     height: 18px;
-    position: absolute;
-    border-radius: 50%;
-    border: 1px solid ${colors.gray30};
-    top: 50%;
-    transform: translateY(-50%);
-    background-image: url(${icArrowStickRight});
+    ${tryArrowBaseCss}
+  }
+
+  &:hover {
+    background-color: ${colors.gray700};
+
+    &::after {
+      right: 11px;
+      width: 18px;
+      height: 18px;
+      ${tryArrowBaseCss}
+      transform: translateY(-50%) rotate(-45deg);
+    }
   }
 
   /* 모바일 뷰 */
   @media (max-width: 767px) {
     font-size: 14px;
     letter-spacing: -0.21px;
+    border-radius: 13px;
     &::after {
       content: '';
-      right: 4px;
+      right: 9px;
       width: 14px;
       height: 14px;
       position: absolute;
@@ -148,6 +169,15 @@ const TryLink = styled.a`
       background-image: url(${icArrowStickRight});
       background-size: cover;
     }
+    &:hover {
+      &::after {
+        right: 9px;
+        width: 14px;
+        height: 14px;
+        ${tryArrowBaseCss}
+        transform: translateY(-50%) rotate(-45deg);
+      }
+    }
   }
 `;