[Feat] 과외방 목록

[ahnsui]

🔥 Issues

#19

✅ What to do

• 과외방 개설
• 과외방 삭제
• 과외방 리스트 렌더링
• context로 관리

📄 Description

-.Clipchamp.mp4

🤔 Considerations

• 토글 버튼 UI를 만들어본 적이 없어 만드는데 시간이 오래 걸렸다.
  -> input(checkbox)와 label을 이용하여 만들었다.
• 과외방 개설 페이지가 과외방 리스트 페이지와 부모 자식 관계가 아니어서 props로 넘겨주지 못할 것 같아 useContext와 children을 사용하였다.
  -> context 폴더에 RoomContext 파일을 만들어 따로 생성하였다.
  -> children: 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이다. 이를 Provider에 사용하여 라우터 내의 모든 하위 컴포넌트에 적용할 수 있도록 하였다.

🛠️ Improvements to Make

코드의 가독성이 떨어지고 지저분하여 한번 정리를 하면 좋을 것 같다.
이후 다른 페이지에서 같은 state를 사용하면 useContext를 어떻게 수정하면 좋을 지 상의 후 보완해야 할 것 같다.

👀 References

https://velog.io/@jjburi/TypeScript-useState%EC%97%90%EC%84%9C-type-%EC%A7%80%EC%A0%95
https://d0u0b.tistory.com/entry/HTML-CSS-%ED%86%A0%EA%B8%80-%EC%8A%A4%EC%9C%84%EC%B9%98-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-Toggle-Checkbox
https://velog.io/@ye-ji/React%EC%97%90%EC%84%9C-Children%EC%9D%84-JS%EC%99%80-TS%EC%97%90%EC%84%9C-%EA%B0%81%EA%B0%81-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
https://velog.io/@ye-ji/React%EC%97%90%EC%84%9C-Children%EC%9D%84-JS%EC%99%80-TS%EC%97%90%EC%84%9C-%EA%B0%81%EA%B0%81-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95