PRESENTED BY
+
+ 
-
PRESENTED BY
-
- = ({
aria-expanded={open}
aria-haspopup="true"
type="button"
- onClick={handleTriggerClick}
+ onClick={options.length > 1 ? handleTriggerClick : undefined}
>
{selectedOption.label}
Contact Us
-
-
-
+ )
+ }
diff --git a/src/components/common/Frame.astro b/src/components/common/Frame.astro
index ae60cf1..bd0f908 100644
--- a/src/components/common/Frame.astro
+++ b/src/components/common/Frame.astro
@@ -27,7 +27,7 @@
*/
export interface Props {
- size?: "lg" | "md" | "sm" | "xs";
+ size?: "lg" | "md" | "sm" | "xs" | "sp";
color?: "blue" | "purple";
class?: string;
contentContainerClass?: string;
@@ -44,6 +44,10 @@ const frameSvg = `/images/frame/frame-${color}-${size}.svg`;
// Size configuration with aspect ratios and minimum heights
const sizeConfig = {
+ sp: {
+ aspectRatio: "346/300",
+ minHeight: "300px",
+ },
lg: {
aspectRatio: "346/550",
minHeight: "550px",
@@ -110,6 +114,10 @@ const config = sizeConfig[size];
margin: 4% 7%;
}
+ .frame-container[data-size="sp"] .frame-content-clip {
+ margin: 3% 5%;
+ }
+
/* Custom scrollbar styling */
.frame-content-clip {
scrollbar-width: thin;
diff --git a/src/components/common/MapDropdown.tsx b/src/components/common/MapDropdown.tsx
index 4fc83ae..5eb4dbb 100644
--- a/src/components/common/MapDropdown.tsx
+++ b/src/components/common/MapDropdown.tsx
@@ -64,13 +64,13 @@ const MapDropdown: React.FC
-
-
-
+
{icon &&
= ({
noWrapper = false,
children,
frameId: propFrameId,
+ noScroll = false,
onClickX,
}) => {
const { theme } = useTheme();
@@ -158,7 +160,7 @@ const Frame: React.FC = ({
{/* Content area with proper clipping */}
{icon}
}
{children}
diff --git a/src/components/common/react/Frame.tsx b/src/components/common/react/Frame.tsx
index 78ff8f3..2dfa9c4 100644
--- a/src/components/common/react/Frame.tsx
+++ b/src/components/common/react/Frame.tsx
@@ -1,6 +1,6 @@
-import React from "react";
import type { ReactNode } from "react";
+import React from "react";
import { X } from "lucide-react";
@@ -42,6 +42,7 @@ export interface FrameProps {
noWrapper?: boolean;
children: ReactNode;
frameId?: string;
+ noScroll?: boolean; // Optional prop to disable scrolling
onClickX?: () => void;
}
@@ -52,6 +53,7 @@ const Frame: React.FC
{noWrapper ? (
children
diff --git a/src/components/firstdate/Navbar.astro b/src/components/firstdate/Navbar.astro
index d7d4581..1e008b6 100644
--- a/src/components/firstdate/Navbar.astro
+++ b/src/components/firstdate/Navbar.astro
@@ -69,6 +69,9 @@ import ButtonFd from "@common/ButtonFd.astro";
รับเพื่อนก้าวใหม่
+
+ Freshmen Night
+
PROFILE
diff --git a/src/components/rpkm/components/group-picker.astro b/src/components/rpkm/components/group-picker.astro
index 60dcfcd..4ac1163 100644
--- a/src/components/rpkm/components/group-picker.astro
+++ b/src/components/rpkm/components/group-picker.astro
@@ -3,31 +3,36 @@ 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 { getGroupByGroupId } from "@/lib/groupAPI";
import { getProfile } from "@/lib/profileAPI";
import type { Group, User } from "@/types/common";
const token = Astro.cookies.get("token")?.value;
-let groupData = null;
-let user = null;
+let groupData: Group | null = null;
+let user: User | null = null;
if (token) {
- const response = await getGroupData(token);
- if (response.success && response.data) {
- groupData = response.data.data as Group;
- }
-
- try {
- const userResponse = await getProfile(token);
- if (userResponse.success && userResponse.data) {
- user = userResponse.data.user as User;
+ let groupID = "";
+ const userResponse = await getProfile(token);
+ if (userResponse.success && userResponse.data) {
+ user = userResponse.data.user as User;
+ groupID = user.groupId ? user.groupId : "";
+ if (groupID) {
+ const groupResponse = await getGroupByGroupId(groupID, token);
+ if (groupResponse.success && groupResponse.data) {
+ groupData = groupResponse.data.data as Group;
+ } else {
+ return Astro.redirect("/login");
+ }
} else {
- console.error("Failed to fetch user data:", userResponse.error);
+ return Astro.redirect("/login");
}
- } catch (error) {
- console.error("Error fetching user data:", error);
+ } else {
+ console.error("Failed to fetch user data:", userResponse.error);
}
+} else {
+ return Astro.redirect("/login");
}
if (!groupData || !user) {
@@ -35,16 +40,29 @@ if (!groupData || !user) {
}
const inviteCode = groupData.inviteCode;
+const isOwner = groupData.ownerId === user.id;
+const isConfirmed = groupData.isConfirmed;
+const memberCount = groupData.memberCount;
+
+const canDisplayDefault = !isConfirmed && memberCount === 1 && isOwner;
+const canDisplayHead =
+ (isConfirmed && isOwner) || (!isConfirmed && isOwner && memberCount != 1);
+const canDisplayMember = !isOwner;
const member1 = groupData.memberCount > 1 ? groupData.users[1] : null;
const member2 = groupData.memberCount > 2 ? groupData.users[2] : null;
---
-
+
-
จับกลุ่มเพื่อน (1/3)
++ {`จับกลุ่มเพื่อน (${memberCount}/3)`} +
@@ -103,62 +121,43 @@ const member2 = groupData.memberCount > 2 ? groupData.users[2] : null;
-
-
+
+
-
- - {"<"} -
-- {`จับกลุ่มเพื่อน (${groupData.memberCount}/3)`} + { + !isConfirmed && memberCount === 1 && ( +
+ {"<"} +
+ ) + } + ++ {`จับกลุ่มเพื่อน (${memberCount}/3)`}
+
-
-
-
- Invite Link
- -
-
-
-
-
-
- {"rpkm.sgcu.in.th/" + inviteCode}
-
- 
-
-
-
+
-
Room Code
+Room Code
2 ? groupData.users[2] : null;
{inviteCode}
@@ -188,62 +187,46 @@ const member2 = groupData.memberCount > 2 ? groupData.users[2] : null;
-
-
+
+
- 
+ {
+ !isConfirmed && (
+
+ )
+ }
- - {`จับกลุ่มเพื่อน (${groupData.memberCount}/3)`} +
+ {`จับกลุ่มเพื่อน (${memberCount}/3)`}
-
+ {
+ !isConfirmed && (
+
+ )
+ }
+
-
-
-
- Invite Link
- -
-
-
-
-
-
-
-
-
-
-
+
-
Room Code
+Room Code
2 ? groupData.users[2] : null;
+ {inviteCode}
2 ? groupData.users[2] : null;
diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index 4292816..df5b3b2 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -1,7 +1,6 @@
---
import {
getHouses,
- getPrefHouses,
type HouseDisplayType,
type HousePrefType,
} from "@rpkm/data/house";
@@ -13,8 +12,9 @@ import HousePickingCard from "@rpkm/elements/house-picking-card.astro";
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";
+import { getGroupByGroupId } from "@/lib/groupAPI";
+import { getProfile } from "@/lib/profileAPI";
+import type { Group, User } from "@/types/common";
const houseSizes = ["ทั้งหมด", "S", "M", "L", "XL", "XXL"];
@@ -27,20 +27,58 @@ let housePrefData: HousePrefType = {
houseRank5: null,
houseRankSub: null,
};
+
let groupData: Group | null = null;
+let user: User | null = null;
const token = Astro.cookies.get("token")?.value;
if (!token) {
- Astro.redirect("/login");
-} else {
- houseDisplayData = await getHouses(token);
- housePrefData = await getPrefHouses(token);
- const groupDataResponse = await getGroupData(token);
- if (groupDataResponse.success && groupDataResponse.data) {
- groupData = groupDataResponse.data.data as Group;
+ return Astro.redirect("/login");
+}
+
+let groupID = "";
+const userResponse = await getProfile(token);
+if (userResponse.success && userResponse.data) {
+ user = userResponse.data.user as User;
+ groupID = user.groupId ? user.groupId : "";
+ if (groupID) {
+ const groupResponse = await getGroupByGroupId(groupID, token);
+ if (groupResponse.success && groupResponse.data) {
+ groupData = groupResponse.data.data as Group;
+ } else {
+ return Astro.redirect("/login");
+ }
+ } else {
+ return Astro.redirect("/login");
}
+} else {
+ console.error("Failed to fetch user data:", userResponse.error);
}
+
+if (!groupData || !user) {
+ return Astro.redirect("/login");
+}
+
+houseDisplayData = await getHouses(token);
+housePrefData = {
+ houseRank1: groupData.houseRank1 || null,
+ houseRank2: groupData.houseRank2 || null,
+ houseRank3: groupData.houseRank3 || null,
+ houseRank4: groupData.houseRank4 || null,
+ houseRank5: groupData.houseRank5 || null,
+ houseRankSub: groupData.houseRankSub || null,
+};
+
const isConfirmed = groupData ? groupData.isConfirmed || false : false;
+const isOwner =
+ groupData && user ? groupData.ownerId == user.id || false : false;
+
+const isPickAllMainHouses =
+ housePrefData.houseRank1 &&
+ housePrefData.houseRank2 &&
+ housePrefData.houseRank3 &&
+ housePrefData.houseRank4 &&
+ housePrefData.houseRank5;
---
@@ -76,7 +114,7 @@ const isConfirmed = groupData ? groupData.isConfirmed || false : false;
{
});
return houses;
}
-
-export async function getPrefHouses(token?: string): Promise {
- const houseResult: HousePrefType = {
- houseRank1: null,
- houseRank2: null,
- houseRank3: null,
- houseRank4: null,
- houseRank5: null,
- houseRankSub: null,
- };
-
- const response = await getHousePreferences(token);
- if (!response.success || !response.data) {
- console.error("Failed to fetch house data:", response.error);
- return houseResult;
- }
-
- const houseData = response.data.data;
-
- houseResult.houseRank1 = houseData.houseRank1
- ? (houseData.houseRank1.id ?? null)
- : null;
- houseResult.houseRank2 = houseData.houseRank2
- ? (houseData.houseRank2.id ?? null)
- : null;
- houseResult.houseRank3 = houseData.houseRank3
- ? (houseData.houseRank3.id ?? null)
- : null;
- houseResult.houseRank4 = houseData.houseRank4
- ? (houseData.houseRank4.id ?? null)
- : null;
- houseResult.houseRank5 = houseData.houseRank5
- ? (houseData.houseRank5.id ?? null)
- : null;
- houseResult.houseRankSub = houseData.houseRankSub
- ? (houseData.houseRankSub.id ?? null)
- : null;
-
- return houseResult;
-}
diff --git a/src/components/rpkm/elements/house-confirm-popup.astro b/src/components/rpkm/elements/house-confirm-popup.astro
index 5d5ed20..b8478a4 100644
--- a/src/components/rpkm/elements/house-confirm-popup.astro
+++ b/src/components/rpkm/elements/house-confirm-popup.astro
@@ -168,6 +168,7 @@ if (!token) {
// Close button - hide success popup
btnClose?.addEventListener("click", () => {
hideSuccessPopup();
+ window.location.reload();
});
// Click outside to close success popup
diff --git a/src/components/rpkm/elements/house-detail-card.astro b/src/components/rpkm/elements/house-detail-card.astro
index d31e828..f3bbc57 100644
--- a/src/components/rpkm/elements/house-detail-card.astro
+++ b/src/components/rpkm/elements/house-detail-card.astro
@@ -42,7 +42,7 @@ if (!colorData) {
("");
const [error, setError] = useState(null);
+ const [specialMessage, setSpecialMessage] = useState(false);
const [isLoading, setIsLoading] = useState(false);
// Dialogs
@@ -59,12 +62,21 @@ export default function BottleOfChoice({
// Open dialog on mount
useEffect(() => {
+ if (isChosen) {
+ return; // Do not open dialog if already chosen
+ }
mainDialog.open();
}, []);
// Handlers
const handleChoiceChange = (value: string): void => {
setChoice(value);
+ if (value === "C") {
+ setSpecialMessage(true);
+ } else {
+ setSpecialMessage(false);
+ }
+
setError(null); // Clear error when user makes selection
};
@@ -176,6 +188,12 @@ export default function BottleOfChoice({
)}
+ {specialMessage && (
+
-
2 ? groupData.users[2] : null;
diff --git a/src/components/rpkm/components/house-picker.astro b/src/components/rpkm/components/house-picker.astro
index 4292816..df5b3b2 100644
--- a/src/components/rpkm/components/house-picker.astro
+++ b/src/components/rpkm/components/house-picker.astro
@@ -1,7 +1,6 @@
---
import {
getHouses,
- getPrefHouses,
type HouseDisplayType,
type HousePrefType,
} from "@rpkm/data/house";
@@ -13,8 +12,9 @@ import HousePickingCard from "@rpkm/elements/house-picking-card.astro";
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";
+import { getGroupByGroupId } from "@/lib/groupAPI";
+import { getProfile } from "@/lib/profileAPI";
+import type { Group, User } from "@/types/common";
const houseSizes = ["ทั้งหมด", "S", "M", "L", "XL", "XXL"];
@@ -27,20 +27,58 @@ let housePrefData: HousePrefType = {
houseRank5: null,
houseRankSub: null,
};
+
let groupData: Group | null = null;
+let user: User | null = null;
const token = Astro.cookies.get("token")?.value;
if (!token) {
- Astro.redirect("/login");
-} else {
- houseDisplayData = await getHouses(token);
- housePrefData = await getPrefHouses(token);
- const groupDataResponse = await getGroupData(token);
- if (groupDataResponse.success && groupDataResponse.data) {
- groupData = groupDataResponse.data.data as Group;
+ return Astro.redirect("/login");
+}
+
+let groupID = "";
+const userResponse = await getProfile(token);
+if (userResponse.success && userResponse.data) {
+ user = userResponse.data.user as User;
+ groupID = user.groupId ? user.groupId : "";
+ if (groupID) {
+ const groupResponse = await getGroupByGroupId(groupID, token);
+ if (groupResponse.success && groupResponse.data) {
+ groupData = groupResponse.data.data as Group;
+ } else {
+ return Astro.redirect("/login");
+ }
+ } else {
+ return Astro.redirect("/login");
}
+} else {
+ console.error("Failed to fetch user data:", userResponse.error);
}
+
+if (!groupData || !user) {
+ return Astro.redirect("/login");
+}
+
+houseDisplayData = await getHouses(token);
+housePrefData = {
+ houseRank1: groupData.houseRank1 || null,
+ houseRank2: groupData.houseRank2 || null,
+ houseRank3: groupData.houseRank3 || null,
+ houseRank4: groupData.houseRank4 || null,
+ houseRank5: groupData.houseRank5 || null,
+ houseRankSub: groupData.houseRankSub || null,
+};
+
const isConfirmed = groupData ? groupData.isConfirmed || false : false;
+const isOwner =
+ groupData && user ? groupData.ownerId == user.id || false : false;
+
+const isPickAllMainHouses =
+ housePrefData.houseRank1 &&
+ housePrefData.houseRank2 &&
+ housePrefData.houseRank3 &&
+ housePrefData.houseRank4 &&
+ housePrefData.houseRank5;
---
@@ -76,7 +114,7 @@ const isConfirmed = groupData ? groupData.isConfirmed || false : false;
บ้านรับเพื่อนที่สนใจ
-
+
+
+ // Handle house card click in popup
+ houseCardContainer?.addEventListener("click", (e) => {
+ const wrapper = e.target.closest(".house-card-wrapper");
+ if (!wrapper) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ const nameThai = wrapper.getAttribute("data-thname");
+ selectedHouseData = houseDisplayData.find((h) => h.nameThai === nameThai);
+
+ // Prevent showing popup for already selected houses
+ if (!selectedHouseData || selectedHouses.has(selectedHouseData.id))
+ return;
+
+ // Show house popup with data
+ showHousePopup(selectedHouseData);
+ });
+
+ // Cancel button
+ btnCancelHouse?.addEventListener("click", () => {
+ housePopup?.classList.add("hidden");
+ housePopup?.classList.remove("flex");
+ selectedHouseData = null;
+ });
+
+ // Add house button
+ btnAddHouse?.addEventListener("click", () => {
+ if (!selectedHouseData || !currentRank) return;
+
+ const nameThai = selectedHouseData.nameThai;
+ const houseObj = houseDisplayData.find((h) => h.nameThai === nameThai);
+
+ // Prevent adding already selected houses
+ if (selectedHouses.has(houseObj.id)) return;
+
+ // ถ้าอันดับนี้มีบ้านอยู่แล้ว ให้ลบบ้านเก่าออกจาก selectedHouses
+ if (pickedHouses[currentRank]) {
+ selectedHouses.delete(pickedHouses[currentRank]);
+ }
+
+ // Update state - เลือกไปที่ rank ที่ user กดไว้
+ pickedHouses[currentRank] = houseObj.id;
+
+ selectedHouses.add(houseObj.id);
+
+ // Update UI
+ updatePickedHousesDisplay();
+ updateAvailableHouses();
+ updateHouseCounts();
+
+ // Save to localStorage
+ saveHouseSelection();
+
+ // Close both popups
+ housePopup?.classList.add("hidden");
+ housePopup?.classList.remove("flex");
+ closePopup();
+
+ // Enable submit button if all main ranks are filled
+ const mainRanks = [
+ "houseRank1",
+ "houseRank2",
+ "houseRank3",
+ "houseRank4",
+ "houseRank5",
+ ];
+ const allMainRanksFilled = mainRanks.every(
+ (rank) => pickedHouses[rank] !== null
+ );
+ submitBtn.disabled = !allMainRanksFilled;
+
+ // Reset selected house data
+ selectedHouseData = null;
+ });
+ });
+
diff --git a/src/components/rpkm/components/profile.astro b/src/components/rpkm/components/profile.astro
index 417c1e0..dce9aa3 100644
--- a/src/components/rpkm/components/profile.astro
+++ b/src/components/rpkm/components/profile.astro
@@ -1,6 +1,7 @@
---
import UserProfile from "@rpkm/rubpuen/UserProfile";
+import BottleOfChoice from "@/components/rpkm/rubpuen/BottleOfChoice";
import { getProfile } from "@/lib/profileAPI";
import type { User } from "@/types/common";
@@ -10,7 +11,7 @@ if (!token) {
return Astro.redirect("/login");
}
-let user = null;
+let user: User | null = null;
try {
const response = await getProfile(token);
if (response.success && response.data) {
@@ -27,4 +28,11 @@ if (!user) {
}
---
-
{
[
"houseRank1",
@@ -132,6 +170,7 @@ const isConfirmed = groupData ? groupData.isConfirmed || false : false;
id="btn-submit-house"
class="cut-edge-all flex cursor-pointer items-center justify-center gap-2 bg-[linear-gradient(90deg,_#8A2BE4_0%,_#2B2D42_50%,_#8A2BE4_100%)] disabled:cursor-not-allowed disabled:opacity-50"
type="button"
+ disabled={!isPickAllMainHouses}
style={`width: 260px; height: 48px;`}
>
-
-
-ยืนยันการเลือกบ้าน
@@ -248,90 +287,111 @@ const isConfirmed = groupData ? groupData.isConfirmed || false : false; += capacity ? "#FF1493" : "#68A987"};`} >{chosenCount}/{capacity}
diff --git a/src/components/rpkm/rubpuen/BottleOfChoice.tsx b/src/components/rpkm/rubpuen/BottleOfChoice.tsx index 135d712..936b2c1 100644 --- a/src/components/rpkm/rubpuen/BottleOfChoice.tsx +++ b/src/components/rpkm/rubpuen/BottleOfChoice.tsx @@ -16,6 +16,7 @@ import { bottleOfChoiceSchema } from "@/types/rpkm-bottole-of-choice/schema"; interface BottleOfChoiceProps { initialVariant?: ThemeVariant; + isChosen: boolean; } interface Choice { @@ -47,10 +48,12 @@ const BOTTLE_OPTIONS: Choice[] = [ export default function BottleOfChoice({ initialVariant, + isChosen, }: BottleOfChoiceProps): JSX.Element { // State const [choice, setChoice] = useState
+ *สามารถรับกระติกน้ำได้ที่บ้านรับเพื่อนในวันรับเพื่อนก้าวใหม่
+
+ )}
+
{/* Confirm Button */}
- 
- 
+ ([]);
+
+ useEffect(() => {
+ const fetchData = async (): Promise => {
+ const myWorkshopsDataResponse = await getWorkshopsOfUserId();
+ if (!myWorkshopsDataResponse.success || !myWorkshopsDataResponse.data) {
+ return;
+ }
+ // Filter out workshops that are not registered
+ setMyWorkshopsData(myWorkshopsDataResponse.data);
+ };
+ void fetchData();
+ }, []);
+ return (
+
+ {myWorkshopsData.length > 0 && (
+
+ );
+}
diff --git a/src/components/rpkm/workshop/RegisterConfirm.tsx b/src/components/rpkm/workshop/RegisterConfirm.tsx
index eef1060..49f4a84 100644
--- a/src/components/rpkm/workshop/RegisterConfirm.tsx
+++ b/src/components/rpkm/workshop/RegisterConfirm.tsx
@@ -42,7 +42,7 @@ export default function RegisterConfirm({
};
return (
-
+
diff --git a/src/components/rpkm/workshop/WorkshopCard.tsx b/src/components/rpkm/workshop/WorkshopCard.tsx
index 8e482ab..a6840bc 100644
--- a/src/components/rpkm/workshop/WorkshopCard.tsx
+++ b/src/components/rpkm/workshop/WorkshopCard.tsx
@@ -20,8 +20,8 @@ import type { WorkshopData } from "@/types/rpkm-workshop/workshop";
export default function WorkshopCard(workshop: WorkshopData): JSX.Element {
// const dialogOverview = useDialog(`workshop-overview-${workshopId}`);
- const dialogConfirm = useDialog(`workshop-confirm-${workshop.workshopId}`);
- const dialogSuccess = useDialog(`workshop-success-${workshop.workshopId}`);
+ const dialogConfirm = useDialog(`workshop-confirm-${workshop.workshopType}`);
+ const dialogSuccess = useDialog(`workshop-success-${workshop.workshopType}`);
const [isLoading, setIsLoading] = useState(false);
const [formData, setFormData] = useState
+
);
}
diff --git a/src/components/rpkm/workshop/MyWorkshops.tsx b/src/components/rpkm/workshop/MyWorkshops.tsx
new file mode 100644
index 0000000..ea428a7
--- /dev/null
+++ b/src/components/rpkm/workshop/MyWorkshops.tsx
@@ -0,0 +1,80 @@
+
+import { useEffect, useState } from "react";
+
+import type { JSX } from "astro/jsx-runtime";
+
+import { Calendar, Clock4, MapPin } from "lucide-react";
+
+import Frame from "@/components/common/react/Frame";
+import { ThemeProvider } from "@/config/ThemeContext";
+import { getMyWorkshopByRpkmWorkshop } from "@/data/rpkm-workshop/workshops";
+import { type RPKMworkshop, getWorkshopsOfUserId } from "@/lib/workshopAPI";
+import type { RpkmVariant } from "@/types/common";
+
+interface MyWorkshopsProps {
+ initialVariant?: RpkmVariant;
+}
+
+export default function MyWorkshops({
+ initialVariant,
+}: MyWorkshopsProps): JSX.Element {
+ const [myWorkshopsData, setMyWorkshopsData] = useState
+
+
+ {user ? (
+
+
+
+
+ {user.nickname} +
+ ) : ( ++ Unknown +
+ )}
+
+
+ )}
+
+
+
+ + รอบกิจกรรมของคุณ +
+
+ {myWorkshopsData
+ .map((workshop) => getMyWorkshopByRpkmWorkshop(workshop))
+ .map((workshop, index) => (
+
+
+ 
+
+ ))}
+
+ + {workshop?.title} +
+ +
+
+
+