분류 전체보기

[Photogram] 스토리 페이지

이번 시간에는 아래와 같이 본인이 구독한 사용자가 업로드한 글을 바로 볼 수 있는 스토리 페이지를 구현해보려고 합니다. 해당 페이지를 구성하고 있는 요소들을 잠깐 살펴보면 우선 제일 위에 사용자 정보가 드러나고, 업로드한 사진, 사진 설명, 좋아요 수, 댓글 정보가 나타나고 있습니다. 아직 좋아요와 댓글 기능을 구현하지 않았으니 이를 제외한 나머지만으로 먼저 구현해보도록 하겠습니다. 📝 Repository 우선 해당 페이지에는 현재 접속중인 사용자가 구독중인 사용자의 글이 보여져야 하기 때문에 우리는 아래와 같은 쿼리를 작성할 수 있습니다. package com.cos.photogram.domain.image; ... public interface ImageRepository extends JpaRepo..

[Photogram] 구독하기 - 구독 모달

이번에는 구독 모달에 사용자가 구독한 구독 정보가 리스트 형태로 보여지며 해당 모달에서도 구독하기와 구독취소가 가능하도록 구현해보려고 합니다. 📝 DTO 우선 구독 정보를 리스트로 나열하기 위해 필요한 항목들을 아래와 같이 구현해보았습니다. package com.cos.photogram.web.dto.subscribe; ... @Builder @NoArgsConstructor @AllArgsConstructor @Data public class SubscribeDto { private BigInteger id; private String username; private String profile_image_url; private Integer subscribe_state; private Integer e..

[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).toggl..

[Photogram] 구독하기 - 뷰 렌더링

이번 시간에는 프로필 페이지의 구독기능을 구현하고 구독정보를 뷰에 렌더링해보겠습니다. 📝 DTO 우선 이전 시간에 구현하였던 UserProfileDto에 새로운 변수를 추가해주었습니다. package com.cos.photogram.web.dto.user; ... @Data public class UserProfileDto { private User user; private boolean pageOwnerState; private boolean subscribeState; private int imageCount; private int subscribeCount; } subscribeState는 구독 여부를 나타내며 subscribeCount는 구독한 수를 나타냅니다. 📝 Repository 다음으로 S..