라라리라
2023.10.24 / Step 7 [DOM_Board_reply] - 코딩 75 일차 본문
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="main.js" type="module"></script>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
</body>
</html>
controllerMain.js
import { PageHeader } from "./pageHeader.js";
import { PageIndex } from "./pageIndex.js";
import { PageMemberJoin } from "./pageMemberJoin.js";
import { PageMemberList } from "./pageMemberList.js";
import { PageMemberLogin } from "./pageMemberLogin.js";
import { PageBoardList } from "./pageBoardList.js";
import { PageBoardInfo } from "./pageBoardInfo.js";
import { PageBoardModify } from "./pageBoardModify.js";
import { PageBoardWrite } from "./pageBoardWrite.js";
import { PageBoardListPaging } from "./pageBoardListPaging.js";
import { PageBoardWriteReply } from "./pageBoardWriteReply.js";
// Controller 클래스는 싱글톤
export class ControllerMain {
static instance = new ControllerMain()
static getInstance(){ return ControllerMain.instance; }
start() {
this.log = null;
this.pageList = {};
this.setPageList();
this.changePage("page-header", null);
this.changePage("page-index", null);
}
setPageList() {
this.pageList["page-header"] = new PageHeader();
this.pageList["page-index"] = new PageIndex();
this.pageList["page-memberJoin"] = new PageMemberJoin();
this.pageList["page-memberList"] = new PageMemberList();
this.pageList["page-memberLogin"] = new PageMemberLogin();
this.pageList["page-boardList"] = new PageBoardList();
this.pageList["page-boardInfo"] = new PageBoardInfo();
this.pageList["page-boardModify"] = new PageBoardModify();
this.pageList["page-boardWrite"] = new PageBoardWrite();
this.pageList["page-boardListPaging"] = new PageBoardListPaging();
this.pageList["page-boardWriteReply"] = new PageBoardWriteReply();
}
changePage(pageName, data) {
this.pageList[pageName].execute(data);
}
}
pageHeader.js
import { ControllerMain } from "./controllerMain.js";
export class PageHeader {
execute(data) {
let $header = document.querySelector("#header");
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#header-menu {
margin: 0 auto;
text-align: center;
width: 500px;
height: 100px;
}
</style>
`;
// [로그아웃] 상태 화면
if(ControllerMain.getInstance().log == null) {
tag +=
`
<table id="header-menu">
<tr>
<td>
<button id="btn-indexPage">메인화면</button>
</td>
<td>
<button id="btn-memberJoinPage">회원가입</button>
</td>
<td>
<button id="btn-memberLoginPage">로그인</button>
</td>
</tr>
</table>
`;
} else {
// [로그인] 상태 화면
tag +=
`
<table id="header-menu">
<tr>
<td>
<button id="btn-indexPage">메인화면</button>
</td>
<td>
<button id="btn-memberListPage">회원 전체목록</button>
</td>
<td>
<button id="btn-memberLogoutPro">로그아웃</button>
</td>
<td>
<button id="btn-boardListPage">게시판</button>
</td>
<td>
<button id="btn-boardListPaging">게시판 페이징</button>
</td>
</tr>
</table>
`;
}
$header.innerHTML = tag;
// [로그아웃] 상태 화면
if(ControllerMain.getInstance().log == null) {
document.querySelector("#btn-indexPage").addEventListener("click", this.indexPageClick);
document.querySelector("#btn-memberJoinPage").addEventListener("click", this.memberJoinPageClick);
document.querySelector("#btn-memberLoginPage").addEventListener("click", this.memberLoginPageClick);
} else {
document.querySelector("#btn-indexPage").addEventListener("click", this.indexPageClick);
document.querySelector("#btn-memberListPage").addEventListener("click", this.memberListPageClick);
document.querySelector("#btn-memberLogoutPro").addEventListener("click", this.memberLogoutProClick);
document.querySelector("#btn-boardListPage").addEventListener("click", this.boardListPageClick);
document.querySelector("#btn-boardListPaging").addEventListener("click", this.boardListPagingClick);
}
}
indexPageClick = (event) => {
ControllerMain.getInstance().changePage("page-index", null);
}
memberJoinPageClick = (event) => {
ControllerMain.getInstance().changePage("page-memberJoin", null);
}
memberListPageClick = (event) => {
ControllerMain.getInstance().changePage("page-memberList", null);
}
memberLoginPageClick = (event) => {
ControllerMain.getInstance().changePage("page-memberLogin", null);
}
memberLogoutProClick = (event) => {
alert("로그아웃 되었습니다.");
ControllerMain.getInstance().log = null;
ControllerMain.getInstance().changePage("page-header", null);
ControllerMain.getInstance().changePage("page-index", null);
}
boardListPageClick = (event) => {
ControllerMain.getInstance().changePage("page-boardList", null);
}
boardListPagingClick = (event) => {
ControllerMain.getInstance().changePage("page-boardListPaging", null);
}
}
pageIndex.js
export class PageIndex {
execute(data) {
let $content = document.querySelector("#content");
let tag = "";
tag += `
<style>
#content-index {
margin: 0 auto;
}
</style>
`;
tag += `
<table id="content-index">
<tr>
<td><h1>홈페이지 메인 화면</h1></td>
</tr>
</table>
`;
$content.innerHTML = tag;
}
}
pageMemberJoin.js
import { ControllerMain } from "./controllerMain.js";
import { JsonMemember } from "./jsonMember.js";
export class PageMemberJoin {
idCheck = false;
emailCheck = false;
$inputMemberId = null;
$buttonMemberIdCheckPro = null;
$inputMemberPw = null;
$inputMemberPwRe = null;
$inputMemberName = null;
$inputMemberEmail = null;
$buttonMemberEmailCheckPro = null;
$inputMemberPhone = null;
$inputMemberZonecode = null;
$inputMemberAddress = null;
$inputMemberAddressDetail = null;
$buttonDaumPostAPI = null;
$radioMemberGender = null;
$selectMemberRoute = null;
$checkMemberAllTerms = null;
$checkMemberTerms = null;
$btnMemberJoinPro = null;
execute(data) {
let $content = document.querySelector("#content");
let tag = "";
tag +=
`
<style>
#content-join {
margin: 0 auto;
width: 600px;
}
#title, #joinPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-join">
<tr>
<td colspan="3" id="title"><h2>회원가입</h2></td>
</tr>
<tr>
<td rowspan="2">아이디</td>
<td><input id="input-memberId" type="text" placeholder="아이디를 입력해주세요" value="qwer1234"></td>
<td><button id="button-memberIdCheckPro">중복확인</button></td>
</tr>
<tr>
<td id="msg-memberId" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">비밀번호</td>
<td colspan="2"><input id="input-memberPw" type="text" placeholder="비밀번호를 입력해주세요" value="Qwer1234!"></td>
</tr>
<tr>
<td id="msg-memberPw" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">비밀번호확인</td>
<td colspan="2"><input id="input-memberPwRe" type="text" placeholder="비밀번호를 한번 더 입력해주세요" value="Qwer1234!"></td>
</tr>
<tr>
<td id="msg-memberPwRe" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">이름</td>
<td colspan="2"><input id="input-memberName" type="text" placeholder="이름을 입력해주세요" value="홍길동"></td>
</tr>
<tr>
<td id="msg-memberName" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">이메일</td>
<td><input id="input-memberEmail" type="text" placeholder="이메일을 입력해주세요" value="qwer@naver.com"></td>
<td><button id="button-memberEmailCheckPro">중복확인</button></td>
</tr>
<tr>
<td id="msg-memberEmail" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">휴대폰</td>
<td colspan="2"><input id="input-memberPhone" type="text" placeholder="숫자만 입력해주세요" value="01012345678"></td>
</tr>
<tr>
<td id="msg-memberPhone" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">우편번호</td>
<td><input id="input-memberZonecode" type="text" placeholder="우편번호를 입력해주세요" value="02830"></td>
<td><button id="button-daumPostAPI">우편번호검색</button></td>
</tr>
<tr>
<td id="msg-memberZonecode" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">도로명 주소</td>
<td colspan="2"><input id="input-memberAddress" type="text" placeholder="도로명 주소를 입력해주세요" value="서울 성북구 아리랑로 3"></td>
</tr>
<tr>
<td id="msg-memberAddress" colspan="2"></td>
</tr>
<tr>
<td rowspan="2">남은 주소</td>
<td colspan="2"><input id="input-memberAddressDetail" type="text" placeholder="남은 주소를 입력해주세요" value="남은주소"></td>
</tr>
<tr>
<td id="msg-memberAddressDetail" colspan="2"></td>
</tr>
<tr>
<td>성별</td>
<td colspan="2">
<label><input type="radio" class="radio-memberGender" name="gender" value="1">남자</label>
<label><input type="radio" class="radio-memberGender" name="gender" value="2">여자</label>
<label><input type="radio" class="radio-memberGender" name="gender" value="0" checked>선택안함</label>
</td>
</tr>
<tr>
<td>유입 경로</td>
<td colspan="2">
<select id="select-memberRoute">
<option value="1">인터넷 검색</option>
<option value="2">지인 권유</option>
<option value="3">SNS</option>
<option value="4">광고</option>
<option value="0" selected>기타</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2">이용약관동의</td>
<td colspan="2">
<label><input id="check-memberAllTerms" type="checkbox">전체 동의</label>
</td>
</tr>
<tr>
<td colspan="2">
<label><input class="check-memberTerms" type="checkbox" value="1">이용약관 동의 (필수)<br></label>
<label><input class="check-memberTerms" type="checkbox" value="2">개인정보취급 동의 (필수)<br></label>
<label><input class="check-memberTerms" type="checkbox" value="3">만 14세 이상입니다. (필수)<br></label>
<label><input class="check-memberTerms" type="checkbox" value="0">마케팅 메일 수신 동의 (선택)<br></label>
</td>
</tr>
<tr>
<td colspan="3" id="joinPro">
<button id="button-memberJoinPro">가입하기</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
console.log("pageMemberJoin = " + ControllerMain.getInstance().pageList);
this.idCheck = false;
this.emailCheck = false;
this.$inputMemberId = document.querySelector("#input-memberId");
this.$inputMemberId.addEventListener("input", this.inputMemberIdInput);
this.$buttonMemberIdCheckPro = document.querySelector("#button-memberIdCheckPro");
this.$buttonMemberIdCheckPro.addEventListener("click", this.buttonMemberIdCheckProClick);
this.$inputMemberPw = document.querySelector("#input-memberPw");
this.$inputMemberPw.addEventListener("input", this.inputMemberPwInput);
this.$inputMemberPwRe = document.querySelector("#input-memberPwRe");
this.$inputMemberPwRe.addEventListener("input", this.inputMemberPwReInput);
this.$inputMemberName = document.querySelector("#input-memberName");
this.$inputMemberName.addEventListener("input", this.inputMemberNameInput);
this.$inputMemberEmail = document.querySelector("#input-memberEmail");
this.$inputMemberEmail.addEventListener("input", this.inputMemberEmailInput);
this.$buttonMemberEmailCheckPro = document.querySelector("#button-memberEmailCheckPro");
this.$buttonMemberEmailCheckPro.addEventListener("click", this.buttonMemberEmailCheckProClick);
this.$inputMemberPhone = document.querySelector("#input-memberPhone");
this.$inputMemberPhone.addEventListener("input", this.inputMemberPhoneInput);
this.$inputMemberZonecode = document.querySelector("#input-memberZonecode");
this.$inputMemberAddress = document.querySelector("#input-memberAddress");
this.$inputMemberAddressDetail = document.querySelector("#input-memberAddressDetail");
this.$radioMemberGender = document.querySelectorAll(".radio-memberGender");
this.$selectMemberRoute = document.querySelector("#select-memberRoute");
this.$buttonDaumPostAPI = document.querySelector("#button-daumPostAPI");
this.$buttonDaumPostAPI.addEventListener("click", this.execDaumPostcode);
this.$checkMemberAllTerms = document.querySelector("#check-memberAllTerms");
this.$checkMemberAllTerms.addEventListener("click", this.checkMemberAllTermsClick);
this.$checkMemberTerms = document.querySelectorAll(".check-memberTerms");
for(let i=0; i<this.$checkMemberTerms.length; i++) {
this.$checkMemberTerms[i].addEventListener("click", this.checkMemberTermsClick);
}
this.$btnMemberJoinPro = document.querySelector("#button-memberJoinPro");
this.$btnMemberJoinPro.addEventListener("click", this.buttonMemberJoinProClick);
}
/* 아이디 유효성 검사 */
inputMemberIdInput = (event) => {
let $msgMemberId = document.querySelector("#msg-memberId");
let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);
if(regExp.test(this.$inputMemberId.value)) {
$msgMemberId.innerHTML = "";
} else {
$msgMemberId.innerHTML = "<span style='color:#F03F40; font-size:12px;'>6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합</span>";
}
}
/* 아이디 중복검사 */
buttonMemberIdCheckProClick = (event) => {
let regExp = RegExp(/^[A-Za-z0-9_\-]{6,16}$/);
if(this.$inputMemberId.value == "") {
alert("아이디를 입력해주세요.");
this.$inputMemberId.focus();
} else if(!regExp.test(this.$inputMemberId.value)) {
alert("6자 이상 16자 이하의 영문 혹은 영문과 숫자를 조합");
this.$inputMemberId.value = "";
this.$inputMemberId.focus();
} else {
let result = JsonMemember.getInstance().memberIdCheckPro(this.$inputMemberId.value);
if(result == false) {
this.idCheck = true;
this.$inputMemberPw.focus();
alert("사용할 수 있는 아이디 입니다.");
} else {
this.$inputMemberId.value = "";
this.$inputMemberId.focus();
alert("사용 불가능한 아이디 입니다.");
}
}
}
/* 비밀번호 유효성 검사 */
inputMemberPwInput = (event) => {
let $msgMemberPw = document.querySelector("#msg-memberPw");
let regExp = RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^*()\-_=+\\\|\[\]{};:\'",.<>\/?]).{8,16}$/);
if(regExp.test(this.$inputMemberPw.value)) {
$msgMemberPw.innerHTML = "";
} else {
$msgMemberPw.innerHTML = "<span style='color:#F03F40; font-size:12px;'>영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자 조합</span>";
}
}
/* 비밀번호확인 유효성 검사 */
inputMemberPwReInput = (event) => {
let $msgMemberPwRe = document.querySelector("#msg-memberPwRe");
if(this.$inputMemberPw.value == this.$inputMemberPwRe.value) {
$msgMemberPwRe.innerHTML = "";
} else {
$msgMemberPwRe.innerHTML = "<span style='color:#F03F40; font-size:12px;'>동일한 비밀번호 입력</span>";
}
}
/* 이름 유효성 검사 */
inputMemberNameInput = (event) => {
let $msgMemberName = document.querySelector("#msg-memberName");
let regExp = RegExp(/^[가-힣]{2,6}$/);
if(regExp.test(this.$inputMemberName.value)) {
$msgMemberName.innerHTML = "";
} else {
$msgMemberName.innerHTML = "<span style='color:#F03F40; font-size:12px;'>2~6글자의 한글만 입력</span>";
}
}
/* 이메일 유효성 검사 */
inputMemberEmailInput = (event) => {
let $msgMemberEmail = document.querySelector("#msg-memberEmail");
let regExp = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
if(regExp.test(this.$inputMemberEmail.value)) {
$msgMemberEmail.innerHTML = "";
} else {
$msgMemberEmail.innerHTML = "<span style='color:#F03F40; font-size:12px;'>이메일 형식으로 입력해 주세요.</span>";
}
}
/* 이메일 중복검사 */
buttonMemberEmailCheckProClick = (event) => {
let regExp = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
if(this.$inputMemberEmail.value == "") {
alert("이메일을 입력해주세요.");
this.$inputMemberEmail.focus();
} else if(!regExp.test(this.$inputMemberEmail.value)) {
alert("이메일 형식으로 입력해 주세요.");
this.$inputMemberEmail.value = "";
this.$inputMemberEmail.focus();
} else {
this.emailCheck = true;
/* 기능 구현하기 */
let check = JsonMemember.getInstance().memberEmailCheckPro(this.$inputMemberEmail.value);
if(check == false) {
this.$inputMemberPhone.focus();
alert("사용 가능한 이메일입니다.");
} else {
this.$inputMemberEmail.value = "";
this.$inputMemberEmail.focus();
alert("사용 불가능한 이메일입니다.");
}
}
}
/* 휴대폰 유효성 검사 */
inputMemberPhoneInput = (event) => {
let $msgMemberPhone = document.querySelector("#msg-memberPhone");
let regExp = RegExp(/^01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4})$/);
if(regExp.test(this.$inputMemberPhone.value)) {
$msgMemberPhone.innerHTML = "";
} else {
$msgMemberPhone.innerHTML = "<span style='color:#F03F40; font-size:12px;'>휴대폰 형식으로 입력해 주세요.</span>";
}
}
/* 우편번호 검색 기능 */
execDaumPostcode = (event) => {
new daum.Postcode( {
oncomplete: function(data) {
document.querySelector("#input-memberZonecode").value = data.zonecode;
document.querySelector("#input-memberAddress").value = data.address;
document.querySelector("#input-memberAddressDetail").focus();
}
} ).open();
}
/* 전체동의 체크 자동화 기능 */
checkMemberAllTermsClick = (event) => {
if(this.$checkMemberAllTerms.checked) {
for(let i=0; i<this.$checkMemberTerms.length; i++) {
this.$checkMemberTerms[i].checked = true;
}
} else {
for(let i=0; i<this.$checkMemberTerms.length; i++) {
this.$checkMemberTerms[i].checked = false;
}
}
}
checkMemberTermsClick = (event) => {
let count = 0;
for(let i=0; i<this.$checkMemberTerms.length; i++) {
if(this.$checkMemberTerms[i].checked) {
count += 1;
}
}
if(count == this.$checkMemberTerms.length) {
this.$checkMemberAllTerms.checked = true;
} else {
this.$checkMemberAllTerms.checked = false;
}
}
/* 가입하기 */
buttonMemberJoinProClick = (event) => {
// 아이디 입력 확인
if(this.$inputMemberId.value == "") {
this.$inputMemberId.focus();
alert("아이디를 입력해주세요.");
return false;
}
// 아이디 중복확인
if(this.idCheck == false) {
alert("아이디를 중복확인을 해주세요.");
return false;
}
// 비밀번호 입력 확인
if(this.$inputMemberPw.value == "") {
alert("비밀번호를 입력해주세요.");
return false;
}
// 비밀번호확인 입력 확인
if(this.$inputMemberPwRe.value == "") {
alert("비밀번호 확인을 입력해주세요.");
return false;
}
// 이름 입력 확인
if(this.$inputMemberName.value == "") {
alert("이름을 입력해주세요.");
return false;
}
// 이메일 입력 확인
if(this.$inputMemberEmail.value == "") {
alert("이메일을 입력하세요.");
return false;
}
// 이메일 중복확인
if(this.emailCheck == false) {
alert("이메일 중복 확인를 해주세요.");
return false;
}
// 휴대폰 입력 확인
if(this.$inputMemberPhone.value == "") {
alert("휴대폰 번호를 입력해주세요.");
return false;
}
// 우편번호 입력 확인
if(this.$inputMemberZonecode.value == "") {
alert("우편번호를 입력해주세요.");
return false;
}
// 도로명 입력 확인
if(this.$inputMemberAddress.value == "") {
alert("도로명을 입력해주세요.");
return false;
}
// 남은 주소 입력 확인
if(this.$inputMemberAddressDetail.value == "") {
alert("남은 주소를 입력해주세요.");
return false;
}
// 이용약관 동의 필수항목 선택 확인
let checkResult = true;
for(let i=0; i<this.$checkMemberTerms.length - 1; i++) {
if(!this.$checkMemberTerms[i].checked) {
checkResult = false;
break;
}
}
if(checkResult == false) {
alert("필수 약관에 동의해주세요.");
return false;
}
let maxMemberNo = JsonMemember.getInstance().getMaxMemberNo();
let radioMemberGender = "";
for(let i=0; i<this.$radioMemberGender.length; i++) {
if(this.$radioMemberGender[i].checked) {
radioMemberGender = this.$radioMemberGender[i].value;
}
}
let checkMemberTerms = false;
if(this.$checkMemberTerms[3].checked) {
checkMemberTerms = true;
}
let member = {
"memberNo" : maxMemberNo + 1,
"memberId" : this.$inputMemberId.value,
"memberPw" : this.$inputMemberPw.value,
"memberName" : this.$inputMemberName.value,
"memberEmail" : this.$inputMemberEmail.value,
"memberPhone" : this.$inputMemberPhone.value,
"memberZonecode" : this.$inputMemberZonecode.value,
"memberAddress" : this.$inputMemberAddress.value,
"memberAddressDetail" : this.$inputMemberAddressDetail.value,
"memberGender" : radioMemberGender,
"memberRoute" : this.$selectMemberRoute.value,
"memberTerms" : checkMemberTerms,
};
JsonMemember.getInstance().addMember(member);
// 이동하기
alert("회원가입을 축하합니다.");
ControllerMain.getInstance().changePage("page-index", null);
}
}
pageMemberList.js
import { JsonMemember } from "./jsonMember.js";
export class PageMemberList {
execute(data) {
let $content = document.querySelector("#content");
let tag = "";
tag +=
`
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
#content-memberList {
margin: 0 auto;
width: 1200px;
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-memberList">
<tr>
<td colspan="12"><h1>회원 전체 목록</h1></td>
</tr>
<tr>
<td>번호</td>
<td>아이디</td>
<td>비밀번호</td>
<td>이름</td>
<td>이메일</td>
<td>연락처</td>
<td>우편번호</td>
<td>도로명</td>
<td>나머지주소</td>
<td>성별</td>
<td>유입경로</td>
<td>메일 수신동의</td>
</tr>
`;
let genderList = ["선택안함", "남자", "여자"];
let routeList = ["기타", "인터넷 검색", "지인 권유", "SNS", "광고"];
let memberList = JsonMemember.getInstance().getMemberList();
for(let i=0; i<memberList.length; i++) {
tag +=
`
<tr>
<td>${memberList[i].memberNo}</td>
<td>${memberList[i].memberId}</td>
<td>${memberList[i].memberPw}</td>
<td>${memberList[i].memberName}</td>
<td>${memberList[i].memberEmail}</td>
<td>${memberList[i].memberPhone}</td>
<td>${memberList[i].memberZonecode}</td>
<td>${memberList[i].memberAddress}</td>
<td>${memberList[i].memberAddressDetail}</td>
<td>${genderList[memberList[i].memberGender]}</td>
<td>${routeList[memberList[i].memberRoute]}</td>
<td>${memberList[i].memberTerms}</td>
`;
}
tag += `</table> `;
$content.innerHTML = tag;
}
}
pageMemberLogin.js
import { JsonMemember } from "./jsonMember.js";
import { ControllerMain } from "./controllerMain.js";
export class PageMemberLogin {
$inputMemberId = null;
$inputMemberPw = null;
$buttonMemberLoginPro = null;
execute(data) {
let $content = document.querySelector("#content");
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-login {
margin: 0 auto;
}
#title, #loginPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-login">
<tr>
<td colspan="2" id="title"><h1>로그인</h1></td>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" id="input-memberId" value="qwer1234"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="text" id="input-memberPw" value="Qwer1234!"></td>
</tr>
<tr>
<td colspan="2" id="loginPro">
<button id="button-memberLoginPro">로그인</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
this.$inputMemberId = document.querySelector("#input-memberId");
this.$inputMemberPw = document.querySelector("#input-memberPw");
this.$buttonMemberLoginPro = document.querySelector("#button-memberLoginPro");
this.$buttonMemberLoginPro.addEventListener("click", this.memberLoginPro);
}
memberLoginPro = (event) => {
if(this.$inputMemberId.value == "") {
alert("아이디를 입력해주세요.");
this.$inputMemberId.focus();
return false;
}
if(this.$inputMemberPw.value == "") {
alert("비밀번호를 입력해주세요.");
this.$inputMemberPw.focus();
return false;
}
let result = JsonMemember.getInstance().loginMember(this.$inputMemberId.value, this.$inputMemberPw.value);
if(result) {
ControllerMain.getInstance().log = this.$inputMemberId.value;
ControllerMain.getInstance().changePage("page-header", null);
ControllerMain.getInstance().changePage("page-index", null);
} else {
alert("아이디와 비밀번호를 확인해주세요.");
this.$inputMemberId.value = "";
this.$inputMemberPw.value = "";
this.$inputMemberId.focus();
}
};
}
pageBoardList.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardList {
$boardNo = null;
$atagBoardInfoPage = null;
$buttonBoardModifyPro = null;
$buttonBoardDeletePro = null;
$buttonBoardWritePage = null;
$buttonBoardDummyAddPro = null;
$checkboxAll = null;
$checkboxBoard = null;
$buttonCheckBoardDeletePro = null;
execute(data) {
let $content = document.querySelector("#content");
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-board {
margin: 0 auto;
width: 700px;
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-board">
<tr>
<td colspan="8"><h1>게시판 목록</h1></td>
</tr>
<tr>
<td colspan="8" align="right">
<button id="button-boardWritePage">새글작성</button>
<button id="button-boardDummyAddPro">더미파일 추가하기</button>
</td>
</tr>
<tr>
<td>
<input id="checkbox-all" type="checkbox">전체선택
</td>
<td>
<button id="button-checkBoardDeletePro">선택 삭제</button>
</td>
</tr>
<tr>
<td>
선택
</td>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
<td>수정</td>
<td>삭제</td>
</tr>
`;
// let boardList = JsonBoard.getInstance().getBoardList();
let boardList = JsonBoard.getInstance().getBoardSortList();
for(let i=0; i<boardList.length; i++) {
tag +=
`
<tr>
<td>
<input class="checkbox-board" type="checkbox">
</td>
<td class="boardNo">${boardList[i].boardNo}</td>
<td align="left">
`;
if(boardList[i].reStep > 1) {
for(let j=1; j<boardList[i].reStep; j++) {
tag += `→`;
}
}
tag +=
`
<a class="atag-boardInfoPage" href="#">${boardList[i].title}</a>
</td>
<td>${boardList[i].writer}</td>
<td>${boardList[i].regDate}</td>
<td>${boardList[i].readCount}</td>
<td><button class="button-boardModifyPro">수정</button></td>
<td><button class="button-boardDeletePro">삭제</button></td>
</tr>
`;
}
tag += `</table>`;
$content.innerHTML = tag;
this.$boardNo = document.querySelectorAll(".boardNo");
this.$atagBoardInfoPage = document.querySelectorAll(".atag-boardInfoPage");
for(let i=0; i<this.$atagBoardInfoPage.length; i++) {
this.$atagBoardInfoPage[i].addEventListener("click", this.boardInfoPageClick);
}
this.$buttonBoardModifyPro = document.querySelectorAll(".button-boardModifyPro");
for(let i=0; i<this.$buttonBoardModifyPro.length; i++) {
this.$buttonBoardModifyPro[i].addEventListener("click", this.boardModifyPageClick);
}
this.$buttonBoardDeletePro = document.querySelectorAll(".button-boardDeletePro");
for(let i=0; i<this.$buttonBoardDeletePro.length; i++) {
this.$buttonBoardDeletePro[i].addEventListener("click", this.boardDeleteProClick);
}
this.$buttonBoardWritePage = document.querySelector("#button-boardWritePage");
this.$buttonBoardWritePage.addEventListener("click", this.boardWritePageClick);
this.$buttonBoardDummyAddPro = document.querySelector("#button-boardDummyAddPro");
this.$buttonBoardDummyAddPro.addEventListener("click", this.buttonBoardDummyAddProClick);
this.$checkboxAll = document.querySelector("#checkbox-all");
this.$checkboxAll.addEventListener("click", this.checkboxAllClick);
this.$checkboxBoard = document.querySelectorAll(".checkbox-board");
for(let i=0; i<this.$checkboxBoard.length; i++) {
this.$checkboxBoard[i].addEventListener("click", this.checkboxBoardClick);
}
this.$buttonCheckBoardDeletePro = document.querySelector("#button-checkBoardDeletePro");
this.$buttonCheckBoardDeletePro.addEventListener("click", this.buttonCheckBoardDeleteProClick);
}
boardInfoPageClick = (event) => {
let index = 0;
for(let i=0; i<this.$atagBoardInfoPage.length; i++) {
if(event.target == this.$atagBoardInfoPage[i]) {
index = i;
break;
}
}
ControllerMain.getInstance().changePage("page-boardInfo", this.$boardNo[index].innerText);
}
boardModifyPageClick = (event) => {
let index = 0;
for(let i=0; i<this.$buttonBoardModifyPro.length; i++) {
if(event.target == this.$buttonBoardModifyPro[i]) {
index = i;
break;
}
}
ControllerMain.getInstance().changePage("page-boardModify", this.$boardNo[index].innerText);
}
boardDeleteProClick = (event) => {
let index = 0;
for(let i=0; i<this.$buttonBoardDeletePro.length; i++) {
if(event.target == this.$buttonBoardDeletePro[i]) {
index = i;
break;
}
}
JsonBoard.getInstance().deleteBoard(this.$boardNo[index].innerText);
ControllerMain.getInstance().changePage("page-boardList", null);
}
boardWritePageClick = (event) => {
ControllerMain.getInstance().changePage("page-boardWrite", null);
}
buttonBoardDummyAddProClick = (event) => {
JsonBoard.getInstance().setBoardDummyAdd();
ControllerMain.getInstance().changePage("page-boardList", null);
}
checkboxAllClick = (event) => {
if(this.$checkboxAll.checked) {
for(let i=0; i<this.$checkboxBoard.length; i++) {
this.$checkboxBoard[i].checked = true;
}
} else {
for(let i=0; i<this.$checkboxBoard.length; i++) {
this.$checkboxBoard[i].checked = false;
}
}
}
checkboxBoardClick = (event) => {
let count = 0;
for(let i=0; i<this.$checkboxBoard.length; i++) {
if(this.$checkboxBoard[i].checked) {
count += 1;
}
}
if(count == this.$checkboxBoard.length) {
this.$checkboxAll.checked = true;
} else {
this.$checkboxAll.checked = false;
}
}
buttonCheckBoardDeleteProClick = (event) => {
let deleteList = [];
for(let i=0; i<this.$checkboxBoard.length; i++) {
if(this.$checkboxBoard[i].checked) {
deleteList.push(Number(this.$boardNo[i].innerHTML));
}
}
console.log(deleteList);
JsonBoard.getInstance().checkBoardDeletePro(deleteList);
ControllerMain.getInstance().changePage("page-boardList", null);
}
}
pageBoardInfo.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardInfo {
boardNo = null;
execute(data) {
let $content = document.querySelector("#content");
this.boardNo = Number(data);
let board = JsonBoard.getInstance().getBoard(this.boardNo)
// 게시글 조회수 1증가
board.readCount += 1;
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-boardInfo {
margin: 0 auto;
width: 500px;
}
#title, #boardPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-boardInfo">
<tr>
<td colspan="6" id="title"><h1>게시판 정보</h1></td>
</tr>
<tr>
<td>번호</td>
<td>${board.boardNo}</td>
<td>작성자</td>
<td>${board.writer}</td>
<td>작성일</td>
<td>${board.regDate}</td>
</tr>
<tr>
<td>제목</td>
<td>${board.writer}</td>
<td colspan="3">조회수</td>
<td>${board.readCount}</td>
</tr>
<tr>
<td>내용</td>
<td colspan="5">
<textarea rows="10" cols="50">${board.content}</textarea>
</td>
</tr>
<tr>
<td colspan="6" id="boardPro">
<button id="button-boardReplyPage">답글쓰기</button>
<button id="button-boardListPage">목록으로</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
let $buttonBoardReplyPage = document.querySelector("#button-boardReplyPage");
$buttonBoardReplyPage.addEventListener("click", this.boardReplyPage);
let $buttonBoardListPage = document.querySelector("#button-boardListPage");
$buttonBoardListPage.addEventListener("click", this.boardListPage);
}
boardReplyPage = (event) => {
ControllerMain.getInstance().changePage("page-boardWriteReply", this.boardNo);
}
boardListPage = (event) => {
ControllerMain.getInstance().changePage("page-boardList", null);
}
}
pageBoardModify.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardModify {
boardNo = 0;
execute(data) {
let $content = document.querySelector("#content");
this.boardNo = Number(data);
let board = JsonBoard.getInstance().getBoard(this.boardNo);
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-boardModify {
margin: 0 auto;
width: 500px;
}
#title, #boardPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-boardModify">
<tr>
<td colspan="6" id="title"><h1>게시판 정보</h1></td>
</tr>
<tr>
<td>번호</td>
<td>${board.boardNo}</td>
<td>작성자</td>
<td>${board.writer}</td>
<td>작성일</td>
<td>${board.regDate}</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" id="input-boardTitle" value="${board.title}"></td>
<td colspan="3">조회수</td>
<td>${board.readCount}</td>
</tr>
<tr>
<td>내용</td>
<td colspan="5">
<textarea rows="10" cols="50" id="textarea-boardContent">${board.content}</textarea>
</td>
</tr>
<tr>
<td colspan="6" id="boardPro">
<button id="button-boardReplyPage">수정하기</button>
<button id="button-boardListPage">목록으로</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
let $buttonBoardReplyPage = document.querySelector("#button-boardReplyPage");
$buttonBoardReplyPage.addEventListener("click", this.boardReplyPage);
let $buttonBoardListPage = document.querySelector("#button-boardListPage");
$buttonBoardListPage.addEventListener("click", this.boardListPage);
}
boardReplyPage = (event) => {
let inputBoardTitle = document.querySelector("#input-boardTitle").value;
let inputBoardContent = document.querySelector("#textarea-boardContent").value;
JsonBoard.getInstance().modifyBoard(this.boardNo, inputBoardTitle, inputBoardContent);
ControllerMain.getInstance().changePage("page-boardList", null);
}
boardListPage = (event) => {
ControllerMain.getInstance().changePage("page-boardList", null);
}
}
pageBoardWrite.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardWrite {
execute(data) {
let $content = document.querySelector("#content");
let log = ControllerMain.getInstance().log;
let maxBoardNo = JsonBoard.getInstance().getMaxBoardNo() + 1;
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-boardWrite {
margin: 0 auto;
width: 500px;
}
#title, #boardPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-boardWrite">
<tr>
<td colspan="4" id="title"><h1>새 게시글 작성</h1></td>
</tr>
<tr>
<td>번호</td>
<td>${maxBoardNo}</td>
<td>작성자</td>
<td>${log}</td>
</tr>
<tr>
<td>제목</td>
<td colspan="3"><input type="text" id="input-boardTitle"></td>
</tr>
<tr>
<td>내용</td>
<td colspan="3"><textarea rows="10" cols="50" id="textarea-boardContent"></textarea></td>
</tr>
<tr>
<td colspan="4" id="boardPro">
<button id="button-boardWritePro">작성하기</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
let $buttonBoardWritePro = document.querySelector("#button-boardWritePro");
$buttonBoardWritePro.addEventListener("click", this.boardWritePro);
}
boardWritePro = (event) => {
let inputBoardTitle = document.querySelector("#input-boardTitle").value;
let textareaBoardContent = document.querySelector("#textarea-boardContent").value;
JsonBoard.getInstance().boardWritePro(inputBoardTitle, textareaBoardContent);
ControllerMain.getInstance().changePage("page-boardList", null);
}
}
pageBoardListPaging.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardListPaging {
전체게시글수 = 0;
한페이지에보여줄게시글수 = 0;
현재페이지번호 = 0;
게시글시작번호 = 0;
게시글마침번호 = 0;
페이지번호개수 = 0;
페이지시작번호 = 0;
페이지마침번호 = 0;
execute(data) {
console.log("data = " + data);
let $content = document.querySelector("#content");
/*
1. 전체 게시글 수 = 18개
2. 한 페이지에 보여줄 게시글 수 = 5개
3. 현재 페이지 번호
4. 현재 페이지의 게시글 시작번호
5. 현재 페이지의 게시글 마침번호
*/
this.전체게시글수 = JsonBoard.getInstance().getBordCount();
this.한페이지에보여줄게시글수 = 5;
this.현재페이지번호 = 1;
this.게시글시작번호 = 0;
this.게시글마침번호 = 0;
// 현재 페이지번호는 하단에 번호를 클릭할 때마다 변경된다.
if(data != null) {
this.현재페이지번호 = Number(data);
}
// 게시글 시작번호 계산하기
this.게시글시작번호 = (this.현재페이지번호 - 1) * this.한페이지에보여줄게시글수;
// 게시글 마침번호 계산하기
this.게시글마침번호 = this.게시글시작번호 + this.한페이지에보여줄게시글수;
if(this.게시글마침번호 > this.전체게시글수) {
this.게시글마침번호 = this.전체게시글수;
}
// 게시글 가져오기
let boardList = JsonBoard.getInstance().getBoardPagingList(this.게시글시작번호, this.게시글마침번호);
// console.log("전체게시글수 = " + this.전체게시글수);
// console.log("현재페이지번호 = " + this.현재페이지번호);
// console.log("게시글시작번호 = " + this.게시글시작번호);
// console.log("게시글마침번호 = " + this.게시글마침번호);
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-board {
margin: 0 auto;
width: 700px;
text-align: center;
}
#content-boardPaging {
margin: 0 auto;
width: 200px;
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-board">
<tr>
<td colspan="6">
<h1>게시판 목록 : <span style="color:red">${this.전체게시글수}개</span></h1>
</td>
</tr>
<tr>
<td colspan="6" align="right">
<button id="button-boardDummyAddPro">더미파일 추가하기</button>
</td>
</tr>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
`;
for(let i=0; i<boardList.length; i++) {
tag +=
`
<tr>
<td class="boardNo">${boardList[i].boardNo}</td>
<td>${boardList[i].title}</td>
<td>${boardList[i].writer}</td>
<td>${boardList[i].regDate}</td>
</tr>
`;
}
tag += `</table>`;
/*
하단 페이지 번호 처리
1. 화면에 출력할 페이지 번호 개수 = 5개
2. 페이지 시작번호
3. 페이지 마침번호
4. 전체 페이지 개수
*/
this.페이지번호개수 = 5;
this.페이지시작번호 = 0;
this.페이지마침번호 = 0;
this.전체페이지개수 = parseInt(this.전체게시글수 / this.한페이지에보여줄게시글수);
if(this.전체게시글수 % this.한페이지에보여줄게시글수 > 0) {
this.전체페이지개수 += 1;
}
if(this.현재페이지번호 % this.페이지번호개수 == 0) {
this.페이지시작번호 = (parseInt(this.현재페이지번호 / this.페이지번호개수) - 1) * 5 + 1;
} else {
this.페이지시작번호 = parseInt(this.현재페이지번호 / this.페이지번호개수) * 5 + 1;
}
this.페이지마침번호 = this.페이지시작번호 + this.페이지번호개수;
if(this.페이지마침번호 > this.전체페이지개수) {
this.페이지마침번호 = this.전체페이지개수 + 1;
}
tag +=
`
<table id="content-boardPaging">
<tr>
`;
if(this.페이지시작번호 > 1) {
tag +=
`
<td>
<a id="atag-before" href="#">[이전]</a>
</td>
`;
}
for(let i=this.페이지시작번호; i< this.페이지마침번호; i++) {
tag +=
`
<td>
<a class="atag-boardListPagingPage" href="#">${i}</a>
</td>
`;
}
if(this.페이지마침번호 < this.전체페이지개수) {
tag +=
`
<td>
<a id="atag-after" href="#">[이후]</a>
</td>
</tr>
</table>
`;
}
$content.innerHTML = tag;
this.$buttonBoardDummyAddPro = document.querySelector("#button-boardDummyAddPro");
this.$buttonBoardDummyAddPro.addEventListener("click", this.buttonBoardDummyAddProClick);
this.$atagBoardListPagingPage = document.querySelectorAll(".atag-boardListPagingPage");
for(let i=0; i<this.$atagBoardListPagingPage.length; i++) {
this.$atagBoardListPagingPage[i].addEventListener("click", this.atagBoardListPagingPageClick);
}
this.$atagBefore = document.querySelector("#atag-before");
if(this.$atagBefore != null) {
this.$atagBefore.addEventListener("click", this.atagBeforeClick);
}
this.$atageAfter = document.querySelector("#atag-after");
if(this.$atageAfter != null) {
this.$atageAfter.addEventListener("click", this.atageAfterClick);
}
}
buttonBoardDummyAddProClick = (event) => {
JsonBoard.getInstance().setBoardDummyAdd();
ControllerMain.getInstance().changePage("page-boardListPaging", null);
}
atagBoardListPagingPageClick = (event) => {
let index = 0;
for(let i=0; i<this.$atagBoardListPagingPage.length; i++) {
if(event.target == this.$atagBoardListPagingPage[i]) {
index = i;
break;
}
}
this.현재페이지번호 = this.$atagBoardListPagingPage[index].innerText;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
atagBeforeClick = (event) => {
this.현재페이지번호 = this.페이지시작번호 - 1;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
atageAfterClick = (event) => {
this.현재페이지번호 = this.페이지마침번호;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
}
pageBoardListPaging.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardListPaging {
전체게시글수 = 0;
한페이지에보여줄게시글수 = 0;
현재페이지번호 = 0;
게시글시작번호 = 0;
게시글마침번호 = 0;
페이지번호개수 = 0;
페이지시작번호 = 0;
페이지마침번호 = 0;
execute(data) {
console.log("data = " + data);
let $content = document.querySelector("#content");
/*
1. 전체 게시글 수 = 18개
2. 한 페이지에 보여줄 게시글 수 = 5개
3. 현재 페이지 번호
4. 현재 페이지의 게시글 시작번호
5. 현재 페이지의 게시글 마침번호
*/
this.전체게시글수 = JsonBoard.getInstance().getBordCount();
this.한페이지에보여줄게시글수 = 5;
this.현재페이지번호 = 1;
this.게시글시작번호 = 0;
this.게시글마침번호 = 0;
// 현재 페이지번호는 하단에 번호를 클릭할 때마다 변경된다.
if(data != null) {
this.현재페이지번호 = Number(data);
}
// 게시글 시작번호 계산하기
this.게시글시작번호 = (this.현재페이지번호 - 1) * this.한페이지에보여줄게시글수;
// 게시글 마침번호 계산하기
this.게시글마침번호 = this.게시글시작번호 + this.한페이지에보여줄게시글수;
if(this.게시글마침번호 > this.전체게시글수) {
this.게시글마침번호 = this.전체게시글수;
}
// 게시글 가져오기
let boardList = JsonBoard.getInstance().getBoardPagingList(this.게시글시작번호, this.게시글마침번호);
// console.log("전체게시글수 = " + this.전체게시글수);
// console.log("현재페이지번호 = " + this.현재페이지번호);
// console.log("게시글시작번호 = " + this.게시글시작번호);
// console.log("게시글마침번호 = " + this.게시글마침번호);
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-board {
margin: 0 auto;
width: 700px;
text-align: center;
}
#content-boardPaging {
margin: 0 auto;
width: 200px;
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-board">
<tr>
<td colspan="6">
<h1>게시판 목록 : <span style="color:red">${this.전체게시글수}개</span></h1>
</td>
</tr>
<tr>
<td colspan="6" align="right">
<button id="button-boardDummyAddPro">더미파일 추가하기</button>
</td>
</tr>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
`;
for(let i=0; i<boardList.length; i++) {
tag +=
`
<tr>
<td class="boardNo">${boardList[i].boardNo}</td>
<td>${boardList[i].title}</td>
<td>${boardList[i].writer}</td>
<td>${boardList[i].regDate}</td>
</tr>
`;
}
tag += `</table>`;
/*
하단 페이지 번호 처리
1. 화면에 출력할 페이지 번호 개수 = 5개
2. 페이지 시작번호
3. 페이지 마침번호
4. 전체 페이지 개수
*/
this.페이지번호개수 = 5;
this.페이지시작번호 = 0;
this.페이지마침번호 = 0;
this.전체페이지개수 = parseInt(this.전체게시글수 / this.한페이지에보여줄게시글수);
if(this.전체게시글수 % this.한페이지에보여줄게시글수 > 0) {
this.전체페이지개수 += 1;
}
if(this.현재페이지번호 % this.페이지번호개수 == 0) {
this.페이지시작번호 = (parseInt(this.현재페이지번호 / this.페이지번호개수) - 1) * 5 + 1;
} else {
this.페이지시작번호 = parseInt(this.현재페이지번호 / this.페이지번호개수) * 5 + 1;
}
this.페이지마침번호 = this.페이지시작번호 + this.페이지번호개수;
if(this.페이지마침번호 > this.전체페이지개수) {
this.페이지마침번호 = this.전체페이지개수 + 1;
}
tag +=
`
<table id="content-boardPaging">
<tr>
`;
if(this.페이지시작번호 > 1) {
tag +=
`
<td>
<a id="atag-before" href="#">[이전]</a>
</td>
`;
}
for(let i=this.페이지시작번호; i< this.페이지마침번호; i++) {
tag +=
`
<td>
<a class="atag-boardListPagingPage" href="#">${i}</a>
</td>
`;
}
if(this.페이지마침번호 < this.전체페이지개수) {
tag +=
`
<td>
<a id="atag-after" href="#">[이후]</a>
</td>
</tr>
</table>
`;
}
$content.innerHTML = tag;
this.$buttonBoardDummyAddPro = document.querySelector("#button-boardDummyAddPro");
this.$buttonBoardDummyAddPro.addEventListener("click", this.buttonBoardDummyAddProClick);
this.$atagBoardListPagingPage = document.querySelectorAll(".atag-boardListPagingPage");
for(let i=0; i<this.$atagBoardListPagingPage.length; i++) {
this.$atagBoardListPagingPage[i].addEventListener("click", this.atagBoardListPagingPageClick);
}
this.$atagBefore = document.querySelector("#atag-before");
if(this.$atagBefore != null) {
this.$atagBefore.addEventListener("click", this.atagBeforeClick);
}
this.$atageAfter = document.querySelector("#atag-after");
if(this.$atageAfter != null) {
this.$atageAfter.addEventListener("click", this.atageAfterClick);
}
}
buttonBoardDummyAddProClick = (event) => {
JsonBoard.getInstance().setBoardDummyAdd();
ControllerMain.getInstance().changePage("page-boardListPaging", null);
}
atagBoardListPagingPageClick = (event) => {
let index = 0;
for(let i=0; i<this.$atagBoardListPagingPage.length; i++) {
if(event.target == this.$atagBoardListPagingPage[i]) {
index = i;
break;
}
}
this.현재페이지번호 = this.$atagBoardListPagingPage[index].innerText;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
atagBeforeClick = (event) => {
this.현재페이지번호 = this.페이지시작번호 - 1;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
atageAfterClick = (event) => {
this.현재페이지번호 = this.페이지마침번호;
ControllerMain.getInstance().changePage("page-boardListPaging", this.현재페이지번호);
}
}
pageBoardWriteReply.js
import { ControllerMain } from "./controllerMain.js";
import { JsonBoard } from "./jsonBoard.js";
export class PageBoardWriteReply {
boardNo = null;
execute(data) {
let $content = document.querySelector("#content");
this.boardNo = Number(data);
let log = ControllerMain.getInstance().log;
let maxBoardNo = JsonBoard.getInstance().getMaxBoardNo() + 1;
let tag = "";
tag +=
`
<style>
table, tr, td {
border-collapse: collapse;
border: 1px solid black;
}
#content-boardWrite {
margin: 0 auto;
width: 500px;
}
#title, #boardPro {
text-align: center;
}
</style>
`;
tag +=
`
<table id="content-boardWrite">
<tr>
<td colspan="4" id="title"><h1>답글 게시글 작성</h1></td>
</tr>
<tr>
<td>번호</td>
<td>${maxBoardNo}</td>
<td>작성자</td>
<td>${log}</td>
</tr>
<tr>
<td>제목</td>
<td colspan="3"><input type="text" id="input-boardTitle"></td>
</tr>
<tr>
<td>내용</td>
<td colspan="3"><textarea rows="10" cols="50" id="textarea-boardContent"></textarea></td>
</tr>
<tr>
<td colspan="4" id="boardPro">
<button id="button-boardWriteReplyPro">답글 작성하기</button>
</td>
</tr>
</table>
`;
$content.innerHTML = tag;
let $buttonBoardWriteReplyPro = document.querySelector("#button-boardWriteReplyPro");
$buttonBoardWriteReplyPro.addEventListener("click", this.boardWriteReplyPro);
}
boardWriteReplyPro = (event) => {
let inputBoardTitle = document.querySelector("#input-boardTitle").value;
let textareaBoardContent = document.querySelector("#textarea-boardContent").value;
JsonBoard.getInstance().boardWriteReplyPro(inputBoardTitle, textareaBoardContent, this.boardNo);
ControllerMain.getInstance().changePage("page-boardList", null);
}
}
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차 (0) | 2023.10.26 |
|---|---|
| 2023.10.25 / Step 7 [DOM_Diary] - 코딩 76 일차 (0) | 2023.10.25 |
| 2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차 (0) | 2023.10.23 |
| 2023.10.20 / Step 7 [DOM_member] - 코딩 73 일차 (0) | 2023.10.20 |
| 2023.10.19 / Step 7 [DOM_member] - 코딩 72 일차 (0) | 2023.10.19 |