yapp-web/components/common/AnimatedButton/index.tsx at e42c9135a47990252a90986ef43e1bfd0c5ec8ff · YAPP-admin/yapp-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import styled, { css } from 'styled-components';
import media from 'styles/media';
import { slideIn, slideOut } from 'styles/utils-styles';
import Button, { ButtonProps } from '../Button';

export type AnimatedButtonVariant = 'primary' | 'black';

export interface AnimatedButtonProps extends ButtonProps {
  buttonText: string;
  href?: string;
  variant: AnimatedButtonVariant;
}

function AnimatedButton({
  buttonText,
  href,
  variant = 'primary',
  ...rest
}: AnimatedButtonProps) {
  return (
    <ButtonStyled variant={variant} {...rest}>
      {/* <svg
        width={`${width + 2}px`}
        height={`${height}px`}
        viewBox={`0 0 ${width} ${height}`}
        className="border"
      >
        <rect
          x="-0.9"
          y="1"
          width={width}
          height={height - 2}
          rx="32"
          ry="32"
        />
      </svg> */}
      <span className="textgroup">
        <span className="mainText">{buttonText}</span>
        <span className="cloneText">{`모집 알림 신청`}</span>
      </span>
    </ButtonStyled>
  );
}

const ButtonStyled = styled(Button)<{ variant?: AnimatedButtonVariant }>`
  position: relative;
  box-sizing: border-box;
  text-align: center;
  outline: none;
  transition: 1s ease-in-out;
  color: ${({ theme }) => theme.palette.white};

  .textgroup {
    position: relative;
  }

  .cloneText {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: inline-block;
  }

  svg {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 20px;
    fill: none;
    stroke: ${({ theme }) => theme.palette.orange_400};
    stroke-width: 2px;
    stroke-dasharray: 168 480;
    stroke-dashoffset: 168;
    transition: 1s ease-in-out;
  }

  &:hover {
    transition: 1s ease-in-out;
    ${({ variant }) =>
      variant === 'primary'
        ? css`
            background: ${({ theme }) => theme.palette.grey_900};
            color: ${({ theme }) => theme.palette.blue_200};
          `
        : css`
            background: ${({ theme }) => theme.palette.orange_400};
          `};

    svg {
      stroke-dashoffset: -480;
    }
    .mainText {
      animation: ${slideOut} 0.533s cubic-bezier(0.33, 0, 0.67, 1) forwards;
    }
    .cloneText {
      animation: ${slideIn} 0.567s cubic-bezier(0.22, 1, 0.36, 1) 0.367s
        forwards;
    }
    ${media.mobile} {
      svg {
        display: none;
      }
    }
  }
`;

export default AnimatedButton;