feat: archive list page 스타일 변경, 컴포넌트 단위로 분리

TRANS_HYPE/components/rightPanel/setupMenu.css

@@ -29,7 +29,7 @@
   display: inline-flex;
   flex-direction: row-reverse;
   z-index: 2;
-  font-size: 1.2vh;
+  font-size: x-small;
   right: 0%;
   writing-mode: vertical-lr;
   transform: rotate(0.5turn);
@@ -39,15 +39,11 @@
 
 #menu > li {
   color: #ffffff;
-  width: 4vh;
+  width: 25px;
   height: 20%;
   text-align: center;
-  line-height: 4vh;
+  line-height: 25px;
   font-weight: 500;
-
-  -webkit-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1);
-  -ms-transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1);
-  transition: all 300ms cubic-bezier(0.6, 0, 0.4, 1);
 }
 
 #menu > li > a {

TRANS_HYPE/pages/archive_list/Area.css

@@ -0,0 +1,26 @@
+.area_container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  /* background: rgb(20, 20, 20); */
+}
+
+.picture1 {
+  width: 50%;
+  object-fit: contain;
+  opacity: 0.5;
+  transform: translateY(50%);
+}
+
+.picture2 {
+  width: 50%;
+  object-fit: contain;
+  opacity: 0.5;
+}
+
+.description {
+  position: absolute;
+  left: 5%;
+  width: 40%;
+}

TRANS_HYPE/pages/archive_list/Area.js

@@ -0,0 +1,21 @@
+import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js";
+import Picture from "./Picture.js";
+import Description from "./Description.js";
+
+export default function Area(area) {
+  loadCSS("/TRANS_HYPE/pages/archive_list/Area.css");
+  const container = document.createElement("li");
+  container.classList.add("area_container");
+
+  const picture1 = Picture(area.pic2);
+  const picture2 = Picture(area.pic3);
+  const description = Description(area);
+
+  picture1.classList.add("picture1");
+  picture2.classList.add("picture2");
+  description.classList.add("description");
+
+  container.append(picture1, picture2, description);
+
+  return container;
+}

TRANS_HYPE/pages/archive_list/Description.css

@@ -0,0 +1,17 @@
+.place_info {
+  font-family: "Noto Sans KR", sans-serif;
+  color: white;
+
+  font-size: 1.2vw;
+  font-weight: 900;
+  line-height: 170%;
+
+  word-break: keep-all;
+  z-index: 2;
+}
+
+.interview {
+  font-size: 2vw;
+  font-weight: 900;
+  line-height: 170%;
+}

TRANS_HYPE/pages/archive_list/Description.js

@@ -0,0 +1,18 @@
+import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js";
+export default function Description(area) {
+  loadCSS("/TRANS_HYPE/pages/archive_list/Description.css");
+
+  let descriptionContainer = document.createElement("div");
+  descriptionContainer.classList.add("place_info");
+
+  descriptionContainer.innerHTML = `
+    <div>${area.address_kr}</div>
+    <div>${area.address_eng}</div>
+    <div>${area.graffiti_size}</div>
+    <div>${area.graffiti_style}</div>
+    <div>${area.wall_size}</div>
+    <br><br>
+    <div class=interview>${area.discription}</div>
+  `;
+  return descriptionContainer;
+}

TRANS_HYPE/pages/archive_list/Picture.css

@@ -0,0 +1 @@
+

TRANS_HYPE/pages/archive_list/Picture.js

@@ -0,0 +1,27 @@
+import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js";
+
+export default function Picture(srcName) {
+  loadCSS("/TRANS_HYPE/pages/archive_list/Picture.css");
+  const picture = document.createElement("img");
+
+  picture.src = getImgFilePath(320, srcName);
+  picture.srcset = `
+        ${getImgFilePath(320, srcName)} 320w,
+        ${getImgFilePath(640, srcName)} 640w,
+        ${getImgFilePath(1024, srcName)} 1024w,
+      `;
+  picture.sizes = "(max-width: 500px) 320px, (max-width: 800px) 640px, 1024px";
+  return picture;
+}
+
+function getImgFilePath(width, srcName) {
+  const archivePicturesPath = "../../assets/archive_pictures/";
+  switch (width) {
+    case 320:
+      return archivePicturesPath + "w320/" + srcName;
+    case 640:
+      return archivePicturesPath + "w640/" + srcName;
+    case 1024:
+      return archivePicturesPath + "w1024/" + srcName;
+  }
+}

TRANS_HYPE/pages/archive_list/Shortcut.css

@@ -0,0 +1,13 @@
+._shortcut > button {
+  border: none;
+  outline: none;
+  background-color: inherit;
+  cursor: pointer;
+  color: gray;
+  font-family: "Noto Sans KR", sans-serif;
+}
+
+._shortcut > button:hover,
+._shortcut > button:focus {
+  color: white;
+}

TRANS_HYPE/pages/archive_list/Shortcut.js

@@ -0,0 +1,18 @@
+import { loadCSS } from "/TRANS_HYPE/utils/loadCSS.js";
+
+export default function Shortcut(area, index, onClickShorcut) {
+  loadCSS("/TRANS_HYPE/pages/archive_list/Shortcut.css");
+  const shortcut = document.createElement("li");
+  const button = document.createElement("button");
+  button.dataset.index = index;
+
+  shortcut.appendChild(button);
+  shortcut.classList.add("_shortcut");
+
+  button.innerHTML = `
+    ${area.address_kr}
+  `;
+  button.onclick = onClickShorcut;
+
+  return shortcut;
+}