#16 - 게시글 뷰 기본 골격 작성

컨트롤러, 뷰, 테스트까지 한 번에 적용 * #header: id, header: element, .header: class
rhakdnj · Aug 7, 2022 · bfe00e4 · bfe00e4
1 parent e968db1
commit bfe00e4
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 0 deletions.
diff --git a/src/main/java/com/example/boardproject/controller/ArticleController.java b/src/main/java/com/example/boardproject/controller/ArticleController.java
@@ -3,6 +3,7 @@
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 import java.util.List;
@@ -17,4 +18,11 @@ public String articles(Model model) {
 
         return "articles/index";
     }
+    @GetMapping("/{articleId}")
+    public String article(@PathVariable Long articleId, Model model) {
+        model.addAttribute("article", "article"); // TODO: 구현할 때 여기에 실제 데이터를 넣어줘야 한다
+        model.addAttribute("articleComments", List.of());
+
+        return "articles/detail";
+    }
 }
diff --git a/src/main/resources/templates/articles/detail.html b/src/main/resources/templates/articles/detail.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>게시글 페이지</title>
+</head>
+
+<body>
+
+    <header id="header"></header>
+
+    <main>
+        <header>
+            <h1>첫번째 글</h1>
+        </header>
+
+        <aside>
+            <p>Uno</p>
+            <p><a href="https://github.com/jmjmjames" target="_blank">jm@gmail.com</a></p>
+            <p>
+                <time datetime="2022-01-01T00:00:00">2022-01-01</time>
+            </p>
+            <p>#java</p>
+        </aside>
+
+        <section>
+            <p>본문<br><br></p>
+
+            <div>
+                <form>
+                    <label for="articleComment" hidden>댓글</label>
+                    <textarea id="articleComment" placeholder="댓글 쓰기.." rows="3"></textarea>
+                    <button type="submit">쓰기</button>
+                </form>
+
+                <ul>
+                    <li>
+                        <div>
+                            <time><small>2022-01-01</small></time>
+                            <strong>Jm</strong>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                                Lorem ipsum dolor sit amet
+                            </p>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <time><small>2022-01-11</small></time>
+                            <strong>Jm</strong>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                                Lorem ipsum dolor sit amet
+                            </p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <nav>
+                <a href="#">이전 글</a>
+                <a href="#">다음 글</a>
+            </nav>
+        </section>
+
+    </main>
+
+    <footer id="footer"></footer>
+
+</body>
+</html>
diff --git a/src/main/resources/templates/articles/detail.th.xml b/src/main/resources/templates/articles/detail.th.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0"?>
+<thlogic>
+<!-- #header: id, header: element, .header: class-->
+    <attr sel="#header" th:replace="header :: header"/>
+    <attr sel="#footer" th:replace="footer :: footer"/>
+</thlogic>