[Feat/#90] 사용자 마이페이지 API 연동

apps/customer/src/app/(tabs)/mypage/_components/AccountCard.tsx

@@ -1,37 +1,25 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { Card } from "@compasser/design-system";
 import { ConfirmActionModal } from "./ConfirmActionModal";
+import { useLogoutMutation } from "@/shared/queries/mutation/auth/useLogoutMutation";
 
 export const AccountCard = () => {
+  const router = useRouter();
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
 
-  const handleOpenLogoutModal = () => {
-    setIsLogoutModalOpen(true);
-  };
-
-  const handleCloseLogoutModal = () => {
-    setIsLogoutModalOpen(false);
-  };
-
-  const handleOpenWithdrawModal = () => {
-    setIsWithdrawModalOpen(true);
-  };
-
-  const handleCloseWithdrawModal = () => {
-    setIsWithdrawModalOpen(false);
-  };
+  const { mutate: logout, isPending } = useLogoutMutation();
 
   const handleLogout = () => {
-    console.log("로그아웃");
-    setIsLogoutModalOpen(false);
-  };
-
-  const handleWithdraw = () => {
-    console.log("회원탈퇴");
-    setIsWithdrawModalOpen(false);
+    logout(undefined, {
+      onSuccess: () => {
+        setIsLogoutModalOpen(false);
+        router.replace("/login");
+      },
+    });
   };
 
   return (
@@ -44,15 +32,15 @@ export const AccountCard = () => {
             <div className="flex flex-col items-start gap-[1.2rem]">
               <button
                 type="button"
-                onClick={handleOpenLogoutModal}
+                onClick={() => setIsLogoutModalOpen(true)}
                 className="body2-r text-default"
               >
                 로그아웃
               </button>
 
               <button
                 type="button"
-                onClick={handleOpenWithdrawModal}
+                onClick={() => setIsWithdrawModalOpen(true)}
                 className="body2-r text-default"
               >
                 회원탈퇴
@@ -66,10 +54,10 @@ export const AccountCard = () => {
         open={isLogoutModalOpen}
         title="로그아웃하시겠습니까?"
         cancelText="그만두기"
-        confirmText="로그아웃"
+        confirmText={isPending ? "로그아웃 중..." : "로그아웃"}
         cancelVariant="gray"
         confirmVariant="primary"
-        onClose={handleCloseLogoutModal}
+        onClose={() => setIsLogoutModalOpen(false)}
         onConfirm={handleLogout}
       />
 
@@ -80,8 +68,11 @@ export const AccountCard = () => {
         confirmText="탈퇴하기"
         cancelVariant="gray"
         confirmVariant="secondary"
-        onClose={handleCloseWithdrawModal}
-        onConfirm={handleWithdraw}
+        onClose={() => setIsWithdrawModalOpen(false)}
+        onConfirm={() => {
+          console.log("회원탈퇴");
+          setIsWithdrawModalOpen(false);
+        }}
         reverseButtons={true}
       />
     </>

apps/customer/src/app/(tabs)/mypage/_components/ProfileSection.tsx

@@ -1,35 +1,74 @@
 "use client";
 
+import { useState } from "react";
 import { Icon } from "@compasser/design-system";
+import { RewardQrModal } from "./RewardQrModal";
+
+interface ProfileSectionProps {
+  memberName?: string;
+  nickname?: string;
+  email?: string;
+  isLoading?: boolean;
+}
+
+export const ProfileSection = ({
+  memberName,
+  nickname,
+  email,
+  isLoading = false,
+}: ProfileSectionProps) => {
+  const [isQrModalOpen, setIsQrModalOpen] = useState(false);
+
+  const handleOpenQrModal = () => {
+    setIsQrModalOpen(true);
+  };
+
+  const handleCloseQrModal = () => {
+    setIsQrModalOpen(false);
+  };
 
-export const ProfileSection = () => {
   return (
-    <section className="bg-background px-[1.6rem] pt-[4.2rem] pb-[3.2rem]">
-      <div className="flex items-start justify-between">
-        <div className="flex min-w-0 items-center">
-          <div className="shrink-0">
-            <Icon
-              name="ProfileCharacter"
-              width={80}
-              height={80}
-              ariaHidden={true}
-            />
-          </div>
+    <>
+      <section className="bg-background px-[1.6rem] pt-[4.2rem] pb-[3.2rem]">
+        <div className="flex items-start justify-between">
+          <div className="flex min-w-0 items-center">
+            <div className="shrink-0">
+              <Icon
+                name="ProfileCharacter"
+                width={80}
+                height={80}
+                ariaHidden={true}
+              />
+            </div>
 
-          <div className="ml-[0.8rem] min-w-0 body1-m text-default">
-            <p>이솝</p>
-            <p>픽업마스터</p>
-            <p>cotton@gmail.com</p>
+            <div className="ml-[0.8rem] min-w-0 body1-m text-default">
+              {isLoading ? (
+                <>
+                  <p>-</p>
+                  <p>-</p>
+                  <p>-</p>
+                </>
+              ) : (
+                <>
+                  <p>{memberName ?? "-"}</p>
+                  <p>{nickname ?? "-"}</p>
+                  <p>{email ?? "-"}</p>
+                </>
+              )}
+            </div>
           </div>
+
+          <button
+            type="button"
+            onClick={handleOpenQrModal}
+            className="body1-m shrink-0 rounded-[999px] border-[1.5px] border-primary px-[1rem] py-[0.6rem] text-primary"
+          >
+            적립 QR
+          </button>
         </div>
+      </section>
 
-        <button
-          type="button"
-          className="body1-m shrink-0 rounded-[999px] border-[1.5px] border-primary px-[1rem] py-[0.6rem] text-primary"
-        >
-          적립 QR
-        </button>
-      </div>
-    </section>
+      <RewardQrModal open={isQrModalOpen} onClose={handleCloseQrModal} />
+    </>
   );
 };

apps/customer/src/app/(tabs)/mypage/_components/RewardQrModal.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Icon } from "@compasser/design-system";
+import { useRewardQrQuery } from "@/shared/queries/query/member/useRewardQrQuery";
+
+interface RewardQrModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const RewardQrModal = ({ open, onClose }: RewardQrModalProps) => {
+  const { data, isLoading, isFetching, dataUpdatedAt } = useRewardQrQuery({
+    enabled: open,
+  });
+
+  const [secondsLeft, setSecondsLeft] = useState(60);
+
+  const qrImageUrl = useMemo(() => {
+    if (!data) return null;
+    return URL.createObjectURL(data);
+  }, [data]);
+
+  useEffect(() => {
+    return () => {
+      if (qrImageUrl) {
+        URL.revokeObjectURL(qrImageUrl);
+      }
+    };
+  }, [qrImageUrl]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    setSecondsLeft(60);
+
+    const interval = window.setInterval(() => {
+      const elapsed = Math.floor((Date.now() - dataUpdatedAt) / 1000);
+      const remain = Math.max(60 - elapsed, 0);
+      setSecondsLeft(remain);
+    }, 1000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [open, dataUpdatedAt]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-default/50 px-10"
+      onClick={onClose}
+    >
+      <div
+        className="w-full rounded-[20px] bg-white px-[1.6rem] pt-[1.6rem] pb-[4rem]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex flex-col items-center text-center">
+          <Icon
+            name="ProfileCharacter"
+            width={80}
+            height={80}
+            ariaHidden={true}
+          />
+
+          <p className="mt-[0.8rem] body1-r text-gray-600">
+            사장님께 QR을 보여주세요.
+          </p>
+
+          <p className="mt-[2.8rem] head1-sb text-primary">{secondsLeft}초</p>
+
+          <div className="mt-[1rem] flex h-[248px] w-[248px] items-center justify-center">
+            {isLoading || isFetching ? (
+              <div className="flex h-[248px] w-[248px] items-center justify-center rounded-[12px] border border-gray-200">
+                <p className="body2-r text-gray-500">QR 생성 중...</p>
+              </div>
+            ) : qrImageUrl ? (
+              <img
+                src={qrImageUrl}
+                alt="적립용 QR 코드"
+                className="h-[248px] w-[248px]"
+              />
+            ) : (
+              <div className="flex h-[248px] w-[248px] items-center justify-center rounded-[12px] border border-gray-200">
+                <p className="body2-r text-gray-500">
+                  QR을 불러오지 못했습니다.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/customer/src/app/(tabs)/mypage/_components/StatsCard.tsx

@@ -2,15 +2,32 @@
 
 import { useRouter } from "next/navigation";
 import { Card, Icon } from "@compasser/design-system";
-import { stats } from "../_constants/stats";
 
-export const StatsCard = () => {
+interface StatsCardProps {
+  totalStampCount?: number;
+  totalUnboxingCount?: number;
+  totalCouponCount?: number;
+  isLoading?: boolean;
+}
+
+export const StatsCard = ({
+  totalStampCount = 0,
+  totalUnboxingCount = 0,
+  totalCouponCount = 0,
+  isLoading = false,
+}: StatsCardProps) => {
   const router = useRouter();
 
   const handleMoveDetailPage = () => {
     router.push("/mypage/detail");
   };
 
+  const stats = [
+    { label: "총 스탬프", value: totalStampCount },
+    { label: "총 언박싱", value: totalUnboxingCount },
+    { label: "총 쿠폰", value: totalCouponCount },
+  ];
+
   return (
     <Card variant="gray-200-elevated">
       <div>
@@ -43,7 +60,7 @@ export const StatsCard = () => {
                   {item.label}
                 </p>
                 <p className="head3-m mt-[0.2rem] text-primary">
-                  {item.value}
+                  {isLoading ? "-" : item.value}
                 </p>
               </div>
             ))}

apps/customer/src/app/(tabs)/mypage/page.tsx

@@ -3,16 +3,54 @@
 import { AccountCard } from "./_components/AccountCard";
 import { ProfileSection } from "./_components/ProfileSection";
 import { StatsCard } from "./_components/StatsCard";
+import { useMyPageQuery } from "@/shared/queries/query/member/useMyPageQuery";
 
 export default function MyPage() {
+  const { data, isLoading, isError } = useMyPageQuery();
+
+  if (isLoading) {
+    return (
+      <main className="flex flex-col bg-white">
+        <ProfileSection isLoading={true} />
+        <section className="flex-1 bg-white px-[1.75rem] pt-[3.2rem]">
+          <div className="flex flex-col gap-[2rem]">
+            <AccountCard />
+            <StatsCard isLoading={true} />
+          </div>
+        </section>
+      </main>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <main className="flex flex-col bg-white">
+        <section className="px-[1.6rem] pt-[4.2rem] pb-[3.2rem]">
+          <p className="body1-m text-default">
+            마이페이지 정보를 불러오지 못했습니다.
+          </p>
+        </section>
+      </main>
+    );
+  }
+
   return (
     <main className="flex flex-col bg-white">
-      <ProfileSection />
+      <ProfileSection
+        memberName={data.memberName}
+        nickname={data.nickname}
+        email={data.email}
+        isLoading={isLoading}
+      />
 
       <section className="flex-1 bg-white px-[1.75rem] pt-[3.2rem]">
         <div className="flex flex-col gap-[2rem]">
           <AccountCard />
-          <StatsCard />
+          <StatsCard
+            totalStampCount={data.totalStampCount}
+            totalUnboxingCount={data.totalUnboxingCount}
+            totalCouponCount={data.totalCouponCount}
+          />
         </div>
       </section>
     </main>