juniors-dev-study · bearics · Feb 21, 2022 · Feb 21, 2022 · bearics · Feb 21, 2022
diff --git a/article-api/src/main/kotlin/com/sns/article/component/feed/application/FeedQueryService.kt b/article-api/src/main/kotlin/com/sns/article/component/feed/application/FeedQueryService.kt
@@ -6,7 +6,7 @@ import com.sns.article.component.reaction.application.ReactionQueryService
 import org.springframework.stereotype.Service
 
 /**
- * @author Hyounglin Jun (KR19849)
+ * @author Hyounglin Jun
  */
 @Service
 class FeedQueryService(

diff --git a/article-api/src/main/kotlin/com/sns/article/component/feed/application/model/Feed.kt b/article-api/src/main/kotlin/com/sns/article/component/feed/application/model/Feed.kt
@@ -7,7 +7,7 @@ import java.time.Instant
 /**
  * 단순 wrapping Model
  * 게시물, 댓글, 리액션 조합
- * @author Hyounglin Jun (KR19849)
+ * @author Hyounglin Jun
  */
 class Feed(
     val article: Article,

diff --git a/article-api/src/main/kotlin/com/sns/article/endpoints/feed/FeedController.kt b/article-api/src/main/kotlin/com/sns/article/endpoints/feed/FeedController.kt
@@ -17,7 +17,7 @@ import org.springframework.web.bind.annotation.ResponseStatus
 import org.springframework.web.bind.annotation.RestController
 
 /**
- * @author Hyounglin Jun (KR19849)
+ * @author Hyounglin Jun
  */
 @RestController
 @RequestMapping("/api")
@@ -35,6 +35,7 @@ class FeedController(
     @ResponseStatus(HttpStatus.OK)
     @GetMapping("/v1/feeds")
     fun getFeeds(loginUser: LoginUser): FeedsResponse {
-        return FeedsResponse.create(feedQueryService.getFeeds(loginUserId = loginUser.id))
+        // return FeedsResponse.create(feedQueryService.getFeeds(loginUserId = loginUser.id))
+        return FeedsResponse.createMock()
     }
 }
diff --git a/article-api/src/main/kotlin/com/sns/article/endpoints/response/FeedsResponse.kt b/article-api/src/main/kotlin/com/sns/article/endpoints/response/FeedsResponse.kt
@@ -12,7 +12,7 @@ import org.springframework.data.relational.core.mapping.Embedded
 import java.time.Instant
 
 /**
- * @author Hyounglin Jun (KR19849)
+ * @author Hyounglin Jun
  */
 class FeedsResponse(
     val feeds: List<FeedResponse>,
@@ -25,6 +25,40 @@ class FeedsResponse(
                 list.map { FeedResponse(it) }.toList(),
             )
         }
+
+        // TODO 삭제 필요 Mocking test용
+        fun createMock(): FeedsResponse {
+            return FeedsResponse(
+                listOf(
+                    FeedResponse(
+                        articleId = ArticleId(10000),
+                        imageUrls = listOf("https://picsum.photos/seed/picsum/200/300").toMutableList(),
+                        body = "본문 내용입니다",
+                        writerUserId = "bearics",
+                        createdAt = Instant.now(),
+                        updatedAt = Instant.now(),
+                        reaction = ReactionResponse(2000L, ReactionType.LIKE, "test_01"),
+                        comments = listOf(
+                            CommentResponse(3000L, "댓글입니다.", "test_02", Instant.now(), Instant.now()),
+                            CommentResponse(3000L, "댓글입니다.", "test_02", Instant.now(), Instant.now()),
+                        ),
+                    ),
+                    FeedResponse(
+                        articleId = ArticleId(10000),
+                        imageUrls = listOf("https://picsum.photos/seed/picsum/200/300").toMutableList(),
+                        body = "본문 내용입니다",
+                        writerUserId = "bearics",
+                        createdAt = Instant.now(),
+                        updatedAt = Instant.now(),
+                        reaction = ReactionResponse(2000L, ReactionType.LIKE, "test_01"),
+                        comments = listOf(
+                            CommentResponse(3000L, "댓글입니다.", "test_02", Instant.now(), Instant.now()),
+                            CommentResponse(3000L, "댓글입니다.", "test_02", Instant.now(), Instant.now()),
+                        ),
+                    )
+                )
+            )
+        }
     }
     // 생성자를 못쓰는 이유
     // 기본 생성자가 List<FeedResponse>인데, 추가로 List<Feed>를 만들려고 하니까, 2개 동시에 못만듦
@@ -51,7 +85,7 @@ data class FeedResponse(
         updatedAt = feed.article.updatedAt,
         createdAt = feed.article.createdAt,
         reaction = ReactionResponse(feed.article.reaction),
-        comments = feed.comments.map { CommentResponse(it)},
+        comments = feed.comments.map { CommentResponse(it) },
     )
 }
 
