From 4d7a9cdfd3f9af23c709463eb1e41b4080fd3fa6 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Mon, 8 May 2023 14:55:34 +0900 Subject: [PATCH 1/8] test --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index 323b978c..8ffcd8fc 100644 --- a/readme.md +++ b/readme.md @@ -68,3 +68,5 @@ - [자바스크립트 자동 슬라이드 구현](https://devinus.tistory.com/48) - [무한루프 이미지 슬라이드](https://velog.io/@sweet_pumpkin/Megabyte-School-무한으로-즐기는-슬라이드-만들기-무한루프자동변환) + +test From 90b67653570e3ee66d64ee50305f4433ee5b0de2 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Mon, 8 May 2023 17:22:38 +0900 Subject: [PATCH 2/8] =?UTF-8?q?docs:=20=ED=8E=98=EC=96=B4=ED=94=84?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EB=9E=98=EB=B0=8D=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20To=20Do=20List=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 페어 프로그래밍을 위한 To Do List 를 업데이트 한 --- readme.md | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 8ffcd8fc..699405e3 100644 --- a/readme.md +++ b/readme.md @@ -62,11 +62,45 @@
- *** + --- + + ## 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에서 렌더링 ### 참고 - [자바스크립트 자동 슬라이드 구현](https://devinus.tistory.com/48) - [무한루프 이미지 슬라이드](https://velog.io/@sweet_pumpkin/Megabyte-School-무한으로-즐기는-슬라이드-만들기-무한루프자동변환) - -test From b07e62de6cd272b3127c97cc3d77c01dacb80fe2 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Tue, 9 May 2023 17:22:35 +0900 Subject: [PATCH 3/8] =?UTF-8?q?build:=20json=20server=EB=A5=BC=20=EC=8B=A4?= =?UTF-8?q?=ED=96=89=ED=95=98=EB=8A=94=20=EC=8A=A4=ED=81=AC=EB=A6=BD?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 제이슨 서버를 npm으로 관리하는 스크립트를 추가한다 --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7b6528bc..b1234356 100644 --- a/package.json +++ b/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", From a8681121a6e6e3035c992402a9fa2b17d176c255 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Tue, 9 May 2023 17:48:19 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=88=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=EC=A3=BC=EC=86=8C=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit util과 css 파일의 링크 주소에 오류가 있던 것을 수정한다 --- index.html | 2 +- src/js/View/SearchBar/RecommendView.js | 2 +- src/js/View/Sidebar/SidebarView.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 56284e9d..46108d38 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css" /> - + Amazon.com diff --git a/src/js/View/SearchBar/RecommendView.js b/src/js/View/SearchBar/RecommendView.js index 8b6fd0be..ebfe8758 100644 --- a/src/js/View/SearchBar/RecommendView.js +++ b/src/js/View/SearchBar/RecommendView.js @@ -1,4 +1,4 @@ -import { $ } from '../../Utils.js'; +import { $ } from '../../utils.js'; export class RecommendView { constructor(data) { diff --git a/src/js/View/Sidebar/SidebarView.js b/src/js/View/Sidebar/SidebarView.js index 87ddb6af..6298d4fa 100644 --- a/src/js/View/Sidebar/SidebarView.js +++ b/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; } From 2735232920609ba307ef77c3e870afd747df0128 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Tue, 9 May 2023 17:49:50 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=ED=9E=88=EC=96=B4=EB=A1=9C=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20json=20server=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EB=B0=8F=20mvc=20=ED=8C=A8=ED=84=B4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 히어로 영역을 컴포넌트화시키고 json server와 mvc 패턴을 적용한다 --- server/db.json | 23 +++++++++++++++++++++ src/js/Controller/HeroSectionController.js | 17 +++++++++++++++ src/js/Data.js | 6 ++++++ src/js/Main.js | 9 +++++++- src/js/Model/HeroSectionModel.js | 10 +++++++++ src/js/View/Hero/HeroBtnView.js | 21 +++++++++++++++++++ src/js/View/Hero/HeroSectionView.js | 9 ++++++++ src/js/View/Hero/HeroSliderView.js | 24 ++++++++++++++++++++++ 8 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 src/js/Controller/HeroSectionController.js create mode 100644 src/js/Model/HeroSectionModel.js create mode 100644 src/js/View/Hero/HeroBtnView.js create mode 100644 src/js/View/Hero/HeroSectionView.js create mode 100644 src/js/View/Hero/HeroSliderView.js diff --git a/server/db.json b/server/db.json index 1d0c63aa..c169b5e1 100644 --- a/server/db.json +++ b/server/db.json @@ -56,6 +56,29 @@ } ], + "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", + "src": "./src/asset/icons/prev-img.svg" + }, + { + "class": "hero-btn next", + "src": "./src/asset/icons/next-img.svg" + } + ] + } + , + "MainContents": [ { "type": "login", diff --git a/src/js/Controller/HeroSectionController.js b/src/js/Controller/HeroSectionController.js new file mode 100644 index 00000000..c29ec33a --- /dev/null +++ b/src/js/Controller/HeroSectionController.js @@ -0,0 +1,17 @@ +// import { $ } from '../Utils.js'; +import { HeroSliderView } from '../View/Hero/HeroSliderView.js'; +import { HeroBtnView } from '../View/Hero/HeroBtnView.js'; + +export class HeroSectionController { + constructor(model, view) { + this.model = model; + this.view = view; + + this.initHeroSlider(); + } + + async initHeroSlider() { + new HeroSliderView(await this.model.getHeroImg()); + new HeroBtnView(await this.model.getHeroImg()); + } +} diff --git a/src/js/Data.js b/src/js/Data.js index 2eb2a70b..eb4d8a3f 100644 --- a/src/js/Data.js +++ b/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; + } } diff --git a/src/js/Main.js b/src/js/Main.js index 947b1eaa..16715518 100644 --- a/src/js/Main.js +++ b/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) } } diff --git a/src/js/Model/HeroSectionModel.js b/src/js/Model/HeroSectionModel.js new file mode 100644 index 00000000..835febca --- /dev/null +++ b/src/js/Model/HeroSectionModel.js @@ -0,0 +1,10 @@ +export class HeroSectionModel { + constructor(data) { + this.data = data; + } + + async getHeroImg() { + const fetchedData = await this.data; + return fetchedData; + } +} diff --git a/src/js/View/Hero/HeroBtnView.js b/src/js/View/Hero/HeroBtnView.js new file mode 100644 index 00000000..215eb1b6 --- /dev/null +++ b/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 => ` + + ` + ) + .join(''); + } + + render() { + $('.hero-section').insertAdjacentHTML('beforeend', this.getTemplate(this.data)); + } +} diff --git a/src/js/View/Hero/HeroSectionView.js b/src/js/View/Hero/HeroSectionView.js new file mode 100644 index 00000000..8cd2b611 --- /dev/null +++ b/src/js/View/Hero/HeroSectionView.js @@ -0,0 +1,9 @@ +import { Component } from '../../Core/Component.js'; + +export class HeroSectionView extends Component { + getTemplate() { + return ` +
+
`; + } +} diff --git a/src/js/View/Hero/HeroSliderView.js b/src/js/View/Hero/HeroSliderView.js new file mode 100644 index 00000000..9c6f34c6 --- /dev/null +++ b/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 ` +
    + ${heroImgs.slider + .map( + src => `
    • ` + ) + .join('')} +
+ `; + } + + render() { + $('.hero-section').insertAdjacentHTML('beforeend', this.getTemplate(this.data)); + } +} From b06babd363a3352239f359f6714393db9e7c7d45 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Tue, 9 May 2023 18:16:49 +0900 Subject: [PATCH 6/8] =?UTF-8?q?style:=20=ED=9E=88=EC=96=B4=EB=A1=9C=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 히어로 영역 버튼 요소에 호버시 테두리 등 스타일을 추가 한다 --- .gitignore | 1 + src/style/scss/components/_hero.scss | 11 +++++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 5044f525..c3987899 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,5 @@ dist-ssr *.sw? # css +*.css .map \ No newline at end of file diff --git a/src/style/scss/components/_hero.scss b/src/style/scss/components/_hero.scss index 73bf5b39..77f1efc5 100644 --- a/src/style/scss/components/_hero.scss +++ b/src/style/scss/components/_hero.scss @@ -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 { From 034695942874f332d6a1274d98adc86a06dbb357 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Tue, 9 May 2023 18:33:49 +0900 Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=88=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20ts=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모듈의 경로의 대소문자로 인해 발생한 ts 오류를 해결한다 --- src/js/Controller/ExtendedLoginModalController.js | 2 +- src/js/Controller/LocationModalController.js | 2 +- src/js/Controller/SearchBarController.js | 2 +- src/js/View/Modal/ExtendedLoginModal.js | 2 +- src/js/View/Modal/LocationModal.js | 2 +- src/js/View/Modal/LoginModal.js | 2 +- src/js/View/SearchBar/HistoryView.js | 4 ++-- src/js/View/SearchBar/SearchBarView.js | 2 +- src/js/components/NavBar/NavMain/Searchbar.js | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/js/Controller/ExtendedLoginModalController.js b/src/js/Controller/ExtendedLoginModalController.js index 8eef790e..36fc783f 100644 --- a/src/js/Controller/ExtendedLoginModalController.js +++ b/src/js/Controller/ExtendedLoginModalController.js @@ -1,4 +1,4 @@ -import { $ } from '../Utils.js'; +import { $ } from '../utils.js'; export class ExtendedLoginModalController { constructor(model, view) { diff --git a/src/js/Controller/LocationModalController.js b/src/js/Controller/LocationModalController.js index d4a7ca7c..d354e6b5 100644 --- a/src/js/Controller/LocationModalController.js +++ b/src/js/Controller/LocationModalController.js @@ -1,4 +1,4 @@ -import { $ } from '../Utils.js'; +import { $ } from '../utils.js'; export class LocationModalController { constructor(model, view) { diff --git a/src/js/Controller/SearchBarController.js b/src/js/Controller/SearchBarController.js index 6893931c..4aba27c0 100644 --- a/src/js/Controller/SearchBarController.js +++ b/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'; diff --git a/src/js/View/Modal/ExtendedLoginModal.js b/src/js/View/Modal/ExtendedLoginModal.js index 60e80786..d03ff875 100644 --- a/src/js/View/Modal/ExtendedLoginModal.js +++ b/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 { diff --git a/src/js/View/Modal/LocationModal.js b/src/js/View/Modal/LocationModal.js index af9f0f29..b5b31377 100644 --- a/src/js/View/Modal/LocationModal.js +++ b/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 { diff --git a/src/js/View/Modal/LoginModal.js b/src/js/View/Modal/LoginModal.js index 5e7e768c..1a679d60 100644 --- a/src/js/View/Modal/LoginModal.js +++ b/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 { diff --git a/src/js/View/SearchBar/HistoryView.js b/src/js/View/SearchBar/HistoryView.js index eda3b3bd..16137f14 100644 --- a/src/js/View/SearchBar/HistoryView.js +++ b/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( diff --git a/src/js/View/SearchBar/SearchBarView.js b/src/js/View/SearchBar/SearchBarView.js index ab409d9d..8d7edb0b 100644 --- a/src/js/View/SearchBar/SearchBarView.js +++ b/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() { diff --git a/src/js/components/NavBar/NavMain/Searchbar.js b/src/js/components/NavBar/NavMain/Searchbar.js index 250baacf..fcf1e9c1 100644 --- a/src/js/components/NavBar/NavMain/Searchbar.js +++ b/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 { From 67b51d432f2e591938e50133c26df7a55fe3a3e6 Mon Sep 17 00:00:00 2001 From: aaaz425 Date: Wed, 10 May 2023 11:38:47 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=ED=9E=88=EC=96=B4=EB=A1=9C=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 히어로 영역의 버튼을 클릭했을 때 슬라이드가 좌우로 넘어가는 이벤트를 추가한다 --- server/db.json | 2 + src/js/Controller/HeroSectionController.js | 53 +++++++++++++++++++++- src/js/Model/HeroSectionModel.js | 3 ++ src/js/View/Hero/HeroBtnView.js | 2 +- src/style/scss/components/_hero.scss | 2 +- 5 files changed, 59 insertions(+), 3 deletions(-) diff --git a/server/db.json b/server/db.json index c169b5e1..312953e1 100644 --- a/server/db.json +++ b/server/db.json @@ -69,10 +69,12 @@ "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" } ] diff --git a/src/js/Controller/HeroSectionController.js b/src/js/Controller/HeroSectionController.js index c29ec33a..f27252cd 100644 --- a/src/js/Controller/HeroSectionController.js +++ b/src/js/Controller/HeroSectionController.js @@ -1,17 +1,68 @@ -// import { $ } from '../Utils.js'; 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)`; } } diff --git a/src/js/Model/HeroSectionModel.js b/src/js/Model/HeroSectionModel.js index 835febca..66ae7d51 100644 --- a/src/js/Model/HeroSectionModel.js +++ b/src/js/Model/HeroSectionModel.js @@ -1,6 +1,9 @@ export class HeroSectionModel { constructor(data) { this.data = data; + this.widthOfSlide = 1280; + this.transform = 0; + this.currentIndex = 0; } async getHeroImg() { diff --git a/src/js/View/Hero/HeroBtnView.js b/src/js/View/Hero/HeroBtnView.js index 215eb1b6..00a05334 100644 --- a/src/js/View/Hero/HeroBtnView.js +++ b/src/js/View/Hero/HeroBtnView.js @@ -9,7 +9,7 @@ export class HeroBtnView { getTemplate(heroImgs) { return heroImgs.btn.map( btn => ` - + ` ) .join(''); diff --git a/src/style/scss/components/_hero.scss b/src/style/scss/components/_hero.scss index 77f1efc5..9b9e9003 100644 --- a/src/style/scss/components/_hero.scss +++ b/src/style/scss/components/_hero.scss @@ -6,7 +6,7 @@ .hero-slider { display: flex; - transition: 0.5s; + transition: transform 0.5s; li { width: 100%; }