feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Overview/Friend/MembershipLevel/index.tsx

@@ -0,0 +1,36 @@
+import { membershipLevels } from "@/constants/membershipLevels"
+
+import {
+  BestFriend,
+  CloseFriend,
+  DearFriend,
+  GoodFriend,
+  LoyalFriend,
+  NewFriend,
+  TrueFriend,
+} from "@/components/Levels"
+
+import styles from "./membershipLevel.module.css"
+
+import type { MembershipLevelProps } from "@/types/components/myPages/membership"
+
+export default function MembershipLevel({ level }: MembershipLevelProps) {
+  switch (level) {
+    case membershipLevels.L1:
+      return <NewFriend className={styles.level} color="pale" />
+    case membershipLevels.L2:
+      return <GoodFriend className={styles.level} color="pale" />
+    case membershipLevels.L3:
+      return <CloseFriend className={styles.level} color="pale" />
+    case membershipLevels.L4:
+      return <DearFriend className={styles.level} color="pale" />
+    case membershipLevels.L5:
+      return <LoyalFriend className={styles.level} color="pale" />
+    case membershipLevels.L6:
+      return <TrueFriend className={styles.level} color="pale" />
+    case membershipLevels.L7:
+      return <BestFriend className={styles.level} color="pale" />
+    default:
+      return null
+  }
+}

components/Blocks/DynamicContent/Overview/Friend/MembershipLevel/membershipLevel.module.css

@@ -0,0 +1,4 @@
+.level {
+  height: 105px;
+  width: 219px;
+}