diff --git a/public/css/css.css b/public/css/css.css index 0726998..b8ccddf 100644 --- a/public/css/css.css +++ b/public/css/css.css @@ -229,16 +229,45 @@ img { } .nav-item { + display: flex; + align-items: center; + justify-content: center; flex: auto; padding: 1.5rem 0; text-align: center; - border-bottom: 2px solid transparent; + border-bottom: transparent; } -.nav-item[data-selected='true'] { +.nav[data-nav-type="1"], +.nav[data-nav-type="2"] { + border-bottom: 1px solid #eee; +} + +.nav[data-nav-type="1"] .nav-item[data-selected="true"], +.nav[data-nav-type="2"] .nav-item[data-selected="true"] { border-bottom: 2px solid #FFD500; } +.nav[data-nav-type="4"] .nav-item { + padding: 1rem 0; +} + +.nav[data-nav-type="4"] .nav-item > div { + width: 2.5rem; + height: 2.5rem; + border-radius: 50em; +} + +.nav[data-nav-type="4"] .nav-item[data-selected="true"] > div { + background: #FFD500; +} + +.nav[data-nav-type="2"] .nav-item[data-selected="false"], +.nav[data-nav-type="3"] .nav-item[data-selected="false"], +.nav[data-nav-type="4"] .nav-item[data-selected="false"] { + color: #999; +} + .box { background-color: #FFF; border-bottom: 1px solid #E6E6E6; @@ -259,7 +288,80 @@ img { } .carousel { - + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} + +.carousel-item { + display: none; + position: relative; + float: left; + width: 100%; + margin-left: -100%; +} + +.carousel-item { + display: none; +} + +.carousel-item.prev, +.carousel-item.active, +.carousel-item.next { + display: block; +} + +/* carousel transition */ +.carousel-item { + transition: transform 0.3s ease-in-out; + transform: translateX(0%); +} +.carousel-item.active:not(.reverse) { + transition: transform 0.3s ease-in-out; + transform: translateX(100%); +} +.carousel-item.next:not(.reverse) { + transition: none; + transform: translateX(200%); +} + +/* carousel transition (reverse) */ +.carousel-item.prev.reverse { + transition: none; + transform: translateX(0%); +} +.carousel-item.active.reverse { + transition: transform 0.3s ease-in-out; + transform: translateX(100%); +} +.carousel-item.next.reverse { + transition: transform 0.3s ease-in-out; + transform: translateX(200%); +} + +.carousel-button-prev { + left: 1rem; +} +.carousel-button-next { + right: 1rem; +} +.carousel-button-prev, +.carousel-button-next { + width: 2rem; + height: 2rem; + margin: auto 0rem; + position: absolute; + border-radius: 50rem; + border: 1px solid #fff; + background-color: #0003; + color: #fff; } .quicklink { diff --git a/public/img/carousel.png b/public/img/carousel_1.png similarity index 100% rename from public/img/carousel.png rename to public/img/carousel_1.png diff --git a/public/img/carousel_2.png b/public/img/carousel_2.png new file mode 100644 index 0000000..6838dc2 Binary files /dev/null and b/public/img/carousel_2.png differ diff --git a/public/js/js.js b/public/js/js.js index 872f79a..055ee62 100644 --- a/public/js/js.js +++ b/public/js/js.js @@ -28,7 +28,7 @@ function show(str) { }) } -function hideOne(str) { +function showOne(str) { findOne(str).classList.remove('d-none') } @@ -48,7 +48,7 @@ function initNavItems() { } function clickNavItem(e) { - selectNavItem(e.target) + selectNavItem(e.currentTarget) } function selectNavItem(navItem) { @@ -69,10 +69,91 @@ function selectNavItem(navItem) { show(navItem.dataset.target) } +/* + + carousel + +*/ + +function initCarousel() { + find('.carousel').forEach(element => { + const carouselId = element.getAttribute('id') + const items = find(`#${carouselId} .carousel-item`) + const carouselInfo = { + index: 0, + items: items, + nItems: items.length, + isOnTransition: false, + } + + // add click event listener to prev button + findOne(`#${carouselId} .carousel-button-prev`) + .addEventListener('click', () => showNextCarouselItem(carouselInfo, true)) + + // add click event listener to next button + findOne(`#${carouselId} .carousel-button-next`) + .addEventListener('click', () => showNextCarouselItem(carouselInfo)) + + // show first item + showNextCarouselItem(carouselInfo) + + // set interval event + setInterval(() => showNextCarouselItem(carouselInfo), 5000) + }) +} + +function showNextCarouselItem(carouselInfo, isReversed = false) { + const { items, nItems, isOnTransition } = carouselInfo + let { index } = carouselInfo + + // prevent duplicated transition + if (isOnTransition) return + carouselInfo.isOnTransition = true + + // set index + if (isReversed) + index-- + else + index++ + index = (index + nItems) % nItems + carouselInfo.index = index + + // find items to transit + const prevItem = items[(index - 1 + nItems) % nItems] + const nowItem = items[index] + const nextItem = items[(index + 1) % nItems] + + // remove all prev/active/next classes + items.forEach(item => { + item.classList.remove('prev') + item.classList.remove('active') + item.classList.remove('next') + item.classList.remove('reverse') + }) + + // add prev/active/next class + prevItem.classList.add('prev') + nowItem.classList.add('active') + nextItem.classList.add('next') + + // add reverse class + if (isReversed) { + prevItem.classList.add('reverse') + nowItem.classList.add('reverse') + nextItem.classList.add('reverse') + } + + // end of transition + setTimeout(() => { + carouselInfo.isOnTransition = false + }, 300) +} + /* init */ -initNavItems() \ No newline at end of file +initNavItems() +initCarousel() \ No newline at end of file diff --git a/views/_webtoon.ejs b/views/_webtoon.ejs index 7b12cdd..6666a48 100644 --- a/views/_webtoon.ejs +++ b/views/_webtoon.ejs @@ -9,7 +9,7 @@ type: 'nav', data: { navTitle: 'nav_webtoon', - navType: 2, + navType: 3, navList: [ { text: '홈', target: '#section_webtoon_home', selected: true }, { text: '요일연재', target: '#section_webtoon_daily', selected: false }, @@ -40,7 +40,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_home_main' + } } ] } @@ -80,158 +82,102 @@ navTitle: 'nav_webtoon_home_daily_top', navType: 2, navList: [ - { text: '월', target: '#section_webtoon_home_daily_top_mon', selected: true }, - { text: '화', target: '#section_webtoon_home_daily_top_tue', selected: false }, - { text: '수', target: '#section_webtoon_home_daily_top_wed', selected: false }, - { text: '목', target: '#section_webtoon_home_daily_top_thu', selected: false }, - { text: '금', target: '#section_webtoon_home_daily_top_fri', selected: false }, - { text: '토', target: '#section_webtoon_home_daily_top_sat', selected: false }, - { text: '일', target: '#section_webtoon_home_daily_top_sun', selected: false }, - { text: '완결', target: '#section_webtoon_home_daily_top_end', selected: false }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_mon', - cards: [ - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_tue', - cards: [ - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '1위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '3위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '4위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.9' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '10.0' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.4' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.7' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '8.5' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_wed', - cards: [ - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '1위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '2위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '4위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '5위' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_thu', - cards: [ - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위' }, + { text: '월', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_mon', selected: true }, + { text: '화', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_tue', selected: false }, + { text: '수', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_wed', selected: false }, + { text: '목', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_thu', selected: false }, + { text: '금', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_fri', selected: false }, + { text: '토', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_sat', selected: false }, + { text: '일', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_sun', selected: false }, + { text: '완결', target: '#cardbox_webtoon_home_daily_top .webtoon_daily_end', selected: false }, ] } }, { type: 'cardbox', data: { - id: 'section_webtoon_home_daily_top_fri', + id: 'cardbox_webtoon_home_daily_top', cards: [ - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '1위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '3위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '4위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_sat', - cards: [ - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '1위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '2위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '4위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '5위' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_sun', - cards: [ - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위' }, - ] - } - }, - { - type: 'cardbox', - data: { - id: 'section_webtoon_home_daily_top_end', - cards: [ - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', rating: '9.9' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', rating: '9.8' }, - { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '10.0' }, - { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', rating: '9.8' }, - { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', rating: '9.6' }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위', days: ['mon'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위', days: ['mon'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '1위', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '3위', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '4위', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.9', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '10.0', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.4', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '9.7', days: ['tue'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '8.5', days: ['tue'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '1위', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '2위', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '4위', days: ['wed'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '5위', days: ['wed'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위', days: ['thu'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위', days: ['thu'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: 'TOP', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '1위', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '3위', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '4위', days: ['fri'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위', days: ['fri'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: 'TOP', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '1위', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '2위', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '4위', days: ['sat'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '5위', days: ['sat'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: 'TOP', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '2위', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '3위', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '5위', days: ['sun'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '1위', days: ['end'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '2위', days: ['end'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', top: '3위', days: ['end'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', top: '4위', days: ['end'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', top: '5위', days: ['end'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', rating: '9.9', days: ['end'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', rating: '9.8', days: ['end'] }, + { cardType: 1, img: 'card1_2.png', title: '롱리브더킹', view: '236.7', rating: '10.0', days: ['end'] }, + { cardType: 1, img: 'card1_3.png', title: '도깨비 아빠', view: '13.3', rating: '9.8', days: ['end'] }, + { cardType: 1, img: 'card1_1.png', title: '지구의 주인은 고양이다', view: '38.4', rating: '9.6', days: ['end'] }, ] } }, @@ -400,7 +346,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_home_recommend' + } } ] } @@ -422,7 +370,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_daily_main' + } } ] } @@ -430,6 +380,7 @@ { type: 'box', data: { + noPadding: true, components: [ { type: 'nav', @@ -447,19 +398,36 @@ { text: '완결', target: '#cardbox_webtoon_daily_main .webtoon_daily_end', selected: false }, ] } - }, + } + ] + } + }, + { + type: 'box', + data: { + noPadding: true, + noMargin: true, + components: [ { type: 'nav', data: { navTitle: 'nav_webtoon_daily_type', - navType: 4, + navType: 3, navList: [ { text: '전체', target: '#cardbox_webtoon_daily_main .card', selected: true }, { text: '웹툰', target: '#cardbox_webtoon_daily_main .card[data-webtoon-type="webtoon"]', selected: false }, { text: '(시계)웹툰', target: '#cardbox_webtoon_daily_main .card[data-webtoon-type="time"]', selected: false }, ] } - }, + } + ] + } + }, + { + type: 'box', + data: { + noMargin: true, + components: [ { type: 'cardbox', data: { @@ -519,7 +487,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_webtoon_main' + } } ] } @@ -527,6 +497,7 @@ { type: 'box', data: { + noPadding: true, components: [ { type: 'nav', @@ -544,7 +515,15 @@ { text: '전체', target: '#cardbox_webtoon_webtoon_main .card', selected: false }, ] } - }, + } + ] + } + }, + { + type: 'box', + data: { + noMargin: true, + components: [ { type: 'cardbox', data: { @@ -599,7 +578,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_boy_main' + } } ] } @@ -621,7 +602,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_drama_main' + } } ] } @@ -643,7 +626,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_romance_main' + } } ] } @@ -665,7 +650,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_rofan_main' + } } ] } @@ -687,7 +674,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_action_main' + } } ] } @@ -709,7 +698,9 @@ components: [ { type: 'carousel', - data: {} + data: { + id: 'carousel_webtoon_blgl_main' + } } ] } diff --git a/views/component/_box.ejs b/views/component/_box.ejs index c52dc16..cf158f2 100644 --- a/views/component/_box.ejs +++ b/views/component/_box.ejs @@ -4,11 +4,23 @@ title: string or undefined titleCount: integer or undefined noPadding: true or undefined + noMargin: true or undefined components: array of _ } --> -
+<% +let boxStyle = '' + +if (typeof noPadding !== 'undefined') { + boxStyle += ' p-0' +} + +if (typeof noMargin !== 'undefined') { + boxStyle += ' m-0' +} +%> +
<% if (typeof title !== 'undefined') { %>
diff --git a/views/component/_carousel.ejs b/views/component/_carousel.ejs index e06f875..b7f6d78 100644 --- a/views/component/_carousel.ejs +++ b/views/component/_carousel.ejs @@ -1,9 +1,24 @@ -
- carousel + + + \ No newline at end of file diff --git a/views/component/_nav.ejs b/views/component/_nav.ejs index 4619c6d..8f9eb26 100644 --- a/views/component/_nav.ejs +++ b/views/component/_nav.ejs @@ -15,12 +15,14 @@ ] } --> -