피드 api 연결 및 정책에 명시된 기능 적용

[yogjin]

✨ Describe

피드 인기 게시글과 일반 게시글의 무한스크롤을 구현

✅ Tasks

• intersection observer, react-query를 이용해 무한스크롤 구현

b. 피드 게시물

• 게시글은 20개씩 불러옴
• 게시글은 최신 등록 순 기준 노출한다. (수정한 경우도 최근 등록한 것으로 간주한다) -> (*백엔드와 논의..)하진 않았지만 그렇게 오는것으로 보임
• 다음과 같은 경우, 해당 페이지를 새로고침하여, 최신 피드가 있다면 불러온다
  • 타 페이지 이동 후 피드에 다시 들어온 경우
  • 새로고침 한 경우
  • GNB 영역에 피드 버튼을 누른 경우 (현재 피드를 보고 있더라도) -> 그 글 보고 스크롤 복원과 페칭 정보얻기

c. 프로필 영역

• 등록한 사람의 프로필 노출
  • 프로필 사진
  • 닉네임
  • 스킬 (내 프로필 설정 페이지에서 최대 3개 등록 가능)
• 닉네임/프사/전문분야 영역 아무 곳이나 선택 시, 그 사람의 프로필 상세 페이지(PF)로 이동
  • 만약 내 프로필이라면, ‘내 프로필(MY)’로 이동한다 ➡️ 내 아이디어인 경우 프로필 영역 렌더링 ❌

d. 모집 분야 정보 표시 영역

• 글쓰기(WR) 페이지에서 선택한 분야가 노출된다 (최소 1개 ~ 최대 5개)

e. 게시글 내용 영역

• 최초에는 250자까지 노출한다 -> 디자인 보면 글자수는 이제 신경안쓰고 3줄 이후 말줄임표 바뀐느낌
• ‘더보기’를 포함하여, 게시글 영역을 선택하면, ‘게시글 상세(DT)’ 페이지로 이동한다 -> 더보기 없어진듯?
• 만약, 피드 게시글을 불러온 후, ‘더보기’를 누르기 전에 게시글이 삭제되었다면, 알럿창 노출 : 삭제된 게시글입니다

f. 모집 중 정보 영역

• 글쓰기(WR) 페이지에서 선택한 ‘팀원모집’ 정보가 노출된다 (Badge로 렌더링)
• 해당 정보는 ‘비 필수값’으로, 입력한 정보가 있을 때만 노출한다. 만약 입력한 정보가 없다면, 해당 영역은 숨김처리 한다 (해당 영역의 높이가 줄어든 만큼, 하단 컨텐츠가 위로 당겨짐)
• 모집 중 목록은 최대 10개까지 선택 가능하지만, 피드 게시글에서는 최대 5개까지만 보여준다. 실제로 선택한 모집 중 목록이 6개 이상이라면, ‘등’ 으로 표시하며, 피드에는 글쓰기(WR)페이지에서 먼저 선택된 5개를 보여준다. -> 7개라면 5개 표시하고 등 대신 +2 모집중 태그 으로 변경
  i. 댓글, 평가, 스크랩, 조회자 현황 (아이콘 디자인 필요)
• 해당 글에 대한 댓글/평가/스크랩의 숫자를 보여준다
• 숫자는 ‘피드’를 불러오는 시점을 기준으로 한다 (페이지를 새로고침 해야 새로운 숫자를 불러옴)
• 최대 999 까지 노출하며, 실제 숫자가 그보다 크다면, ‘999+’ 로 표시한다
• 인터렉션 기능은 없다 (해당 영역 클릭해도 아무일도 일어나지 않음)
  • 댓글/평가는 게시글 상세에서 가능

j. 스크랩 아이콘 (디자인 필요)

• 내가 쓴 글이라면 노출하지 않는다
• 디폴트 비활성화
• 비활성화 상태에서 선택 시, 스크랩 아이콘 활성화
• 활성화 상태에서 선택 시, 스크랩 아이콘 비활성화
  • 각각, 내 스크랩 목록에 등록/삭제 한다
• 삭제된 글이라면, 알럿창 띄우며, 스크랩이 되지 않는다 : 게시글이 삭제되었습니다

k. 필터 아이콘 (헤더 부분)

• 선택 시 필터 팝업을 호출한다 (FT)
• 해당 아이콘은 공통 영역에 있지만, ‘피드(FD)’ 화면에서만 노출한다

l. 게시글 최근 수정 날짜 노출

• 게시글을 등록하거나, 최근에 업데이트한 날짜를 노출한다
• 24시간 이내 등록한 댓글은 ‘시간’ 단위
• 등록한지 24시간이 지났으면, 등록한 일자로 노출한다.

🙋🏻 More

No response