상품 등록페이지 구현 #60
Merged
상품 등록페이지 구현 #60
+1,533
−7
Conversation
This file contains 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
- 판매자가 물품을 판매하기 위한 UI입니다.
- 사진 업로드를 하면 먼저 클라이언트에서 큰 사진인지 판별하고 용량이 큰 파일에 대해서는 이미지 프로세싱 작업을 수행합니다. - 이를 통해 서버에서 부담을 줄일 수 있고 사용자의 사용 환경에 따른 맞춤형 사진을 제공할 수 있습니다.
- 시간 제약으로 구조를 신경쓰지 않고 작성된 코드를 전반적으로 수정하였습니다.
- 이미지 업로드 에러처리로 사용자가 반드시 수정을 해야할수 있게 modal을 통해 에러를 알리게 하였습니다.
- 업로드한 사진목록을 캐로셀 형태로 보여줍니다.
- 팀회의 결과에 따라 캐로셀을 리스트 형식으로 변경하였습니다. - localStorage를 활용하여 새로고침 시에도 사진이 사라지지 않게 하였습니다. - 사진 삭제가 가능하도록 삭제 버튼을 추가하였습니다.
- 사진 삭제 기능 구현 - 새로 고침 시 등록중이던 사진이 사라지는 문제 해결
- 목데이터 삽입 방법 변경
- 폼데이터의 값들을 불러모아 서버로 전송하는 submit을 구현했습니다. - 거래 유형의 경우 개발의 편의를 위해 기존의 radio button에서 radio group 형식으로 변경하였습니다. - 경고 모달의 경우 여러가지 종류의 에러메세지를 보여 줄 수 있도록 수정하였습니다.
Johnie-Yeo
added
epic:상품관리
kgpyo
reviewed
Dec 4, 2019
Johnie-Yeo
commented
Dec 4, 2019
Comment on lines
53
to
54
| const preResized = files.map((_) => ({loading: true})); | ||
| setImages(preResized); |
There was a problem hiding this comment.
해당 부분은 context로 이미지가 로딩 중이라는 것을 form 컴포넌트에 전달하기 위해 작성되었습니다.
Comment on lines
76
to
85
| const checkAllInfoFilled = (product) => { | ||
| const { | ||
| title, | ||
| userId, | ||
| price, | ||
| pictures, | ||
| contents, | ||
| productStatus, | ||
| category, | ||
| } = product; |
There was a problem hiding this comment.
product에 있는 모든 속성을 사용하지는 않기 때문입니다. 만약 저 부분을 수정하면 똑같은 객체가 3번 작성 되어야 합니다.(함수 호출 전 destructuring, 함수 호출에서 객체, 파라미터에서의 destructuring) 약간의 불필요한 인자도 넘어오긴 하지만 큰 문제는 되지 않고, 가독성을 위해 현재 상태가 더 좋다고 판단했습니다.
| evt.preventDefault(); | ||
|
|
||
| const images = window.localStorage.getItem('images'); | ||
| const imageList = images.split(' ').slice(0, -1); |
- 코드리뷰를 통해 지적받은 사항들을 전반적으로 수정하였습니다.
- 디렉토리 이름 변경
- submit의 유저 정보를 mock 데이터에서 실제 쿠키의 토큰값을 통해 얻어낸 유저 정보로 치환하였습니다.
- 선언 후 사용하지 않는 속성 제거 - font 설정
- UI 수정 - 이미지가 없을때 문구 출력 - 이미지 업로드 프로세스 custom hooks 처리 - 이미지 스크롤 속성을 auto 처리 - localstorage의 상태를 항상 현재 상태로 동기화 - 사진을 추가로 업로드 가능하도록 수정 - 사진 업로드 서버가 없을때에 대한 에러처리 - 사진 수 10개 제한
- 사용자가 입력하지 않은 항목에 대해 알려주기 위한 변경
- 반응형을 고려해 모든 항목에 대해 크기를 rem으로 지정하였고 index.css 에 vmin을 이용하여 폰트 크기를 설정함으로써 반응형이 어느정도 유지되도록 설정하였습니다. - 가로 모드에서 전체 균형이 깨지는 문제를 수정하였습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
PR에 대한 요약
PR에 대한 동기와 상황에 대한 설명 부탁드립니다.
이번 코드는 어떻게 테스트 되었나요?
결과물 스크린샷 (선택) :
어떤 변화인가요?
체크리스트:
본 PR은 다음 이슈에 해당하는 내용입니다.
Closes #27