[김서연] Sprint6

[Seon-K]

요구사항

배포주소
https://sprint-mission6-pandamarket.netlify.app/item/additem

기본

상품 등록

• 상품 등록 페이지 주소는 “/additem” 입니다.
• 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상품 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• API를 통한 상품 등록은 추후 미션에서 적용합니다.

심화

상품 등록

• 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
• 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

• module.css를 적용했습니다.

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[GANGYIKIM]

서연님 6주차 미션 작업 고생하셨습니다!
저는 폼과 인풋을 다루는 것이 가장 어렵다고 생각하는데 잘 작업하셨어요!
시간이 되시면 요구사항외의 사용성 개선에 대해서도 고민해보시고 작업해보시면 더 좋을 것 같아요.
다음 미션도 화이팅입니다~

[GANGYIKIM]

💊 제안
input의 accept 속성은 유저가 어떤 파일을 올려야하는지에 대한 힌트를 제공하는 속성입니다.
유저는 파일 업로드시 accept의 명시된 확장자 이외의 파일도 올릴 수 있으므로
실제 upload 함수에서 한번더 확장자를 검사해주시는 것이 좋습니다.

(사용자가 업로드창에서 옵션을 열어 확장자를 바꾸면 아래처럼 보입니다)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/accept

[GANGYIKIM]

❗️ 수정요청
버튼 타입을 적지 않으시면 reset을 기본값으로 가지게 됩니다~ 늘 명시해주시면 좋습니다.

Suggested change

	<button className={styles.deleteButton} onClick={handleDelete}>
	<button type="button" className={styles.deleteButton} onClick={handleDelete}>

[GANGYIKIM]

💊 제안
ref가 사용되지 않고 있어서 없어도 될 것 같아요~ 추후 필요하실 때 사용하시는 것을 추천드리겠습니다.

[GANGYIKIM]

💊 제안
header가 특정 페이지들에서 동일하게 들어가므로 이런 경우 page에서 구현하시기 보다 route에서 처리하시는 것이 관리 및 성능 측면에서 좋습니다.
인덱스, 로그인과 회원가입, 그외 이렇게 경우에 따라 header가 다르게 보이므로 문서를 참고하셔서 수정해보세요~

https://reactrouter.com/start/declarative/routing#layout-routes

[GANGYIKIM]

💊 제안
label 태그로 하셔서 input과 연결하시면 더 좋을 것 같아요.

Suggested change

	<h2 className={styles.title}>상품 소개</h2>
	<textarea
	className={styles.inputDescription}
	placeholder="상품 소개를 입력해주세요"
	value={description}
	onChange={(e) => setDescription(e.target.value)}
	></textarea>
	<label htmlFor="description" className={styles.title}>상품 소개</label>
	<textarea
	id="description"
	className={styles.inputDescription}
	placeholder="상품 소개를 입력해주세요"
	value={description}
	onChange={(e) => setDescription(e.target.value)}
	/>

[GANGYIKIM]

💊 제안
기존 작업하셨던 로그인, 회원가입 페이지처럼 form 요소를 사용하시면 UX측면에서도 좋고, form 단위로 조작하기도 좋습니다~

• form으로 input과 button을 포함하게 되면, 해당 form의 상호작용가능한 자식요소에서 onsubmit 이벤트가
  발생시 form이 이를 감지할 수 있고, 유저입장에서 enter 키를 눌렀을 때 onsubmit 이벤트가 제출되므로 UX 적으로도 좋습니다.

// case1: form에 onsubmit 이벤트 명시
<form class="login-form" onsubmit="login">
  <input /> // input에서 enter 키 입력시 onsubmit 이벤트 실행
  <button type="submit">login</button> // 해당 버튼 클릭 시 onsubmit 이벤트 실행
</form>

// case2: submit 버튼에 onclick 이벤트 명시
<form class="login-form">
  <input /> // input에서 enter 키 입력시 button의 onclick 이벤트 실행
  <button type="submit" onClick="login">login</button>
</form>

[GANGYIKIM]

💊 제안
중복되는 태그가 생성되지 않도록 해주신 점 좋습니다!
다만 이렇게 되면 사용자가 해당 동작에 대한 피드백을 받지 못하므로, alert, toast, input error 와 같은 방식으로 피드백을 주시면 더 좋을 것 같아요.

[GANGYIKIM]

❗️ 수정요청
한글로된 태그를 생성할 때 두번 입력이 발생하는 것 같은 현상이 있습니다. 이는 자모음으로 이루어진 한글을 입력중에 발생하는 현상입니다~
배포사이트에서 한글로 태그를 생성해보시고, 위의 동작을 고쳐보세요~

https://toby2009.tistory.com/53