implement logic to select compared levels based on membershipLevel

components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx

@@ -2,11 +2,13 @@
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import { getMembership } from "@/utils/user"
 
 import type { User } from "@/types/user"
 
-export default function CopyButton({ membership }: Pick<User, "membership">) {
+export default function CopyButton({ memberships }: Pick<User, "memberships">) {
   function handleCopy() {
+    const membership = getMembership(memberships)
     console.log(`COPIED! (${membership ? membership.membershipNumber : "N/A"})`)
   }
 

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -2,6 +2,7 @@ import { GoodFriend } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import styles from "./friend.module.css"
 
@@ -9,6 +10,7 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Friend({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
@@ -26,7 +28,7 @@ export default async function Friend({ user }: UserProps) {
             {formatMessage({ id: "Membership ID" })}:
           </p>
           <p className={styles.membershipId}>
-            {user.membership ? user.membership.membershipNumber : "N/A"}
+            {membership ? membership.membershipNumber : "N/A"}
           </p>
         </div>
       </div>

components/MyPages/Blocks/Overview/Stats/Points/index.tsx

@@ -1,5 +1,6 @@
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import Label from "../Label"
 
@@ -9,18 +10,19 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Points({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.points}>
       <article>
         <Label>{formatMessage({ id: "Total Points" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
       <article>
         <Label>{formatMessage({ id: "Points until next level" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
     </section>