fix(article): change sort criteria to take into account publishedAt

Author: gracefulBrown

backend/src/main/java/wooteco/prolog/article/application/dto/ArticleResponse.java

@@ -19,8 +19,11 @@ public class ArticleResponse {
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm")
     private final LocalDateTime createdAt;
 
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm")
+    private final LocalDateTime publishedAt;
+
     private ArticleResponse() {
-        this(null, null, null, null, null, false, false, null);
+        this(null, null, null, null, null, false, false, null, null);
     }
 
     public static ArticleResponse of(final Article article, final Long memberId) {
@@ -32,8 +35,9 @@ public static ArticleResponse of(final Article article, final Long memberId) {
         final boolean isBookmarked = article.getArticleBookmarks().containBookmark(memberId);
         final boolean isLiked = article.getArticleLikes().isAlreadyLike(memberId);
         final LocalDateTime createdAt = article.getCreatedAt();
+        final LocalDateTime publishedAt = article.getPublishedAt();
         return new ArticleResponse(id, nickName, title, url, imageUrl, isBookmarked, isLiked,
-            createdAt);
+            createdAt, publishedAt);
     }
 
     public Long getId() {
@@ -67,4 +71,8 @@ public boolean getIsLiked() {
     public LocalDateTime getCreatedAt() {
         return createdAt;
     }
+
+    public LocalDateTime getPublishedAt() {
+        return publishedAt;
+    }
 }

frontend/src/components/Article/Article.style.tsx

@@ -90,7 +90,7 @@ export const ArticleBookmarkButtonStyle = css`
   }
 `;
 
-export const CreatedAt = styled.span`
+export const PublishedAt = styled.span`
   width: 100%;
   color: ${COLOR.DARK_GRAY_400};
   text-align: right;

frontend/src/components/Article/Article.tsx

@@ -17,6 +17,7 @@ const Article = ({
   userName,
   url,
   createdAt,
+  publishedAt,
   imageUrl,
   isBookmarked,
   isLiked,
@@ -75,7 +76,7 @@ const Article = ({
         <Styled.ArticleInfoContainer>
           <Styled.ArticleInfoWrapper>
             <Styled.UserName>{userName}</Styled.UserName>
-            <Styled.CreatedAt>{createdAt.split(' ')[0]}</Styled.CreatedAt>
+            <Styled.PublishedAt>{(publishedAt ? publishedAt : createdAt).split(' ')[0]}</Styled.PublishedAt>
           </Styled.ArticleInfoWrapper>
           <Styled.Title>{title}</Styled.Title>
           <Styled.ButtonContainer>

frontend/src/mocks/handlers/articles.ts

@@ -23,6 +23,7 @@ export const articlesHandler = [
       title: '직렬화, 역직렬화는 무엇일까?',
       url: 'https://think0wise.tistory.com/107',
       createdAt: '2023-07-08 16:48',
+      publishedAt: '2023-07-08 16:48',
       isBookmarked: false,
       isLiked: false,
       imageUrl:

frontend/src/models/Article.ts

@@ -13,6 +13,7 @@ export interface ArticleType {
   isLiked: boolean;
   url: string;
   createdAt: string;
+  publishedAt: string;
   imageUrl: string;
 }