[Feat] WTH-249 : 출석 api 연결

package.json

@@ -62,6 +62,7 @@
     "lucide-react": "^0.468.0",
     "next": "16.1.6",
     "posthog-js": "^1.364.4",
+    "qr-code-styling": "^1.9.2",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",

src/app/(private)/(main)/attendance/history/page.tsx

@@ -1,55 +1,26 @@
+import { cookies } from 'next/headers';
+
 import { AttendanceHistoryContent } from '@/components/attendance';
+import { CLUB_ID_KEY } from '@/lib/apis/cookies';
+import { attendanceServerApi } from '@/lib/apis/attendance.server';
 import type { AttendanceSummary } from '@/types/attendance';
 
-// TODO: API 연동 시 실제 데이터로 교체
-const mockSummary: AttendanceSummary = {
-  total: 5,
-  attendanceCount: 3,
-  absenceCount: 2,
-  attendances: [
-    {
-      id: 5,
-      status: 'ABSENT',
-      title: '5주차 정기모임',
-      start: '2026-02-23T10:00:00.000Z',
-      end: '2026-02-23T12:00:00.000Z',
-      location: '공학관 401호',
-    },
-    {
-      id: 4,
-      status: 'ATTEND',
-      title: '4주차 정기모임',
-      start: '2026-02-16T10:00:00.000Z',
-      end: '2026-02-16T12:00:00.000Z',
-      location: '공학관 401호',
-    },
-    {
-      id: 3,
-      status: 'ABSENT',
-      title: '3주차 정기모임',
-      start: '2026-02-09T10:00:00.000Z',
-      end: '2026-02-09T12:00:00.000Z',
-      location: '공학관 401호',
-    },
-    {
-      id: 2,
-      status: 'ATTEND',
-      title: '2주차 정기모임',
-      start: '2026-02-02T10:00:00.000Z',
-      end: '2026-02-02T12:00:00.000Z',
-      location: '공학관 401호',
-    },
-    {
-      id: 1,
-      status: 'ATTEND',
-      title: '1주차 정기모임',
-      start: '2026-01-26T10:00:00.000Z',
-      end: '2026-01-26T12:00:00.000Z',
-      location: '공학관 401호',
-    },
-  ],
-};
+export default async function AttendanceHistoryPage() {
+  const clubId = (await cookies()).get(CLUB_ID_KEY)?.value;
+
+  let summary: AttendanceSummary | undefined;
+  let errorMessage: string | undefined;
+
+  if (!clubId) {
+    errorMessage = '동아리 정보를 찾을 수 없습니다.';
+  } else {
+    try {
+      const response = await attendanceServerApi.getDetail(clubId);
+      summary = response.data;
+    } catch {
+      errorMessage = '출석 기록을 불러오지 못했습니다.';
+    }
+  }
 
-export default function AttendanceHistoryPage() {
-  return <AttendanceHistoryContent summary={mockSummary} />;
+  return <AttendanceHistoryContent summary={summary} errorMessage={errorMessage} />;
 }

src/app/(private)/(main)/attendance/page.tsx

@@ -1,25 +1,39 @@
+import { cookies } from 'next/headers';
+
 import { AttendanceContent } from '@/components/attendance';
+import { CLUB_ID_KEY } from '@/lib/apis/cookies';
+import { attendanceServerApi } from '@/lib/apis/attendance.server';
 import type { AttendanceData } from '@/types/attendance';
 
-// TODO: API 연동 시 실제 데이터로 교체
-function createMockAttendance(): AttendanceData {
-  const now = new Date();
-  const start = now;
-  const end = new Date(now.getTime() + 10 * 60 * 1000); // 10분 후
-
-  return {
-    attendanceRate: 80,
-    title: '1주차 정기모임',
-    status: 'ATTEND',
-    code: 123456,
-    start: start.toISOString(),
-    end: end.toISOString(),
-    location: '공학관 401호',
-  };
+interface AttendancePageProps {
+  searchParams: Promise<{ sessionId?: string; code?: string }>;
 }
 
-export default function AttendancePage() {
-  // TODO: API 연동 시 실제 사용자 이름으로 교체
-  const displayName = '사용자';
-  return <AttendanceContent name={displayName} attendance={createMockAttendance()} />;
+export default async function AttendancePage({ searchParams }: AttendancePageProps) {
+  const { sessionId: qrSessionId, code: qrCode } = await searchParams;
+
+  const clubId = (await cookies()).get(CLUB_ID_KEY)?.value;
+
+  let attendance: AttendanceData | undefined;
+  let errorMessage: string | undefined;
+
+  if (!clubId) {
+    errorMessage = '동아리 정보를 찾을 수 없습니다.';
+  } else {
+    try {
+      const response = await attendanceServerApi.getAttendance(clubId);
+      attendance = response.data;
+    } catch {
+      errorMessage = '출석 정보를 불러오지 못했습니다.';
+    }
+  }
+
+  return (
+    <AttendanceContent
+      attendance={attendance}
+      errorMessage={errorMessage}
+      qrSessionId={qrSessionId}
+      qrCode={qrCode}
+    />
+  );
 }

src/app/(private)/(main)/attendance/qr/page.tsx

@@ -1,18 +1,31 @@
-import { AttendanceQRContent } from '@/components/attendance';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
 
-// TODO: API 연동 시 실제 데이터로 교체
-function createMockQRData() {
-  const now = new Date();
-  const end = new Date(now.getTime() + 10 * 60 * 1000); // 10분 후
+import { AttendanceQRContent } from '@/components/attendance';
+import { CLUB_ID_KEY } from '@/lib/apis/cookies';
+import { homeServerApi } from '@/lib/apis/home.server';
 
-  return {
-    title: '1주차 정기모임',
-    code: '123456',
-    endTime: end.toISOString(),
-  };
+interface AttendanceQRPageProps {
+  searchParams: Promise<{ sessionId?: string }>;
 }
 
-export default function AttendanceQRPage() {
-  const { title, code, endTime } = createMockQRData();
-  return <AttendanceQRContent title={title} code={code} endTime={endTime} />;
+export default async function AttendanceQRPage({ searchParams }: AttendanceQRPageProps) {
+  const { sessionId: rawSessionId } = await searchParams;
+  const sessionId = Number(rawSessionId);
+
+  if (!Number.isInteger(sessionId) || sessionId <= 0) {
+    redirect('/attendance');
+  }
+
+  const clubId = (await cookies()).get(CLUB_ID_KEY)?.value;
+  if (!clubId) redirect('/attendance');
+
+  const { data } = await homeServerApi.getDashboard(clubId);
+  const role = data.myInfo.userInfo.role;
+
+  if (role !== 'LEAD' && role !== 'ADMIN') {
+    redirect('/attendance');
+  }
+
+  return <AttendanceQRContent sessionId={sessionId} />;
 }

src/app/(private)/(main)/layout.tsx

@@ -1,18 +1,31 @@
 import type { ReactNode } from 'react';
+import { cookies } from 'next/headers';
 
+import { homeServerApi } from '@/lib/apis/home.server';
+import { CLUB_ID_KEY } from '@/lib/apis/cookies';
+import { UserHydrator } from '@/providers/user-hydrator';
 import { ClubGuard, Header } from '@/components/layout';
 
-export default function MainLayout({
+export default async function MainLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const clubId = (await cookies()).get(CLUB_ID_KEY)?.value;
+  if (!clubId) return null;
+
+  const { data } = await homeServerApi.getDashboard(clubId);
+  const { userInfo } = data.myInfo;
+  const { id: resolvedClubId, name: clubName } = data.club;
+
   return (
     <ClubGuard>
-      <div className="mx-auto flex h-screen max-w-[1440px] flex-col">
-        <Header />
-        {children}
-      </div>
+      <UserHydrator userInfo={userInfo} clubInfo={{ clubId: resolvedClubId, clubName }}>
+        <div className="mx-auto flex h-screen max-w-[1440px] flex-col">
+          <Header />
+          {children}
+        </div>
+      </UserHydrator>
     </ClubGuard>
   );
 }