07_Framework
- 프로필 이미지 바꾸기
( 처음 회원가입 했을 때 or 프로필 사진 NULL 일 경우 기본 이미지 )
( 프로필 사진 변경할 경우 DB에 경로로 저장됨 )
myPage-profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>My Page</title>
<link rel="stylesheet" href="/resources/css/myPage/myPage-style.css">
</head>
<body>
<main>
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<!-- 마이페이지 - 내 정보 -->
<section class="myPage-content">
<!-- 사이드메뉴 include -->
<!-- jsp 액션 태그 -->
<jsp:include page="/WEB-INF/views/myPage/sideMenu.jsp"/>
<!-- 오른쪽 마이페이지 주요 내용 부분 -->
<section class="myPage-main">
<h1 class="myPage-title">프로필</h1>
<span class="myPage-subject">프로필 이미지를 변경할 수 있습니다.</span>
<%--
- 파일 제출 시 무조건 POST 방식
- enctype : form 태그 데이터가 서버로 제출 될 때 인코딩 되는 방법을 지정 (POST 방식일 때만 사용 가능)
- application/x-www-form-urlencoded : 모든 문자를 서버로 전송하기 전에 인코딩 (form 태그 기본값)
- multipart/form-data : 모든 문자를 인코딩하지 않음. ( 원본 데이터가 유지되어 이미지, 파일등을 서버로 전송할 수 있음 )
--%>
<form action="profile" method="POST" name="myPageFrm" id="profileFrm" enctype="multipart/form-data">
<div class="profile-image-area">
<%-- 프로필 이미지가 없으면 기본 이미지 --%>
<c:if test="${empty loginMember.profileImage}">
<img src="/resources/images/user.png" id="profileImage">
</c:if>
<%-- 프로필 이미지가 있으면 저장된 이미지 --%>
<c:if test="${not empty loginMember.profileImage}">
<img src="${loginMember.profileImage}" id="profileImage">
</c:if>
</div>
<span id="deleteImage">x</span>
<div class="profile-btn-area">
<label for="imageInput">이미지 선택</label>
<input type="file" name="profileImage" id="imageInput" accept="image/*">
<button>변경하기</button>
</div>
<div class="myPage-row">
<label>이메일</label>
<span>로그인 회원 이메일</span>
</div>
<div class="myPage-row">
<label>가입일</label>
<span>로그인 회원 가입일</span>
</div>
</form>
</section>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
<script src="/resources/js/myPage/myPage.js"></script>
</body>
</html>myPage.js
// 내 정보(수정) 페이지
const memberNickname = document.getElementById("memberNickname");
const memberTel = document.getElementById("memberTel");
const updateInfo = document.getElementById("updateInfo");
// 내 정보 수정 form태그가 존재할 때 (내 정보 페이지)
if(updateInfo != null){
// 전역변수로 수정 전 닉네임/전화번호를 저장
initNickname = memberNickname.value;
initTel = memberTel.value;
// 닉네임 유효성 검사
memberNickname.addEventListener("input", () => {
// 변경 전 닉네임과 입력 값이 같을 경우
if(memberNickname.value == initNickname){
memberNickname.removeAttribute("style");
return;
}
// 정규 표현식으로 유효성 검사
const regEx = /^[가-힣\w\d]{2,10}$/;
if(regEx.test(memberNickname.value)){ // 유효
memberNickname.style.color = "green";
}else{ // 무효
memberNickname.style.color = "red";
}
});
// 전화번호 유효성 검사
memberTel.addEventListener("input", () => {
// 변경 전 전화번호와 입력 값이 같을 경우
if(memberTel.value == initTel){
memberTel.removeAttribute("style");
return;
}
// 정규 표현식으로 유효성 검사
const regEx = /^0(1[01679]|2|[3-6][1-5]|70)[1-9]\d{2,3}\d{4}$/;
if(regEx.test(memberTel.value)){ // 유효
memberTel.style.color = "green";
}else{ // 무효
memberTel.style.color = "red";
}
});
// form태그 제출 시 유효하지 않은 값이 있으면 제출 X
updateInfo.addEventListener("submit", e => {
// 닉네임이 유효하지 않을 경우
if(memberNickname.style.color == "red"){
alert("닉네임이 유효하지 않습니다.");
memberNickname.focus(); // 포커스 이동
e.preventDefault(); // 기본 이벤트 제거
return;
}
// 전화번호가 유효하지 않을 경우
if(memberTel.style.color == "red"){
alert("전화번호가 유효하지 않습니다.");
memberTel.focus(); // 포커스 이동
e.preventDefault(); // 기본 이벤트 제거
return;
}
});
} // if end
// 비밀번호 변경 제출 시
const changePwFrm = document.getElementById("changePwFrm");
const currentPw = document.getElementById("currentPw");
const newPw = document.getElementById("newPw");
const newPwConfirm = document.getElementById("newPwConfirm");
if(changePwFrm != null){ // 비밀번호 변경 페이지인 경우
changePwFrm.addEventListener("submit", e => {
// 현재 비밀번호 미작성 시
if(currentPw.value.trim() == ""){
alert("현재 비밀번호를 입력해주세요");
e.preventDefault();
currentPw.focus();
return;
}
// 비밀번호 유효성 검사
const regEx = /^[a-zA-Z0-9\!\@\#\-\_]{6,20}$/;
if(!regEx.test(newPw.value)){
alert("비밀번호가 유효하지 않습니다");
e.preventDefault();
newPw.focus();
return;
}
// 비밀번호 == 비밀번호 확인
if(newPw.value != newPwConfirm.value){
alert("비밀번호가 일치하지 않습니다");
e.preventDefault();
newPwConfirm.focus();
return;
}
});
}
const secessionFrm = document.getElementById("secessionFrm");
if(secessionFrm != null){ // 탈퇴 페이지인 경우
const memberPw = document.getElementById("memberPw");
const agree = document.getElementById("agree");
secessionFrm.addEventListener("submit", e => {
if(memberPw.value.trim() == ""){ // 비밀번호 미작성
alert("비밀번호를 작성해주세요");
e.preventDefault();
memberPw.focus();
return;
}
if(!agree.checked){ // 동의 체크가 되지 않은 경우
alert("약관 동의 후 탈퇴 버튼을 눌러주세요");
e.preventDefault();
agree.focus();
return;
}
if(!confirm("정말 탈퇴 하시겠습니까?")){ // 취소 클릭 시
alert("탈퇴 취소");
e.preventDefault();
return;
}
});
}
//----------------------------------------------------
// 프로필 이미지 추가/변경/삭제
const profileImage = document.getElementById("profileImage"); // img 태그
const imageInput = document.getElementById("imageInput"); // input 태그
const deleteImage = document.getElementById("deleteImage"); // x버튼
let initCheck; // 초기 프로필 이미지 상태를 저장하는 변수
// false == 기본 이미지, true == 이전 업로드 이미지
let deleteCheck = -1;
// 프로필 이미지가 새로 업로드 되거나 삭제 되었음을 나타내는 변수
// -1 == 초기값 , 0 == 프로필 삭제(x버튼), 1 == 새 이미지 업로드
let originalImage; // 초기 프로필 이미지 파일 경로 저장
if(imageInput != null){ // 화면에 imageInput이 있을 경우 ( if 굳이 안해도 되긴 함 )
// 프로필 이미지가 출력되는 img태그의 src 속성을 저장
originalImage = profileImage.getAttribute("src");
// 회원 프로필 화면 진입 시
// 현재 회원의 프로필 이미지 상태를 확인
if(profileImage.getAttribute("src") == "/resources/images/user.png"){
// 기본 이미지인 경우
initCheck = false;
}else{
initCheck = true;
}
// change 이벤트 : 값이 변했을 때
// - input type="file", "checkbox", "radio" 에서 많이 사용
// - text/number 형식 사용 가능
// -> 이 때 input값 입력 후 포커스를 잃었을 때
// 이전 값과 다르면 change 이벤트 발생
imageInput.addEventListener("change", e => {
// 2MB로 최대 크기 제한
const maxSize = 1 * 1024 * 1024 * 2; // 파일 최대 크기 지정(바이트 단위)
console.log(e.target); // input
console.log(e.target.value); // 업로드된 파일 경로
console.log(e.target.files); // 업로드된 파일의 정보가 담긴 배열
const file = e.target.files[0]; // 업로드한 파일의 정보가 담긴 객체
// 파일을 한번 선택한 후 취소했을 때 ( file이 undefined가 된다 )
if(file == undefined){
console.log("파일 선택이 취소됨");
deleteCheck = -1; // 취소 == 파일 없음 == 초기상태
// 취소 시 기존 프로필 이미지로 변경 ( 기존 이미지에서 변경되는게 없게 하겠다는거죠 )
profileImage.setAttribute("src", originalImage);
return;
}
if( file.size > maxSize){ // 선택된 파일의 크기가 최대 크기를 초과한 경우
alert("2MB 이하의 이미지를 선택해주세요.");
imageInput.value = "";
// input type="file" 태그에 대입할 수 있는 value는 "" (빈칸) 뿐이다!
deleteCheck = -1; // 취소 == 파일 없음 == 초기상태
// 기존 프로필 이미지로 변경
profileImage.setAttribute("src", originalImage);
return;
}
// JS에서 파일을 읽는 객체
// - 파일을 읽고 클라이언트 컴퓨터에 파일을 저장할 수 있음
const reader = new FileReader();
reader.readAsDataURL(file);
// 매개변수에 작성된 파일을 읽어서 저장 후
// 파일을 나타내는 URL을 result 속성으로 얻어올 수 있게 함.
// 다 읽었을 때
reader.onload = e => {
//console.log(e.target);
console.log(e.target.result); // 읽은 파일의 URL
/* 개발자도구에서 Application탭에서 Frames > top > images 안에서 확인가능 */
const url = e.target.result;
// 프로필이미지(img) 태그에 src 속성으로 추가
profileImage.setAttribute("src", url);
deleteCheck = 1;
}
});
// x버튼 클릭 시
deleteImage.addEventListener('click', () => {
imageInput.value = ""; // input type="file"의 value 삭제
profileImage.setAttribute("src", "/resources/images/user.png");
// 프로필 이미지를 기본 이미지로 변경
deleteCheck = 0;
});
// #profileFrm이 제출 되었을 때
document.getElementById("profileFrm").addEventListener("submit", e => {
// initCheck
// 초기 프로필 이미지 상태를 저장하는 변수
// false == 기본 이미지, true == 이전 업로드 이미지
// deleteCheck
// 프로필 이미지가 새로 업로드 되거나 삭제 되었음을 나타내는 변수
// -1 == 초기값 , 0 == 프로필 삭제(x버튼), 1 == 새 이미지 업로드
let flag = true; // 제출하면 안되는 경우의 초기값 플래그 true로 지정
// 이전 프로필 이미지가 없으면서, 새 이미지 업로드를 했다 -> 처음으로 이미지 추가
if(!initCheck && deleteCheck == 1) flag = false;
// 이전 프로필 이미지가 있으면서, 새 이미지 업로드를 했다 -> 새 이미지로 변경
if(initCheck && deleteCheck == 1) flag = false;
// 이전 프로필 이미지가 있으면서, 프로필 삭제 버튼을 눌렀다 -> 삭제
if(initCheck && deleteCheck == 0) flag = false;
if(flag){ // flag == true -> 제출하면 안되는 경우
e.preventDefault(); // form 기본 이벤트 제거
alert("이미지 변경 후 클릭하세요");
}
return true;
});
}MyPageController.java
1) 
2) 
-> 위 두 작업이 반드시 필요!
중요한 작업! ( 서버 끄고 하기 )
package edu.kh.project.myPage;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.SessionAttribute;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import edu.kh.project.member.model.dto.Member;
import edu.kh.project.myPage.MypageService;
@SessionAttributes({"loginMember"})
// 1) Model에 세팅된 값의 key와 {} 작성된 값이 일치하면 session scope로 이동
// 2) Session으로 올려둔 값을 해당 클래스에서 얻어와 사용 가능하게함
// -> @SessionAttribute(key)로 사용
@RequestMapping("/myPage")
@Controller
public class MyPageController {
@Autowired
private MypageService service;
// 내 정보 페이지로 이동
@GetMapping("/info")
public String info() {
return "myPage/myPage-info";
}
// 프로필 페이지 이동
@GetMapping("/profile")
public String profile() {
return "myPage/myPage-profile";
}
// 비밀번호 변경 페이지 이동
@GetMapping("/changePw")
public String changePw() {
return "myPage/myPage-changePw";
}
// 탈퇴 페이지 이동
@GetMapping("/secession")
public String secession() {
return "myPage/myPage-secession";
}
// 회원 정보 수정
@PostMapping("/info")
public String updateInfo(@SessionAttribute("loginMember") Member loginMember,
Member updateMember,
String[] memberAddress,
RedirectAttributes ra) {
/*
* @SessionAttribute("loginMember") Member loginMember
* : Session에서 얻어온 "loginMember"에 해당하는 객체를
* 매개변수 Member loginMember에 저장
*
*
* Member updateMember
* : 수정할 닉네임, 전화번호 담긴 커맨드 객체
*
*
* String[] memberAddress
* : name="memberAddress"인 input 3개의 값(주소)
*
*
* RedirectAttributes ra : 리다이렉트 시 값 전달용 객체
*
* */
// 주소 하나로 합치자 (우편번호^^^주소^^^상세주소)
if(updateMember.getMemberAddress().equals(",,")) {
updateMember.setMemberAddress(null);
} else {
// updateMember 에 주소문자열 세팅
String addr = String.join("^^^", memberAddress);
updateMember.setMemberAddress(addr);
}
// 로그인한 회원의 번호를 updateMember에 세팅
updateMember.setMemberNo( loginMember.getMemberNo() );
// DB 회원 정보 수정 (update) 서비스 호출
int result = service.updateInfo(updateMember);
String message = null;
// 결과값으로 성공
if(result > 0) {
// -> 성공 시 Session에 로그인된 회원 정보도 수정(동기화)
System.out.println("내 정보 수정 성공"); // 확인용 콘솔창
loginMember.setMemberNickname( updateMember.getMemberNickname() );
loginMember.setMemberTel( updateMember.getMemberTel() );
loginMember.setMemberAddress( updateMember.getMemberAddress() );
message = "회원 정보 수정 성공";
} else {
// 실패에 따른 처리
System.out.println("내 정보 수정 실패"); // 확인용 콘솔창
message = "회원 정보 수정 실패";
}
ra.addFlashAttribute("message", message);
return "redirect:info"; // 상대경로 (절대경로로 작성하려면? /myPage/info)
}
/* MultipartFile : input type="file"로 제출된 파일을 저장한 객체
*
* [ 제공하는 메서드 ]
* - transferTo() : 파일을 지정된 경로에 저장(메모리 -> HDD/SSD)
* - getOriginalFileName() : 파일 원본명
* - getSize() : 파일 크기
*
*
* */
// 프로필 이미지 수정
@PostMapping("/profile")
public String updateProfile(
@RequestParam("profileImage") MultipartFile profileImage // 업로드 파일
, HttpSession session // 세션 객체
, @SessionAttribute("loginMember") Member loginMember
, RedirectAttributes ra // 리다이렉트 시 메세지 전달
) throws Exception{
// 웹 접근 경로 (webapp 기준)
String webPath = "/resources/images/member/";
// 실제로 이미지 파일이 저장되어야하는 서버컴퓨터 경로
String filePath = session.getServletContext().getRealPath(webPath);
// C:\workspace\7_Framework\boardProject\src\main\webapp\resources\images\member
// 프로필 이미지 수정 서비스 호출
int result = service.updateProfile(profileImage, webPath, filePath, loginMember);
String message = null;
if(result > 0) message = "프로필 이미지가 변경되었습니다";
else message = "프로필 변경 실패";
ra.addFlashAttribute("message", message);
return "redirect:profile";
}
}MyPageService.java
package edu.kh.project.myPage;
import org.springframework.web.multipart.MultipartFile;
import edu.kh.project.member.model.dto.Member;
public interface MypageService {
int updateInfo(Member updateMember);
int updateProfile(MultipartFile profileImage, String webPath, String filePath, Member loginMember) throws Exception;
}
MyPageServiceImpl.java
package edu.kh.project.myPage;
import java.io.File;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import edu.kh.project.common.utility.Util;
import edu.kh.project.member.model.dto.Member;
@Service
public class MypageServiceImpl implements MypageService{
@Autowired
private myPageDAO dao;
@Transactional
@Override
public int updateInfo(Member updateMember) {
return dao.updateInfo(updateMember);
}
// 프로필 이미지 수정 서비스
@Override
public int updateProfile(MultipartFile profileImage, String webPath, String filePath, Member loginMember) throws Exception {
// 프로필 이미지 변경 실패 대비
String temp = loginMember.getProfileImage(); // 기존에 가지고 있던 이전 이미지 저장
String rename = null; // 변경 이름 저장 변수
if(profileImage.getSize() > 0) { // 업로드된 이미지가 있을 경우
// 1) 파일 이름 변경
rename = Util.fileRename(profileImage.getOriginalFilename());
// 2) 바뀐 이름 loginMember에 세팅
loginMember.setProfileImage(webPath + rename); // /resources/images/member/20230510163910_12345.jpg
} else { // 업로드된 이미지가 없는 경우 (x버튼: 기존 이미지가 있었다가 삭제한 경우)
loginMember.setProfileImage(null);
}
// 프로필 이미지 수정 DAO 메서드 호출
int result = dao.updateProfileImage(loginMember);
if(result > 0) { // DB에 이미지 경로 업데이트 성공했다면
// 업로드된 새 이미지가 있을 경우
if(rename != null) {
// 메모리에 임시 저장되어있는 파일을 서버에 진짜로 저장하는 것
profileImage.transferTo(new File(filePath + rename));
}
} else { // 실패
// 이전 이미지로 프로필 다시 세팅
loginMember.setProfileImage(temp);
}
return result;
}
}
Util.java
package edu.kh.project.common.utility;
import java.text.SimpleDateFormat;
public class Util {
public static String fileRename(String originFileName) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
String date = sdf.format(new java.util.Date(System.currentTimeMillis()));
int ranNum = (int) (Math.random() * 100000); // 5자리 랜덤 숫자 생성
String str = "_" + String.format("%05d", ranNum);
String ext = originFileName.substring(originFileName.lastIndexOf("."));
return date + str + ext;
}
}MyPageDAO.java
package edu.kh.project.myPage;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import edu.kh.project.member.model.dto.Member;
@Repository
public class myPageDAO {
@Autowired
private SqlSessionTemplate sqlSession;
public int updateInfo(Member updateMember) {
return sqlSession.update("myPageMapper.updateInfo", updateMember);
}
/** 프로필 이미지 수정
* @param loginMember
* @return result
*/
public int updateProfileImage(Member loginMember) {
return sqlSession.update("myPageMapper.updateProfileImage", loginMember);
}
}myPage-mapper.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="myPageMapper">
<!-- 회원 정보 수정 -->
<update id="updateInfo" parameterType="Member">
UPDATE "MEMBER" SET
MEMBER_NICKNAME = #{memberNickname},
MEMBER_TEL = #{memberTel},
MEMBER_ADDR = #{memberAddress}
WHERE MEMBER_NO = #{memberNo}
</update>
<!-- 회원 프로필 이미지 수정 -->
<udpate id="updateProfileImage">
UPDATE "MEMBER" SET
PROFILE_IMG = #{profileImage}
WHERE MEMBER_NO = #{memberNo}
</udpate>
</mapper>
이미지 선택 후 변경하기 클릭 시,
해당 팝업 나온 후, 
해당 페이지로 리다이렉트
++ 로고 버튼 클릭 시,
로그인된 정보에서도 프로필 이미지 뜸.
x 버튼 클릭 후 변경하기 클릭 시, 해당 팝업 나온 후, 
해당 페이지로 리다이렉트
++ 로고 버튼 클릭 시,
로그인된 정보에서도 프로필 이미지 뜸.
