[SPRING] LOGIN MVC

구조

 

 

 

UserController.java

package com.project.controller;

import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.user.db.UserDTO;
import com.user.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService service;

    // 로그인 페이지
    @RequestMapping("/loginPage")
    public String userLoginPage() {
        return "/user/UserLogin";
    }

    // 로그인
    @RequestMapping("/login")
    public ModelAndView userLogin(@ModelAttribute UserDTO dto, HttpSession session) throws Exception {
        boolean result = service.userLogin(dto, session);
        ModelAndView mav = new ModelAndView();
        if (result == true) {
            mav.setViewName("redirect:/board/list");
        } else {
            mav.setViewName("/user/UserLogin");
        }
        return mav;
    }

    // 회원가입 페이지
    @RequestMapping("/joinPage")
    public String userJoinPage() {
        return "/user/UserJoin";
    }

    // 회원가입
    @RequestMapping("/join")
    public String userJoin(@ModelAttribute UserDTO dto) throws Exception {
        service.userJoin(dto);
        return "redirect:/user/loginPage";
    }

    // 아이디 중복 검사
    @RequestMapping("/idCheck")
    public void idCheck(@RequestParam String id, HttpServletResponse res) throws Exception {
        int result = 0;
        if (service.idCheck(id) != 0) {
            result = 1;
        }
        res.getWriter().print(result);
    }

    // 회원 정보
    @RequestMapping("/detail")
    public ModelAndView userDetail(@RequestParam String id) throws Exception {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("/user/UserDetail");
        mav.addObject("userDetail", service.userDetail(id));
        return mav;
    }

    // 정보 수정 페이지
    @RequestMapping("/editPage")
    public ModelAndView userEditPage(@RequestParam String id) throws Exception {
        ModelAndView mav = new ModelAndView();
        mav.setViewName("/user/UserEdit");
        mav.addObject("userEdit", service.userDetail(id));
        return mav;
    }

    // 정보 수정
    @RequestMapping("/edit")
    public String userEdit(@ModelAttribute UserDTO dto) throws Exception {
        service.userEdit(dto);
        return "redirect:/user/detail?id=" + dto.getId();
    }

    // 회원 삭제
    @RequestMapping("delete")
    public String userDelete(@RequestParam String id, HttpSession session) throws Exception {
        service.userDelete(id, session);
        return "redirect:/user/loginPage";
    }

    // 로그아웃
    @RequestMapping("/logout")
    public String userLogout(HttpSession session) throws Exception {
        service.userLogout(session);
        return "redirect:/user/loginPage";
    }

    // 회원 정보 찾기 페이지
    @RequestMapping("/findPage")
    public String userFindPage() {
        return "/user/UserFind";
    }

    // 아이디 찾기 페이지
    @RequestMapping("/findIdPage")
    public String userFindIdPage() {
        return "/user/UserFindId";
    }

    // 비밀번호 찾기 페이지
    @RequestMapping("/findPwPage")
    public String userFindPwPage() {
        return "/user/UserFindPw";
    }

    // 아이디 찾기
    @RequestMapping("/findId")
    public ModelAndView userFindId(@ModelAttribute UserDTO dto) throws Exception {
        ModelAndView mav = new ModelAndView();
        List<UserDTO> userList = service.userFindId(dto);
        System.out.println(userList);
        mav.setViewName("/user/UserId");
        mav.addObject("userFindId", userList);
        return mav;
    }

    // 비밀번호 찾기
    @RequestMapping("/findPw")
    public ModelAndView userFindPw(@ModelAttribute UserDTO dto) throws Exception {
        ModelAndView mav = new ModelAndView();
        String pw = service.userFindPw(dto);
        mav.setViewName("/user/UserPw");
        mav.addObject("userFindPw", pw);
        return mav;
    }
}

 

 

UserService.java / UserServiceImpl.java

package com.user.service;

import java.util.List;

import javax.servlet.http.HttpSession;

import com.user.db.UserDTO;

public interface UserService {

	public boolean userLogin(UserDTO dto, HttpSession session) throws Exception;

	public void userJoin(UserDTO dto) throws Exception;

	public UserDTO userDetail(String id) throws Exception;

	public void userEdit(UserDTO dto) throws Exception;

	public void userDelete(String id, HttpSession session) throws Exception;

	public void userLogout(HttpSession session) throws Exception;

	public List<UserDTO> userFindId(UserDTO dto) throws Exception;

	public String userFindPw(UserDTO dto) throws Exception;

	public int idCheck(String id) throws Exception;
}

 

package com.user.service;

