code-squad · crongro · Feb 26, 2020 · Feb 11, 2020 · Feb 11, 2020 · Feb 11, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,111 @@
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# rollup.js default build output
+dist/
+
+# Uncomment the public line if your project uses Gatsby
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
+# public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Temporary folders
+tmp/
+temp/
+
+# End of https://www.gitignore.io/api/node
diff --git a/css/.DS_Store → client/css/.DS_Store b/css/.DS_Store → client/css/.DS_Store
diff --git a/css/reset.css → client/css/reset.css b/css/reset.css → client/css/reset.css
diff --git a/css/style.css → client/css/style.css b/css/style.css → client/css/style.css
diff --git a/client/images/button.png b/client/images/button.png
diff --git a/client/js/carousel.js b/client/js/carousel.js
@@ -0,0 +1,77 @@
+import { setTransform, setTransition } from "./util.js";
+
+class Carousel {
+  constructor(config) {
+    this.config = config;
+    this.slideAll = config.slideAll;
+    this.width = config.MAX_PANEL_SIZE;
+    this.currentIndex = config.START_CAROUSEL_INDEX;
+    this.isMoveFinished = config.isMoveFinished;
+    this.nav = document.querySelectorAll(".slide-navigation > li");
+    this.init();
+  }
+
+  init() {
+    this.buttonHandler();
+    this.navigationHandler();
+  }
+
+  moveSlides(option) {
+    setTransform(this.slideAll, this.currentIndex, this.width);
+    setTransition(this.slideAll, option);
+  }
+
+  clickEvent(index) {
+    if (this.isMoveFinished === false) return;
+    this.isMoveFinished = false;
+
+    const transitionOption = `transform 0.4s ease-in-out`;
+    let prevIndex = this.currentIndex - 1;
+    let nextIndex = this.currentIndex + 1;
+    this.currentIndex = index === 0 ? prevIndex : nextIndex;
+    this.moveSlides(transitionOption);
+  }
+
+  transitionendEvent() {
+    const transitionOption = "none";
+    const minIndex = this.config.START_CAROUSEL_INDEX;
+    const maxIndex = this.config.MAX_CAROUSEL_SIZE;
+
+    if (this.currentIndex === minIndex - 1) {
+      this.currentIndex = maxIndex - 1;
+      this.moveSlides(transitionOption);
+    } else if (this.currentIndex === maxIndex) {
+      this.currentIndex = minIndex;
+      this.moveSlides(transitionOption);
+    }
+    this.isMoveFinished = true;
+  }
+
+  buttonHandler() {
+    const buttons = this.config.buttons;
+    setTransform(this.slideAll, this.currentIndex, this.width);
+
+    buttons.forEach((element, index) => {
+      element.addEventListener("click", () => this.clickEvent(index));
+    });
+
+    this.slideAll.addEventListener("transitionend", () => this.transitionendEvent());
+  }
+
+  navigationHandler() {
+    const transitionOption = `transform 0.4s ease-in-out`;
+    setTransform(this.slideAll, this.currentIndex, this.width);
+
+    this.nav.forEach((el, index) => {
+      let nextIndex = index + 1;
+
+      el.addEventListener("click", () => {
+        if (nextIndex === this.currentIndex) return;
+        this.currentIndex = nextIndex;
+        this.moveSlides(transitionOption);
+      });
+    });
+  }
+}
+
+export { Carousel };
diff --git a/client/js/main.js b/client/js/main.js
@@ -0,0 +1,29 @@
+import { Carousel } from "./carousel.js";
+import { TemplateData } from "./templateData.js";
+
+const jsonFileUrl = "http://localhost:8080/users";
+const data = localStorage.getItem("mockData");
+
+const carousel = { slideAll: document.querySelector(".slider") };
+const arrowButtons = { buttons: document.querySelectorAll(".slide-btn > button") };
+const width = { MAX_PANEL_SIZE: 760 };
+let currentIndex = { START_CAROUSEL_INDEX: 1 };
+let maxIndex = { MAX_CAROUSEL_SIZE: 5 };
+
+const config = Object.assign(carousel, arrowButtons, width, currentIndex, maxIndex);
+
+const run = () => {
+  fetch(jsonFileUrl)
+    .then(response => response.json())
+    .then(mockData => {
+      localStorage.setItem("mockData", JSON.stringify(mockData));
+    })
+    .then(() => {
+      const templateData = new TemplateData(JSON.parse(data));
+    })
+    .then(() => {
+      const carousel = new Carousel(config);
+    });
+};
+
+run();
diff --git a/client/js/templateData.js b/client/js/templateData.js
@@ -0,0 +1,81 @@
+class TemplateData {
+  constructor(mockData) {
+    this.cardList = mockData.cardList;
+    this.init();
+  }
+
+  init() {
+    this.addNavTitle();
+    this.addSlide();
+    this.addDummySlide();
+  }
+
+  addNavTitle() {
+    let navButtons = ``;
+
+    this.cardList.forEach(element => {
+      navButtons += `<li><button type="button">${element.title}</button></li>`;
+    });
+
+    const slideNav = document.querySelector(".slide-navigation");
+    slideNav.innerHTML = navButtons;
+  }
+
+  addSlide() {
+    let slides = ``;
+
+    this.cardList.forEach(element => {
+      const img = element.image;
+      const header = element.header;
+      const sentence = element.contents;
+
+      slides += `
+      <li>
+        ${this.addImgWrap(img)}
+        ${this.addContentsWrap(header, sentence)}
+      </li>`;
+    });
+
+    const sliderWrap = document.querySelector(".slider");
+    sliderWrap.innerHTML = slides;
+  }
+
+  addImgWrap(img) {
+    let imgWrap = `
+    <div class="img-wrap">
+      <img src="${img}">
+    </div>`;
+
+    return imgWrap;
+  }
+
+  addContentsWrap(header, sentences) {
+    let sentenceList = ``;
+    sentences.forEach(el => (sentenceList += `<li>${el}</li>`));
+
+    let contentsWrap = `
+    <div class="contents-wrap">
+      <h2>${header}</h2>
+      <ul>
+        ${sentenceList}
+      </ul>
+    </div>`;
+
+    return contentsWrap;
+  }
+
+  addDummySlide() {
+    const sliderWrap = document.querySelector(".slider");
+
+    let firstChild = sliderWrap.firstElementChild;
+    let lastChild = sliderWrap.lastElementChild;
+
+    let clonedFirst = firstChild.cloneNode(true);
+    let clonedLast = lastChild.cloneNode(true);
+
+    sliderWrap.appendChild(clonedFirst);
+    sliderWrap.insertBefore(clonedLast, sliderWrap.firstElementChild);
+  }
+}
+
+export { TemplateData };
diff --git a/client/js/util.js b/client/js/util.js
@@ -0,0 +1,10 @@
+const setTransform = (target, width, currentIndex) => {
+  let transformOption = `translateX(${-width * currentIndex}px)`;
+  target.style.transform = transformOption;
+};
+
+const setTransition = (target, option) => {
+  target.style.transition = option;
+};
+
+export { setTransform, setTransition };
diff --git a/client/views/index.html b/client/views/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../css/reset.css" />
+    <link rel="stylesheet" href="../css/style.css" />
+    <title>아마존</title>
+  </head>
+
+  <body>
+    <div class="wrap">
+      <div class="slide-container">
+        <ul class="slide-navigation clearfix">
+          <!-- addNavTitle -->
+        </ul>
+        <ul class="slider clearfix">
+          <!-- addSlideImg, addSlideHeader -->
+        </ul>
+      </div>
+      <div class="slide-btn">
+        <button type="button" class="prev-btn"></button>
+        <button type="button" class="next-btn"></button>
+      </div>
+    </div>
+    <script type="module" src="../js/main.js"></script>
+  </body>
+</html>