This repository has been archived by the owner on Sep 19, 2021. It is now read-only.
[3주차] 정시원 미션 제출합니다 #8
Open
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
| `; | ||
|
|
||
| const Title = styled.div` |
There was a problem hiding this comment.
const Title=styled.h1`
과 같이 semantic tag로 쓰면 더 좋을 거 같아요👍
Comment on lines
+39
to
+54
| return <Wrapper> | ||
| <Title>로그인</Title> | ||
| <Row> | ||
| <Label>EMAIL</Label> | ||
| <Input name="email" onChange={handleInputChange} /> | ||
| </Row> | ||
| <Row> | ||
| <Label>PASSWORD</Label> | ||
| <Input name="password" type="password" onChange={handleInputChange} /> | ||
| </Row> | ||
| <Row> | ||
| <div style={{ marginRight: 'auto' }}></div> | ||
| <Button onClick={handleSubmit}>로그인</Button> | ||
| </Row> | ||
|
|
||
| </Wrapper>; |
There was a problem hiding this comment.
- Email과 Password 넣는 칸을 Input으로 묶어서 하나의 컴포넌트 안에 넣는 건 어떨까요?
<InputWrapper> <Row> <Label>EMAIL</Label> <Input name="email" onChange={handleInputChange} /> </Row> <Row> <Label>PASSWORD</Label> <Input name="password" type="password" onChange={handleInputChange} /> </Row> </InputWrapper> <SubmitButton onClick={handleSubmit}>로그인</SubmitButton>
이런식으로요!!
그렇게 되면
<div style={{ marginRight: 'auto' }}></div>
따로 이 코드를 안 넣어도 되고 알아보기도 좋을 거 같아요! - 핸들링 네이밍 잘하셨네요!
Comment on lines
+57
to
+95
| const Row = styled.div` | ||
| margin-bottom: 10px; | ||
| margin-top: 20px; | ||
| font-size: 15px; | ||
| display: flex; | ||
| ` | ||
| const Label = styled.div` | ||
| margin-right: auto; | ||
| ` | ||
| const Input = styled.input` | ||
| width: 75%; | ||
| border: 1px solid grey; | ||
| padding: 5px; | ||
| outline: none; | ||
| ` | ||
|
|
||
| const Wrapper = styled.div` | ||
| width: 100%; | ||
| min-height: 30rem; | ||
| background-color: white; | ||
| font-size: 18px; | ||
| padding: 3rem 4rem; | ||
| `; | ||
|
|
||
| const Title = styled.div` | ||
| font-size: 25px; | ||
| ` | ||
|
|
||
| const Button = styled.button` | ||
| outline:none; | ||
| background-color:#d6d6d6; | ||
| border-radius:3px; | ||
| border:none; | ||
|
|
||
| width: 150px; | ||
| margin-left: auto; | ||
| font-size: 15px; | ||
| padding: 5px; | ||
| ` |
There was a problem hiding this comment.
, <Title>, 순으로 컴포넌트가 나타나니까 컴포넌트 정의를 할 때도 먼저 나타나는 컴포넌트 순으로 정리하면 나중에 수정할 때 찾기 더 용이할 거 같아요!
| const Wrapper = styled.div` | ||
| width: 100%; | ||
| min-height: 30rem; | ||
| background-color: white; | ||
| font-size: 18px; | ||
| padding: 3rem 4rem; | ||
| `; | ||
|
|
||
| const Title = styled.div` |
There was a problem hiding this comment.
글씨에 관한 스타일링은 p태그를 써주면 됩니다!
const Title=styled.p
이렇게요!
| const handleVote = (id) => { | ||
| sendVoteRequest(id).then(()=>{ | ||
| getData().then((data)=> { | ||
| console.log('hhh') |
| import axios from 'axios'; | ||
|
|
||
| export default function Candidate({ rank, name, voteCount, _id, handleVote}) { | ||
| console.log('id: ', _id) |
| if (validateInput(loginData)) { | ||
| axios.post(process.env.API_HOST + '/auth/signin', loginData). | ||
| then((response) => { | ||
| console.log(response.data) |
| </Row> | ||
| <Row> | ||
| <Label>PASSWORD</Label> | ||
| <Input name="password" type="password" onChange={handleInputChange} /> |
There was a problem hiding this comment.
type="password"
이 부분이 페이지에 반영이 안되고 있는거 같은데 확인해주세요!
puba5
reviewed
Sep 13, 2020
| ` | ||
|
|
||
| const VoteButton = styled.button` | ||
| background-color: navy; |
There was a problem hiding this comment.
navy라는 이름보다는 16진수를 사용한 색상표를 사용하시는 것이 좋을 것 같아요
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
늦은 제출 죄송합니다 ㅠㅠ
이번 미션은 난이도가 확실히 있어서 혼자 했으면 오래 고민했을 것 같은데, 일요일 개발자 스터디에서 많이 알려주셔서 수월하게 할 수 있었던 부분이 많아졌던 것 같습니다. 예외처리, 최적화도 어느정도 해보고 싶었는데 시간이 없어서 정말 기본적인 기능들만 구현하고 제출하게 되어서 아쉽네요 ㅠㅠ
이번 미션에서는 왠만해선 inline 스타일 태그를 쓰지 않고 작은 부분들까지도 다 styled-components로 작성해보려고 했습니다. 개발자 스터디 가서 제가 CSS가 많이 부족하구나 싶어서 따로 공부를 더 하고 만드는 연습을 해야겠다는 생각이 들었습니다.
https://react-vote-11th-pkperj7ox.now.sh/