feat: 메인 페이지 UI 및 데이터 연결 (#6 #5 #10)

* feat: axios 라이브러리 사용
* feat: scss 라이브러리 사용
* chore: 기타 코드 정리

package.json

@@ -15,5 +15,8 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "axios": "^1.2.2"
   }
 }

src/controllers/home.controller.js

@@ -1,9 +1,23 @@
-import views from '../views/home.html';
+import views from '../views/home/home.html';
+import Axios from "axios";
 
 export default () => {
     const divElement = document.createElement('div');
-    divElement.classList = 'text-white';
+    divElement.classList = "home-section";
     divElement.innerHTML = views;
 
+    const API_URL = 'http://43.201.103.199/posts';
+
+    Axios.get(API_URL).then((res) => {
+        let posts = res.data.data.posts;
+        console.log(posts);
+
+        posts.forEach((post) => {
+            let postEl = document.createElement('div')
+            postEl.innerHTML = post.title;
+            divElement.querySelector("#post-list-section").innerHTML += `<div>${post.title}</div>`
+        })
+    });
+
     return divElement;
 };

src/router/index.routes.js

@@ -5,17 +5,16 @@ let rootContent = document.getElementById('root');
 const router = (route) => {
     rootContent.innerHTML = '';
     switch (route) {
-        case '#/': {
+        case '#/':
             return rootContent.appendChild(pages.home());
-        }
         case '#/feat':
             return rootContent.appendChild(pages.post());
         case '#/pricing':
             return console.log('pricing!')
         default:
             return rootContent.appendChild(pages.notFound());
     }
-    console.log(route)
+    // console.log(route)
 }
 
 export {router};

src/views/home/home.html

@@ -0,0 +1,12 @@
+<div class="button-section">
+    <button class="create-post">
+        <img class="icon-post" src="../../assets/svg/create-post.svg">
+        새 글 작성하기
+    </button>
+</div>
+<div id="post-list-section">
+
+</div>
+
+
+

src/views/home/home.scss

@@ -0,0 +1,42 @@
+.font-css {
+  color: #fff;
+}
+
+.home-section{
+  height: 100%;
+  .button-section {
+    height: 15%;
+    background: red;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .post-list-section {
+    height: 85%;
+    background: white;
+  }
+}
+
+button {
+  @extend .font-css;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #AC354B;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 90vw;
+  height: 90%;
+  margin-top: 5px;
+  font: {
+    size: 2rem;
+  }
+  .create-post {
+  }
+  img {
+    width: 20%;
+  }
+}
+