Project/과정 기록
[스프링] 미니프로젝트 : 인스타그램 클론 코딩하기 (3) JSP 및 HTML
minulbora
2024. 3. 19. 16:49
index 페이지 (로그인)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="/WEB-INF/views/include/head.jsp" %>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="/resources/css/index.css">
<title>index</title>
<script>
$(document).ready(function() {
$("#userId").focus();
$('#userPwd').on('input', function() {
if ($('#userPwd').val() == '') {
$('#showPw').css('visibility', 'hidden');
}
else {
$('#showPw').css('visibility', 'visible');
}
});
$('#showPw').on('click',function() {
var pw = $("#userPwd");
var pwType = pw.attr('type');
if (pwType == 'password') {
pw.attr('type', 'text');
$('#showPw').attr('src', './resources/images/visibility_off.png');
}
else {
pw.attr('type', 'password');
$('#showPw').attr('src', './resources/images/visibility.png');
}
});
$("#btn_login").on("click",function(){
if($.trim($("#userId").val()).length<=0){
alert("아이디를 입력하세요.");
$("#userId").val("");
$("#userId").focus();
return;
}
if($.trim($("#userPwd").val()).length<=0){
alert("비밀번호를 입력하세요.");
$("#userPwd").val("");
$("#userPwd").focus();
return;
}
//alert($("#userId").val()+$("#userPwd").val());
$.ajax({
type:"POST",
url:"/loginProc",
data:{
userId:$("#userId").val(),
userPwd:$("#userPwd").val()
},
datatype:"JSON",
success:function(response){
if(response.code==0){
alert("로그인 성공");
location.href="/board/mainBoard";
}
else if(response.code==-1 || response.code==300){
alert("아이디 혹은 비밀번호가 일치하지 않습니다.");
$("#userId").focus();
}
else if(response.code==-98){
alert("탈퇴한 회원입니다.");
}
else if(response.code==-99){
alert("정지된 회원입니다.");
}
else if(response.code==-100){
alert("회원 상태가 올바르지 않습니다.");
}
else if(response.code==400){
alert("파라미터가 올바르지 않습니다.");
}
else{
alert("로그인에 실패하였습니다.");
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
});
});
</script>
</head>
<body>
<div class="main">
<div class="container">
<div class="logo">
<a href="./index.jsp"><img src="./resources/images/Sistagram.png" alt="Instagram" class="brand_logo"></a>
</div>
<div class="centent">
<form name="login_form" action="./main.html" method="POST">
<div class="input_value">
<input type="text" id="userId" name="userId" placeholder="아이디">
</div>
<div class="input_value">
<input type="password" id="userPwd" name="userPwd" placeholder="비밀번호를 입력하세요">
<img class="showPw" id="showPw" name="showPw" src="./resources/images/visibility.png" style="visibility: hidden;">
</div>
<div class="btn_submit">
<button type="button" id="btn_login">로그인</button>
</div>
</form>
<div>
<span id="Check" name="Check"></span>
</div>
<div class="or_line">
<div class="line"></div>
<div class="text">또는</div>
<div class="line"></div>
</div>
<ul class="find_pw">
<li><a href="/user/findPwd">비밀번호를 잊으셨나요?</a></li>
</ul>
</div>
</div>
<div class="container">
<span><p style="margin: 15px;"/>계정이 없으신가요? <a href="/user/signUp"><span style="color: #4cb5f9;">가입하기</span></a></p></span>
</div>
</div>
</body>
</html>2. 회원가입
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ include file="/WEB-INF/views/include/head.jsp" %>
<html>
<head>
<meta charset="UTF-8">
<title>signUp</title>
<link rel="stylesheet" type="text/css" href="/resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="/resources/css/index.css">
<script>
$(document).ready(function() {
$("#userId").focus();
$('#userPwd').on('input', function() {
if ($('#userPwd').val() == '') {
$('#showPw').css('visibility', 'hidden');
}
else {
$('#showPw').css('visibility', 'visible');
}
});
$('#showPw').on('click',function() {
var pw = $("#userPwd");
var pwType = pw.attr('type');
if (pwType == 'password') {
pw.attr('type', 'text');
$('#showPw').attr('src', './resources/images/visibility_off.png');
}
else {
pw.attr('type', 'password');
$('#showPw').attr('src', './resources/images/visibility.png');
}
});
$("#btn_signup").on("click",function(){
if(!isEmpty($("#userId").val())){
alert("아이디는 필수 입력 사항입니다.");
$("#userId").focus();
return;
}
if(!isCorrect($("#userId").val())){
alert("아이디는 영문 대소문자, 숫자, '_'로만 작성이 가능합니다.")
$("#userId").val("");
$("#userId").focus();
return;
}
var numCheck = /^\d+$/;
if(numCheck.test($("#userId").val())){
alert("아이디는 숫자만 포함할 수는 없습니다.");
$("#userId").val("");
$("#userId").focus();
return;
}
if(isEmail($("#userId").val())){
alert("아이디는 이메일의 형식을 사용할 수 없습니다.");
$("#userId").val("");
$("#userId").focus();
return;
}
if(!isEmpty($("#userPwd").val())){
alert("비밀번호는 필수 입력 사항입니다.");
$("#userPwd").focus();
return;
}
if(!isCorrect($("#userPwd").val())){
alert("비밀번호가 형식에 맞지 않습니다.");
$("#userPwd").focus();
return;
}
if(!isEmpty($("#userName").val())){
alert("이름을 입력해 주세요.");
$("#userName").focus();
return;
}
if(!isEmpty($("#userEmail").val())){
alert("이메일을 입력해 주세요.");
$("#userEmail").focus();
return;
}
if(!isEmail($("#userEmail").val())){
alert("이메일이 형식에 맞지 않습니다.");
$("#userEmail").focus();
return;
}
//회원가입 (id 중복 포함)
$.ajax({
type: "POST",
url: "/user/regProc",
data: {
userId : $("#userId").val(),
userPwd : $("#userPwd").val(),
userName : $("#userName").val(),
userEmail : $("#userEmail").val()
},
datatype: "JSON",
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("가입 완료");
location.href="/index";
}
else if(response.code==100){
alert("네트워크 오류로 가입에 실패하였습니다.");
$("#userId").focus();
}
else if(response.code==300){
alert("이미 존재하는 아이디입니다.");
$("#userId").val("");
$("#userId").focus();
}
else{
alert("파라미터 오류 발생");
$("#userId").focus();
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
}); //$.ajax({
});
});
function isEmpty (str){
return str.trim().length > 0;
}
function isCorrect (str){
var Corretreg = /^[a-zA-Z0-9_]{3,20}$/;
return Corretreg.test(str);
}
function isEmail (str){
var Emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return Emailreg.test(str);
}
</script>
</head>
<body>
<div class="main">
<div class="container">
<div class="logo">
<img src="/resources/images/Sistagram.png" alt="Instagram" class="brand_logo">
</div>
<div class="centent">
<form name="signup_form" id="signup_form" action="" method="POST">
<div class="content_text">
<span style="font-weight: bold;">친구들의 사진과 동영상을 보려면 <br/> 가입하세요</span>
</div>
<div class="input_value">
<input type="text" id="userId" name="userId" placeholder="아이디">
</div>
<div class="input_value">
<input type="password" id="userPwd" name="userPwd" placeholder="비밀번호를 입력하세요">
<img class="showPw" id="showPw" name="showPw" src="/resources/images/visibility.png" style="visibility: hidden;">
</div>
<div class="input_value">
<input type="text" id="userName" name="userName" placeholder="이름">
</div>
<div class="input_value">
<input type="text" id="userEmail" name="userEmail" placeholder="이메일">
</div>
<div class="btn_submit">
<button type="button" id="btn_signup">가입</button>
</div>
</form>
<form name="hiddenForm" id="hiddenForm" method="post">
<input type="hidden" id="userId1" name="userId1" value=""/>
<input type="hidden" id="userPwd1" name="userPwd1" value=""/>
<input type="hidden" id="userName1" name="userName1" value=""/>
<input type="hidden" id="userEmail1" name="userEamil1" value=""/>
</form>
</div>
</div>
<div class="container">
<span><p style="margin: 15px;">계정이 있으신가요? <a href="/index"><span style="color: #4cb5f9;">로그인</span></a></p></span>
</div>
</div>
</body>
</html>3. 비밀번호 찾기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/head.jsp" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="/resources/css/index.css">
<title>findPwd</title>
<script>
$(document).ready(function() {
var gubun=0;
$("#btnResetPwd").on("click",function(){
$("#btn_submit").on("disable",true);
if(isEmail($("#userEmail").val())){
gubun=2;
}
else if(isTel($("#userEmail").val())){
gubun=3;
}
else{
gubun=1;
}
//alert("ajax시작");
$.ajax({
type:"POST",
url:"/user/verification",
data:{
userEmail:$("#userEmail").val(),
gubun:gubun
},
datatype:"JSON",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
location.href="/";
}
else if(response.code== 300){
alert("회원정보가 존재하지 않습니다.");
$("#userEmail").val("");
$("#userEmail").focus();
$("#btn_submit").on("disable",false);
}
else{
alert("오류가 발생하였습니다.")
$("#btn_submit").on("disable",false);
}
},
error:function(xhr,status,error){
alert("오류 발생");
icia.common.error(error);
$("#btn_submit").on("disable",false);
}
}); //ajax
}); //btn
}); //document
</script>
</head>
<body>
<div class="main">
<div class="container">
<div class="logo">
<img src="/resources/images/Sistagram.png" alt="Instagram" class="brand_logo">
</div>
<div class="centent">
<form name="findpw_form" action="" method="POST">
<div class="content_text">
<span style="font-weight: bold;">로그인에 문제가 있나요?</span>
</div>
<div class="content_text">
<span style="font-size: 13px;">이메일 주소, 전화번호 또는 아이디를 입력하시면 계정에 다시 액세스할 수 있는 링크를 보내드립니다</span>
</div>
<div class="input_value">
<input type="text" id="userEmail" name="userEmail" placeholder="이메일, 전화번호, 아이디">
</div>
<div class="btn_submit">
<button id="btnResetPwd">비밀번호 재설정</button>
</div>
</form>
<div class="or_line">
<div class="line"></div>
<div class="text">또는</div>
<div class="line"></div>
</div>
<ul class="find_pw">
<li><a href="/user/signUp">새 계정 만들기</a></li>
</ul>
</div>
</div>
<div class="container">
<span><a href="/index">로그인으로 돌아가기</a></span>
</div>
</div>
</div>
</div>
<script>
function isTel (str){
var Corretreg = /^[0-9]*$/;
return Corretreg.test(str);
}
function isCorrect (str){
var Corretreg = /^[a-zA-Z0-9_]{3,20}$/;
return Corretreg.test(str);
}
function isEmail (str){
var Emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return Emailreg.test(str);
}
</script>
</body>
</html>4. 프로필 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>update your profile</title>
<link rel="stylesheet" href="/resources/css/reset.css">
<script src="/resources/js/jquery-3.5.1.min.js"></script>
<%@ include file="/WEB-INF/views/include/head2.jsp" %>
<link rel="stylesheet" type="text/css" href="/resources/css/profile.css">
<link rel="stylesheet" type="text/css" href="/resources/css/boardModal.css">
</head>
<body>
<div>
<div>
<%@ include file="/WEB-INF/views/include/navigation.jsp"%>
<div class="main">
<div>
<div>
<div>
<section style="width:800px;">
<section style="display: flex; align-items: center;">
<img src="${userPhoto}" alt="profile.jpg" onerror="this.src='/resources/images/default_profile.png';" class="profile-image"/>
<div style="margin-left: 10%;">
<div><b>${user.userId}</b>
<c:if test="${! empty user.blueId and user.blueId eq 'B'}">
<img src="/resources/images/check.png" alt="구매!" style="width:19px; margin-top:10px;
margin-left:-5px;">
</c:if>
<c:if test="${user.userId eq cookieId}">
<button class="button" onclick="goProfile()">프로필 편집</button>
</c:if>
<c:if test="${user.userId ne cookieId}">
<c:choose>
<c:when test="${isFollow eq 0}">
<button class="button" id="followBtn">팔로우</button>
</c:when>
<c:otherwise>
<button class="button-followed">팔로잉</button>
</c:otherwise>
</c:choose>
</c:if>
<c:if test="${user.userId eq cookieId}">
<c:choose>
<c:when test="${! empty user.blueId and user.blueId eq 'B'}">
<button class="button-2">구매 완료</button>
</c:when>
<c:otherwise>
<c:if test="${user.userId eq cookieId}">
<button class="button" id="sellingBox">판매 페이지</button>
</c:if>
</c:otherwise>
</c:choose>
</c:if>
</div>
<script>
function goProfile(){
window.location.href = '/user/update';
}
</script>
<br/>
<div style="font-size: 13px;">게시물 <b>${boardTotal}</b> 팔로잉 <b>${insFollow.followingCnt}</b> 팔로워 <b>${insFollow.followedCnt}</b> </div>
<br />
<b style="font-size: 13px;">${user.userName}</b>
<span class="spaced-text"></span>
<p style="font-size: 13px; letter-spacing: -0.5px">${user.userIntro}</p>
</div>
<br/>
</section>
<div style="justify-content: center;">
<img src="/resources/images/pf3.jpg" alt="profile.jpg" class="profile-image2"/>
<img src="/resources/images/pf3.jpg" alt="profile.jpg" class="profile-image2"/>
<img src="/resources/images/pf3.jpg" alt="profile.jpg" class="profile-image2"/>
</div>
<hr/>
<section>
<div class="image-container">
<c:if test="${!empty list}">
<c:forEach var="board" items="${list}" varStatus="status">
<c:choose>
<c:when test="${status.index != 0 && status.index % 3 == 1}">
<br/>
<div class="image-box" style="width:32%;">
<div class="image-overlay" onclick="openViewModal(${board.boardNum})">
<img src="/resources/images/profile_heart.png" style="height:17px;"> <p>${board.likeCnt}</p>
<img src="/resources/images/profile_comment.png" style="height:17px;"> <p>${board.commentCnt}</p>
</div>
<img class="square-image" src="/resources/upload2/${board.fileName}" alt="Square Image 1">
</div>
</c:when>
<c:otherwise>
<div class="image-box" style="width:32%;">
<div class="image-overlay" onclick="openViewModal(${board.boardNum})">
<img src="/resources/images/profile_heart.png" style="height:17px;"> <p>${board.likeCnt}</p>
<img src="/resources/images/profile_comment.png" style="height:17px;"> <p>${board.commentCnt}</p>
</div>
<img class="square-image" src="/resources/upload2/${board.fileName}" alt="Square Image 1" >
</div>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
<div id="viewModal" class="viewModal">
<div class="viewModal-content">
<iframe src="#" id="modalContent" style="display:none; width: 100%; height: 100%; border: none;"></iframe>
</div>
</div>
<div>
<div id="nextContent"></div>
</div>
</section>
</section>
<input type="hidden" id="boardUserId" value="${user.userId}"/>
</div>
<div id="sellModal" class="sellModal">
<div class="sellModal-content">
<img src="/resources/images/cross.png" style="width:13px;" onclick="closeSellModal()">
<div style="text-align:center;">
<section>
<p>인증 마크를 구매하시겠어요?</p>
<br/>
<p style="font-color:lightgrey; font-size:13px;">인증 마크를 달면 프로필 상단에 블루 마크가 고정됩니다 :)</p>
<br/>
<img src="/resources/images/check.png" alt="블루라벨" style="width:30px;">
<br/>
<p style="font-color:lightgrey; font-size:13px;">50000원</p>
</section>
</div>
<form id="payForm" name="payForm" method="post">
<input type="hidden" name="itemCode" id="itemCode" value="123456789"/>
<input type="hidden" name="itemName" id="itemName" value="인증마크"/>
<input type="hidden" name="quantity" id="quantity" value="1"/>
<input type="hidden" name="totalAmount" id="totalAmount" value="50000"/>
<input type="button" id="btnPay" value="결제" class="sellModal-btn">
</form>
<form name="kakaoForm" id="kakaoForm" method="post" target="kakaoPopUp" action="/kakao/payPopUp">
<input type="hidden" name="orderId" id="orderId" value="${cookieId}"/>
<input type="hidden" name="tId" id="tId" value=""/>
<input type="hidden" name="pcUrl" id="pcUrl" value=""/>
</form>
</div>
</div><!-- 모달창 끝! -->
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#sellingBox").on("click",function(){
openSellModal();
});
$("#followBtn").on("click",function(){
$.ajax({
type:"POST",
url:"/board/followUpdate",
data: {
userTo:$("#boardUserId").val()
},
datatype:"JSON",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("팔로우되었습니다!");
window.location.reload();
}
else if (response.code == 10){
alert("이미 팔로우 되었습니다!")
}
else{
alert("오류 발생");
}
},
error:function(xhr,status,error){
icia.common.error(error);
}
});
});
window.onclick = function(event) {
var modal = document.getElementById('viewModal');
if (event.target === modal) {
modal.style.display = 'none';
}
};
$("#btnPay").on("click",function(){
if(!confirm("진짜 구매하시겠습니까?!")){
}
$("#btnPay").prop("disabled",true);
$.ajax({
type:"POST",
url:"/kakao/payReady",
data:{
itemCode:$("#itemCode").val(),
itemName:$("#itemName").val(),
quantity:$("#quantity").val(),
totalAmount:$("#totalAmount").val()
},
datatype:"JSON",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
icia.common.log(response);
if(response.code==0){
var orderId = response.data.orderId;
var tId = response.data.tId;
var pcUrl = response.data.pcUrl;
closeSellModal();
$("#orderId").val(orderId);
$("#tId").val(tId);
$("#pcUrl").val(pcUrl);
var win = window.open('','kakaoPopUp','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=540,height=700,left=100,top=100');
$("#kakaoForm").submit();
}
else{
alert("오류가 발생하였습니다.");
$("#btnPay").prop("disabled",false);
}
},
error:function(error){
icia.common.error(error);
$("#btnPay").prop("disabled",false);
}
});
});
});
//판매 모달
function openSellModal() {
document.getElementById('sellModal').style.display = 'flex';
document.getElementById("modalContent").style.display = "block"
}
function closeSellModal() {
document.getElementById('sellModal').style.display = 'none';
}
// 뷰 모달
function openViewModal(boardNum) {
document.getElementById('viewModal').style.display = 'flex';
document.getElementById("modalContent").src = "/board/selectView?boardNum="+boardNum;
document.getElementById("modalContent").style.display = "block"
}
function closeViewModal() {
document.getElementById('viewModal').style.display = 'none';
}
</script>
</body>
</html>프로필페이지 css
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
margin: 20px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
/* 최대 너비를 늘린 값 (필요에 따라 조절 가능) */
}
.section {
max-width: 800px; /* 최대 너비를 늘린 값 (필요에 따라 조절 가능) */
margin: 20px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
}
.spaced-text {
margin-right: 5px; /* 원하는 여백 크기를 설정 */
}
.section-mini {
max-width: 800px; /* 최대 너비를 늘린 값 (필요에 따라 조절 가능) */
margin: 20px auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
background-color: #ededed;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 10px;
box-sizing: border-box;
}
.button-nomal {
background-color: #5299f7;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
position: absolute;
z-index: 0;
}
button:hover {
background-color: #b7d3f7;
}
button:disabled {
background-color: #455063; /* 원하는 색상으로 변경 */
cursor: not-allowed;
}
.profile-image {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
}
.profile-image2 {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
}
#charCount {
position: absolute;
bottom: 18px;
right: 10px;
color: #888;
font-size: 11px;
}
.input-file {
background-color: #5299f7;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
position: absolute;
}
.file-input {
opacity: 0; /* 실제로 보이지 않도록 설정 */
position: absolute; /* 절대 위치 설정 */
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}
/* input type="file"을 감싸는 래퍼의 스타일 */
.file-wrapper {
position: relative; /* 상대적 위치 설정 */
display: inline-block; /* 인라인 블록 요소로 설정 */
}
#charCount {
position: absolute;
bottom: 70px;
right: 26px;
}
#nowCnt {
position: relative;
right:3px;
}
.button {
background-color: #f0f0f0; /* 연한 회색 배경색 */
padding: 8px 8px; /* 내부 여백 설정 (상하 8px, 좌우 16px) */
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 테두리 설정 */
color: #333; /* 텍스트 색상 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none; /* 링크의 기본 텍스트 밑줄 제거 */
display: inline-block; /* 인라인 레벨 블록 요소로 설정하여 여러 버튼이 나란히 나타나도록 함 */
font-size: 14px; /* 폰트 크기 설정 */
line-height: 1.5; /* 행간 설정 (높이를 줄이기 위해 필요에 따라 조절 가능) */
cursor: pointer; /* 커서 모양을 포인터로 설정하여 클릭 가능함을 나타냄 */
width: 100px; /* 너비 설정 */
height: 30px; /* 높이 설정 */
}
.button-followed{
background-color: #3897f0; /* 연한 회색 배경색 */
padding: 8px 8px; /* 내부 여백 설정 (상하 8px, 좌우 16px) */
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 테두리 설정 */
color: white; /* 텍스트 색상 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none; /* 링크의 기본 텍스트 밑줄 제거 */
display: inline-block; /* 인라인 레벨 블록 요소로 설정하여 여러 버튼이 나란히 나타나도록 함 */
font-size: 14px; /* 폰트 크기 설정 */
line-height: 1.5; /* 행간 설정 (높이를 줄이기 위해 필요에 따라 조절 가능) */
cursor: pointer; /* 커서 모양을 포인터로 설정하여 클릭 가능함을 나타냄 */
width: 100px; /* 너비 설정 */
height: 30px; /* 높이 설정 */
}
.button-2{
background-color: #f8f8f8; /* 연한 회색 배경색 */
padding: 8px 8px;
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 테두리 설정 */
color: #333; /* 텍스트 색상 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none;
display: inline-block;
font-size: 14px; /* 폰트 크기 설정 */
line-height: 1.5; /* 행간 설정 (높이를 줄이기 위해 필요에 따라 조절 가능) */
width: 100px;
height: 30px; /* 높이 설정 */
}
.button-2:hover{
background-color: #f8f8f8; /* 연한 회색 배경색 */
padding: 8px 8px;
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 테두리 설정 */
color: #333; /* 텍스트 색상 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none;
display: inline-block;
font-size: 14px; /* 폰트 크기 설정 */
line-height: 1.5; /* 행간 설정 (높이를 줄이기 위해 필요에 따라 조절 가능) */
width: 100px;
height: 30px; /* 높이 설정 */
}
/* 버튼에 호버 효과 추가 */
.button:hover {
background-color: #e0e0e0; /* 마우스 호버 시 조금 더 어두운 회색으로 변경 */
}
.button-modal {
width: 100%; /* 버튼의 너비 (예: 150px) */
height: 45px; /* 버튼의 높이 (예: 40px) */
background-color: #ffffff; /* 초기 배경색 (흰색) */
color: #000000; /* 초기 텍스트 색상 (검은색) */
padding: 10px 20px; /* 내부 여백 */
text-align: center;
text-decoration: none;
display: inline-block;
font: inherit;
font-size: 16px;
cursor: pointer;
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 모서리 */
transition: background-color 0.3s ease; /* 변화가 부드럽게 일어나도록 설정 */
display: flex; /* 플렉스 컨테이너로 설정 */
flex-direction: column; /* 수직으로 쌓도록 설정 */
justify-content: center; /* 수직 가운데 정렬 */
align-items: center;
}
.button-modal:hover {
background-color: #ffcccd;/* 원하는 hover 시 색상 */;
}
.button-container {
display: flex;
align-items: center;
justify-content: center; /* 높이를 화면 전체 높이로 설정하거나 필요에 따라 조절하세요 */
}
.button-modal-exit {
width: 100%; /* 버튼의 너비 (예: 150px) */
height: 45px; /* 버튼의 높이 (예: 40px) */
background-color: #ffffff; /* 초기 배경색 (흰색) */
color: #000000; /* 초기 텍스트 색상 (검은색) */
padding: 10px 20px; /* 내부 여백 */
text-align: center;
text-decoration: none;
display: inline-block;
font: inherit;
font-size: 16px;
cursor: pointer;
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 모서리 */
transition: background-color 0.3s ease; /* 변화가 부드럽게 일어나도록 설정 */
display: flex; /* 플렉스 컨테이너로 설정 */
flex-direction: column; /* 수직으로 쌓도록 설정 */
justify-content: center; /* 수직 가운데 정렬 */
align-items: center;
}
.button-modal:hover {
background-color: #ffbdbe;/* 원하는 hover 시 색상 */;
}
@font-face {
font-family: 'Gmarket';
src: url('/resources/font/Gmarket.otf') format('opentype');
}
b {
font-family: 'Gmarket';
}
#preview {
max-width: 100%;
max-height: 300px;
margin-top: 20px;
display: none; /* 초기에는 숨김 */
}
hr{
border-color: #f0f0f0;
}
.image-container {
display: flex; /* Flexbox를 사용하여 가로로 배열 */
flex-wrap: wrap; /* 너비를 벗어나면 줄 바꿈 */
justify-content: center;
}
/* 각 이미지를 감싸는 div */
.image-box {
width: 30%; /* 부모의 30%만큼의 너비를 갖도록 설정 */
height: 170px;
margin: 3px; /* 각 이미지 사이의 간격 */
overflow: hidden; /* 초과된 부분 숨김 */
border-radius: 3px; /* 둥근 테두리 설정 (원형으로 보이게 하려면 반지름 값을 50%로 설정) */
position: relative;
overflow: hidden;
margin: 1px;
}
/* 이미지 스타일 */
.square-image {
width: 100%; /* 100% 너비로 설정하여 부모 컨테이너에 맞춤 */
height: 100%; /* 높이는 자동으로 조절되도록 설정 */
display: block; /* 인라인 요소가 아닌 블록 요소로 설정 */
}
.image-box {
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 어두운 색상과 투명도 조절 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
opacity: 0; /* 초기에는 숨겨진 상태 */
transition: opacity 0.2s ease;
}
.image-box:hover .image-overlay {
opacity: 1; /* 마우스 오버 시 보이도록 설정 */
}
.viewModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.viewModal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
transition: max-height 0.5s ease;
}
.viewModal-content:open {
transition: max-height 0.5s ease;
}
.sellModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.sellModal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
height: 40%;
transition: max-height 0.5s ease;
}
.sellModal-content:open {
transition: max-height 0.5s ease;
}
.sellModal-btn{
background-color: #3897f0;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top:20px;
}
.sellModal-btn:hover{
background-color: #2f80b5;
}5. 네비게이션 (만들기)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<style>
/* 기본 버튼 스타일 */
.nav_button {
width: 100%; /* 버튼의 너비 (예: 150px) */
height: 50px; /* 버튼의 높이 (예: 40px) */
background-color: #ffffff; /* 초기 배경색 (흰색) */
color: #000000; /* 초기 텍스트 색상 (검은색) */
padding: 10px 20px; /* 내부 여백 */
text-align: center;
text-decoration: none;
display: inline-block;
font: inherit;
font-size: 14px;
cursor: pointer;
border: none; /* 테두리 없음 */
border-radius: 5px; /* 둥근 모서리 */
transition: background-color 0.3s ease; /* 변화가 부드럽게 일어나도록 설정 */
display: flex; /* 플렉스 컨테이너로 설정 */
flex-direction: column; /* 수직으로 쌓도록 설정 */
justify-content: center; /* 수직 가운데 정렬 */
position: relative; /* 포지션 추가 */
}
/* 마우스 호버 시의 버튼 스타일 */
.nav_button:hover {
background-color: #dddddd; /* 호버 시 배경색 (옅은 회색) */
color: #000000; /* 호버 시 텍스트 색상 (검은색) */
}
.ectMenue {
display: none;
bottom: 10vh; /* 더보기 버튼 아래로 내리기 위해 'bottom' 속성 사용 */
left: 10px;
width: 180px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 5px;
padding: 10px;
position: absolute;
z-index: 1;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
font-size: 5px;
color: #d1d1d1;
}
.ectMenue a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
</style>
<style>
/* 모달 스타일 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
position: fixed;
top: 50%;
left: 50%;
width: 60%;
height: relative;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
z-index: 2; /* 모달창보다 높은 값으로 설정 */
overflow-y: scroll; /* 세로 스크롤바 추가 */
max-height: 80vh;
}
.custom-file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.custom-file-input {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px; /* 버튼 크기에 따라 조절하세요 */
cursor: pointer;
opacity: 0; /* 원본 파일 입력 필드를 숨김 */
}
.custom-file-button {
/* 원하는 배경 색상으로 변경 */
padding: 10px 20px; /* 원하는 크기 및 여백으로 변경 */
display: inline-block;
cursor: pointer;
border-radius: 10px;
background-color: #5299f7;
color: #fff;
}
.custom-file-button:hover{
background-color: #b7d3f7;
}
.containerPost {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.post-header {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.post-input {
width: 100%;
border: none;
padding: 15px;
font-size: 13px;
outline: none;
}
.post-actions {
display: flex;
justify-content: space-between;
padding: 15px;
}
.post-actions button {
background-color: #3897f0;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.hibutton {
background-color: #5299f7;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
position: absolute;
width:28%;
}
.hibutton:hover {
background-color: #b7d3f7;
}
.modal-mail {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1;
}
.modal-mail-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
position: fixed;
top: 50%;
left: 50%;
width: 40%;
height: 33%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
z-index: 2; /* 모달창보다 높은 값으로 설정 */
overflow-y: scroll; /* 세로 스크롤바 추가 */
max-height: 80vh;
}
.submit-btn {
background-color: #c7c7c7;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
}
.submit-btn:hover {
background-color: #999999;
}
</style>
<nav>
<div style="width: 15%; height: 100vh; padding: 8px 12px 20px; display: flex; flex-direction: column; position: fixed; border-right: 1px solid #dbdbdb;">
<div style="width: 100%; height: 90px;">
<div class="logo" style="padding: 25px 10px 0px; margin-bottom: 20px;">
<a href="/board/mainBoard"><img style="max-width: 85%;" src="/resources/images/Sistagram.png" alt="Instagram" class="brand_logo" style="width: 10rem;"></a>
</div>
</div>
<div style="width: 100%; flex-grow: 1;">
<div>
<button class="nav_button" onclick="window.location.href='/board/mainBoard'">
<span>
<div style="width: 100%; padding: 10px; display: inline-flex; align-items: center; vertical-align: middle; ">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/home.png" alt="home">
</div>
<div style="width: 90%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
홈
</div>
</div>
</span>
</button>
</div>
<div>
<button class="nav_button" onclick="window.location.href='/board/search'">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/search.png" alt="search">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>검색</span>
</div>
</div>
</a>
</span>
</button>
</div>
<div>
<button class="nav_button" onclick="window.location.href='/board/mainBoard'">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/msg.png" alt="msg">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>메세지</span>
</div>
</div>
</a>
</span>
</button>
</div>
<div>
<button class="nav_button" id="alarmBtn" onclick="window.location.href='/board/mainBoard'">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px; margin-left:-6px;">
<img src="/resources/images/heart.png" alt="heart" style="width:70%;">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>알림</span>
</div>
</div>
</a>
</span>
</button>
</div>
<div>
<button class="nav_button" id="writeBtn" onclick="openModal()">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/add.png" alt="add">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>만들기</span>
</div>
</div>
</a>
</span>
</button>
</div>
<div>
<button class="nav_button" onclick="window.location.href='/user/profile'">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/account.png" alt="account">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>프로필</span>
</div>
</div>
</a>
</span>
</button>
</div>
</div>
<div>
<button class="nav_button" id="ectBtn">
<span>
<a>
<div style="width: 100%; padding: 10px; margin-bottom: 5px; display: inline-flex; align-items: center;">
<div style="vertical-align: middle; margin-bottom: -5px;">
<img src="/resources/images/menu.png" alt="home">
</div>
<div style="width: 100%; height: 24px; display: flex; align-items: center; padding-left: 10px;">
<span>더보기</span>
</div>
</div>
</a>
</span>
</button>
</div>
</div>
<div id="modalMakeing" class="modal">
<div class="modal-content">
<!-- 모달 내용 -->
<div class="post-actions" style="text-align: right;">
<img id="closeImgBtn" src="/resources/images/cross.png" alt="Image Button" onclick="closeModal()"
style="width:20x; height:20px;">
</div>
<div class="containerPost">
<div class="post-header">
<hr/>
</div>
<div id="imagePreview" style="text-align: center;"> </div>
<form id="boardUpload" name="boardUpload">
<textarea class="post-input" name="boardContent" id="boardContent" placeholder="내용을 작성해 주세요."></textarea>
</div>
<input type="button" onclick="document.getElementById('fileInput').click()" id="uploadPhotoBtn" value="사진 업로드" class="hibutton">
<input type="file" id="fileInput" name="BoardFile" onchange="previewImage(event)" style="display: none;">
<input type="button" onclick="fileUpload()" id="submitBtn" value="제출" class="hibutton" style="right:14px;">
</form>
<!-- 모달 내용 끝 -->
<br/><br/><br/>
</div>
</div>
<div id="probModal" class="modal-mail" style="display: none;">
<div class="modal-mail-content">
<img src="/resources/images/cross.png" alt="닫기" id="datgiBtn" style="width:18px;">
<section>
<div style="text-align:center;">
<p>어떤 문제가 있으신가요?</p>
<br/>
<p style="font-size:10px; font-color:lightgrey;">남겨주신 문의는 관리자에게 전달됩니다!</p>
</div>
</section>
<section>
<input type="text" id="mailContent" name="mailContent" value="" placeholder="불편사항을 알려주세요 ㅠㅠ">
<input type="button" id="mailSendBtn" value="제출" class="submit-btn">
</section>
</div>
</div>
<div id="ectMenue" class="ectMenue" style="display: none;">
<button class="nav_button" id="resetUserInfoBtn">프로필 수정</button>
<button class="nav_button" id="probReportBtn" name="probReportBtn">문제 신고</button>
<button class="nav_button" id="logOutBtn">로그아웃</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
//메일 신고하기
$("#probReportBtn").on("click",function(){
closeModal(); //더보기 모달창 닫고.
document.getElementById('probModal').style.display = 'flex';
});
$("#datgiBtn").on("click",function(){
document.getElementById('probModal').style.display = 'none';
});
$("#mailSendBtn").on("click",function(){
$.ajax({
type: "POST",
url: "/user/reportError",
data:{mailContent:$("#mailContent").val()},
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("전송되었습니다!");
document.getElementById('probModal').style.display = 'none';
}
else if(response.code==400){
alert("파라미터 오류");
}
else{
alert("실패");
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
});
//더보기 보여주기
$("#ectBtn").on("click",function(){
var ectMenue = document.getElementById('ectMenue');
ectMenue.style.display = (ectMenue.style.display === 'block') ? 'none' : 'block';
});
});
$(document).ready(function() {
$("#resetUserInfoBtn").on("click",function(){
window.location.href="/user/update";
});
$("#logOutBtn").on("click",function(){
if(confirm("로그아웃할까요?")){
window.location.href="/user/logOut";
}
});
});
function previewImage(event){
var selectedFile = event.target.files[0];
if(selectedFile){
var reader = new FileReader();
reader.onload = function (e){
var imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '<img src="' + e.target.result + '" alt="미리보기" style="max-width: 88%; height: 30%;">';
};
reader.readAsDataURL(selectedFile);
}
}
function fileUpload (){
if ($("#fileInput")[0].files.length < 0) {
alert("업로드할 사진을 선택해 주세요!");
return;
}
var data = $("#boardUpload")[0];
var formData = new FormData(data);
$("#submitBtn").prop("disabled", true);
$.ajax({
type: "POST",
url: "/board/upload",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("등록완료");
closeModal();
location.reload();
}
else if(response.code==400){
alert("파라미터 오류");
}
else{
alert("서버 오류로 업로드에 실패했습니다.");
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
}
function openModal() {
// 모달 창 열기
document.getElementById('modalMakeing').style.display = 'flex';
}
function closeModal() {
// 모달 창 닫기
document.getElementById('modalMakeing').style.display = 'none';
}
</script>
</nav>6. 업데이트 (회원정보수정)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>update your profile</title>
<link rel="stylesheet" href="/resources/css/reset.css">
<script src="/resources/js/jquery-3.5.1.min.js"></script>
<%@ include file="/WEB-INF/views/include/head2.jsp" %>
<link rel="stylesheet" type="text/css" href="/resources/css/update.css">
<link rel="stylesheet" type="text/css" href="/resources/css/modal.css">
<script>
$(document).ready(function() {
window.onclick = function(event) {
var modal = document.getElementById('viewModal');
if (event.target === modal) {
modal.style.display = 'none';
}
};
$("#saveBtn").on("click",function(){
if(!isEmpty($("#userPwd").val())){
alert("비밀번호를 입력해 주세요.");
$("#userPwd").focus();
return;
}
if(!isCorrect($("#userPwd").val())){
alert("비밀번호가 형식에 맞지 않습니다.");
$("#userPwd").focus();
return;
}
if(!isEmpty($("#userName").val())){
alert("이름을 입력해 주세요.");
$("#userName").focus();
return;
}
if(!isEmail($("#userEmail").val())){
alert("이메일이 형식에 맞지 않습니다.");
$("#userEmail").focus();
return;
}
if(!confirm("이대로 회원님의 정보를 수정할까요?")){
return;
}
var data = $("#profileForm")[0];
var formData = new FormData(data);
$("#saveBtn").prop("disabled", true);
$.ajax({
type: "POST",
url: "/user/updateProc",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("회원정보가 수정되었습니다.");
//location.href="/index";
$("#saveBtn").prop("disabled", false);
location.reload();
}
else if(response.code==300){
alert("자신의 정보만 수정이 가능합니다.");
$("#saveBtn").prop("disabled", false);
}
else if(response.code==400){
alert("파라미터 오류");
$("#saveBtn").prop("disabled", false);
}
else{
alert("네트워크 오류");
$("#userId").focus();
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
});
function deleteFile(){
if(confrim("사진을 삭제할까요?")){
location.href="/user/deletPhoto";
}
};
});
function isEmpty (str){
return str.trim().length > 0;
}
function isCorrect (str){
var Corretreg = /^[a-zA-Z0-9_]{3,20}$/;
return Corretreg.test(str);
}
function isEmail (str){
var Emailreg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return Emailreg.test(str);
}
</script>
</head>
<body>
<div>
<div>
<div>
<%@ include file="/WEB-INF/views/include/navigation.jsp"%>
<div class="main">
<div class="container">
<div>
<div>
<section>
<section class="section-mini" style="display: flex; align-items: center;">
<div id="imagePreview"> </div>
<img src="${userPhoto}" alt="profile.jpg" class="profile-image" onerror="this.src='/resources/images/pf3.jpg';" id="orgProfile"/>
<div>
<b style="font-weight: bold; font-size: 25px; margin-left: 30px;">${user.userId}</b>
<br/>
<h5 style="margin-left: 35px; margin-top:10px;">${user.userName}</h5>
</div>
<button style="right: 45px;" id="openModalBtn" class="button-nomal">사진 변경</button>
</section>
<div id="modal-background">
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align:center; margin-bottom:30px;">프로필 사진 바꾸기</p>
<label for="userPhoto" class="custom-file-input">사진 변경
<form id="profileForm" enctype="multipart/form-data">
<input type="file" id="userPhoto" name="userPhoto" class="custom-file-input" onchange="previewImage(event)"></label>
<hr/>
<button class="button-modal" style=" text-align: center;" onclick="deleteFile()">사진 삭제</button>
<hr/>
<button class="button-modal-exit" onclick="closeModal()">취소</button>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = 'flex';
}
function closeModal() {
document.getElementById('myModal').style.display = 'none';
$("#saveBtn").prop("disabled", false);
}
$("#openModalBtn").click(function (event) {
event.preventDefault();
$("#myModal").show();
$("#saveBtn").prop("disabled", true);
});
$("#closeModalBtn").click(function () {
$("#myModal").hide();
$("#saveBtn").prop("disabled", false);
});
function setPreview (event){
const fileInput = event.target;
const selectedFile = fileInput.files;
}
function previewImage(event){
closeModal();
var selectedFile = event.target.files[0];
if(selectedFile){
var reader = new FileReader();
reader.onload = function (e){
var imagePreview = document.getElementById('imagePreview');
imagePreview.innerHTML = '<img src="' + e.target.result + '" alt="미리보기" style="max-width: 88%; height: 30%;">';
};
reader.readAsDataURL(selectedFile);
}
}
</script>
<label for="userName">사용자 이름:</label>
<input type="text" id="userName" name="userName" value="${user.userName}" required>
<label for="userPwd">비밀번호:</label>
<input type="text" id="userPwd" name="userPwd" value="${user.userPwd}" required>
<label for="userEmail">이메일:</label>
<input type="email" id="userEmail" name="userEmail" value="${user.userEmail}" required>
<label for="tel">번호:</label>
<input type="text" id="tel" name="userTel" value="${user.userTel}" required>
<label for="userIntro">소개:</label>
<div class="input-container">
<input type="text" name="userIntro" id="userIntro" value="${user.userIntro}" style="height: 60px; width=100%"required>
<div id="charCount" ><b id=nowCnt></b>/150</div></div>
<script type="text/javascript">
$('#userIntro').keyup(function (e) {
var content = $(this).val();
$('#nowCnt').text(content.length);
});
</script>
<input type="hidden" id="userId" name="userId" value="${user.userId}"/>
<p><button type="button" id="saveBtn" name="saveBtn" style="width: 38%; right: 30px;" class="button-nomal">제출</button></p>
</form>
<br/><br/>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>7.메인페이지
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>main</title>
<link rel="stylesheet" href="/resources/css/reset.css">
<link rel="stylesheet" href="/resources/css/mainBoard.css">
<!-- <link rel="stylesheet" href="/resources/css/main.css"> -->
<script src="/resources/js/jquery-3.5.1.min.js"></script>
<%@ include file="/WEB-INF/views/include/head2.jsp" %>
</head>
<body>
<div>
<div>
<div>
<div class="main">
<div class="container">
<div>
<div>
<%@ include file="/WEB-INF/views/include/navigation.jsp"%>
<div style="width: 85%; margin-left: auto;">
<div style="height: 100vh; display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: column; flex-grow: 1;">
<div style="display: flex; flex-direction: row; justify-content: center;">
<div style="max-width: 600px; width: 100%;">
<div style="margin-top: 20px;">
<!-- top -->
<div style="margin-bottom: 30px;">
<div style="padding: 0 10px;">
<div style="width: 100%; height: 100%; display: flex; flex-direction: row;">
<ul style="display: flex; flex-direction: row; flex-grow: 1;">
<li>
<div style="padding: 0 5px;">
<button style="background-color: transparent; border-style: none; cursor: pointer;">
<div>
<c:choose>
<c:when test="${! empty cookieProfile}">
<img src="/resources/upload/${cookieProfile}" alt="img" style="width: 50px; height: 50px; border-radius: 50%;">
</c:when>
<c:otherwise>
<img src="/resources/images/default_profile.png" alt="img" style="width: 50px; height: 50px; border-radius: 50%;">
</c:otherwise>
</c:choose>
</div>
<div>
<span>${cookieId}</span>
</div>
<c:if test="${user.blueId eq 'B'}">
<img src="/resources/images/check.png" alt="구매!" style="width:13px; float: right; margin-right:40px;">
</c:if>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<c:if test = "${! empty list}">
<c:forEach var="board" items="${list}" varStatus="i">
<!-- list -->
<div style="width: 100%;">
<div style="display: flex; flex-direction: column;">
<div>
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; padding-bottom: 10px; margin-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid;">
<div style="padding-bottom: 10px;">
<div style="width: 100%; display: flex; flex-direction: row;">
<div style="margin-right: 10px;">
<div style="cursor: pointer;">
<c:choose>
<c:when test="${! empty board.userFileName}">
<img src="/resources/upload/${board.userFileName}"
alt="img" style="width: 32px; height: 32px; border-radius: 50%;">
</c:when>
<c:otherwise>
<img src="/resources/images/default_profile.png"
alt="img" style="width: 32px; height: 32px; border-radius: 50%;">
</c:otherwise>
</c:choose>
</div>
</div>
<div style="width: 100%; display: flex; align-items: center;">
<div style="display: flex; flex-direction: row;">
<div style="cursor: pointer;" class="non-link">
<a href="/user/profile?userId=${board.userId}">
<span style="font-weight: bold; font-color:black;">${board.userId}</span>
</a>
</div>
<div style="display: flex; flex-direction: row;">
<div>
<span style="margin: 0px 4px;">•</span>
</div>
<c:choose>
<c:when test="${board.regDate gt 0}">
<div>
<span class="day"><b>${board.regDate}</b>일 전</span>
</div>
</c:when>
<c:otherwise>
<span class="day">오늘</span>
</c:otherwise>
</c:choose>
</div>
</div>
</div>
<c:if test="${cookieId eq board.userId}">
<div style="display: flex; align-items: center;">
<img src="/resources/images/more.png" alt="img" id="moreBtn">
</div>
</c:if>
</div>
</div>
<div style="cursor: pointer;">
<a><img src="/resources/upload2/${board.boardFileName}" alt="img" style="width: 100%; height: 100;"
onclick="openViewModal(${board.boardNum})"></a>
</div>
<div>
<div style="display: flex; flex-direction: column;">
<div style="display: grid; margin: 0px 5px; align-items: center; grid-template-columns: 1fr 1fr;">
<div style="display: flex; margin-left: -10px;">
<c:choose>
<c:when test="${board.isLike eq 0}">
<div style="padding: 8px; cursor: pointer;">
<a><img src="/resources/images/heart.png" alt="img" style="width:30px;" id="disLikeImg" onclick="likeProc(${board.isLike},${board.boardNum})"></a>
</div>
</c:when>
<c:otherwise>
<div style="padding: 8px; cursor: pointer;">
<a><img src="/resources/images/filledHeart.png" alt="img" style="width:30px;" id="likeImg" onclick="likeProc(${board.isLike},${board.boardNum})"></a>
</div>
</c:otherwise>
</c:choose>
<input type="hidden" id="disLike" value=""/>
<input type="hidden" id="likeBoardNum" value="${board.boardNum}">
<div style="padding: 8px; cursor: pointer;">
<a><img src="/resources/images/reply.png" alt="img" style="width:30px;"></a>
</div>
</div>
<div style="margin-left: auto; cursor: pointer;">
<a><img src="/resources/images/mark.png" alt="img"></a>
</div>
</div>
<div style="margin-top: 10px;">
<div style="display: inline-block; margin-right: 5px;">
<a>
<span style="font-weight: bold;">${board.userId}</span>
</a>
</div>
<span>
<span>${board.boardContent}</span>
</span>
</div>
<c:if test="${board.commentCnt gt 0}">
<div style="margin-top: 10px;">
<a>
<span style="font-size: 13px; cursor: pointer;" id="commentCntBtn" onclick="openViewModal(${board.boardNum})">댓글 ${board.commentCnt}개 보기</span>
</a>
</div>
</c:if>
<div style="margin-top: 10px;">
<form class="comment-form" name="commentForm" id="commentForm" style="display: flex; flex-direction: row;">
<div style="display: flex; flex-direction: row; flex-grow: 1; align-items: center;">
<input type="text" class="comment-area" name="commentContent" id="commentContent" placeholder="댓글달기" value=""/>
<input type="hidden" name="commentGroup" id="commentGroup" value="${board.boardNum}"/>
<input type="hidden" name="boardNum" id="boardNum" value="${board.boardNum}"/>
<input type="hidden" name="commentParent" id="commentParent" value="0"/>
<div>
<input type="button" id="submitBtn" value="게시" onclick="commentInsert()">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<form name="delForm" id="delForm">
<input type="hidden" name="boardNum" id="boardNum" value="${board.boardNum}"/>
<input type="hidden" name="userId" id="userId" value="${board.userId}"/>
<input type="hidden" name="fileName" id="fileName" value="${board.boardFileName}"/>
<input type="hidden" name="fileExt" id="fileExt" value="${board.boardFileExt}"/>
</form>
<!-- list -->
</c:forEach>
</c:if>
</div>
</div>
<!-- right -->
<div style="width: 25%; height: 100vh; padding-left: 60px;">
<div style="margin-top: 40px; display: flex; flex-direction: column;">
<div style="padding: 0 10px;">
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div style="margin-right: 10px;">
<div style="cursor: pointer;">
<c:choose>
<c:when test="${! empty cookieProfile}">
<img src="/resources/upload/${cookieProfile}" alt="img" style="width: 50px; height: 50px; border-radius: 50%;">
</c:when>
<c:otherwise>
<img src="/resources/images/default_profile.png" alt="img" style="width: 50px; height: 50px; border-radius: 50%;">
</c:otherwise>
</c:choose>
</div>
</div>
<div style="width: 100%; display: flex;">
<div style="display: flex; flex-direction: column; justify-content: center; flex-grow: 1;">
<div>
<div>
<span style="font-weight: bold;">${cookieId}</span>
</div>
</div>
</div>
</div>
<div style="display: flex;">
<div style="display: flex; align-items: center; flex-shrink: 0;">
<span style="font-size: 12px; color: #4cb5f9;">전환</span>
</div>
</div>
</div>
</div>
<div style="margin-top: 25px; margin-bottom: 10px;">
<div style="display: flex; flex-direction: column;">
<c:if test="${! empty userList}">
<div style="display: flex; flex-direction: row;">
<div style="display: flex; flex-grow: 1;">
<span style="font-size: 14px;">회원님을 위한 추천</span>
</div>
</div>
</c:if>
<c:if test="${! empty userList}">
<c:forEach var="user" items="${userList}" varStatus="i">
<div style="width: 100%;">
<div style="padding: 10px;">
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div style="margin-right: 10px;">
<div style="cursor: pointer;">
<c:choose>
<c:when test="${user.userFileName eq ''}">
<img src="/resources/images/default_profile.png" alt="img" style="width: 44px; height: 44px; border-radius: 50%;">
</c:when>
<c:otherwise>
<img src="/resources/upload/${user.userFileName}" alt="img" style="width: 44px; height: 44px; border-radius: 50%;">
</c:otherwise>
</c:choose>
</div>
</div>
<div style="width: 100%; display: flex;">
<div style="display: flex; flex-direction: column; justify-content: center; flex-grow: 1;">
<div>
<div>
<a href="/user/profile?userId=${user.userId}"><span style="font-weight: bold;">${user.userId}</span></a>
<c:if test="${user.blueId eq 'B'}">
<img src="/resources/images/check.png" alt="구매!" style="width:13px; float: right; margin-right:30px;">
</c:if>
</div>
</div>
<div>
<span style="font-size:12px; font-color:grey;">${user.userName}</span>
</div>
</div>
</div>
<div style="display: flex;">
<div style="display: flex; align-items: center; flex-shrink: 0;">
<input type="button" value="팔로우" id="followBtn" onclick="followProc('${user.userId}')" style="font-size: 12px; color: #4cb5f9; margin-right: 10px;" class="followBtn">
</div>
</div>
</div>
</div>
</div>
</div>
</c:forEach>
</c:if>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="viewModal" class="viewModal">
<div class="viewModal-content">
<iframe src="#" id="modalContent" style="display:none; width: 100%; height: 100%; border: none;"></iframe>
</div>
</div>
<script>
function openViewModal(boardNum) {
document.getElementById('viewModal').style.display = 'flex';
document.getElementById("modalContent").src = "/board/selectView?boardNum="+boardNum;
document.getElementById("modalContent").style.display = "block"
}
function closeViewModal() {
document.getElementById('viewModal').style.display = 'none';
}
function commentInsert(){
if ($.trim($("#commentContent").val()).length <= 0){
alert($("#commentContent").val());
alert("댓글 내용을 입력하세요!");
$("#commentContent").focus();
return;
}
var data = $("#commentForm")[0];
var formData = new FormData(data);
$("#submitBtn").prop("disabled", true);
$.ajax({
type: "POST",
url: "/board/commentUpload",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("등록완료");
$("#submitBtn").prop("disabled", false);
location.reload();
}
else if(response.code==400){
$("#submitBtn").prop("disabled", false);
alert("파라미터 오류");
}
else{
alert("서버 오류로 업로드에 실패했습니다.");
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
}
function likeProc(isLike, boardNum){
var disLike;
if(isLike == 0) {
$("#diLikeImg").attr("src", "/resources/images/filledHeart.png");
disLike=0;
}
else {
$("#likeImg").attr("src", "/resources/images/greyHeart.png");
disLike=1;
}
$.ajax({
type:"POST",
data: {
boardNum: boardNum,
disLike:disLike
},
datatype:"JSON",
url:"/board/likeUpdate",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("좋아요 반영 완료");
loactaion.reload();
}
else{
alert("오류 발생");
nowLike.src = "/resources/images/greyHeart.png";
}
},
error:function(xhr,status,error){
icia.commoSn.error(error);
}
});
}
function followProc (userTo){
$.ajax({
type:"POST",
url:"/board/followUpdate",
data: {
userTo:userTo
},
datatype:"JSON",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("팔로우되었습니다!");
window.location.reload();
}
else if (response.code == 10){
alert("이미 팔로우 되었습니다!")
}
else{
alert("오류 발생");
}
},
error:function(xhr,status,error){
icia.common.error(error);
}
});
}
$(document).ready(function() {
window.onclick = function(event) { //닫기
var modal = document.getElementById('viewModal');
if (event.target === modal) {
modal.style.display = 'none';
}
};
$("#seeAlluserList").on("click",function(){
alert("보여주기");
$("#switchVisible").css("display", "visible");
});
$("#moreBtn").on("click",function(){
//삭제 로직
if(!confirm("이 게시물을 삭제할까요?")){
return;
}
var data = $("#delForm")[0];
var formData = new FormData(data);
$.ajax({
type:"POST",
url:"/board/delBoard",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("삭제 성공");
location.reload();
}
else{
alert(response.code);
alert("오류 발생");
}
},
error:function(xhr,status,error){
icia.common.error(error);
}
});
});
}); //document
</script>
</div>
</body>
</html>8. 상세페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/head2.jsp" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/resources/css/reset.css">
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
}
/* 전체 컨테이너 스타일 */
.container {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 2px;
}
/* 이미지 스타일 */
.main-image {
width: 100%;
height: auto; /* 가로 비율 유지 */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}
section {
margin: 5px auto;
position: relative;
}
.profile-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-right: 20px;
}
.profile-image-comment {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
margin-right: 11px;
}
hr {
border-color: lightgray;
}
.making-comment-box {
position: fixed; /* 화면에 고정되도록 설정합니다. */
bottom: 0; /* 화면의 가장 하단에 위치하도록 설정합니다. */
right: 0; /* 화면의 왼쪽에 위치하도록 설정합니다. */
width: 38%; /* 전체 화면 너비를 채우도록 설정합니다. */
padding: 10px; /* 내용과 가장자리 간의 여백을 설정합니다. */
box-sizing: border-box; /* 패딩과 테두리를 포함하여 요소의 전체 너비를 설정합니다. */
margin-top:50px;
}
.comment-form input[type="text"] {
width: calc(100% - 70px); /* 버튼을 제외한 남은 영역에 너비 지정 */
padding: 5px;
border-radius: 5px; /* 모서리 둥글게 */
border: 1px solid #ccc; /* 테두리 */
margin-right: 10px; /* 입력 필드와 버튼 사이 간격 */
}
.comment-form-button {
padding: 5px 10px;
background-color: #3897f0; /* 인스타그램 블루 */
color: #ffffff; /* 흰색 텍스트 */
border: none;
border-radius: 5px; /* 모서리 둥글게 */
cursor: pointer;
left-margin:-5px;
}
.comment-form-button:hover {
background-color: #19489e; /* 인스타그램 블루 */
}
.heart-image{
margin-top:40px;
margin-left:2px;
width:23px;
transition: transform 0.2s ease;
}
.likementtion{
font-size:10px;
font-color:grey;
}
.delBtn{
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<section style=" width: 60%; padding: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<img class="main-image" src="/resources/upload2/${imgsrc}" alt="상세 이미지">
</section>
<section style="width:35%">
<!-- 왼쪽 정보 영역 -->
<section style="border-color: #ededed;">
<div style="display: flex; margin-bottom: 0; align-items: center;">
<c:choose>
<c:when test="${! empty profileImg}">
<img src="/resources/upload/${profileImg}" class="profile-image">
</c:when>
<c:otherwise>
<img src="/resources/images/default_profile.png" class="profile-image">
</c:otherwise>
</c:choose>
<h1 style="margin-left:-10px;">${boardUserId}</h1> <h2 style="margin-left:20px;">${boardContent}</h2> <br/>
<c:if test="${cookieId == boardUserId}">
<div style="display: flex; justify-content: flex-end; flex-grow: 1;">
<img src="/resources/images/cross.png" style="width:20px; margin-right:10px;"
id="delBtn" class="delBtn">
</div>
</c:if>
</div>
<p style="color: gray; font-size: 10px; margin-left:60px;"> ${boardRegDate}</p>
</section>
<hr/>
<c:if test="${not empty list and not empty list[0].commentUserId}">
<c:forEach var="list" items="${list}" varStatus="i">
<br/>
<c:if test="${not empty list.commentUserFileName}">
<div style="display: flex; align-items: center;">
<c:if test="${list.commentParent eq 1}"> <div style="margin-left:10px;"> </div> </c:if>
<img src="/resources/upload/${list.commentUserFileName}" class="profile-image-comment">
<h3 onclick="moveSomeOneProfile('${list.commentUserId}')" style="cursor: pointer;">${list.commentUserId}</h3> ${list.commentContent}
</div>
<div style="display: flex; align-items: center;">
<c:if test="${list.commentParent eq 1}"> <div style="margin-left:10px;"> </div> </c:if>
<p style="color: gray; font-size: 10px;">${list.commentRegDate} 좋아요 1
<c:if test="${list.commentParent eq 0}">
<b onclick="replyOn('${list.commentUserId}','${list.commentNum}')">답글달기</b></p>
</c:if>
</div>
</c:if>
<c:if test= "${empty list.commentUserFileName}">
<div style="display: flex; align-items: center;">
<c:if test="${list.commentParent eq 1}"> <div style="margin-left:10px;"> </div> </c:if>
<img src="/resources/images/default_profile.png" class="profile-image-comment">
<h3 onclick="moveSomeOneProfile('${list.commentUserId}')" style="cursor: pointer;">${list.commentUserId}</h3> ${list.commentContent}
</div>
<div style="display: flex; align-items: center;">
<c:if test="${list.commentParent eq 1}"> <div style="margin-left:10px;"> </div> </c:if>
<p style="color: gray; font-size: 10px;">${list.commentRegDate} 좋아요 1
<c:if test="${list.commentParent eq 0}">
<b onclick="replyOn('${list.commentUserId}', '${list.commentNum}')">답글달기</b></p>
</c:if>
</div>
</c:if>
</c:forEach>
</c:if>
</div>
</section>
<br/><br/><br/>
<div class="making-comment-box">
<div id="likeContainer">
<img src="/resources/images/greyHeart.png" alt="하트" class="heart-image" id="likeImg"/>
</div>
<c:if test="${likeCnt gt 0}">
<h5 class="likementtion"><b>${likeCnt}</b>명의 사람이 이 게시글을 좋아합니다.</h5>
</c:if>
<input type="hidden" name="disLike" id="disLike" value=0/>
<br/>
<form class="comment-form" name="commentForm" id="commentForm">
<input type="text" name="commentContent" id="commentContent" placeholder="댓글 달기..." value=""/>
<input type="hidden" name="commentGroup" id="commentGroup" value=""/>
<input type="hidden" name="boardNum" id="boardNum" value="${boardNum}"/>
<input type="hidden" name="commentParent" id="commentParent" value="0"/>
<input type="button" value="게시" id="submitBtn" class="comment-form-button">
</form>
</div>
<form name="delForm" id="delForm">
<input type="hidden" name="boardNum" id="boardNum" value="${boardNum}"/>
<input type="hidden" name="userId" id="userId" value="${boardUserId}"/>
<input type="hidden" name="fileName" id="fileName" value="${fileName}"/>
<input type="hidden" name="fileExt" id="fileExt" value="${fileExt}"/>
</form>
<script>
var isLike = ${isLike};
if(isLike != 0){
document.getElementById("likeImg").src = "/resources/images/filledHeart.png";
}
//아이디 누르면 프로필페이지로 이동
function moveSomeOneProfile(targetUserId){
window.parent.location.href = "/user/profile?userId=" + targetUserId;
window.close();
}
//답글
function replyOn(targetUserId, commentNum){
$("#commentGroup").val(commentNum);
$("#commentParent").val(1);
$("#commentContent").val("@" + targetUserId);
}
//답글 취소
function clearReplyContent() {
$("#commentContent").val("");
$("#commentParent").val(0);
}
$(document).ready(function() {
//댓글창에 아무것도 없으면 답글 취소
$("#commentContent").on("keyup", function() {
if ($(this).val() === "") {
clearReplyContent();
}
});
$("#likeImg").on("click",function(){
var nowLike = document.getElementById("likeImg");
var currentSrc = nowLike.getAttribute("src");
if (currentSrc.endsWith("greyHeart.png")) {
nowLike.src = "/resources/images/filledHeart.png";
$("#disLike").val(0);
} else {
nowLike.src = "/resources/images/greyHeart.png";
$("#disLike").val(1);
}
$.ajax({
type:"POST",
data: {
boardNum:${boardNum},
disLike:$("#disLike").val()
},
datatype:"JSON",
url:"/board/likeUpdate",
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("좋아요 반영 완료");
window.location.reload();
}
else{
alert("오류 발생");
nowLike.src = "/resources/images/greyHeart.png";
}
},
error:function(xhr,status,error){
icia.common.error(error);
}
});
});
//보드 삭제!
$("#delBtn").on("click",function(){
if(!confirm("이 게시물을 삭제할까요?")){
return;
}
var data = $("#delForm")[0];
var formData = new FormData(data);
$.ajax({
type:"POST",
url:"/board/delBoard",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend:function(xhr){
xhr.setRequestHeader("AJAX","true");
},
success:function(response){
if(response.code==0){
alert("삭제 성공");
window.close();
window.opener.location.reload();
}
else{
alert(response.code);
alert("오류 발생");
}
},
error:function(xhr,status,error){
icia.common.error(error);
}
});
});
$("#submitBtn").on("click", function() {
if ($.trim($("#commentContent").val()).length <= 0){
alert("댓글 내용을 입력하세요!");
$("#commentContent").focus();
return;
}
var data = $("#commentForm")[0];
var formData = new FormData(data);
$("#submitBtn").prop("disabled", true);
$.ajax({
type: "POST",
url: "/board/commentUpload",
data: formData,
processData:false,
contentType:false,
cache:false,
timeout:600000,
beforeSend: function(xhr){
xhr.setRequestHeader("AJAX","TRUE");
},
success: function(response){
if(response.code==0){
alert("등록완료");
$("#submitBtn").prop("disabled", false);
location.reload();
}
else if(response.code==400){
$("#submitBtn").prop("disabled", false);
alert("파라미터 오류");
}
else{
alert("서버 오류로 업로드에 실패했습니다.");
}
},
error:function(xhr,status,error){
icia.common.error(error);
alert("서버 에러");
}
});
});
});
</script>
</body>
</html>