리팩토링

1. 리팩토링 규칙

• 기한
다음주 팀 프로젝트 시작 전까지 (10월 11일 23:59)

• 일정
• 자기가 생각한 리팩토링, 고도화 요구 문서화(10월 5일 / 12:00)
• 5일 18시 미팅 ← 6시맞았네요
• 멘토님 피드백 사항 적용 및 PR 올리기 (8일 / 23:59)
• 팀원들 코드 리뷰 & 반영 & 머지 & 배포 (9일 / 시간 미정)
• 에러 고치기 (8일 ~ 10일)
• 최종 배포 (11일)

• git issue 활용하기
• Assignee는 비워두고, 본인이 희망하면 본인을 할당한 다음 해결해서 PR 올리기

2. 리팩토링 계획

김민재

• 폼 데이터 로직 → react-hook-form 으로 마이그레이션 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

• 폼 데이터 로직 → 페이지에서 분리해서 컴포넌트로 사용

• 회원가입 폼 ‘Enter’로 제출안되는 부분 수정 ← 이건 해결 완료 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

박나연

• sessionStorage
• ㅠㅠㅠ 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
• 읽기 전용…만들어주세요

• axios interceptor

• search
• 뒤로가기 처리하기
• 검색 요소 클릭했을 때 이동 처리하
• 👍🏻👍🏻👍🏻👍🏻👍🏻

조수연

• useEffect dependency 체크하기

• 삼항연산자는 변수로 만들어서 처리하기

• input, output 이 없는 함수를 어떻게 처리할 것인지 생각하기

• 함수를 재사용할 수 있도록 수정하기

홍창기

• Meditation
• 명상 음악은 없나요? → 자동 재생 기능은 크롬 브라우저 정책상 지원하지 않음. 대신 유저의 인터랙션이 있으면 가능한데, 타이머 클릭하면 재생되도록? or 명상 중에 명상 끝내기 버튼 위쪽에 작은 음악 플레이어를 노출시켜야하나? 무튼 명상 배경음악 재생기능 추가하기 일단 간단하게 구현 완료
• 명상을 어떻게 하는지 안내가 필요할 것 같다 → 찾아보니 User Onboarding이라는 기능을 쉽게 쓸 수 있도록 하는 라이브러리들이 있다. (React-joyride, React-shepherd, Intro.js, walktour 등) 이 라이브러리를 적용해서 명상 페이지 진입 시 각 UI에 대한 짤막한 설명을 보여주는게 좋을듯? 추가로 다시 보지 않기 체크박스 만들어서 체크하고 닫으면 안 보이도록 해야겠다. (다시 살리는 버튼도 만들어야하나…?) 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
• 명상 끝내기 → location.reload() 말고 상태값들 초기화하는 방법 적용해보기 👍🏻👍🏻👍🏻👍🏻👍🏻

/** 초기화 필요한 상태값 목록:
   * 1. meditationStatus
   * 2. endButtonPushed
   * 3. meditationTime
   * 4. meditationTimeSetter
   * 5. meditationTimer
   * 6. meditationLabel
   * 7. meditationCancelConfirm
   * 8. meditationThemePicker
   * 10. meditationThemeInfo
   */

와...~

• 지금 명상 일시정지하면 아래에 빈 공간이 생기는 이슈 해결
• 테마 선택하면 색깔 바꾸기
• 시간 정확하게 하기 → setInterval()로 타이머를 구현했지만, 약간의 오차가 있다. requestAnimationFrame() 활용해서 정확한 시간을 보여주도록 고쳐보기
👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
• 커스텀 이벤트로 명상 시작 / 명상 끝을 관리하고 있는 부분 상태로 관리하도록 변경하기 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
• MeditationTimer에서 헤더랑 푸터 숨기는 로직 선언형으로 변경하기 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
• 현재 상황 :

useEffect(() => {
  const headerEl = document.querySelector('header');
  const footerEl = document.querySelector('footer');
  if (paused) {
    headerEl.style.display = 'flex';
    footerEl.style.display = 'flex';
  } else {
    headerEl.style.display = 'none';
    footerEl.style.display = 'none';
  }
}, [paused]);

• TimeSetter 꾹 눌러서 빠르게 시간 설정하는 부분 개선
• 증가 시간 단위 1분으로 변경 → 1분도 길다…
• 기능 지연 기능? 추가하기 (ex: 2초 이상 누르고 있다면 연속 증가 / 감소) 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