import java.util.Enumeration;
import java.util.Hashtable;
import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.user.db.UserDAO;
import com.user.db.UserDTO;

@Service
public class UserServiceImpl implements UserService {

	@Autowired
	private UserDAO dao;

	@Autowired
	private static Hashtable<String, String> loginUsers = new Hashtable<String, String>();

	@Override
	public boolean userLogin(UserDTO dto, HttpSession session) throws Exception {
		boolean isLogin = isLogin(dto.getId());
		if (!isLogin) {
			boolean result = dao.userLogin(dto);
			if (result) {
				setSession(session, dto);
			}
			return result;
		}
		return !isLogin;
	}

	@Override
	public void userJoin(UserDTO dto) throws Exception {
		dto.setId(dto.getId());
		dto.setPw(dto.getPw());
		dto.setName(dto.getName());
		dto.setZipcode(dto.getZipcode());
		dto.setAddr1(dto.getAddr1());
		dto.setAddr2(dto.getAddr2());
		dto.setPhone(dto.getPhone());
		dto.setEmail(dto.getEmail());

		dao.userJoin(dto);
	}

	@Override
	public UserDTO userDetail(String id) throws Exception {
		return dao.userDetail(id);
	}

	@Override
	public void userEdit(UserDTO dto) throws Exception {
		dao.userEdit(dto);
	}

	@Override
	public void userDelete(String id, HttpSession session) throws Exception {
		session.invalidate();
		dao.userDelete(id);
	}

	@Override
	public void userLogout(HttpSession session) throws Exception {
		loginUsers.remove(session.getId());
		session.invalidate();
	}

	// 로그인이 되어있는지 확인
	public boolean isLogin(String id) {
		boolean isLogin = false;

		Enumeration<String> e = loginUsers.keys();
		String key = "";

		while (e.hasMoreElements()) {
			key = (String) e.nextElement();
			if (id.equals(loginUsers.get(key)))
				isLogin = true;
		}

		return isLogin;
	}

	public boolean isUsing(String sessionId) {
		boolean isUsing = false;

		Enumeration<String> e = loginUsers.keys();
		String key = "";
		while (e.hasMoreElements()) {
			key = (String) e.nextElement();
			if (sessionId.equals(loginUsers.get(key)))
				isUsing = true;
		}
		return isUsing;
	}

	public void setSession(HttpSession session, UserDTO dto) {
		loginUsers.put(session.getId(), dto.getId());
		session.setAttribute("id", dto.getId());
	}

	@Override
	public List<UserDTO> userFindId(UserDTO dto) throws Exception {
		return dao.userFindId(dto);
	}

	@Override
	public String userFindPw(UserDTO dto) throws Exception {
		return dao.userFindPw(dto);
	}

	@Override
	public int idCheck(String id) throws Exception {
		return dao.idCheck(id);
	}

}

 

 

UserDAO.java / UserDAOImpl.java

package com.user.db;

import java.util.List;

// DB 연결
public interface UserDAO {
	public boolean userLogin(UserDTO dto) throws Exception;

	public void userJoin(UserDTO dto) throws Exception;

	public UserDTO userDetail(String id) throws Exception;

	public void userEdit(UserDTO dto) throws Exception;

	public void userDelete(String id) throws Exception;

	public List<UserDTO> userFindId(UserDTO dto) throws Exception;

	public String userFindPw(UserDTO dto) throws Exception;

	public int idCheck(String id) throws Exception;
}

 

package com.user.db;

import java.util.List;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class UserDAOImpl implements UserDAO {

	@Autowired
	SqlSession sqlSession;

	private static final String nameSpace = "com.user.mapper.userMapper";

	@Override
	public boolean userLogin(UserDTO dto) throws Exception {
		String name = sqlSession.selectOne(nameSpace + ".userLogin", dto);
		return (name == null) ? false : true;
	}

	@Override
	public void userJoin(UserDTO dto) throws Exception {
		sqlSession.insert(nameSpace + ".userJoin", dto);
	}

	@Override
	public UserDTO userDetail(String id) throws Exception {
		return sqlSession.selectOne(nameSpace + ".userDetail", id);
	}

	@Override
	public void userEdit(UserDTO dto) throws Exception {
		sqlSession.update(nameSpace + ".userEdit", dto);
	}

	@Override
	public void userDelete(String id) throws Exception {
		sqlSession.delete(nameSpace + ".userDelete", id);
	}

	@Override
	public List<UserDTO> userFindId(UserDTO dto) throws Exception {
		return sqlSession.selectList(nameSpace + ".userFindId", dto);
	}

	@Override
	public String userFindPw(UserDTO dto) throws Exception {
		return sqlSession.selectOne(nameSpace + ".userFindPw", dto);
	}

	@Override
	public int idCheck(String id) throws Exception {
		return sqlSession.selectOne(nameSpace + ".idCheck", id);
	}
}

 

 

