라라리라

2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차 본문

코딩/2023 JavaScript DOM

2023.10.23 / Step 7 [DOM_Board] - 코딩 74 일차

헤실 2023. 10. 23. 17:56

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>

 

main.js

 

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

// 여기가 시작지점이다.
// Controller 클래스는 싱글톤
ControllerMain.getInstance().start();
JsonMemember.getInstance().start();

 

jsonMember.js

 


// Json클래스는 싱글톤 패턴
export class JsonMemember {

    static instance = new JsonMemember();
    static getInstance() { return JsonMemember.instance; }

    start() {
        this.memberList = null;
        this.setSampleData();  
    }

    setSampleData(){
        this.memberList = [
            {
                "memberNo"       : 1001,
                "memberId"       : "qwer1234",
                "memberPw"       : "Qwer1234!",
                "memberName"     : "송민석",
                "memberEmail"    : "qwer@naver.com",
                "memberPhone"    : "01012345678",
                "memberZonecode"  : "02830",
                "memberAddress" : "서울 성북구 아리랑로 3",
                "memberAddressDetail" : "아리랑아파트 102동 304호",
                "memberGender"   : 0,
                "memberRoute"    : 1,
                "memberTerms"    : true,
            },
            {
                "memberNo"      : 1002,
                "memberId"      : "abcd1234",
                "memberPw"      : "Abcd1234!",
                "memberName"    : "홍길동",
                "memberEmail"   : "abcd@daum.net",
                "memberPhone"   : "01023456789",
                "memberZonecode"  : "02830",
                "memberAddress" : "서울 성북구 아리랑로 3",
                "memberAddressDetail" : "아리랑아파트 102동 304호",
                "memberGender"   : 0,
                "memberRoute"    : 1,
                "memberTerms"    : true,
            },
            {
                "memberNo"    : 1003,
                "memberId"    : "asdf1234",
                "memberPw"    : "Asdf1234!",
                "memberName"  : "이수정",
                "memberEmail" : "asdf@hotmail.com",
                "memberPhone" : "01034567890",
                "memberZonecode"  : "02830",
                "memberAddress" : "서울 성북구 아리랑로 3",
                "memberAddressDetail" : "아리랑아파트 102동 304호",
                "memberGender"   : 0,
                "memberRoute"    : 1,
                "memberTerms"    : true,
            },
        ];  
    }

    memberIdCheckPro(memberId) {
        let check = false;
        for(let i=0; i<this.memberList.length; i++) {
            // if(this.memberList[i]["memberId"] == memberId) {
            if(this.memberList[i].memberId == memberId) {
                check = true;
                break;
            }
        }

        return check;
    }

    memberEmailCheckPro(memberEmail) {
        let check = false;
        for(let i=0; i<this.memberList.length; i++) {
            if(this.memberList[i].memberEmail == memberEmail) {
                check = true;
                break;
            }
        }

        return check;
    }

    getMaxMemberNo() {
        let maxMemberNo = 1000;
        for(let i=0; i<this.memberList.length; i++) {
            if(maxMemberNo < this.memberList[i].memberNo) {
                maxMemberNo = this.memberList[i].memberNo;
            }
        }
        return maxMemberNo;
    }

    addMember(member) {
        this.memberList.push(member);
        console.log(this.memberList);
    }

    getMemberList() {
        return this.memberList;
    }

    loginMember(memberId, memberPw) {
        let result = false;
        for(let i=0; i<this.memberList.length; i++) {
            if(this.memberList[i].memberId == memberId && this.memberList[i].memberPw == memberPw) {
                result = true;
                break;
            }
        }
        return result;
    }

}

 

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";

// 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();
    }

    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>
                </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);
        }
    }

    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);
    }
}

 

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();
        }
    };

   
   




}

 

 

저작자표시

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

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.20 / Step 7 [DOM_member] - 코딩 73 일차  (0) 2023.10.20
2023.10.19 / Step 7 [DOM_member] - 코딩 72 일차  (0) 2023.10.19
2023.10.18 / Step 6 [DOM_경마게임] - 코딩 71 일차  (0) 2023.10.18
'코딩/2023 JavaScript DOM' Related Articles more