feat : 메인 화면 챌린지 + 사용자 순위 + 마이페이지 출석 관련 api 연동 완료 ( 메인 화면 끝 )

[yeongipark]

구현한 것

1. 메인화면 챌린지 api 연동
2. 메인화면 사용자 순위 api 연동
3. 마이페이지 출석 api 연동

설명

• 체크 버튼 눌렀을 때 챌린지 완료, 취소를 수행할 함수 구현

• 로직이 반복되는 부분이 있는 거 같아 함수로 분리하려 했지만 오류가 자꾸 발생하여 실패했습니다ㅜㅜ

  // 챌린지 완료 모양 눌럿을 때 실행할 함수
  const handleCheck = async (idx, id) => {
  // 모든 챌린지 완료했으면 챌린지 완료 표시 수정 불가능
  if (allComplete) {
    return;
  }
  // 체크 모양 눌렀을 때 해당 챌린지 취소, 완료 표시하기
  let arr = [...challengeList];
  
  // 해당 챌린지가 완료인 경우 false로 바꾸기
  if (arr[idx].completed) {
    // 사용자에게 미리 업데이트
    arr[idx].completed = false;
    // 서버로 데이터 전송
    try {
      await api.put(`/challengeparticipant/notcomplete/${id}`);
    } catch (e) {
      console.error("에러 발생 " + e);
    }
  } else {
    // 미완료 챌린지를 클릭한 경우 true로 변경
    arr[idx].completed = true;
    try {
      await api.put(`/challengeparticipant/complete/${id}`);
    } catch (e) {
      console.error("에러 발생: ", e);
    }
  }
  
  //상태 업데이트
  setChallengeList(arr);
  
  // 챌린지가 모두 완료되었으면 allComplete 상태 변경
  if (arr.every((item) => item.completed)) {
    setAllComplete(true);
  }
  };

  이슈

• useChallenge는 나중에 challenge 데이터 저장하려고 생성했는데 지금은 무시 하셔도 됩니다

[jihyun132]

수고하셨습니다!