fix: css 반응형 수정 및 여러가지 레이아웃 구조 변경, 메인 애니메이션 추가

[tkyoun0421]

개요

프로젝트의 UI/UX 일관성 개선 및 사용자 경험 향상을 위한 다양한 개선사항을 적용했습니다. 주요 내용으로는 애니메이션 효과 추가, 반응형 디자인 개선, 컴포넌트 스타일 통일, 그리고 배포 관련 버그 수정이 포함됩니다.

변경 사항

• 새로운 기능 추가
• 버그 수정
• 리팩토링
• 문서 수정

구현 내용

• README.md 수정: 현재까지의 변경사항을 토대로 README.md 최신화
• 배포 환경 버그 수정: vite.config.ts의 publicDir 경로를 올바르게 수정하여 public 폴더 리소스 로딩 문제 해결
• 홈페이지 섹션 디자인 개선: "새로 올라온 프로젝트" 섹션에 브랜드 컬러 그라디언트 및 FadeInUpOnView 애니메이션 적용
• 프로젝트 통계 카운터 애니메이션: useCountUp 커스텀 훅 개발 및 easeOutExpo 이징을 활용한 숫자 카운트업 애니메이션 구현
• 이메일 템플릿 간소화: 복잡한 모던 디자인을 전통적이고 호환성 높은 이메일 형식으로 변경
• 컴포넌트 레이아웃 개선: HowToStart, ProjectInfo, Footer 컴포넌트의 반응형 레이아웃 및 높이 균등화
• Status chip 스타일 통일: ProjectLike.tsx와 ProjectCard.tsx의 status chip 컴포넌트 및 스타일링 일관성 확보

개발 후기 및 개선사항

이번 작업에서 배운 점

• easeOutExpo 이징 함수를 직접 구현하면서 애니메이션의 수학적 원리 이해
• 이메일 템플릿에서 모든 클라이언트 호환성을 고려한 테이블 기반 레이아웃의 중요성

어려웠던 점 / 에로사항

• useCountUp 애니메이션에서 마지막 뚝딱거림 현상 해결 (98% 도달 시 조기 완료 로직으로 해결)
• 서로 다른 컴포넌트(StatusBox vs StatusChip)를 사용하여 발생한 스타일 불일치 문제

[namee-h]

와웅!! 언제주무신거에요 ㅠ 리드미까징..!! 짱이에요 !👍