From c9b8f09070756999860f12afb51463a1589c5077 Mon Sep 17 00:00:00 2001
From: juno <sj202117@gmail.com>
Date: Mon, 16 Feb 2026 02:46:52 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Admin=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B0=8F=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar, Footer 컴포넌트 제거 및 admin 레이아웃 단순화
- Course/Schedule/User 리스트 폼·테이블 리팩토링
- LandingFooter 삭제 및 Header 관련 컴포넌트 수정
---
 web/src/app/(landing)/layout.tsx              |  2 -
 web/src/app/admin/course/page.tsx             | 30 ++++++-----
 web/src/app/admin/layout.tsx                  |  3 --
 web/src/app/admin/page.tsx                    | 51 ++++++++++---------
 web/src/app/admin/schedule/page.tsx           | 28 +++++-----
 web/src/app/admin/user/page.tsx               | 22 ++++----
 web/src/components/LandingFooter.tsx          |  9 ----
 web/src/components/admin/Footer.tsx           |  9 ----
 web/src/components/admin/Header.tsx           |  5 +-
 web/src/components/admin/Sidebar.tsx          | 28 ----------
 .../admin/course/CourseListForm.tsx           | 28 +++++-----
 .../admin/course/CourseListTable.tsx          | 39 +++++++-------
 .../admin/schedule/ScheduleListForm.tsx       | 30 +++++------
 .../admin/schedule/ScheduleListTable.tsx      | 39 +++++++-------
 .../components/admin/user/UserListForm.tsx    | 37 +++++++-------
 .../components/admin/user/UserListTable.tsx   | 35 +++++++------
 web/src/components/common/HeaderUserMenu.tsx  |  4 +-
 web/src/components/study/StudyHeader.tsx      |  5 +-
 web/src/components/teach/TeachHeader.tsx      |  5 +-
 19 files changed, 184 insertions(+), 225 deletions(-)
 delete mode 100644 web/src/components/LandingFooter.tsx
 delete mode 100644 web/src/components/admin/Footer.tsx
 delete mode 100644 web/src/components/admin/Sidebar.tsx

diff --git a/web/src/app/(landing)/layout.tsx b/web/src/app/(landing)/layout.tsx
index d43175f..da50f9b 100644
--- a/web/src/app/(landing)/layout.tsx
+++ b/web/src/app/(landing)/layout.tsx
@@ -1,5 +1,4 @@
 import LandingHeader from "@/components/LandingHeader";
