Skip to content
New issue

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

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

Already on GitHub? # to your account

feat: 프로필 상세 페이지 UI 및 기능 및 API 연동 구현 #74

Merged
merged 22 commits into from
Mar 22, 2024

Conversation

kimsuyeon0916
Copy link
Contributor

@kimsuyeon0916 kimsuyeon0916 commented Mar 10, 2024

구현 내용/방법

  • 프로필 상세 페이지 UI 스타일링
  • 프로필 상세 페이지 기능 구현
  • 프로필 상세 페이지 API 연동

리뷰 필요

  • 프로필 이미지 공통 컴포넌트(ProfileImage.tsx)를 사이즈를 조절 가능하도록 수정하였습니다! 나중에 프로필 원형 이미지 사용하실 때 해당 컴포넌트를 사용하시면 좋을 것 같습니다☺️
    ProfileImage: ({ nickname, size, url }: ProfileImage) => void
  • 백엔드에서 아직 API 가 완성되지 않아서, 스웨거 토대로만 API 연동을 구현하였습니다! 백엔드 API가 완성되는대로 추후에 변경사항을 적용하여 테스트 할 예정입니다.
  • css 함수를 적용하여, 추후 앱 뷰에서도 적용될 수 있도록 반응형 UI로 스타일링 해보았습니다.
  • Profile.styled.ts 내 typograpy를 h2 ~ h6 까지 정리해놓았습니다. 추후에 디자인 시스템이 도입되면 해당 부분을 별도의 파일로 분리할 예정입니다!

제가 놓친 부분이 있다면 말씀 부탁드립니다!

close #70

- 이유: svg 파일로 별도로 저장
- 이유: useParams으로 불러올 키워드가 라우팅 경로와 동일해야 함
@kimsuyeon0916 kimsuyeon0916 added Priority: Critical 우선순위: 긴급 Status: Review Needed 상태: 리뷰 대기중인 상태 Type: Feature 유형: 기능 추가 Type: Style 유형: 스타일 labels Mar 10, 2024
@kimsuyeon0916 kimsuyeon0916 self-assigned this Mar 10, 2024
Copy link

vercel bot commented Mar 10, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
meeteam ⬜️ Ignored (Inspect) Visit Preview Mar 21, 2024 7:11am

Copy link
Member

@prgmr99 prgmr99 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!! 수연님!!
테스트했을 때 UI랑 url 이동하는 것도 좋습니다!

@@ -185,6 +169,7 @@ const MemberTest = ({ id }: Member) => {
const [memberList, setMemberList] = useRecoilState(memberListState);

const onClickDelete = (event: React.MouseEvent<HTMLDivElement>) => {
// eslint-disable-next-line prefer-const
Copy link
Member

Choose a reason for hiding this comment

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

이 주석은 어떤 의미인가요??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

제가 esLint 자동 저장 시에 바로 적용되어 변수 선언 시 const 키워드만을 사용하는 옵션때문에 코드가 자꾸 수정되어,,, 해당 주석으로 막았습니다ㅠㅠ..🥹

Comment on lines 32 to 34
if (event.target instanceof Element) {
const deletedIndex = Number(event.target.id);
temp.splice(deletedIndex, 1);
Copy link
Member

Choose a reason for hiding this comment

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

수연님 혹시 이거 삭제 제대로 되셨나요??!
제가 이번에 역할 삭제 부분을 구현하면서 그때 생긴 버그의 원인을 알게되어서 다음에 공유해드리겠습니다!!!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

넵 감사합니다!!😊 해결되서 다행이네요!!👍🏻

@kimsuyeon0916 kimsuyeon0916 merged commit e126bfe into release-1.0 Mar 22, 2024
2 checks passed
@kimsuyeon0916 kimsuyeon0916 deleted the feature/#70_add_profile_page branch November 6, 2024 04:23
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Priority: Critical 우선순위: 긴급 Status: Review Needed 상태: 리뷰 대기중인 상태 Type: Feature 유형: 기능 추가 Type: Style 유형: 스타일
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: 프로필 상세 페이지 UI 및 기능 및 API 연동 구현
2 participants