[#126] [FEATURE] E#10-S#7 비밀번호 재설정 뷰 #128
Conversation
| `; | ||
|
|
||
| const StyledInput = styled.input` | ||
| width: 39.1rem; |
There was a problem hiding this comment.
이렇게 하나하나 너비를 지정하면 나중에 수정하기 힘들거에요 . . .
이 컴포넌트 자체 너비가 39.1rem이니까
StyledRoot에 39.1rem 주시고 하위 태그들에게 width: 100%; 주는 방식은 어떨까요?
There was a problem hiding this comment.
좋은 것 같습니다! 감사합니다.
궁금한 점이 하나 있는데 저렇게 설정하면 기기가 바뀌었을 때 사이즈는 어떻게 바꾸나용!?
There was a problem hiding this comment.
applyMediaQuery 함수 사용하시면 될 것 같아용!
${applyMediaQuery('mobile')} {
width: 25rem;
}이런 식으로 하셔도 되고
고정 값이 아닌 %로 주셔도됩니다!
There was a problem hiding this comment.
아 맞다맞다.. 기억났어요..!! 감사합니다...!
%로 주는 부분은.. 공부 조금 더 해볼게요.. 어떻게 계산하는지 몰라가지구...
| <StyledRoot> | ||
| <StyledTitleWrapper> | ||
| <h3>비밀번호를 잊어버리셨나요?</h3> | ||
| </StyledTitleWrapper> | ||
| <StyledExplain> | ||
| <h3>소담에 가입했던 이메일을 입력해주세요</h3> | ||
| <h3>비밀번호 재설정에 필요한 인증번호를 전송해드립니다</h3> | ||
| </StyledExplain> | ||
| <StyledInput placeholder="[email protected]" /> | ||
| <StyledWarningMessage>존재하지 않는 이메일입니다</StyledWarningMessage> | ||
| <StyledButton>인증번호 발송</StyledButton> | ||
| </StyledRoot> |
There was a problem hiding this comment.
나중에 입력받은 값을 전송해야 하니까 입력받는 영역을 form 태그로 감싸면 좋을 것 같아요.
StyledButton의 type을 submit으로 설정하면 엔터 또는 버튼 클릭시 onSubmit 이벤트가 발생할 거예요!
근데 이렇게 되면 form의 자식 요소를 모두 Styled로 지정하는 게 아니라, css selector를 사용하는 게 더 깔끔할 것 같아요.
<StyledForm>
<input placeholder="[email protected]" />
<p>존재하지 않는 이메일입니다</p>
<button type="submit">인증번호 발송</button>
</StyledForm>
There was a problem hiding this comment.
맞다맞다 시맨틱태그.. 감사합니다!!!
근데 혹시 이렇게 했을 때 자식 요소를 css selector로 하는 것이 더 깔끔한 이유가 있나요!?
There was a problem hiding this comment.
Styled 태그를 일일이 지정해주면 코드가 길어지기 때문이져.. ㅎㅎ 그리고 만약 중복되는 스타일이 있다면 하나의 Styled 안에서 selector를 사용하는 게 더 깔끔해요
| padding-left: 1.6rem; | ||
| color: ${theme.colors.black2}; | ||
|
|
||
| & > :placeholder { |
There was a problem hiding this comment.
placeholder는 &::placeholder 이렇게 설정합니당 (콜론 2개)
There was a problem hiding this comment.
ㅎㅎ... 감사해요...아직 갈길이 멀었네요 저는.. 희희
| } | ||
| `; | ||
|
|
||
| const StyledWarningMessage = styled.h3` |
There was a problem hiding this comment.
여기도 h3으로 되어있는데 워닝 메세지는 h 태그 대신에 p 태그를 사용하는 게 좋을 것 같아요!
There was a problem hiding this comment.
태그를 적재적소에 사용하자! 감사합니다!!
✨ 구현 기능 명세
비밀번호 재설정 뷰 퍼블리싱을 하였습니다!
🎁 PR Point
🕰 소요시간
😭 어려웠던 점