부적절한 API 요청 버그, 신고 목록 페이지네이션 버그 수정 및 Table, UserProfile UI 개선

[inyeong-kang]

🔥 연관 이슈

close: #830
close: #814
close: #813
close: #786

📝 작업 요약

• 비회원 상태에서 내가 투표한 글, 내가 작성한 글 API 요청이 가지 않도록 getPostList 함수에 로직을 추가했습니다.
• 관리자 기능 중 공지사항 테이블과 신고 목록 테이블 맨 앞에 각각 순번이라는 열을 추가했습니다.
• 신고 목록이 페이지네이션되지 않는 버그를 해결했습니다.
• UserProfile에서 닉네임이 긴 경우 말줄임표를 추가하도록 했습니다.

⏰ 소요 시간

4시간

🔎 작업 상세 설명

기존에 우스가 만드신 usePagination hook을 활용하여 신고 목록을 페이지네이션했습니다.

🌟 논의 사항

1. 현재 신고 목록에서 다음 목록을 불러오기 위해 버튼을 누르면, (예를 들어 현재 1페이지인데 2페이지를 보려고 하면) Skeleton이 나와야 하는데.. 제대로 뜨지 않는 것 같습니다. AdminNoticeTableFetcher와 동일하게 Suspense로 테이블을 감싸줬는데.. 혹시 원인을 아신다면 알려주시면 감사하겠습니다!
2. 혹시 관리자 공지사항 목록 페이지에 > 버튼이랑 < 버튼이 보이지 않는데 버그인지? 아니면 의도하신건지 궁금해요!
   

[github-actions]

⚡️ Lighthouse report!

Category	Score
🟠 Performance	82
🟠 Accessibilty	89
🟢 SEO	100
🟠 PWA	89

Category	Score
🟢 First Contentful Paint	0.6 s
🟠 Largest Contentful Paint	2.8 s
🟠 Total Blocking Time	510 ms
🟢 Cumulative Layout Shift	0.046
🟢 Speed Index	3.0 s

[Gilpop8663]

제안하고 싶은 것

1. 신고 예정 목록에서 내용을 눌렀을 때 해당 게시글로 갔으면 좋겠어요

 const reportDetail = {
...,
    return {
      ...report,
      target:
        report.typeName === '게시글' ? (
          <Link to={`${PATH.POST}/${report.target}`}>내용 보러가기</Link>
        ) : (
          report.target
        ),

2. 공지사항 목록에서 제목을 눌렀을 때 해당 공지사항으로 갔으면 좋겠어요

      <Table
        columns={columnList}
        rows={data.noticeList.map(
          ({ id, title, content, bannerTitle, bannerSubtitle, createdAt, deadline }, index) => ({
            id: index + 1,
            title: <Link to={`${PATH.NOTICES}/${id}`}>{truncateText(title)} 보러가기</Link>,

의논사항

현재 신고 목록에서 다음 목록을 불러오기 위해 버튼을 누르면, (예를 들어 현재 1페이지인데 2페이지를 보려고 하면) Skeleton이 나와야 하는데.. 제대로 뜨지 않는 것 같습니다. AdminNoticeTableFetcher와 동일하게 Suspense로 테이블을 감싸줬는데.. 혹시 원인을 아신다면 알려주시면 감사하겠습니다!

우선 키에 관련된 에러가 나는데요 이것 때문인지는 모르겠지만 key를 어디에 줘야 되는지도 잘 모르겠더라구요.

그리고 suspense의 위치를 옮기니 보여지는데 이유는 잘 모르겠습니다 ㅠ

2023-11-01.10.52.46.mov

export default function PendingReportPage() {
  return (
    <Layout isSidebarVisible={false}>
      <Suspense fallback={<Skeleton isLarge />}>
        <S.Wrapper>
          <S.PageTitle>신고 조치 예정 목록</S.PageTitle>
          <PendingReportTableFetcher />
          <S.ButtonContainer>
            <UpButton onClick={smoothScrollToTop} />
          </S.ButtonContainer>
        </S.Wrapper>
      </Suspense>
    </Layout>
  );
}

---

혹시 관리자 공지사항 목록 페이지에 > 버튼이랑 < 버튼이 보이지 않는데 버그인지? 아니면 의도하신건지 궁금해요!

네 5페이지로 설정했다면 6페이지가 존재할 때 > 가 보이고, 1~5 페이지일땐 <가 보이지 않도록 했어요.

그렇게 한 이유는 1~5까지 숫자 버튼이 있는데 > 버튼으로 한 페이지씩 이동한다면 11페이지로 가고 싶을 때 5페이지 클릭, > 클릭하여 6페이지 , 10페이지 클릭, > 클릭하여 11페이지라서 불편하다고 느꼈습니다.

[Gilpop8663]

fe-리뷰완

[inyeong-kang]

신고 목록/공지사항에서 제목 누르면 상세페이지로 이동할 수 있도록 변경했습니다!!

[Warning: Each child in a list should have a unique "key" prop.] 오류는 어디가 원인인지 저도 파악이 안되네요..... 🤔🤔

++jest 실행 시간 최적화 pr 관련된 File Changed 도 포함되어 있는데 무시해주세요...!! (충돌 해결했는데 왜 이 브랜치에 같이 올라갔는지 영문을 모르겠네요..?)

fe-리뷰요청

[chsua]

말줄임 유틸함수 너무 좋네요.
우스의 훅을 재활용한 것도 좋고 신고 확인할 때 페이지로 바로 이동할 수 있도록 만든것도 너무 좋습니다.
bb 고생하였습니다

ps. 우스 답변 중 아래 부분이 이해가 가지 않아요. >, <가 1페이지 이동이 아닌 5페이지씩 이동하는 것을 말씀하신 걸까요??

> 혹시 관리자 공지사항 목록 페이지에 > 버튼이랑 < 버튼이 보이지 않는데 버그인지? 아니면 의도하신건지 궁금해요!

네 5페이지로 설정했다면 6페이지가 존재할 때 > 가 보이고, 1~5 페이지일땐 <가 보이지 않도록 했어요.

그렇게 한 이유는 1~5까지 숫자 버튼이 있는데 > 버튼으로 한 페이지씩 이동한다면 11페이지로 가고 싶을 때 5페이지 클릭, > 클릭하여 6페이지 , 10페이지 클릭, > 클릭하여 11페이지라서 불편하다고 느꼈습니다.```

[chsua]

👍👍👍

[chsua]

오 닉네임 넘어가는거 자르셨군요👍

[chsua]

fe-리뷰완