Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(home): 홈 페이지의 인기 아티클 태그를 styled component 기반으로 리팩토링합니다. #96

Merged
merged 5 commits into from
Sep 13, 2023

Conversation

innocarpe
Copy link
Collaborator

📌 이슈 링크


📖 작업 배경

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

🛠️ 구현 내용

  • 기존 클래스를 PopularArticleTagList 로 리네이밍합니다. 실제 결과물과 최대한 비슷한 네이밍을 사용하는게 향후 가독성 측면에서 유리하다 판단했습니다.
  • 내부 요소들을 styled component 들로 만들고, 이를 조합해서 컴포넌트가 되도록 리팩토링합니다.
  • 이걸 만들 때 col-md-3 스타일이 필요했는데, PopularArticleTagListContainer 로 한 방에 풀 수 있는 방법을 못 찾아서, 어쩔 수 없이 shared/ 쪽에 Col.styled.ts 를 만들어 놓고 이걸 활용하는 식으로 만들었습니다.

💡 참고사항

  • ColMd3 부분이 고민됩니다. 하나의 컨테이너 컴포넌트로 현재와 동일한 UI를 만들고 싶었는데 방법을 못 찾았습니다. 나중에 @InSeong-So 님께 여쭤볼까 싶네요!

🖼️ 스크린샷

기존과 동일하게 스타일이 잘 표시되고 있는 상태

Screenshot 2023-09-12 at 11 47 03 PM

@innocarpe innocarpe added status: needs-healing 병합 전 미진한 부분은 추후에 개선 예정 refactor Refactoring production code labels Sep 12, 2023
Base automatically changed from carpe/refactor-home-component to team6/innocarpe September 13, 2023 12:33
@innocarpe innocarpe force-pushed the carpe/refactor-article-list-component branch from 324cbe2 to 40de7a3 Compare September 13, 2023 12:35
@innocarpe innocarpe merged commit bbfb992 into team6/innocarpe Sep 13, 2023
@innocarpe innocarpe deleted the carpe/refactor-article-list-component branch September 13, 2023 14:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor Refactoring production code status: needs-healing 병합 전 미진한 부분은 추후에 개선 예정
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant