✨ feat: 유저 뱃지 API 연동 및 UI 구현 #53

src/apis/auth/auth.ts

@@ -34,7 +34,7 @@ export const getRefreshToken = async (refreshToken: string) => {
   return await instance
     .post<RefreshTokenResponse>(endpoint, undefined, {
       headers: {
-        refreshToken: `Bearer ${refreshToken}`,
+        refreshToken: refreshToken,
       },
     })
     .then((res) => res.data);

src/app/mypage/_components/Badges/MypageBadgeCount.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const MypageBadgeCount = ({ count }: { count: number }) => {
+  return (
+    <div className="flex w-full">
+      <span className="m-auto w-auto rounded-[8px] bg-primary-05 px-[10px] py-[12px] text-title-bold text-primary-01">
+        획득 뱃지 {count}개!
+      </span>
+    </div>
+  );
+};
+
+export default MypageBadgeCount;

src/app/mypage/_components/Badges/MypageBadgeItem.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import React, { FC } from "react";
+
+import { Badge } from "@/apis/user/badges/badgesType";
+
+interface Props {
+  badge: Badge;
+}
+
+const MypageBadgeItem: FC<Props> = ({ badge }) => {
+  const isAcquired = badge.isAquired ? "" : "grayscale";
+  return (
+    <div className="flex w-auto flex-col items-center justify-center gap-[6px]">
+      <Image
+        className={isAcquired}
+        src={badge.imageUrl}
+        alt={badge.badgeName}
+        width={96}
+        height={96}
+      />
+      <div className="flex flex-col">
+        <span className="text-center text-body2-semi text-gray-scale-600">
+          {badge.badgeName}
+        </span>
+        <span className="text-center text-caption1-regular text-gray-scale-600">
+          {badge.description}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default MypageBadgeItem;

src/app/mypage/_components/Badges/MypageBadges.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+
+import { BadgesResponse } from "@/apis/user/badges/badgesType";
+
+import MypageBadgeCount from "./MypageBadgeCount";
+import MypageBadgeItem from "./MypageBadgeItem";
+
+interface Props {
+  badges: BadgesResponse;
+}
+
+const MypageBadges: FC<Props> = ({ badges }) => {
+  const acquiredCount = badges.filter((badge) => badge.isAquired).length;
+  return (
+    <div className="flex flex-col gap-[18px]">
+      <MypageBadgeCount count={acquiredCount} />
+
+      <div className="grid grid-cols-3 justify-between gap-[24px]">
+        {badges.map((badge, index) => (
+          <MypageBadgeItem key={badge.badgeName + index} badge={badge} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MypageBadges;

src/app/mypage/_components/MypageTab.tsx

@@ -1,21 +1,27 @@
 "use client";
 
 import * as Tabs from "@radix-ui/react-tabs";
+import dynamic from "next/dynamic";
 import { FC } from "react";
 
+import { BadgesResponse } from "@/apis/user/badges/badgesType";
+
 import MypageBookmark from "./Bookmark/MyPageScrab";
+const MypageBadges = dynamic(() => import("./Badges/MypageBadges"));
 
-interface Props {}
+interface Props {
+  badges: BadgesResponse;
+}
 
-const MypageTab: FC<Props> = ({}) => {
+const MypageTab: FC<Props> = ({ badges }) => {
   const TabList = [
     {
       name: "스크랩",
       contentComponent: <MypageBookmark />,
     },
     {
       name: "활동뱃지",
-      contentComponent: <h1>활동뱃지</h1>,
+      contentComponent: <MypageBadges badges={badges} />,
     },
   ];
 

src/app/mypage/page.tsx

@@ -1,13 +1,18 @@
+"use server";
+
+import { getUserBadges } from "@/apis/user/badges/badges";
 import NavigationBar from "@/layout/Mobile/NavigationBar";
 
 import MypageHeader from "./_components/MypageHeader";
 import MyPageView from "./view";
 
-export default function Map() {
+export default async function Mypage() {
+  const badges = await getUserBadges();
+
   return (
     <div className="mb-[60px] ">
       <MypageHeader />
-      <MyPageView />
+      <MyPageView badges={badges} />
       <NavigationBar />
     </div>
   );

src/app/mypage/view.tsx

@@ -1,17 +1,24 @@
 "use client";
 
+import { FC } from "react";
+
+import { BadgesResponse } from "@/apis/user/badges/badgesType";
 import { useUserStore } from "@/store/user";
 
 import MypageAvatar from "./_components/MypageAvatar";
 import MypageTab from "./_components/MypageTab";
 
-const MyPageView = () => {
+interface Props {
+  badges: BadgesResponse;
+}
+
+const MyPageView: FC<Props> = ({ badges }) => {
   const user = useUserStore((state) => state.user);
 
   return (
     <form className="flex flex-wrap gap-4 text-title-bold">
       <MypageAvatar user={user} />
-      <MypageTab />
+      <MypageTab badges={badges} />
     </form>
   );
 };