@@ -75,14 +109,12 @@ data class CommentResponse(
     val writerId: String,
     var createdAt: Instant,
     var updatedAt: Instant,
-    val reaction: Feed.Reaction,
 ) {
     constructor(comment: Feed.Comment) : this(
         id = comment.id,
         contents = comment.contents,
         writerId = comment.writerId,
         createdAt = comment.createdAt,
         updatedAt = comment.updatedAt,
-        reaction = comment.reaction,
     )
 }
diff --git a/front/src/main/kotlin/com/sns/front/controller/ArticleController.kt b/front/src/main/kotlin/com/sns/front/controller/ArticleController.kt
@@ -0,0 +1,32 @@
+package com.sns.front.controller
+
+import org.springframework.stereotype.Controller
+import org.springframework.ui.Model
+import org.springframework.web.bind.annotation.GetMapping
+import org.springframework.web.bind.annotation.PathVariable
+
+/**
+ * User 관련된 페이지 모음
+ * @author Hyounglin Jun
+ */
+@Controller
+class ArticleController {
+    @GetMapping("/my-articles")
+    fun getFeeds(): String {
+        return "pages/feed/my-articles"
+    }
+
+    @GetMapping("/write-article")
+    fun writeFeed(): String {
+        return "pages/feed/write-article"
+    }
+
+    @GetMapping("/modify-articles/{articleId}")
+    fun modifyFeed(
+        @PathVariable articleId: Int,
+        model: Model,
+    ): String {
+        model.addAttribute("articleId", articleId)
+        return "pages/feed/modify-article"
+    }
+}
diff --git a/front/src/main/kotlin/com/sns/front/controller/FeedController.kt b/front/src/main/kotlin/com/sns/front/controller/FeedController.kt
@@ -1,32 +1,16 @@
 package com.sns.front.controller
 
 import org.springframework.stereotype.Controller
-import org.springframework.ui.Model
 import org.springframework.web.bind.annotation.GetMapping
-import org.springframework.web.bind.annotation.PathVariable
 
 /**
  * User 관련된 페이지 모음
  * @author Hyounglin Jun
  */
 @Controller
 class FeedController {
-    @GetMapping("/my-feeds")
+    @GetMapping("/feeds")
     fun getFeeds(): String {
-        return "pages/feed/my-feeds"
-    }
-
-    @GetMapping("/write-feed")
-    fun writeFeed(): String {
-        return "pages/feed/write-feed"
-    }
-
-    @GetMapping("/modify-feed/{articleId}")
-    fun modifyFeed(
-        @PathVariable articleId: Int,
-        model: Model,
-    ): String {
-        model.addAttribute("articleId", articleId)
-        return "pages/feed/modify-feed"
+        return "pages/feed/feeds"
     }
 }
diff --git a/front/src/main/resources/static/js/article-apis.js b/front/src/main/resources/static/js/article-apis.js
@@ -1,5 +1,13 @@
 'use strict';
 
