feat: 프로필 편집 페이지 UI 및 기능 및 API 연동 구현

[kimsuyeon0916]

구현 내용/방법

• 프로필 편집 페이지 UI 스타일링
• react-hook-form 기반 Input, Textarea, ComboBox, MuiDatepickerController, LinkForm 공통 컴포넌트 제작
• MuiDatepicker, Toggle, Radio, SkillTag, PortfolioCard, PrimaryBtn, DefaultBtn, AddBtn, DeleteBtn 공통 컴포넌트 제작
• ProfileImage 공통 컴포넌트 수정
• 프로필 편집 페이지 기능 구현
• Intersection Observer 이용한 useIntersection 커스텀 훅 제작
• 프로필 조회, 스킬/역할 목록 조회, 포트폴리오 목록 조회(무한스크롤), 프로필 편집 API 함수 추가 및 fetch 적용

리뷰 필요

• 이미지 업로드는 포트폴리오 편집 페이지에서 같이 적용해서, 머지후 같이 PR 올리겠습니다~!
• 프로필 이미지 공통 컴포넌트(ProfileImage.tsx) 파라미터를 수정하였습니다! 클릭시, /profile/:userId 로 이동합니다.

  interface ProfileImage {
      isEditable?: boolean; // 이미지 업로드 기능을 위한 편집 여부 판단
      userId: string;
      size: string;
      url?: string;
  }
  
  ProfileImage: ({ isEditable, userId, size, url }: ProfileImage) => void

• 최대한 승준님이랑 같이 사용할 수 있도록 공통 컴포넌트를 만들었습니다! 추후에 같이 적용해서 사용하면 좋을 것 같습니다!☺️
• 프로필 편집 페이지의 컴포넌트 분리를 못해서 코드 길이가 길고 로직이 많아, 읽기 힘드실 수 있습니다..😢
• 첫 페이지 접속시에는 크롬 개발자도구 콘솔창 내에 2개의 오류가 존재합니다.(해결: b43d336,
0ffb937, 775a2d8)
• 서버 이슈로 인해 무한스크롤 호출하면서 에러가 호출마다 발생합니다.(이유: 포트폴리오 id값 중복)
• 유효성 검사 관련 새 UI 디자인 반영 및 모달(유효성 검사/공개 여부 확인) 연결은 다음주에 반영할 예정입니다.
• 추후에 컴포넌트 분리하면서 리렌더링 최적화도 적용할 예정입니다.

무한 스크롤 관련 테스트 하시는 경우에는, 스웨거에서 포트폴리오를 12개 이상 생성하신 뒤에 확인이 가능합니다!
제가 놓친 부분이 있다면 말씀 부탁드립니다!

close #71

[vercel]

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		Apr 14, 2024 2:12pm

[prgmr99]

수연님!! 작업하시느라 고생하셨습니다!!
공통 컴포넌트를 만드시느라 쏟으신 정성이 보이네요ㅠㅠ
보기 쉬웠고 정말 잘 작성하신 것 같아요!

[prgmr99]

테스트는 이따가 밤에 해보겠습니다!!

[prgmr99]

맥북을 고친다고 늦게 테스트를 하게 됬네여ㅠㅠ

1. profile/edit 으로 들어갔을 때, undefined입학년도

2. 전화번호 형태에 대한 확인이 필요할 것 같아요! (숫자만)
3. 학점 입력에 숫자만 가능하도록 + 숫자 범위 제한
4. 링크 처음 추가할 때, 파란색으로 포커스가 되어 있습니다!
5. 날짜 아이콘만 눌러야 달력이 열리도록 구현되어 있는데 혹시 해당 폼을 누르면 열리는게 조금 더 편하지 않을까요??
6. 링크에서 www.naver.com 이나 naver.com 은 안되고, 앞에 https:// 까지 붙여야 입력이 되네여..!

나머지는 잘 됩니다!! alt 글자 위치만 수정해주시면 될 것 같아요!!
고생하셨습니다~😀

[prgmr99]

맥북을 고친다고 늦게 테스트를 하게 됬네여ㅠㅠ

1. profile/edit 으로 들어갔을 때, undefined입학년도

2. 전화번호 형태에 대한 확인이 필요할 것 같아요! (숫자만) 3. 학점 입력에 숫자만 가능하도록 + 숫자 범위 제한 4. 링크 처음 추가할 때, 파란색으로 포커스가 되어 있습니다! 5. 날짜 아이콘만 눌러야 달력이 열리도록 구현되어 있는데 혹시 해당 폼을 누르면 열리는게 조금 더 편하지 않을까요?? 6. 링크에서 www.naver.com 이나 naver.com 은 안되고, 앞에 https:// 까지 붙여야 입력이 되네여..!
나머지는 잘 됩니다!! alt 글자 위치만 수정해주시면 될 것 같아요!! 고생하셨습니다~😀

1번은 크게 중요한 것 같지는 않아요!

[kimsuyeon0916]

