[ Feature/dev 50 ] 메인페이지 > 아티클 카드 컴포넌트 ui 제작

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-50/메인-페이지-아티클-조회-ui-구현

💜 작업 내용

• 메인페이지 > 아티클 컴포넌트 ui 구현
• 모델링 및 모델 테스트

✅ PR Point

ArticleCardModel

• ArticleServerInfo 와 ArticleClientInfo를 나눠서 관리하여 card 컴포넌트를 만드는데 용이하도록 설계하였습니다.

import { ArticleClientInfo, ArticleServerInfo } from "@main/types/article";

export default class ArticleCardModel {
  constructor({
    initArticleCardServerList,
  }: {
    initArticleCardServerList: ArticleServerInfo[];
  }) {
    this.articleCardServerList = initArticleCardServerList;
  }

  articleCardList(): ArticleClientInfo[] {
    return this.articleCardServerList.map(
      ({
        writer,
        title,
        content,
        category,
        views,
        includedWorkbooks,
        mainImageUrl,
      }) => {
        const changeToClientData: ArticleClientInfo = {
          writerInfo: {
            name: writer.name,
            url: writer.url,
          },
          thumbnail: mainImageUrl,
          title,
          content,
          category,
          viewCount: views,
          withWorkbookList: includedWorkbooks,
        };
        return changeToClientData;
      },
    );
  }

  private articleCardServerList: ArticleServerInfo[];
}

👀 스크린샷 / GIF / 링크

[soomin9106]

아 이 코드를 보니까 model 의 역할이 잘 이해 되네요! 👍
서버에서 내려 준 정보를 클라 측에서 사용하기 쉽게 잘 변환해서 사용할 수 있도록 해주니 좋은 것 같습니다!!

[Happhee]

@soomin9106 네! 저희 앞으로 뷰만들때 model계층을 무조건하나두는것도 도입해볼만한 것같아요. 컴포넌트 내부에서 변경을 하는게 아니라 model을 조작해서 요구사항을 반영할 수있게요! 어떨까요?

[Happhee]

@soomin9106 의견부탁드립니다!

[soomin9106]

아아 네네!!
혹시 제가 놓치고 저렇게 구현 못했으면 PR 리뷰 주세요 ㅎㅎ 좋습니다 ㅋㅋ