1. 모든 챌린지 완료 시 보라색 바탕이 차오르는 애니메이션

문제

• 처음에는 background-color 속성을 사용해 배경색이 변화하는 효과를 구현하려 했으나, 이 속성은 애니메이션으로 배경이 움직이는 효과를 줄 수 없다는 한계가 있음을 발견했다.

해결 방법

• 이를 해결하기 위해 ::before 가상 요소를 활용하는 방법을 선택했다. 이 가상 요소는 독립된 레이어처럼 동작하여 배경이 자연스럽게 차오르는 애니메이션을 적용할 수 있었다.
• ::before 가상 요소에 기본 배경색을 설정하고, 모든 챌린지가 완료되었을 때 해당 상태를 props로 전달 받아 배경색이 보라색으로 변경되도록 했다.
• 차오르는 애니메이션은 styled-components의 css 유틸리티를 사용하여 동적으로 animation 속성을 추가하였고, **translateX** 효과로 배경이 좌에서 우로 차오르는 모습을 구현했습니다.

결과

20240914-0544-42.8420255.mp4

• 코드 보기

2. 유튜브 썸네일 동적 조정

문제

• 유튜브 영상의 썸네일을 API통신을 통해 메인 화면에 표시해야 했다. 처음에는 유튜브 사이트의 썸네일 너비와 높이를 그대로 사용하여 px로 크기를 고정했으나, 화면 크기가 줄어들 때 썸네일 크기가 조정되지 않아 다른 요소를 침범하는 문제가 발생

해결 방법

• 이를 해결하기 위해 화면 크기에 따라 썸네일 크기를 동적으로 조정하고, 16:9 비율을 유지하면서 크기를 조절하는 방식으로 구현
• 유튜브 썸네일의 크기를 동적으로 조절하기 위해 padding-top 속성을 사용했다. padding-top에 백분율(%) 값을 사용하면 부모 요소의 너비를 기준으로 높이가 설정되는 CSS 특성을 활용했다. 유튜브에서 가져온 썸네일의 가로와 세로 비율을 계산하여 padding-top 값으로 설정했다. 이를 통해 화면 크기에 따라 유튜브 썸네일의 비율을 고정하면서 크기를 유동적으로 변화시킬 수 있었다.