기사 클릭 시 상세 페이지 렌더링 구현

public/main.js

@@ -3,18 +3,11 @@ import Header from './src/components/header.js';
 import Home from './src/components/home.js';
 import Footer from './src/components/footer.js';
 import store from './src/store.js';
-
-const render = () => {
-  const app = document.querySelector('#app');
-  app.innerHTML = `
-    ${Header()}
-    ${Home()}
-    ${Footer()}
-  `;
-};
+import Detail from './src/components/detail.js';
 
 const category = ['life', 'food', 'trip', 'culture'];
 const contents = new Contents();
+let selectedPage = false;
 
 for (const name of category) {
   contents //
@@ -31,3 +24,34 @@ contents //
     store.setState({ realTimeBest: result });
     render();
   });
+
+const goToDetailPage = () => {
+  const contentsWrap = document.querySelectorAll('.contents-wrap');
+  contentsWrap.forEach((content) => {
+    content.addEventListener('click', (event) => {
+      const content = event.target.closest('.content');
+      const url = content.dataset.url.replace(/\//g, ' ');
+      if (!content) {
+        return;
+      }
+      contents //
+        .detailPage(url)
+        .then((result) => {
+          store.setSelectedPage({ selectedPage: result });
+          console.log(store);
+          render();
+        });
+      selectedPage = true;
+    });
+  });
+};
+
+const render = () => {
+  const app = document.querySelector('#app');
+  app.innerHTML = `
+    ${Header()}
+    ${selectedPage ? Detail() : Home()}
+    ${Footer()}
+  `;
+  goToDetailPage();
+};

public/src/components/detail.js

@@ -0,0 +1,13 @@
+import store from '../store.js';
+
+const Detail = () => `
+  <section class="contents-section">
+    <div class="article-title">
+      <h2 class="main-title">${store.state.selectedPage.title}</h2>
+      <span class="author">${store.state.selectedPage.mediaName}</span>
+    </div>
+    <article class="article-body">${store.state.selectedPage.mainContents}</article>
+  </section>
+`;
+
+export default Detail;

public/src/components/home.js

@@ -61,8 +61,8 @@ const Culture = () => `
   </section>
 `;
 
-const Article = ({ title, imageUrl, mediaName, summaryContent }) => `
-  <article class="content">
+const Article = ({ title, imageUrl, mediaName, summaryContent, url }) => `
+  <article class="content" data-url="${url}">
     <h3 class="blind">${title}</h3>
     <img
       class="thumbnail"

public/src/service/contents.js

@@ -18,8 +18,14 @@ class Contents {
   }
 
   async realTimeBest() {
+    const res = await fetch(`${this.baseURL}/best`, this.requestOptions);
+    const result = await res.json();
+    return result;
+  }
+
+  async detailPage(url) {
     const res = await fetch(
-      `${this.baseURL}/content/best`,
+      `${this.baseURL}/detail/${url}`,
       this.requestOptions
     );
     const result = await res.json();

public/src/store.js

@@ -26,11 +26,16 @@ const store = {
     trip: [],
     culture: [],
     realTimeBest: [],
+    selectedPage: [],
   },
 
   setState(newState) {
     this.state = { ...this.state, ...newState };
   },
+
+  setSelectedPage(newState) {
+    this.state = { ...this.state, ...newState };
+  },
 };
 
 export default store;