Merge pull request #66 from Dev-FE-1/feature/mirang1024/routes

Feature/mirang1024/routes

src/pages/footer/Footer.js

@@ -23,6 +23,7 @@ export class Footer {
                   class="github__link"
                   src="/src/assets/images/github-mark.png"
                   alt="Repository Logo"
+                  target="_blank"
                 />
               </a>
             </p>

src/pages/gallery/AdminGallery.js

@@ -0,0 +1,57 @@
+import axios from 'axios';
+import './gallery.css';
+
+export class AdminGallery {
+  constructor(props = {}) {
+    this.el = document.createElement('div');
+    this.el.classList.add(props.containerClass || 'gallery');
+    this.galleryDataPath = props.galleryDataPath || './src/pages/gallery/gallery.json';
+    this.state = {};
+    this.init();
+  }
+
+  async init() {
+    await this.fetchGallery();
+    this.render();
+  }
+
+  async fetchGallery() {
+    try {
+      const response = await axios.get(this.galleryDataPath);
+      console.log(response.data);
+      console.log(this.state);
+      this.state = response.data;
+    } catch (e) {
+      console.error('Gallery.json 파일을 불러오는 데 실패했습니다.', e);
+    }
+  }
+
+  getImageUrl(url) {
+    return new URL(`${url}`, import.meta.url).href;
+  }
+
+  //  /pages/gallery/image/c4.jpg
+  render() {
+    const gallery__container = document.createElement('div');
+    gallery__container.classList.add('gallery__container');
+
+    if (this.state) {
+      this.state.forEach((item) => {
+        const card = document.createElement('div');
+        card.classList.add('gallery__container-card');
+
+        card.innerHTML = `
+          <div class="gallery__container-image-area">
+            <img src="${this.getImageUrl(item.image)}" alt="${item.title}" />
+          </div>
+          <div class="gallery__container-title">${item.title}</div>
+          <div class="gallery__container-date">${item.date}</div>
+        `;
+
+        gallery__container.appendChild(card);
+      });
+    }
+
+    this.el.appendChild(gallery__container);
+  }
+}

src/pages/gallery/EmployeeGallery.js

@@ -0,0 +1,57 @@
+import axios from 'axios';
+import './gallery.css';
+
+export class EmployeeGallery {
+  constructor(props = {}) {
+    this.el = document.createElement('div');
+    this.el.classList.add(props.containerClass || 'gallery');
+    this.galleryDataPath = props.galleryDataPath || './src/pages/gallery/gallery.json';
+    this.state = {};
+    this.init();
+  }
+
+  async init() {
+    await this.fetchGallery();
+    this.render();
+  }
+
+  async fetchGallery() {
+    try {
+      const response = await axios.get(this.galleryDataPath);
+      console.log(response.data);
+      console.log(this.state);
+      this.state = response.data;
+    } catch (e) {
+      console.error('Gallery.json 파일을 불러오는 데 실패했습니다.', e);
+    }
+  }
+
+  getImageUrl(url) {
+    return new URL(`${url}`, import.meta.url).href;
+  }
+
+  render() {
+    const gallery__container = document.createElement('div');
+    gallery__container.classList.add('gallery__container');
+
+    // this.container.innerHTML = /* HTML */ `<h2 class="gallery__title">Gallery</h2> `;
+    if (this.state) {
+      this.state.forEach((item) => {
+        const card = document.createElement('div');
+        card.classList.add('gallery__container-card');
+
+        card.innerHTML = `
+          <div class="gallery__container-image-area">
+            <img src="${this.getImageUrl(item.image)}" alt="${item.title}" />
+          </div>
+          <div class="gallery__container-title">${item.title}</div>
+          <div class="gallery__container-date">${item.date}</div>
+        `;
+
+        gallery__container.appendChild(card);
+      });
+    }
+
+    this.el.appendChild(gallery__container);
+  }
+}

src/pages/gallery/gallery-file.json

@@ -0,0 +1,82 @@
+[
+  {
+    "image": "./image/c1.jpg",
+    "title": "2016년 하반기 워크샵",
+    "date": "2016.10.01"
+  },
+  {
+    "image": "./image/c2.jpg",
+    "title": "2017년 상반기 워크샵",
+    "date": "2017.03.01"
+  },
+  {
+    "image": "./image/c3.jpg",
+    "title": "2017년 하반기 워크샵",
+    "date": "2017.10.01"
+  },
+  {
+    "image": "./image/c4.jpg",
+    "title": "2018년 상반기 워크샵",
+    "date": "2018.03.01"
+  },
+  {
+    "image": "./image/c5.jpg",
+    "title": "2018년 하반기 워크샵",
+    "date": "2018.10.01"
+  },
+  {
+    "image": "./image/c6.jpg",
+    "title": "2019년 상반기 워크샵",
+    "date": "2019.03.01"
+  },
+  {
+    "image": "./image/c7.jpg",
+    "title": "2019년 하반기 워크샵",
+    "date": "2019.10.01"
+  },
+  {
+    "image": "./image/c8.jpg",
+    "title": "2020년 상반기 워크샵",
+    "date": "2020.03.01"
+  },
+  {
+    "image": "./image/c9.jpg",
+    "title": "2020년 하반기 워크샵",
+    "date": "2020.10.01"
+  },
+  {
+    "image": "./image/c10.jpg",
+    "title": "2021년 상반기 워크샵",
+    "date": "2021.03.01"
+  },
+  {
+    "image": "./image/c11.jpg",
+    "title": "2021년 하반기 워크샵",
+    "date": "2021.10.01"
+  },
+  {
+    "image": "./image/c12.jpg",
+    "title": "2022년 상반기 워크샵",
+    "date": "2022.03.01"
+  },
+  {
+    "image": "./image/c13.jpg",
+    "title": "2022년 하반기 워크샵",
+    "date": "2022.10.01"
+  },
+  {
+    "image": "./image/c14.jpg",
+    "title": "2023년 상반기 워크샵",
+    "date": "2023.03.01"
+  },
+  {
+    "image": "./image/c15.jpg",
+    "title": "2023년 하반기 워크샵",
+    "date": "2023.10.01"
+  },
+  {
+    "image": "./image/c16.jpg",
+    "title": "2024년 상반기 워크샵",
+    "date": "2024.03.01"
+  }
+]

src/pages/gallery/gallery.css

@@ -0,0 +1,77 @@
+/* gallery.css */
+
+body {
+  background-color: var(--color-pale-gray);
+}
+
+.gallery {
+  display: grid;
+  width: 900px;
+  background-color: var(--color-white);
+  margin: 0 auto;
+  padding: 20px;
+  height: calc(100vh - 160px);
+  overflow-y: auto;
+}
+
+/* 페이지 전체가 아니라, 갤러리 안에서만 스크롤 적용. */
+.gallery__container {
+  /* 스크롤은 카드가 3줄일 때부터 적용한다.*/
+  /* 헤더랑 푸터 사이에 갤러리 컴포넌트를 넣을 것이기 때문에 위 아래는 비워놔야함. */
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  width: 100%;
+  gap: 20px;
+  overflow-x: hidden;
+}
+
+.gallery__container-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-regular-gray);
+  width: calc((100% / 4) - 20px);
+  border-radius: 5px;
+  box-shadow: var(--box-floating-shadow);
+  /* 컨테이너 안에는 무조건 항상 1줄에 카드 4개씩, 그리고 3줄씩 보여야한다.
+  단, 3번째 줄은 반만 보이게 해서 스크롤을 내려야 완전히 보이게 만든다. */
+}
+
+/* 마지막 줄의 카드들이 반만 보이도록 조정 */
+.gallery__container > :nth-last-child(-n + 4) {
+  grid-row: 3 / span 1; /* 마지막 4개의 카드를 3번째 줄에 반만 보이도록 설정 */
+}
+
+/* 카드 위에 마우스를 가져가면 약간 이미지가 커지는 효과 추가 */
+.gallery__container-card.hover {
+  transform: scale(1.05);
+}
+
+.gallery__container-image-area {
+  display: flex;
+  width: 100%;
+  min-height: 200px;
+}
+
+.gallery__container-image-area img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.gallery__container-title {
+  padding: 8px;
+  font-weight: 900;
+  font-size: var(--font-medium);
+  color: var(--color-black);
+  background-color: var(--color-white);
+}
+
+.gallery__container-date {
+  padding: 0 8px 8px;
+  font-size: var(--font-micro);
+  color: var(--color-dark-gray);
+  background-color: var(--color-white);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}

