Wanna be Brilliant Full-Stack Developer

2/15 SpringBoot 구독 및 구독취소 구현하기 #2 본문

Back-End/Spring Boot

2/15 SpringBoot 구독 및 구독취소 구현하기 #2

Flashpacker 2022. 2. 15. 17:13

목표

구독및 구독 취소 만들어보려고한다! 우리가 해야하는것은 구독하기와 구독취소를 호출을 SubscribeApiController 에서 해야하는데! profile.js를 수정하려고한다!

// (1) 유저 프로파일 페이지 구독하기, 구독취소
function toggleSubscribe(obj) {
	if ($(obj).text() === "구독취소") {
		$(obj).text("구독하기");
		$(obj).toggleClass("blue");
	} else {
		$(obj).text("구독취소");
		$(obj).toggleClass("blue");
	}
}

이벤트 정보를 받아서 obj (toggleSubscribeModal)버튼을 누르면 this 를 넘기는데 this라는 것이 이벤트정보가 넘어간다 그 이벤트 정보를 받아서 그 글자가 구독취소면 구독하기로 바꾸고 클래스 blue라는것으로 바꾸고 

그 글자가 구독취소 가아니면 구독하기였으면 구독취소로 바꾸고 blue라는것을 빼는것인데!

Toggle이라는것이 머냐면 Class의 css 그 클래스 이름을 넣었다 뺐다 하는것이다. 

이러한 기능 말고는 구현이 안되었기 떄문에 추가해보려고한다!

 

우리가 해야할것은 AJAX호출해야한다! 

/**
  1. 유저 프로파일 페이지
  (1) 유저 프로파일 페이지 구독하기, 구독취소
  (2) 구독자 정보 모달 보기
  (3) 구독자 정보 모달에서 구독하기, 구독취소
  (4) 유저 프로필 사진 변경
  (5) 사용자 정보 메뉴 열기 닫기
  (6) 사용자 정보(회원정보, 로그아웃, 닫기) 모달
  (7) 사용자 프로파일 이미지 메뉴(사진업로드, 취소) 모달 
  (8) 구독자 정보 모달 닫기
 */

// (1) 유저 프로파일 페이지 구독하기, 구독취소
function toggleSubscribe(toUserId, obj) {
	if ($(obj).text() === "구독취소") {
		
		$.ajax({
			type: "delete",
			url: "/api/subscribe/"+toUserId,
			dataType: "json"
		}).done(res => {
			 $(obj).text("구독하기");
			 $(obj).toggleClass("blue");
		}).fail(error => {
			console.log("구독취소실패", error);
		});
		

	} else {
			
	$.ajax({
			type: "post",
			url: "/api/subscribe/"+toUserId,
			dataType: "json"
		}).done(res => {
			 $(obj).text("구독취소");
			 $(obj).toggleClass("blue");
		}).fail(error => {
			console.log("구독하기실패", error);
		});
		
		$(obj).text("구독취소");
		$(obj).toggleClass("blue");
	}
}

// (2) 구독자 정보  모달 보기
function subscribeInfoModalOpen() {
	$(".modal-subscribe").css("display", "flex");
}

function getSubscribeModalItem() {

}


// (3) 구독자 정보 모달에서 구독하기, 구독취소
function toggleSubscribeModal(obj) {
	if ($(obj).text() === "구독취소") {
		$(obj).text("구독하기");
		$(obj).toggleClass("blue");
	} else {
		$(obj).text("구독취소");
		$(obj).toggleClass("blue");
	}
}

// (4) 유저 프로파일 사진 변경 (완)
function profileImageUpload() {
	$("#userProfileImageInput").click();

	$("#userProfileImageInput").on("change", (e) => {
		let f = e.target.files[0];

		if (!f.type.match("image.*")) {
			alert("이미지를 등록해야 합니다.");
			return;
		}

		// 사진 전송 성공시 이미지 변경
		let reader = new FileReader();
		reader.onload = (e) => {
			$("#userProfileImage").attr("src", e.target.result);
		}
		reader.readAsDataURL(f); // 이 코드 실행시 reader.onload 실행됨.
	});
}


// (5) 사용자 정보 메뉴 열기 닫기
function popup(obj) {
	$(obj).css("display", "flex");
}

function closePopup(obj) {
	$(obj).css("display", "none");
}


// (6) 사용자 정보(회원정보, 로그아웃, 닫기) 모달
function modalInfo() {
	$(".modal-info").css("display", "none");
}

// (7) 사용자 프로파일 이미지 메뉴(사진업로드, 취소) 모달
function modalImage() {
	$(".modal-image").css("display", "none");
}

// (8) 구독자 정보 모달 닫기
function modalClose() {
	$(".modal-subscribe").css("display", "none");
	location.reload();
}

이제 toUserId만 받아오면된다.  profile.jsp로 가서 

	<!--유저정보 및 사진등록 구독하기-->
		<div class="profile-right">
			<div class="name-group">
				<h2>${dto.user.name}</h2>

				<c:choose>
					<c:when test="${dto.pageOwnerState}">
						<button class="cta" onclick="location.href='/image/upload'">사진등록</button>
					</c:when>
					<c:otherwise>
						<c:choose>
							<c:when test="${dto.subscribeState}" >
								<button class="cta blue" onclick="toggleSubscribe(${dto.user.id}, this)">구독취소</button>
							</c:when>
							<c:otherwise>
								<button class="cta" onclick="toggleSubscribe(${dto.user.id}, this)">구독하기</button>
							</c:otherwise>
						</c:choose>

지금 다른 유저로 로그인하고 내페이지로 들어갈려고 해도 1번으로 고정이 되어있기 떄문에

header.jsp로 가려고한다

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<sec:authorize access="isAuthenticated()">	<!-- 인증된 정보에 접근 하는 방법 , 세션에 접근하는 방법 -->
	<sec:authentication property="principal" var="principal"/> <!-- principal은 세션정보에 접근이된다. 키워드  -->
</sec:authorize>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photogram</title>

	<!-- 제이쿼리 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	
	<!-- Style -->
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/story.css">
	<link rel="stylesheet" href="/css/popular.css">
	<link rel="stylesheet" href="/css/profile.css">
	<link rel="stylesheet" href="/css/upload.css">
	<link rel="stylesheet" href="/css/update.css">
	<link rel="shortcut icon" href="/images/insta.svg">
	
	<!-- Fontawesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
	
	<header class="header">
		<div class="container">
			<a href="/" class="logo">
				<img src="/images/logo.jpg" alt="">
			</a>
			<nav class="navi">
				<ul class="navi-list">
					<li class="navi-item"><a href="/">
							<i class="fas fa-home"></i>
						</a></li>
					<li class="navi-item"><a href="/image/popular">
							<i class="far fa-compass"></i>
						</a></li>
					<li class="navi-item"><a href="/user/${principal.user.id}">
							<i class="far fa-user"></i>
						</a></li>
				</ul>
			</nav>
		</div>
	</header>

링크 주소를 {principal.user.id} 수정하면 각 주인 페이지로 돌아가게된다!

'Back-End > Spring Boot' 카테고리의 다른 글

2/15 SpringBoot QLRM 라이브러리로 DTO 매핑하기  (0) 2022.02.15
2/15 SpringBoot 구독 모달 정보 API 만들기! #3  (0) 2022.02.15
2/15 SpringBoot 구독정보 완성하기 #1  (0) 2022.02.15
2/14 SpringBoot Image 뷰 렌더링하기  (0) 2022.02.14
2/14 SpringBoot Image DB에 업로드하기  (0) 2022.02.14
'Back-End/Spring Boot' Related Articles more