UserDTO.java

package com.user.db;

// 데이터 model
public class UserDTO {
	private String id;
	private String pw;
	private String name;
	private int zipcode;
	private String addr1;
	private String addr2;
	private int phone;
	private String email;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPw() {
		return pw;
	}

	public void setPw(String pw) {
		this.pw = pw;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getZipcode() {
		return zipcode;
	}

	public void setZipcode(int zipcode) {
		this.zipcode = zipcode;
	}

	public String getAddr1() {
		return addr1;
	}

	public void setAddr1(String addr1) {
		this.addr1 = addr1;
	}

	public String getAddr2() {
		return addr2;
	}

	public void setAddr2(String addr2) {
		this.addr2 = addr2;
	}

	public int getPhone() {
		return phone;
	}

	public void setPhone(int phone) {
		this.phone = phone;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

}

 

 

UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.user.mapper.userMapper">

	<select id="userLogin" resultType="String">
		SELECT name from user WHERE
		id=#{id} AND pw=#{pw}
	</select>

	<insert id="userJoin">
		INSERT INTO user (id, pw, name, zipcode, addr1,
		addr2, phone, email)
		values (#{id}, #{pw}, #{name}, #{zipcode},
		#{addr1}, #{addr2}, #{phone},
		#{email})
	</insert>

	<select id="userDetail" resultType="UserDTO">
		SELECT * from user WHERE
		id=#{id}
	</select>

	<update id="userEdit">
		UPDATE user SET pw=#{pw}, zipcode=#{zipcode},
		addr1=#{addr1},
		addr2=#{addr2}, phone=#{phone}, email=#{email} WHERE
		id=#{id}
	</update>

	<delete id="userDelete">
		DELETE from user WHERE id=#{id}
	</delete>

	<select id="userFindId" resultType="UserDTO">
		SELECT id from user WHERE
		name=#{name} and email=#{email}
	</select>

	<select id="userFindPw" resultType="String">
		SELECT pw from user WHERE
		name=#{name} and id=#{id} and email=#{email}
	</select>

	<select id="idCheck" resultType="_int">
		SELECT count(*) from user WHERE
		id=#{id}
	</select>

</mapper>

 

---

 

Views

 

UserLogin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User Login</title>
</head>
<body>
    <div style="float: none; margin: 0 auto;">
        <h1>Login</h1>
        <form action="/user/login" name="LoginForm" method="post">
            <h1>ID</h1>
            <input type="text" required name="id">
            <h1>PW</h1>
            <input type="password" required name="pw">
            <button type="submit">Login</button>
        </form>
        <button type="button" onclick="location.href='/user/joinPage'">Join</button>
        <button type="button" onclick="location.href='/user/findPage'">Find
            Id/Pw</button>
        <button type="button" onclick="location.href='/'">Main</button>
    </div>
</body>
</html>

 

 

UserJoin.jsp

- 우편번호 & 주소 API 사용

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<script src='{% static "js/jquery-1.11.3.min.js" %}'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<head>
    <meta charset="UTF-8">
    <title>User Join</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script language="javascript">
        function checks() {
            //값 불러오기 
            var getId = document.getElementById("id");
            var getPw = document.getElementById("pw");
            var getPwCheck = document.getElementById("password_check");
            var getMail = document.getElementById("email");
            var getName = document.getElementById("name");

            //value 불러오기 
            var id = getId.value;
            var pw = getPw.value;
            var pwCheck = getPwCheck.value;
            var name = getName.value;

            //유효성 검사 
            var regExp = /^[a-zA-Z0-9]{4,12}$/;
            //id, password 
            var regName = /^[가-힝]{2,}$/;
            //name 
            var regMail = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i;
            //mail 
            if (!regExp.test(id)) { //id 
                alert("아이디 다시 설정");
                getId.value = "";
                getId.focus();
                return false;
            } else if (!regExp.test(pw)) { //password 
                alert("비밀번호 다시 설정");
                getPw.value = "";
                getPw.focus();
                return false;
            } else if (!(pwCheck.slice(0, pwCheck.length) == pw.slice(0, pw.length))) { //password 동일한지 확인 
                alert("비밀번호 서로 안맞아");
                getPwCheck.value = "";
                getPwCheck.focus();
                return false;
            } else if ((pw.slice(0, pwCheck.length) == id.slice(0, id.length))) { //password랑 id 다른지 확인 
                alert("비밀번호와 id가 동일하면 다매요!");
                getPw.value = "";
                getPwCheck.value = "";
                getPw.focus();
                return false;
            } else if (!regName.test(name)) { //이름 확인 
                alert("이름 다시");
                getName.value = "";
                getName.focus();
                return false;
            }
        }
    </script>
    <script>
        function execDaumPostcode() {
            new daum.Postcode({
                oncomplete: function (data) {
                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                    var addr = ''; // 주소 변수
                    var extraAddr = ''; // 참고항목 변수
                    //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                    if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                        addr = data.roadAddress;
                    } else { // 사용자가 지번 주소를 선택했을 경우(J)
                        addr = data.jibunAddress;
                    }
                    // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                    if (data.userSelectedType === 'R') {
                        // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                        if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
                            extraAddr += data.bname;
                        }
                        // 건물명이 있고, 공동주택일 경우 추가한다.
                        if (data.buildingName !== '' && data.apartment === 'Y') {
                            extraAddr += (extraAddr !== '' ? ', '
                                + data.buildingName : data.buildingName);
                        }
                        // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                        if (extraAddr !== '') {
                            extraAddr = ' (' + extraAddr + ')';
                        }
                    }
                    // 우편번호와 주소 정보를 해당 필드에 넣는다.
                    document.getElementById('zipcode').value = data.zonecode;
                    document.getElementById("addr1").value = addr;
                    // 커서를 상세주소 필드로 이동한다.
                    document.getElementById("addr2").focus();
                }
            }).open();
        }
    </script>
    <script>
        $(document).ready(function () {
            $('#idCheck').on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: '/user/idCheck?id=' + $('#id').val(),
                    success: function (data) {
                        console.log('ddd', data)
                        if (data == 0) {
                            alert("사용 가능")
                        } else {
                            alert("사용 불가능")
                            $('#id').val('');
                        }
                    }
                });
            });
        });
    </script>
</head>

<body>
    <jsp:include page="/WEB-INF/views/template/header.jsp" />
    <form action="/user/join" method="post" onSubmit="return checks()">
        <div style="float: none; margin: 0 auto;">
            <h1 align="center">User Join</h1>
            <div>
                <h6>
                    아이디 : 4~12자의 영문 대소문자와 숫자
                    <button type="button" id="idCheck">중복 확인</button>
                </h6>
                <input type="text" id="id" name="id">
                <h6>비밀번호 : 4~12자의 영문 대소문자와 숫자</h6>
                <input type="password" id="pw" name="pw">
                <h6>비밀번호 확인</h6>
                <input type="password" id="password_check">
                <h6>이름</h6>
                <input type="text" name="name" id="name">
                <h6>
                    우편주소 <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
                </h6>
                <input type="text" id="zipcode" name="zipcode">
                <h6>도로명 주소</h6>
                <input type="text" id="addr1" name="addr1">
                <h6>상세 주소</h6>
                <input type="text" id="addr2" name="addr2">
                <h6>전화번호</h6>
                <input type="text" name="phone">
                <h6>이메일 : id@domain.com</h6>
                <input type="text" id="email" name="email">

                <div align="center">
                    <button type="submit">회원
                        가입</button>
                    <button type="reset">다시
                        입력</button>
                    <button type="button" onclick="location.href='/user/loginPage'">뒤로</button>
                </div>
            </div>
    </form>
</body>

</html>

 

 

UserDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>User Detail</title>
</head>

<body>
    <jsp:include page="/WEB-INF/views/template/header.jsp" />
    <br>
    <div style="float: none; margin: 0 auto;">
        <h1 align="center">User Detail</h1>
        <h6>아이디</h6>
        <input type="text" name="id" value="${userDetail.id}" readonly>
        <h6>비밀번호</h6>
        <input type="text" name="pw" value="${userDetail.pw}" readonly>
        <h6>이름</h6>
        <input type="text" name="name" value="${userDetail.name}" readonly>
        <h6>우편주소</h6>
        <input type="text" name="zipcode" value="${userDetail.zipcode}" readonly>
        <h6>도로명 주소</h6>
        <input type="text" name="addr1" value="${userDetail.addr1}" readonly>
        <h6>상세 주소</h6>
        <input type="text" name="addr2" value="${userDetail.addr2}" readonly>
        <h6>전화번호</h6>
        <input type="text" name="phone" value="${userDetail.phone}" readonly>
        <h6>이메일</h6>
        <input type="text" name="email" value="${userDetail.email}" readonly>
    </div>

    <div align="center">
        <button type="button" onclick="location.href='/user/editPage?id=${userDetail.id}'">수정</button>
        <button type="button" onclick="location.href='/user/delete?id=${userDetail.id}'">탈퇴</button>
        <button type="button" onclick="location.href='/board/list'">뒤로</button>
    </div>
</body>

</html>

 

 

UserEdit.jsp

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

<head>
    <meta charset="UTF-8">
    <title>User Join</title>
    <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script language="javascript">
        function checks() {
            //값 불러오기 
            var getPw = document.getElementById("pw");
            var getPwCheck = document.getElementById("password_check");
            var getMail = document.getElementById("email");

            //value 불러오기 
            var pw = getPw.value;
            var pwCheck = getPwCheck.value;

            //유효성 검사 
            var regExp = /^[a-zA-Z0-9]{4,12}$/;
            //id, password  
            var regMail = /[a-z0-9]{2,}@[a-z0-9-]{2,}.[a-z0-9]{2,}/i;
            //mail 
            if (!regExp.test(pw)) { //password 
                alert("비밀번호 다시 설정");
                getPw.value = "";
                getPw.focus();
                return false;
            } else if (!(pwCheck.slice(0, pwCheck.length) == pw.slice(0, pw.length))) { //password 동일한지 확인 
                alert("비밀번호 서로 안맞아");
                getPwCheck.value = "";
                getPwCheck.focus();
                return false;
            } else if ((pw.slice(0, pwCheck.length) == id.slice(0, id.length))) { //password랑 id 다른지 확인 
                alert("비밀번호와 id가 동일하면 다매요!");
                getPw.value = "";
                getPwCheck.value = "";
                getPw.focus();
                return false;
            }
        } * /
	}
    </script>
    <script language="javascript">
        function execDaumPostcode() {
            new daum.Postcode({
                oncomplete: function (data) {
                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                    var addr = ''; // 주소 변수
                    var extraAddr = ''; // 참고항목 변수
                    //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                    if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                        addr = data.roadAddress;
                    } else { // 사용자가 지번 주소를 선택했을 경우(J)
                        addr = data.jibunAddress;
                    }
                    // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                    if (data.userSelectedType === 'R') {
                        // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                        // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                        if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
                            extraAddr += data.bname;
                        }
                        // 건물명이 있고, 공동주택일 경우 추가한다.
                        if (data.buildingName !== '' && data.apartment === 'Y') {
                            extraAddr += (extraAddr !== '' ? ', '
                                + data.buildingName : data.buildingName);
                        }
                        // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                        if (extraAddr !== '') {
                            extraAddr = ' (' + extraAddr + ')';
                        }
                    }
                    // 우편번호와 주소 정보를 해당 필드에 넣는다.
                    document.getElementById('zipcode').value = data.zonecode;
                    document.getElementById("addr1").value = addr;
                    // 커서를 상세주소 필드로 이동한다.
                    document.getElementById("addr2").focus();
                }
            }).open();
        }
    </script>
</head>

<body>
    <jsp:include page="/WEB-INF/views/template/header.jsp" />
    <br>
    <form action="/user/edit" method="post" onSubmit="return checks()">
        <div style="float: none; margin: 0 auto;">
            <h1 align="center">User Edit</h1>
            <h6>아이디</h6>
            <input type="text" name="id" value="${userEdit.id}" readonly>
            <h6>비밀번호 : 4~12자의 영문 대소문자와 숫자로만 입력</h6>
            <input type="password" id="pw" name="pw" value="${userEdit.pw}">
            <h6>비밀번호 확인</h6>
            <input type="password" id="password_check" value="${userEdit.pw}">
            <h6>이름</h6>
            <input type="text" name="name" value="${userEdit.name}" readonly>
            <h6>
                우편주소 <input type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
            </h6>
            <input type="text" id="zipcode" name="zipcode" value="${userEdit.zipcode}">
            <h6>도로명 주소</h6>
            <input type="text" id="addr1" name="addr1" value="${userEdit.addr1}">
            <h6>상세 주소</h6>
            <input type="text" id="addr2" name="addr2" value="${userEdit.addr2}">
            <h6>전화번호</h6>
            <input type="text" name="phone" value="${userEdit.phone}">
            <h6>이메일 : id@domain.com</h6>
            <input type="text" id="email" name="email" value="${userEdit.email}">
        </div>
        <br>
        <div align="center">
            <button type="submit">수정</button>
            <button type="button" onclick="location.href='/board/list'">뒤로</button>
        </div>
    </form>
</body>

</html>