---
# System prepended metadata

title: 6/17 금

---

# 6/17 금

## PR

- [ ] 다 작성하시면 여기에 적어주세요~!

## 구현 의도

### 이슈 데이터 및 필터 옵션 관리

![](https://i.imgur.com/5jqVzbh.gif)


- DefaultPage 전반에서 이슈 데이터와 필터 옵션이 공유되어야하므로 처음엔 context 사용을 생각했지만 토의한 결과 서버에 요청을 보내기 위해 사용하는 url이 이미 좋은 전역 상태라고 생각하여 url을 바탕으로 상태를 관리했습니다. 다만, 이후에는 데이터 캐싱, 최신화 등의 문제를 해결하기 위해 react-query를 사용해볼 수 있을 것 같습니다. 

### 다크모드

- 이번 프로젝트에서 ThemeProvider 를 왜 쓰는지? 에 대해서 좀 고민해보고, Dark mode 를 직접 구현해보고 써봐야 겠다는 생각이 들어서 미션 요구사항에는 없지만 앨런과 저의 기술적인 도전으로 시도해보았습니다.
- theme 에 의한 color 를 선정을 최대한 빨리해야 나중에 덜 힘들 것 같아서 이번 PR 에 포함해보았습니다!
- theme 을 Header Context 에 존재하는 state 를 통해 설정하기 위해서 index 에서 먼저 감싼 이후 App 에서 사용하고 있는데, index 에서 render 전에 감싸도 괜찮은지? 무슨 차이가 있을지가 궁금했습니다. react-router-dom 에서의 예제에서도 root.render 에서 먼저 감싸서 사용하더라구요.

```tsx
root.render(
  <Router>
    <HeaderProvider>
      <App />
    </HeaderProvider>
  </Router>,
);
```
![](https://i.imgur.com/o0X888L.gif)

### 이슈 생성 페이지

- 현재 제목, 본문에 대한 내용만 뽑아내서 msw 를 활용한 mocking request 를 하여 테스트해보았습니다.

![](https://i.imgur.com/EongGuE.gif)
