[김승민] Sprint6 #121
[김승민] Sprint6 #121
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
승민님! 이번 미션도 뚝딱 해결하셨군요! 💯
공통 컴포넌트를 더 발전 시켜보시면 더욱 좋을 거 같습니다 :)
| <input | ||
| type="file" | ||
| accept=".png, .jpeg, .jpg" | ||
| style={{ display: "none" }} |
There was a problem hiding this comment.
hidden 속성을 쓰실 수 있어요! :)
<input hidden />| <CurrentS.File | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| setThumbnail(""); |
| title, | ||
| width = "100%", | ||
| height = "56px", | ||
| type = "text", |
There was a problem hiding this comment.
type은 input이 가지고 있는 고유 html 속성이죠..! 커스텀하여 props로 쓰기에는 부적절합니다.
function A({ as }) {
const Component = as;
return <Component />
}
<A as='textarea' />이런 식으로 쓰실 수 있어요!
There was a problem hiding this comment.
이름이 Input인데 textarea까지 사용되는 거는 좀 어색하네요!
input, textarea를 포괄할 수 있는 이름으로 바꾸면 좋을 거 같아요 :)
참고로 MUI에는 TextField가 있습니다!
| function handleKeyDown(e) { | ||
| if (e.key === "Enter" && currentTag.trim() !== "") { | ||
| e.preventDefault(); | ||
| setTags((prev) => [...prev, currentTag.trim()]); |
There was a problem hiding this comment.
태그가 중복되어 들어가는데, 이런 경우 Set을 써보셔도 좋습니다 :)
| /> | ||
| {type === "password" && <ShowPassword />} | ||
| <div className="input-container"> | ||
| <input |
There was a problem hiding this comment.
사실상 만드신 공통 컴포넌트랑 같은 UI죠!
만들어두신 컴포넌트를 조금 더 확장성 있게 만들고 활용해 봐도 좋을 거 같아요!
function Input({ suffix }) {
<div>
<input />
{suffix}
</div>
}이런식으로 아이콘과 로직은 밖에서 받아오는 방법이 있습니다 :)
| } | ||
|
|
||
| return ( | ||
| <ParentS.Label> |
There was a problem hiding this comment.
옆에 빈 공간을 눌러도 파일 업로더가 나옵니다🤣
| <span>이미지 등록</span> | ||
| </CurrentS.File> | ||
| {thumbnail && ( | ||
| <CurrentS.File |
There was a problem hiding this comment.
개인적으로, 사용자 경험상 이미지를 눌렀을 때 지워지는 게 조금은 어색한 거 같아요! 요거는 그냥 참고만 해주세요 :)
2 participants
요구사항
기본
상품 등록
체크리스트 [심화]
상품 등록
주요 변경사항
스크린샷
멘토에게