간단 스타일
•
역할
◦
깃허브 관리
•
UI/기능
◦
유저/팀/나의 프로필 페이지 및 기능
◦
팔로워/팔로잉 페이지 및 기능
◦
팔로우 기능
◦
같은 관심사 검색 기능
◦
네비게이션 바
◦
웹표준
디테일 스타일
프로젝트 역할
•
GitHub 관리
◦
팀원들에게 Git Flow 방식, Issue/PR 사용 방법 설명
◦
GitHub Issue/PR 템플릿, label 작성
UI 개발
•
ProfileImage/NavBar 공통 컴포넌트 제작
•
유저/팀/나의 프로필 페이지, 팔로워/팔로잉 페이지 제작
•
직관 일정 없음 및 게시글 없음 UI 제작
기능 개발
•
팔로우
•
프로필 리스트형/앨범형 피드
◦
리스트/앨범 아이콘 클릭으로 로드 방법 선택
▪
useState로 버튼 상태 관리
▪
리스트 아이콘 클릭 시 setListType = ‘list’,
앨범 아이콘 클릭 시 setListType = ‘album’
▪
listType 에 따라서 아이콘 이미지의 src가 변경되어 아이콘의 활성화/비활성화 효과
◦
listType === ‘list’ 일 시 리스트형으로 피드 로드
▪
해당 계정의 모든 게시글 로드
◦
listType === ‘album’ 일 시 앨범형으로 피드 로드
▪
해당 계정의 게시글 중 이미지가 있는 게시글을 필터링 하기 위해 post에 filter 메서드를 사용하여 return item.image 필터링된 data들을 앨범형으로 피드 로드
◦
post.length === 0일 때 게시글 없음 표시
•
관심사 검색
◦
프로필의 관심사들 중 검색하고 싶은 관심사 클릭 시 해당 관심사를 가진 계정들을 검색해주는 기능
◦
유저 검색 API 이용
▪
모든 계정 검색: GET /user/searchuser/?keyword=
▪
검색된 계정에서 관심사(intro) 확인하는데 관심사가 없는 계정들을 예외 처리 해주기 위해 검색된 모든 계정들에게서 typeof item.intro === 'string’ 인 계정들을 필터링
▪
관심사가 있는 계정들 중 검색할 관심사를 가진 계정들을 필터링한 sameTagGroup 데이터를 UserList의 props로 넘겨줌
•
스킵 네비게이션
◦
top: -(상자의 높이)해주어 평상시에는 보이지 않게 하고, focus 혹은 active 될 때에만 top: 0이 되어 스킵 네비게이션을 이용 가능하게 함
◦
페이지의 최상단에 위치하여 가장 먼저 포커스되고, 원하는 콘텐츠로 쉽게 이동 가능
리팩토링
•
웹표준 준수
◦
접근성 및 SEO 향상
▪
구조적 헤딩 추가
▪
meta 태그 및 페이지별 타이틀 추가
사용 라이브러리
react-helmet-async | meta 태그와 페이지별 타이틀을 위해 사용 |
