[Spring][쇼핑몰 프로젝트][41] 주문 구현(주문 페이지) - 3
https://kimvampa.tistory.com/274
This commit is contained in:
SeoJin Kim
@@ -1,17 +1,292 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<title>Welcome BookMall</title>
|
||||
<link rel="stylesheet" href="/resources/css/order.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- 다음주소 -->
|
||||
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
${orderList}
|
||||
</div>
|
||||
<div>
|
||||
${memberInfo}
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrap">
|
||||
<div class="top_gnb_area">
|
||||
<ul class="list">
|
||||
<c:if test = "${member == null}"> <!-- 로그인 x -->
|
||||
<li >
|
||||
<a href="/member/login">로그인</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/member/join">회원가입</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<c:if test="${member != null }"> <!-- 로그인 o -->
|
||||
<c:if test="${member.adminCk == 1 }"> <!-- 관리자 계정 -->
|
||||
<li><a href="/admin/main">관리자 페이지</a></li>
|
||||
</c:if>
|
||||
<li>
|
||||
<a id="gnb_logout_button">로그아웃</a>
|
||||
</li>
|
||||
<li>
|
||||
마이룸
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cart/${member.memberId}">장바구니</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<li>
|
||||
고객센터
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top_area">
|
||||
<!-- 로고영역 -->
|
||||
<div class="logo_area">
|
||||
<a href="/main"><img src="/resources/img/mLogo.png"></a>
|
||||
</div>
|
||||
<div class="search_area">
|
||||
<div class="search_wrap">
|
||||
<form id="searchForm" action="/search" method="get">
|
||||
<div class="search_input">
|
||||
<select name="type">
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login_area">
|
||||
|
||||
<!-- 로그인 하지 않은 상태 -->
|
||||
<c:if test = "${member == null }">
|
||||
<div class="login_button"><a href="/member/login">로그인</a></div>
|
||||
<span><a href="/member/join">회원가입</a></span>
|
||||
</c:if>
|
||||
|
||||
<!-- 로그인한 상태 -->
|
||||
<c:if test="${ member != null }">
|
||||
<div class="login_success_area">
|
||||
<span>회원 : ${member.memberName}</span>
|
||||
<span>충전금액 : <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/></span>
|
||||
<span>포인트 : <fmt:formatNumber value="${member.point }" pattern="#,###" /></span>
|
||||
<a href="/member/logout.do">로그아웃</a>
|
||||
</div>
|
||||
</c:if>
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content_area">
|
||||
|
||||
<div class="content_subject"><span>장바구니</span></div>
|
||||
|
||||
<div class="content_main">
|
||||
<!-- 회원 정보 -->
|
||||
<div class="member_info_div">
|
||||
<table class="table_text_align_center memberInfo_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 25%;">주문자</th>
|
||||
<td style="width: *">${memberInfo.memberName} | ${memberInfo.memberMail}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 배송지 정보 -->
|
||||
<div class="addressInfo_div">
|
||||
<div class="addressInfo_button_div">
|
||||
<button class="address_btn address_btn_1" onclick="showAdress('1')" style="background-color: #3c3838;">상용자 정보 주소록</button>
|
||||
<button class="address_btn address_btn_2" onclick="showAdress('2')">직접 입력</button>
|
||||
</div>
|
||||
<div class="addressInfo_input_div_wrap">
|
||||
<div class="addressInfo_input_div addressInfo_input_div_1" style="display: block">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<td>
|
||||
${memberInfo.memberName}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주소</th>
|
||||
<td>
|
||||
${memberInfo.memberAddr1} ${memberInfo.memberAddr2}<br>${memberInfo.memberAddr3}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="addressInfo_input_div addressInfo_input_div_2">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<td>
|
||||
<input class="addressee_input">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주소</th>
|
||||
<td>
|
||||
<input class="selectAddress" value="F" type="hidden">
|
||||
<input class="address1_input" readonly="readonly"> <a class="address_search_btn" onclick="execution_daum_address()">주소 찾기</a><br>
|
||||
<input class="address2_input" readonly="readonly"><br>
|
||||
<input class="address3_input" readonly="readonly">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 상품 정보 -->
|
||||
<!-- 포인트 정보 -->
|
||||
<!-- 주문 종합 정보 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer 영역 -->
|
||||
<div class="footer_nav">
|
||||
<div class="footer_nav_container">
|
||||
<ul>
|
||||
<li>회사소개</li>
|
||||
<span class="line">|</span>
|
||||
<li>이용약관</li>
|
||||
<span class="line">|</span>
|
||||
<li>고객센터</li>
|
||||
<span class="line">|</span>
|
||||
<li>광고문의</li>
|
||||
<span class="line">|</span>
|
||||
<li>채용정보</li>
|
||||
<span class="line">|</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- class="footer_nav" -->
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer_container">
|
||||
|
||||
<div class="footer_left">
|
||||
<img src="/resources/img/Logo.png">
|
||||
</div>
|
||||
<div class="footer_right">
|
||||
(주) VamBook 대표이사 : OOO
|
||||
<br>
|
||||
사업자등록번호 : ooo-oo-ooooo
|
||||
<br>
|
||||
대표전화 : oooo-oooo(발신자 부담전화)
|
||||
<br>
|
||||
<br>
|
||||
COPYRIGHT(C) <strong>kimvampa.tistory.com</strong> ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div> <!-- class="footer" -->
|
||||
|
||||
</div> <!-- class="wrap" -->
|
||||
</div> <!-- class="wrapper" -->
|
||||
|
||||
<script>
|
||||
|
||||
/* 주소입력란 버튼 동작(숨김, 등장) */
|
||||
function showAdress(className){
|
||||
/* 컨텐츠 동작 */
|
||||
/* 모두 숨기기 */
|
||||
$(".addressInfo_input_div").css('display', 'none');
|
||||
/* 컨텐츠 보이기 */
|
||||
$(".addressInfo_input_div_" + className).css('display', 'block');
|
||||
|
||||
/* 버튼 색상 변경 */
|
||||
/* 모든 색상 동일 */
|
||||
$(".address_btn").css('backgroundColor', '#555');
|
||||
/* 지정 색상 변경 */
|
||||
$(".address_btn_"+className).css('backgroundColor', '#3c3838');
|
||||
}
|
||||
|
||||
/* 다음 주소 연동 */
|
||||
function execution_daum_address(){
|
||||
console.log("동작");
|
||||
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 + ')';
|
||||
}
|
||||
// 추가해야할 코드
|
||||
// 주소변수 문자열과 참고항목 문자열 합치기
|
||||
addr += extraAddr;
|
||||
|
||||
} else {
|
||||
addr += ' ';
|
||||
}
|
||||
|
||||
// 제거해야할 코드
|
||||
// 우편번호와 주소 정보를 해당 필드에 넣는다.
|
||||
$(".address1_input").val(data.zonecode);
|
||||
$(".address2_input").val(addr);
|
||||
// 커서를 상세주소 필드로 이동한다.
|
||||
$(".address3_input").attr("readonly", false);
|
||||
$(".address3_input").focus();
|
||||
|
||||
|
||||
}
|
||||
}).open();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
407
VamPa/src/main/webapp/resources/css/order.css
Normal file
407
VamPa/src/main/webapp/resources/css/order.css
Normal file
@@ -0,0 +1,407 @@
|
||||
@charset "UTF-8";
|
||||
*{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 화면 전체 렙 */
|
||||
.wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
/* content 랩 */
|
||||
.wrap{
|
||||
width : 1080px;
|
||||
margin: auto;
|
||||
}
|
||||
/* 홈페이지 기능 네비 */
|
||||
.top_gnb_area{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f0f0f1;
|
||||
position:relative;
|
||||
}
|
||||
.top_gnb_area .list{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
.top_gnb_area .list li{
|
||||
list-style: none;
|
||||
float : left;
|
||||
padding: 13px 15px 0 10px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 로고, 검색, 로그인 */
|
||||
.top_area{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
/* background-color: #f7f0b9; */
|
||||
}
|
||||
/* 로고 영역 */
|
||||
.logo_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.logo_area img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 검색 박스 영역 */
|
||||
.search_area{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.search_wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#searchForm{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search_input{
|
||||
display: flex;
|
||||
height: 30%;
|
||||
width: 80%;
|
||||
}
|
||||
.search_input select{
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.search_input input{
|
||||
margin-left: 10px;
|
||||
width: 57%;
|
||||
font-size: 18px;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.search_btn{
|
||||
margin-left: 10px;
|
||||
width: 17%;
|
||||
border-radius: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 로그인 버튼 영역 */
|
||||
.login_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.login_button{
|
||||
height: 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top: 30px;
|
||||
line-height: 77px;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login_area>span{
|
||||
margin-top: 10px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
}
|
||||
.login_button{
|
||||
height : 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
/* 제품 목록 네비 */
|
||||
.navi_bar_area{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #7696fd;
|
||||
}
|
||||
|
||||
/* 홈페이지 메인 제품 목록 */
|
||||
.content_area{
|
||||
width: 100%;
|
||||
min-height: 1000px;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
caption{
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_subject{
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
background-color: #5080bd;
|
||||
margin-bottom: 60px;
|
||||
|
||||
}
|
||||
.content_subject span{
|
||||
padding-left: 30 px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/* content_main */
|
||||
.content_main{
|
||||
min-height: 700px;
|
||||
padding-right: 350px;
|
||||
position: relative;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* 사용자 정보 */
|
||||
.memberInfo_table{
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-top: 2px solid #363636;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.member_info_div td{
|
||||
padding : 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/* 사용자 주소 정보 */
|
||||
.addressInfo_div{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.addressInfo_input_div_wrap{
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
height: 225px;
|
||||
}
|
||||
.address_btn {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
font-size: 17px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.address_btn:hover{
|
||||
background-color: #777;
|
||||
}
|
||||
.addressInfo_button_div::after{
|
||||
content:'';
|
||||
display:block;
|
||||
clear:both;
|
||||
}
|
||||
.addressInfo_input_div{
|
||||
padding:12px;
|
||||
text-align: left;
|
||||
display: none;
|
||||
line-height: 40px;
|
||||
}
|
||||
.addressInfo_input_div th{
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.addressInfo_input_div th{
|
||||
padding : 12px 5px 12px 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.addressInfo_input_div td{
|
||||
padding : 8px 12px;
|
||||
}
|
||||
.addressInfo_input_div_2 input{
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.address_search_btn{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 로그인 성공 영역 */
|
||||
.login_success_area{
|
||||
height: 62%;
|
||||
width: 80%;
|
||||
border: 2px solid #7474ad;
|
||||
border-radius: 15px;
|
||||
margin: 5% auto;
|
||||
padding-top: 5%;
|
||||
}
|
||||
.login_success_area>a{
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background: #e1e5e8;
|
||||
width: 82px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 25px;
|
||||
color: #606267;
|
||||
}
|
||||
.login_success_area>span{
|
||||
display : block;
|
||||
text-align: left;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
/* 검색결과 없음 */
|
||||
.table_empty{
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
margin: 200px 0 215px 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* 필터정보 */
|
||||
.search_filter {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.filter_button_wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter_button_wrap button {
|
||||
width: 50%;
|
||||
}
|
||||
.filter_button{
|
||||
background-color: #04AA6D;
|
||||
border: 1px solid green;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.filter_button_wrap:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
.filter_button_wrap button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.filter_button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
.filter_active{
|
||||
background-color: #045d3c;
|
||||
}
|
||||
.filter_content{
|
||||
padding:20px 50px 20px 50px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.filter_content a:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.filter_a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter_b{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* footer navai 영역 */
|
||||
.footer_nav{
|
||||
width:100%;
|
||||
height:50px;
|
||||
}
|
||||
.footer_nav_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:#8EC0E4;
|
||||
}
|
||||
.footer_nav_container>ul{
|
||||
font-weight : bold;
|
||||
float:left;
|
||||
list-style:none;
|
||||
position:relative;
|
||||
padding-top:10px;
|
||||
line-height: 27px;
|
||||
font-family: dotum;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer_nav_container>ul>li{
|
||||
display:inline;
|
||||
width: 45px;
|
||||
height: 19px;
|
||||
padding: 10px 9px 0 10px;
|
||||
}
|
||||
.footer_nav_container>ul>span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
/* footer 영역 */
|
||||
.footer{
|
||||
width:100%;
|
||||
height:130px;
|
||||
background-color:#D4DFE6;
|
||||
padding-bottom : 50px;
|
||||
}
|
||||
.footer_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.footer_left>img {
|
||||
width: 150%;
|
||||
height: 130px;
|
||||
margin-left: -20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
.footer_left{
|
||||
float :left;
|
||||
width: 170px;
|
||||
margin-left: 20px;
|
||||
margin-top : 30px;
|
||||
|
||||
}
|
||||
.footer_right{
|
||||
float :left;
|
||||
width: 680px;
|
||||
margin-left: 70px;
|
||||
margin-top : 30px;
|
||||
}
|
||||
|
||||
|
||||
/* float 속성 해제 */
|
||||
.clearfix{
|
||||
clear: both;
|
||||
}
|
||||
@@ -1,17 +1,292 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||||
pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<title>Welcome BookMall</title>
|
||||
<link rel="stylesheet" href="/resources/css/order.css">
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- 다음주소 -->
|
||||
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
${orderList}
|
||||
</div>
|
||||
<div>
|
||||
${memberInfo}
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="wrap">
|
||||
<div class="top_gnb_area">
|
||||
<ul class="list">
|
||||
<c:if test = "${member == null}"> <!-- 로그인 x -->
|
||||
<li >
|
||||
<a href="/member/login">로그인</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/member/join">회원가입</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<c:if test="${member != null }"> <!-- 로그인 o -->
|
||||
<c:if test="${member.adminCk == 1 }"> <!-- 관리자 계정 -->
|
||||
<li><a href="/admin/main">관리자 페이지</a></li>
|
||||
</c:if>
|
||||
<li>
|
||||
<a id="gnb_logout_button">로그아웃</a>
|
||||
</li>
|
||||
<li>
|
||||
마이룸
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cart/${member.memberId}">장바구니</a>
|
||||
</li>
|
||||
</c:if>
|
||||
<li>
|
||||
고객센터
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top_area">
|
||||
<!-- 로고영역 -->
|
||||
<div class="logo_area">
|
||||
<a href="/main"><img src="/resources/img/mLogo.png"></a>
|
||||
</div>
|
||||
<div class="search_area">
|
||||
<div class="search_wrap">
|
||||
<form id="searchForm" action="/search" method="get">
|
||||
<div class="search_input">
|
||||
<select name="type">
|
||||
<option value="T">책 제목</option>
|
||||
<option value="A">작가</option>
|
||||
</select>
|
||||
<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>">
|
||||
<button class='btn search_btn'>검 색</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login_area">
|
||||
|
||||
<!-- 로그인 하지 않은 상태 -->
|
||||
<c:if test = "${member == null }">
|
||||
<div class="login_button"><a href="/member/login">로그인</a></div>
|
||||
<span><a href="/member/join">회원가입</a></span>
|
||||
</c:if>
|
||||
|
||||
<!-- 로그인한 상태 -->
|
||||
<c:if test="${ member != null }">
|
||||
<div class="login_success_area">
|
||||
<span>회원 : ${member.memberName}</span>
|
||||
<span>충전금액 : <fmt:formatNumber value="${member.money }" pattern="\#,###.##"/></span>
|
||||
<span>포인트 : <fmt:formatNumber value="${member.point }" pattern="#,###" /></span>
|
||||
<a href="/member/logout.do">로그아웃</a>
|
||||
</div>
|
||||
</c:if>
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content_area">
|
||||
|
||||
<div class="content_subject"><span>장바구니</span></div>
|
||||
|
||||
<div class="content_main">
|
||||
<!-- 회원 정보 -->
|
||||
<div class="member_info_div">
|
||||
<table class="table_text_align_center memberInfo_table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 25%;">주문자</th>
|
||||
<td style="width: *">${memberInfo.memberName} | ${memberInfo.memberMail}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 배송지 정보 -->
|
||||
<div class="addressInfo_div">
|
||||
<div class="addressInfo_button_div">
|
||||
<button class="address_btn address_btn_1" onclick="showAdress('1')" style="background-color: #3c3838;">상용자 정보 주소록</button>
|
||||
<button class="address_btn address_btn_2" onclick="showAdress('2')">직접 입력</button>
|
||||
</div>
|
||||
<div class="addressInfo_input_div_wrap">
|
||||
<div class="addressInfo_input_div addressInfo_input_div_1" style="display: block">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<td>
|
||||
${memberInfo.memberName}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주소</th>
|
||||
<td>
|
||||
${memberInfo.memberAddr1} ${memberInfo.memberAddr2}<br>${memberInfo.memberAddr3}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="addressInfo_input_div addressInfo_input_div_2">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="*">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<td>
|
||||
<input class="addressee_input">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>주소</th>
|
||||
<td>
|
||||
<input class="selectAddress" value="F" type="hidden">
|
||||
<input class="address1_input" readonly="readonly"> <a class="address_search_btn" onclick="execution_daum_address()">주소 찾기</a><br>
|
||||
<input class="address2_input" readonly="readonly"><br>
|
||||
<input class="address3_input" readonly="readonly">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 상품 정보 -->
|
||||
<!-- 포인트 정보 -->
|
||||
<!-- 주문 종합 정보 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer 영역 -->
|
||||
<div class="footer_nav">
|
||||
<div class="footer_nav_container">
|
||||
<ul>
|
||||
<li>회사소개</li>
|
||||
<span class="line">|</span>
|
||||
<li>이용약관</li>
|
||||
<span class="line">|</span>
|
||||
<li>고객센터</li>
|
||||
<span class="line">|</span>
|
||||
<li>광고문의</li>
|
||||
<span class="line">|</span>
|
||||
<li>채용정보</li>
|
||||
<span class="line">|</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- class="footer_nav" -->
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer_container">
|
||||
|
||||
<div class="footer_left">
|
||||
<img src="/resources/img/Logo.png">
|
||||
</div>
|
||||
<div class="footer_right">
|
||||
(주) VamBook 대표이사 : OOO
|
||||
<br>
|
||||
사업자등록번호 : ooo-oo-ooooo
|
||||
<br>
|
||||
대표전화 : oooo-oooo(발신자 부담전화)
|
||||
<br>
|
||||
<br>
|
||||
COPYRIGHT(C) <strong>kimvampa.tistory.com</strong> ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div> <!-- class="footer" -->
|
||||
|
||||
</div> <!-- class="wrap" -->
|
||||
</div> <!-- class="wrapper" -->
|
||||
|
||||
<script>
|
||||
|
||||
/* 주소입력란 버튼 동작(숨김, 등장) */
|
||||
function showAdress(className){
|
||||
/* 컨텐츠 동작 */
|
||||
/* 모두 숨기기 */
|
||||
$(".addressInfo_input_div").css('display', 'none');
|
||||
/* 컨텐츠 보이기 */
|
||||
$(".addressInfo_input_div_" + className).css('display', 'block');
|
||||
|
||||
/* 버튼 색상 변경 */
|
||||
/* 모든 색상 동일 */
|
||||
$(".address_btn").css('backgroundColor', '#555');
|
||||
/* 지정 색상 변경 */
|
||||
$(".address_btn_"+className).css('backgroundColor', '#3c3838');
|
||||
}
|
||||
|
||||
/* 다음 주소 연동 */
|
||||
function execution_daum_address(){
|
||||
console.log("동작");
|
||||
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 + ')';
|
||||
}
|
||||
// 추가해야할 코드
|
||||
// 주소변수 문자열과 참고항목 문자열 합치기
|
||||
addr += extraAddr;
|
||||
|
||||
} else {
|
||||
addr += ' ';
|
||||
}
|
||||
|
||||
// 제거해야할 코드
|
||||
// 우편번호와 주소 정보를 해당 필드에 넣는다.
|
||||
$(".address1_input").val(data.zonecode);
|
||||
$(".address2_input").val(addr);
|
||||
// 커서를 상세주소 필드로 이동한다.
|
||||
$(".address3_input").attr("readonly", false);
|
||||
$(".address3_input").focus();
|
||||
|
||||
|
||||
}
|
||||
}).open();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
407
VamPa_MySQL/src/main/webapp/resources/css/order.css
Normal file
407
VamPa_MySQL/src/main/webapp/resources/css/order.css
Normal file
@@ -0,0 +1,407 @@
|
||||
@charset "UTF-8";
|
||||
*{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 화면 전체 렙 */
|
||||
.wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
/* content 랩 */
|
||||
.wrap{
|
||||
width : 1080px;
|
||||
margin: auto;
|
||||
}
|
||||
/* 홈페이지 기능 네비 */
|
||||
.top_gnb_area{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #f0f0f1;
|
||||
position:relative;
|
||||
}
|
||||
.top_gnb_area .list{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
|
||||
}
|
||||
.top_gnb_area .list li{
|
||||
list-style: none;
|
||||
float : left;
|
||||
padding: 13px 15px 0 10px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 로고, 검색, 로그인 */
|
||||
.top_area{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
/* background-color: #f7f0b9; */
|
||||
}
|
||||
/* 로고 영역 */
|
||||
.logo_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.logo_area img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 검색 박스 영역 */
|
||||
.search_area{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float:left;
|
||||
}
|
||||
.search_wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#searchForm{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search_input{
|
||||
display: flex;
|
||||
height: 30%;
|
||||
width: 80%;
|
||||
}
|
||||
.search_input select{
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.search_input input{
|
||||
margin-left: 10px;
|
||||
width: 57%;
|
||||
font-size: 18px;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.search_btn{
|
||||
margin-left: 10px;
|
||||
width: 17%;
|
||||
border-radius: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* 로그인 버튼 영역 */
|
||||
.login_area{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.login_button{
|
||||
height: 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top: 30px;
|
||||
line-height: 77px;
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login_area>span{
|
||||
margin-top: 10px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
}
|
||||
.login_button{
|
||||
height : 50%;
|
||||
background-color: #D4DFE6;
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
/* 제품 목록 네비 */
|
||||
.navi_bar_area{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #7696fd;
|
||||
}
|
||||
|
||||
/* 홈페이지 메인 제품 목록 */
|
||||
.content_area{
|
||||
width: 100%;
|
||||
min-height: 1000px;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.table_text_align_center{
|
||||
text-align: center;
|
||||
}
|
||||
caption{
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_subject{
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
background-color: #5080bd;
|
||||
margin-bottom: 60px;
|
||||
|
||||
}
|
||||
.content_subject span{
|
||||
padding-left: 30 px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/* content_main */
|
||||
.content_main{
|
||||
min-height: 700px;
|
||||
padding-right: 350px;
|
||||
position: relative;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* 사용자 정보 */
|
||||
.memberInfo_table{
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-top: 2px solid #363636;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.member_info_div td{
|
||||
padding : 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/* 사용자 주소 정보 */
|
||||
.addressInfo_div{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.addressInfo_input_div_wrap{
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
height: 225px;
|
||||
}
|
||||
.address_btn {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
font-size: 17px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.address_btn:hover{
|
||||
background-color: #777;
|
||||
}
|
||||
.addressInfo_button_div::after{
|
||||
content:'';
|
||||
display:block;
|
||||
clear:both;
|
||||
}
|
||||
.addressInfo_input_div{
|
||||
padding:12px;
|
||||
text-align: left;
|
||||
display: none;
|
||||
line-height: 40px;
|
||||
}
|
||||
.addressInfo_input_div th{
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
.addressInfo_input_div th{
|
||||
padding : 12px 5px 12px 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.addressInfo_input_div td{
|
||||
padding : 8px 12px;
|
||||
}
|
||||
.addressInfo_input_div_2 input{
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.address_search_btn{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 로그인 성공 영역 */
|
||||
.login_success_area{
|
||||
height: 62%;
|
||||
width: 80%;
|
||||
border: 2px solid #7474ad;
|
||||
border-radius: 15px;
|
||||
margin: 5% auto;
|
||||
padding-top: 5%;
|
||||
}
|
||||
.login_success_area>a{
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background: #e1e5e8;
|
||||
width: 82px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 25px;
|
||||
color: #606267;
|
||||
}
|
||||
.login_success_area>span{
|
||||
display : block;
|
||||
text-align: left;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
/* 검색결과 없음 */
|
||||
.table_empty{
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
margin: 200px 0 215px 0px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* 필터정보 */
|
||||
.search_filter {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.filter_button_wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter_button_wrap button {
|
||||
width: 50%;
|
||||
}
|
||||
.filter_button{
|
||||
background-color: #04AA6D;
|
||||
border: 1px solid green;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.filter_button_wrap:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
.filter_button_wrap button:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.filter_button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
.filter_active{
|
||||
background-color: #045d3c;
|
||||
}
|
||||
.filter_content{
|
||||
padding:20px 50px 20px 50px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.filter_content a:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.filter_a{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter_b{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* footer navai 영역 */
|
||||
.footer_nav{
|
||||
width:100%;
|
||||
height:50px;
|
||||
}
|
||||
.footer_nav_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:#8EC0E4;
|
||||
}
|
||||
.footer_nav_container>ul{
|
||||
font-weight : bold;
|
||||
float:left;
|
||||
list-style:none;
|
||||
position:relative;
|
||||
padding-top:10px;
|
||||
line-height: 27px;
|
||||
font-family: dotum;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer_nav_container>ul>li{
|
||||
display:inline;
|
||||
width: 45px;
|
||||
height: 19px;
|
||||
padding: 10px 9px 0 10px;
|
||||
}
|
||||
.footer_nav_container>ul>span{
|
||||
margin: 0 4px;
|
||||
}
|
||||
/* footer 영역 */
|
||||
.footer{
|
||||
width:100%;
|
||||
height:130px;
|
||||
background-color:#D4DFE6;
|
||||
padding-bottom : 50px;
|
||||
}
|
||||
.footer_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.footer_left>img {
|
||||
width: 150%;
|
||||
height: 130px;
|
||||
margin-left: -20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
.footer_left{
|
||||
float :left;
|
||||
width: 170px;
|
||||
margin-left: 20px;
|
||||
margin-top : 30px;
|
||||
|
||||
}
|
||||
.footer_right{
|
||||
float :left;
|
||||
width: 680px;
|
||||
margin-left: 70px;
|
||||
margin-top : 30px;
|
||||
}
|
||||
|
||||
|
||||
/* float 속성 해제 */
|
||||
.clearfix{
|
||||
clear: both;
|
||||
}
|
||||
Reference in New Issue
Block a user