feat: 디자인 수정 및 api 응답 처리로직 수정

app/FAQ/_components/ScreenQAPage.tsx

@@ -22,7 +22,7 @@
         {QA_LIST.map((item) => (
           <div
             key={item.question}
-            className="flex flex-col gap-3 rounded-[24px] border border-white/30 bg-white/40 p-5 shadow-[0_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[20px]"
+            className="flex flex-col gap-3 rounded-3xl border border-white/30 bg-white/40 p-5 shadow-[0_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[20px]"
           >
             <div className="flex gap-2">
               <span className="typo-18-700 text-color-brand-primary-flame">
@@ -73,7 +73,7 @@
                     alert(
                       "매칭 비활성화 설정이 완료되었습니다. 이제 다른 사람에게 더 이상 뽑히지 않습니다.",
                     );
                   } catch (error) {
                     alert("설정 중 오류가 발생했습니다. 다시 시도해 주세요.");
                   }
                 });

app/_components/LoginMethodDrawer.tsx

@@ -29,7 +29,7 @@
 //       </div>
 //       <DrawerContent
 //         showHandle={false}
-//         className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]"
+//         className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-8 md:max-w-[430px]"
 //       >
 //         <DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle>
 //         <div className="flex w-full flex-col items-start gap-2">

app/adminpage/dashboard/_components/AdminDashboard.tsx

@@ -24,7 +24,8 @@ export default function AdminDashboard() {
   } = useAdminOrders();
   const { status: socketStatus } = useAdminOrderSocket();
 
-  const orders = ordersData?.data ?? [];
+  // useAdminOrders가 이미 content 배열만 추출하여 반환하므로 바로 사용
+  const orders = ordersData ?? [];
 
   // PENDING 주문을 먼저, 나머지는 뒤에
   const sortedOrders = [...orders].sort((a, b) => {

app/adminpage/dashboard/page.tsx

@@ -5,6 +5,11 @@ import {
 } from "@tanstack/react-query";
 import { serverApi } from "@/lib/server-api";
 import AdminDashboard from "./_components/AdminDashboard";
+import {
+  AdminOrder,
+  ApiResponse,
+  PaginatedResponse,
+} from "@/hooks/admin/useAdminOrders";
 
 export default async function AdminDashboardPage() {
   const queryClient = new QueryClient();
@@ -13,10 +18,25 @@ export default async function AdminDashboardPage() {
   await queryClient.prefetchQuery({
     queryKey: ["adminOrders"],
     queryFn: async () => {
-      const res = await serverApi.get({
-        path: "/api/v1/admin/payment/requests",
-      });
-      return res.data;
+      let allOrders: AdminOrder[] = [];
+      let page = 0;
+      let hasNext = true;
+
+      while (hasNext) {
+        const res = await serverApi.get<
+          ApiResponse<PaginatedResponse<AdminOrder>>
+        >({
+          path: `/api/v1/admin/payment/requests?page=${page}&size=100&sort=requestedAt,desc`,
+        });
+        const responseData = res.data?.data;
+        if (!responseData) break;
+
+        allOrders = [...allOrders, ...(responseData.content || [])];
+        hasNext = responseData.hasNext;
+        page += 1;
+      }
+
+      return allOrders;
     },
   });
 

app/adminpage/main/_components/MenuCard.tsx

@@ -36,7 +36,7 @@ export default function MenuCard({ item }: MenuCardProps) {
             <h3 className="text-base font-semibold text-[#6b7094]">
               {item.title}
             </h3>
-            <span className="rounded-md bg-[#1e2030] px-2 py-0.5 text-[10px] font-bold tracking-wider text-[#4a4e69] uppercase">
+            <span className="typo-10-700 rounded-md bg-[#1e2030] px-2 py-0.5 tracking-wider text-[#4a4e69] uppercase">
               준비 중
             </span>
           </div>
@@ -70,7 +70,7 @@ export default function MenuCard({ item }: MenuCardProps) {
         </div>
 
         {item.badge && (
-          <span className="flex items-center gap-1 rounded-full bg-[#ff4d61]/10 px-2.5 py-1 text-[10px] font-bold tracking-wider text-[#ff4d61] uppercase">
+          <span className="typo-10-700 flex items-center gap-1 rounded-full bg-[#ff4d61]/10 px-2.5 py-1 tracking-wider text-[#ff4d61] uppercase">
             <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[#ff4d61]" />
             {item.badge}
           </span>

app/adminpage/notices/_components/AdminNotices.tsx

@@ -165,7 +165,7 @@ function NoticeForm({
             placeholder="공지사항 제목을 입력하세요"
             className="rounded-xl border border-[#2a2d42] bg-[#0f1117] px-4 py-3 text-sm text-white placeholder:text-[#4a4e69] focus:border-[#10b981] focus:outline-none"
           />
-          <span className="text-right text-[10px] text-[#4a4e69]">
+          <span className="typo-10-500 text-right text-[#4a4e69]">
             {title.length}/200
           </span>
         </div>
@@ -396,7 +396,7 @@ export default function AdminNotices() {
                       {notice.title}
                     </h3>
                     <span
-                      className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold ${status.bg} ${status.color}`}
+                      className={`typo-10-700 flex items-center gap-1 rounded-full px-2 py-0.5 ${status.bg} ${status.color}`}
                     >
                       {status.label}
                     </span>

app/adminpage/products/_components/AdminProducts.tsx

@@ -174,18 +174,18 @@ export default function AdminProducts() {
                   {/* 상태 배지 */}
                   <div className="flex items-center gap-1.5">
                     {product.isActive ? (
-                      <span className="flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-bold text-emerald-400">
+                      <span className="typo-10-700 flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-emerald-400">
                         <ToggleRight size={10} />
                         판매 중
                       </span>
                     ) : (
-                      <span className="flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-[10px] font-bold text-red-400">
+                      <span className="typo-10-700 flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-red-400">
                         <ToggleLeft size={10} />
                         판매 중지
                       </span>
                     )}
                     {product.isBundle && (
-                      <span className="rounded-full bg-[#6366f1]/10 px-2 py-0.5 text-[10px] font-bold text-[#818cf8]">
+                      <span className="typo-10-700 rounded-full bg-[#6366f1]/10 px-2 py-0.5 text-[#818cf8]">
                         번들
                       </span>
                     )}
@@ -222,7 +222,7 @@ export default function AdminProducts() {
                   <p className="text-sm font-bold text-white">
                     {formatPrice(product.price)}
                   </p>
-                  <p className="text-[10px] text-[#4a4e69]">
+                  <p className="typo-10-500 text-[#4a4e69]">
                     순서: {product.displayOrder}
                   </p>
                 </div>

app/adminpage/stats/_components/AdminStats.tsx

@@ -14,7 +14,7 @@
   RefreshCw,
   Sparkles,
   TrendingUp,
   UserCheck,
   Award,
   CircleDot,
 } from "lucide-react";
@@ -50,7 +50,7 @@
     },
   });
 
   const members = responseData?.data?.content ?? [];
 
   // 데이터 기반 전체 및 성별 통계 계산
   const stats = useMemo(() => {
@@ -328,7 +328,7 @@
 
                   {/* 중앙 성비 요약 라벨 */}
                   <div className="absolute flex flex-col items-center justify-center text-center">
-                    <span className="text-[10px] font-bold tracking-wider text-[#6b7094] uppercase">
+                    <span className="typo-10-700 tracking-wider text-[#6b7094] uppercase">
                       Dominant
                     </span>
                     <span className="text-xl font-extrabold text-white">
@@ -429,15 +429,15 @@
                     </div>
                     <div className="mt-2 grid grid-cols-2 gap-4">
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           남성 평균
                         </span>
                         <span className="text-sm font-extrabold text-blue-400">
                           {stats.avgMaleMatchingTickets}개
                         </span>
                       </div>
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           여성 평균
                         </span>
                         <span className="text-sm font-extrabold text-rose-400">
@@ -462,15 +462,15 @@
                     </div>
                     <div className="mt-2 grid grid-cols-2 gap-4">
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           남성 평균
                         </span>
                         <span className="text-sm font-extrabold text-blue-400">
                           {stats.avgMaleOptionTickets}개
                         </span>
                       </div>
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           여성 평균
                         </span>
                         <span className="text-sm font-extrabold text-rose-400">

app/adminpage/users/_components/AdminMembers.tsx

@@ -312,7 +312,7 @@ export default function AdminMembers() {
                       {member.nickname}
                     </span>
                     <span
-                      className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${
+                      className={`typo-10-700 rounded-full px-2 py-0.5 ${
                         member.gender === "FEMALE"
                           ? "bg-rose-500/10 text-rose-400"
                           : "bg-blue-500/10 text-blue-400"
@@ -339,7 +339,7 @@ export default function AdminMembers() {
                       height={18}
                     />
                     <div className="flex flex-col">
-                      <span className="text-[10px] text-[#6b7094]">매칭권</span>
+                      <span className="typo-10-500 text-[#6b7094]">매칭권</span>
                       <span className="text-xs font-bold text-white">
                         {member.matchingTicketCount}개
                       </span>
@@ -354,7 +354,7 @@ export default function AdminMembers() {
                       height={18}
                     />
                     <div className="flex flex-col">
-                      <span className="text-[10px] text-[#6b7094]">옵션권</span>
+                      <span className="typo-10-500 text-[#6b7094]">옵션권</span>
                       <span className="text-xs font-bold text-white">
                         {member.optionTicketCount}개
                       </span>
@@ -480,7 +480,7 @@ export default function AdminMembers() {
                     height={20}
                   />
                   <span className="text-xs font-bold text-white">매칭권</span>
-                  <span className="text-[10px] text-[#6b7094]">
+                  <span className="typo-10-500 text-[#6b7094]">
                     (보유: {editingMember.matchingTicketCount}개)
                   </span>
                 </div>
@@ -572,7 +572,7 @@ export default function AdminMembers() {
                     height={20}
                   />
                   <span className="text-xs font-bold text-white">옵션권</span>
-                  <span className="text-[10px] text-[#6b7094]">
+                  <span className="typo-10-500 text-[#6b7094]">
                     (보유: {editingMember.optionTicketCount}개)
                   </span>
                 </div>
@@ -670,7 +670,7 @@ export default function AdminMembers() {
 
             {/* 실시간 계산결과 미리보기 */}
             <div className="mt-5 space-y-2 rounded-xl border border-[#1e2030] bg-[#1e2030]/30 p-3 text-xs">
-              <div className="mb-1 text-[10px] font-bold tracking-wider text-[#8b8fa3] uppercase">
+              <div className="typo-10-700 mb-1 tracking-wider text-[#8b8fa3] uppercase">
                 최종 수량 변동 예상
               </div>
 

app/chat-list/_components/ScreenChatList.tsx

@@ -58,7 +58,7 @@
         {item.unread &&
         item.unreadCount !== undefined &&
         item.unreadCount > 0 ? (
-          <div className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[#FF4D61] px-1.5 text-[11px] leading-none font-bold text-white shadow-sm">
+          <div className="flex h-5 min-w-5 items-center justify-center rounded-full bg-[#FF4D61] px-1.5 text-[11px] leading-none font-bold text-white shadow-sm">
             {item.unreadCount > 99 ? "99+" : item.unreadCount}
           </div>
         ) : (
@@ -69,7 +69,7 @@
   );
 }
 
 function ChatSectionTitle({
   title,
   description,
 }: {

app/chat/[chatid]/_components/PartnerProfileModal.tsx

@@ -63,12 +63,12 @@ const PartnerProfileModal = ({
           {/* 카드 + 닫기 버튼 그룹 */}
           <div className="relative flex max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] flex-col items-center gap-4">
             {/* 모달 컨테이너 (MatchingListCard 스타일 계승) */}
-            <div className="flex w-full flex-col overflow-hidden rounded-[24px] shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+            <div className="flex w-full flex-col overflow-hidden rounded-3xl shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
               {/* 카드 본체 (내부 내용에 따라 높이 조절, 최대 높이시 스크롤) */}
               <div className="scrollbar-hide flex w-full flex-col overflow-y-auto border border-b-0 border-white/30 bg-white px-4 pt-6 pb-4">
                 {/* 헤더 */}
                 <div className="flex w-full items-center gap-4">
-                  <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-[2px] shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
+                  <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-0.5 shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
                     <div className="relative h-11 w-11 overflow-hidden rounded-full bg-[#D9D9D9]">
                       <Image
                         src={getProfileImageUrl(
@@ -104,7 +104,7 @@ const PartnerProfileModal = ({
                         )}
                       />
                     </button>
-                    <div className="flex h-4 w-4 flex-col items-center justify-center gap-[2px]">
+                    <div className="flex h-4 w-4 flex-col items-center justify-center gap-0.5">
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />

app/chat/[chatid]/_components/ScreenChatRoom.tsx

@@ -87,7 +87,7 @@ const IncomingMessage = ({
           <div className="max-w-[244px] rounded-[16px_16px_16px_8px] bg-white p-3 text-sm leading-[140%] text-[#1A1A1A] shadow-[0px_4px_16px_rgba(0,0,0,0.12)]">
             {message.text}
           </div>
-          <div className="flex items-center gap-2 text-[10px] leading-[130%] font-medium">
+          <div className="typo-10-500 flex items-center gap-2 leading-[130%]">
             <span className="text-[#B3B3B3]">{message.time}</span>
             {message.readCount === 1 && (
               <span className="text-[#999999]">1</span>
@@ -102,7 +102,7 @@ const IncomingMessage = ({
 const OutgoingMessage = ({ message }: { message: ChatMessage }) => {
   return (
     <div className="flex w-full items-end justify-end gap-2">
-      <div className="flex items-center gap-2 text-[10px] leading-[130%] font-medium">
+      <div className="typo-10-500 flex items-center gap-2 leading-[130%]">
         {message.readCount === 1 && <span className="text-[#999999]">1</span>}
         <span className="text-[#B3B3B3]">{message.time}</span>
       </div>
@@ -391,7 +391,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
             <Loader2 className="h-8 w-8 animate-spin text-[#FF4D61]" />
           </div>
         ) : messages.length === 0 ? (
-          <div className="absolute top-1/2 left-1/2 flex h-[192.32px] w-[285px] -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-between gap-4 rounded-[24px] border border-white/30 bg-white/50 px-6 py-8 shadow-[0px_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[15px]">
+          <div className="absolute top-1/2 left-1/2 flex h-[192.32px] w-[285px] -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-between gap-4 rounded-3xl border border-white/30 bg-white/50 px-6 py-8 shadow-[0px_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[15px]">
             <div className="flex h-[92.32px] w-[116px] flex-col items-center justify-center gap-3">
               <Image
                 src="/chat/heart.png"
@@ -463,7 +463,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
         className="fixed right-0 bottom-5 left-0 z-20 pb-2"
         style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
       >
-        <div className="relative mx-auto flex h-12 w-[calc(100%-32px)] max-w-93.75 items-center rounded-[24px] border border-white/30 bg-white/70 pr-[52px] pl-4 shadow-[0px_4px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)] backdrop-blur-[15px]">
+        <div className="relative mx-auto flex h-12 w-[calc(100%-32px)] max-w-93.75 items-center rounded-3xl border border-white/30 bg-white/70 pr-[52px] pl-4 shadow-[0px_4px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)] backdrop-blur-[15px]">
           <input
             ref={inputRef}
             type="text"
@@ -483,7 +483,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
             disabled={!isSendEnabled}
             onClick={handleSendMessage}
             className={cn(
-              "absolute top-1/2 right-1 flex h-10 w-12 shrink-0 -translate-y-1/2 items-center justify-center rounded-[24px] border border-white/30 transition-colors",
+              "absolute top-1/2 right-1 flex h-10 w-12 shrink-0 -translate-y-1/2 items-center justify-center rounded-3xl border border-white/30 transition-colors",
               isSendEnabled
                 ? "bg-button-primary text-button-primary-text-default"
                 : "bg-[#E5E5E5] text-[#CCCCCC]",

app/extra-info/detail/_components/ScreenExtraInfoDetail.tsx

@@ -89,7 +89,7 @@ const ScreenExtraInfoDetail = () => {
         <div className="flex flex-row items-center justify-between gap-2">
           <div className="flex flex-col">
             <label className="typo-16-600 text-black">제 장점은요...</label>
-            <p className="typo-14-500 flex h-[32px] items-center text-gray-400">
+            <p className="typo-14-500 flex h-8 items-center text-gray-400">
               내가 생각하는 나의 장점을 골라주세요
             </p>
           </div>
@@ -111,7 +111,7 @@ const ScreenExtraInfoDetail = () => {
             {advantages.map((adv) => (
               <div
                 key={adv}
-                className="flex h-8 items-center justify-center gap-[10px] rounded-full border border-[#DFDFDF] bg-[#B3B3B3]/15 px-3 py-2 backdrop-blur-[50px]"
+                className="flex h-8 items-center justify-center gap-2.5 rounded-full border border-[#DFDFDF] bg-[#B3B3B3]/15 px-3 py-2 backdrop-blur-[50px]"
               >
                 <span className="typo-14-500 text-black">{adv}</span>
               </div>
@@ -128,7 +128,7 @@ const ScreenExtraInfoDetail = () => {
                 key={opt.key}
                 type="button"
                 className={cn(
-                  "flex h-[48px] min-w-0 flex-1 flex-col items-center justify-center rounded-[16px] border px-0 transition-colors",
+                  "flex h-12 min-w-0 flex-1 flex-col items-center justify-center rounded-2xl border px-0 transition-colors",
                   contactType === opt.key
                     ? "border-gray-100 bg-[#FFFFFF]"
                     : "border-[#E8E8E8]",

app/hobby-select/_components/HobbySearchInput.tsx

@@ -19,7 +19,7 @@ const HobbySearchInput = ({ onSearch }: HobbySearchInputProps) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex h-9 w-full items-center rounded-[12px] border border-[#C2C2C2] bg-[#B3B3B31A]"
+      className="flex h-9 w-full items-center rounded-xl border border-[#C2C2C2] bg-[#B3B3B31A]"
     >
       <input
         ref={inputRef}