2023.10.26 / Step 7 [DOM_market]

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

라라리라

2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차 본문

코딩/2023 JavaScript DOM

2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차

헤실 2023. 10. 26. 17:56

_cartInfo.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#cartTable {

margin: 0 auto;

width: 1050px;

}

.check_box input[type='checkbox'] + label{

display: inline-block;

cursor: pointer;

}

.check_box input[type='checkbox'] + label::before{

display: inline-block;

content: "";

width: 24px;

height: 24px;

background: url(./img/check-off.png) no-repeat;

background-size: 24px;

vertical-align: top;

margin: -4px 5px 0 0;

}

.check_box input[type='checkbox']:checked + label::before{

width: 24px;

height: 24px;

background: url(./img/check-on.png) no-repeat;

background-size: 24px;

}

.check_box input[type='checkbox']{

position: absolute;

overflow: hidden;

width: 1px;

height: 1px;

margin: -1px;

opacity: 0;

}

.cart-header {

text-align: center;

height: 240px;

}

.cart-sub1 {

text-align: center;

width: 50px;

height: 50px;

}

.cart-sub2 {

width: 180px;

}

#cartListTable {

margin: 0 auto;

width: 1050px;

}

.item-img {

width: 60px;

}

.minus, .plus {

display: inline-block;

border: 1px solid lightgray;

border-radius: 3px;

text-align: center;

width: 30px;

height: 30px;

font-size: 20px;

}

.cartList-sub1 {

text-align: center;

width: 50px;

height: 50px;

}

.cartList-sub3 {

font-size: 16px;

font-weight: bold;

color: #333333;

}

.cartList-sub4 {

text-align: center;

}

.cartList-sub5 {

font-size: 16px;

font-weight: bold;

color: #333333;

text-align: center;

}

.cartList-sub6 {

width: 25px;

text-align: center;

}

#cartResultTable {

margin: 0 auto;

height: 300px;

width: 1050px;

color: #333333;

}

.cartResult-sub {

width: 700px;

}

.cartResult-sub2 {

text-align: right;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</div>

</td>

전체선택 (

)

</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

<tr>

</div>

</td>

<td class="cartList-sub3">[비움반찬] 양배추찜&우렁강된장</td>

</td>

5,800원

</td>

</td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="cartResult-sub1">상품할인금액</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="cartResult-sub1">결제예정금액</td>

</tr>

</table>

</body>

</html>

_index.html

<!DOCTYPE html>

<head>

<title>_index.html</title>

<style>

a {

text-decoration: none;

color: #333333;

}

a:hover {

color: #5F0080;

}

table, tr, td {

border: 1px solid #333333;

border-collapse: collapse;

}

/* header1 */

#headerTable1 {

width: 1050px;

height: 37px;

margin: 0 auto;

text-align: center;

font-size: 13px;

}

.header1-space {

width: 850px;

margin: 0 auto;

text-align: center;

}

.header1-menu {

width: 60px;

}

/* header2 */

#headerTable2 {

width: 1050px;

height: 63px;

margin: 0 auto;

text-align: center;

}

.header2-img {

text-align: left;

}

.header2-logo a {

font-size: 18px;

font-weight: bold;

color: #5F0080;

}

.header2-search {

width: 700px;

}

.header2-input {

width: 300px;

height: 18.39px;

font-size: 16px;

border: none;

}

.header2-img {

width: 50px;

text-align: center;

}

#searchTable {

width: 400px;

height: 48px;

/* table안의 table 중앙정렬 */

margin-left: auto;

margin-right: auto;

/* table 모서리 둥글게 */

border-collapse: separate;

border-radius: 5px;

border: 1px solid #5F0080;

}

/* header3 */

#headerTable3 {

width: 1050px;

height: 56px;

margin: 0 auto;

text-align: left;

font-size: 16px;

font-weight: bold;

}

.header3-menu {

width: 170px;

}

/* bannder */

#banner {

margin: 0 auto;

text-align: center;

}

#slide-img {

width: 1890px;

}

/* content */

#content {

width: 1050px;

height: 48px;

margin: 0 auto;

margin-top: 100px;

margin-bottom: 50px;

text-align: center;

font-size: 28px;

color: #333333;

font-weight: bold;

}

.content-img {

width: 250px;

}

.content-space1 {

height: 20px;

}

.content-space2 {

width: 10px;

}

.content-text {

text-align: left;

}

.content-text1 {

font-size: 16px;

color: #333333;

text-align: left;

vertical-align: top;

}

.content-text2 {

font-size: 16px;

color: #FA622F;

}

.content-text3 {

font-size: 16px;

color: #333333;

}

.content-text4 {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

text-align: left;

}

/* content-banner */

#content-banner {

margin: 0 auto;

margin-top: 100px;

margin-bottom: 100px;

}

#content-banner img {

width: 1050px;

}

/* line */

.line {

background-color: #CCCCCC;

border: 0;

height: 1px;

margin: 50px 0px;

}

/* footer */

#footer {

margin: 0 auto;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td align="right" style="width: 100px;"><a>새벽알뜰배송</a></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

놓치면 후회할 가격<img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="content-text1">[KF365] 국내산 손질오징어 2미<br>300g 내외 (냉장)</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

놓치면 후회할 가격<img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="content-text1">[KF365] 국내산 손질오징어 2미<br>300g 내외 (냉장)</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

let count = 1;

// 기본적인 슬라이드 루프 시작

let loopInterval = setInterval(() => {

nextMove(); // 다음 슬라이드를 보여주는 함수

}, 3000);

let nextMove = function() {

if(count < 5) {

count += 1;

} else {

count = 1;

}

document.querySelector("#slide-img").src = "./img/banner" + count + ".jpg";

}

</script>

</body>

</html>

_itemInfo.html

<!DOCTYPE html>

<head>

<title>_itemInfo.html</title>

<style>

a {

text-decoration: none;

color: #333333;

}

a:hover {

color: #5F0080;

}

table, tr, td {

/* border: 1px solid #333333; */

border-collapse: collapse;

}

/* header1 */

#headerTable1 {

width: 1050px;

height: 37px;

margin: 0 auto;

text-align: center;

font-size: 13px;

}

.header1-space {

width: 850px;

margin: 0 auto;

text-align: center;

}

.header1-menu {

width: 60px;

}

/* header2 */

#headerTable2 {

width: 1050px;

height: 63px;

margin: 0 auto;

text-align: center;

}

.header2-img {

text-align: left;

}

.header2-logo a {

font-size: 18px;

font-weight: bold;

color: #5F0080;

}

.header2-search {

width: 700px;

}

.header2-input {

width: 300px;

height: 18.39px;

font-size: 16px;

border: none;

}

.header2-img {

width: 50px;

text-align: center;

}

#searchTable {

width: 400px;

height: 48px;

/* table안의 table 중앙정렬 */

margin-left: auto;

margin-right: auto;

/* table 모서리 둥글게 */

border-collapse: separate;

border-radius: 5px;

border: 1px solid #5F0080;

}

/* header3 */

#headerTable3 {

width: 1050px;

height: 56px;

margin: 0 auto;

text-align: left;

font-size: 16px;

font-weight: bold;

}

.header3-menu {

width: 170px;

}

/* content */

#itemTable {

margin: 0 auto;

margin-top: 30px;

height: 500px;

}

#itemInfoTable {

width: 400px;

}

.itemImg {

height: 500px;

}

.itemNameTd {

height: 60px;

font-size: 24px;

}

.itemInfoTd {

font-size: 14px;

color: gray;

height: 40px;

}

.itemPriceTd {

height: 40px;

}

.itemPrice {

font-size: 28px;

font-weight: bold;

}

.itemCountTd {

height: 40px;

}

.minus, .plus {

display: inline-block;

border: 1px solid lightgray;

border-radius: 3px;

text-align: center;

width: 30px;

height: 30px;

font-size: 20px;

}

.itemCount {

display: inline-block;

width: 30px;

height: 30px;

text-align: center;

font-size: 20px;

}

.itemTotalTd {

text-align: right;

height: 40px;

}

.itemTotalText {

font-size: 13px;

}

.itemTotalNumber {

font-size: 32px;

font-weight: bold;

}

.itemCartTd {

height: 100px;

}

.cartBtn {

width: 400px;

height: 50px;

background: #5F0080;

border: 1px solid #5F0080;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

color: white;

}

.rowSpace {

height: 150px;

}

.colSpace {

width: 50px;

}

.bold-text {

font-size: 14px;

font-weight: bold;

}

.small-text {

font-size: 12px;

color: gray;

}

/* line */

.line {

background-color: #CCCCCC;

border: 0;

height: 1px;

margin: 50px 0px;

}

/* footer */

#footer {

margin: 0 auto;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td align="right" style="width: 100px;"><a>새벽알뜰배송</a></td>

</tr>

</table>

<tr>

</td>

<td>

<tr>

[빕스] 바베큐 폭립 오리지날 450g

</td>

</tr>

<tr>

집에서 즐기는 빕스의 대표 메뉴

</td>

</tr>

<tr>

<span class="itemPrice">15,800</span>원

</td>

</tr>

<tr>

<td>

(대구·부산·울산 샛별배송 운영시간 별도 확인)</span>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<span class="itemTotalText">총상품금액 : </span>

<span class="itemTotalNumber">15,800</span>원

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</tr>

</table>

</body>

</html>

_itemList.html

<!DOCTYPE html>

<head>

<title>_itemList.html</title>

<style>

a {

text-decoration: none;

color: #333333;

}

a:hover {

color: #5F0080;

}

table, tr, td {

/* border: 1px solid #333333; */

border-collapse: collapse;

}

/* header1 */

#headerTable1 {

width: 1050px;

height: 37px;

margin: 0 auto;

text-align: center;

font-size: 13px;

}

.header1-space {

width: 850px;

margin: 0 auto;

text-align: center;

}

.header1-menu {

width: 60px;

}

/* header2 */

#headerTable2 {

width: 1050px;

height: 63px;

margin: 0 auto;

text-align: center;

}

.header2-img {

text-align: left;

}

.header2-logo a {

font-size: 18px;

font-weight: bold;

color: #5F0080;

}

.header2-search {

width: 700px;

}

.header2-input {

width: 300px;

height: 18.39px;

font-size: 16px;

border: none;

}

.header2-img {

width: 50px;

text-align: center;

}

#searchTable {

width: 400px;

height: 48px;

/* table안의 table 중앙정렬 */

margin-left: auto;

margin-right: auto;

/* table 모서리 둥글게 */

border-collapse: separate;

border-radius: 5px;

border: 1px solid #5F0080;

}

/* header3 */

#headerTable3 {

width: 1050px;

height: 56px;

margin: 0 auto;

text-align: left;

font-size: 16px;

font-weight: bold;

}

.header3-menu {

width: 170px;

}

/* content */

#itemList {

width: 1050px;

height: 48px;

margin: 0 auto;

font-weight: bold;

}

.item-img {

width: 250px;

}

.itemList-space {

width: 25px;

}

.itemList-title {

height: 150px;

text-align: center;

font-size: 28px;

color: #333333;

font-weight: bold;

}

.itemList-count {

height: 50px;

text-align: right;

color: #333333;

font-weight: bold;

}

.itemList-text1 {

font-size: 16px;

color: #333333;

}

.itemList-text2 {

font-size: 16px;

color: #FA622F;

}

.itemList-text3 {

font-size: 16px;

color: #333333;

}

.itemList-text4 {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

text-align: left;

}

.itemList-text5 {

font-size: 12px;

color: #B5B5B5;

}

/* pageNation */

#pageNation {

cursor: pointer;

margin: 0 auto;

font-size: 14px;

font-weight: bold;

color: gray;

text-align: center;

margin-bottom: 100px;

}

.pageMove {

width: 30px;

height: 30px;

border: 1px solid lightgray;

}

/* line */

.line {

background-color: #CCCCCC;

border: 0;

height: 1px;

margin: 50px 0px;

}

/* footer */

#footer {

margin: 0 auto;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td align="right" style="width: 100px;"><a>새벽알뜰배송</a></td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="itemList-text1">[Picard] 관자 토마토 로즈마리</td>

<td class="itemList-text1">[Picard] 관자 토마토 로즈마리</td>

<td class="itemList-text1">[Picard] 관자 토마토 로즈마리</td>

<td class="itemList-text1">[Picard] 관자 토마토 로즈마리</td>

</tr>

<tr>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

</body>

</html>

_loginForm.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#loginTable {

margin: 0 auto;

}

.login-header {

color: #333333;

font-size: 20px;

font-weight: bold;

text-align: center;

height: 100px;

}

.login-input {

width: 340px;

height: 54px;

padding: 0px 11px 1px 15px;

border-style: none;

border: 1px solid #B5B5B5;

border-radius: 5px;

margin: 5px 0;

}

.login-sub {

font-size: 13px;

color: #333333;

text-align: right;

padding-bottom: 20px;

}

.login-td {

text-align: center;

height: 60px;

}

.login-btn {

border-style: none;

width: 370px;

height: 54px;

color: #FFFFFF;

font-size: 16px;

background-color: #5F0080;

border-radius: 5px;

font-weight: bold;

}

