📝 관련 이슈

• close 지출 내역 확인 페이지 UI 구현 #15

💻 작업 내용

중간에 한번 끊었어야 했는데.... 이번에도 PR이 너무 길어졌네요................ 다음엔 꼭 신경쓰겠습니다... 😭

1. 라이브러리 설치와 설정

• axios 를 설치하고 기본 instance를 추가했습니다 (5f7b8c3)

  const axiosInstance = axios.create({
    baseURL: '/',
  });

• date utility library인 date-fns를 설치했습니다. (날짜 포맷팅용...) (react-datepicker라이브러리의 dependency로 되어 있길래 동일한 버전으로 설치했어요.) (d3cdfb8)

2. msw 설정

2-1 msw 오류 수정 🥹

아래 두 문제가 있었고 수정했습니다.

• msw가 랜덤하게 실행되는 (워커는 실행되지만 랜덤하게 모킹되는) 문제 (
• worker.start()가 실행은 되지만 종료되지 않는 문제

정확한 원인인지는 모르겠지만,
첫번째 문제는 worker.start() 함수가 종료되기 전에 랜더링이 되는 경우가 종종 생기면서 랜덤하게 발생한 문제였던 것 같고
두번째 문제는 (정확한 이유는 잘 모르겠지만...) worker import가 제대로 안되는 것이 원인이었던 것 같습니다.

공식 문서를 참고해서 (https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking) worker가 완전히 시작한 뒤에 랜더링이 시작하도록 하고, worker도 worker 시작 전에 await으로 완전히 import되는 것을 기다리도록 했습니다.

worker 시작을 기다리고 랜더링하는 탓에 최초 랜더링 시간이 좀 늦어지긴 했는데, 개발 환경이 아닌 경우에는 (아마도) 문제 없을 것 같지만,,,, 만약에 나중에 영향이 있다면 주석 처리해야 할 듯 합니다 🥲

📍 2-2 모킹한 API를 사용하는 요청 헤더 설정

Mock API와 실제 API를 구분하는 방법이 여러 방식이 있을 것 같은데요.

• 요청 URL로 구분하기 -> axiosInstance로 구분하기
• 요청 헤더로 구분하기

이 2가지 방법을 생각을 해봤는데,
첫번째 방식인 다른 baseUrl을 가진 axiosInstance를 2개 관리하는 것이 개인적으로는 좀 번거로운 느낌이 들었었거든요.
그래서

axios 요청에 임의의 약속된 헤더를 함께 넣어서 (`X-Mock-Request`)
해당 요청에 이 헤더가 있다면 msw로 모킹한 api를 사용하고
헤더가 없는 경우에는 실제 서버로 요청을 보내는 방식

으로 한번 설정을 해 보았습니다.......

axiosInstance
  .get(`/api/v1/expenses?meetId=${meetId}`, {
    useMock: true, // 1️⃣ 이런 설정과 함께 요청을 보내면 (실제 서버에 요청을 보낼땐 제외하면 됨)
  })

----------------------

/** useMock 설정이 true인 경우에는 X-Mock-Request 헤더를 추가해서 모킹한 API를 사용할 수 있게 하는 interceptor */
axiosInstance.interceptors.request.use((config) => {
  const updatedConfig = { ...config };

  // 2️⃣ axios interceptor에서 useMock 설정을 확인해서 'X-Mock-Request' 헤더를 붙여줍니다.
  if (config.useMock) {
    updatedConfig.headers = AxiosHeaders.from({
      ...updatedConfig.headers,
      'X-Mock-Request': 'true',
    });
  }

  return updatedConfig;
});

----------------------

// 3️⃣ msw 핸들러에서는 아래와 같이 모킹 여부를 확인해주면 됩니다!
// 이 과정이 좀 번거로워서 https://mswjs.io/docs/recipes/higher-order-resolver/ 이런 방법을 써보려고 했는데
// 타입 에러가 자꾸 나서... 🥹 당장은 포기했습니다....................
const isMocked = request.headers.get('X-Mock-Request');
if (!isMocked || isMocked !== 'true') return passthrough();

⭐️⭐️ 그냥 임의로 설정한거고 수정하는 것이 어렵지 않아서
더 선호하는 방식, 혹은 다른 프로젝트에서 하셨던 방식이 좋았다면 알려주시면 정말 감사하겠습니다!!!!!!!!!!! ⭐️⭐️

3. 명칭 정리 (?)

백엔드에서 정의해둔 DTO를 참고해서 명칭을 정리했습니다.

• 지출 : bill -> expense
• 참여자: participant -> member

4. 지출 내역 확인 페이지 UI 구현

• 기본 페이지 구현
• 지출 총 합을 구하는 유틸함수 / 각 참여자에게 지출을 분배하는 유틸함수
• 참여자 목록 펼치는 UI

이번에 변경사항이 충분히 많아서 아직 헤더와 레이아웃은 적용하지 않았습니다! (다음 PR에 작업해서 올릴게요 🥹)

✅ 테스트 리스트

각 참여자에게 지출을 분배하는 유틸함수 - distributeAmount

📸 스크린샷

👻 리뷰 요구사항

• 폴더 구조 규칙을 잘 지킨건지...
• 작업내용 2-2 부분에 대한 의견이 궁금합니닷...