[윤진우] Sprint6

[Yun-Jinwoo]

요구사항

기본

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

심화

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

주요 변경사항

• /additem 페이지 추가
• Header 컴포넌트 props 방식을 NavLink로 변경

스크린샷

페이지 주소 : https://panda-market-yun.netlify.app/

🖥️ PC

📲Tablet

📱Mobile

멘토에게

• 가격 입력 부분에서 커서를 앞으로 두고 입력을 했을 때, 커서 위치를 찾아, 유지하도록 코드를 작성했습니다. 그런데, 다른 문자를 입력했을 때는 안그러는데, 한글을 입력하면 숫자가 계속 지워지는 현상이 있습니다. 찾아보니, 한글 입력은 단일 키가 아니라 조합 문자라서 그렇다고 하는데, 이를 해결할 방법이 있을지 궁금합니다.

[GANGYIKIM]

진우님 6주차 미션 작업 고생하셨습니다!
프로젝트가 끝나자마자 작업을 하신것 같아요. 대단하네요~
제가 생각하기에 도움이 될 만한 부분에 대해 코멘트 드렸습니다.
다음 주차도 화이팅입니다!

---

• 질문주신 인풋 가격 formatting 및 cursor의 경우 제가 확인해보니, 한글 입력할 때 외에도 cursor 동작이 이상한 부분이 있었습니다. 우선 이를 수정하셔야 말씀하시는 동작상 문제가 더 잘 이해될 것 같아요. React의 경우 작업해주신 코드처럼 input 의 selectionStart, selectionEnd 를 바꿔주는 것으로는 원하시는 동작을 구현하실 수 없습니다! 관련해 글들을 남겨드리니 확인해보세요.
  StackOverflow
  KeepInputCursorStill

[GANGYIKIM]

💊 제안
아마 IDE의 auto Import 기능을 이용하실 것 같지만, 아니라면 참고해주세요.

지금처럼 상대 경로는 파일 위치가 바뀔 때마다 수정해야 하고 해당 파일의 정확한 위치를 파악하기 어렵습니다.
(root에 가까운 hooks 폴더인지, 현재 페이지에서 사용하는 hook들을 모아둔 hooks 폴더인지 구분이 어렵습니다.)
이럴 때 프로젝트 루트에 alias를 설정해 import useDetectClose from 'hooks/useDetectClose', import useDetectClose from '@/hooks/useDetectClose' 와 같이 간결하게 작성해보세요~

[GANGYIKIM]

💊 제안
드롭다운도 components 폴더로 빼시면 학습적 측면에서도 forwardRef도 써보시고 더 좋을 것 같아요~

[GANGYIKIM]

❗️ 수정요청
지금은 하나의 함수에서 너무 많은 역학을 담당하고 있습니다~
다른 코멘트에 달아드린 reducer를 참고해서 리팩토링 해보시거나 역할에 대해 고민해보시고 분리해보시면 좋겠습니다.