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

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

2021. 12. 4. 17:30ㆍ스프링부트

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

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는 스프링 시큐리티로 로그인을 하면 생성되는 세션인데

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

 <%@ 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>

 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%;
	}
	
}

'스프링부트' 카테고리의 다른 글

스프링부트+jsp로 배달사이트 만들기-06 회원가입 02 MYBATIS 사용하기 (21)	2021.12.05
스프링부트+jsp로 배달사이트 만들기-05 회원가입 01 (2)	2021.12.04
스프링부트+jsp로 배달사이트 만들기-03 메인페이지 만들기2(쿠키,세션으로 주소저장) (0)	2021.12.04
스프링부트+jsp로 배달사이트 만들기-02 메인페이지 만들기1 (0)	2021.12.03
스프링부트+jsp로 배달사이트 만들기-01 프로젝트 생성 (3)	2021.12.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

sumin

sumin

태그

최근글

댓글

공지사항

아카이브

'스프링부트' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	@Controller
	public class UserController {

	@GetMapping("/myPage")
	public String myPage() {
	return "user/myPage";
	}

	@GetMapping("/login")
	public String login() {
	return "user/login";
	}
	}

	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;
	}

	}

	<%@ 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>

	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%;
	}

	}