-
Notifications
You must be signed in to change notification settings - Fork 9
[조은서] 멋쟁이 사자처럼 3번째 과제 제출 #7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 조은서
Are you sure you want to change the base?
Conversation
update Readme
devHudi
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
전체적으로 컴포넌트 설계가 깔끔한 것 같아 놀랐습니다.
몇가지 수정하면 좋을 만한 점을 코멘트 달아드렸어요. 반영해주셔도 좋고, 참고만 해주셔도 좋습니다 😁
| align-items: center; | ||
| cursor: pointer; | ||
| text-align: center; | ||
| color: ${(props) => (props.fColor ? props.fColor : "black")}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
단체 톡방에 말씀드린대로 short circuit evaluation 을 통해 축약해볼 수 있겠네요 🙂
| const StyledButton = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| text-align: center; | ||
| color: ${(props) => (props.fColor ? props.fColor : "black")}; | ||
| font-size: ${(props) => props.fSize}; | ||
| height: ${(props) => props.btnHeight}; | ||
| border: 1px solid transparent; | ||
| border-color: ${(props) => props.borderColor}; | ||
| border-radius: ${(props) => props.borderRadius}; | ||
| background-color: ${(props) => props.bgColor}; | ||
| padding: ${(props) => props.btnPadding}; | ||
| margin: ${(props) => props.btnMargin}; | ||
| `; | ||
|
|
||
| const Button = (props) => { | ||
| return ( | ||
| <StyledButton | ||
| fColor={props.fColor} | ||
| fSize={props.fSize} | ||
| btnHeight={props.btnHeight} | ||
| borderColor={props.borderColor} | ||
| borderRadius={props.borderRadius} | ||
| bgColor={props.bgColor} | ||
| btnPadding={props.btnPadding} | ||
| btnMargin={props.btnMargin} | ||
| > | ||
| {props.children} | ||
| </StyledButton> | ||
| ); | ||
| }; | ||
|
|
||
| export default Button; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const StyledButton = styled.div` | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| text-align: center; | |
| color: ${(props) => (props.fColor ? props.fColor : "black")}; | |
| font-size: ${(props) => props.fSize}; | |
| height: ${(props) => props.btnHeight}; | |
| border: 1px solid transparent; | |
| border-color: ${(props) => props.borderColor}; | |
| border-radius: ${(props) => props.borderRadius}; | |
| background-color: ${(props) => props.bgColor}; | |
| padding: ${(props) => props.btnPadding}; | |
| margin: ${(props) => props.btnMargin}; | |
| `; | |
| const Button = (props) => { | |
| return ( | |
| <StyledButton | |
| fColor={props.fColor} | |
| fSize={props.fSize} | |
| btnHeight={props.btnHeight} | |
| borderColor={props.borderColor} | |
| borderRadius={props.borderRadius} | |
| bgColor={props.bgColor} | |
| btnPadding={props.btnPadding} | |
| btnMargin={props.btnMargin} | |
| > | |
| {props.children} | |
| </StyledButton> | |
| ); | |
| }; | |
| export default Button; | |
| const Button = styled.div` | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| text-align: center; | |
| color: ${(props) => (props.fColor ? props.fColor : "black")}; | |
| font-size: ${(props) => props.fSize}; | |
| height: ${(props) => props.btnHeight}; | |
| border: 1px solid transparent; | |
| border-color: ${(props) => props.borderColor}; | |
| border-radius: ${(props) => props.borderRadius}; | |
| background-color: ${(props) => props.bgColor}; | |
| padding: ${(props) => props.btnPadding}; | |
| margin: ${(props) => props.btnMargin}; | |
| `; | |
| export default Button; |
Button 컴포넌트가 props 를 그대로 StyledButton 에 전달하는 역할만 수행하고 있는데요, 위와 같이 축약해볼 수 있을 것 같아요. 😎
| const StyledCardContainer = styled.div` | ||
| max-width: 1300px; | ||
| height: 1250px; | ||
| border: 0px; | ||
| background-color: #f9f9f9; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| const CardContainer = (props) => { | ||
| return <StyledCardContainer>{props.children}</StyledCardContainer>; | ||
| }; | ||
|
|
||
| export default CardContainer; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
위와 마찬가지로 props 를 그대로 전달하는 컴포넌트는 축약해볼 수 있을 것 같아요. 나머지 컴포넌트들도 포함해서요! 😄
| const GlobalStyle = createGlobalStyle` | ||
| *{ | ||
| margin: 0; | ||
| font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; | ||
| } | ||
| `; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍👍
| const Header = (props) => { | ||
| return ( | ||
| <HeaderWrapper> | ||
| <HeaderContainer> | ||
| <LogoWrapper> | ||
| <LogoImage> | ||
| <HiOutlineCamera size="24" color="white" /> | ||
| </LogoImage> | ||
| <LogoText>Album</LogoText> | ||
| </LogoWrapper> | ||
| <HeaderButtonWrapper> | ||
| <HiOutlineMenu size="30" color="rgba(255,255,255,.5)" /> | ||
| </HeaderButtonWrapper> | ||
| </HeaderContainer> | ||
| </HeaderWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
구조가 정말 깔끔하네요. 놀랐습니다 🙊
| fcolor={props.color} | ||
| fSize={props.fontSize} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다른 개발자가 fcolor 와 fSize props의 네이밍을 보고 바로 font 라는 단어를 유추할 수 있을까요? 좋은 네이밍은 무엇일까요? 어떻게 하면 좀 더 명확하게 네이밍하고 커뮤니케이션 비용을 줄일 수 있을까요? 🤔
Uh oh!
There was an error while loading. Please reload this page.