리스트페이지 이동하기 구현

[Jieunsse]

Summary

• 팀 페이지에서 리스트페이지로 이동하는 버튼을 만들었습니다.

그 과정에서 공통컴포넌트인 list 페이지에 커스텀 훅을 추가하고 Params 설정을 진행했습니다.

[gemini-code-assist]

Summary of Changes

Hello @Jieunsse, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 팀 대시보드에서 리스트 페이지로의 사용자 경험을 개선하는 데 중점을 둡니다. 팀 페이지에서 현재 팀의 컨텍스트를 유지한 채 리스트 페이지로 직접 이동할 수 있는 기능을 추가하여, 사용자가 원하는 팀의 할 일 목록을 더 빠르게 확인할 수 있도록 합니다. 이를 위해 URL 파라미터 처리 로직을 도입하고, Next.js의 클라이언트 컴포넌트 렌더링 방식을 활용하여 안정성을 높였습니다. 또한, 페이지의 검색 엔진 최적화를 위한 메타데이터도 함께 추가되었습니다.

Highlights

• 리스트 페이지 이동 버튼 추가: 팀 대시보드 페이지에 리스트 페이지로 바로 이동할 수 있는 '리스트 보기' 버튼을 추가했습니다.
• URL 파라미터를 통한 그룹 ID 전달: 리스트 페이지로 이동 시 현재 팀의 groupId를 URL 쿼리 파라미터로 전달하도록 구현했습니다.
• 초기 그룹 ID 처리 로직 개선: 리스트 페이지에서 URL 쿼리 파라미터로 전달된 groupId를 읽어와 초기 활성 그룹을 설정하는 커스텀 훅 useInitialGroupId를 추가하고, 이를 ListPage에 적용하여 URL 파라미터, 사용자 선택, 첫 번째 그룹 순으로 활성 그룹을 결정하도록 했습니다.
• 클라이언트 컴포넌트 분리 및 SSR 최적화: TeamDashboard 컴포넌트를 TeamDashboardClient로 감싸 next/dynamic을 사용하여 클라이언트 사이드에서만 렌더링되도록 분리하여 useParams와 같은 훅 사용 시 발생할 수 있는 문제를 방지했습니다.
• 페이지 메타데이터 추가: 팀 대시보드 페이지 ([teamid]/page.tsx)와 팀 추가 페이지 (addteam/page.tsx)에 SEO 및 Open Graph를 위한 메타데이터를 추가했습니다.
• CSS 스타일 조정: MemberSection의 상단 마진을 제거하고, 새로운 '리스트 보기' 버튼에 대한 스타일을 TeamDashboard.module.css에 추가했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/app/(root)/[teamid]/_domain/components/Member/MemberSection.module.css
  • 메인 컨테이너에서 margin-top 속성을 제거했습니다.
• src/app/(root)/[teamid]/_domain/components/Team/TeamDashboard.module.css
  • 새로운 리스트 페이지 링크 버튼을 위한 .listLink 스타일을 추가했습니다.
• src/app/(root)/[teamid]/_domain/components/Team/TeamDashboard.tsx
  • next/link를 임포트했습니다.
  • 팀 대시보드에 groupId 파라미터를 포함하여 리스트 페이지로 이동하는 '리스트 보기' Link 컴포넌트를 추가했습니다.
• src/app/(root)/[teamid]/_domain/components/Team/TeamDashboardClient.tsx
  • TeamDashboard 컴포넌트를 동적으로 임포트하고 클라이언트 사이드에서만 렌더링하는 TeamDashboardClient 컴포넌트를 새로 추가했습니다.
• src/app/(root)/[teamid]/page.tsx
  • Next.js Metadata를 추가했습니다.
  • TeamDashboard 대신 TeamDashboardClient를 사용하여 teamid를 prop으로 전달하도록 변경했습니다.
• src/app/(root)/addteam/page.tsx
  • Next.js Metadata를 추가했습니다.
• src/app/(root)/list/_hooks/useInitialGroupId.ts
  • URL 쿼리 파라미터에서 groupId를 추출하는 커스텀 훅 useInitialGroupId를 새로 추가했습니다.
• src/app/(root)/list/page.tsx
  • Suspense와 useInitialGroupId 훅을 임포트했습니다.
  • ListPage 컴포넌트를 기본 내보내기에서 명명된 내보내기로 변경하고, Suspense로 감싼 ListPageRoot 컴포넌트를 기본 내보내기로 설정했습니다.
  • 활성 그룹 ID 결정 로직에 useInitialGroupId를 통합하여 URL 파라미터의 groupId를 우선적으로 사용하도록 변경했습니다.

Activity

• 이 PR은 현재까지 특별한 리뷰 활동이나 코멘트가 기록되지 않았습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 풀 리퀘스트는 팀 대시보드에서 리스트 페이지로 이동하는 기능을 구현합니다. next/link를 사용하여 리스트 페이지로의 내비게이션을 추가하고, teamid를 쿼리 파라미터로 전달합니다. 리스트 페이지에서는 새로운 커스텀 훅 useInitialGroupId를 통해 URL 쿼리 파라미터에서 초기 그룹 ID를 읽어와 활성 그룹을 결정하는 로직을 개선했습니다. 또한, TeamDashboard 컴포넌트를 TeamDashboardClient로 래핑하여 클라이언트 사이드 렌더링을 명확히 하고, TeamPage와 AddTeamPage에 Next.js Metadata를 추가하여 SEO를 개선했습니다. 전반적으로 잘 구조화되고 Next.js 모범 사례를 따르는 변경 사항입니다.