[GGFE-43] 로그인 페이지 & 버튼 스타일 #812
Conversation
components/Layout/Layout.tsx
Outdated
| <StyledButton onClick={onClickMatch} width={'8.2rem'}> | ||
| Play | ||
| </StyledButton> |
There was a problem hiding this comment.
매치 버튼이 figma 디자인에 비해 좀 길어서 느낌이 달라진 것 같습니다...ㅎㅎ 일부러 늘리신게 아니라면 너비를 5.563rem 정도로 줄이면 비슷해질 듯 한데 어떤가요?!
pages/login.tsx
Outdated
| @@ -1,3 +1,6 @@ | |||
| import StyledButton from 'components/StyledButton'; | |||
| import { fill } from 'cypress/types/lodash'; | |||
There was a problem hiding this comment.
Image에 쓰인 fill이 잘못 import 된 것 같습니다! 맞다면 삭제해주세용
There was a problem hiding this comment.
이것도 잘못쓰인게 맞네요. 삭제할게요👍🏻
| width: 12rem; | ||
| min-width: 110px; | ||
| height: 1.8rem; | ||
| min-height: 45px; |
There was a problem hiding this comment.
이렇게 rem과 px 단위를 섞어 쓰실 때 단위 결정 기준(?)이 있나요..?
There was a problem hiding this comment.
rem은 폰트 크기에 비례해서 크기가 정해지고 px은 절대적인 크기로 알고 있어서
width, height을 쓸 때는 상대적인 크기를 설정하고 싶었고 최솟값은 절대크기로 정하고 싶어서 썼어요.
| export default function StyledButton({ | ||
| onClick, | ||
| children, | ||
| width, | ||
| }: StyledButtonProps) { | ||
| const buttonWidth = { | ||
| width: width || 'auto', | ||
| }; | ||
| return ( | ||
| <button className={styles.button} onClick={onClick}> | ||
| <div className={styles.container} style={buttonWidth}> | ||
| {children} | ||
| </div> | ||
| </button> | ||
| ); | ||
| } |
There was a problem hiding this comment.
뭔가 width를 인자로 받아야 해서 라이브러리 사용하실 줄 알았는데 style 속성에 직접 넣어주는 방법이 있었네요.... 👍👍
There was a problem hiding this comment.
더 좋은 방법이 있을까요..? ㅋㅋㅋ 저도 고민하다가 그냥 style 속성으로 직접 넣어줬어요
There was a problem hiding this comment.
저는 저희 mui 설치하면서 emotion도 같이 설치가 되어 있길래 이런 방식처럼 CSS-in-JS 라이브러리 써서 styled-component로 만드는 방법밖에 없다고 생각했었거든요. 생각해보니까 직접 구현할 수 있고 구현 방법도 그렇게 복잡하지 않은데 굳이 버튼에만 라이브러리 쓰는것도 좀 어색해보이는 것 같아서 오히려 style 속성으로 넣어주는 방법이 좋은 것 같습니다!!!!!! 😆
| </div> | ||
| <div className={styles.logoContainer}> | ||
| <div className={styles.logo1}> | ||
| <Image src='/image/Playwith_logo.png' alt='Playwith_logo' fill /> |
There was a problem hiding this comment.
실제로 이미지 맞게 잘 뜨는데 여기 그냥 fill만 써도 상관없는건가요?? 공식문서에서는 fill={true} 이런식으로 사용하길래 궁금해서 질문 남깁니다!
There was a problem hiding this comment.
원래 layout=fill 처럼 썼었던 것 같은데 업데이트되면서 적용이 안되길래 fill로 썼어요. 지금도 적용되는걸로 보이는데 공식문서는 true를 써주나보네요. 저도 공식문서를 좀 더 잘 읽어보겠습니다ㅋㅋ
There was a problem hiding this comment.
로그인 버튼에는 원래 hovering했을 때 효과주게 했었는데 모바일에서는 두번눌러야한다고해서 지금은 빼놓은 상태에요
There was a problem hiding this comment.
fill은 그냥 써도 적용되나 보군요!
로그인 버튼 모바일에서 hovering 때문에 두 번 누른다고 설명해주셨던거 같은데 제가 까먹었네요 ㅠ
설명 감사합니다!
📌 개요
💻 작업사항
✅ 변경로직