Jsp JavaScript 별모양 즐겨찾기 구현

<input type="checkbox" id="${result.seq }__${result.id}" class="fvrts_checkbox" onclick="fncFvrtsOneCheck(this);" value="Y" ${result.fvrtsYn eq 'Y' ? 'checked="checked"' : '' } style="display:none;">
<label for="${result.seq }__${result.id}" class="cursor">
    <img id="img_${result.seq }__${result.id}" src="/publish/mgr/images/star_${result.fvrtsYn}.png" style="width:20px;"/>
</label>

1. 체크박스 display:none 설정

2. label 태그로 이미지 감싸기

3. src 값에 별모양 이미지 경로 명시

4. 별 모양 파일 이름은 각각 _Y, _N 으로 저장

<%-- 즐겨찾기 체크 및 해제 --%>  
function fncFvrtsOneCheck(obj){ 
	           
	var chk_state = "";
	var id =obj.id.split("__")[0];
	    
	/* 체크 상태 구분 */   
	if(obj["checked"]){     
		chk_state = "Y";
		$("#img_"+obj.id).attr("src","/publish/mgr/images/star_"+ chk_state +".png"); // 별 이미지 셋팅
	}else{ 
		chk_state = "N";
		$("#img_"+obj.id).attr("src","/publish/mgr/images/star_"+ chk_state +".png"); // 별 이미지 셋팅
	} 
	    
	$.ajax({     
		method : "POST",
		url : "addFvrts.do",    
		data : {"fvrtsSeq" : id, "chk_state" : chk_state},
		dataType : "JSON",
		success : function(data){  
			console.log("즐겨찾기 추가 및 해제 : " + data.result);
		},    
		complete : function(data){
			console.log("즐겨찾기 종료"); 
		}
	});
}

5. 즐겨찾기 이미지에 달아줄 onclick 함수 선언

6. 클릭 시 체크를 하는 시점인지 체크를 해제하는 시점인지 구분하는 값과 추가 또는 해제된 대상의 값을 ajax 로 전송

/* 즐겨찾기 추가 및 해제 */
@ResponseBody   
@SuppressWarnings("rawtypes") 
@RequestMapping(folderPath + "addFvrts.do")   
public Map addFvrts(@ModelAttribute("searchVO") VO searchVO, String chk_state) throws Exception {

    Map<String, String> map = new HashMap<>(); 
    /* 즐겨찾기에 이미 등록되어 있는지 체크 */  
    int cnt = (Integer) cmmnService.selectCount(searchVO, PROGRAM_ID + ".fvrtsCheckCount");
    if(cnt > 0){     
        /* 체크박스 체크 상태 */
        if("N".equals(chk_state)){  
            searchVO.setUseYn("N");
        }else{
            searchVO.setUseYn("Y");      
        }   
        cmmnService.updateContents(searchVO, PROGRAM_ID + ".updateFvrtsContents");
    }else{  

        cmmnService.insertContents(searchVO, PROGRAM_ID + ".insertFvrtsContents");
    }
    map.put("result", "success");
    return map;
}

7. 즐겨찾기 테이블 count 조회 및 체크 상태를 전달 받아 DB 접근

<!-- 즐겨찾기 목록 카운트 -->     
<select id="fvrtsSelectCount" parameterType="VO" resultType="int">
    /* VO.fvrtsSelectCount */ 
    <![CDATA[ 
            SELECT   COUNT(A.FVRTS_SEQ)	
             FROM	t_fvrts A
  LEFT OUTER JOIN	t_ad_user B
               ON	A.FVRTS_SEQ = B.SEQ
  LEFT OUTER JOIN	t_code C
               ON	C.C_CD = B.POSITION

            WHERE	A.AD_SEQ = #{loginSeq}
              AND	A.USE_YN = 'Y' 
          ]]>
</select>

8. SQL 조회 확인