[Feat][RPKM] Group GET

src/components/rpkm/components/group-picker.astro

@@ -1,11 +1,37 @@
 ---
+import GroupProfile from "@rpkm/rubpuen/GroupProfile";
+
 import Divider from "@/components/common/Divider.astro";
 import Frame from "@/components/common/Frame.astro";
+import { getGroupData } from "@/lib/groupAPI";
+import type { Group } from "@/types/common";
+
+const token = Astro.cookies.get("token")?.value;
 
-const sampleRoomCode = "UIA321";
-const sampleURL = "rpkm.sgcu.in.th/";
-const sampleHeadName = "มหาเทพ อสูรเพลิง (Lnw)";
-const sampleHeadID = "6812345678";
+let groupData = null;
+if (token) {
+  const response = await getGroupData(token);
+  if (response.success && response.data) {
+    groupData = response.data.data as Group;
+  }
+}
+
+if (!groupData) {
+  return Astro.redirect("/login");
+}
+
+const inviteCode = groupData.inviteCode;
+const headName =
+  groupData.owner.firstName +
+  " " +
+  groupData.owner.lastName +
+  " (" +
+  groupData.owner.nickname +
+  ")";
+const headId = groupData.owner.studentId;
+
+const member1 = groupData.memberCount > 1 ? groupData.users[1] : null;
+const member2 = groupData.memberCount > 2 ? groupData.users[2] : null;
 ---
 
 <!-- Default Wrapper -->
@@ -83,9 +109,9 @@ const sampleHeadID = "6812345678";
 
     <!-- Profile -->
     <div class="flex w-full justify-center gap-[10px] pt-6">
-      <img src="/images/rpkm/sample-profile.png" width="80" height="80" />
-      <img src="/images/rpkm/sample-blank.png" width="80" height="80" />
-      <img src="/images/rpkm/sample-blank.png" width="80" height="80" />
+      <GroupProfile user={groupData.owner} variant="red-star" />
+      <GroupProfile user={member1} variant="blue" />
+      <GroupProfile user={member2} variant="blue" />
     </div>
 
     <!-- Invite URL -->
@@ -105,7 +131,7 @@ const sampleHeadID = "6812345678";
               id="room-invite-url-head"
               class="h-[36px] w-full bg-transparent px-3 py-1 text-center text-lg font-medium text-[#0FF] outline-none"
             >
-              {sampleURL + sampleRoomCode}
+              {"rpkm.sgcu.in.th/" + inviteCode}
             </span>
             <img
               src="/images/rpkm/link-icon.svg"
@@ -135,7 +161,7 @@ const sampleHeadID = "6812345678";
               id="room-code-head"
               class="h-[36px] w-full bg-transparent px-3 py-1 text-center text-2xl font-semibold tracking-widest text-[#0FF] outline-none"
             >
-              {sampleRoomCode}
+              {inviteCode}
             </span>
             <img
               src="/images/rpkm/link-icon.svg"
@@ -259,8 +285,8 @@ const sampleHeadID = "6812345678";
 
         <!-- Name -->
         <div class="flex flex-col items-center pt-1">
-          <p class="text-xl font-semibold text-white">{sampleHeadName}</p>
-          <p class="text-white">{sampleHeadID}</p>
+          <p class="text-xl font-semibold text-white">{headName}</p>
+          <p class="text-white">{headId}</p>
         </div>
 
         <!-- Submit Button -->
@@ -310,7 +336,7 @@ const sampleHeadID = "6812345678";
         <!-- Information -->
         <div class="flex flex-col items-center gap-1 pt-4 text-white">
           <p class="text-2xl font-medium">คุณได้จับกลุ่มกับ</p>
-          <p class="text-xl font-semibold">{sampleHeadName}</p>
+          <p class="text-xl font-semibold">{headName}</p>
           <p class="text-2xl font-medium">สำเร็จแล้ว</p>
         </div>
       </div>

src/components/rpkm/components/profile.astro

@@ -1,22 +1,30 @@
 ---
+import UserProfile from "@rpkm/rubpuen/UserProfile";
+
 import { getProfile } from "@/lib/profileAPI";
 import type { User } from "@/types/common";
 
-import UserProfile from "../rubpuen/UserProfile";
-
 const token = Astro.cookies.get("token")?.value;
 
