[FE] setting: styles 관련 초기 세팅 #28
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
zelkovaria
requested review from
toychip,
chysis,
onegood07 and
bianbbc87
as code owners
chysis
reviewed
Feb 4, 2025
src/frontend/src/main.tsx
Outdated
Comment on lines
23
to
30
| <ThemeProvider theme={theme}> | ||
| <GlobalStyle /> | ||
| <StrictMode> | ||
| <QueryClientProvider client={queryClient}> | ||
| <App /> | ||
| </QueryClientProvider> | ||
| </StrictMode> | ||
| </ThemeProvider>, |
There was a problem hiding this comment.
StrictMode가 최상단에 있고, 그 밑에 ThemeProvider > GlobalStyle, QueryClientProvider를 두는 것은 어떤가요?
There was a problem hiding this comment.
찾아보니 전체 컴포넌트 트리를 StrictMode로 감싸는 패턴이 더 일반적인 것 같아서 좋아요! 반영해두겠습니당!!
| import { createGlobalStyle } from 'styled-components'; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` | ||
| @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); |
There was a problem hiding this comment.
웹 폰트를 index.html이 아닌 GlobalStyle에서 받게 된 이유가 있을까요?
styled-component는 런타임에 CSSOM을 사용해서 스타일을 관리하는데, @import 구문은 CSSOM에서 다루기 어려운 방식으로 처리한다고 하네요.
import를 제대로 못 할 수도 있고, layout shift가 발생할 수 있어 최적화 관점에서도 문제가 있을 것 같아요.
index.html에서 link 태그로 다운로드 하는 방법을 제안해봅니다!
There was a problem hiding this comment.
emotion을 사용할 때는 해당 이슈가 없어서 똑같이 해두고 확인을 못 한 것 같아요 😅 해당 부분도 반영해둘게요!
There was a problem hiding this comment.
emotion에서는 문제가 없군요! 수정 사항 확인했습니다 :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
이슈번호
요약(개요)
작업 내용
집중해서 리뷰해야 하는 부분
max-width나 min-width를 정해두면 좋을 것 같은데 우선 임시로 해놨어요..!! 해당 부분은 개발하면서 이야기하거나 조만간 이야기 해봐도 좋을 것 같아요 :D
기타 전달 사항 및 참고 자료(선택)
Typography 관련 컴포넌트 사용 예시예요! 해당 내용을 포함한 코드 설명 등 자세한 이야기는 노션에 공유해둘게요 🚀