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.

Sign up for GitHub

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

Jump to bottom

사용자 프로필 페이지 구현 #15

Closed
wants to merge 30 commits into from
Closed

사용자 프로필 페이지 구현 #15

wants to merge 30 commits into from

Conversation

coggiee
Copy link
Collaborator

@coggiee coggiee commented Jan 1, 2024

관련 이슈


작업 내용

2024-01-01.14.08.33.mov
  • 임시로 사용자 정보를 id를 토대로 불러오는 기능을 로그인으로 대체해서 테스트했습니다.
    • useEffect를 통해 호출하는 모든 코드가 임시 코드입니다.
    • 추후 기능 병합 때, 수정할 예정입니다.
  • 위 기능을 통해 얻어지는 사용자 정보를 토대로 사용자 프로필 페이지를 구현했습니다.

특이 사항

  • 팔로우 버튼 동작 확인: pages/profile/index.tsx에서 useEffect를 통해 checkIsFollowedUser을 호출합니다.
    • 팔로우 버튼이 동작하는지 임시로 테스트한 코드입니다. (이전 스크럼 때 보여드렸던 기능입니다.)
    • 로직은 현재 코드에서는 사용되지 않지만, 추후 기능 병합시 사용될 예정이어서 삭제하지 않았습니다.
  • 작성한 포스트, 좋아요 한 포스트 목록은 아직 데이터가 없고 포스트카드는 공통 컴포넌트로 사용될 수 있다고 생각하여, 현재는 비어있습니다.
    • 추후 기능 병합 시, 추가할 예정입니다.
  • 사용자 프로필 페이지의 편집 버튼을 클릭하면 사용자 편집 페이지가 Drawer형식으로 열립니다.(오른쪽에서 왼쪽으로)
    • 이 때문에, 서로 코드가 Parent, Children으로 연관되어 있어서 최종적인 코드는 사용자 프로필 편집 페이지 PR에서 확인해주시면 감사하겠습니다.

리뷰 요구사항 (선택)

  • 리뷰 중점 사항: 컨벤션을 최대한 지키려고 노력했으나, 부족한 부분이 있을 것 같습니다. 말씀해주시면 감사하겠습니다.
  • 추가 검토 사항: 구현 방식에 있어서, 이해가 되지 않는 부분이 있을까요? e.g. 오버엔지니어링(너무 과도한 컴포넌트 분리) or 너무 많은 기능을 담당하는 컴포넌트 등
  • 논의가 필요한 부분: 있으시면 말씀해주세요.