.join-btn {

border-style: none;

width: 370px;

height: 54px;

color: #5F0080;

font-size: 16px;

background-color: #FFFFFF;

border: 1px solid #5F0080;

border-radius: 5px;

font-weight: bold;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

controllerMain.js

import { PageHeader } from "./pageHeader.js";

import { PageIndex } from "./pageIndex.js";

import { PageFooter } from "./pageFooter.js";

import { PageItemInfo } from "./pageItemInfo.js";

import { PageItemList } from "./pageItemList.js";

import { PageLogin } from "./pageLogin.js";

import { PageCartInfo } from "./pageCartInfo.js";

export class ControllerMain {

static instance = new ControllerMain();

static getInstance() { return ControllerMain.instance; }

init() {

this.log = null;

this.pageList = {};

this.setPageList();

this.changePage("page-header", null);

this.changePage("page-index", null);

this.changePage("page-footer", null);

}

setPageList() {

this.pageList["page-header"] = new PageHeader();

this.pageList["page-index"] = new PageIndex();

this.pageList["page-footer"] = new PageFooter();

this.pageList["page-itemInfo"] = new PageItemInfo();

this.pageList["page-itemList"] = new PageItemList();

this.pageList["page-login"] = new PageLogin();

this.pageList["page-cartInfo"] = new PageCartInfo();

}

changePage(pageName, data) {

this.pageList[pageName].execute(data);

}

index.html

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

jsonCartList.js

import { ControllerMain } from "./controllerMain.js";

import { JsonItemList } from "./jsonItemList.js";

import { JsonMemberList } from "./jsonMemberList.js";

export class JsonCartList {

static instance = new JsonCartList();

static getInstance() { return JsonCartList.instance; }

init() {

this.cartList = null;

this.setCartSampleData();

}

setCartSampleData() {

this.cartList = [

{

cartNo: 1,

cartMemberNo: 3,

cartItemNo: 3,

cartItemCount: 2

{

cartNo: 2,

cartMemberNo: 1,

cartItemNo: 11,

cartItemCount: 1

{

cartNo: 3,

cartMemberNo: 2,

cartItemNo: 5,

cartItemCount: 3

{

cartNo: 4,

cartMemberNo: 3,

cartItemNo: 7,

cartItemCount: 5

{

cartNo: 5,

cartMemberNo: 2,

cartItemNo: 1,

cartItemCount: 21

{

cartNo: 6,

cartMemberNo: 3,

cartItemNo: 21,

cartItemCount: 5

{

cartNo: 7,

cartMemberNo: 3,

cartItemNo: 29,

cartItemCount: 1

];

}

/* 내 장바구니 */

getCartList() {

let id = ControllerMain.getInstance().log;

let no = JsonMemberList.getInstance().getMemberNo(id);

let myCartList = [];

for(let i=0; i<this.cartList.length; i++) {

let cart = this.cartList[i];

let index = JsonItemList.getInstance().getItemIndex(cart.cartItemNo);

let item = JsonItemList.getInstance().getItem(index);

let temp = {

itemCartNo: cart.cartNo,

itemImage: item.itemImage,

itemName: item.itemName,

itemCount: cart.cartItemCount,

itemPrice: item.itemPrice,

itemDiscount: item.itemDiscount

};

if(cart.cartMemberNo == no) {

myCartList.push(temp);

}

return myCartList;

}

/* 장바구니 마지막 번호 */

getLastCartNum() {

return this.cartList[this.cartList.length - 1].cartNo;

}

/* 장바구니 담기 */

addCart(cartData) {

this.cartList.push(cartData);

console.log(this.cartList);

}

/* 상품 한 개 삭제 */

deleteItem(itemCartNo) {

let index = 0;

for(let i=0; i<this.cartList.length; i++) {

if(itemCartNo == this.cartList[i].cartNo) {

index = i;

break;

}

this.cartList.splice(index, 1);

console.log(this.cartList);

}

jsonItemList.js

export class JsonItemList {

static instance = new JsonItemList();

static getInstance() { return JsonItemList.instance; }

init() {

this.itemList = null;

this.setItemSampleData();

}

setItemSampleData() {

this.itemList = [

{

itemNo: 1,

itemCategory: "채소",

itemName: "[KF365] 다다기오이 3입",

itemDiscount: 50,

itemPrice: 8580,

itemStock: 1,

itemImage: "1.jpg",

itemSold: 1,

itemInfo: "믿고 먹을 수 있는 상품을 합리적인 가격에, KF356",

{

itemNo: 2,

itemCategory: "채소",

itemName: "깐대파 500g",

itemDiscount: 0,

itemPrice: 3490,

itemStock: 2,

itemImage: "2.jpg",

itemSold: 2,

itemInfo: "최대혜택가 : 2,792원",

{

itemNo: 3,

itemCategory: "채소",

itemName: "영암 친환경 꿀고구마 2kg",

itemDiscount: 0,

itemPrice: 15200,

itemStock: 3,

itemImage: "3.jpg",

itemSold: 3,

itemInfo: "포실포실 달콤한 꿀고구마를 무농약으로 즐기세요",

{

itemNo: 4,

itemCategory: "채소",

itemName: "한통 양배추",

itemDiscount: 0,

itemPrice: 4990,

itemStock: 4,

itemImage: "4.jpg",

itemSold: 4,

itemInfo: "아삭한 잎에 깃든 달콤함",

{

itemNo: 5,

itemCategory: "채소",

itemName: "[KF365] 감자 1kg",

itemDiscount: 50,

itemPrice: 7980,

itemStock: 5,

itemImage: "5.jpg",

itemSold: 5,

itemInfo: "믿고 먹을 수 있는 상품을 합리적인 가격에, KF356",

{

itemNo: 6,

itemCategory: "채소",

itemName: "[KF365] 애호박 1개",

itemDiscount: 50,

itemPrice: 3980,

itemStock: 6,

itemImage: "6.jpg",

itemSold: 6,

itemInfo: "냉장고 속 단골 식재료",

{

itemNo: 7,

itemCategory: "채소",

itemName: "흙당근 1kg",

itemDiscount: 0,

itemPrice: 4890,

itemStock: 7,

itemImage: "7.jpg",

itemSold: 7,

itemInfo: "영양 가득 당근을 더 신선하게",

{

itemNo: 8,

itemCategory: "채소",

itemName: "[KF365] 파프리카 2입",

itemDiscount: 50,

itemPrice: 5980,

itemStock: 8,

itemImage: "8.jpg",

itemSold: 8,

itemInfo: "믿고 먹을 수 있는 상품을 합리적인 가격에, KF356",

{

itemNo: 9,

itemCategory: "채소",

itemName: "초당 옥수수(노랑이) 5입",

itemDiscount: 0,

itemPrice: 10900,

itemStock: 9,

itemImage: "9.jpg",

itemSold: 9,

itemInfo: "당도가 높고 아삭한 식감의 생옥수수",

{

itemNo: 10,

itemCategory: "채소",

itemName: "[KF365] 브로콜리 1입",

itemDiscount: 0,

itemPrice: 2990,

itemStock: 0,

itemImage: "10.jpg",

itemSold: 0,

itemInfo: "믿고 먹을 수 있는 상품을 합리적인 가격에, KF356",

{

itemNo: 11,

itemCategory: "해산물",

itemName: "[Picard] 관자 토마토 로즈마리",

itemDiscount: 0,

itemPrice: 28500,

itemStock: 1,

itemImage: "11.jpg",

itemSold: 1,

itemInfo: "요리에 활용하기 좋은 만능 관자",

{

itemNo: 12,

itemCategory: "해산물",

itemName: "[어보선] 솔방울오징어 600g",

itemDiscount: 0,

itemPrice: 7900,

itemStock: 2,

itemImage: "12.jpg",

itemSold: 2,

itemInfo: "모양도 예쁘고 식감도 좋은",

{

itemNo: 13,

itemCategory: "해산물",

itemName: "[어보선] 껍질벗긴 오징어링 20g",

itemDiscount: 0,

itemPrice: 7980,

itemStock: 3,

itemImage: "13.jpg",

itemSold: 3,

itemInfo: "맛과 멋이 살아있는 오징어",

{

itemNo: 14,

itemCategory: "해산물",

itemName: "[동해가문] 증숙한 피문어 350g",

itemDiscount: 0,

itemPrice: 27900,

itemStock: 4,

itemImage: "14.jpg",

itemSold: 4,

itemInfo: "해양심층수로 세척한 증숙 문어",

{

itemNo: 15,

itemCategory: "해산물",

itemName: "[대흥] 염장해파리 350g (냉장)",

itemDiscount: 0,

itemPrice: 5980,

itemStock: 5,

itemImage: "15.jpg",

itemSold: 5,

itemInfo: "꼬들꼬들한 식감이 매력적인",

{

itemNo: 16,

itemCategory: "해산물",

itemName: "[대흥] IQF 남해안 굴 500g (냉동)",

itemDiscount: 0,

itemPrice: 9400,

itemStock: 6,

itemImage: "16.jpg",

itemSold: 6,

itemInfo: "다양한 요리에 부담 없이 더하는 굴",

{

itemNo: 17,

itemCategory: "해산물",

itemName: "[만선] 비단 가리비 500g (생물)",

itemDiscount: 0,

itemPrice: 7500,

itemStock: 7,

itemImage: "17.jpg",

itemSold: 7,

itemInfo: "고운 빛깔과 부드러운 속살",

{

itemNo: 18,

itemCategory: "해산물",

itemName: "[플로리아] 통영 손질 꽃멍게 150g",

itemDiscount: 0,

itemPrice: 5980,

itemStock: 8,

itemImage: "18.jpg",

itemSold: 8,

itemInfo: "간편하게 누리는 바다 내음",

{

itemNo: 19,

itemCategory: "해산물",

itemName: "생성게알 60g",

itemDiscount: 0,

itemPrice: 18900,

itemStock: 9,

itemImage: "19.jpg",

itemSold: 9,

itemInfo: "제철 맞아 물오른",

{

itemNo: 20,

itemCategory: "해산물",

itemName: "[만선] 비단조개 500g (생물)",

itemDiscount: 0,

itemPrice: 6980,

itemStock: 0,

itemImage: "20.jpg",

itemSold: 0,

itemInfo: "뽀얗게 우러나는 달큰한 국물",

{

itemNo: 21,

itemCategory: "과일",

itemName: "[KF365] 당도선별 수박 6kg 이상",

itemDiscount: 0,

itemPrice: 20900,

itemStock: 1,

itemImage: "21.jpg",

itemSold: 1,

itemInfo: "수분가득 달콤한 제철 수박",

{

itemNo: 22,

itemCategory: "과일",

itemName: "[KF365] 유명산지 고당도사과 1.5kg",

itemDiscount: 0,

itemPrice: 21900,

itemStock: 2,

itemImage: "22.jpg",

itemSold: 2,

itemInfo: "아삭아삭 달콤한 제철과일",

{

itemNo: 23,

itemCategory: "과일",

itemName: "[KF365] 새콤달콤 제주 하우스 감귤 1.5kg",

itemDiscount: 15,

itemPrice: 19800,

itemStock: 3,

itemImage: "23.jpg",

itemSold: 3,

itemInfo: "언제 먹어도 반가운 과일",

{

itemNo: 24,

itemCategory: "과일",

itemName: "향이가득 샤인머스캣 1송이",

itemDiscount: 0,

itemPrice: 12900,

itemStock: 4,

itemImage: "24.jpg",

itemSold: 4,

itemInfo: "연두빛으로 영근 달콤함 한 알",

{

itemNo: 25,

itemCategory: "과일",

itemName: "[KF365] 머스크멜론 1.6kg",

itemDiscount: 16,

itemPrice: 11900,

itemStock: 5,

itemImage: "25.jpg",

itemSold: 5,

itemInfo: "촉촉하게 머금은 달콤함",

{

itemNo: 26,

itemCategory: "과일",

itemName: "황도 복숭아 1.2kg(4~6)입",

itemDiscount: 22,

itemPrice: 17900,

itemStock: 6,

itemImage: "26.jpg",

itemSold: 6,

itemInfo: "노랗게 물든 촉촉한 달콤함",

{

itemNo: 27,

itemCategory: "과일",

itemName: "성주 참외 1.5kg",

itemDiscount: 0,

itemPrice: 16900,

itemStock: 7,

itemImage: "27.jpg",

itemSold: 7,

itemInfo: "뽀얀 과육에 담긴 시원한 단맛",

{

itemNo: 28,

itemCategory: "과일",

itemName: "미국산 워싱턴 생체리 500g",

itemDiscount: 31,

itemPrice: 12900,

itemStock: 8,

itemImage: "28.jpg",

itemSold: 8,

itemInfo: "알알이 붉은 다이아몬드의 새콤달콤한 유혹",

{

itemNo: 29,

itemCategory: "과일",

itemName: "GAP 거봉 포도 450g",

itemDiscount: 7,

itemPrice: 12900,

itemStock: 9,

itemImage: "29.jpg",

itemSold: 9,

itemInfo: "양손에 들어오는 아담한 거봉",

{

itemNo: 30,

itemCategory: "과일",

itemName: "제주산 애플망고 600g",

itemDiscount: 17,

itemPrice: 44900,

itemStock: 0,

itemImage: "30.jpg",

itemSold: 0,

itemInfo: "노란 속살에 달콤한 과즙 가득",

{

itemNo: 31,

itemCategory: "음료",

itemName: "[페리코네 팜즈] 냉동 오렌지 주스1L",

itemDiscount: 0,

itemPrice: 9800,

itemStock: 1,

itemImage: "31.jpg",

itemSold: 1,

itemInfo: "오렌지의 진한 달콤함을 담은",

{

itemNo: 32,

itemCategory: "음료",

itemName: "[Picard] 코코넛밀크",

itemDiscount: 0,

itemPrice: 7500,

itemStock: 2,

itemImage: "32.jpg",

itemSold: 2,

itemInfo: "큐브로 얼려 바로 사용 가능한",

{

itemNo: 33,

itemCategory: "음료",

itemName: "[대상웰라이프] 뉴케어 인핸서 프로1.2",

itemDiscount: 45,

itemPrice: 109000,

itemStock: 3,

itemImage: "33.jpg",

itemSold: 3,

itemInfo: "암환자용 균형영양식",

{

itemNo: 34,

itemCategory: "음료",

itemName: "[아이시스 8.0] 생수 300mL X 80개",

itemDiscount: 8,

itemPrice: 36000,

itemStock: 4,

itemImage: "34.jpg",

itemSold: 4,

itemInfo: "내 몸에 미네랄 밸런스와 수분을 가득 채워주는 아이시스 8.0",

{

itemNo: 35,

itemCategory: "음료",

itemName: "코카콜라 (300mL X 24입)",

itemDiscount: 0,

itemPrice: 22900,

itemStock: 5,

itemImage: "35.jpg",

itemSold: 5,

itemInfo: "어디든 잘 어울리는 탄산음료",

{

itemNo: 36,

itemCategory: "음료",

itemName: "[남양] 초코에몽 (180mL X 4개입)",

itemDiscount: 0,

itemPrice: 3900,

itemStock: 6,

itemImage: "36.jpg",

itemSold: 6,

itemInfo: "진하고 달콤한 초콜릿 드링크",

{

itemNo: 37,

itemCategory: "음료",

itemName: "[남양] 맛있는 우유 GT 900mL",

itemDiscount: 0,

itemPrice: 2820,

itemStock: 7,

itemImage: "37.jpg",

itemSold: 7,

itemInfo: "고소하고 깔끔한 원유의 풍미",

{

itemNo: 38,

itemCategory: "음료",

itemName: "실론티 제로 500mL X 6입",

itemDiscount: 10,

itemPrice: 7900,

itemStock: 8,

itemImage: "38.jpg",

itemSold: 8,

itemInfo: "가볍게 즐기는 개운한 홍차",

{

itemNo: 39,

itemCategory: "음료",

itemName: "[폴 바셋] 바리스타 돌체라떼 330mL",

itemDiscount: 0,

itemPrice: 3400,

itemStock: 9,

itemImage: "39.jpg",

itemSold: 9,

itemInfo: "간편하게 맛보는 달콤한 풍미",

{

itemNo: 40,

itemCategory: "음료",

itemName: "[트레비] 무라벨 레몬(350mL X 20개)",

itemDiscount: 0,

itemPrice: 11900,

itemStock: 0,

itemImage: "40.jpg",

itemSold: 0,

itemInfo: "무라벨로 즐기는 레몬의 싱그러움",

{

itemNo: 41,

itemCategory: "간식",

itemName: "[그라놀로지] 선물세트 1호",

itemDiscount: 1,

itemPrice: 35000,

itemStock: 1,

itemImage: "41.jpg",

itemSold: 1,

itemInfo: "실속있게 꾸려 넣은 고소한 간식",

{

itemNo: 42,

itemCategory: "간식",

itemName: "[하겐다즈] 파인트 피넛버터 크런치",

itemDiscount: 2,

itemPrice: 15500,

itemStock: 2,

itemImage: "42.jpg",

itemSold: 2,

itemInfo: "피넛버터가 자아내는 깊은 풍미",

{

itemNo: 43,

itemCategory: "간식",

itemName: "[리터스포트] 미니 초콜릿믹스 9{",

itemDiscount: 3,

itemPrice: 5980,

itemStock: 3,

itemImage: "43.jpg",

itemSold: 3,

itemInfo: "다양하게 경험하는 미니 초콜릿",

];

}

/* 할인율이 가장 높은 상품 목록 */

getMaxDiscountRateItemList() {

let count = 0;

let list = [];

for(let i=0; i<this.itemList.length; i++) {

if(this.itemList[i].itemDiscount >= 50) {

list.push(this.itemList[i]);

count += 1;

if(count == 4) {

break;

}

return list;

}

/* 판매량이 가장 많은 상품 목록 */

getMaxItemSoldCountItemLIst() {

let list = [];

for(let i=0; i<4; i++) {

let maxSoldCount = 0;

let maxIndex = 0;

for(let j=0; j<this.itemList.length; j++) {

let check = false;

for(let k=0;k<list.length; k++) {

if(this.itemList[j].itemNo == list[k].itemNo) {

check = true;

break;

}

if(check == false) {

if(maxSoldCount < this.itemList[j].itemSold) {

maxSoldCount = this.itemList[j].itemSold;

maxIndex = j;

}

list.push(this.itemList[maxIndex]);

}

return list;

}

/* 전체상품 페이지 상품 목록 */

getAllItemList() {

return this.itemList;

}

/* 상품번호로 상품 index 검색 */

getItemIndex(itemNo) {

for(let i=0; i<this.itemList.length; i++) {

if(this.itemList[i].itemNo == itemNo) {

return i;

}

/* 상품 상세페이지 */

getItem(index) {

return this.itemList[index];

}

jsonMemberList.js

export class JsonMemberList {

static instance = new JsonMemberList();

static getInstance() { return JsonMemberList.instance; }

init() {

this.memberList = null;

this.setMemberSampleData();

}

setMemberSampleData() {

this.memberList = [

{

memberNo: 1,

memberId: "qwer",

memberPw: "1234"

{

memberNo: 2,

memberId: "abcd",

memberPw: "1234"

{

memberNo: 3,

memberId: "haha",

memberPw: "1234"

];

}

/* 로그인 */

loginCheck(id, pw) {

for(let i=0; i<this.memberList.length; i++) {

let member = this.memberList[i];

if(member.memberId == id && member.memberPw == pw) {

return true;

}

return false;

}

/* 회원번호 */

getMemberNo(id) {

for(let i=0; i<this.memberList.length; i++) {

let member = this.memberList[i];

if(member.memberId == id) {

return member.memberNo;

}

main.js

import { ControllerMain } from "./controllerMain.js";

import { JsonMemberList } from "./jsonMemberList.js";

import { JsonItemList } from "./jsonItemList.js";

import { JsonCartList } from "./jsonCartList.js";

JsonItemList.getInstance().init();

JsonMemberList.getInstance().init();

JsonCartList.getInstance().init();

ControllerMain.getInstance().init();

pageCartInfo.js

import { ControllerMain } from "./controllerMain.js";

import { JsonCartList } from "./jsonCartList.js";

export class PageCartInfo {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

#cartTable {

margin: 0 auto;

width: 1050px;

}

.cart-header {

text-align: center;

height: 240px;

}

.cart-sub1 {

text-align: center;

width: 50px;

height: 50px;

}

.cart-sub2 {

width: 180px;

}

#cartListTable {

margin: 0 auto;

width: 1050px;

}

.item-img {

width: 60px;

}

.minus, .plus {

display: inline-block;

border: 1px solid lightgray;

border-radius: 3px;

text-align: center;

width: 30px;

height: 30px;

font-size: 20px;

cursor: pointer;

}

.cartList-sub1 {

text-align: center;

width: 50px;

height: 50px;

}

.cartList-sub3 {

font-size: 16px;

font-weight: bold;

color: #333333;

}

.cartList-sub4 {

width: 200px;

text-align: center;

}

.cartList-sub5 {

width: 160px;

font-size: 16px;

font-weight: bold;

color: #333333;

text-align: right;

}

.cartList-sub6 {

text-align: right;

}

#cartResultTable {

margin: 0 auto;

height: 300px;

width: 1050px;

color: #333333;

}

.cartResult-sub {

width: 700px;

}

.cartResult-sub2 {

text-align: right;

}

.black-line {

background: black;

height:1px;

border:0;

}

.cart-line {

background: #EAEAEA;

height:1px;

border:0;

}

.discount-price {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

}

#check-all {

width: 15px;

height: 15px;

cursor: pointer;

}

.ch {

width: 15px;

height: 15px;

cursor: pointer;

}

.delItem {

cursor: pointer;

}

.emptyCart {

height: 300px;

text-align: center;

}

</style>

let myCartList = JsonCartList.getInstance().getCartList();

let count = myCartList.length;

tag +=

<tr>

</tr>

<tr>

</td>

전체선택 (

<span class="select-count">0</span> / <span>${count}</span>

)

</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

if(myCartList.length > 0) {

for(let i=0; i<myCartList.length; i++) {

let item = myCartList[i];

tag += `

<tr>

</td>

<td class="cartList-sub3">${item.itemName}</td>

<span class="itemCount" style="padding: 0 15px;">${item.itemCount}</span>

</td>

<span class="item-price">${(item.itemPrice * item.itemCount).toLocaleString()}</span>원<br>

</td>

</td>

</tr>

if(i < myCartList.length - 1) {

tag += `

<tr>

</td>

</tr>

}

} else {

tag +=

<tr>

장바구니에 담긴 상품이 없습니다.

</td>

</tr>

}

tag += `

</table>

<tr>

</tr>

<tr>

<span class="totalItemPrice">0</span>원

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="cartResult-sub1">결제예정금액</td>

<span class="totalPrice">4,000</span>원

</td>

</tr>

</table>

$content.innerHTML = tag;

// 전체 선택

let $checkAll = document.querySelector("#check-all");

$checkAll.addEventListener("click", this.checkAllClick);

// 선택

let $chList = document.querySelectorAll(".ch");

for(let i=0; i<$chList.length; i++) {

$chList[i].addEventListener("click", this.chClick);

}

// 수량 감소

let $minusList = document.querySelectorAll(".minus");

for(let i=0; i<$minusList.length; i++) {

$minusList[i].addEventListener("click", this.minusClick);

}

// 수량 증가

let $plusList = document.querySelectorAll(".plus");

for(let i=0; i<$plusList.length; i++) {

$plusList[i].addEventListener("click", this.plusClick);

}

// x버튼 삭제

let $delItemList = document.querySelectorAll(".delItem");

for(let i=0; i<$delItemList.length; i++) {

$delItemList[i].addEventListener("click", this.delItemClick);

}

checkAllClick = (e) => {

let $checkAll = document.querySelector("#check-all");

let $chList = document.querySelectorAll(".ch");

let count = 0;

if($checkAll.checked) {

for(let i=0; i<$chList.length; i++) {

$chList[i].checked = true;

count += 1;

}

} else {

for(let i=0; i<$chList.length; i++) {

$chList[i].checked = false;

}

let $selectCount = document.querySelector(".select-count");

$selectCount.innerText = count;

this.setTotal();

}

chClick = (e) => {

let $chList = document.querySelectorAll(".ch");

let count = 0;

for(let i=0; i<$chList.length; i++) {

if($chList[i].checked) {

count += 1;

}

let $selectCount = document.querySelector(".select-count");

$selectCount.innerText = count;

let $checkAll = document.querySelector("#check-all");

if(count == $chList.length) {

$checkAll.checked = true;

} else {

$checkAll.checked = false;

}

this.setTotal();

}

minusClick = (e) => {

let $minusList = document.querySelectorAll(".minus");

let index = 0;

for(let i=0; i<$minusList.length; i++) {

if(e.target == $minusList[i]) {

index = i;

break;

}

let $itemCountList = document.querySelectorAll(".itemCount");

let count = Number($itemCountList[index].innerText.replace(",", ""));

if(count > 0) {

count -= 1;

$itemCountList[index].innerText = count;

let myCartList = JsonCartList.getInstance().getCartList();

let $itemPriceList = document.querySelectorAll(".item-price");

$itemPriceList[index].innerText = (myCartList[index].itemPrice * count).toLocaleString();

}

this.setTotal();

}

plusClick = (e) => {

let $plusList = document.querySelectorAll(".plus");

let index = 0;

for(let i=0; i<$plusList.length; i++) {

if(e.target == $plusList[i]) {

index = i;

break;

}

let $itemCountList = document.querySelectorAll(".itemCount");

let count = Number($itemCountList[index].innerText.replace(",", ""));

count += 1;

$itemCountList[index].innerText = count;

let myCartList = JsonCartList.getInstance().getCartList();

let $itemPriceList = document.querySelectorAll(".item-price");

$itemPriceList[index].innerText = (myCartList[index].itemPrice * count).toLocaleString();

this.setTotal();

}

setTotal() {

let $chList = document.querySelectorAll(".ch");

let $itemPriceList = document.querySelectorAll(".item-price");

let total = 0;

for(let i=0; i<$chList.length; i++) {

if($chList[i].checked) {

total += Number($itemPriceList[i].innerText.replace(",", ""));

}

let $totalItemPrice = document.querySelector(".totalItemPrice");

$totalItemPrice.innerText = total.toLocaleString();

let $totalPrice = document.querySelector(".totalPrice");

$totalPrice.innerText = (total + 4000).toLocaleString();

}

delItemClick = (e) => {

let $delItemList = document.querySelectorAll(".delItem");

let index = 0;

for(let i=0; i<$delItemList.length; i++) {

if(e.target == $delItemList[i]) {

index = i;

break;

}

let myCartList = JsonCartList.getInstance().getCartList();

JsonCartList.getInstance().deleteItem(myCartList[index].itemCartNo);

ControllerMain.getInstance().changePage("page-cartInfo", null);

}

pageFooter.js

export class PageFooter {

execute(data) {

let $footer = document.querySelector("#footer");

let tag = "";

tag +=

<style>

/* line */

.line {

background-color: #CCCCCC;

border: 0;

height: 1px;

margin: 50px 0px;

}

/* footer */

#footer {

margin: 0 auto;

}

</style>

tag +=

<tr>

</tr>

</table>

$footer.innerHTML = tag;

}

pageHeader.js

import { ControllerMain } from "./controllerMain.js";

import { JsonMemberList } from "./jsonMemberList.js";

export class PageHeader {

execute(data) {

let $header = document.querySelector("#header");

let tag = "";

tag +=

<style>

a {

text-decoration: none;

color: #333333;

cursor: pointer;

}

a:hover {

color: #5F0080;

}

table, tr, td {

/* border: 1px solid #333333; */

border-collapse: collapse;

}

/* header1 */

#headerTable1 {

width: 1050px;

height: 37px;

margin: 0 auto;

text-align: center;

font-size: 13px;

}

.header1-space {

width: 850px;

margin: 0 auto;

text-align: center;

}

.header1-menu {

width: 60px;

}

.logo {

cursor: pointer;

}

/* header2 */

#headerTable2 {

width: 1050px;

height: 63px;

margin: 0 auto;

text-align: center;

}

.header2-img {

text-align: left;

}

.header2-logo a {

font-size: 18px;

font-weight: bold;

color: #5F0080;

}

.header2-search {

width: 700px;

}

.header2-input {

width: 300px;

height: 18.39px;

font-size: 16px;

border: none;

}

.header2-img {

width: 50px;

text-align: center;

}

#searchTable {

width: 400px;

height: 48px;

/* table안의 table 중앙정렬 */

margin-left: auto;

margin-right: auto;

/* table 모서리 둥글게 */

border-collapse: separate;

border-radius: 5px;

border: 1px solid #5F0080;

}

.cart {

cursor: pointer;

}

/* header3 */

#headerTable3 {

width: 1050px;

height: 56px;

margin: 0 auto;

text-align: left;

font-size: 16px;

font-weight: bold;

}

.header3-menu {

width: 170px;

}

</style>

let log = ControllerMain.getInstance().log;

tag +=

if(log == null) {

tag +=

<tr>

</tr>

} else {

tag +=

<tr>

</tr>

}

tag +=

</table>

<tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td align="right" style="width: 100px;"><a>새벽알뜰배송</a></td>

</tr>

</table>

$header.innerHTML = tag;

let $aItemListPage = document.querySelector("#a-itemListPage");

$aItemListPage.addEventListener("click", this.clickItemListPage);

if(log == null) {

let $clickLogin = document.querySelector("#clickLogin");

$clickLogin.addEventListener("click", this.clickLoginPage);

}

let $logoList = document.querySelectorAll(".logo");

for(let i=0; i<$logoList.length; i++) {

$logoList[i].addEventListener("click", function() {

ControllerMain.getInstance().changePage("page-index", null);

});

}

if(log != null) {

let $logout = document.querySelector(".logout");

$logout.addEventListener("click", function() {

ControllerMain.getInstance().log = null;

ControllerMain.getInstance().changePage("page-header", null);

ControllerMain.getInstance().changePage("page-index", null);

})

}

let $cart = document.querySelector(".cart");

$cart.addEventListener("click", this.clickCartPage);

}

clickItemListPage = (e) => {

ControllerMain.getInstance().changePage("page-itemList", null);

}

clickLoginPage = (e) => {

ControllerMain.getInstance().changePage("page-login", null);

}

clickCartPage = (e) => {

let log = ControllerMain.getInstance().log;

if(log == null) {

alert("로그인 후 이용할 수 있습니다.");

ControllerMain.getInstance().changePage("page-login", null);

} else {

ControllerMain.getInstance().changePage("page-cartInfo", null);

}

pageIndex.js

import { JsonIte

import { JsonItemList } from "./jsonItemList.js";

import { ControllerMain } from "./controllerMain.js";

export class PageIndex {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

/* bannder */

#banner {

margin: 0 auto;

text-align: center;

}

#slide-img {

width: 1890px;

}

/* content */

.content {

width: 1050px;

height: 48px;

margin: 0 auto;

margin-top: 100px;

margin-bottom: 50px;

text-align: center;

font-size: 28px;

color: #333333;

font-weight: bold;

}

.content-img {

width: 250px;

cursor: pointer;

}

.content-space1 {

height: 20px;

}

.content-space2 {

width: 10px;

}

.content-text {

text-align: left;

}

.content-text1 {

font-size: 16px;

color: #333333;

text-align: left;

vertical-align: top;

}

.content-text2 {

font-size: 16px;

color: #FA622F;

}

.content-text3 {

font-size: 16px;

color: #333333;

}

.content-text4 {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

text-align: left;

}

/* content-banner */

#content-banner {

margin: 0 auto;

margin-top: 100px;

margin-bottom: 100px;

}

#content-banner img {

width: 1050px;

}

</style>

tag +=

<tr>

</tr>

</table>

<tr>

놓치면 후회할 가격 <img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

let maxDiscountRateItemList = JsonItemList.getInstance().getMaxDiscountRateItemList();

tag +=

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="content-text1">${maxDiscountRateItemList[0].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[1].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[2].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[3].itemName}</td>

</tr>

<tr>

<span class="content-text2">${maxDiscountRateItemList[0].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[0].itemPrice * maxDiscountRateItemList[0].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[1].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[1].itemPrice * maxDiscountRateItemList[1].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[2].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[3].itemPrice * maxDiscountRateItemList[2].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[3].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[3].itemPrice * maxDiscountRateItemList[3].itemDiscount/100).toLocaleString()}원</span>

</td>

</tr>

<tr>

<td class="content-text4">${(maxDiscountRateItemList[0].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[1].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[2].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[3].itemPrice).toLocaleString()}원</td>

</tr>

</table>

<tr>

</tr>

</table>

tag +=

<tr>

가장 핫한 상품 <img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

maxDiscountRateItemList = JsonItemList.getInstance().getMaxItemSoldCountItemLIst();

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td>

</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td class="content-text1">${maxDiscountRateItemList[i].itemName}</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

if(maxDiscountRateItemList[i].itemDiscount > 0) {

let itemPrice = maxDiscountRateItemList[i].itemPrice - (maxDiscountRateItemList[i].itemPrice * maxDiscountRateItemList[i].itemDiscount/100);

tag +=

<span class="content-text2">${maxDiscountRateItemList[i].itemDiscount}%</span>

<span class="content-text3">${itemPrice.toLocaleString()}원</span>

</td>

} else {

tag +=

<span class="content-text3">${(maxDiscountRateItemList[i].itemPrice).toLocaleString()}원</span>

</td>

}

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td class="content-text4">${(maxDiscountRateItemList[i].itemPrice).toLocaleString()}원</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>

</table>

$content.innerHTML = tag;

let $itemImageList = document.querySelectorAll(".content-img");

for(let i=0; i<$itemImageList.length; i++) {

$itemImageList[i].addEventListener("click", this.clickPageItemInfo);

}

//------------------------------------------------------------------

// 배너 슬라이드

let count = 1;

// 기본적인 슬라이드 루프 시작

let loopInterval = setInterval(() => {

nextMove(); // 다음 슬라이드를 보여주는 함수

}, 3000);

let nextMove = function() {

if(count < 5) {

count += 1;

} else {

count = 1;

}

document.querySelector("#slide-img").src = "./img/banner" + count + ".jpg";

}

document.addEventListener("click", function() {

clearInterval(loopInterval);

});

}

clickPageItemInfo = (e) => {

let $itemNoList = document.querySelectorAll(".itemNo");

let $itemImageList = document.querySelectorAll(".content-img");

let itemNo = 0;

for(let i=0; i<$itemImageList.length; i++) {

if(e.target == $itemImageList[i]) {

itemNo = $itemNoList[i].value;

break;

}

let index = JsonItemList.getInstance().getItemIndex(itemNo);

let data = {index:index};

ControllerMain.getInstance().changePage("page-itemInfo", data);

}

mList } from "./jsonItemList.js";

import { ControllerMain } from "./controllerMain.js";

export class PageIndex {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

/* bannder */

#banner {

margin: 0 auto;

text-align: center;

}

#slide-img {

width: 1890px;

}

/* content */

.content {

width: 1050px;

height: 48px;

margin: 0 auto;

margin-top: 100px;

margin-bottom: 50px;

text-align: center;

font-size: 28px;

color: #333333;

font-weight: bold;

}

.content-img {

width: 250px;

cursor: pointer;

}

.content-space1 {

height: 20px;

}

.content-space2 {

width: 10px;

}

.content-text {

text-align: left;

}

.content-text1 {

font-size: 16px;

color: #333333;

text-align: left;

vertical-align: top;

}

.content-text2 {

font-size: 16px;

color: #FA622F;

}

.content-text3 {

font-size: 16px;

color: #333333;

}

.content-text4 {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

text-align: left;

}

/* content-banner */

#content-banner {

margin: 0 auto;

margin-top: 100px;

margin-bottom: 100px;

}

#content-banner img {

width: 1050px;

}

</style>

tag +=

<tr>

</tr>

</table>

<tr>

놓치면 후회할 가격 <img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

let maxDiscountRateItemList = JsonItemList.getInstance().getMaxDiscountRateItemList();

tag +=

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="content-text1">${maxDiscountRateItemList[0].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[1].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[2].itemName}</td>

<td class="content-text1">${maxDiscountRateItemList[3].itemName}</td>

</tr>

<tr>

<span class="content-text2">${maxDiscountRateItemList[0].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[0].itemPrice * maxDiscountRateItemList[0].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[1].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[1].itemPrice * maxDiscountRateItemList[1].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[2].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[3].itemPrice * maxDiscountRateItemList[2].itemDiscount/100).toLocaleString()}원</span>

</td>

<span class="content-text2">${maxDiscountRateItemList[3].itemDiscount}%</span>

<span class="content-text3">${(maxDiscountRateItemList[3].itemPrice * maxDiscountRateItemList[3].itemDiscount/100).toLocaleString()}원</span>

</td>

</tr>

<tr>

<td class="content-text4">${(maxDiscountRateItemList[0].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[1].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[2].itemPrice).toLocaleString()}원</td>

<td class="content-text4">${(maxDiscountRateItemList[3].itemPrice).toLocaleString()}원</td>

</tr>

</table>

<tr>

</tr>

</table>

tag +=

<tr>

가장 핫한 상품 <img style="height: 20px;" src="./img/cramps.svg">

</td>

</tr>

<tr>

</tr>

maxDiscountRateItemList = JsonItemList.getInstance().getMaxItemSoldCountItemLIst();

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td>

</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td class="content-text1">${maxDiscountRateItemList[i].itemName}</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

if(maxDiscountRateItemList[i].itemDiscount > 0) {

let itemPrice = maxDiscountRateItemList[i].itemPrice - (maxDiscountRateItemList[i].itemPrice * maxDiscountRateItemList[i].itemDiscount/100);

tag +=

<span class="content-text2">${maxDiscountRateItemList[i].itemDiscount}%</span>

<span class="content-text3">${itemPrice.toLocaleString()}원</span>

</td>

} else {

tag +=

<span class="content-text3">${(maxDiscountRateItemList[i].itemPrice).toLocaleString()}원</span>

</td>

}

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>`;

tag +=

` <tr>`;

for(let i=0; i<maxDiscountRateItemList.length; i++) {

tag +=

<td class="content-text4">${(maxDiscountRateItemList[i].itemPrice).toLocaleString()}원</td>

if(i < maxDiscountRateItemList.length - 1) {

tag +=

}

tag +=

` </tr>

</table>

$content.innerHTML = tag;

let $itemImageList = document.querySelectorAll(".content-img");

for(let i=0; i<$itemImageList.length; i++) {

$itemImageList[i].addEventListener("click", this.clickPageItemInfo);

}

//------------------------------------------------------------------

// 배너 슬라이드

let count = 1;

// 기본적인 슬라이드 루프 시작

let loopInterval = setInterval(() => {

nextMove(); // 다음 슬라이드를 보여주는 함수

}, 3000);

let nextMove = function() {

if(count < 5) {

count += 1;

} else {

count = 1;

}

document.querySelector("#slide-img").src = "./img/banner" + count + ".jpg";

}

document.addEventListener("click", function() {

clearInterval(loopInterval);

});

}

clickPageItemInfo = (e) => {

let $itemNoList = document.querySelectorAll(".itemNo");

let $itemImageList = document.querySelectorAll(".content-img");

let itemNo = 0;

for(let i=0; i<$itemImageList.length; i++) {

if(e.target == $itemImageList[i]) {

itemNo = $itemNoList[i].value;

break;

}

let index = JsonItemList.getInstance().getItemIndex(itemNo);

let data = {index:index};

ControllerMain.getInstance().changePage("page-itemInfo", data);

}

pageItemInfo.js

impo

import { JsonItemList } from "./jsonItemList.js";

import { ControllerMain } from "./controllerMain.js";

import { JsonMemberList } from "./jsonMemberList.js";

import { JsonCartList } from "./jsonCartList.js";

export class PageItemInfo {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

/* content */

#itemTable {

margin: 0 auto;

margin-top: 30px;

height: 500px;

}

#itemInfoTable {

width: 400px;

}

.itemImg {

height: 500px;

}

.itemNameTd {

height: 60px;

font-size: 24px;

}

.itemInfoTd {

font-size: 14px;

color: gray;

height: 40px;

}

.itemPriceTd {

height: 40px;

}

.itemPrice {

font-size: 28px;

font-weight: bold;

}

.itemCountTd {

height: 40px;

}

.minus, .plus {

display: inline-block;

border: 1px solid lightgray;

border-radius: 3px;

text-align: center;

width: 30px;

height: 30px;

font-size: 20px;

cursor: pointer;

}

.itemCount {

display: inline-block;

width: 30px;

height: 30px;

text-align: center;

font-size: 20px;

}

.itemTotalTd {

text-align: right;

height: 40px;

}

.itemTotalText {

font-size: 13px;

}

.itemTotalNumber {

font-size: 32px;

font-weight: bold;

}

.itemCartTd {

height: 100px;

}

.cartBtn {

width: 400px;

height: 50px;

background: #5F0080;

border: 1px solid #5F0080;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

color: white;

cursor: pointer;

}

.rowSpace {

height: 150px;

}

.colSpace {

width: 50px;

}

.bold-text {

font-size: 14px;

font-weight: bold;

}

.small-text {

font-size: 12px;

color: gray;

}

</style>

let index = data.index;

let item = JsonItemList.getInstance().getItem(index);

console.log(item);

let itemPrice = 0;

if(item.itemDiscount > 0) {

itemPrice = item.itemPrice - (item.itemPrice * item.itemDiscount / 100);

} else {

itemPrice = item.itemPrice;

}

tag +=

<tr>

</td>

<td>

<tr>

${item.itemName}

</td>

</tr>

<tr>

${item.itemInfo}

</td>

</tr>

if(item.itemDiscount > 0) {

tag +=

<tr>

<span class="itemDiscount" style="font-size: 28px; color: #FA622F;">${item.itemDiscount}%</span>

<span class="itemPrice">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

} else {

tag +=

<tr>

<span class="itemPrice">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

}

tag +=

<tr>

<td>

(대구·부산·울산 샛별배송 운영시간 별도 확인)</span>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<span class="itemTotalText">총상품금액 : </span>

<span class="itemTotalNumber">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

$content.innerHTML = tag;

let $minus = document.querySelector(".minus");

$minus.addEventListener("click", this.clickMinusEvent);

let $plus = document.querySelector(".plus");

$plus.addEventListener("click", this.clickMinusEvet);

let $cartBtn = document.querySelector(".cartBtn");

$cartBtn.addEventListener("click", this.clickCartPage);

}

clickMinusEvent = (e) => {

let $itemCount = document.querySelector(".itemCount");

let $itemPrice = document.querySelector(".itemPrice");

let $itemTotalNumber = document.querySelector(".itemTotalNumber");

let itemCount = Number($itemCount.innerText);

let itemPrice = Number($itemPrice.innerText.replace(",", ""));

let itemTotalNumber = Number($itemTotalNumber.innerText.replace(",", ""));

if(itemCount > 0) {

itemCount -= 1;

$itemCount.innerText = itemCount;

itemTotalNumber -= itemPrice;

$itemTotalNumber.innerText = itemTotalNumber.toLocaleString();

}

clickMinusEvet = (e) => {

let $itemCount = document.querySelector(".itemCount");

let $itemPrice = document.querySelector(".itemPrice");

let $itemTotalNumber = document.querySelector(".itemTotalNumber");

let itemCount = Number($itemCount.innerText);

let itemPrice = Number($itemPrice.innerText.replace(",", ""));

let itemTotalNumber = Number($itemTotalNumber.innerText.replace(",", ""));

itemCount += 1;

$itemCount.innerText = itemCount;

itemTotalNumber += itemPrice;

$itemTotalNumber.innerText = itemTotalNumber.toLocaleString();

}

clickCartPage = (e) => {

let log = ControllerMain.getInstance().log;

if(log == null) {

alert("로그인 후 이용할 수 있습니다.");

ControllerMain.getInstance().changePage("page-login", null);

} else {

let index = Number(document.querySelector(".index").value);

console.log("index = " + index);

let item = JsonItemList.getInstance().getItem(index);

console.log(item.itemName);

let $itemCount = document.querySelector(".itemCount");

let itemCount = Number($itemCount.innerText);

let log = ControllerMain.getInstance().log;

let memberNo = JsonMemberList.getInstance().getMemberNo(log);

let lastNo = JsonCartList.getInstance().getLastCartNum();

let cartData = {

cartNo: lastNo + 1,

cartMemberNo: memberNo,

cartItemNo: item.itemNo,

cartItemCount: itemCount

}

JsonCartList.getInstance().addCart(cartData);

ControllerMain.getInstance().changePage("page-cartInfo", null);

}

rt { JsonItemList } from "./jsonItemList.js";

import { ControllerMain } from "./controllerMain.js";

import { JsonMemberList } from "./jsonMemberList.js";

import { JsonCartList } from "./jsonCartList.js";

export class PageItemInfo {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

/* content */

#itemTable {

margin: 0 auto;

margin-top: 30px;

height: 500px;

}

#itemInfoTable {

width: 400px;

}

.itemImg {

height: 500px;

}

.itemNameTd {

height: 60px;

font-size: 24px;

}

.itemInfoTd {

font-size: 14px;

color: gray;

height: 40px;

}

.itemPriceTd {

height: 40px;

}

.itemPrice {

font-size: 28px;

font-weight: bold;

}

.itemCountTd {

height: 40px;

}

.minus, .plus {

display: inline-block;

border: 1px solid lightgray;

border-radius: 3px;

text-align: center;

width: 30px;

height: 30px;

font-size: 20px;

cursor: pointer;

}

.itemCount {

display: inline-block;

width: 30px;

height: 30px;

text-align: center;

font-size: 20px;

}

.itemTotalTd {

text-align: right;

height: 40px;

}

.itemTotalText {

font-size: 13px;

}

.itemTotalNumber {

font-size: 32px;

font-weight: bold;

}

.itemCartTd {

height: 100px;

}

.cartBtn {

width: 400px;

height: 50px;

background: #5F0080;

border: 1px solid #5F0080;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

color: white;

cursor: pointer;

}

.rowSpace {

height: 150px;

}

.colSpace {

width: 50px;

}

.bold-text {

font-size: 14px;

font-weight: bold;

}

.small-text {

font-size: 12px;

color: gray;

}

</style>

let index = data.index;

let item = JsonItemList.getInstance().getItem(index);

console.log(item);

let itemPrice = 0;

if(item.itemDiscount > 0) {

itemPrice = item.itemPrice - (item.itemPrice * item.itemDiscount / 100);

} else {

itemPrice = item.itemPrice;

}

tag +=

<tr>

</td>

<td>

<tr>

${item.itemName}

</td>

</tr>

<tr>

${item.itemInfo}

</td>

</tr>

if(item.itemDiscount > 0) {

tag +=

<tr>

<span class="itemDiscount" style="font-size: 28px; color: #FA622F;">${item.itemDiscount}%</span>

<span class="itemPrice">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

} else {

tag +=

<tr>

<span class="itemPrice">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

}

tag +=

<tr>

<td>

(대구·부산·울산 샛별배송 운영시간 별도 확인)</span>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<span class="itemTotalText">총상품금액 : </span>

<span class="itemTotalNumber">${itemPrice.toLocaleString()}</span>원

</td>

</tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

$content.innerHTML = tag;

let $minus = document.querySelector(".minus");

$minus.addEventListener("click", this.clickMinusEvent);

let $plus = document.querySelector(".plus");

$plus.addEventListener("click", this.clickMinusEvet);

let $cartBtn = document.querySelector(".cartBtn");

$cartBtn.addEventListener("click", this.clickCartPage);

}

clickMinusEvent = (e) => {

let $itemCount = document.querySelector(".itemCount");

let $itemPrice = document.querySelector(".itemPrice");

let $itemTotalNumber = document.querySelector(".itemTotalNumber");

let itemCount = Number($itemCount.innerText);

let itemPrice = Number($itemPrice.innerText.replace(",", ""));

let itemTotalNumber = Number($itemTotalNumber.innerText.replace(",", ""));

if(itemCount > 0) {

itemCount -= 1;

$itemCount.innerText = itemCount;

itemTotalNumber -= itemPrice;

$itemTotalNumber.innerText = itemTotalNumber.toLocaleString();

}

clickMinusEvet = (e) => {

let $itemCount = document.querySelector(".itemCount");

let $itemPrice = document.querySelector(".itemPrice");

let $itemTotalNumber = document.querySelector(".itemTotalNumber");

let itemCount = Number($itemCount.innerText);

let itemPrice = Number($itemPrice.innerText.replace(",", ""));

let itemTotalNumber = Number($itemTotalNumber.innerText.replace(",", ""));

itemCount += 1;

$itemCount.innerText = itemCount;

itemTotalNumber += itemPrice;

$itemTotalNumber.innerText = itemTotalNumber.toLocaleString();

}

clickCartPage = (e) => {

let log = ControllerMain.getInstance().log;

if(log == null) {

alert("로그인 후 이용할 수 있습니다.");

ControllerMain.getInstance().changePage("page-login", null);

} else {

let index = Number(document.querySelector(".index").value);

console.log("index = " + index);

let item = JsonItemList.getInstance().getItem(index);

console.log(item.itemName);

let $itemCount = document.querySelector(".itemCount");

let itemCount = Number($itemCount.innerText);

let log = ControllerMain.getInstance().log;

let memberNo = JsonMemberList.getInstance().getMemberNo(log);

let lastNo = JsonCartList.getInstance().getLastCartNum();

let cartData = {

cartNo: lastNo + 1,

cartMemberNo: memberNo,

cartItemNo: item.itemNo,

cartItemCount: itemCount

}

JsonCartList.getInstance().addCart(cartData);

ControllerMain.getInstance().changePage("page-cartInfo", null);

}

pageItemList.js

import { ControllerMain } from "./controllerMain.js";

import { JsonItemList } from "./jsonItemList.js";

export class PageItemList {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

/* content */

#itemList {

width: 1050px;

height: 48px;

margin: 0 auto;

font-weight: bold;

}

.item-img {

width: 250px;

}

.itemList-space {

width: 25px;

}

.itemList-title {

height: 150px;

text-align: center;

font-size: 28px;

color: #333333;

font-weight: bold;

}

.itemList-count {

height: 50px;

text-align: right;

color: #333333;

font-weight: bold;

}

.itemList-text1 {

font-size: 16px;

color: #333333;

}

.itemList-text2 {

font-size: 16px;

color: #FA622F;

}

.itemList-text3 {

font-size: 16px;

color: #333333;

}

.itemList-text4 {

font-size: 14px;

color: #B5B5B5;

text-decoration: line-through;

text-align: left;

}

.itemList-text5 {

font-size: 12px;

color: #B5B5B5;

vertical-align: top;

}

.itemList-space2 {

height: 80px;

}

/* pageNation */

#pageNation {

cursor: pointer;

margin: 0 auto;

font-size: 14px;

font-weight: bold;

color: gray;

text-align: center;

margin-bottom: 100px;

}

.pageMove {

width: 30px;

height: 30px;

border: 1px solid lightgray;

}

.a-pageItemList:hover {

text-decoration: underline;

}

</style>

let itemList = JsonItemList.getInstance().getAllItemList();

tag +=

<tr>

</tr>

<tr>

<td class="itemList-count" colspan="7">총 ${itemList.length}건</td>

</tr>

let itemCount = itemList.length;

let col = 4;

let row = 3;

let curPageNum = 1; // 현재 페이지 번호

if(data != null) {

curPageNum = Number(data);

}

let curpageItemCount = col*row; // 한 페이지에 보여줄 상품의 개수

let startIndex = (curPageNum - 1) * curpageItemCount;

let lastIndex = startIndex + curpageItemCount;

if(lastIndex > itemCount) {

lastIndex = itemCount;

}

row = parseInt((lastIndex - startIndex) / col);

if((lastIndex - startIndex) % col > 0) {

row += 1;

}

let endIndex = startIndex + col;

for(let j=0; j<row; j++) {

/* 상품 이미지 */

for(let i=startIndex; i<endIndex; i++) {

if(i % col == 0) {

tag += ` <tr>`;

}

tag += ` <td>

</a>

</td>`;

if(i % col != 3) {

tag += ` <td class="itemList-space"></td>`;

}

if(i % col == 3) {

tag += ` </tr>`;

}

/* 상품 명 */

for(let i=startIndex; i<endIndex; i++) {

if(i % col == 0) {

tag += ` <tr>`;

}

tag += ` <td class="itemList-text1">${ itemList[i].itemName }</td>`;

if(i % col != 3) {

tag += ` <td class="itemList-space"></td>`;

}

if(i % col == 3) {

tag += ` </tr>`;

}

/* 상품 정보 */

for(let i=startIndex; i<endIndex; i++) {

if(i % col == 0) {

tag += ` <tr>`;

}

tag += ` <td class="itemList-text5">${ itemList[i].itemInfo }</td>`;

if(i % col != 3) {

tag += ` <td class="itemList-space"></td>`;

}

if(i % col == 3) {

tag += ` </tr>`;

}

/* 상품 가격 */

for(let i=startIndex; i<endIndex; i++) {

if(i % col == 0) {

tag += ` <tr>`;

}

if(itemList[i].itemDiscount > 0) {

let itemPrice = itemList[i].itemPrice - (itemList[i].itemPrice * itemList[i].itemDiscount / 100);

tag +=

<td>

<span class="itemList-text2">${ itemList[i].itemDiscount }%</span>

<span class="itemList-text3">${ itemPrice.toLocaleString() }원</span>

</td>

} else {

tag +=

<td>

<span class="itemList-text3">${ itemList[i].itemPrice.toLocaleString() }원</span>

</td>

}

if(i % col != 3) {

tag += ` <td class="itemList-space"></td>`;

}

if(i % col == 3) {

tag += ` </tr>`;

}

/* 상품 할인 가격 */

for(let i=startIndex; i<endIndex; i++) {

if(i % col == 0) {

tag += ` <tr>`;

}

if(itemList[i].itemDiscount > 0) {

tag +=

`<td class="itemList-text4">${ itemList[i].itemPrice.toLocaleString() }원</td>`;

} else {

tag += `<td></td>`;

}

if(i % col != 3) {

tag += ` <td class="itemList-space"></td>`;

}

if(i % col == 3) {

tag += ` </tr>`;

}

/* 하단 여백 */

tag +=

<tr>

</tr>

startIndex += col;

endIndex = startIndex + col;

if(endIndex > itemCount) {

endIndex = itemCount;

}

tag +=`</table>`;

/* 페이징 처리 */

let onePageCount = 3; // 한 페이지에 보여줄 페이지 번호의 개수

let allPageCount = parseInt(itemCount / curpageItemCount); // 전체 페이지 개수

if(itemCount % curpageItemCount > 0) {

allPageCount += 1;

}

let startNum = 1; // 페이징 시작 번호

if(curPageNum % onePageCount == 0) {

startNum = curPageNum - 2;

} else {

startNum = curPageNum - curPageNum % 3 + 1;

}

let endNum = startNum + onePageCount - 1; // 페이징 마지막 번호

if(endNum > allPageCount) {

endNum = allPageCount;

}

tag +=

<tr>

if(startNum > onePageCount) {

tag += `<td class="pageMove"><a id="a-berforePageItemList"><</a></td>`;

}

for(let i=startNum; i<=endNum; i++) {

tag += `<td class="pageMove"><a class="a-pageItemList">${ i }</a></td>`;

}

if(endNum < allPageCount) {

tag += `<td class="pageMove"><a id="a-afterPageItemList">></a></td>`;

}

tag +=

</tr>

</table>

$content.innerHTML = tag;

//-------------------------------------------------------------------------------------

let $aPageItemList = document.querySelectorAll(".a-pageItemList");

// 현재 페이지 번호 배경색 적용하기

let index = 0;

if(curPageNum % onePageCount > 0) {

index = (curPageNum % onePageCount) - 1;

} else {

index = curPageNum - 1;

}

document.querySelectorAll(".pageMove")[index].style.backgroundColor = "rgb(221, 221, 221)";

// 페이지 번호를 클릭할 때마다 클릭한 페이지 번호를 넘겨

// 해당 페이지의 상품 출력하기

for(let i=0; i<$aPageItemList.length; i++) {

$aPageItemList[i].addEventListener("click", (e) => {

let index = e.target.innerText;

ControllerMain.getInstance().changePage("page-itemList", index);

});

}

// 이전 페이지 클릭 이벤트

if(document.querySelector("#a-berforePageItemList") != null) {

let $aBeforePageItemList = document.querySelector("#a-berforePageItemList");

$aBeforePageItemList.addEventListener("click", (e) => {

let index = startNum - onePageCount;

ControllerMain.getInstance().changePage("page-itemList", index);

});

}

// 이후 페이지 클릭 이벤트

if(document.querySelector("#a-afterPageItemList") != null) {

let $aAfterPageItemList = document.querySelector("#a-afterPageItemList");

$aAfterPageItemList.addEventListener("click", (e) => {

let index = startNum + onePageCount;

ControllerMain.getInstance().changePage("page-itemList", index);

});

}

// 이미지 클릭식 상품 상세 페이지로 이동

let $aPageItemInfo = document.querySelectorAll(".a-pageItemInfo");

let $indexList = document.querySelectorAll(".index");

for(let i=0; i<$aPageItemInfo.length; i++) {

$aPageItemInfo[i].addEventListener("click", (e) => {

let data = {index:$indexList[i].value};

ControllerMain.getInstance().changePage("page-itemInfo", data);

});

}

pageLogin.js

import { ControllerMain } from "./controllerMain.js";

import { JsonMemberList } from "./jsonMemberList.js";

export class PageLogin {

execute(data) {

let $content = document.querySelector("#content");

let tag = "";

tag +=

<style>

#loginTable {

margin: 0 auto;

}

.login-header {

color: #333333;

font-size: 20px;

font-weight: bold;

text-align: center;

height: 100px;

}

.login-input {

width: 340px;

height: 54px;

padding: 0px 11px 1px 15px;

border-style: none;

border: 1px solid #B5B5B5;

border-radius: 5px;

margin: 5px 0;

}

.login-sub {

font-size: 13px;

color: #333333;

text-align: right;

padding-bottom: 20px;

}

.login-td {

text-align: center;

height: 60px;

}

.login-btn {

border-style: none;

width: 370px;

height: 54px;

color: #FFFFFF;

font-size: 16px;

background-color: #5F0080;

border-radius: 5px;

font-weight: bold;

cursor: pointer;

}

.join-btn {

border-style: none;

width: 370px;

height: 54px;

color: #5F0080;

font-size: 16px;

background-color: #FFFFFF;

border: 1px solid #5F0080;

border-radius: 5px;

font-weight: bold;

cursor: pointer;

}

</style>

tag +=

<tr>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

$content.innerHTML = tag;

let $loginBtn = document.querySelector(".login-btn");

$loginBtn.addEventListener("click", this.clickLoginCheck);

}

clickLoginCheck = (e) => {

let $loginInputList = document.querySelectorAll(".login-input");

let id = $loginInputList[0].value;

let pw = $loginInputList[1].value;

if(id == '') {

alert("아이디를 입력해주세요.");

return;

}

if(pw == '') {

alert("비밀번호를 입력해주세요.");

return;

}

let check = JsonMemberList.getInstance().loginCheck(id, pw);

if(check) {

ControllerMain.getInstance().log = id;

ControllerMain.getInstance().changePage("page-header", null);

ControllerMain.getInstance().changePage("page-index", null);

} else {

alert("아이디와 비밀번호를 확인해주세요.");

return;

}

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차 (1)	2023.11.01
2023.10.27 / Step 8 [DOM_canvas] - 코딩 78 일차 (0)	2023.10.27
2023.10.25 / Step 7 [DOM_Diary] - 코딩 76 일차 (0)	2023.10.25
2023.10.24 / Step 7 [DOM_Board_reply] - 코딩 75 일차 (0)	2023.10.24
2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차 (0)	2023.10.23

'코딩/2023 JavaScript DOM' Related Articles

라라리라

2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차 본문

2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

티스토리툴바