feat : menu add 추가

Hellol77 · Jul 29, 2024 · 655adf7 · 655adf7
1 parent f37cfd5
commit 655adf7
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 17 deletions.
diff --git a/frontend/src/assets/menu.svg b/frontend/src/assets/menu.svg
diff --git a/frontend/src/components/menu.js → frontend/src/components/menu/menu.js b/frontend/src/components/menu.js → frontend/src/components/menu/menu.js
diff --git a/frontend/src/components/menu/menuText.js b/frontend/src/components/menu/menuText.js
diff --git a/frontend/src/controller/menuController.js b/frontend/src/controller/menuController.js
@@ -18,25 +18,35 @@ export default class MenuController {
 
     this.socket.on("getBubbles", (bubbles) => {
       bubbles.map((bubble) => {
-        const div = document.createElement("li");
+        const li = document.createElement("li");
+        li.classList.add("menu_li");
         const span = document.createElement("span");
         const p = document.createElement("p");
         span.textContent = timeAgo(new Date(bubble.created_at));
+        span.classList.add("text_createAt");
         p.textContent = bubble.text;
-        div.classList.add("menu_bubble");
-        div.id = bubble.id;
-        div.appendChild(p);
-        div.appendChild(span);
-        this.menuOl.appendChild(div);
+        p.classList.add("text_small");
+        li.classList.add("menu_bubble");
+        li.id = bubble.id;
+        li.appendChild(p);
+        li.appendChild(span);
+        this.menuOl.appendChild(li);
       });
     });
 
     this.socket.on("add", (data) => {
-      const div = document.createElement("div");
-      div.textContent = data.text;
-      div.id = data.id;
-      div.classList.add("menu_bubble");
-      this.menuOl.appendChild(div);
+      const li = document.createElement("li");
+      li.id = data.id;
+      li.classList.add("menu_bubble");
+      const p = document.createElement("p");
+      p.classList.add("text_small");
+      p.textContent = data.text;
+      const span = document.createElement("span");
+      span.textContent = timeAgo(new Date(data.created_at));
+      span.classList.add("text_createAt");
+      li.appendChild(p);
+      li.appendChild(span);
+      this.menuOl.appendChild(li);
     });
 
     this.socket.on("delete", (id) => {

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,7 +1,7 @@
 import CanvasController from "./controller/canvasController";
 import InputController from "./controller/inputController";
 import Input from "./components/input";
-import Menu from "./components/menu";
+import Menu from "./components/menu/menu";
 import MenuController from "./controller/menuController";
 
 class App {

diff --git a/frontend/src/styles/menu.css b/frontend/src/styles/menu.css
@@ -40,13 +40,17 @@
 }
 #menu_ol {
   list-style: none;
-  padding: 24px;
+  padding-left: 24px;
   margin-top: 100px;
-  height: 60%;
+  height: 70%;
   background-color: #333;
   overflow-y: scroll;
 }
 
+.menu_li {
+  margin-bottom: 8px;
+}
+
 .menu_bubble {
   color: #fff;
   font-size: 1.5rem;
@@ -79,3 +83,12 @@ footer {
   font-size: 1rem;
   font-family: "Dongle", sans-serif;
 }
+
+.text_small {
+  font-size: 1.8rem;
+}
+
+.text_createAt {
+  font-size: 1.2rem;
+  color: #ccc;
+}