src/pages/gallery/gallery.json

@@ -0,0 +1,82 @@
+[
+  {
+    "image": "https://imgur.com/3rOWrA2",
+    "title": "2016년 하반기 워크샵",
+    "date": "2016.10.01"
+  },
+  {
+    "image": "https://imgur.com/oD8dkyh",
+    "title": "2017년 상반기 워크샵",
+    "date": "2017.03.01"
+  },
+  {
+    "image": "https://imgur.com/n3VkPhS",
+    "title": "2017년 하반기 워크샵",
+    "date": "2017.10.01"
+  },
+  {
+    "image": "https://imgur.com/yukZSdf",
+    "title": "2018년 상반기 워크샵",
+    "date": "2018.03.01"
+  },
+  {
+    "image": "https://imgur.com/OSPNJUq",
+    "title": "2018년 하반기 워크샵",
+    "date": "2018.10.01"
+  },
+  {
+    "image": "https://imgur.com/K3E8WAW",
+    "title": "2019년 상반기 워크샵",
+    "date": "2019.03.01"
+  },
+  {
+    "image": "https://imgur.com/rD0qRDW",
+    "title": "2019년 하반기 워크샵",
+    "date": "2019.10.01"
+  },
+  {
+    "image": "https://imgur.com/4YwmjIf",
+    "title": "2020년 상반기 워크샵",
+    "date": "2020.03.01"
+  },
+  {
+    "image": "https://imgur.com/p4hiVex",
+    "title": "2020년 하반기 워크샵",
+    "date": "2020.10.01"
+  },
+  {
+    "image": "https://imgur.com/653VaEa",
+    "title": "2021년 상반기 워크샵",
+    "date": "2021.03.01"
+  },
+  {
+    "image": "https://imgur.com/CES7kHA",
+    "title": "2021년 하반기 워크샵",
+    "date": "2021.10.01"
+  },
+  {
+    "image": "https://imgur.com/jsx31Em",
+    "title": "2022년 상반기 워크샵",
+    "date": "2022.03.01"
+  },
+  {
+    "image": "https://imgur.com/B6eFF4G",
+    "title": "2022년 하반기 워크샵",
+    "date": "2022.10.01"
+  },
+  {
+    "image": "https://imgur.com/P4W1Xqt",
+    "title": "2023년 상반기 워크샵",
+    "date": "2023.03.01"
+  },
+  {
+    "image": "https://imgur.com/RBPRzen",
+    "title": "2023년 하반기 워크샵",
+    "date": "2023.10.01"
+  },
+  {
+    "image": "https://imgur.com/PAH69kK",
+    "title": "2024년 상반기 워크샵",
+    "date": "2024.03.01"
+  }
+]