홈페이지 한 섹션 클론 코딩

여행 서비스 홈페이지의 한 섹션을 그대로 만드는 과제였다. 조건은 네 가지다.

1. 숫자는 0부터 증가한다.
2. 좌측 이미지, 리뷰, 수상 내역 순으로 화면에 보인다.
3. 애니메이션 duration 은 700ms, 세 애니메이션은 100ms 간격으로 차례로 시작한다.
4. 최소 화면폭은 1200px, 반응형은 고려하지 않는다.

중점 사항

• 컴포넌트 설계와 상태 관리: styled-components 로 기능별 컴포넌트를 나누고 DefaultTheme 으로 스타일 값을 분리했다. 애니메이션 시작 시점은 커스텀 훅 useVisible 하나로 관리한다.
• 일관성 있는 코드: TypeScript 로 데이터 타입을 구분하고, ./ 상대 경로 대신 common/hooks/useVisible 처럼 폴더 이름으로 import 한다. ESLint 와 Prettier 를 맞췄다.
• 화면과 같은 애니메이션: easings.net 에서 끝에 급격히 느려지는 easeOutExpo 를 찾아 react-countup 의 easing 형식에 맞춰 animation.ts 에 두었다.

플레이그라운드에서 바뀐 것

GitHub Pages 주소로 잡혀 있던 homepage 만 이 사이트 경로로 바꿨다. 코드는 그대로다.