[toko] Amazon - Week5 (Pair : litae)

.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 # css
+*.css
 .map

index.html

@@ -11,7 +11,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
     />
     <link rel="stylesheet" href="./src/style/css/reset.css" />
-    <link rel="stylesheet" href="./src/style/css/style.css" />
+    <link rel="stylesheet" href="./src/style/style.css" />
     <script defer type="module" src="./src/js/Main.js"></script>
     <title>Amazon.com</title>
   </head>

package.json

@@ -5,7 +5,8 @@
   "description": "",
   "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "json-server --watch ./server/db.json --port 3000"
   },
   "repository": {
     "type": "git",

readme.md

@@ -62,7 +62,43 @@
 
     <br>
 
-  ***
+  ---
+
+  ## Pair: TOKO
+
+  ### To Do List
+
+  - 검색바 영역
+
+    - [ ] 최근 검색어 목록
+      - [ ] 검색을 하면 db.josn의 history 배열에 추가
+      - [ ] 가장 최근 검색어가 최상단에 노출되도록
+      - [ ] 최대 5개의 검색어 노출
+      - [ ] 이미 검색어 목록에 있는 검색어를 다시 검색할 경우 해당 검색어가 최상단으로 순서 변경
+      - [ ] 최근 검색어의 오른쪽 삭제 버튼 클릭 시 해당 최근 검색어 삭제
+    - [ ] 추천 검색어
+      - [ ] 추천 검색어의 왼쪽 화살표 버튼을 클릭하면 해당 검색어가 검색바의 value 값으로 들어감
+    - [ ] 자동 완성 기능
+      - [ ] 검색바에 검색어를 입력하면 자동 완성 검색어 노출
+
+  - 사이드바 영역
+
+    - [ ] 네비게이션바의 '모두' 버튼을 클릭하면 사이드바가 노출
+    - [ ] db.josn의 SideBar에서 데이터를 fetch
+    - [ ] Model에서 카테고리 목록의 상태 관리(더보기 콘텐츠가 열려있는지 여부)
+    - [ ] View에서 상태에 따른 렌터링
+    - [ ] Controller에서 이벤트 관리
+
+  - 메인 영역
+
+    - [ ] 메인 콘텐츠
+      - [ ] db.josn의 MainContents에서 데이터 fetch
+      - [ ] View에서 렌더링
+
+  - Footer
+    - [ ] Footer
+      - [ ] db.josn의 Footer에서 데이터 fetch
+      - [ ] View에서 렌더링
 
   ### 참고
 

server/db.json

@@ -56,6 +56,31 @@
     }
   ],
 
+  "HeroImgs": 
+    {
+      "slider": [
+        "./src/asset/images/hero/img1.jpg",
+        "./src/asset/images/hero/img2.jpg",
+        "./src/asset/images/hero/img3.jpg",
+        "./src/asset/images/hero/img4.jpg",
+        "./src/asset/images/hero/img5.jpg",
+        "./src/asset/images/hero/img6.jpg"
+      ],
+      "btn" : [
+        {
+          "class": "hero-btn prev",
+          "id": "hero-prev-btn",
+          "src": "./src/asset/icons/prev-img.svg"
+        },
+        {
+          "class": "hero-btn next",
+          "id": "hero-next-btn",
+          "src": "./src/asset/icons/next-img.svg"
+        }
+      ]
+    }
+  ,
+
   "MainContents": [
     {
       "type": "login",

src/js/Controller/ExtendedLoginModalController.js

@@ -1,4 +1,4 @@
-import { $ } from '../Utils.js';
+import { $ } from '../utils.js';
 
 export class ExtendedLoginModalController {
   constructor(model, view) {

src/js/Controller/HeroSectionController.js

@@ -0,0 +1,68 @@
+import { HeroSliderView } from '../View/Hero/HeroSliderView.js';
+import { HeroBtnView } from '../View/Hero/HeroBtnView.js';
+import { $ } from '../utils.js';
+
+export class HeroSectionController {
+  constructor(model, view) {
+    this.model = model;
+    this.view = view;
+
+    this.setEvent();
+    this.initHeroSlider();
+  }
+
+  async initHeroSlider() {
+    new HeroSliderView(await this.model.getHeroImg());
+    new HeroBtnView(await this.model.getHeroImg());
+    this.cloneSlide();
+    this.setDefaultStyle();
+  }
+
+  setEvent() {
+    $('.hero-section').addEventListener('click', (event) => {
+      const target = event.target;
+      const isPrevBtn = target.classList.contains("prev") || target.id === "hero-prev-btn";
+      const isNextBtn = target.classList.contains("next") || target.id === "hero-next-btn";
+
+      switch (true) {
+        case isPrevBtn:
+          this.movePrevSlide();
+          break;
+        case isNextBtn:
+          this.moveNextSlide();
+          break;
+      }
+    });
+  }
+
+  cloneSlide() {
+    const heroSlider = $('.hero-slider');
+    const slides = heroSlider.querySelectorAll('li');
+    const clonedFirstSlide = slides[0].cloneNode(true);
+    const clonedLastSlide = slides[slides.length - 1].cloneNode(true);
+    heroSlider.insertBefore(clonedLastSlide, slides[0]);
+    heroSlider.appendChild(clonedFirstSlide);
+  }
+
+  setDefaultStyle() {
+    const heroSlider = $('.hero-slider');
+    heroSlider.style.width = `${this.model.widthOfSlider}px`;
+    this.model.currentIndex = 1;
+    this.model.transform -= this.model.widthOfSlide;
+    heroSlider.style.transform = `translateX(${this.model.transform}px)`;
+  };
+
+  movePrevSlide() {
+    const heroSlider = $('.hero-slider');
+    this.model.transform += this.model.widthOfSlide;
+    this.model.currentIndex -= 1;
+    heroSlider.style.transform = `translateX(${this.model.transform}px)`;
+  }
+
+  moveNextSlide() {
+    const heroSlider = $('.hero-slider');
+    this.model.transform -= this.model.widthOfSlide;
+    this.model.currentIndex += 1;
+    heroSlider.style.transform = `translateX(${this.model.transform}px)`;
+  }
+}

src/js/Controller/LocationModalController.js

@@ -1,4 +1,4 @@
-import { $ } from '../Utils.js';
+import { $ } from '../utils.js';
 
 export class LocationModalController {
   constructor(model, view) {

src/js/Controller/SearchBarController.js

@@ -1,4 +1,4 @@
-import { $ } from '../Utils.js';
+import { $ } from '../utils.js';
 import { HistoryView } from '../View/SearchBar/HistoryView.js';
 import { RecommendView } from '../View/SearchBar/RecommendView.js';
 

src/js/Data.js

@@ -8,4 +8,10 @@ export class Data {
     const data = await response.json();
     return data;
   }
+
+  async getHeroImgs() {
+    const response = await fetch(this.url + 'HeroImgs');
+    const data = await response.json();
+    return data;
+  }
 }

src/js/Main.js

@@ -1,4 +1,4 @@
-import { $ } from './Utils.js';
+import { $ } from './utils.js';
 import { Data } from './Data.js';
 import { App } from './App.js';
 import { NavbarMainView } from './View/NavBar/NavbarMain.js';
@@ -15,6 +15,9 @@ import { ExtendedLoginModalController } from './Controller/ExtendedLoginModalCon
 import { LocationModalView } from './View/Modal/LocationModal.js';
 import { LocationModalModel } from './Model/LocationModalModel.js';
 import { LocationModalController } from './Controller/LocationModalController.js';
+import { HeroSectionView } from './View/Hero/HeroSectionView.js';
+import { HeroSectionModel } from './Model/HeroSectionModel.js';
+import { HeroSectionController } from './Controller/HeroSectionController.js';
 
 class Main {
   constructor() {
@@ -42,6 +45,10 @@ class Main {
     this.LocationModal = new LocationModalView($('.nav-main__location'));
     this.LocationModalModel = new LocationModalModel();
     this.LocationModalController = new LocationModalController(this.LocationModalModel, this.LocationModal);
+
+    this.HeroSection = new HeroSectionView($('main'));
+    this.HeroSectionModel = new HeroSectionModel(this.data.getHeroImgs());
+    this.HeroSectionController = new HeroSectionController(this.HeroSectionModel, this.HeroSection)
   }
 }
 

src/js/Model/HeroSectionModel.js

@@ -0,0 +1,13 @@
+export class HeroSectionModel {
+  constructor(data) {
+    this.data = data;
+    this.widthOfSlide = 1280;
+    this.transform = 0;
+    this.currentIndex = 0;
+  }
+
+  async getHeroImg() {
+    const fetchedData = await this.data;
+    return fetchedData;
+  }
+}

src/js/View/Hero/HeroBtnView.js

@@ -0,0 +1,21 @@
+import { $ } from '../../utils.js';
+
+export class HeroBtnView {
+  constructor(data) {
+    this.data = data;
+    this.render();
+  }
+
+  getTemplate(heroImgs) {
+    return heroImgs.btn.map(
+      btn => `
+        <button class="${btn.class}"><img id="${btn.id}" src="${btn.src}" alt=""></button>
+      `
+    )
+    .join('');
+  }
+
+  render() {
+    $('.hero-section').insertAdjacentHTML('beforeend', this.getTemplate(this.data));
+  }
+}

src/js/View/Hero/HeroSectionView.js

@@ -0,0 +1,9 @@
+import { Component } from '../../Core/Component.js';
+
+export class HeroSectionView extends Component {
+  getTemplate() {
+    return `
+      <div class="hero-section">
+      </div>`;
+  }
+}

src/js/View/Hero/HeroSliderView.js

@@ -0,0 +1,24 @@
+import { $ } from '../../utils.js';
+
+export class HeroSliderView {
+  constructor(data) {
+    this.data = data;
+    this.render();
+  }
+
+  getTemplate(heroImgs) {
+    return `
+      <ul class="hero-slider">
+        ${heroImgs.slider
+          .map(
+            src => `<li><img src="${src}" alt=""></li>`
+          )
+          .join('')}
+      </ul>
+    `;
+  }
+
+  render() {
+    $('.hero-section').insertAdjacentHTML('beforeend', this.getTemplate(this.data));
+  }
+}

src/js/View/Modal/ExtendedLoginModal.js

@@ -1,4 +1,4 @@
-import { $ } from '../../Utils.js';
+import { $ } from '../../utils.js';
 import { Component } from '../../Core/Component.js';
 
 export class ExtendedLoginModalView extends Component {

src/js/View/Modal/LocationModal.js

@@ -1,4 +1,4 @@
-import { $ } from '../../Utils.js';
+import { $ } from '../../utils.js';
 import { Component } from '../../Core/Component.js';
 
 export class LocationModalView extends Component {

src/js/View/Modal/LoginModal.js

@@ -1,4 +1,4 @@
-import { $ } from '../../Utils.js';
+import { $ } from '../../utils.js';
 import { Component } from '../../Core/Component.js';
 
 export class LoginModalView extends Component {

src/js/View/SearchBar/HistoryView.js

@@ -1,4 +1,4 @@
-import { $ } from '../../Utils.js';
+import { $ } from '../../utils.js';
 
 export class HistoryView {
   constructor(data) {
@@ -7,7 +7,7 @@ export class HistoryView {
   }
 
   getTemplate(history) {
-    if (history === []) return;
+    if (history.length > 0) return;
     return `
       ${history
         .map(

src/js/View/SearchBar/RecommendView.js

@@ -1,4 +1,4 @@
-import { $ } from '../../Utils.js';
+import { $ } from '../../utils.js';
 
 export class RecommendView {
   constructor(data) {

src/js/View/SearchBar/SearchBarView.js

@@ -1,5 +1,5 @@
 import { Component } from '../../Core/Component.js';
-import { $, addDimmed, removeDimmed, addHiddenClass, removeHiddenClass } from '../../Utils.js';
+import { $, addDimmed, removeDimmed, addHiddenClass, removeHiddenClass } from '../../utils.js';
 
 export class SearchBarView extends Component {
   getTemplate() {

src/js/View/Sidebar/SidebarView.js

@@ -58,6 +58,7 @@ export class SidebarView {
 
   render(state) {
     const template = this.getTemplate(state);
+    // @ts-ignore
     this.sidebarContents.innerHTML = template;
   }
 

src/js/components/NavBar/NavMain/Searchbar.js

@@ -1,4 +1,4 @@
-import { Component } from '../../../core/Component.js';
+import { Component } from '../../../Core/Component.js';
 import { $, addDimmed, addHiddenClass, removeHiddenClass } from '../../../utils.js';
 
 export class Searchbar extends Component {

src/style/scss/components/_hero.scss

@@ -6,7 +6,7 @@
 
 .hero-slider {
   display: flex;
-  transition: 0.5s;
+  transition: transform 0.5s;
   li {
     width: 100%;
   }
@@ -26,10 +26,13 @@
   border: none;
   background: none;
   top: 0px;
-  > img {
-    width: 24px;
-    height: 40px;
-  }
+}
+
+.hero-btn:hover {
+    border-radius: 5px;
+    border: 1px solid $color-black;
+    box-shadow: 0 0 0 1px $color-white inset;
+    cursor: pointer;
 }
 
 .prev {