feat: 게시글 상세 페이지 (#7 #5 #10)

src/controllers/detail.controller.js

@@ -0,0 +1,39 @@
+import views from '../views/detail/detail.html'
+import Axios from 'axios';
+
+export default () => {
+    const divElement = document.createElement('div');
+    divElement.classList = "detail-section";
+    divElement.innerHTML = views;
+
+    const postId = localStorage.getItem('postId');
+    const API_URL = 'http://43.201.103.199/post/' + postId;
+
+    Axios.get(API_URL).then((res) => {
+        console.log(res.data.data)
+        let detail = res.data.data;
+
+        divElement.querySelector("#detail-img").innerHTML = `
+            <img src=${detail.post.image} style="width: 200px" />
+        `
+        divElement.querySelector("#detail-title").innerHTML = `
+            ${detail.post.title}
+        `
+        divElement.querySelector("#detail-date").innerHTML = `
+            ${detail.post.updatedAt.substr(0,9)}
+        `
+        divElement.querySelector("#detail-desc").innerHTML = `
+            ${detail.post.content}
+        `
+
+        detail.comments.forEach((el) => {
+            divElement.querySelector("#detail-comment").innerHTML += `
+              댓글 :::  ${el.content} <br>
+            `
+        })
+
+
+    })
+
+    return divElement;
+}

src/controllers/index.js

@@ -1,10 +1,12 @@
 import Home from './home.controller'
 import Post from './post.controller'
+import Detail from './detail.controller'
 import NotFound from './404.controller'
 
 const pages =  {
     home: Home,
     post: Post,
+    detail: Detail,
     notFound: NotFound
 }
 

src/router/index.routes.js

@@ -7,14 +7,13 @@ const router = (route) => {
     switch (route) {
         case '#/':
             return rootContent.appendChild(pages.home());
-        case '#/feat':
+        case '#/detail':
+            return rootContent.appendChild(pages.detail());
+        case '#/post':
             return rootContent.appendChild(pages.post());
-        case '#/pricing':
-            return console.log('pricing!')
         default:
             return rootContent.appendChild(pages.notFound());
     }
-    // console.log(route)
 }
 
 export {router};

src/views/detail/detail.fn.js

@@ -0,0 +1,7 @@
+async function delDetail() {
+    let postId = localStorage.getItem("postId")
+    const res = await fetch("http://43.201.103.199/post/" + postId, {
+        method: "DELETE",
+    })
+    location.href = "#/"
+}

src/views/detail/detail.html

@@ -0,0 +1,17 @@
+<div id="detail-img">
+
+</div>
+<div id="detail-post">
+    <div id="detail-title"></div>
+    <div id="detail-date"></div>
+    <div id="detail-desc"></div>
+</div>
+
+<div id="detail-comment">
+
+</div>
+<hr>
+<div id="detail-control">
+    <div id="detail-fix">수정하기</div>
+    <div id="detail-delete" onClick="delDetail()">삭제하기</div>
+</div>