I T H

[프로젝트] 11. 마이페이지 구현 (Week 3) 본문

Spring ArtGallery Project

[프로젝트] 11. 마이페이지 구현 (Week 3)

thdev 2024. 1. 23. 11:00

로그인한 정보를 통해 마이페이지에 접속하여

사용자 정보를 조회 및 수정할 수 있는 페이지를 구현.

 

로그인 시 세션에 아이디를 저장해놓고 

마이페이지에서 사용자 정보 조회 시 세션 정보를 가져와서 아이디를 사용하도록 함.

 

* 마이페이지에서 비밀번호를 입력하지 않는 경우는 비밀번호를 제외한 정보를 수정하도록 함.

* 반대로 비밀번호까지 입력하면 비밀번호를 포함하여 모든 정보를 수정하도록 함.

 

[ 로그인 성공 후 success 핸들러에 추가함 - CustomAuthenticationSuccessHandler.java ]

// 세션에 아이디 정보 담기 
		HttpSession session = request.getSession(true);
		Object principal = authentication.getPrincipal();
		if (principal != null && principal instanceof CustomUserInfo) {
			session.setAttribute("userId", ((CustomUserInfo) principal).getUsername());
		}

 

[ MainController.java ] - 수정 

package kr.co.art.biz.main.web;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/")
public class MainController {
	
	@RequestMapping("")
	public String main() {
		return "index";
	}
	
	/**
	 * 로그인 사용자 세션 확인
	 * @param param
	 * @param request
	 * @param session
	 * @return
	 */
	@RequestMapping("/findSession")
	@ResponseBody
	public Map<String, Object> findSession(@RequestBody Map<String, Object> param, HttpServletRequest request, HttpSession session) {
		
		Map<String, Object> list = new HashMap<String, Object>();
		String sessionId = (String) session.getAttribute("userId");
		System.out.println("sessionId : " + sessionId);
		
		list.put("sessionId", sessionId);
		
		return list;
	}
}

 

1. JSP / JS 파일 생성 

 

