스프링부트+jsp로 배달사이트 만들기-04 mypage, 로그인페이지 만들기

 

아래 코드를 해당 위치에 붙여넣기합니다

UserController

@Controller
public class UserController {
	
	@GetMapping("/myPage")
	public String myPage() {
		return "user/myPage";
	}
	
	@GetMapping("/login")
	public String login() {
		return "user/login";
	}
}

 

myPage.css

section.title {
    width: 100%;
}

section.title h1 {
    text-align: center;
    margin : 30px 0 30px 0 ;
}

/* 콘텐츠 */

main {
	/* min-height: 390px; */
}

main .container {
    max-width: 1200px;
    margin: 0 auto;
}

main .container .grid_box {
	margin: 0 auto 30px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 75px 1fr 1fr;
	width: 67%;
	text-align: center;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

main .container .grid_box > div {
	border: 1px solid #ddd; 
	border-bottom: none;
	border-right: none;
}

main .container .grid_box .login_box {
    grid-column-end: span 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px; 
}

main .container .grid_box .login_box span {
	display: inline;
}

main .container .grid_box .login_box a {
	font-size: 2rem;
	font-weight: bold
}
	
main .container .grid_box .login_box a:after {
	content: '>';
	color: rgb(202, 198, 198);
	margin-left: 5px;
}

main .container .grid_box .login_box .logout {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
}

main .container .grid_box > div a span:last-child {
	padding-bottom: 15px;
	margin-top: -10px;
}

main .container .grid_box > div a span {
	display: block;
}

main .container .grid_box > div img {
	width: 130px;
}


@media (max-width:1023px) {
	main .container .grid_box {
		width: 80%;
	}
}
@media  (max-width:767px) {
	.wrap {
		min-height: calc(100vh - 277px);
	}
	
	main .container .grid_box {
		width: 90%;
		grid-template-rows: 50px 1fr 1fr;
	}
	
	main .container .grid_box > div img {
	    width: 100px;
	} 
}


@media  (max-width:480px) {
	.wrap {
		min-height: calc(100vh - 274px);
	}
	main .container .grid_box {
		width: 99%;
	}
	
	main .container .grid_box > div img {
	    width: 80px;
	} 
	
}

 

myPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>
<link rel="stylesheet" href="/css/layout/nav.css">
<link rel="stylesheet" href="/css/user/myPage.css">

<%@ include file="/WEB-INF/view/include/header.jsp" %>

	<div class="wrap"> 

	    <section class="title">
	        <h1>my 배민</h1> 
	    </section>
			
	    <!-- 콘텐츠 -->
	    <main>
	    	<div class="container">
	    	
		    	<div class="grid_box">
		    		<div class="login_box">
	    				 <c:if test="${empty SPRING_SECURITY_CONTEXT }">
	                         <a href="/login"><span>로그인을 해주세요</span></a>
	                    </c:if>
	                    
	                    
	                    <c:if test="${!empty SPRING_SECURITY_CONTEXT }">
                            <c:set var="nickname" value="${SPRING_SECURITY_CONTEXT.authentication.principal.user.nickname }" />
	                        <a href="/user/myInfo"><span class="nickname" data-nickname=${nickname } >${nickname }</span></a>
							<button type="button" class="logout">로그아웃</button>
	                    </c:if>
		    		</div>
		    		
		    		
		    		<div>
		    			<a href="/user/point" onclick="return loginCheck();">
	                       	<span class="img_box">
	                       		<img src="/img/icon11.png" alt="포인트">
	                       	</span>
	                       	<span>포인트</span>
	                  	</a>
		    		</div>
		    		
		    		
		    		<div>
		    			<a class="updating" href="/myPage/coupon" onclick="return false;">
	               		  	<span class="img_box">
	                			<img src="/img/icon22.png" alt="쿠폰함">
	               			</span>
	               			<span>쿠폰함</span>
	              		</a>
		    		</div>
		    		
		    		
		    		<div>
		    			<a class="updating" href="/myPage/gift" onclick="return false;">
	                 		<span class="img_box">
	                 			<img src="/img/icon33.png" alt="선물함">
	                 		</span>
	                        <span>선물함</span>
						</a>
		    		</div>
		    		
		    		
		    		<div>
						<a href="/likes/store">
							<span class="img_box">
								<img src="/img/icon44.png" alt="찜한가게">
							</span>
							<span>찜한가게</span>
						</a>
		    		</div>
		    		
		    		
		    		<div>
						<a href="/orderList">
							<span class="img_box">
								<img src="/img/icon55.png" alt="주문내역">
							</span>
							<span>주문내역</span>
						</a>
		    		</div>
		    		
		    		
		    		<div>
						<a href="/user/myReview" onclick="return loginCheck()" >
							<span class="img_box">
								<img src="/img/icon66.png" alt="리뷰관리">
							</span>
							<span>리뷰관리</span>
						</a>
		    		</div>
		    		
		    	</div>
	    		
	    	</div>
	    </main>
	    
    </div>
    
    <!-- 콘텐츠 -->


    <!-- 하단 메뉴 -->
	<%@ include file="/WEB-INF/view/include/nav.jsp" %>
    <!-- 하단 메뉴 -->

    <!-- 푸터 -->
    <%@ include file="/WEB-INF/view/include/footer.jsp" %>
    <!-- 푸터 -->

    <script type="text/javascript">

        $(".updating").click(function () {
            swal("업데이트 준비 중 입니다");
        })

        $(".logout").click(function () {
            location.href = "/logout";
        })
        
        function loginCheck(){
        	const nickname = $(".nickname").data("nickname");
        	if(!nickname) {
        		swal("로그인 후 이용 가능합니다");
	        	return false;
        	}
        	return true;
        	
        }
        
    </script>

</body>

</html>

 

SPRING_SECURITY_CONTEXT는 스프링 시큐리티로 로그인을 하면 생성되는 세션인데

나중에 로그인 여부를 확인하기위해 사용됩니다

 

 

 

login.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>

<link rel="stylesheet" href="/css/user/login.css">
</head>
<body>
    <main>
        <div class="login_box">
			<a href="/"><img src="/img/bamin2.png" alt="이미지" class="bm_img"></a>    
            
            <form action="/login" method="post">

	            <div class="input_aera"><input type="text" name="username"  value="" required placeholder="이메일을 입력해 주세요" maxlength="30" ></div>
	            <div class="input_aera"><input type="password" name="password" value="" required placeholder="비밀번호를 입력해 주세요" maxlength="30"></div>

				<input type="submit" value="로그인" class="login_btn" >
            
				<div class="box">
					<div class="continue_login">
						<label for="continue_login"> 
							<span>로그인 유지하기</span>
							<input type="checkbox" id="continue_login" name="remember-me" > 
							<i class="fas fa-check-square"></i>
						</label>
					</div>
					
		            <div>
		            	<span class="id_search"><a href="/find/id">아이디</a></span>
			            <span> ㅣ </span>
			            <span><a href="/find/password">비밀번호 찾기</a></span>
		            </div>
	            </div>
            </form>
            
			<div id="oauth_login">
				<div>
					<a href="/oauth2/authorization/kakao"></a>
				</div>

				<div>
					<a href="/oauth2/authorization/naver"></a>
				</div>
				
				<div>
					<a href="/oauth2/authorization/google"></a>
				</div>
			</div>
			
			<div class="join"><a href="/join" >회원 가입하러 가기</a></div>
        </div>
    </main>
    
    
</body>
</html>

 

login.css

main {
	width: 70%;
	margin: 40px auto;
	border: 1px solid #ddd;
	border-radius: 15px;
	padding-bottom: 40px;
}

.login_box {
	margin: 0px auto;
	text-align: center;
}

.bm_img {
	width: 50%;
}

.login_box .input_aera {
	margin: 10px auto;
	width: 80%;
}

.login_box input {
	margin: 3px auto;
	width: 100%;
	height: 40px;
	padding: 0 2%;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

.login_box .login_btn,
#login_btn  {
	background: #2AC1BC;
	border-radius: 10px;
	width: 80%;
	height: 45px;
	color: #fff;
	cursor: pointer;
	font-size: 1.8rem;
	font-weight: bold;
}

.login_box .box {
	display: flex;
	justify-content: space-between; 
	width: 80%;
	margin: 10px auto 40px auto;
}

.login_box .box .continue_login {
	direction: rtl;
}

.login_box .box i {
	font-size: 2rem;
	color: #999999;
}

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"]:checked ~ i{
	color: #2AC1BC;
}