Yoonkyoungme and others added 30 commits December 29, 2023 09:39
@Yoonkyoungme
init: 아이콘 svg 파일 추가
a8ac1e5
@coggiee
feat: 사용자 정보 불러오는 API 요청 함수를 작성했습니다.
f66ae0a
@coggiee
feat: 사용자 정보 API 호출 및 데이터 설정
4501358 
- `getProfile`: API를 사용하여 사용자 프로필 정보를 호출
- `useEffect`: 훅을 사용하여 컴포넌트가 마운트 될 때 API 호출 수행
- `useState`: 훅을 사용하여 사용자 정보 상태 관리
@coggiee
style: 사용자 프로필 루트 레이아웃을 디자인했습니다.
f7216a5 
- `ProfileContainer`: 루트 레이아웃입니다.
@coggiee
style: 사용자 프로필 헤더 컴포넌트를 추가했습니다.
c8da1c6 
- `Header`: 뒤로가기 버튼이 존재하는 헤더 컴포넌트입니다.
@coggiee
style: 사용자 이미지 컴포넌트를 추가했습니다.
4b0d1a0 
- `CoverImage`: 사용자 커버 이미지 컴포넌트입니다.
- `DetailSection`: 사용자 프로필 이미지와 편집 버튼을 포함하는 컴포넌트입니다.
@coggiee
style: 사용자 프로필 정보 컴포넌트를 추가했습니다.
2bcc345 
- `UserProfileInfo`: 사용자 이름, 닉네임, 온라인 여부, 이메일 그리고 팔로우 컴포넌트를 포함합니다.
@coggiee
style: 사용자 프로필 상호작용 버튼을 추가했습니다.
930add3 
- `ButtonContainer`: 상호작용 버튼을 감싸는 루트 컴포넌트입니다.
- `ChatButton`: 채팅 버튼입니다.
- `FollowButton`: 팔로우 버튼입니다.
@coggiee
style: 임시 포스트 레이아웃을 추가했습니다.
c630f86 
- `PostSection`: 전체 포스트를 담고 있는 루트 레이아웃입니다.
- `PostList`: 종류별 포스트들을 담고 있는 컴포넌트입니다.
- `PostTitle`: 어떤 종류의 포스트인지 명시하는 제목 컴포넌트입니다.
@coggiee
refactor: 포스트 섹션 관련 컴포넌트를 PostList로 분리했습니다.
e3d4bd5 
- 가독성을 개선하고 중복을 최소화하기 위해, 좋아요한 포스트와 작성한 포스트를 분리했습니다.
- 어떤 포스트인지 listTitle prop으로 구분할 수 있습니다.
@coggiee
refactor: 이전으로 돌아가기 버튼을 컴포넌트로 분리했습니다.
3e09a69 
- 가독성을 위해 컴포넌트로 분리했습니다.
@coggiee
refactor: 헤더 컴포넌트를 분리했습니다.
add60ea 
- 헤더는 프로필 편집 페이지에서도 사용됩니다.
@coggiee
refactor: API 경로를 수정했습니다.
0609358 
- 하드코딩된 경로를 미리 지정한 경로로 수정했습니다.
@coggiee
remove: 테스트 코드를 작성한 파일을 삭제했습니다.
9a66963
@coggiee
refactor: 버튼을 담는 컴포넌트를 수정했습니다.
3bcd701 
- `FollowButtons`: FollowButton과 유사하여 삭제했습니다. ButtonContainer로 대체했습니다.
- ButtonContainer의 스타일을 수정하여, 중복을 최소화했습니다.
@coggiee
feat: 내 프로필인지 확인하는 기능을 추가했습니다.
a552f9f 
- 내 프로필인지에 따라 특정 버튼을 활성화, 비활성화합니다.
@coggiee
feat: FormData 형식의 이미지를 추가하는 함수를 추가했습니다.
92a4456 
- 커버, 프로필 이미지는 isCover의 값에 따라 달라집니다.
- type에 따라 사용되는 곳이 달라집니다.
@coggiee
feat: 프로필, 커버 이미지 변경 API를 호출합니다.
b413898
@coggiee
style: 팔로우 버튼을 추가했습니다.
25f300d 
- svg를 jsx로 반환합니다.
@coggiee
refactor: 컴포넌트 분리
794d6a5 
- 컴포넌트를 분리하여 코드의 가독성을 높였습니다.
@coggiee
feat: 팔로우, 팔로우 취소 기능 추가
a76cba6 
- 나의 프로필 정보를 불러와서 해당 유저를 팔로우 하는지 확인합니다.
- 팔로우 버튼을 클릭하여 팔로우, 팔로우 취소할 수 있게 했습니다.
@coggiee
style: 팔로우 버튼의 디자인 수정
04fb720 
- 팔로우하지 않을 경우 아이콘의 너비와 높이를 팔로우 했을 경우 아이콘의 너비와 높이로 통일 했습니다.
@coggiee
modify: 프로필 정보를 불러오는 함수에 인자를 추가했습니다.
332b0ad 
- id인자를 추가하여, 특정 id를 가진 유저의 프로필 정보를 가져올 수 있습니다.
@coggiee
remove: 사용하지 않는 코드 삭제
227b007 
- 프로필 페이지에서는 사용하지 않는 이미지 업로드 버튼을 삭제했습니다.
@coggiee
fix: 폴더 이름 변경으로 인한 import를 할 수 없는 오류 수정
76cf627
@coggiee
rename: 컴포넌트 위치 변경
ae608e7 
- 프로필 편집 페이지에 사용되는 컴포넌트와 구분하기 위해, profile 폴더로 컴포넌트의 위치를 변경했습니다.
@coggiee
comment: 주석 삭제
d68881e
@coggiee
refactor: import 순서 변경
8af19cc 
- 컨벤션에 맞게 import 순서를 수정했습니다.
@coggiee
modify: 사용자 정보 요청 로직 수정
76d0c37 
- 기존에는 팔로우, 편집 버튼의 렌더링 분기를 처리하기 위해 두 개의 사용자 정보를 요청했습니다(어드민, 일반 사용자)
- 이를 환경변수로 처리하여 사용자 정보를 하나만 요청하도록 변경했습니다.
@coggiee
comment: 주석 추가
b0a036b
@coggiee coggiee self-assigned this Jan 1, 2024
@coggiee coggiee added the feature 기능 개발 label Jan 1, 2024
@coggiee coggiee closed this Jan 3, 2024
@coggiee coggiee deleted the feature/profile branch January 15, 2024 00:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JuJangGwon JuJangGwon JuJangGwon approved these changes

@lja0395 lja0395 lja0395 approved these changes

Assignees

@coggiee coggiee

Labels
feature 기능 개발
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@coggiee @JuJangGwon @lja0395 @Yoonkyoungme