1. profile/edit 으로 들어갔을 때, undefined입학년도
2. 전화번호 형태에 대한 확인이 필요할 것 같아요! (숫자만)
3. 학점 입력에 숫자만 가능하도록 + 숫자 범위 제한
4. 링크 처음 추가할 때, 파란색으로 포커스가 되어 있습니다!
5. 날짜 아이콘만 눌러야 달력이 열리도록 구현되어 있는데 혹시 해당 폼을 누르면 열리는게 조금 더 편하지 않을까요??
6. 링크에서 www.naver.com 이나 naver.com 은 안되고, 앞에 https:// 까지 붙여야 입력이 되네여..!

나머지는 잘 됩니다!! alt 글자 위치만 수정해주시면 될 것 같아요!! 고생하셨습니다~😀
1번은 크게 중요한 것 같지는 않아요!

1. api가 호출이 안되는 경우에 그렇더라구요..! 혹시 나머지 정보들은 다 채워지는데 년도만 그렇게 뜨셨나용??
2. 010-xxxx-xxxx 이렇게 숫자만 입력해도 이렇게 뜨도록 할까요??
3. 넵! 숫자 범위는 max.gpa 맞춰서 해보도록 하겠습니다!
4. 의도적으로 추가후에 커서 클릭안하고 입력하라고 포커싱 준건데 별로일까용..??
5. 넵! 수정해놓겠습니당
6. 넵! input type을 url로 지정해놨는데 그냥 text로 바꿔놓을까요? https:// 를 안붙여도 되도록 할까요?

[prgmr99]

1. profile/edit 으로 들어갔을 때, undefined입학년도

<img alt="image" width="922" src="https://private-user-images.githubusercontent.com/76275691/321850586-c92943f8-bf55-4cbb-b7f1-642499ad837d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTI4OTk3MzgsIm5iZiI6MTcxMjg5OTQzOCwicGF0aCI6Ii83NjI3NTY5MS8zMjE4NTA1ODYtYzkyOTQzZjgtYmY1NS00Y2JiLWI3ZjEtNjQyNDk5YWQ4MzdkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDEyVDA1MjM1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlhZDQwZDU0NWZlNjhiNTZiN2UwYjc4MWJiMzEyNWZmOGIyYzc3OGRiZTRhY2U1M2UzZGZiY2I2ZTc4YzgyMGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.w_lBMpe52pF9bKQEuhlhInn95q4PA13ZTQPy6PQ8rYo"
2. 전화번호 형태에 대한 확인이 필요할 것 같아요! (숫자만)
3. 학점 입력에 숫자만 가능하도록 + 숫자 범위 제한
4. 링크 처음 추가할 때, 파란색으로 포커스가 되어 있습니다!
5. 날짜 아이콘만 눌러야 달력이 열리도록 구현되어 있는데 혹시 해당 폼을 누르면 열리는게 조금 더 편하지 않을까요??
6. 링크에서 www.naver.com 이나 naver.com 은 안되고, 앞에 https:// 까지 붙여야 입력이 되네여..!
나머지는 잘 됩니다!! alt 글자 위치만 수정해주시면 될 것 같아요!! 고생하셨습니다~😀
1번은 크게 중요한 것 같지는 않아요!

1. api가 호출이 안되는 경우에 그렇더라구요..! 혹시 나머지 정보들은 다 채워지는데 년도만 그렇게 뜨셨나용??
2. 010-xxxx-xxxx 이렇게 숫자만 입력해도 이렇게 뜨도록 할까요??
3. 넵! 숫자 범위는 max.gpa 맞춰서 해보도록 하겠습니다!
4. 의도적으로 추가후에 커서 클릭안하고 입력하라고 포커싱 준건데 별로일까용..??
5. 넵! 수정해놓겠습니당
6. 넵! input type을 url로 지정해놨는데 그냥 text로 바꿔놓을까요? https:// 를 안붙여도 되도록 할까요?

1. 넵! 년도만 그렇게 떴습니다!
2. 오! 하이픈이 있어도 좋구요! 숫자만 있어도 좋아요!! 수연님께서 더 선호하시는 것으로 작업하시면 될 것 같아요!
3. 아 그런 의미가 있었군요! 포커스가 되어있던 부분이 Link 타입(blog, github) 설정하는 부분이어서 그렇게 말씀드렸는데, 여기도 입력이 가능한 건가요?!!
4. 생각해보니 대부분은 url을 복사해올텐데, 그때 https가 포함되네요!! 그대로 두셔도 될 것 같아요!!

[kimsuyeon0916]

1. 넵! 년도만 그렇게 떴습니다!
2. 오! 하이픈이 있어도 좋구요! 숫자만 있어도 좋아요!! 수연님께서 더 선호하시는 것으로 작업하시면 될 것 같아요!
3. 아 그런 의미가 있었군요! 포커스가 되어있던 부분이 Link 타입(blog, github) 설정하는 부분이어서 그렇게 말씀드렸는데, 여기도 입력이 가능한 건가요?!!
4. 생각해보니 대부분은 url을 복사해올텐데, 그때 https가 포함되네요!! 그대로 두셔도 될 것 같아요!!

1. 헉..! 일단 추후에 QA시에 한번 더 알아보겠습니다!
2. 선택만 가능합니다!
3. 넵 알겠습니당!