12_마이페이지>포인트 ② 계좌등록, 계좌관리 팝업

이제 팝업창들 작업하면 된다,,!

이번 포스팅에서는

④ 계좌등록팝업

⑤ 계좌관리팝업     을 할 계획

포인트메인 스타일과 팝업창 스타일은 네이버페이를 따라했다 ㅎㅎ,.,,! 

 

포인트헤더에서 <충전하기><인출하기><계좌관리> 버튼을 클릭하면, 각각 팝업창들이 뜬다.

실제로 계좌와의 연결은 못해서......이번 프로젝트에서는 계좌를 등록하면 실제 본인 명의의 계좌와 연결되었다고 가정하고 코드를 진행했다.

계좌등록 팝업은 충전/인출/계좌관리 팝업창 모두에 있는 <+ 계좌 등록> 버튼을 클릭하면 뜬다.

ㅎ...팝업창 제목이 다 '같이사자 계좌관리'라고 되어있네...바꿔야겠다....

 

④ 계좌등록팝업

계좌 등록 팝업창에 필요한 데이터는 selectbox에 띄워 줄 은행 목록과 은행에 따른 입력 계좌번호 자릿수이다.

DB의 은행테이블에는 은행 10개와 해당 은행의 계좌번호 자릿수를 저장해놨다.

은행을 선택하면 해당 자릿수만큼 계좌번호 입력할 수 있도록 input의 maxlength 속성을 설정할 것이다.

DB에 은행 테이블 데이터

option 의 value값으로 은행의 code와 digit(자릿수) 2개를 넘겨주고 싶어서 『,』를 구분자로 값을 2개 넣었다.

<tr>
    <th>은행 선택</th>
    <td>   
        <select class="form-select bank-select" aria-label="Default select example">
            <option value="0" selected>--선택--</option>
            <c:forEach var="bank" items="${bankList }">
                <option value="${bank.code },${bank.digit}">${bank.name }</option>
            </c:forEach>
        </select>
    </td>
</tr>

이 value값은 자바스크립트의 split()을 사용해서 『,』를 구분자로 배열로 만들었다.

그리고 가져온 digit(자릿수)는 계좌번호를 입력하는 input의 maxlength 속성값으로 넣어줬다~!!

$('.bank-select').on("change", function()
{
    arr = $(this).val().split(',');
    accountLength = Number(arr[1]);
    $('#account_number').val('');
    $('#account_number').attr('maxlength', accountLength);
});

계좌번호 input에는 숫자만 입력가능하도록 처리했다.

<tr>
    <th>계좌번호</th>
    <td>
        <input type="text" id="account_number" name="account_number" 
        class="accountNum" placeholder="'-' 없이 입력하세요."
        oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '&1');"/>
        <div class="accountInsert-notice">본인 명의 계좌만 등록 가능합니다.</div>
    </td>
</tr>

 

이제 계좌 등록 처리를 해줘야 하는데,,! 

우리 사이트에서는 계좌 최초 등록시 자동으로 해당 계좌를 사용자의 대표 계좌로 등록한다.

그렇기 때문에 2가지 경우로 나눠서 계좌 등록 처리를 해야 한다.

1. 대표계좌가 있는 경우 → 계좌테이블에만 INSERT 해주면 된다.
2. 대표계좌가 없는 경우 → 계좌테이블 INSERT + 대표계좌테이블 INSERT (프로시저 생성)

그 전에 기본적으로 해당 은행의 계좌 자릿수에 맞춰서 입력하지 않았을 때 화면!

 

1) 대표계좌가 있는 회원의 경우

현재 M11 회원의 등록된 계좌 및 대표계좌 여부이다.

계좌 1개만 등록되어 있고, 그 계좌가 대표계좌로 등록되어 있는 상태이다.

이제 제대로 입력하여 M11 회원의 새로운 계좌를 등록하면,

계좌가 등록되었다는 알림이 뜨고 <확인>을 누르면 계좌 등록 팝업창은 닫힌다.

이제 다시 M11 회원의 계좌 DB를 보면, 현재 입력한 계좌가 대표계좌가 아닌 상태로 추가된 거 확인~!

