[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

• 다음으로 SubscribeRepository에 네이티브 쿼리를 추가해주었습니다.

package com.cos.photogram.domain.subscribe;

...

public interface SubscribeRepository extends JpaRepository<Subscribe, Long> {

    ...

    @Query(value = "SELECT COUNT(*) FROM subscribe WHERE from_user_id = :principal_id AND to_user_id = :page_user_id", nativeQuery = true)
    int subscribeState(Long principal_id, Long page_user_id);

    @Query(value = "SELECT COUNT(*) FROM subscribe WHERE from_user_id = :page_user_id", nativeQuery = true)
    int subscribeCount(Long page_user_id);
}

• 두 쿼리는 각각 구독 상태와 구독한 수를 반환합니다.

---

📝 Service

• 이후 UserService에서 위의 쿼리를 사용하여 DTO에 두 구독정보를 저장합니다.

package com.cos.photogram.service;

...

@RequiredArgsConstructor
@Service
public class UserService {

    private final SubscribeRepository subscribeRepository;

    ...

    @Transactional(readOnly = true)
    public UserProfileDto profile(Long pageUserId, Long principalUserId) {
        ...

        int subscribeState = subscribeRepository.subscribeState(principalUserId, pageUserId);
        int subscribeCount = subscribeRepository.subscribeCount(pageUserId);

        userProfileDto.setSubscribeState(subscribeState == 1);
        userProfileDto.setSubscribeCount(subscribeCount);

        return userProfileDto;
    }
}

---

📝 View

• 마지막으로 View 페이지에서 렌더링을 수행합니다.

<c:otherwise>
    <c:choose>
        <c:when test="${dto.subscribeState}">
            <button class="cta blue" onclick="toggleSubscribe(this)">구독취소</button>
        </c:when>
        <c:otherwise>
            <button class="cta" onclick="toggleSubscribe(this)">구독하기</button>
        </c:otherwise>
    </c:choose>
</c:otherwise>

...

<li><a href="javascript:subscribeInfoModalOpen();"> 구독정보<span>${dto.subscribeCount}</span>

---

📝 Result

• 결과를 살펴보면 구독정보에 따라 View 페이지가 알맞게 출력되는 것을 확인할 수 있습니다.

---

GitHub - Daegwon-Kim/SpringBoot-Photogram