Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GGFE-156] 상점 프로필 사진 변경 모달 #942

Merged
merged 14 commits into from
Aug 22, 2023

Conversation

yoouyeon
Copy link
Member

📌 개요

  • 프로필 사진 변경 아이템을 사용하기 위한 모달을 추가했습니다.

💻 작업사항

  • 왼쪽엔 유저의 기존 프로필 이미지가 보이고, 오른쪽에는 바뀔 이미지를 보여주게 했습니다.
  • api 명세는 아직 확정되지 않았는데 기존 제한사항을 유지할 것 같아서 일단 관리자 프로필 이미지 api의 제한사항을 적용해두었습니다 (용량, 확장자)
  • 실제 데이터가 전송된 결과는 서버 쪽에서 출력하도록 해서 브라우저 콘솔이 아니라 터미널에 보입니다!

✅ 변경로직

@yoouyeon yoouyeon self-assigned this Aug 17, 2023
Copy link
Contributor

@parksangmin1543 parksangmin1543 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

상점 프로필 사진 변경모달 확인했습니다. 다른 부분이지만 모바일환경에서 보관함 사용하기 버튼주변을 클릭하면 사용하기 버튼이 나오고 클릭안하고 사용하기 버튼을 직접클릭할시에는 바로 모달이 뜨네요. 모달하시느라 고생많으셨습니다. 👍

Copy link
Contributor

@PHJoon PHJoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모달 잘 뜨고 미리보기도 잘 작동하네요! 사진 input에 올리는 것도 잘되는 것 같아요! 코멘트 따로 달긴 했는데 관리자에서는 이미지 확장자 상관없이 다 받는거 같아서 이유가 궁금합니다! 고생하셨습니다!! 👍👍

Comment on lines +85 to +89
<input
type='file'
accept='image/jpeg'
style={{ display: 'none' }}
onChange={uploadImg}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 jpeg만 설정하신 이유가 있을까요??

Copy link
Member Author

@yoouyeon yoouyeon Aug 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어라 관리자에서는 이미지 확장자 상관 없이 받나요...?
관리자에서 유저 상세정보 수정 api 명세에 보니까 fileType: Only .JPEG 라고 적혀있더라구요..!


지금 다시 보니까 관리자에서 이미지를 입력받는 input 태그에서는 따로 accept 속성으로 파일의 확장자를 지정해두진 않았는데, 파일을 전송할때에는 jpeg 타입이라고 명시해서 보내주고 있었습니다.. 🤔

formData.append('imgData', new Blob([imgData], { type: 'image/jpeg' }));

png 같은 다른 확장자를 입력받는 경우에도 데이터 타입만 jpeg로 표시해서 보내주면 문제없이 되는건지는 다시 확인해봐야 할 것 같아요 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일단 이 PR은 머지하고 이후 확장자 관련해서 업데이트 해야 할 내용이 있으면 추가해서 다시 PR 올릴게요!

Copy link
Member

@hyobb109 hyobb109 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

미리보기도 잘 보이고 요청도 잘 가는 것 확인했습니다! 고생하셨습니다!👍👍

return (
<div className={styles[style]}>
<input onClick={() => onClick()} type='button' value={value} />
<input
onClick={() => onClick()}
Copy link
Contributor

@mike2ox mike2ox Aug 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
onClick={() => onClick()}
onClick={onClick}

어차피 onClick을 IoC로 인해 주입되고 있어서 바로 넣어도 됩니다

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

엇 그러네요... 왜 저렇게 했지... 수정했습니다!!
IoC는... 아직 정확히는 잘 모르겠네요 😵‍💫 좀 더 공부해볼게요! 감사합니당 😆

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yoouyeon yoouyeon merged commit 8e7f7d8 into main Aug 22, 2023
@PHJoon PHJoon deleted the GGFE-156-상점-프로필-사진-변경-모달 branch September 4, 2023 06:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants