[Photogram] 구독하기 - 기능 구현

• 지난 시간까지는 구독정보의 뷰 렌더링까지만 진행하였고 이번에는 실제 구독하기와 구독취소 기능을 구현해보려고 합니다.
• 사실 기능은 이미 이전 시간에 모두 구현해놓았으며 우리는 js 파일에서 해당 기능을 호출하기만 하면 됩니다.

---

📝 Javascript

• js 파일에 아래와 같은 함수를 구현해주었습니다.

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

• 해당 함수는 ajax 호출을 통해 우리가 컨트롤러에 구현한 함수를 호출하고 있습니다.
• 참고로 이전 시간에 구현한 컨트롤러는 아래와 같습니다.

package com.cos.photogram.web.api;

...

@RequiredArgsConstructor
@RestController
public class SubscribeApiController {
	
	private final SubscribeService subscribeService;

	@PostMapping("/api/subscribe/{to_user_id}")
	public ResponseEntity<?> subscribe(@AuthenticationPrincipal PrincipalDetails principalDetails, @PathVariable Long to_user_id) {
		subscribeService.subs(principalDetails.getUser().getId(), to_user_id);
		
		return new ResponseEntity<>(new CMRespDto<>(1, "구독하기 완료", null), HttpStatus.OK);
	}
	
	@DeleteMapping("/api/subscribe/{to_user_id}")
	public ResponseEntity<?> unSubscribe(@AuthenticationPrincipal PrincipalDetails principalDetails, @PathVariable Long to_user_id) {
		subscribeService.unSubs(principalDetails.getUser().getId(), to_user_id);
		
		return new ResponseEntity<>(new CMRespDto<>(1, "구독취소 완료", null), HttpStatus.OK);
	}
}

---

📝 Result

• 이후 테스트해보면 구독 버튼을 누를 경우 데이터베이스에 해당 정보가 저장되는 것을 확인할 수 있습니다.

---

GitHub - Daegwon-Kim/SpringBoot-Photogram