[6주차] 이정윤 / 로그인 및 회원가입 기능 구현 #80
Open
Conversation
This file contains hidden or 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
yezzan9
reviewed
May 22, 2025
Member
yezzan9
left a comment
yezzan9
left a comment
There was a problem hiding this comment.
6주차 과제도 수고하셨습니다 !!
전체적으로 기능 구현은 잘 되어있는데 스타일코드가 정돈되어있지 않거나, 컴포넌트 재사용면에서 조금 아쉬운 것 같아요🥺 해당부분 리팩토링 진행해주시면 더 좋은 코드가 될 것 같습니다 !!
Comment on lines
+35
to
+48
| <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff' }}> | ||
| <div className="form-box" style={{ minWidth: 480, maxWidth: 520, background: '#f3f3f3', padding: '40px 40px', borderRadius: '12px', boxShadow: '0 2px 12px #0001' }}> | ||
| <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '2.5rem', marginBottom: 40, letterSpacing: '-2px' }}>로그인</div> | ||
| <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 24 }}> | ||
| <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 22 }}> | ||
| <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}> | ||
| <label htmlFor="id" style={{ width: 90, fontWeight: 600, fontSize: '1.35rem', textAlign: 'right' }}>아이디</label> | ||
| <input id="id" type="text" value={id} onChange={e => setId(e.target.value)} required style={{ flex: 1, height: 40, borderRadius: 8, border: '2px solid #444', padding: '0 12px', fontSize: '1.2rem', background: '#fff' }} /> | ||
| </div> | ||
| <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}> | ||
| <label htmlFor="pw" style={{ width: 90, fontWeight: 600, fontSize: '1.35rem', textAlign: 'right' }}>비밀번호</label> | ||
| <input id="pw" type="password" value={pw} onChange={e => setPw(e.target.value)} required style={{ flex: 1, height: 40, borderRadius: 8, border: '2px solid #444', padding: '0 12px', fontSize: '1.2rem', background: '#fff' }} /> | ||
| </div> | ||
| </div> |
Member
There was a problem hiding this comment.
styled-components가 아닌 인라인 스타일로 구현한 이유가 있을까용?-?
인라인 스타일의 경우 가독성이 좋지 않아서 ㅠ,ㅠ styled-components를 사용하거나, 기존에 구현하신 것처럼 별도의 css파일로 분리하면 좋을 것 같아요!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
1. 무엇을?
axios를 활용해 json-server와 통신
회원가입 시 중복 아이디 확인 → 에러 메시지 표시
로그인 성공 시 localStorage에 사용자 정보 저장
로그인 유지 기능 추가 (localStorage 활용)
2. 스크린샷