codestates / codestates/LearnRegex
[✍️ DevLog] 은유 / 2021-12-19
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
- Skeleton UI 구현 + 반응형
- UI 개선: 이벤트가 일어나지 않는 곳에선 cursor: defualt; 주기
- 퀴즈 입력폼에서 첫번째 Match 버튼 깜빡임 애니메이션 추가
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
* 애니메이션 추가..
```js
// isStart의 초기 상태는 true, 3초 지연 뒤 false로 상태 변경
useEffect(() => {
if (isStart === true) {
setTimeout(() => {
setIsStart(false);
}, 3000);
}
}, []);
// color는 바뀜, 첫번째 버튼만 깜빡이기 위해 idx === 0 코드 추가
// isStart가 true면 animation 속성 정의
${(prop) =>
prop.isStart === true
? css`
animation: ${blinkTaskElement(prop.blinkColor)} 1s ease infinite;
`
: ''};
// 인자로 받은 prop.blinkColor를 전역에 지정한 색상에 추가
const blinkTaskElement = (color) => keyframes`
0% {
background-color: var(--color-${color});
opacity: 0.5;
}
100% {
background-color: var(--color-${color});
}
`;
```
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
* [ ] 애니메이션 부분 부드럽게 수정
* [ ] 네비게이션의 학습하기 클릭 시 화면 위치 맨 위로 고정
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.