2) 대표계좌가 없는 회원의 경우 (=계좌 최초 등록 회원)

M203 회원은 등록된 계좌가 하나도 없는 상태였고, 프로시저를 사용해서 계좌 등록을 완료했다

 

 

 

⑤ 계좌관리팝업

여기서 할 일은,,!

1. 계좌 목록 불러오기

2. <대표계좌로 설정> 처리

3. <삭제> 처리

 

1. 계좌 목록 불러오기

계좌 관리 팝업에서 필요한 데이터는 

회원의 계좌목록(계좌코드, 은행이름, 계좌번호[3자리+****+4자리 처리], 대표계좌여부) 이다.

+ 삭제계좌 테이블이 있기 때문에 목록을 띄울 때, 삭제계좌 테이블에 없는 것들만 가져와야 한다!

 

계좌 관리 팝업의 계좌 목록 불러오는거는 SQL구문도 코드 처리에도 어려운 거 없어서 빠르게 했다.

다시 M11 회원으로 돌아와서,,! M11 회원 계좌를 2개 더 추가한 상태의 DB와

코드 작업을 완료한 M11 회원의 계좌 관리 팝업창이다.

2. <대표계좌로 설정> 처리

계좌 최초 등록 시, 자동으로 대표계좌로 설정되고, 대표계좌는 삭제할 수 없다.

(영구 정지 당했을 때, 회원의 대표계좌로 남은 포인트를 환불 처리해주기 위해서!...!)

그렇기 때문에 <대표계좌로 설정> 버튼을 누를 수 있는 회원은 이미 대표계좌 1개 일반계좌 최소 1개를 갖고 있는 상태인 것이다. 기존의 대표계좌를 현재 선택한 계좌로 UPDATE 처리해주면 된다.

 

🔥 아,,,<대표계좌로 설정> <삭제> 버튼이 첫번째 것만 눌리고 2번째 줄 부터는 동작을 안해서 계속 뭐가 문젠지 코드 들여다보다가,,,,! ㅎㅎ...버튼이 forEach 문을 돌면서 생성되니까 여러개인데 id로 jQuery를 걸어서였다..! id는 지우고 class로 해주니까 정상적으로 동작했다...바보같았ㄷ...ㅎㅋ

 

<대표계좌로 설정> 버튼에 value값으로 계좌코드를 넣었다. 클릭 시, 계좌코드를 주소로 넘겨줬다.

// <대표계좌로 설정> 버튼 클릭 시,
$('.mainAccount-setBtn').click(function()
{
    location.href = 'point_updatemainaccount.lion?code=' + $(this).val();
});

M11 회원의 원래 대표계좌는 KB국민 543****3211 이었는데, 카카오뱅크 456****6355 로 변경해보았다.

대표계좌 설정 완료 후 알림 (뒤에 카카오뱅크 계좌가 대표계좌로 바뀐 거 확인 가능)

M11 회원의 대표계좌가 카카오뱅크 계좌로 변경되었음

 

 

3. <삭제> 처리

대표계좌는 삭제가 불가하고 아예 삭제 버튼도 만들어놓지 않았다.

일반계좌 삭제 시, 계좌를 아예 삭제하는 건 아니고 삭제계좌 테이블에 INSERT한다.

(어떤 계좌로 처리했는지 데이터를 남겨놓기 위해서)

 

대표계좌에는 아예 삭제 버튼을 만들지 않았지만, 그래도 <삭제>를 누른 계좌가 대표계좌인지 쿼리로 한 번 더 확인 후, 계좌 삭제를 진행한다.

<삭제> 버튼 클릭 시, 계좌코드를 주소로 넘겨줬다.

고럼 이제 M11 회원의 농협 계좌를 삭제해보면,,!!

<삭제> 클릭 시, 알림

삭제 완료 후 알림

M11 회원의 농협 계좌 삭제 완료

 

---

나머지 팝업 2개는 to be continue,,,,,

⑥ 포인트충전팝업

⑦ 포인트인출팝업