refactor: 누적 혼잡도 시각화 컴포넌트의 재사용성을 높인다 #232
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
- 리액트 컴파운드 패턴을 사용하는 컴포넌트
- useSyncExternalStore 사용시 독립적인 컴포넌트들이 상태 공유를 하는 문제가 있어 Context api를 사용하는 방식으로 수정함.
|
🚀storybook: https://storybook.carffe.in/ |
|
🚀storybook: https://storybook.carffe.in/ |
|
🚀storybook: https://storybook.carffe.in/ |
feb-dain
reviewed
Jul 29, 2023
Comment on lines
23
to
25
| const rowAlignGraphCss = css` | ||
| align-items: flex-end; | ||
| `; |
| return ( | ||
| <FlexBox | ||
| tag="li" | ||
| nowrap={true} |
There was a problem hiding this comment.
Suggested change
| nowrap={true} | |
| nowrap |
True면 True를 넘겨주지 않아도 됩니다!
| ${({ align, ratio }) => | ||
| align === 'column' | ||
| ? ` | ||
| width: ${ratio === -1 ? '26rem' : `calc(26rem * ${ratio} / 100)`}; |
| import { GraphContext, type GraphProps } from '.'; | ||
|
|
||
| interface BarContainerProps extends GraphProps { | ||
| renderBar: (hour: number, ratio: number) => JSX.Element; |
There was a problem hiding this comment.
여기선 ReactNode가 아니라 JSX.Element 쓰고 있군요🤔 컨벤션이 필요해보입니다
| return ( | ||
| <FlexBox | ||
| direction={align} | ||
| nowrap={true} |
| return ( | ||
| <Button | ||
| size="sm" | ||
| outlined={true} |
| const { selectedDay, setSelectedDay } = useContext(GraphContext); | ||
|
|
||
| const handleSelectDay = (day: string) => { | ||
| if (isEnglishDays(day)) setSelectedDay(day); |
There was a problem hiding this comment.
확장성/명확성을 위해서 여기 중괄호로 감쌀까요?!
- 나중에 eslint 설정도 해놓겠습니다
| <Graph.DayMenus | ||
| statistics={statistics} | ||
| menus={menus} | ||
| renderMenuSelectButton={(menu: string) => ( |
There was a problem hiding this comment.
Menu EnglishDays/KoreanDays 배열 중 하나 맞나요?? 타입이 string[], string 으로 되어 있는 것 같은데 이유가 뭔가요?😮
There was a problem hiding this comment.
확장성을 고려해서 타입을 지정하지 않고 string[]로 두었습니다
|
🚀storybook: https://storybook.carffe.in/ |
|
🚀storybook: https://storybook.carffe.in/ |
feb-dain
approved these changes
Jul 31, 2023
|
🚀storybook: https://storybook.carffe.in/ |
|
🚀storybook: https://storybook.carffe.in/ |
|
🚀storybook: https://storybook.carffe.in/ |
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.
📄 Summary
🕰️ Actual Time of Completion
🙋🏻 More
TODO
close #230