[조인성] sprint6 #215
[조인성] sprint6 #215
Conversation
- 이미지 파일 추가 - active 스타일 추가
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
인성님 6번째 미션 작업 고생하셨습니다!
가독성 좋게 잘 정리해주셔서 인성님의 의도를 잘 알 수 있는 코드였습니다.
동작상 몇가지 부분만 수정해주시면 더 좋을 것 같아요!
다음 미션도 화이팅입니다.
| <p>이미지 등록</p> | ||
| <input | ||
| type="file" | ||
| accept="image/*" |
There was a problem hiding this comment.
💊 제안
input의 accept 속성은 유저가 어떤 파일을 올려야하는지에 대한 힌트를 제공하는 속성입니다.
유저는 파일 업로드시 accept의 명시된 확장자 이외의 파일도 올릴 수 있으므로
실제 upload 함수에서 한번더 확장자를 검사해주시는 것이 좋습니다.
(사용자가 업로드창에서 옵션을 열어 확장자를 바꾸면 아래처럼 보입니다)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/accept
| <> | ||
| <label>상품 이미지</label> | ||
| <div css={S.imageContainerStyle}> | ||
| <div css={S.formImageBoxStyle} onClick={onClick}> |
There was a problem hiding this comment.
💊 제안
label 태그가 더 적절합니다~
| <div css={S.formImageBoxStyle} onClick={onClick}> | |
| <label css={S.formImageBoxStyle}> // 클릭시 내부의 input이 선택된것과 동일함. |
| <label>상품 소개</label> | ||
| <textarea |
There was a problem hiding this comment.
💊 제안
label 태그 사용하신 것 좋아요! input과 연결도 시켜주시면 더 좋을 것 같아요.
| <label>상품 소개</label> | |
| <textarea | |
| <label htmlFor="id">상품 소개</label> | |
| <textarea | |
| id="id" |
| <FormInputs | ||
| name={name} |
There was a problem hiding this comment.
❗️ 수정요청
| <FormInputs | |
| name={name} | |
| <FormInputs | |
| name={name} |
| if (e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| const trimmed = tagInput.trim(); | ||
| if (!trimmed || tags.includes(trimmed)) return; |
There was a problem hiding this comment.
💊 제안
중복되는 태그가 생성되지 않도록 해주신 점 좋습니다!
다만 이렇게 되면 사용자가 해당 동작에 대한 피드백을 받지 못하므로, alert, toast, input error 와 같은 방식으로 피드백을 주시면 더 좋을 것 같아요.
| }; | ||
|
|
||
| const handleTagKeyDown = (e) => { | ||
| if (e.key === 'Enter') { |
There was a problem hiding this comment.
❗️ 수정요청
한글로된 태그를 생성할 때 두번 입력이 발생하는 것 같은 현상이 있습니다. 이는 자모음으로 이루어진 한글을 입력중에 발생하는 현상입니다~
배포사이트에서 한글로 태그를 생성해보시고, 위의 동작을 고쳐보세요~
| const isFormValid = | ||
| imagePreview && |
There was a problem hiding this comment.
💊 제안
요구사항에서 이미지는 필수값이 아니라서 해당 조건에서 빼셔도될 것 같아요!
| const isFormValid = | |
| imagePreview && | |
| const isFormValid = |
2 participants
요구사항
sprint-misson-insung.netlify.app
기본
심화
주요 변경사항
스크린샷
멘토에게