-import LandingFooter from "@/components/LandingFooter";
 
 export default function LandingLayout({
   children,
@@ -10,7 +9,6 @@ export default function LandingLayout({
     <div className="min-h-screen flex flex-col">
       <LandingHeader />
       <main className="flex-1">{children}</main>
-      <LandingFooter />
     </div>
   );
 }
diff --git a/web/src/app/admin/course/page.tsx b/web/src/app/admin/course/page.tsx
index b558619..3d085ee 100644
--- a/web/src/app/admin/course/page.tsx
+++ b/web/src/app/admin/course/page.tsx
@@ -49,23 +49,23 @@ export default function AdminCoursesPage() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
       <div className="flex flex-col gap-8">
-        <header className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
               강의 관리
             </h1>
-            <p className="mt-2 text-lg text-muted-foreground">
+            <p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
               교육 콘텐츠를 검색하고 관리합니다.
             </p>
           </div>
           <Button
-            className="flex items-center gap-2"
+            className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
             onClick={openCreateModal}
           >
-            <Plus className="mr-2 h-4 w-4" />
-            <span>강의 추가</span>
+            <Plus className="h-4 w-4 shrink-0" />
+            <span className="truncate">강의 추가</span>
           </Button>
         </header>
 
@@ -77,7 +77,7 @@ export default function AdminCoursesPage() {
           <CourseListForm onSubmit={updateRequest} />
         </div>
 
-        <div className="flex-1 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 flex-1 min-w-0">
           {isLoading ? (
             <ListTableSkeleton columnCount={4} rowCount={8} />
           ) : error ? (
@@ -85,11 +85,13 @@ export default function AdminCoursesPage() {
               강의 목록을 불러오는 중 오류가 발생했습니다.
             </p>
           ) : courses?.length ? (
-            <CourseListTable
-              courses={courses ?? []}
-              onUpdate={openUpdateModal}
-              onDelete={handleDelete}
-            />
+            <div className="min-w-0 overflow-x-auto rounded-lg border border-border">
+              <CourseListTable
+                courses={courses ?? []}
+                onUpdate={openUpdateModal}
+                onDelete={handleDelete}
+              />
+            </div>
           ) : (
             <p className="text-center text-muted-foreground">강의가 없습니다.</p>
           )}
diff --git a/web/src/app/admin/layout.tsx b/web/src/app/admin/layout.tsx
index 6f306b9..8043ea3 100644
--- a/web/src/app/admin/layout.tsx
+++ b/web/src/app/admin/layout.tsx
@@ -1,13 +1,10 @@
 import AdminHeader from "@/components/admin/Header";
-import AdminFooter from "@/components/admin/Footer";
-//
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen flex flex-col">
       <AdminHeader />
       <main className="flex-1 flex flex-col">{children}</main>
-      <AdminFooter />
     </div>
   );
 }
\ No newline at end of file
diff --git a/web/src/app/admin/page.tsx b/web/src/app/admin/page.tsx
index 7fa4e20..e450b89 100644
--- a/web/src/app/admin/page.tsx
+++ b/web/src/app/admin/page.tsx
@@ -6,6 +6,7 @@ import { useScheduleStatusStats } from "@/hooks/admin/useSchedule";
 import { useUserRoleStats } from "@/hooks/admin/useUser";
 import { ScheduleStatus } from "@/schemas/schedule/schedule-status";
 import { UserRole } from "@/schemas/user/user-role";
+import { Button } from "@/components/ui/button";
 
 export default function AdminPage() {
   const {
@@ -26,8 +27,8 @@ export default function AdminPage() {
 
   if (isLoading) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-4xl">
-        <h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
+      <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+        <h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
         <div className="flex flex-col gap-6">
           <StatsListSkeleton />
           <StatsListSkeleton />
@@ -38,33 +39,35 @@ export default function AdminPage() {
 
   if (isError) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-4xl">
-        <h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
-        <div className="rounded-lg border border-muted-foreground/30 bg-muted/30 p-6">
-          <p className="text-foreground font-medium mb-2">
+      <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+        <h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
+        <div className="rounded-lg border border-muted-foreground/30 bg-muted/30 p-4 sm:p-6">
+          <p className="mb-2 font-medium text-foreground">
             데이터를 불러오는 중 오류가 발생했습니다.
           </p>
-          <p className="text-sm text-muted-foreground mb-4">
+          <p className="mb-4 text-sm text-muted-foreground">
             잠시 후 다시 시도해주세요.
           </p>
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             {isScheduleStatusError && (
-              <button
+              <Button
                 type="button"
+                variant="secondary"
+                size="sm"
                 onClick={() => refetchScheduleStatus()}
-                className="rounded-md bg-foreground px-4 py-2 text-background hover:bg-foreground/90 text-sm"
               >
                 스케줄 통계 다시 시도
-              </button>
+              </Button>
             )}
             {isUserRoleError && (
-              <button
+              <Button
                 type="button"
+                variant="secondary"
+                size="sm"
                 onClick={() => refetchUserRole()}
-                className="rounded-md bg-foreground px-4 py-2 text-background hover:bg-foreground/90 text-sm"
               >
                 사용자 통계 다시 시도
-              </button>
+              </Button>
             )}
           </div>
         </div>
@@ -73,32 +76,32 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-4xl">
-      <h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
+    <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
 
       <div className="flex flex-col gap-6">
         {/* 사용자 통계 */}
         {userRoleStats ? (
-          <section>
-            <h2 className="text-base font-semibold text-foreground mb-3">사용자 통계</h2>
+          <section className="min-w-0">
+            <h2 className="mb-3 text-base font-semibold text-foreground">사용자 통계</h2>
             <StatsList<UserRole> stats={userRoleStats} unit="명" />
           </section>
         ) : (
-          <section>
-            <h2 className="text-base font-semibold text-foreground mb-3">사용자 통계</h2>
+          <section className="min-w-0">
+            <h2 className="mb-3 text-base font-semibold text-foreground">사용자 통계</h2>
             <p className="text-muted-foreground">데이터를 불러올 수 없습니다.</p>
           </section>
         )}
 
         {/* 스케줄 통계 */}
         {scheduleStatusStats ? (
-          <section>
-            <h2 className="text-base font-semibold text-foreground mb-3">스케줄 통계</h2>
+          <section className="min-w-0">
+            <h2 className="mb-3 text-base font-semibold text-foreground">스케줄 통계</h2>
             <StatsList<ScheduleStatus> stats={scheduleStatusStats} unit="건" />
           </section>
         ) : (
-          <section>
-            <h2 className="text-base font-semibold text-foreground mb-3">스케줄 통계</h2>
+          <section className="min-w-0">
+            <h2 className="mb-3 text-base font-semibold text-foreground">스케줄 통계</h2>
             <p className="text-muted-foreground">데이터를 불러올 수 없습니다.</p>
           </section>
         )}
diff --git a/web/src/app/admin/schedule/page.tsx b/web/src/app/admin/schedule/page.tsx
index cabdac6..e94f250 100644
--- a/web/src/app/admin/schedule/page.tsx
+++ b/web/src/app/admin/schedule/page.tsx
@@ -39,23 +39,23 @@ export default function AdminSchedulesPage() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
       <div className="flex flex-col gap-8">
-        <header className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
               스케줄 관리
             </h1>
-            <p className="mt-2 text-lg text-muted-foreground">
+            <p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
               사용자 스케줄을 검색하고 관리합니다.
             </p>
           </div>
           <Button
-            className="flex items-center gap-2"
+            className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
             onClick={openCreateModal}
           >
-            <Plus className="mr-2 h-4 w-4" />
-            <span>스케줄 추가</span>
+            <Plus className="h-4 w-4 shrink-0" />
+            <span className="truncate">스케줄 추가</span>
           </Button>
         </header>
 
@@ -63,7 +63,7 @@ export default function AdminSchedulesPage() {
           <ScheduleListForm onSubmit={updateRequest} />
         </div>
 
-        <div className="flex-1 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 flex-1 min-w-0">
           {isLoading ? (
             <ListTableSkeleton columnCount={5} rowCount={8} />
           ) : error ? (
@@ -71,10 +71,12 @@ export default function AdminSchedulesPage() {
               스케줄 목록을 불러오는 중 오류가 발생했습니다.
             </p>
           ) : schedules?.length ? (
-            <ScheduleListTable
-              schedules={schedules ?? []}
-              onUpdate={openUpdateModal}
-            />
+            <div className="min-w-0 overflow-x-auto rounded-lg border border-border">
+              <ScheduleListTable
+                schedules={schedules ?? []}
+                onUpdate={openUpdateModal}
+              />
+            </div>
           ) : (
             <p className="text-center text-muted-foreground">스케줄이 없습니다.</p>
           )}
diff --git a/web/src/app/admin/user/page.tsx b/web/src/app/admin/user/page.tsx
index 940b348..a3c02bc 100644
--- a/web/src/app/admin/user/page.tsx
+++ b/web/src/app/admin/user/page.tsx
@@ -39,23 +39,23 @@ export default function AdminUsersPage() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
       <div className="flex flex-col gap-8">
-        <header className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
+            <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
               사용자 관리
             </h1>
-            <p className="mt-2 text-lg text-muted-foreground">
+            <p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
               서비스 사용자를 검색하고 관리합니다.
             </p>
           </div>
           <Button
-            className="flex items-center gap-2"
+            className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
             onClick={openCreateModal}
           >
-            <Plus className="mr-2 h-4 w-4" />
-            <span>사용자 추가</span>
+            <Plus className="h-4 w-4 shrink-0" />
+            <span className="truncate">사용자 추가</span>
           </Button>
         </header>
 
@@ -63,7 +63,7 @@ export default function AdminUsersPage() {
           <UserListForm onSubmit={updateRequest} />
         </div>
 
-        <div className="flex-1 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 flex-1 min-w-0">
           {isLoading ? (
             <ListTableSkeleton columnCount={5} rowCount={8} />
           ) : error ? (
@@ -71,7 +71,9 @@ export default function AdminUsersPage() {
               사용자 목록을 불러오는 중 오류가 발생했습니다.
             </p>
           ) : users?.length ? (
-            <UserListTable users={users ?? []} onUpdate={openUpdateModal} />
+            <div className="min-w-0 overflow-x-auto rounded-lg border border-border">
+              <UserListTable users={users ?? []} onUpdate={openUpdateModal} />
+            </div>
           ) : (
             <p className="text-center text-muted-foreground">사용자가 없습니다.</p>
           )}
diff --git a/web/src/components/LandingFooter.tsx b/web/src/components/LandingFooter.tsx
deleted file mode 100644
index 59b72d3..0000000
--- a/web/src/components/LandingFooter.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function LandingFooter() {
-  return (
-    <footer className="w-full border-t bg-background">
-      <div className="mx-auto max-w-7xl p-6 text-center text-sm text-muted-foreground lg:px-8">
-        © 2024 NexLang. All rights reserved.
-      </div>
-    </footer>
-  );
-}
diff --git a/web/src/components/admin/Footer.tsx b/web/src/components/admin/Footer.tsx
deleted file mode 100644
index d08289e..0000000
--- a/web/src/components/admin/Footer.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function AdminFooter() {
-  return (
-    <footer className="sticky flex justify-center bottom-0 z-40 border-t w-full bg-background">
-      <div className="w-full mx-auto p-4 text-center text-sm">
-        © 2024 NexLang. All rights reserved.
-      </div>
-    </footer>
-  );
-}
\ No newline at end of file
diff --git a/web/src/components/admin/Header.tsx b/web/src/components/admin/Header.tsx
index fddc4e5..3fddf11 100644
--- a/web/src/components/admin/Header.tsx
+++ b/web/src/components/admin/Header.tsx
@@ -26,10 +26,7 @@ export default function AdminHeader() {
     <header className="sticky top-0 z-40 flex w-full justify-center border-b bg-background pt-[env(safe-area-inset-top)]">
       <div className="flex h-16 w-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
         <div className="flex items-center gap-2">
-          <HeaderNavSheet
-            navItems={[...NAV_ITEMS]}
-            getIsActive={getIsActive}
-          />
+          <HeaderNavSheet navItems={NAV_ITEMS} getIsActive={getIsActive} />
           <Link href="/" className="flex items-center space-x-2">
             <BookOpen className="h-6 w-6" />
             <h1 className="font-bold">NexLang</h1>
diff --git a/web/src/components/admin/Sidebar.tsx b/web/src/components/admin/Sidebar.tsx
deleted file mode 100644
index 93e617c..0000000
--- a/web/src/components/admin/Sidebar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export default function AdminSidebar() {
-  return (
-    <nav className="w-64 bg-background border-r min-h-screen p-4">
-      <ul className="space-y-4">
-        <li>
-          <a href="/admin" className="text-lg font-semibold text-foreground hover:text-primary">
-            대시보드
-          </a>
-        </li>
-        <li>
-          <a href="/admin/user" className="text-lg font-semibold text-foreground hover:text-primary">
-            사용자 관리
-          </a>
-        </li>
-        <li>
-          <a href="/admin/course" className="text-lg font-semibold text-foreground hover:text-primary">
-            강의 관리
-          </a>
-        </li>
-        <li>
-          <a href="/admin/feedback" className="text-lg font-semibold text-foreground hover:text-primary">
-            피드백 관리
-          </a>
-        </li>
-      </ul>
-    </nav>
-  );
-}
\ No newline at end of file
diff --git a/web/src/components/admin/course/CourseListForm.tsx b/web/src/components/admin/course/CourseListForm.tsx
index a46c841..c880d9d 100644
--- a/web/src/components/admin/course/CourseListForm.tsx
+++ b/web/src/components/admin/course/CourseListForm.tsx
@@ -42,29 +42,29 @@ export default function CourseListForm({ onSubmit }: CourseListFormProps) {
 
   return (
     <form
-      className="flex flex-wrap justify-start items-end gap-4"
+      className="flex flex-wrap items-end gap-3 sm:gap-4"
       onSubmit={handleSubmit(handleFormSubmit)}
     >
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="title" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="title" className="shrink-0 text-sm font-medium text-foreground">
           제목
         </Label>
         <Input
           id="title"
           type="text"
-          className="px-2 lg:px-4 py-2 w-20 lg:w-32 text-sm h-auto"
+          className="min-w-[4.5rem] max-w-32 px-2 py-2 text-sm h-auto sm:w-28 lg:w-32 sm:px-4"
           {...register("title")}
         />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="status" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="status" className="shrink-0 text-sm font-medium text-foreground">
           상태
         </Label>
         <select
           id="status"
           className={cn(
-            "flex h-10 w-20 lg:w-24 rounded-md border border-input bg-background px-2 lg:px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            "flex h-10 min-w-[5rem] max-w-24 rounded-md border border-input bg-background px-2 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:px-4 lg:w-24"
           )}
           {...register("status")}
         >
@@ -77,23 +77,23 @@ export default function CourseListForm({ onSubmit }: CourseListFormProps) {
         </select>
       </div>
 
-      <div className="flex justify-center items-center gap-4">
+      <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:gap-4">
         <Button
           type="button"
           variant="outline"
           onClick={handleReset}
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <RotateCcw className="mr-2 h-4 w-4" />
-          초기화
+          <RotateCcw className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">초기화</span>
         </Button>
 
         <Button
           type="submit"
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <Search className="mr-2 h-4 w-4" />
-          검색
+          <Search className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">검색</span>
         </Button>
       </div>
     </form>
diff --git a/web/src/components/admin/course/CourseListTable.tsx b/web/src/components/admin/course/CourseListTable.tsx
index 33cbe77..6cd9828 100644
--- a/web/src/components/admin/course/CourseListTable.tsx
+++ b/web/src/components/admin/course/CourseListTable.tsx
@@ -18,28 +18,28 @@ export default function CourseListTable({
   onDelete,
 }: CourseListTableProps) {
   return (
-    <table className="min-w-full divide-y divide-border">
+    <table className="w-full min-w-[28rem] divide-y divide-border table-auto">
       <thead className="bg-muted">
         <tr>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             제목
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             상태
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             생성일
           </th>
-          <th scope="col" className="relative px-6 py-4">
+          <th scope="col" className="relative px-3 py-3 sm:px-6 sm:py-4">
             <span className="sr-only">관리</span>
           </th>
         </tr>
@@ -47,38 +47,43 @@ export default function CourseListTable({
       <tbody className="bg-card divide-y divide-border">
         {courses.map((course) => (
           <tr key={course.id}>
-            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground text-left">
+            <td className="max-w-24 truncate px-3 py-3 text-sm font-medium text-foreground text-left sm:max-w-none sm:px-6 sm:py-4" title={course.title}>
               {course.title}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm text-muted-foreground text-left sm:px-6 sm:py-4">
               <Badge
                 className={cn(
-                  "inline-flex rounded-full px-3 py-1 text-sm font-semibold leading-5",
+                  "inline-flex rounded-full px-2 py-0.5 text-xs font-semibold leading-5 sm:px-3 sm:py-1 sm:text-sm",
                   COURSE_STATUS_COLORS[course.status]
                 )}
               >
                 {COURSE_STATUS_LABELS[course.status]}
               </Badge>
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="whitespace-nowrap px-3 py-3 text-xs text-muted-foreground sm:px-6 sm:py-4 sm:text-sm">
               {format(new Date(course.createdAt), "yyyy-MM-dd HH:mm")}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-right">
-              <div className="flex justify-end gap-2">
+            <td className="whitespace-nowrap px-3 py-3 text-right sm:px-6 sm:py-4">
+              <div className="flex justify-end gap-1 sm:gap-2">
                 <Button
                   onClick={() => onUpdate(course.id)}
-                  className="px-2 lg:px-4 py-2 text-sm"
+                  size="sm"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0 p-0 sm:inline-flex sm:h-auto sm:w-auto sm:gap-2 sm:px-3 sm:py-2"
+                  aria-label={`${course.title} 수정`}
                 >
-                  <Pencil className="mr-2 h-4 w-4" />
-                  수정
+                  <Pencil className="h-4 w-4" />
+                  <span className="hidden sm:inline">수정</span>
                 </Button>
                 <Button
                   onClick={() => onDelete(course.id)}
+                  size="sm"
                   variant="destructive"
-                  className="px-2 lg:px-4 py-2 text-sm"
+                  className="h-8 w-8 shrink-0 p-0 sm:inline-flex sm:h-auto sm:w-auto sm:gap-2 sm:px-3 sm:py-2"
+                  aria-label={`${course.title} 삭제`}
                 >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  삭제
+                  <Trash2 className="h-4 w-4" />
+                  <span className="hidden sm:inline">삭제</span>
                 </Button>
               </div>
             </td>
diff --git a/web/src/components/admin/schedule/ScheduleListForm.tsx b/web/src/components/admin/schedule/ScheduleListForm.tsx
index 45b7a08..234aca5 100644
--- a/web/src/components/admin/schedule/ScheduleListForm.tsx
+++ b/web/src/components/admin/schedule/ScheduleListForm.tsx
@@ -49,29 +49,29 @@ export default function ScheduleListForm({ onSubmit }: ScheduleListFormProps) {
 
   return (
     <form
-      className="flex flex-wrap justify-start items-end gap-4"
+      className="flex flex-wrap items-end gap-3 sm:gap-4"
       onSubmit={handleSubmit(handleFormSubmit)}
     >
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="userId" className="text-sm font-medium text-foreground">
-          사용자 번호
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="userId" className="shrink-0 text-sm font-medium text-foreground">
+          사용자 ID
         </Label>
         <Input
           id="userId"
           type="text"
-          className="px-2 lg:px-4 py-2 w-20 lg:w-32 text-sm h-auto"
+          className="min-w-[4.5rem] max-w-32 px-2 py-2 text-sm h-auto sm:w-28 lg:w-32 sm:px-4"
           {...register("userId")}
         />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="status" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="status" className="shrink-0 text-sm font-medium text-foreground">
           상태
         </Label>
         <select
           id="status"
           className={cn(
-            "flex h-10 w-20 lg:w-24 rounded-md border border-input bg-background px-2 lg:px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            "flex h-10 min-w-[5rem] max-w-24 rounded-md border border-input bg-background px-2 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:px-4 lg:w-24"
           )}
           {...register("status")}
         >
@@ -84,23 +84,23 @@ export default function ScheduleListForm({ onSubmit }: ScheduleListFormProps) {
         </select>
       </div>
 
-      <div className="flex justify-center items-center gap-4">
+      <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:gap-4">
         <Button
           type="button"
           variant="outline"
           onClick={handleReset}
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <RotateCcw className="mr-2 h-4 w-4" />
-          초기화
+          <RotateCcw className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">초기화</span>
         </Button>
 
         <Button
           type="submit"
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <Search className="mr-2 h-4 w-4" />
-          검색
+          <Search className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">검색</span>
         </Button>
       </div>
     </form>
diff --git a/web/src/components/admin/schedule/ScheduleListTable.tsx b/web/src/components/admin/schedule/ScheduleListTable.tsx
index 62b7bed..05e09b3 100644
--- a/web/src/components/admin/schedule/ScheduleListTable.tsx
+++ b/web/src/components/admin/schedule/ScheduleListTable.tsx
@@ -31,34 +31,34 @@ export default function ScheduleListTable({
   onUpdate,
 }: ScheduleListTableProps) {
   return (
-    <table className="min-w-full divide-y divide-border">
+    <table className="w-full min-w-[32rem] divide-y divide-border table-auto">
       <thead className="bg-muted">
         <tr>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
-            사용자 번호
+            사용자 ID
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
-            시작 시간
+            시작
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
-            종료 시간
+            종료
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             상태
           </th>
-          <th scope="col" className="relative px-6 py-4">
+          <th scope="col" className="relative px-3 py-3 sm:px-6 sm:py-4">
             <span className="sr-only">수정</span>
           </th>
         </tr>
@@ -66,32 +66,35 @@ export default function ScheduleListTable({
       <tbody className="bg-card divide-y divide-border">
         {schedules.map((schedule) => (
           <tr key={schedule.id}>
-            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm font-medium text-foreground text-left sm:px-6 sm:py-4">
               {schedule.userId}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="whitespace-nowrap px-3 py-3 text-xs text-muted-foreground sm:px-6 sm:py-4 sm:text-sm">
               {format(new Date(schedule.startsAt), "yyyy-MM-dd HH:mm")}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="whitespace-nowrap px-3 py-3 text-xs text-muted-foreground sm:px-6 sm:py-4 sm:text-sm">
               {format(new Date(schedule.endsAt), "yyyy-MM-dd HH:mm")}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm text-muted-foreground text-left sm:px-6 sm:py-4">
               <Badge
                 className={cn(
-                  "inline-flex rounded-full px-3 py-1 text-sm font-semibold leading-5",
+                  "inline-flex rounded-full px-2 py-0.5 text-xs font-semibold leading-5 sm:px-3 sm:py-1 sm:text-sm",
                   SCHEDULE_STATUS_COLORS[schedule.status]
                 )}
               >
                 {SCHEDULE_STATUS_NAMES[schedule.status]}
               </Badge>
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-right">
+            <td className="px-3 py-3 whitespace-nowrap text-right sm:px-6 sm:py-4">
               <Button
                 onClick={() => onUpdate(schedule.id)}
-                className="px-2 lg:px-4 py-2 text-sm"
+                size="sm"
+                variant="ghost"
+                className="h-8 w-8 shrink-0 p-0 sm:inline-flex sm:h-auto sm:w-auto sm:gap-2 sm:px-3 sm:py-2"
+                aria-label={`스케줄 ${schedule.id} 수정`}
               >
-                <Pencil className="mr-2 h-4 w-4" />
-                수정
+                <Pencil className="h-4 w-4" />
+                <span className="hidden sm:inline">수정</span>
               </Button>
             </td>
           </tr>
diff --git a/web/src/components/admin/user/UserListForm.tsx b/web/src/components/admin/user/UserListForm.tsx
index ffa1cee..81e007d 100644
--- a/web/src/components/admin/user/UserListForm.tsx
+++ b/web/src/components/admin/user/UserListForm.tsx
@@ -35,8 +35,7 @@ export default function UserListForm({ onSubmit }: UserListFormProps) {
 
   const handleFormSubmit = (data: UserListFormValues) => {
     onSubmit({
-      name: data.name,
-      email: data.email,
+      name: data.name || undefined,
       role: data.role === "" ? undefined : data.role,
       status: data.status === "" ? undefined : data.status,
     });
@@ -44,29 +43,29 @@ export default function UserListForm({ onSubmit }: UserListFormProps) {
 
   return (
     <form
-      className="flex flex-wrap justify-start items-end gap-4"
+      className="flex flex-wrap items-end gap-3 sm:gap-4"
       onSubmit={handleSubmit(handleFormSubmit)}
     >
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="name" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="name" className="shrink-0 text-sm font-medium text-foreground">
           이름
         </Label>
         <Input
           id="name"
           type="text"
-          className="px-2 lg:px-4 py-2 w-20 lg:w-32 text-sm h-auto"
+          className="min-w-[4.5rem] max-w-32 px-2 py-2 text-sm h-auto sm:w-28 lg:w-32 sm:px-4"
           {...register("name")}
         />
       </div>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="role" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="role" className="shrink-0 text-sm font-medium text-foreground">
           역할
         </Label>
         <select
           id="role"
           className={cn(
-            "flex h-10 w-20 lg:w-24 rounded-md border border-input bg-background px-2 lg:px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            "flex h-10 min-w-[5rem] max-w-24 rounded-md border border-input bg-background px-2 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:px-4 lg:w-24"
           )}
           {...register("role")}
         >
@@ -79,14 +78,14 @@ export default function UserListForm({ onSubmit }: UserListFormProps) {
         </select>
       </div>
 
-      <div className="flex flex-col gap-2">
-        <Label htmlFor="status" className="text-sm font-medium text-foreground">
+      <div className="flex min-w-0 flex-col gap-1.5 sm:gap-2">
+        <Label htmlFor="status" className="shrink-0 text-sm font-medium text-foreground">
           상태
         </Label>
         <select
           id="status"
           className={cn(
-            "flex h-10 w-20 lg:w-24 rounded-md border border-input bg-background px-2 lg:px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            "flex h-10 min-w-[5rem] max-w-24 rounded-md border border-input bg-background px-2 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:px-4 lg:w-24"
           )}
           {...register("status")}
         >
@@ -99,23 +98,23 @@ export default function UserListForm({ onSubmit }: UserListFormProps) {
         </select>
       </div>
 
-      <div className="flex justify-center items-center gap-4">
+      <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:gap-4">
         <Button
           type="button"
           variant="outline"
           onClick={handleReset}
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <RotateCcw className="mr-2 h-4 w-4" />
-          초기화
+          <RotateCcw className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">초기화</span>
         </Button>
 
         <Button
           type="submit"
-          className="px-2 lg:px-4 py-2 text-sm h-auto"
+          className="flex-1 shrink-0 py-2 text-sm h-auto sm:flex-none sm:px-4"
         >
-          <Search className="mr-2 h-4 w-4" />
-          검색
+          <Search className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">검색</span>
         </Button>
       </div>
     </form>
diff --git a/web/src/components/admin/user/UserListTable.tsx b/web/src/components/admin/user/UserListTable.tsx
index 3eed850..4f58fc9 100644
--- a/web/src/components/admin/user/UserListTable.tsx
+++ b/web/src/components/admin/user/UserListTable.tsx
@@ -17,34 +17,34 @@ interface UserListTableProps {
 
 export default function UserListTable({ users, onUpdate }: UserListTableProps) {
   return (
-    <table className="min-w-full divide-y divide-border">
+    <table className="w-full min-w-[36rem] divide-y divide-border table-auto">
       <thead className="bg-muted">
         <tr>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             이름
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             이메일
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             역할
           </th>
           <th
             scope="col"
-            className="px-6 py-4 text-left text-sm font-medium text-muted-foreground uppercase tracking-wider"
+            className="px-3 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider sm:px-6 sm:py-4 sm:text-sm"
           >
             상태
           </th>
-          <th scope="col" className="relative px-6 py-4">
+          <th scope="col" className="relative px-3 py-3 sm:px-6 sm:py-4">
             <span className="sr-only">수정</span>
           </th>
         </tr>
@@ -52,39 +52,42 @@ export default function UserListTable({ users, onUpdate }: UserListTableProps) {
       <tbody className="bg-card divide-y divide-border">
         {users.map((user) => (
           <tr key={user.id}>
-            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm font-medium text-foreground text-left sm:px-6 sm:py-4">
               {user.name}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="max-w-24 truncate px-3 py-3 text-sm text-muted-foreground text-left sm:max-w-none sm:px-6 sm:py-4" title={user.email}>
               {user.email}
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm text-muted-foreground text-left sm:px-6 sm:py-4">
               <Badge
                 className={cn(
-                  "inline-flex rounded-full px-3 py-1 text-sm font-semibold leading-5",
+                  "inline-flex rounded-full px-2 py-0.5 text-xs font-semibold leading-5 sm:px-3 sm:py-1 sm:text-sm",
                   USER_ROLE_COLORS[user.role]
                 )}
               >
                 {USER_ROLE_NAMES[user.role]}
               </Badge>
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-left">
+            <td className="px-3 py-3 whitespace-nowrap text-sm text-muted-foreground text-left sm:px-6 sm:py-4">
               <Badge
                 className={cn(
-                  "inline-flex rounded-full px-3 py-1 text-sm font-semibold leading-5",
+                  "inline-flex rounded-full px-2 py-0.5 text-xs font-semibold leading-5 sm:px-3 sm:py-1 sm:text-sm",
                   USER_STATUS_COLORS[user.status]
                 )}
               >
                 {USER_STATUS_NAMES[user.status]}
               </Badge>
             </td>
-            <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground text-right">
+            <td className="px-3 py-3 whitespace-nowrap text-right sm:px-6 sm:py-4">
               <Button
                 onClick={() => onUpdate(user.id)}
-                className="px-2 lg:px-4 py-2 text-sm"
+                size="sm"
+                variant="ghost"
+                className="h-8 w-8 shrink-0 p-0 sm:inline-flex sm:h-auto sm:w-auto sm:gap-2 sm:px-3 sm:py-2"
+                aria-label={`${user.name} 수정`}
               >
-                <Pencil className="mr-2 h-4 w-4" />
-                수정
+                <Pencil className="h-4 w-4" />
+                <span className="hidden sm:inline">수정</span>
               </Button>
             </td>
           </tr>
diff --git a/web/src/components/common/HeaderUserMenu.tsx b/web/src/components/common/HeaderUserMenu.tsx
index 0338c84..b6cb456 100644
--- a/web/src/components/common/HeaderUserMenu.tsx
+++ b/web/src/components/common/HeaderUserMenu.tsx
@@ -52,7 +52,7 @@ export default function HeaderUserMenu({
       <div className="flex items-center gap-1 sm:gap-2">
         {showDashboardLink && dashboardPath && (
           <Button variant="ghost" size="sm" asChild className={TOUCH_TARGET_CLASS}>
-            <a href={dashboardPath}>내 대시보드</a>
+            <Link href={dashboardPath}>내 대시보드</Link>
           </Button>
         )}
         <Button
@@ -82,7 +82,7 @@ export default function HeaderUserMenu({
     <div className="flex items-center gap-2 sm:gap-4">
       {showDashboardLink && dashboardPath && (
         <Button variant="ghost" size="sm" asChild className={TOUCH_TARGET_CLASS}>
-          <a href={dashboardPath}>내 대시보드</a>
+          <Link href={dashboardPath}>내 대시보드</Link>
         </Button>
       )}
       <Button variant="ghost" size="sm" asChild className={TOUCH_TARGET_CLASS}>
diff --git a/web/src/components/study/StudyHeader.tsx b/web/src/components/study/StudyHeader.tsx
index e6c4cdf..6644ca0 100644
--- a/web/src/components/study/StudyHeader.tsx
+++ b/web/src/components/study/StudyHeader.tsx
@@ -25,10 +25,7 @@ export default function StudyHeader() {
     <header className="sticky top-0 z-40 w-full border-b bg-background pt-[env(safe-area-inset-top)]">
       <div className="flex h-16 w-full max-w-7xl mx-auto items-center justify-between px-4 sm:px-6 lg:px-8">
         <div className="flex items-center gap-2">
-          <HeaderNavSheet
-            navItems={[...NAV_ITEMS]}
-            getIsActive={getIsActive}
-          />
+          <HeaderNavSheet navItems={NAV_ITEMS} getIsActive={getIsActive} />
           <Link href="/" className="flex items-center space-x-2">
             <BookOpen className="h-6 w-6" />
             <h1 className="font-bold">NexLang</h1>
diff --git a/web/src/components/teach/TeachHeader.tsx b/web/src/components/teach/TeachHeader.tsx
index 37da8ff..65c95a4 100644
--- a/web/src/components/teach/TeachHeader.tsx
+++ b/web/src/components/teach/TeachHeader.tsx
@@ -26,10 +26,7 @@ export default function TeachHeader() {
     <header className="sticky top-0 z-40 w-full border-b bg-background pt-[env(safe-area-inset-top)]">
       <div className="flex h-16 w-full max-w-7xl mx-auto items-center justify-between px-4 sm:px-6 lg:px-8">
         <div className="flex items-center gap-2">
-          <HeaderNavSheet
-            navItems={[...NAV_ITEMS]}
-            getIsActive={getIsActive}
-          />
+          <HeaderNavSheet navItems={NAV_ITEMS} getIsActive={getIsActive} />
           <Link href="/" className="flex items-center space-x-2">
             <BookOpen className="h-6 w-6" />
             <h1 className="font-bold">NexLang</h1>