+function getFeeds() {
+    const options = {
+        method: 'GET',
+    }
+
+    return fetch("http://local-front.ddd.sns.com:10100/article-api/v1/feeds", options)
+}
+
 
 function getMyArticles() {
     const options = {
@@ -60,3 +68,19 @@ function deleteArticle(articleId) {
 
     return fetch('http://local-front.ddd.sns.com:10100/article-api/v1/articles/id/' + articleId, options)
 }
+
+function addComment(articleId, contents) {
+    const options = {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            rootType: 'ARTICLE',
+            rootId: articleId,
+            contents: contents
+        })
+    }
+    return fetch('http://local-front.ddd.sns.com:10100/article-api/v1/comments', options)
+}
diff --git a/front/src/main/resources/templates/fragments/feed/article.html b/front/src/main/resources/templates/fragments/feed/article.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="articleFragment">
+    <template id="article-template">
+        <div class="card mb-4">
+            <input type="text" class="article-id" value="%articleId%" style="display: none">
+            <div class="card-image">
+                <figure class="image is-4by3">
+                    <img src='%imageUrl%' alt="Placeholder image">
+                </figure>
+            </div>
+            <div class="card-content">
+                <div class="media">
+                    <div class="media-left">
+                        <figure class="image is-48x48">
+                            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <p class="title is-4">%writerUserId%</p>
+                        <p class="subtitle is-6">닉네임 자리</p>
+                    </div>
+                </div>
+
+                <div class="content">
+                    %body%
+                    <br><br>
+                    <time datetime="2016-1-1">%updatedAt%</time>
+                </div>
+                <footer class="card-footer">
+                    <a class="card-footer-item modify-feed-button">수정하기</a>
+                    <a class="card-footer-item delete-feed-button">삭제하기</a>
+                </footer>
+            </div>
+        </div>
+    </template>
+
+</th:block>
+</html>
diff --git a/front/src/main/resources/templates/fragments/feed/feed.html b/front/src/main/resources/templates/fragments/feed/feed.html
@@ -16,24 +16,66 @@
                             <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                         </figure>
                     </div>
-                    <div class="media-content">
-                        <p class="title is-4">%writerUserId%</p>
-                        <p class="subtitle is-6">닉네임 자리</p>
+                    <div class="media-content content">
+
+                        <p class="title is-4">
+                            <strong>%writerUserId%</strong>
+                        </p>
+                        <p class="subtitle is-6"><time datetime="2016-1-1">%updatedAt%</time></p>
+                    </div>
+                    <div class="media-right">
+                        <a class="level-item">
+                            <span class="icon is-small"><i class="fas fa-heart pr-1"></i>1</span>
+                        </a>
                     </div>
                 </div>
 
                 <div class="content">
                     %body%
                     <br><br>
-                    <time datetime="2016-1-1">%updatedAt%</time>
                 </div>
-                <footer class="card-footer">
-                    <a class="card-footer-item modify-feed-button">수정하기</a>
-                    <a class="card-footer-item delete-feed-button">삭제하기</a>
-                </footer>
+
+            </div>
+            <div class="card-content comment-list">
+                %comments%
+                <article class="media">
+                    <div class="media-content">
+                        <div class="field">
+                            <p class="control">
+                                <textarea class="textarea comment-textarea" placeholder="댓글을 달아볼까요?" rows="1"></textarea>
+                            </p>
+                        </div>
+
+                    </div>
+                    <div class="media-right">
+                        <a class="button is-primary add-comment-button">댓글달기</a>
+                    </div>
+                </article>
             </div>
         </div>
     </template>
-
+    <template id="feed-comment-template">
+        <article class="media">
+            <figure class="media-left">
+                <p class="image is-64x64">
+                    <img src="https://bulma.io/images/placeholders/128x128.png">
+                </p>
+            </figure>
+            <div class="media-content">
+                <div class="content">
+                    <p>
+                        <strong>%writerId%</strong>
+                        <br>
+                        %contents%
+                    </p>
+                </div>
+            </div>
+            <div class="media-right">
+                <a class="level-item">
+                    <span class="icon is-small"><i class="fas fa-heart pr-1"></i>1</span>
+                </a>
+            </div>
+        </article>
+    </template>
 </th:block>
 </html>
diff --git a/front/src/main/resources/templates/fragments/header.html b/front/src/main/resources/templates/fragments/header.html
@@ -38,8 +38,8 @@
                             </a>
                         </div>
                         <div sec:authorize="isAuthenticated()">
-                            <a class="button is-primary" th:href="@{/write-feed}">
-                                <strong>피드 작성</strong>
+                            <a class="button is-primary" th:href="@{/write-article}">
+                                <strong>글 작성</strong>
                             </a>
                             <div class="dropdown">
                                 <div class="dropdown-trigger">
@@ -51,8 +51,8 @@
                                 </div>
                                 <div class="dropdown-menu" id="dropdown-menu" role="menu">
                                     <div class="dropdown-content">
-                                        <a th:href="@{/my-feeds}" class="dropdown-item">
-                                            내 피드 목록 보기
+                                        <a th:href="@{/my-articles}" class="dropdown-item">
+                                            내 글 목록 보기
                                         </a>
                                         <a th:href="@{/modify-user}" class="dropdown-item">
                                             회원 정보 수정하기