implement logic to select compared levels based on membershipLevel

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>