[ mypage.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title  -->
    <title>ART - 마이페이지</title>

	<!-- import CSS -->
	<%@include file="/resources/inc/incCss.jsp"%>
</head>

<body>

    <!-- ##### Main Content Wrapper Start ##### -->
    <div class="main-content-wrapper d-flex clearfix">

        <!-- import Header -->
		<%@include file="/resources/inc/incHeader.jsp"%>

        <div class="cart-table-area section-padding-100">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-lg-12">
                        <div class="checkout_details_area mt-50 clearfix">

                            <div class="cart-title">
                                <h2>마이페이지</h2>
                            </div>

                            <form action="#" method="post">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                    	<small>아이디</small>
                                        <input type="text" class="form-control" id="txtId" value="" placeholder="아이디 입력" required readOnly="readOnly">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                    	<small>&nbsp;</small>
                                    	&nbsp;
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>비밀번호</small>
                                        <input type="password" class="form-control" id="txtPwd" value="" placeholder="비밀번호 입력" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>비밀번호 확인</small>
                                        <input type="password" class="form-control" id="txtPwd2" value="" placeholder="비밀번호 다시 입력" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>사용자명</small>
                                        <input type="text" class="form-control" id="txtName" value="" placeholder="성명 입력">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>성별</small>
                                        <select class="w-100" id="cmbSex">
	                                        <option value="1">남자</option>
	                                        <option value="2">여자</option>
                                    	</select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>전화번호</small>
                                        <input type="number" class="form-control" id="txtTel" min="0" placeholder="전화번호 입력" value="">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>이메일</small>
                                        <input type="email" class="form-control" id="txtMail" placeholder="이메일 입력" value="">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>주소</small>
                                        <input type="text" class="form-control mb-3 txtAddrInfo" id="txtAddr" placeholder="주소 입력" value="">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<small>우편번호</small>
                                        <input type="text" class="form-control txtAddrInfo" id="txtZipCode" placeholder="우편번호 입력" value="">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                    	<div class="cart-btn mt-50">
			                                <a id="btnModify" href="javascript:void(0)" class="btn amado-btn w-100">정보 수정</a>
			                            </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ##### Main Content Wrapper End ##### -->

    <!-- import Footer -->
	<%@include file="/resources/inc/incFooter.jsp"%>

    <!-- import JS -->
	<%@include file="/resources/inc/incJs.jsp"%>
	
	<!-- 우편번호 api 사용 -->
	<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
	
	<!-- page script -->
	<script src="/resources/views/mypage.js"></script>

</body>

</html>

 

[ mypage.js ]

/*******************************************************************************
 * mypage.js
 * @author thkim
 * @since 2022
 * @DESC 마이페이지 화면 스크립트
 ******************************************************************************/
(function() {
	
	function Mypage() {
		
		/* 
		 * private variables
		 */
		
		/* 
		 * 초기화 메소드
		 */
		function _init() {
			// 이벤트 처리 함수 호출 
			bindEvent();
			
			// 로그인한 회원정보 조회 
			findUserInfo();
		}
		
		function bindEvent() {
			
			// 주소, 우편번호 입력란 클릭 이벤트 
			// 우편번호 api를 통해 주소찾는 팝업창 호출 
			// 검색완료 및 주소 선택 시 주소값을 입력란에 출력시켜줌
			$(".txtAddrInfo").on("click", function() {
				new daum.Postcode({
			        oncomplete: function(data) {
			            $("#txtAddr").val(data.address);
			            $("#txtZipCode").val(data.zonecode);
			        }
			    }).open();
			});
			
			// 정보 수정 버튼 클릭 이벤트
			$("#btnModify").on("click", function() {
				// validation check
				var obj = validationCheck();
				
				if(obj) {
					cfSave("/mypage/saveAccountInfo", obj, function(data) {
						if(data.success) {
							alert("사용자 정보 수정이 완료되었습니다.");
						}
					});
				} 
			});
		}
		
		/*
		 * 로그인한 사용자 정보 조회 
		 */
		function findUserInfo() {
			
			var obj = {
			};
			
			// 로그인한 세션이 존재하는지 체크 후 아이디 정보를 가져온다. 
			cfFind("/findSession", obj, function(data) {
				obj["id"] = data.sessionId;
			}, true, "POST");
			
			// 세션에서 가져온 로그인 아이디를 통해 사용자의 정보를 조회 후 화면에 출력한다.
			cfFind("/mypage/findUserId", obj, function(data) {
				if(data.length > 0) {
					// 조회한 로그인 사용자 정보 화면에 세팅 
					$("#txtId").val(data[0].USER_ID);
					$("#txtName").val(data[0].USER_NAME);
					$('#cmbSex').val(data[0].USER_SEX).niceSelect('update');
					$("#txtTel").val(data[0].USER_PHONE);
					$("#txtMail").val(data[0].USER_EMAIL);
					$("#txtAddr").val(data[0].USER_ADDR);
					$("#txtZipCode").val(data[0].ZIP_CODE);
				} else {
					alert("사용자 정보가 없습니다.");
					return;
				}
			}, true, "POST");
		}
		
		/*
		 * 사용자 입력 폼 필수 값 등 validation check
		 * 일반적인 사용자 등록 시 
		 */
		function validationCheck() {
			var obj = {};
			
			if($("#txtId").val() == null || $("#txtId").val() == "") {
				alert("사용자 아이디를 입력하시기 바랍니다.");
				$("#txtId").focus();
				return false;
			}
			obj.userId = $("#txtId").val();
			obj.authType = "1"; // 일반사용자 권한
			
			if($("#txtName").val() == null || $("#txtName").val() == "") {
				alert("사용자명을 입력하시기 바랍니다.");
				$("#txtName").focus();
				return false;
			}
			obj.userName = $("#txtName").val();
			
			if($("#txtMail").val() == null || $("#txtMail").val() == "") {
				alert("이메일을 입력하시기 바랍니다.");
				$("#txtMail").focus();
				return false;
			} else {
				// 이메일 형식 체크
				var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
				var result = checkRegexp($("#txtMail"), emailRegex);
				if(!result) {
					alert("이메일 형식을 확인하세요.");
					return false;
				}
			}
			obj.userEmail = $("#txtMail").val();
			
			// 비밀번호를 두개 모두 입력하지 않은 경우는 비밀번호 수정이 아닌것으로 판단하여 패스하도록 함 
			if($("#txtPwd").val() != "" && $("#txtPwd2").val() != "") {
				var password1 = $("#txtPwd").val();
				var password2 = $("#txtPwd2").val();
				
				if(password1.length < 8) {
					alert("비밀번호는 8자리 이상으로 설정하시기 바랍니다.");
					return false;
				}
				if(password1 != password2) {
					alert("비밀번호가 일치하지 않습니다.");
					return false;
				}
				obj.userPw = password1;
			} else {
				obj.userPw = "";
			}
			
			if($("#txtTel").val() == null || $("#txtTel").val() == "") {
				alert("전화번호를 입력하시기 바랍니다.");
				$("#txtTel").focus();
				return false;
			}
			obj.userPhone = $("#txtTel").val();
			
			// 주소, 우편번호, 성별 
			obj.userAddr = $("#txtAddr").val();
			obj.zipCode = $("#txtZipCode").val();
			obj.userSex = $("#cmbSex").val(); // 1: 남자, 2: 여자
			
			return obj;
		}
		
		function _finalize() {
		}
		
		return {
            init : _init,
            finalize : _finalize
        };
    };
    
    var mypage = new Mypage();
    mypage.init();
    
})();

//# sourceURL=mypage.js

2. 컨트롤러 및 백엔드 구성 

 

[ MypageController.java ] 

package kr.co.art.biz.mypage.web;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import kr.co.art.biz.mypage.persistence.MypageMapper;
import kr.co.art.biz.mypage.service.MypageService;
import kr.co.art.biz.register.domain.UserInfo;

@Controller
@RequestMapping("/mypage")
public class MypageController {
	
	@Autowired
	private MypageMapper mypageMapper;
	
	@Autowired
	private MypageService mypageService;
	
	@RequestMapping("")
	public String main() {
		return "mypage";
	}
	
	/**
	 * 로그인한 회원정보 조회
	 * (/mypage/findUserId)
	 * @return
	 */
	@RequestMapping("/findUserId")
	@ResponseBody
	public List<Map<String, Object>> findUserId(@RequestBody Map<String, Object> param) {
		List<Map<String, Object>> list = mypageMapper.findUserId(param);
		
		return list;
	}
	
	/**
	 * 회원정보 수정
	 * (/mypage/saveAccountInfo)
	 * @return
	 */
	@RequestMapping("/saveAccountInfo")
	@ResponseBody
	public Map<String, Object> saveAccountInfo(@RequestBody UserInfo param) {
		Map<String, Object> result = new HashMap<String, Object>();
		mypageService.saveAccountInfo(param);
		
		result.put("success", true);
		return result;
	}
}

 

[ MypageService.java ] 

package kr.co.art.biz.mypage.service;

import kr.co.art.biz.register.domain.UserInfo;

public interface MypageService {
	// 사용자 정보 수정
	void saveAccountInfo(UserInfo map);
}

 

[ MypageServiceImpl.java ]

package kr.co.art.biz.mypage.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;

import kr.co.art.biz.mypage.persistence.MypageMapper;
import kr.co.art.biz.register.domain.UserInfo;

@Service
public class MypageServiceImpl implements MypageService {

	@Autowired
	private MypageMapper mypageMapper;
	
	@Autowired
	private PasswordEncoder passwordEncoder; 

	@Override
	public void saveAccountInfo(UserInfo userInfo) {
		
		String orgPassword = userInfo.getUserPw();
		
		if(!orgPassword.equals("")) {
			String userId = userInfo.getUserId();
			String encPassword = initUserPassword(orgPassword, userId);
			
			System.out.println("encPassword : " + encPassword);
			
			userInfo.setUserPw(encPassword); 
		}
		
		mypageMapper.saveAccountInfo(userInfo);
	}
	
	/*
	 * 패스워드 암호화 
	 */
	private String initUserPassword(String orgPassword, String userId) {
        return passwordEncoder.encode(orgPassword);
    }

	
}

 

[ MypageMapper.java ]

package kr.co.art.biz.mypage.persistence;

import java.util.List;
import java.util.Map;

import kr.co.art.biz.register.domain.UserInfo;

public interface MypageMapper {
	
	// 로그인 사용자 정보 조회 
	List<Map<String, Object>> findUserId(Map<String, Object> params);
		
	// 사용자 정보 수정
	void saveAccountInfo(UserInfo params);
	
}

 

[ MypageMapper.xml ]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="kr.co.art.biz.mypage.persistence.MypageMapper">

	<select id="findUserId" resultType="hashmap" parameterType="hashmap">
		SELECT * 
		  FROM ART.ART_USER
		 WHERE 1=1
		   AND USER_ID = #{id}
	</select>
	
	<insert id="saveAccountInfo" parameterType="userInfo">
		UPDATE ART.ART_USER 
		   SET	USER_NAME = #{userName}
			  , USER_SEX = #{userSex}
			  , USER_PHONE = #{userPhone}
			  , USER_EMAIL = #{userEmail}
			  , USER_ADDR = #{userAddr}
			  , ZIP_CODE = #{zipCode}
			  <if test="!''.equals(userPw)">
			  , USER_PW = #{userPw}
			  </if>
		  WHERE 1=1
		    AND USER_ID = #{userId}
	</insert>
	
</mapper>

 

[ 결과 화면 ]

 

'Spring ArtGallery Project' 카테고리의 다른 글

[프로젝트] 13. 관리자 - 상품등록 구현 (Week 3)  (0) 2024.01.23
[프로젝트] 12. 로그인/로그아웃 버튼 처리 (Week 3)  (1) 2024.01.23
[프로젝트] 10. 로그인 구현 (Week 3)  (0) 2024.01.23
[프로젝트] 9. 백엔드개발 - 회원가입 로직 (Week 2)  (1) 2024.01.23
[프로젝트] 8. 화면개발 - 회원가입 페이지 구현 (Week 2)  (1) 2024.01.23
'Spring ArtGallery Project' Related Articles more