코딩/1-JavaScript

03_클래스버전_전체스태틱 - _01_member

tree0505 2025. 6. 9. 15:52
반응형
  • D10_dom_SPA_암기
  • 03_클래스버전_전체스태틱
  • _01_member
  • index.html 
    • 즉 html은 한개가 있고 
    • 나머지는 다 js 이다. 
  • 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>
        <!--
       
        <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();


    // 컨트롤러가. 지우고 그리고 하는곳
    // JsonMemember 배열
  • 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를 안하면 new를 할 수 없다. 사용 x

    // Controller 클래스는 싱글톤
    export class ControllerMain {

        // 전체스태틱
        static instance = new ControllerMain()   // 딱 하나의 인스턴스를 미리 만든다// 딱 하나의 인스턴스를 미리 만든다
        static getInstance(){ return ControllerMain.instance; }   // 그 인스턴스를 외부에서 가져올 수 있는 공식 메서드

        start() {
            // 로그인
            this.log = null;

            // 페이지 저장
            this.pageList = {}; //빈 객체 생성 
            this.setPageList();
            //

            // 5개중 2개 그려라 // 1개 해더, 1개는 인덱스
            //현재는 화면에 출력한것은 2개이다.  
            this.changePage("page-header", null);
            this.changePage("page-index", null);
            //함수 실행
       
            //this.pageList["page-header"].execute(null);
        }

        setPageList() {
            // 현재 필요한 모든페이지 저장

            //여기서 new를 해서 밑의 페이지가 생긴다.
            //준비만 해놓은것. 로딩. 화면에는 출력 x
            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);
             //this.pageList["page-header"].execute(null);
            //execute 같은 이름으로 함수를 만든것./
        }

    }


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

    }
  • pageHeader.js
  • ControllerMain.getInstance().log == null
    • 이건 변수 log를 가져오고 싶어서. 컨트롤러의 변수라고 알려줄려고 앞에 쓴것 
  •  let $header = document.querySelector("#header");
    • 이것은 index.html에서 가져온것 
  • import { ControllerMain } from "./controllerMain.js";

    export class PageHeader {

        execute(data) {
            let $header = document.querySelector("#header");
            //index에서 가져온것  
           
            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();
            }
        };

       
       




    }

 

반응형

'코딩 > 1-JavaScript' 카테고리의 다른 글

02_테트리스  (1) 2025.06.10
01_스네이크 ( 1 ~ 3 )  (1) 2025.06.10
D10_dom_SPA_암기 => 01_json버전 => _01_모듈화, _02_모둘화와html  (0) 2025.06.09
D10_dom_SPA_암기 => 01_json버전 => _00_basic => _01_json과함수, _02_json과Controller  (0) 2025.06.09
05_달력1단계 ~ 05_달력2단계  (0) 2025.06.05

'코딩/1-JavaScript'의 다른글

  • 현재글03_클래스버전_전체스태틱 - _01_member

관련글

티스토리툴바