[feat] 4차 api 연동

[alwubin]

이슈 넘버

• close [feat] 4차 api 연동 #63

구현 사항

• 관리자 홈 api 연동
  • 태그 색상 랜덤 발급 로직에서 중복되지 않도록 수정하기
• 사용자 홈 api 연동
  • 사용자 api 부분 오류 해결 예정
  • 사용자 면접 관리 api 아직 안나와서 구현 예정

Need Review

• ssr 도입 방법을 바탕으로 구현했습니다! 부족한 부분 있으면 바로 코멘트 남겨주세요!
• ssr 도입 후 페이지 부분이 이전보다 약간(?) 복잡하다고 느껴지는데 이 부분 확인하고 가독성이나 로직 부분에서 피드백 부탁드립니다!
• 구현 사항에도 작성했듯이, 아직 백엔드에서 답변 온게 없어서 기다리다가 미리 pr 작성했습니다! 추후 답변 오는대로 구현해서 pr 머지 전에 푸쉬할겠습니다!!!

📸 스크린샷

Reference

[github-actions]

🚀 Storybook 확인하기 🚀

• 🔗 Build 결과 확인
• 🔍 Storybook 미리보기

[cindy-chaewon]

너무너무 수고했어용~~!! 유빈언니 최고!!
홈화면 기본 구조를 바꾸면 좋을 거 같아서 제 생각 남겨봅니다..!!

지금 홈화면 관련 코드가

1. app/(main)/_components/home/... 에 대시보드용 컴포넌트를 두고,
2. app/(main)/page.tsx 에서 직접 쿠키 보고 queryClient.fetchQuery 로 SSR 데이터 가져온 뒤 바로 JSX를 반환하는 구조인데,

제가 제안 드리는 디렉토리 구조는 다음과 같아요~!

src/app/
│
│
├─ (main)/              
│   ├─ layout.tsx       
│   ├─ page.tsx         # “/” → 대시보드 리다이렉트
│   │
│   ├─ dashboard/ 
|   |   |_ _components/  # 둘 다 쓰는 공통 컴포넌트
|   |   |
│   │   ├─ admin/
│   │   │   └─ page.tsx  # 관리자 대시보드 
│   │   └─ user/
│   │       └─ page.tsx  # 사용자 대시보드

별도의 퍼블릭 랜딩 페이지가 없고
저희 위더스의 첫 진입이 로그인 → 대시보드(홈) 흐름이라면
/ 자체를 “로그인 여부에 따라 대시보드로 보내는 gate”로 쓰는게 각 페이지마다 권한 체크/SSR 로직을 더 깔끔히 쓸 수 있을 거 같아요

즉,
루트 페이지에서는

import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'

export default function RootPage() {
  const role = cookies().get('role')?.value

  if (role === 'ADMIN') {
    redirect('/dashboard/admin')
  } else {
    redirect('/dashboard/user')
  }
}

이런식으로 role에 따라 대시보드로 바로 보내는 리다이렉트 코드만 작성하고
관리자/ 사용자 폴더 url 폴더에다가
각각의 Page에 관한 코드들을 두는게 어떨까용?!

---

ssr 데이터 페칭 패턴 관련 인데용..!
지금 유빈님 코드가

export default async function Page() {
  const tokens = await getServerSideTokens()
  const queryClient = getQueryClient()

  const summaries = await queryClient.fetchQuery(summaryOptions)
  if (!summaries.length) return <EmptyScreen/>
  return (
    <ServerFetchBoundary fetchOptions={summaryOptions}>
      <AdminHomeDashboardScreen…/>
    </ServerFetchBoundary>
  )
}

이렇게 직접 fetchQuery → 데이터 꺼내고 일부만 ServerFetchBoundary에 넘기는 걸 볼 수 있는데
관리자 코드 외의 사용자 관련 get api 도 넘겨야 해요!
즉,
전체 SSR fetchOptions 배열로 ServerFetchBoundary에 넘겨야 합니다! (클라이언트 컴포넌트에서는 useSuspenseQuery만 사용)

간단하게만 예시를 들면.. api 요청이 많은 사용자 홈화면에서
app/(main)/dashboard/user/page.tsx

export default async function UserPage() {
  const roleRaw = (await cookies()).get('role')?.value

  const tokens = await getServerSideTokens()
  const orgOptions = getOrganizationsMeQueryOptions(tokens)
  const orgs = await orgOptions.queryFn!()

  const orgId = orgs[0].id
  const summaryOptions = getRecruitmentsCurrentSummaryQueryOptions(orgId, tokens)
  const summaries = await summaryOptions.queryFn!()

  const recruitmentId = summaries[0].recruitmentId
  const docEvalOptions = getMyDocumentEvaluationsQueryOptions(recruitmentId, tokens)

  return (
    <ServerFetchBoundary
      fetchOptions={[orgOptions, summaryOptions, docEvalOptions]}
    >
      <UserHomeDashboardScreen tokens={tokens} />
    </ServerFetchBoundary>
  )
}

약간.. 요런 형식 으로 배열에 넘겨주시면 됩니당!
ServerFetchBoundary 에 배열 형태로 여러 fetchOptions 를 넘겨 두면, 내부에서 한 번에 fetchQuery 후 hydrate 해줄거에요!

제가 제안드린건 단순히 이렇게 하면 더 좋을 거 같다는 제 생각일 뿐이어서 더 좋은 폴더 구조나 방법이 있으면 그 방법으로 유빈님께서 리팩토링 하셔도 좋을 거 같아용!
리팩토링하시구.. 백엔드에서 api 수정한거 까지해서 푸시해주시면 그때 다시 리뷰 하겠슴당! 홧팅!!

[github-actions]

🚀 Storybook 확인하기 🚀

• 🔗 Build 결과 확인
• 🔍 Storybook 미리보기

[alwubin]

확인했습니다! 처음에 루트 페이지에 작성하면서도 이렇게 루트 페이지 자체에 복잡하게 작성해도 되나 싶었는데, 채원님 리뷰 덕분에 깔끔하게 해결하게 된거 같네요ㅎㅎ👍 역시 최고에 프론트..!!!!!!!! 해당 리뷰 반영해서 수정하였습니다!
dce0099