[Mission4/이혜준] - Project_Notion_VanillaJS

css/style.scss

@@ -1,17 +1,138 @@
 body {
   margin: 0;
+
+  li {
+    list-style-type: none;
+  }
+
+  ul {
+    padding-left: 10px;
+  }
 }
 
 #app {
   display: flex;
 }
 
+/* 사이드 바 */
+
 .posts-page {
-  background-color: #f3f3e3;
+  width: 15rem;
   height: 100vh;
+  margin-right: 50px;
+  padding: 10px;
+
+  font-size: 15px;
+  background-color: #f7f6f3;
+}
+
+.post {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #ebebea;
+
+    .button-group > button {
+      opacity: 1;
+    }
+  }
+}
+
+.button-group {
+  width: 50px;
+
+  & > button {
+    width: 20px;
+    height: 20px;
+    align-items: center;
+
+    background-color: #ebebea;
+    border: none;
+    border-radius: 5px;
+
+    font-size: 10px;
+    color: #676662;
+    line-height: 10px;
+    opacity: 0;
+
+    &:hover {
+      background-color: #dddddc;
+      cursor: pointer;
+    }
+  }
+}
+
+.toggle-button {
+  background: none;
+  border: none;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #dddddc;
+  }
+}
+
+.page-create {
+  width: 100%;
+  padding: 10px;
+
+  text-align: left;
+  background: none;
+  border: none;
+  border-top: 1px solid #dddddc;
+  border-radius: 5px;
+
+  font-size: 16px;
+  color: #767571;
+
+  cursor: pointer;
+
+  &:hover {
+    border-top-color: #ebebea;
+    background-color: #ebebea;
+  }
 }
 
+/* 에디터 */
+
 .editor {
   display: flex;
   flex-direction: column;
+
+  margin: 50px 10px 10px 10px;
+
+  * {
+    margin-bottom: 10px;
+    padding: 10px;
+
+    border: none;
+    border-radius: 8px;
+    outline: none;
+    background-color: none;
+
+    &:hover {
+      background-color: #f5f5f5;
+      transition: background-color 0.5s ease-in-out;
+    }
+
+    &:active {
+      background-color: #f5f5f5;
+    }
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: bold;
+  }
+
+  .content {
+    font-size: 15px;
+  }
 }

src/components/Editor.js

@@ -21,8 +21,8 @@ export default function Editor({
   this.render = () => {
     if (!isInitialize) {
       $editor.innerHTML = `
-      <input type="text" name="title" style="width: 600px;" value="${this.state.title}" />
-      <textarea name="content" style="width: 600px; height: 400px;">${this.state.content}</textarea>
+      <input class="title" type="text" name="title" style="width: 600px;" value="${this.state.title}" />
+      <textarea class="content" name="content" style="width: 600px; height: 400px;">${this.state.content}</textarea>
     `;
 
       isInitialize = true;

src/components/LinkButton.js

@@ -1,9 +1,10 @@
 import { push } from "../utils/router.js";
 
-export default function LinkButton({ $target, initialState }) {
+export default function LinkButton({ $target, initialState, className }) {
   this.state = initialState;
 
   const $linkButton = document.createElement("button");
+  $linkButton.setAttribute("class", className);
   $target.appendChild($linkButton);
 
   this.render = () => {

src/pages/PostsPage.js

@@ -15,7 +15,7 @@ export default function PostsPage({ $target }) {
       this.setState();
       push(`/posts/${createdPost.id}`);
     },
-    onDelete: async(postId) => {
+    onDelete: async (postId) => {
       await deletePost(postId);
       this.setState();
       history.replaceState(null, null, "/");
@@ -29,9 +29,10 @@ export default function PostsPage({ $target }) {
   new LinkButton({
     $target: $page,
     initialState: {
-      text: "페이지 추가",
+      text: "+ 새 페이지",
       link: "/posts/new",
     },
+    className: "page-create",
   });
 
   this.setState = async () => {

src/utils/renderPosts.js

@@ -6,14 +6,18 @@ export const renderPosts = (root, posts, sub) => {
     let $li = document.createElement("li");
     $li.setAttribute("data-id", post.id);
     $li.innerHTML = `
-      ${post.title ? post.title : "제목 없음"}
-      ${
-        !sub
-          ? `
-        <button class="post-create">+</button>
-        <button class="post-delete">x</button>`
-          : ""
-      }
+      <div class="post">
+        <div>    
+          <button class="toggle-button">&#9656;</button>
+          <span class="post-title">${post.title ? post.title : "제목 없음"}</span>
+        </div>
+        ${!sub? `
+            <div class="button-group">
+              <button class="post-create">&#10010;</button>
+              <button class="post-delete">&#10006;</button>
+            </div>` : ""
+        }
+      </div>
     `;
 
     $ul.appendChild($li);