feat(*): GlobalStyles(Reset) 및 RootLayout 적용

[semnil5202]

🎉 변경 사항

• 화면 사이즈를 조정하는 RootLayout 및 reset.css를 적용하는 GlobalStyles를 구현했습니다.
• RootLayout은 maxWidth: 600px로 두었고 margin: 0 auto 적용하여 가운데 정렬 해두었습니다.
• reset.css는 아래 참조한 링크의 2024 reset.css를 베이스로 적용했습니다. 추가로 필요한 스타일이 있다고 생각되시면 리뷰 남겨주세요~~

의논 필요한 부분

[의논할 내용 요약]

• import reset.css vs GlobalStyles
• GlobalStyles를 <Global />이 아닌 injectGlobal로 적용

reset.css를 적용하는 방법이 css 파일을 import 하는 방법과, Emotion GlobalStyles를 활용하는 방법이 있는데, 결과적으로 두 방법은 거의 동일한 결과를 낸다고 생각합니다. 다만, GlobalStyles로 가져가는 것이 저희가 선정한 아키텍처에서 더 적합하다고 판단 (Web Domains의 Providers에 위치하도록 한다면) 하여 GlobalStyles로 두었습니다.

추가로 보통 사용하는 <Global styles={} /> 방식이 아닌, injectGlobal을 사용했습니다. 조금 더 최신의 방법이고 컴포넌트 렌더링 주기 바깥에 적용할 수 있어 font 리렌더링 이슈를 해결하는 것으로 보이는군요. (제 생각입니다.) 다만, 이로 인해서 @emotion/css 의존성이 추가로 설치됐습니다. 이 부분에 대해서 추가로 의견 부탁드립니다.

🔗 링크

• 2024 Reset CSS
• Emotion InjectGlobal

🙏 작업물 스크린샷

[semnil5202]

docs 라벨이 왜 자꾸 붙지..?

[semnil5202]

현재 상황 요약

• 18일 목 종오님과 페어로 슬랙에 남겼던 Emotion 이슈를 분석함

• InjectGlobals 라는 Emotion의 새로운 글로벌 스타일 정의 방식을 사용
• 예전에 정호님이 겪었던 스타일 적용 한 박자 느림 이슈 발생 (위 슬랙 쓰레드에서 확인 가능합니다.)
• 또한 Emotion css prop을 사용하는 곳 바로 위에 <div> 태그가 꼭 위치해야함
• 따라서 이전 방식인 <Global styles /> 방식 사용하기로 결정 + @emtion/css 제거
• 이슈 해결 후 종오넴이 push + (reset.css 고려 중)

@Doeunnkimm @LeeJeongHooo

[Doeunnkimm]

GlobalStyles로 가져가는 것이 저희가 선정한 아키텍처에서 더 적합하다고 판단

오 ^ 이부분 자세히 무슨 내용인지 궁금해서.. 나중에 여쭤볼게영 고우 ~