[👾 ErrorLog] prop로 받은 값을 keyframes 인자로 전달하기

어떤 에러인가?
* 로컬 환경에서 재생되는 애니메이션이 배포 환경에서 재생이 안됨
* 로컬 환경에서는 잘못 입력된 코드는 무시하고 실행하지만 배포 환경에서는 잘못된 코드가 있으면 해당 함수를 실행 시키지 않음
* 로컬 환경의 `animation` 함수명과 배포 환경의 `animation` 함수명이 다름을 알게됨
* 개발자 도구의 요소를 통해 확인해보니 `keyframes` 속성에게 제대로 인자값이 전달되지 않음

에러 메시지

에러 해결 방법
* prop로 전달 받은 값을 `keyframes`에게 인자로 넘겨주기 위해선 곧바로 쓰거나, `var(${인자})`를 쓰면 됨
```js
export const TaskElement = styled.button`
// 생략
${(prop) =>
prop.isStart === true
? css`
animation: ${blinkTaskElement(prop.blinkColor)} 1s ease 5;
`
: ''};
`

// 수정 전
const blinkTaskElement = (color) => keyframes`
0% {
backgruond-color: ${() => `var(--color-${color})`};
opacity: 0.5;
}
100% {
backgruond-color: ${() => `var(--color-${color})`};
}
`

// 수정 후
const blinkTaskElement = (color) => keyframes`
0% {
backgruond-color: var(--color-${color});
opacity: 0.5;
}
100% {
backgruond-color: var(--color-${color});
}
`
```

* 수정 후

* 인자 값을 제대로 전달 받으니 배포 환경에서도 로컬 환경과 같은 `animation` 함수를 실행함

에러 해결을 위해 참고한 레퍼런스 링크