refactor(home): 홈 페이지의 아티클 프리뷰 컴포넌트를 styled component 기반으로 리팩토링합니다.

[innocarpe]

📌 이슈 링크

• close 🌟 FEATURE: [2 Week] 메인 페이지를 개발합니다. #47

📖 작업 배경

• 홈 페이지 API 연동 전에 컴포넌트 기반으로 리팩토링을 먼저 진행합니다.

🛠️ 구현 내용

• ArticlePreview 에 들어간 하위 요소들을 styled component 로 전부 작성합니다.
• 기존 ArticlePreview 를 하위 컴포넌트들의 조합으로 리팩토링합니다.
• 홈 화면에서 새로 작성한 ArticlePreview 를 사용하도록 합니다. (아직 API 연동 전)

💡 참고사항

• Article 내부 엘리먼트가 많아서.. 분리하는데 공수가 상당히 많이 드는군요ㅠ
• 향후 API 연동 쪽 구현할 때 쓸 Response 를 미리 선언해 두었는데, 이걸 컴포넌트 단에서 props 로 바로 받는게 일반적으로 지향하는 구현인지 모르겠네요. 별도의 모델 선언을 따로 하는게 맞는 방식이려나요?

🖼️ 스크린샷

기존 ArticlePreview(최상단 하나) 와, styled component 기반으로 새로 작성한 ArticlePreview(하단 두 개)가 완전히 동일하게 렌더링이 되는 모습