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

src/app/(root)/[teamid]/_domain/components/Member/MemberSection.module.css

@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin-top: 44px;
 }
 
 .header {

src/app/(root)/[teamid]/_domain/components/Team/TeamDashboard.module.css

@@ -33,6 +33,21 @@
   gap: 16px;
 }
 
+.listLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 38px;
+  width: 100%;
+  margin-top: 44px;
+  background-color: var(--color-text-primary);
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-inverse);
+  text-decoration: none;
+}
+
 @media (max-width: 1280px) {
   .content {
     flex-direction: column;

src/app/(root)/[teamid]/_domain/components/Team/TeamDashboard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { useQuery, useQueries } from '@tanstack/react-query';
 import KanbanBoard from '../Kanban/KanbanBoard';
@@ -124,6 +125,9 @@ export default function TeamDashboard() {
         </div>
 
         <aside className={styles.rightPanel}>
+          <Link href={`/list?groupId=${teamid}`} className={styles.listLink}>
+            리스트 보기
+          </Link>
           <MemberSection
             members={group.members ?? []}
             isAdmin={isAdmin}

src/app/(root)/[teamid]/_domain/components/Team/TeamDashboardClient.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const TeamDashboard = dynamic(() => import('./TeamDashboard'), {
+  ssr: false,
+});
+
+export default function TeamDashboardClient({ teamid }: { teamid: string }) {
+  return <TeamDashboard key={teamid} />;
+}

src/app/(root)/[teamid]/page.tsx

@@ -1,14 +1,21 @@
-'use client';
+import type { Metadata } from 'next';
+import TeamDashboardClient from './_domain/components/Team/TeamDashboardClient';
 
-import dynamic from 'next/dynamic';
-import { useParams } from 'next/navigation';
+export const metadata: Metadata = {
+  title: 'Coworkers — 팀 대시보드',
+  description: '팀원과 함께 할 일을 관리하고 칸반보드로 업무 현황을 한눈에 확인하세요.',
+  openGraph: {
+    title: 'Coworkers — 팀 대시보드',
+    description: '팀원과 함께 할 일을 관리하고 칸반보드로 업무 현황을 한눈에 확인하세요.',
+    type: 'website',
+    locale: 'ko_KR',
+  },
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
 
-const TeamDashboard = dynamic(() => import('./_domain/components/Team/TeamDashboard'), {
-  ssr: false,
-});
-
-export default function TeamPage() {
-  const params = useParams<{ teamid: string }>();
-
-  return <TeamDashboard key={params?.teamid} />;
+export default function TeamPage({ params }: { params: { teamid: string } }) {
+  return <TeamDashboardClient teamid={params.teamid} />;
 }

src/app/(root)/addteam/page.tsx

@@ -1,5 +1,21 @@
+import type { Metadata } from 'next';
 import NoTeamState from './_domain/components/NoTeamState';
 
+export const metadata: Metadata = {
+  title: 'Coworkers — 팀 추가',
+  description: '새로운 팀을 만들거나 기존 팀에 참가하세요. Coworkers로 팀 협업을 시작하세요.',
+  openGraph: {
+    title: 'Coworkers — 팀 추가',
+    description: '새로운 팀을 만들거나 기존 팀에 참가하세요.',
+    type: 'website',
+    locale: 'ko_KR',
+  },
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
 export default function AddTeamPage() {
   return <NoTeamState />;
 }

src/app/(root)/list/_hooks/useInitialGroupId.ts

@@ -0,0 +1,8 @@
+import { useSearchParams } from 'next/navigation';
+
+// URL 쿼리 파라미터 groupId에서 초기 활성 그룹 ID를 읽어오는 훅
+export function useInitialGroupId(): number | undefined {
+  const searchParams = useSearchParams();
+  const id = Number(searchParams.get('groupId'));
+  return id > 0 ? id : undefined;
+}

src/app/(root)/list/page.tsx

@@ -1,9 +1,17 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react';
+import {
+  Suspense,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
 import Image from 'next/image';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
+import { useInitialGroupId } from './_hooks/useInitialGroupId';
 
 import styles from './list.module.css';
 
@@ -401,7 +409,7 @@ const EDIT_TEAM_PATH = (groupId: number) => `/teams/${groupId}/edit`;
 
 type CreateTaskListResult = { id: number };
 
-export default function ListPage() {
+function ListPage() {
   const router = useRouter();
   const qc = useQueryClient();
   const desktopSidebarRef = useRef<HTMLDivElement | null>(null);
@@ -445,7 +453,10 @@ export default function ListPage() {
   }, [me?.memberships]);
 
   const [activeGroupIdState, setActiveGroupIdState] = useState<number | undefined>(undefined);
-  const activeGroupId = activeGroupIdState ?? groups[0]?.id ?? 0;
+  const urlGroupId = useInitialGroupId();
+
+  // URL 파라미터 → 유저 선택 → 첫 번째 그룹 순으로 활성 그룹 결정
+  const activeGroupId = activeGroupIdState ?? urlGroupId ?? groups[0]?.id ?? 0;
 
   const activeGroup = useMemo(
     () => groups.find((g) => g.id === activeGroupId) ?? null,
@@ -1557,3 +1568,11 @@ export default function ListPage() {
     </main>
   );
 }
+
+export default function ListPageRoot() {
+  return (
+    <Suspense>
+      <ListPage />
+    </Suspense>
+  );
+}