인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (11) - 프로젝트 마무리

• 네이버 지식In - 랭킹 페이지

01

1번 사진은 실제 네이버 지식in 랭킹 페이지

1번 사진은 실제 네이버 지식 in에서 제공하는 명예의 전당 이미지

2번 사진은 클론 코딩으로 따온 랭킹 페이지입니다.

솔직히 랭킹 페이지의 경우 별 다른 기능은 없고,

내공(point)에 따라 랭킹이 정해지게 만들었습니다

 

• memberRank.jsp - 1~3등 출력

랭킹 1등 ~ 3등의 경우 아무래도 최상위 3인을 표현하기 때문에

List를 출력하는 디자인의 사이즈가 약간 더 큰편입니다.

그렇기 때문에 c태그의 for문에 제약을 걸어 1등 ~ 3등은 끊어가며 따로 출력을 진행했습니다.

<c:forEach items="${memberDTOList}" var="memberDTO" end="0">
    <c:if test="${memberDTO.memberPoint > 10}">
        <li class="article-top-list-member">
            <div class="article-top-list-member-item1">
                <a href="#" class="top-user-inner-info">
                    <span class="user-info-rank"><em>1</em></span>
                    <div class="thmb_profile">
                        <div class="thmb">
                            <img src="https://kin-phinf.pstatic.net/20221003_85/16647839766431JNV4_PNG/%BD%BA%C5%A9%B8%B0%BC%A6_2022-10-03_%BF%C0%C8%C4_4.59.01.png?type=w200"
                                 class="thmb-user-img" alt="프로필이미지">
                            <span class="thmb-rank-mask1"></span>
                        </div>
                    </div>
                    <div class="ranking-user-list-body">
                        <div class="writer-sec">
                                                            <span class="writer-no-badge"><em
                                                                    class="tag-ellipsis">${memberDTO.memberEmail}</em></span>
                        </div>
                        <p class="user-desc-ellipsis">날먹의 신</p>
                        <div class="ranking-user-memorial">
                            <p class="ranking-user-memorial-item">
                                <strong class="ranking-user-category_title">분야</strong>
                                <span class="ranking-user-category-category_content">
                                                        <span class="ranking-user-category-ellipsis">개꿀</span>
                                                    </span>
                            </p>
                            <p class="ranking-user-memorial-item">
                                <strong class="ranking-user-category_title">내공</strong>
                                <span class="ranking-user-category-category_content">
                                                        <span class="ranking-user-category-ellipsis">${memberDTO.memberPoint}</span>
                                                    </span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </li>
    </c:if>
</c:forEach>

 

• memberRank.jsp - 4등부터의 List 출력

일단 모든 사용자는 기본 point를 10점을 가지고 시작을하기 때문에

최소 11점의 point가 있어야 랭킹에 등록이 되게 설정하였습니다.

<c:forEach items="${memberDTOList}" var="memberDTO" begin="3">
    <c:if test="${memberDTO.memberPoint > 10}">
        <li class="article-low-list-member">
            <div class="article-top-list-member-item1">
                <a href="#" class="top-user-inner-info">
                    <span class="user-info-Lowrank"><em>4</em></span>
                    <div class="thmb_profile" style="padding-top: 20px;">
                        <div class="low-thmb">
                            <img src="https://kin-phinf.pstatic.net/20221003_85/16647839766431JNV4_PNG/%BD%BA%C5%A9%B8%B0%BC%A6_2022-10-03_%BF%C0%C8%C4_4.59.01.png?type=w200"
                                 class="thmb-Lowuser-img" alt="프로필이미지">
                            <span class="thmb-Lowrank-mask"></span>
                        </div>
                    </div>
                    <div class="ranking-user-list-body">
                        <div class="writer-sec">
                                                <span class="writer-no-badge"><em
                                                        class="tag-ellipsis">${memberDTO.memberEmail}</em></span>
                        </div>
                        <p class="user-desc-ellipsis">내공 냠냠</p>
                        <div class="ranking-user-memorial">
                            <p class="ranking-user-memorial-item">
                                <strong class="ranking-user-category_title">분야</strong>
                                <span class="ranking-user-category-category_content">
                                                        <span class="ranking-user-category-ellipsis">낚시</span>
                                                    </span>
                            </p>
                            <p class="ranking-user-memorial-item">
                                <strong class="ranking-user-category_title">내공</strong>
                                <span class="ranking-user-category-category_content">
                                                        <span class="ranking-user-category-ellipsis">${memberDTO.memberPoint}</span>
                                                    </span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </li>
    </c:if>
</c:forEach>

 

• Controller

    @GetMapping("/board/Rank")
    public String boardRank(Model model, HttpSession session) {
        model.addAttribute("memberDTOList", memberService.findRank());
        DB에서 point가 높은 순으로 List를 받아와 model에 담아 jsp로 전달합니다.
        model.addAttribute("memberDTO", boardService.findById(session.getAttribute("memberId")));
        layout 사용을 위해 사용자의 정보를 담아 전달합니다.
        return "/boardPage/boardRank";
    }

프로젝트 기간 막바지였기 때문에 정말 기능을 더 추가하고 싶었지만 기간상의 문제로

List를 출력하는 선에서 마무리하였습니다.

 

• Mapper

    <select id="findRank" resultType="member">
        select * from member_table order by memberPoint desc limit 9
    </select>

프로젝트 Limit으로 10개의 랭킹 정보만 List에 담아 리턴합니다.

 

이렇게 Spring framework 개인 프로젝트를 마무리합니다