Java로 쇼핑몰 좋아요 기능 구현하기

학원에서 진행하는 세미 프로젝트에서 좋아요 기능을 맡게 되었다.

화면에서 보이는 것처럼 여러 상품 정보를 불러오는 샵 랜딩페이지에서 회원인 경우 좋아요를 누른 제품과 누르지 않은 제품을 구별하여 띄워주어야 했다.

상세페이지에서도 마찬가지였다.

 

---

좋아요 기능에 가져간 흐름은 다음과 같다.

1. 회원인 경우
   이미 좋아요를 누른 경우, 좋아요를 취소한다.
   좋아요를 누르지 않은 경우, 좋아요를 추가한다.
2. 회원이 아닌 경우
   알림창을 띄운 후 회원가입을 유도한다.

두번째 경우는 클라이언트단에서 간단하게 끝나므로 첫번째 경우에 집중했다.

좋아요 여부는 클릭 이벤트가 발생하는 아이콘 태그에 data속성으로 likeValid값을 넣어놓는 것으로 확인했다.

좋아요를 눌렀다면 1, 아니라면 0.

이밖에도 전체 좋아요수 수정이 되어야 했기 때문에 data속성에 likeCnt값 또한 넣어놓았다.

    $.ajax({
            url: "<%=request.getContextPath()%>/font/fontLike",
            dataType: "json",
            type:"GET",
            data: {'fontNo' : $fontNo}, 
            success(data){
                const likeValid = data["likeValid"]; 
                const likeCnt = data["likeCnt"];
                //member 본인의 likeValid가 1이라면 속이 찬 하트, 0이면 속이 빈 하트
                if(likeValid == 1){
                    $target
                        .removeClass("far")
                        .addClass("fas");
                }else{
                    $target
                        .removeClass("fas")
                        .addClass("far");
                }
                //likeCnt값 적용
                $target.html(`<span>\${likeCnt}</span>`);
            },
            error: console.log
        });

좋아요 하트 변경은 Ajax를 통한 비동기 통신으로 진행했다.

data에 하트를 누른 상품번호를 전달한다.

@WebServlet("/font/fontLike")
public class FontLikeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private FontService fontService = new FontService();
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 현재 loginMember가 좋아요를 눌렀는지 안 눌렀는지 확인 -> 안 눌렀으면 카운트 올리기/ 눌렀으면 카운트 빼기
        HttpSession session = request.getSession();
        Member member = (Member)session.getAttribute("loginMember");
        //1. 사용자 입력값 처리
        String fontNo = request.getParameter("fontNo");
        String memberNo = member.getMemberNo();
 
        Map<String, Object> param = new HashMap<>();
        param.put("fontNo", fontNo);
        param.put("memberNo", memberNo);
        
        //2. 업무 로직
        //like_font 테이블에서 조회. DQL이지만 존재 여부 확인 후, DML문 처리가 있을 예정이므로 int값으로 받는다.
        //json 변환할 데이터 객체 생성
        int result = 0;
        int likeValid = 0;
        Map<String, Object> map = new HashMap<>();
        likeValid = fontService.selectFontLike(param);
 
        
        if(likeValid == 1) {
            //좋아요 이력이 있는 경우 like_font 테이블에서 내용 삭제 후 font테이블 좋아요 카운트 감소
            likeValid = 0;
            result = fontService.deleteFontLike(param);
        }
        else if(likeValid == 0) {
            likeValid = 1;
            //좋아요 이력이 없는 경우 like_font 테이블에서 내용 추가 후 font테이블 좋아요 카운트 증가
            result = fontService.insertFontLike(param);
        }
        
        int likeCnt = fontService.countFontLike(fontNo);
 
        map.put("likeValid", likeValid);
        map.put("likeCnt", likeCnt);
        map.put("fontNo", fontNo);
        result = fontService.updateFontLike(map);
        
        //json문자열로 변환
        Gson gson = new Gson();
        String jsonStr = gson.toJson(map);
 
        
        //3. view단 처리
        response.setContentType("application/json; charset = utf-8");
        response.getWriter().print(jsonStr);
    }
 
}

 

좋아요 이력이 있는 경우 먼저 like_font 테이블에서 좋아요를 누른 내용을 삭제한다.

이후 font테이블에 있는 전체 좋아요 카운트 컬럼의 좋아요 카운트를 감소시킨다.

좋아요 이력이 없는 경우는 반대로 진행한다.

이후 전체 좋아요 카운트와 좋아요 여부를 map객체에 담아 리턴한다.

여러 사용자가 홈페이지를 이용하는 경우 카운트가 달라지는 것을 감안했다.

실시간으로 카운트가 반영이 되면 더 좋겠으나, 아직은 실력이 부족했다.