자잘한 수정

package.json

@@ -12,6 +12,7 @@
     "vite": "^4.3.9"
   },
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "gsap": "^3.12.2",
     "lil-gui": "^0.18.1",
     "three": "^0.153.0"

src/script.js

@@ -14,7 +14,6 @@ btnRoomZoom.addEventListener("click", () => {
   // iframeWrapper.classList.toggle('active-popup')
 });
 
-// sidebar js
 const parseJwt = (token) => {
   var base64Url = token.split(".")[1];
   var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
@@ -105,7 +104,7 @@ const sidebarChangeContent = async (token) => {
     avatar.alt = "Avatar";
     avatar.classList.add("w-25");
     userName.innerText = localStorage.getItem("nickname");
-    userName.href = "./user.html";
+    userName.href = "./views/user.html";
     userName.style.textDecoration = "none";
 
     child.appendChild(avatar);
@@ -128,6 +127,7 @@ const hamburger = document.querySelector(".hamburger-menu");
 hamburger.addEventListener("click", sidebarChangeContent(token));
 
 const lg = document.querySelector(".logout-btn");
+
 lg.addEventListener("click", async (e) => {
   e.preventDefault();
 

src/scripts/createRoom.js

@@ -61,9 +61,8 @@ form.addEventListener("submit", async (e) => {
     body.append("roomFile", files.files[i]);
   }
 
-
   try {
-    console.log(localStorage.getItem("jwt"))
+    console.log(localStorage.getItem("jwt"));
     const res = await fetch(url, {
       method: "POST",
       body: body,
@@ -79,6 +78,7 @@ form.addEventListener("submit", async (e) => {
         "방이 생성되었습니다.\n방 번호 : " +
           value.substring(17, value.length - 1)
       );
+      location.href = "../index.html";
     } else alert("다시 한번 확인해 주시기 바랍니다.");
   } catch (e) {
     console.log("방을 생성할 수 없습니다.");

src/scripts/login.js

@@ -50,7 +50,7 @@ form.addEventListener("submit", async (e) => {
 
       alert("로그인에 성공했습니다.");
 
-      location.href = "./index.html";
+      location.href = "../index.html";
     } else {
       alert("이메일 또는 비밀번호가 잘못되었습니다.");
     }

src/scripts/room.js

@@ -55,18 +55,19 @@ const createCarousel = async (chuncks) => {
 // file 형식으로 carousel에 child 추가
 const getMedia = async (fileURLs) => {
   try {
-    chuncks = [];
-    for (i = 0; i < fileURLs.length; i++) {
+    var chuncks = new Array();
+
+    for (var i = 0; i < fileURLs.length; i++) {
       let readableStream = await fetch(
         "http://localhost:8080/api" +
           fileURLs[i].replace("\\\\room\\", "/roomImg/")
       );
-      chuncks.push(readableStream);
+      await chuncks.push(readableStream);
     }
 
     createCarousel(chuncks);
   } catch (error) {
-    alert(error);
+    console.log(error);
     return null;
   }
 };
@@ -97,8 +98,6 @@ const getRoom = async (roomId) => {
   }
 };
 
-getRoom(1); //
-
 const getRooms = async (interestType, sort) => {
   // 메인 페이지에 보여줄 거임
   // interest가 null인 경우 구분 안함
@@ -115,7 +114,7 @@ const getRooms = async (interestType, sort) => {
   const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
   const { value } = await reader.read();
 
-  console.log(JSON.parse(value));
+  return JSON.parse(value);
 };
 
 const likeThisRoom = async (roomId) => {
@@ -163,3 +162,5 @@ const deleteRoom = async (roomId) => {
     console.log(e);
   }
 };
+
+export { getRoom, getRooms, getMedia, setData };

src/scripts/sidebar.js

@@ -50,7 +50,7 @@ const sidebarChangeContent = async (token) => {
     login.setAttribute("data-bs-toggle", "modal");
     login.setAttribute("data-bs-target", "#login-modal");
     login.innerText = "Login";
-    login.href = "./views/login.html";
+    login.href = "../views/login.html";
     node.appendChild(login);
     menu__box.prepend(node);
 
@@ -111,6 +111,7 @@ const hamburger = document.querySelector(".hamburger-menu");
 hamburger.addEventListener("click", sidebarChangeContent(token));
 
 const lg = document.querySelector(".logout-btn");
+
 lg.addEventListener("click", async (e) => {
   e.preventDefault();
 
@@ -131,7 +132,7 @@ lg.addEventListener("click", async (e) => {
         localStorage.removeItem("nickname");
         localStorage.removeItem("profileImgUrl");
         localStorage.removeItem("jwt");
-        location.replace("./index.html");
+        location.replace("../index.html");
       } else {
         alert("[Temporal Error]\n로그아웃 요청이 실패했습니다.");
       }

src/views/about.html

@@ -33,9 +33,9 @@
       </label>
 
       <ul class="menu__box">
-        <li><a class="menu__item" href="./index.html">Home</a></li>
+        <li><a class="menu__item" href="../index.html">Home</a></li>
         <li>
-          <a class="menu__item create" href="./createRoom.html" >Create Room</a>
+          <a class="menu__item create" href="./createRoom.html">Create Room</a>
         </li>
         <li><a class="menu__item" href="./about.html">About</a></li>
         <li>
@@ -115,5 +115,5 @@ <h1 class="modal-title fs-5" id="logout-modal">Logout</h1>
     integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
     crossorigin="anonymous"
   ></script>
-  <script src="../scripts/sidebar.js"></script>
+  <script src="../script.js"></script>
 </html>

src/views/carousel.html

@@ -10,6 +10,10 @@
       integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
       crossorigin="anonymous"
     />
+    <script
+      src="https://kit.fontawesome.com/b062febd1b.js"
+      crossorigin="anonymous"
+    ></script>
   </head>
 
   <body>
@@ -31,9 +35,8 @@ <h5 style="color: black; font-weight: 900">예시 이미지</h5>
         </div>
       </div>
 
-      <button
-        class="carousel-control-prev"
-        type="button"
+      <i
+        class="carousel-control-prev fa-solid fa-chevron-down"
         data-bs-target="#carouselCaption"
         data-bs-slide="prev"
         style="
@@ -45,10 +48,9 @@ <h5 style="color: black; font-weight: 900">예시 이미지</h5>
       >
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
-      </button>
-      <button
-        class="carousel-control-next"
-        type="button"
+      </i>
+      <i
+        class="carousel-control-next fa-solid fa-chevron-down"
         data-bs-target="#carouselCaption"
         data-bs-slide="next"
         style="
@@ -60,14 +62,14 @@ <h5 style="color: black; font-weight: 900">예시 이미지</h5>
       >
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
-      </button>
+      </i>
     </div>
 
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
       crossorigin="anonymous"
     ></script>
-    <script src="../scripts/room.js"></script>
+    <script src="../scripts/sidebar.js"></script>
   </body>
 </html>

src/views/comment.html

@@ -76,7 +76,7 @@
       </label>
 
       <ul class="menu__box">
-        <li><a class="menu__item" href="./index.html">Home</a></li>
+        <li><a class="menu__item" href="../index.html">Home</a></li>
         <li>
           <a class="menu__item create" href="./createRoom.html">Create Room</a>
         </li>

src/views/createRoom.html

@@ -17,9 +17,11 @@
     ></script>
   </head>
 
-  <body class="d-flex w-100 h-100 flex-column">
+  <body
+    class="d-flex w-100 h-100 flex-column"
+    style="background-image: url('../public/background/main.png')"
+  >
     <!-- 헤더 입력부 -->
-
 
     <form
       class="w-100 d-flex flex-column align-items-center register-form mt-5"
@@ -152,7 +154,7 @@ <h5 style="color: black; font-weight: 900">예시 이미지</h5>
 
         <div class="d-flex w-100 justify-content-between mt-3">
           <a
-            href="./index.html"
+            href="../index.html"
             class="link-underline-light text-decoration-none d-flex flex-column align-items-center justify-content-center"
             >뒤로 가기</a
           >
@@ -174,9 +176,9 @@ <h5 style="color: black; font-weight: 900">예시 이미지</h5>
       </label>
 
       <ul class="menu__box">
-        <li><a class="menu__item" href="./index.html">Home</a></li>
+        <li><a class="menu__item" href="../index.html">Home</a></li>
         <li>
-          <a class="menu__item create" href="./createRoom.html" >Create Room</a>
+          <a class="menu__item create" href="./createRoom.html">Create Room</a>
         </li>
         <li><a class="menu__item" href="./about.html">About</a></li>
         <li>