[정부광] 스프린트미션 5 #51
Open
[정부광] 스프린트미션 5 #51
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
rl0425
approved these changes
Jun 2, 2025
Collaborator
rl0425
left a comment
rl0425
left a comment
There was a problem hiding this comment.
고생하셨습니다. 리뷰에 관한 내용은 멘토링 시간에 더 자세하게 말씀드리겠습니다.
| } | ||
|
|
||
| .footer-right img { | ||
| vertical-align: middle; |
Collaborator
There was a problem hiding this comment.
vertical-align은 인라인 요소에만 작동하기 때문에, 바깥 박스에서 align-items: center 를 사용하시는 것을 추천드립니다.
.footer-right {
display: flex;
gap: 1.2rem;
align-items: center;
}| const emailValue = elInputUserEmail.value.trim(); | ||
|
|
||
| if (emailValue === "") { | ||
| elInputUserEmail.style.outline = "2px solid #f74747"; |
Collaborator
There was a problem hiding this comment.
스타일이 하드코딩된 경우가 많은데, 이렇게 되면 현재 코드처럼 중복되는 코드가 많아지고, 이게 어떠한 상태를 나타내는건지 추후에 한눈에 파악하기 어렵습니다. 또한, 성능적으로도 여러개의 스타일을 삽입하실 경우에는 CSS 클래스를 사용하시는 것을 추천드립니다.
// 현재
elInputUserEmail.style.outline = "2px solid #f74747";
->
elInputUserEmail.classList.add('error');
elInputUserEmail.classList.remove('success');| elInputUserPassword.parentElement.style.border = "2px solid #f74747"; | ||
| elPasswordEmptyError.style.display = "block"; | ||
| elPasswordError.style.display = "none"; | ||
| } else if (passwordValue.length < 8) { |
Collaborator
There was a problem hiding this comment.
현재는 패스워드의 제한이 8이지만, 추후에 언제든지 바뀔 수 있는 매직넘버이기 때문에 변수로 선언후에 사용하시는 것을 추천드립니다.
passwordValue.length < 8
->
const MIN_PASSWORD_LENGTH = 8;
if (passwordValue.length < MIN_PASSWORD_LENGTH)|
|
||
| <form action="/signup" method="post" class="sign-form"> | ||
| <div class="email"> | ||
| <label for="user-email" class="user-email">이메일</label> |
Collaborator
There was a problem hiding this comment.
label의 for 속성 연결이 누락되어있습니다. 아래와 같이 바꾸시면 될 것 같습니다.
<label for="user-nick-name" class="user-nick-name">닉네임</label>
<input id="user-nick-name" class="nick-name-input" type="text" name="user-nick-name" ... />|
|
||
| <div class="footer-right"> | ||
| <a href="https://www.facebook.com/codeit.kr/?locale=ko_KR" target="_blank"> | ||
| <img class="facebook" src="./images/home/facebook.svg" alt="페이스북" ></img> |
Collaborator
There was a problem hiding this comment.
해당 이미지 태그는, 안쪽에 내용이 없으시면 열린태그에서 바로 닫으셔도 무방합니다.
<img class="facebook" src="./images/home/facebook.svg" alt="페이스북" ></img>
<img class="facebook" src="./images/home/facebook.svg" alt="페이스북" />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
요구사항
기본 요구사항
공통
중고마켓 페이지
심화 요구사항
공통
중고마켓 페이지
중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품
Desktop : 4열
Tablet : 2열
Mobile : 1열
전체 상품
Desktop : 5열
Tablet : 3열
Mobile : 2열
반응형에 따른 페이지 네이션 기능을 구현합니다.
주요 변경사항
스크린샷
멘토에게