-let userProfile = null;
-if (token) {
+if (!token) {
+  return Astro.redirect("/login");
+}
+
+let user = null;
+try {
   const response = await getProfile(token);
   if (response.success && response.data) {
-    userProfile = response.data.user as User;
+    user = response.data.user as User;
+  } else {
+    console.error("Failed to fetch user data:", response.error);
   }
+} catch (error) {
+  console.error("Error fetching user data:", error);
 }
 
-if (!userProfile) {
+if (!user) {
   return Astro.redirect("/login");
 }
 ---
 
-{userProfile && <UserProfile user={userProfile} className="profile-avatar" />}
+<UserProfile user={user} className="profile-avatar" />

src/components/rpkm/rubpuen/GroupProfile.tsx

@@ -0,0 +1,53 @@
+import type { JSX } from "astro/jsx-runtime";
+
+import type { User } from "@/types/common";
+
+interface GroupProfileProps {
+  user: User | null;
+  variant?: "blue-star" | "red-star" | "blue" | "red";
+  className?: string;
+}
+
+const groupAvatarMap: Record<number, string> = {
+  1: "/images/rpkm/profile/robot-01.png",
+  2: "/images/rpkm/profile/robot-02.png",
+  3: "/images/rpkm/profile/robot-03.png",
+  4: "/images/rpkm/profile/robot-04.png",
+  5: "/images/rpkm/profile/robot-05.png",
+};
+
+export default function GroupProfile({
+  user,
+  variant = "red",
+  className = "",
+}: GroupProfileProps): JSX.Element {
+  const frameSvg = `/images/frame-profile-image/frame-profile-image-${variant}.svg`;
+
+  return (
+    <div
+      className={`user-profile ${className} flex flex-col items-center justify-center`}
+    >
+      <div className="relative flex h-[80px] w-[80px]">
+        <img
+          src={
+            user
+              ? groupAvatarMap[user.avatarId]
+              : "/images/rpkm/profile/profile-unknown.png"
+          }
+          alt="User Avatar"
+          // style={{
+          //   WebkitMaskImage: `url(${FRAME_MASK})`,
+          //   maskImage: `url(${FRAME_MASK})`,
+          //   WebkitMaskSize: "cover",
+          //   maskSize: "cover",
+          //   WebkitMaskRepeat: "no-repeat",
+          //   maskRepeat: "no-repeat",
+          //   objectFit: "cover",
+          //   maskMode: "luminance",
+          // }}
+        />
+        <img src={frameSvg} alt="Frame" className="absolute h-full w-full" />
+      </div>
+    </div>
+  );
+}

src/lib/groupAPI.ts

@@ -0,0 +1,28 @@
+import { type ApiResponse, api } from "@/lib/api";
+import { getAuthHeaders, getAuthToken } from "@/lib/auth";
+import type { Group } from "@/types/common";
+
+/**
+ * Fetches group data from the backend.
+ * @param authToken - Optional authentication token for server-side use.
+ * @returns ApiResponse from the backend.
+ */
+export async function getGroupData(
+  authToken?: string
+): Promise<ApiResponse<{ data: Group }>> {
+  const token = authToken || getAuthToken();
+  if (!token) {
+    return {
+      success: false,
+      error: "กรุณาเข้าสู่ระบบก่อนลงทะเบียน",
+    };
+  }
+
+  const response = await api.get<{ data: Group }>("/group", {
+    headers: getAuthHeaders(token),
+  });
+  if (!response.success) {
+    console.error("Failed to fetch group data:", response.error);
+  }
+  return response;
+}

src/lib/profileAPI.ts

@@ -1,5 +1,6 @@
 import { type ApiResponse, api } from "@/lib/api";
 import { getAuthHeaders, getAuthToken } from "@/lib/auth";
+import type { User } from "@/types/common";
 
 /**
  * Fetches user data from the backend.

src/types/common.d.ts

@@ -46,3 +46,25 @@ export interface User {
   role: RoleType;
   bottleChoice: BottleChoice;
 }
+
+export interface Group {
+  id: string;
+  ownerId: string;
+  isconfirmed: boolean;
+  inviteCode: string;
+  memberCount: number;
+  houseRank1: House | null;
+  houseRank2: House | null;
+  houseRank3: House | null;
+  houseRank4: House | null;
+  houseRank5: House | null;
+  houseRankSub: House | null;
+  owner: User;
+  users: User[];
+  house1: House | null;
+  house2: House | null;
+  house3: House | null;
+  house4: House | null;
+  house5: House | null;
+  houseSub: House | null;
+}