✨ feat: 리워드 내역 페이지 UI 구현

[KKYHH]

✅ 체크리스트

• 리워드 페이지 스타일 변경
• 리워드 페이지 모바일 UI 추가
• 자동 임시 저장 기능 추가

📝 작업 상세 내용

1️⃣ 리워드 내역 페이지 UI

2️⃣ 리워드 내역 페이지 모바일 UI

3️⃣ 자동 임시 저장

useEffect(() => {
    const autoSave = 60000;

    const autoSaveDraft = () => {
      if (!isContentEmpty) {
        handleSaveDraft();
      }
    };

    const saveDataTime = setInterval(autoSaveDraft, autoSave);

    return () => {
      clearInterval(saveDataTime);
    };
  }, [diaryInfo, isContentEmpty]);

diaryInfo와 isContentEmpty 값이 변경될 때마다 1분 간격으로 저장을 실행합니다.
clearInterval로 컴포넌트가 언마운트 되면 메모리 누수나 중복이 발생하지 않게 타이머를 해제합니다.
일기 내용이 없다면 타이머는 실행되지 않습니다.

개발대화

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호: #207

[rkdcodus]

수고하셨습니다! 용호님 👍

[rkdcodus]

요 slice()는 혹시 어떤 목적인가요!? 범위 설정이 따로 없어서 궁금하네용

[KKYHH]

리워드 내역 데이터를 map으로 뿌려주는데 마지막에 들어가는 데이터가 아래로 쌓여서 최신순으로 보여주기 위해 reverse()를 사용해 배열을 뒤집었습니다!

그런데 reverse()는 원본 배열을 변형시키는 파괴적 메서드라고 해서 비파괴 구조인 slice()를 사용해서 배열을 복사했습니다! slice()안에 인자 없이 사용하면 단순히 배열을 복사 해준다고 합니다.

어차피 뒤집힌 데이터를 보여줄 거라 복사를 안 하고 사용해도 문제는 없을 거 같은데 🤔 원본 데이터가 유지된 채 사용하는 게 혹시 모를 에러를 방지하지 않을까 했습니다.

스프레드 연산자랑 같은 역할을 합니다 [...group.records].reverse()

Javascript - 비파괴적 / 파괴적 메서드
파괴적 처리와 비파괴적 처리(destructive and non-destructive)
[javascript] 배열 원소 뒤집기 reverse()
[혼공] 혼자 공부하는 자바스크립트

[rkdcodus]

오호!!! 단순 복사를 위해서였구나 reverse()도 원본 배열 변형시키는 거였군요 ㅎㅎ 감사합니다 😊