#oauth_login div {
	width: 300px;
	margin: 5px auto;
	height: 55px;
	border-radius: 5px;
	box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 25%);
}


#oauth_login div a {
	display: block;
	width: 100%;
	height: 100%;
}

#oauth_login div:nth-child(1) a {
	background: url("/img/kakao_login_btn.png") no-repeat center;
	background-size: cover;	
	
}

#oauth_login div:nth-child(2) a {
	background: url("/img/naver_login_btn2.png") no-repeat center;
	background-size: cover;	
}

#oauth_login div:nth-child(3) a {
	background: url("/img/btn_google.png") no-repeat center;
	background-size: cover;	
}

.join {
	margin-top: 20px;
}
.join a {
	color: rgb(43,206,203);
	font-weight: bold;
	font-size: 1.8rem;
	margin-top: 20px;
}

@media ( max-width :1023px) {
	main {
		width: 90%;
	}
}

@media ( max-width : 767px ) {
	html {
		font-size: 58%;
	}
	
	main {
		width: 99%;
	}
	
	.login_box .input_aera {
		width: 90%;
	}
	
	.login_box .login_btn {
		width: 90%;
	}
	
	.login_box .box {
		width: 90%;
		margin: 10px auto;
	}

	#oauth_login {
		display: flex;
		width: 230px;
		margin: 0 auto;
	}
	#oauth_login div {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 25%);
	}

	#oauth_login div:nth-child(1) a {
		background: url("/img/btn_kakao_m.png") no-repeat center;
		background-size: cover;
	}
	
	#oauth_login div:nth-child(2) a {
		background: url("/img/btn_naver_m.png") no-repeat center;
		background-size: cover;		
	}
	
	#oauth_login div:nth-child(3) a {
		background: url("/img/btn_google_m.png") no-repeat center;
		background-size: cover;
	}

	
}

@media (max-width: 480px) {
	html {
		font-size: 58%;
	}
	
}