게시물 좋아요 기능 만들기

기능 개요

1. 좋아요 누를 시 동작

1. 아이콘 UI 변경
2. DB의 user 컬렉션 내 해당 user의 도큐먼트 내 likes 컬렉션에 해당 상품의 ID를 Id 필드 값으로 담아 저장한다.
3. 좋아요 상태 기록하는 변수 (checkLikes)에 상태값 저장하기

2. 페이지 재진입 시

1. DB의 user 컬렉션 내 해당 user의 도큐먼트 내 likes 컬렉션에 해당 상품의 ID를 Id 필드 값으로 가진 도큐먼트가 있는지 체크한다.
2. 만약 1이 true라면, checkLikes 변수의 값도 true로 변경해준다
3. 좋아요 누른 UI로 변경해준다

코드

1. likes 아이콘 누를 시 동작 처리해주는 함수 코드

// 좋아요 기능 : 상태 변수 변경, 아이콘 변경, DB user>likes에 해당 상품 저장
function clickLikesBtn() {
  itemID = queryStr.get('id');
  $('#likes').click((e) => {
    
    // 1. likesstate을 현재 값의 반대로 변경한다
    likesStat = !likesStat;
    
    // 2. Likestat값애 따라 각각 다른 기능 수행하게 한다.
    if (likesStat == true) {
      console.log('채우기');
      $('#likes').attr('src', './img/icon/mypage/heart-filled.svg');
      db.collection('user')
        .doc(myUID)
        .collection('likes')
        .add({ id: queryStr.get('id') })
        .then(() => {
          console.log('저장완료');
        });
      return;
    }
    
    if (likesStat == false) {
      console.log('비우기');

      db.collection('user')
        .doc(myUID)
        .collection('likes')
        .where('id', '==', itemID)
        .get()
        .then((result) => {
          result.forEach((a) => {
            likesDocID = a.id;

            db.collection('user')
              .doc(myUID)
              .collection('likes')
              .doc(likesDocID)
              .delete()
              .then(() => {
                console.log('likes 삭제 완료');
              });
          });
        });

      $('#likes').attr('src', './img/icon/mypage/heart-lined.svg');
    }
  });
}

2. 페이지 재진입 시 likes 처리 함수 코드

// 페이지 진입 시 해당상품 찜했는지 체크해 좋아요 아이콘 변경시킨다
function checkLikes() {
  db.collection('user')
    .doc(myUID)
    .collection('likes')
    .where('id', '==', itemID)
    .get()
    .then((result) => {
      if (!result.empty) {
        likesStat = !likesStat;
        $('#likes').attr('src', './img/icon/mypage/heart-filled.svg');
        return;
      }
    });
}

느낀 점

likes는 컬렉션으로 빼지 말걸...
구조화된 정보는 컬렉션으로 빼면 관리가 수월하지만...
좋아요 기능의 경우 저장할 정보다 해당 상품 ID 한 개임...
컬렉션으로 빼면 접근하는 것도 한단계 늘어나고...
document ID도 자동 부여되어서 또 이거 찾는 단계도 거침...
다른 기능 대충 완성 후 리팩토링하기...