하나의 컴포넌트에 집중된 코드를 분석하여 각각의 기능과 책임에 맞게 모듈화하는 작업을 진행하였습니다.
리팩토링 진행 내용
기존의 SearchPage 컴포넌트에 집중되어 있던 코드를 아래와 같이 기능별로 분리하여 모듈화하였습니다:
1. 버튼 컴포넌트 분리
- ArrowDownButton: 다운로드 버튼 UI
- LikeButton: 좋아요 버튼 UI
- PlusButton: 추가 버튼 UI
2. 공통 컴포넌트 분리
- ErrorState: 에러 상태 표시 컴포넌트
- LoadingState: 로딩 상태 표시 컴포넌트
- LoadMoreIndicator: 추가 로딩 인디케이터 컴포넌트
3. ImageCard 관련 컴포넌트 모듈화
- ImageCard: 이미지 카드의 메인 컴포넌트
- ImageCardActions: 이미지 카드의 액션 버튼들을 관리하는 컴포넌트
- ImageCardFooter: 이미지 카드의 하단 영역을 관리하는 컴포넌트
- ImageCardStyled: 스타일드 컴포넌트들을 별도 파일로 분리
4. 페이지 컴포넌트 정리
- SearchPage: 검색 페이지의 로직과 레이아웃만 담당
- SearchPageStyled: 검색 페이지의 스타일링을 별도 파일로 분리
이러한 모듈화를 통해 다음과 같은 이점을 얻을 수 있었습니다: