[Spring][쇼핑몰 프로젝트][18] 상품 등록 - 작가 선택(팝업창) 구현 - 1

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

 작가 선택 팝업창 구현

 authorId <input> 태그에 데이터를 넣기 위해 '작가'를 선택할 수 있도록 '팝업 창'을 띄우고, 원하는 '작가'를 선택을 하게 되면 팝업창은 닫히고 <input> 태그에 해당 작가의 id값이 입력되도록 하는 것이 목표입니다.

 

 이번포스팅에선 팝업창을 띄우기 위한 버튼을 추가하고, 해당 버튼을 눌렀을 때 팝업창이 뜨도록 하는 것이 목표입니다.

 

순서

1. 작가 선택 버튼 추가 및 css 설정 

2. 버튼 작동 구현

3. 테스트

 

 

 

1. 작가 선택 버튼 추가 및 css 설정 

 

 기존의 작가 입력(authorId) <input>태그 옆에 버튼을 추가할 것입니다. 해당 버튼을 누르게 되면 DB에 등록되어 있는 작가를 선택할 수 있는 팝업창이 뜨도록 구현할 것입니다.

 

 먼저 기존의 작가 <input>태그를 아래의 코드로 수정 및 추가합니다.

 

<input id="authorName_input" readonly="readonly">
<input id="authorId_input" name="authorId" type="hidden">
<button class="authorId_btn">작가 선택</button>

 

 

 첫 번째 <input> 태그의 경우 사용자에게 보일 부분입니다. 작가의 이름이 출력되도록 할 것입니다. 두 번째 <input> 태그는 '상품 등록'에 필요로 한 authorId 데이터를 저장합니다. 해당 태그는 보이지 않도록 type속성 값을 'hidden'을 부여하였습니다. <button>은 작가 선택을 할 수 팝업창을 띄우기 위해 추가하였습니다.

 

 

 추가한 태그들의 csss 설정을 추가하였습니다. goodsEnroll.css에 아래의 코드를 추가합니다.

 

.authorId_btn {						/* 작가 선택 css 설정 */
    margin-left: 20px;
    width: 14%;
    height: 38px;
    font-weight: 600;
    background-color: #dfe8f5;
    font-size: 15px;
    cursor:pointer;
}
#authorName_input {
    width: 80%;
    text-align: center;
}

 

그림 1-2

 

그림 1-3

 

2. 버튼 작동 구현

 

 아래 링크는 팝업창을 띄우는 방법이 명세도니 MDN 홈페이지입니다.

 

developer.mozilla.org/ko/docs/Web/API/Window/open#window_features

 

 팝업창은 아래의 코드를 통해 동작합니다.

 

var window = window.open(url, windowName, [windowFeatures]);

 

 첫 번째 파라미터는 팝업창의 url 주소입니다. 두 번째 파라미터는 팝업창의 이름입니다. 마지막 파라미터는 팝업창에 대한 설정입니다.

 

 어떠한 설정을 할 수 있는지는 위의 MDN 홈페이지에 들어가면 볼 수 있습니다. 설정을 해준다고 해서 무조건 적용이 되는 것은 아닙니다. 각 설정에 따라 적용이 가능한 브라우저가 정해져 있습니다. 따라서 설정을 원할 시엔 위의 문서에 적용 가능 유무부터 확인해야 합니다. 저는 팝업창의 크기, 위치, 스크롤바 기능에 대한 설정만 할 것입니다.

 

 

 

 먼저 <script> 태그 아래에 버튼이 클릭되었을 때 동작하는 메서드 추가와 해당 구현부에 버튼의 동작을 멈추는 코드를 추가해줍니다. (해당 버튼이 <form> 태그 내부에 추가되어있기 때문에 기능을 막지 않으면 <form>이 전송됩니다.)

 

/* 작가 선택 버튼 */
	$('.authorId_btn').on("click",function(e){
		
		e.preventDefault();
		
	});

 

 팝업창 동작을 실행하는 코드를 추가합니다.

 

		let popUrl = "/admin/authorPop";
		let popOption = "width = 650px, height=550px, top=300px, left=300px, scrollbars=yes";
		
		window.open(popUrl,"작가 찾기",popOption);	

 

그림 2-1

 

 

 위의 코드 작성을 마치고 '작가 선택' 버튼을 클릭하면 에러 창이 뜹니다. 아직 url 매핑 메서드와 팝업창 jsp를 추가해주지 않았기 때문입니다. 일단 팝업창이 뜨도록 하는 것이 목표이기 때문에 다른 추가적인 기능 코드 없이 단순한 url 매핑 메서드와 jsp파일을 추가해주겠습니다. 

 

그림 2-2

 

 

 AdminController.java 에 아래의 url 매핑 메서드를 추가해줍니다.

 

	/* 작가 검색 팝업창 */
	@GetMapping("/authorPop")
	public void authorPopGET() throws Exception{
		
		logger.info("authorPopGET.......");
	
	}

 

그림 2-3

 

 views/admin 폴더 경로에 authorPop.jsp 파일을 추가해줍니다. 그리고 authorPop.jsp파일에 해당 페이지가 팝업 페이지임을 표시하도록 문구를 추가하였습니다.

 

그림 2-4

 

그림 2-5

 

 

3. 테스트

 '작가 선택' 버튼을 눌러서 팝업창이 뜨는지 테스트합니다.

 

 

 

REFERENCE

• developer.mozilla.org/ko/docs/Web/API/Window/open#window_features

 

DATE

• 2020.03.26