slPro 4차 일지

---

팀플을 하고 나서(마지막 글은 안 올렸지만 끝났다.) 주말은 푹 쉬고 오늘부터 다시 차근차근 시작하기로 했다.


1차 일지 - [ 설정 ], [ 회원가입 ]
2차 일지 - [ 로그인 ]
3차 일지 - [ index에서 로그인 상태에 따라 display none/block 제어하고 p태그 내용 바꾸기 ], [ 로그아웃 ]

4차 일지 - [ header에 회원 아이디, 회원정보/로그아웃 링크 or 비회원 문구 추가 후 로그인 상태에 따라 display none/block 제어 ], [ 일반 회원 정보 확인 ]

 

1. header - 문구 추가 후 로그인 상태에 따라 display none/block 제어

 <script type="text/javascript">
 	$(()=>{
		console.log('loginId: ${loginId}');
		let id = '${loginId}';
		if (id != ''){
			console.log('헤더) 로그인 된 아이디 있음')
			$('#loginIdHeader').html(id+"님&ensp;");
 			if (id == 'admin'){
 				$('#checkAM').html("회원 정보 확인");
 			}
 			document.getElementById("loginIdHeaderOn").style.display = 'block';
 			document.getElementById("loginIdHeaderOff").style.display = 'none';
		}else{
			console.log('헤더) 로그인 된 아이디 없음')
		}
	})
 </script>

<div style="height: 180px; background-color: #2e2e34;">
	
	<nav class="top-right">
	
		<div>
			<nav id="loginIdHeaderOn" style="padding: 15px 10px 0px 0px; float: right; display: none;">
				<p id="loginIdHeader" style="color: #fff; float: left;">test님</p>
				&ensp;<a href="/member/info" id="checkAM">내 정보 확인</a>
				&ensp;<a href="/member/logout">로그아웃</a>&ensp;
			</nav>
			<nav id="loginIdHeaderOff" style="padding: 15px 10px 0px 0px; float: right; display: block;">
				<p id="loginIdHeader" style="color: #fff; float: left;">현재 로그인 상태가 아닙니다.</p>
			</nav>
		</div>
		
		<ul class="top-menu" style="color: #d8d3cd">
			<li><a>menu1</a></li>
			<li><a>menu2</a></li>
			<li><a>menu3</a></li>
			<li><a>menu4</a></li>
		</ul>
		
	</nav>
	
</div>

• 정보 확인을 만들기 전에 쉬운 것부터 하기 위해 이것부터 진행했다.

 

비로그인 시

일반 회원 로그인 시

관리자 로그인 시

• 아직 index(메인화면)에서 노란박스를 변경하지 않았는데, 어떻게 변경하면 좋을지 고민중이다.

 

 

2. 정보 확인

• MemberController.java

@GetMapping("/member/info")
public String info(Model model, HttpSession session) {
    log.info("==> GetMapping - memberInfo 요청 <==");
    return "memberInfo";
}

• memberInfo.jsp 화면으로 넘김

 

• memberInfo.jsp

• 비동기 통신으로 할 필요는 없었지만, 연습 겸 비동기 통신으로 했다.

 

• body

<div>
    <p>현재 로그인 중인 id: ${loginId}</p>

    <div id="infoPwCh" style="display: block;">
        <input type="password" name="mPw" id="infoMPw" class="input" placeholder="비밀번호를 입력하세요" maxlength="20" autocapitalize="off">
        <div id="infoCh" style="display: none;"></div>
        <button type="submit" class="btn btn-3 btn-3e" id="infoSubBtn" style="text-align: center;">비밀번호 확인</button>
    </div>
    <div id="info">
    </div>
    <br>
    <button type="button" onclick="location.href='/'">메인화면</button>
</div>

 

• script

<script type="text/javascript">
    let loginId = '<%=(String)session.getAttribute("loginId")%>';
    $('#infoSubBtn').on('click',function(){
        let pw = $('#infoMPw').val();
        if (pw==''){
            $('#infoCh').html('비밀번호를 입력해주세요.').css('color','red');
            document.getElementById("infoCh").style.display = 'block';
            $('#infoMPw').focus();
            return;
        }
        let chPwSend = {mPw:pw};
        console.log("chPwSend: ",chPwSend);
        $.ajax({
            method:'get',	// post로 보낼 필요 없음
            url: '/member/memberInfo',
            data: chPwSend,
        }).done(function(res){
            console.log("res: ",res);
            let mDto = res;

            if(loginId=="admin"){
                $("#info").html("아직 작업 안 함!");
                document.getElementById("infoPwCh").style.display = 'none';
            }else{
                $("#info").html("<p>이름: "+mDto.mname+"</p>");
                $("#info").append("<p>이메일: "+mDto.memail+"</p>");
                if (mDto.gName!=null){
                    $("#info").append("<p>게임 닉네임: "+mDto.gname+"</p>");
                }
                $("#info").append("<p>가입 날짜: "+mDto.joinDate+"</p>");
                document.getElementById("infoPwCh").style.display = 'none';
            }

        }).fail((err,status)=>{
            console.log("err:", err);
            console.log("status:", status);
            $("#info").html("비밀번호가 틀렸습니다.");

        })
    });
</script>

 

• MemberAsyController.java

@GetMapping("/member/memberInfo")
public MemberDto memberInfo(@RequestParam(name = "mPw") String mPw, HttpSession session) {
    log.info("==> GetMapping - memberInfo 요청 <==");
    String mId = session.getAttribute("loginId").toString();
    if (mId.equals("admin")) {
        //return mSer.mInfoAd();
    }

    return mSer.memberInfo(mId, mPw);
}

• 주석 처리 해둔 부분은 관리자일 경우의 코드라 대충 정해놓기만 했다.

 

• MemberService.java

public MemberDto memberInfo(String mId, String mPw) {
    log.info("===> mSer memberInfo 요청 <===");
    BCryptPasswordEncoder pwEn = new BCryptPasswordEncoder();
    MemberDto mDto = mDao.memberInfo(mId);
    if(pwEn.matches(mPw, mDto.getMPw())) {
        return mDto;
    }
    return null;
}

• 사실 로그인 메소드를 사용하고 그 다음에 정보를 가져갈까? 했는데 그러면 불필요하게 DB를 두 번이나 가야하기 때문에 패스했다.
• BCryptPasswordEncoder의 matches는 무조건 앞에 변형 전 문자, 뒤에 변형 후 문자가 들어간다!

 

• MemberDao (java, xml)

• .java

MemberDto memberInfo(String mId);

 

• .xml

<select id="memberInfo" parameterType="String">
    select * from member where mId=#{param1}
</select>

 아직 이해하지 못했는데, 여기서 mId를 사용하니 파라미터가 없다면서 오류가 났다. 다른 것들에서는 잘 사용했는데 왜..? 반환값이 클래스라서 그런가..? 이 부분은 더 공부를 해야할 것 같다.

 

• 결과

처음 화면

공란으로 버튼 클릭 시

 

• 일반 회원

 

• 관리자 (아직 안 함)

 

---

 

전체 피드백

• index의 노란박스 고민) 헤더에서 해당 페이지가 무슨 페이지인지 확인 후 그것에 따라 변경하는 것이 가능하다면 헤더에 넣은 아이템들을 index에서만 저 노란박스에 보이게 하고, 그 외에는 헤더에서만 보이게 하고 싶은데 몇번 시도했으나 실패했고, 가능할지 모르겠다.
• 비밀번호 틀렸을 때의 경우를 작업 안 했다! 작업할 것!!

 

---