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

✨ 프로필 이미지 변경 기능 구현 #119

Merged
merged 9 commits into from
Nov 24, 2021

Conversation

Mulgyeol
Copy link
Collaborator

개요

✨ 프로필 이미지 변경 기능 구현

작업사항

  • ➕ uuid dependency 추가
    • 이미지 파일명의 중복을 막기 위해 uuid v4를 사용했습니다.
  • ✨ 이미지 업로드 미들웨어 작성
    • 변경할 이미지를 담아 api요청을 보내면 multer를 이용해 object storage에 저장하는 미들웨어를 작성했스빈다.
  • ✨ 프로필 이미지 Object Storage 저장 및 DB profileUrl 업데이트
    • object storage에 저장된 이미지 경로를 불러와 db의 user정보를 갱신시켜주었습니다.
  • ♻️ useEffect userSocketRef disconnect 분리
    • 프로필 사진이 변경되면 active followingList에서 해당 유저가 사라지는 에러를 disconnect를 분리해줘서 해결했습니다.
  • ♻️ 내 프로필 일때 이미지 사진 클릭, 수정 가능하도록 변경
    • 다른 사람의 프로필에서는 이미지 hover시 커서 변경과 클릭이 이루어지지 않도록 설정했습니다.
  • ✨ 새로운 이미지 저장 후 경로 받아와 유저 정보 업데이트
    • API요청에서 응답으로 받아온 새 이미지의 경로를 전역으로 관리되고있는 user의 상태에도 반영해 주었습니다.
  • ♻️ 토큰 알고리즘과 만료기한 환경변수로 설정
    • jwt-util에서 알고리즘과 만료기한을 리뷰받은 내용을 참고해 환경변수로 설정해주었습니다.

변경후

2021-11-23.9.18.04.mov

@Mulgyeol Mulgyeol added 🐠 front-end 프론트 관련 이슈 🐟 back-end 백엔드 관련 이슈 ✨ feature 기능 개발 관련 이슈 labels Nov 23, 2021
@Mulgyeol Mulgyeol self-assigned this Nov 23, 2021
Copy link
Member

@NEM-NE NEM-NE left a comment

Choose a reason for hiding this comment

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

고생하셨습니다! 혹시 사진 업로드 버튼 UI는 추후에 따로 업데이트를 할 예정인가요?

Comment on lines +77 to +82
useEffect(() => () => {
if (userSocketRef.current) {
userSocketRef.current.disconnect();
}
}, []);

Copy link
Member

Choose a reason for hiding this comment

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

deps에 user가 있어서 따로 빼둔 걸까여요?

@@ -34,7 +34,7 @@ const LargeProfileImageBox = styled.img`
border-radius: 30%;

&:hover{
cursor: pointer;
cursor: ${(props: {isMine:boolean}) => (props.isMine && 'pointer')};
Copy link
Member

Choose a reason for hiding this comment

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

오 이런 디테일한 부분까지도 신경 써주셔서 좋네요 ㅎㅎ

@Mulgyeol
Copy link
Collaborator Author

Mulgyeol commented Nov 23, 2021

고생하셨습니다! 혹시 사진 업로드 버튼 UI는 추후에 따로 업데이트를 할 예정인가요?

네, 주로 인풋부분을 감추로 라벨을 달아서 스타일링 하는 방식으로 구현하는 것 같은데 목록에 넣어두고 있습니다..!

@HanCiHu HanCiHu merged commit af93e23 into boostcampwm-2021:dev Nov 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐟 back-end 백엔드 관련 이슈 ✨ feature 기능 개발 관련 이슈 🐠 front-end 프론트 관련 이슈
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants