반응형 웹 디자인 적용

app/(admin)/maestros/[maestroId]/ExtensionRequestsSection.tsx

@@ -63,15 +63,15 @@ export function ExtensionRequestsSection({
   }
 
   return (
-    <section className="rounded-lg border bg-background p-5">
-      <div className="flex items-start justify-between gap-2">
+    <section className="overflow-hidden rounded-lg border bg-background p-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-base font-semibold">연장 신청 이력</h2>
           <p className="mt-1 text-sm text-muted-foreground">
             전체 {totalCount.toLocaleString()}건 중 최근 20건
           </p>
         </div>
-        <div className="flex flex-col items-end gap-1">
+        <div className="flex flex-col items-start gap-1 sm:items-end">
           <Button
             disabled={isDisabled || !isPaidAccount}
             onClick={() => void handleCreate()}

app/(admin)/maestros/[maestroId]/LogsSection.tsx

@@ -219,7 +219,7 @@ function LogPagination({
       {showNav ? (
         <nav
           aria-label="처리 로그 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Button

app/(admin)/maestros/[maestroId]/StudentsSection.tsx

@@ -246,7 +246,7 @@ function StudentPagination({
       </label>
       {showNav ? <nav
         aria-label="학생 목록 페이지"
-        className="flex flex-wrap items-center gap-1.5"
+        className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
       >
         {!hasFirstPage ? (
           <Button

app/(admin)/maestros/[maestroId]/UpgradeRequestsSection.tsx

@@ -88,16 +88,16 @@ export function UpgradeRequestsSection({
   }
 
   return (
-    <section className="rounded-lg border bg-background p-5">
-      <div className="flex items-start justify-between gap-2">
+    <section className="overflow-hidden rounded-lg border bg-background p-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-base font-semibold">업그레이드 신청 이력</h2>
           <p className="mt-1 text-sm text-muted-foreground">
             전체 {totalCount.toLocaleString()}건 중 최근 20건
           </p>
         </div>
-        <div className="flex flex-col items-end gap-1">
-          <div className="flex items-center gap-2">
+        <div className="flex flex-col items-start gap-1 sm:items-end">
+          <div className="flex flex-wrap items-center gap-2">
             <select
               className={selectClass}
               disabled={isDisabled}

app/(admin)/maestros/page.tsx

@@ -191,7 +191,7 @@ export default async function MaestrosPage({
         </form>
         <nav
           aria-label="마에스트로 목록 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Link