[ Feat ] my page - study 관리 탭 구현

[ptyoiy]

#️⃣ Related Issue

Closes #121

✅ Done Task

• api response type 작성 (api/group/type.ts - StudyGroupResponse)
• 테이블 구현 및 api에 맞게 수정
• 정렬, 필터링 기능 구현
• 공통 컴포넌트에 누락된 접근성 속성 적용

☀️ New-insight

• api response type
  StudyGroupListsResponse type에 status(bookmarked, done, inProgress, queued)속성이 없네요. status는 lists로 받아올 수 있던데 아래처럼 되어 있어서 각 프로퍼티에 status 속성을 만들어서 사용해야 되겠어요.

  export type StudyGroupListsResponse = {
    bookmarked: StudyGroupResponse[];
    done: StudyGroupResponse[];
    inProgress: StudyGroupResponse[];
    queued: StudyGroupResponse[];
  };

• 다중 조건 정렬
  isBookmarked와 기간 속성의 경우 정렬을 넣어야 하는데, 둘을 따로 따로 적용하게 하는 건 사용자 입장에서 좀 불편하겠다 싶어서 정렬 조건을 중첩할 수 있게 했습니다.
  여기서 중요한 것은 boolean타입이 다중 조건으로 사용될 경우 boolean을 제일 먼저 적용해야 한다는 것입니다. 먼저 true/false로 나눈 뒤에 true인 것에서 나머지 정렬 조건을 적용하고, false인 것에서 나머지 정렬 조건을 적용하는 식으로 하지 않으면 boolean타입의 정렬 조건이 풀려버리는 이슈가 있습니다. 이를 해결하기 위해 정렬 조건 중 isBookmark가 맨 앞으로 오게 sortCriteria를 정렬하여 해결했습니다.

💎 PR Point

• 중점적으로 볼 부분

1. view/user/setting/StudyList/StudyListTable/constant.tsx
   테이블의 header와 body에 들어갈 내용에 관한 메타데이터가 들어있습니다. Header, Cell은 각각 테이블 header와 body에 들어갈 컴포넌트 내용이니 주로 이 부분만 보시면 되겠습니다.
2. 폴더 구조 및 내용
   view/user/setting/StudyList에 있는 것만 중점적으로 보시면 되겠습니다.
   • SortIcon : 정렬 아이콘 컴포넌트
   • StatusDropdonwMenu : status(bookmarked, done, inProgress, queued) 드롭다운 메뉴 컴포넌트
   • StatusIcon : bookmarked, done, inProgress, queued 아이콘 표시 컴포넌트
   • StudyListTable : 테이블, 테이블 컬럼(메타 데이터), 데이터 처리용 context api 및 hook

• 구조

  • 테이블 data processing용 context (view/user/setting/StudyList/StudyListTable/StudyListProvider.tsx)
    • reducer
      정렬 기준과 filter(status)값을 교체할 수 있습니다. 정렬 기준은 동일한 key가 들어올 경우 asc-desc-제거 순서로 값이 변경됩니다. filter는 동일한 값이 들어오면 토글되고, 다른 값이 들어오면 그걸로 교체됩니다.
    • provider
      테이블에 표시할 데이터를 전처리하여 context로 내보내는 역할을 합니다. 전처리 순서는 성능 상 filter를 먼저 해서 요소 수를 줄인 뒤에 sort를 하는 게 좋겠다고 생각하여 filter를 먼저 합니다. filter는 필터링할 조건이 없다면 모든 요소를 반환합니다. sort는 정렬 기준이 boolean과 date(number) 타입 뿐이라 둘 만 체크합니다.
      context의 리렌더링 이슈를 위해 dispatch와 data+state를 분리하여 provider를 나눠 쓰도록 했습니다. 이를 통해 dispatch만 사용하는 컴포넌트는 data가 변경돼도 리렌더링이 발생하지 않는다는 장점이 있지요.
  • 테이블 메타데이터(view/user/setting/StudyList/StudyListTable/constant.tsx)
    설명이 필요할 것 같은 부분만 서술합니다.
    • isBookmarked, startDate
      정렬 기능이 필요한 즐찾 버튼입니다. 헤더 컴포넌트의 경우 dispatch context를 사용하여 클릭 시 정렬 기준을 추가하도록 하였습니다. sort icon의 정렬 방향을 표시하기 위해 state context도 사용됩니다.
    • isPublic (공개 여부)
      api response type에 없는 속성이라 제 임의로 new Date(data.endDate) > new Date()이런 조건을 달아서 on off를 표시하게 했습니다. 이건 어떤 속성을 사용해야 되는지 알려주세요!

• 잡다한 변경사항

  • 스크롤 테이블
    figma 댓글에서 테이블은 무한 스크롤로 한다고 보았기에 sticky header와 스크롤을 적용했습니다. caption과 header를 같이 사용하다 보니 table body의 내용이 상단의 두 요소 사이 틈새에 표시되는 문제가 있어 backPanel을 두는 땜빵질을 했습니다. backPanel은 반응형으로 잘 맞춰 놔서 버그 없이 잘 표시됩니다.
  • tr 태그 hover 효과
    hover 효과 스타일은 table body의 tr에만 적용했습니다.
  • 누락된 접근성 속성
    메뉴 컴포넌트의 showMenu 컴포넌트에 click 이벤트만 넣었어서 keyDown도 추가했습니다.

📸 Screenshot

[j-nary]

[api response type 관련 New Insight에 관해서]

UserDashboard 에 있습니다!
해당 브랜치 머지되고 나서 수정 부탁드립니다!
이후 코리 진행하겠습니다 :)

ps. 브랜치명은 스네이크케이스 사용해주세요!

[wuzoo]

LGTM 입니다 ~

[j-nary]

LGTM 코리 하나만 확인해주세요!