좋아요_handleLike

좋아요 기능 구현 로직

1. 로그인 여부 확인

   • isAuthenticated

     const { isAuthenticated } = useAuthContext(); //로그인 여부 체크
     
     if (isAuthenticated) {
     	...코드
     } else {
       setAlertMessage('로그인 후 이용 가능합니다.');
       setAlertOpen(true);
     }

2. emotion code에 따라 좋아요 여부 등록

   • emotion code : 400101 (좋아요), 400102 (싫어요)
   • myEmotionCd.code가 400101일 경우 좋아요 삭제
   • myEmotionCd.code가 400101이 아닐 경우 좋아요 추가

   const emotionCd = mbtiStore.mbti.myEmotionCd?.code === 400101 ? 400102 : 400101;
   if (mbtiStore.mbti.myEmotionCd?.code === 400101) {
     await mbtiStore.removeLike(mbtiStore.mbti.mbtiSid);
   } else {
     await mbtiStore.addLike(mbtiStore.mbti.mbtiSid, emotionCd);
   }     

3. 상태에 따라 2번이 완료 된 후 해당 컨텐츠의 정보를 다시 불러와서 state에 담아주기

mbtiStore.get(Number(id)).then(() =>
  setContent(mbtiStore.mbti)
);

*** 좋아요 클릭이벤트 코드

const handleLike = async () => {
    if (isAuthenticated) {
      const emotionCd = mbtiStore.mbti.myEmotionCd?.code === 400101 ? 400102 : 400101;
      if (mbtiStore.mbti.myEmotionCd?.code === 400101) {
        await mbtiStore.removeLike(mbtiStore.mbti.mbtiSid);
      } else {
        await mbtiStore.addLike(mbtiStore.mbti.mbtiSid, emotionCd);
      }
      mbtiStore.get(Number(id)).then(() =>
        setContent(mbtiStore.mbti)
      );
    } else {
      setAlertMessage('로그인 후 이용 가능합니다.');
      setAlertOpen(true);
    }
  };

좋아요 UI

<Box
	id="mbtiLike"
  sx={{
    ...likeStyle,
    background: mbtiStore.mbti.myEmotionCd?.code === 400101 ? '' : '#FAFAFA',
    textAlign: 'center',
    cursor: 'pointer',
    border: mbtiStore.mbti.myEmotionCd?.code === 400101 ? '1px solid #eeeeee' : '',
  }}
   onClick={handleLike}
>
  {mbtiStore.mbti.myEmotionCd?.code === 400101 ? (
   <>
    <Iconify icon={'ph:heart-straight-fill'} width={25} color={theme.palette.primary.main}/>
    <Typography variant={'Kor_12_r'} sx={{ color: theme.palette.primary.main }}>
     {numberComma(content.likeCnt || 0)}
    </Typography>
    </>
    ) : (
   <>
     <Iconify icon={'ph:heart-straight-bold'} width={25} color={'#9DA0A5'} />
     <Typography variant={'Kor_12_r'} sx={{ color: '#9DA0A5' }}>
      {numberComma(content.likeCnt)}
     </Typography>
   </>
  )}
</Box>