Skip to content

Commit 3fef75b

Browse files
junotbjunotb
authored
Merge pull request #53 from junotb/refactor/2026-02-15
refactor: Admin 레이아웃 및 리스트 컴포넌트 정리
2 parents bee3507 + c9b8f09 commit 3fef75b

19 files changed

Lines changed: 184 additions & 225 deletions

‎web/src/app/(landing)/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import LandingHeader from "@/components/LandingHeader";
2-
import LandingFooter from "@/components/LandingFooter";
32

43
export default function LandingLayout({
54
children,
@@ -10,7 +9,6 @@ export default function LandingLayout({
109
<div className="min-h-screen flex flex-col">
1110
<LandingHeader />
1211
<main className="flex-1">{children}</main>
13-
<LandingFooter />
1412
</div>
1513
);
1614
}

‎web/src/app/admin/course/page.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,23 +49,23 @@ export default function AdminCoursesPage() {
4949
};
5050

5151
return (
52-
<div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
52+
<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">
5353
<div className="flex flex-col gap-8">
54-
<header className="flex items-center justify-between">
55-
<div>
56-
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
54+
<header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
55+
<div className="min-w-0">
56+
<h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
5757
강의 관리
5858
</h1>
59-
<p className="mt-2 text-lg text-muted-foreground">
59+
<p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
6060
교육 콘텐츠를 검색하고 관리합니다.
6161
</p>
6262
</div>
6363
<Button
64-
className="flex items-center gap-2"
64+
className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
6565
onClick={openCreateModal}
6666
>
67-
<Plus className="mr-2 h-4 w-4" />
68-
<span>강의 추가</span>
67+
<Plus className="h-4 w-4 shrink-0" />
68+
<span className="truncate">강의 추가</span>
6969
</Button>
7070
</header>
7171

@@ -77,19 +77,21 @@ export default function AdminCoursesPage() {
7777
<CourseListForm onSubmit={updateRequest} />
7878
</div>
7979

80-
<div className="flex-1 flex flex-col gap-4">
80+
<div className="flex flex-col gap-4 flex-1 min-w-0">
8181
{isLoading ? (
8282
<ListTableSkeleton columnCount={4} rowCount={8} />
8383
) : error ? (
8484
<p className="text-center text-destructive">
8585
강의 목록을 불러오는 중 오류가 발생했습니다.
8686
</p>
8787
) : courses?.length ? (
88-
<CourseListTable
89-
courses={courses ?? []}
90-
onUpdate={openUpdateModal}
91-
onDelete={handleDelete}
92-
/>
88+
<div className="min-w-0 overflow-x-auto rounded-lg border border-border">
89+
<CourseListTable
90+
courses={courses ?? []}
91+
onUpdate={openUpdateModal}
92+
onDelete={handleDelete}
93+
/>
94+
</div>
9395
) : (
9496
<p className="text-center text-muted-foreground">강의가 없습니다.</p>
9597
)}

‎web/src/app/admin/layout.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import AdminHeader from "@/components/admin/Header";
2-
import AdminFooter from "@/components/admin/Footer";
3-
//
42

53
export default function AdminLayout({ children }: { children: React.ReactNode }) {
64
return (
75
<div className="min-h-screen flex flex-col">
86
<AdminHeader />
97
<main className="flex-1 flex flex-col">{children}</main>
10-
<AdminFooter />
118
</div>
129
);
1310
}

‎web/src/app/admin/page.tsx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useScheduleStatusStats } from "@/hooks/admin/useSchedule";
66
import { useUserRoleStats } from "@/hooks/admin/useUser";
77
import { ScheduleStatus } from "@/schemas/schedule/schedule-status";
88
import { UserRole } from "@/schemas/user/user-role";
9+
import { Button } from "@/components/ui/button";
910

1011
export default function AdminPage() {
1112
const {
@@ -26,8 +27,8 @@ export default function AdminPage() {
2627

2728
if (isLoading) {
2829
return (
29-
<div className="container mx-auto py-8 px-4 max-w-4xl">
30-
<h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
30+
<div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
31+
<h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
3132
<div className="flex flex-col gap-6">
3233
<StatsListSkeleton />
3334
<StatsListSkeleton />
@@ -38,33 +39,35 @@ export default function AdminPage() {
3839

3940
if (isError) {
4041
return (
41-
<div className="container mx-auto py-8 px-4 max-w-4xl">
42-
<h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
43-
<div className="rounded-lg border border-muted-foreground/30 bg-muted/30 p-6">
44-
<p className="text-foreground font-medium mb-2">
42+
<div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
43+
<h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
44+
<div className="rounded-lg border border-muted-foreground/30 bg-muted/30 p-4 sm:p-6">
45+
<p className="mb-2 font-medium text-foreground">
4546
데이터를 불러오는 중 오류가 발생했습니다.
4647
</p>
47-
<p className="text-sm text-muted-foreground mb-4">
48+
<p className="mb-4 text-sm text-muted-foreground">
4849
잠시 후 다시 시도해주세요.
4950
</p>
50-
<div className="flex gap-2">
51+
<div className="flex flex-wrap gap-2">
5152
{isScheduleStatusError && (
52-
<button
53+
<Button
5354
type="button"
55+
variant="secondary"
56+
size="sm"
5457
onClick={() => refetchScheduleStatus()}
55-
className="rounded-md bg-foreground px-4 py-2 text-background hover:bg-foreground/90 text-sm"
5658
>
5759
스케줄 통계 다시 시도
58-
</button>
60+
</Button>
5961
)}
6062
{isUserRoleError && (
61-
<button
63+
<Button
6264
type="button"
65+
variant="secondary"
66+
size="sm"
6367
onClick={() => refetchUserRole()}
64-
className="rounded-md bg-foreground px-4 py-2 text-background hover:bg-foreground/90 text-sm"
6568
>
6669
사용자 통계 다시 시도
67-
</button>
70+
</Button>
6871
)}
6972
</div>
7073
</div>
@@ -73,32 +76,32 @@ export default function AdminPage() {
7376
}
7477

7578
return (
76-
<div className="container mx-auto py-8 px-4 max-w-4xl">
77-
<h1 className="text-2xl font-bold text-foreground mb-6">관리자 대시보드</h1>
79+
<div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
80+
<h1 className="mb-6 text-2xl font-bold text-foreground sm:text-3xl">관리자 대시보드</h1>
7881

7982
<div className="flex flex-col gap-6">
8083
{/* 사용자 통계 */}
8184
{userRoleStats ? (
82-
<section>
83-
<h2 className="text-base font-semibold text-foreground mb-3">사용자 통계</h2>
85+
<section className="min-w-0">
86+
<h2 className="mb-3 text-base font-semibold text-foreground">사용자 통계</h2>
8487
<StatsList<UserRole> stats={userRoleStats} unit="명" />
8588
</section>
8689
) : (
87-
<section>
88-
<h2 className="text-base font-semibold text-foreground mb-3">사용자 통계</h2>
90+
<section className="min-w-0">
91+
<h2 className="mb-3 text-base font-semibold text-foreground">사용자 통계</h2>
8992
<p className="text-muted-foreground">데이터를 불러올 수 없습니다.</p>
9093
</section>
9194
)}
9295

9396
{/* 스케줄 통계 */}
9497
{scheduleStatusStats ? (
95-
<section>
96-
<h2 className="text-base font-semibold text-foreground mb-3">스케줄 통계</h2>
98+
<section className="min-w-0">
99+
<h2 className="mb-3 text-base font-semibold text-foreground">스케줄 통계</h2>
97100
<StatsList<ScheduleStatus> stats={scheduleStatusStats} unit="건" />
98101
</section>
99102
) : (
100-
<section>
101-
<h2 className="text-base font-semibold text-foreground mb-3">스케줄 통계</h2>
103+
<section className="min-w-0">
104+
<h2 className="mb-3 text-base font-semibold text-foreground">스케줄 통계</h2>
102105
<p className="text-muted-foreground">데이터를 불러올 수 없습니다.</p>
103106
</section>
104107
)}

‎web/src/app/admin/schedule/page.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,42 +39,44 @@ export default function AdminSchedulesPage() {
3939
};
4040

4141
return (
42-
<div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
42+
<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">
4343
<div className="flex flex-col gap-8">
44-
<header className="flex items-center justify-between">
45-
<div>
46-
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
44+
<header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
45+
<div className="min-w-0">
46+
<h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
4747
스케줄 관리
4848
</h1>
49-
<p className="mt-2 text-lg text-muted-foreground">
49+
<p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
5050
사용자 스케줄을 검색하고 관리합니다.
5151
</p>
5252
</div>
5353
<Button
54-
className="flex items-center gap-2"
54+
className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
5555
onClick={openCreateModal}
5656
>
57-
<Plus className="mr-2 h-4 w-4" />
58-
<span>스케줄 추가</span>
57+
<Plus className="h-4 w-4 shrink-0" />
58+
<span className="truncate">스케줄 추가</span>
5959
</Button>
6060
</header>
6161

6262
<div className="w-full">
6363
<ScheduleListForm onSubmit={updateRequest} />
6464
</div>
6565

66-
<div className="flex-1 flex flex-col gap-4">
66+
<div className="flex flex-col gap-4 flex-1 min-w-0">
6767
{isLoading ? (
6868
<ListTableSkeleton columnCount={5} rowCount={8} />
6969
) : error ? (
7070
<p className="text-center text-destructive">
7171
스케줄 목록을 불러오는 중 오류가 발생했습니다.
7272
</p>
7373
) : schedules?.length ? (
74-
<ScheduleListTable
75-
schedules={schedules ?? []}
76-
onUpdate={openUpdateModal}
77-
/>
74+
<div className="min-w-0 overflow-x-auto rounded-lg border border-border">
75+
<ScheduleListTable
76+
schedules={schedules ?? []}
77+
onUpdate={openUpdateModal}
78+
/>
79+
</div>
7880
) : (
7981
<p className="text-center text-muted-foreground">스케줄이 없습니다.</p>
8082
)}

‎web/src/app/admin/user/page.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,39 +39,41 @@ export default function AdminUsersPage() {
3939
};
4040

4141
return (
42-
<div className="mx-auto w-full max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
42+
<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">
4343
<div className="flex flex-col gap-8">
44-
<header className="flex items-center justify-between">
45-
<div>
46-
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
44+
<header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
45+
<div className="min-w-0">
46+
<h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
4747
사용자 관리
4848
</h1>
49-
<p className="mt-2 text-lg text-muted-foreground">
49+
<p className="mt-1.5 text-sm text-muted-foreground sm:text-base lg:text-lg">
5050
서비스 사용자를 검색하고 관리합니다.
5151
</p>
5252
</div>
5353
<Button
54-
className="flex items-center gap-2"
54+
className="flex shrink-0 items-center justify-center gap-2 self-start sm:self-auto"
5555
onClick={openCreateModal}
5656
>
57-
<Plus className="mr-2 h-4 w-4" />
58-
<span>사용자 추가</span>
57+
<Plus className="h-4 w-4 shrink-0" />
58+
<span className="truncate">사용자 추가</span>
5959
</Button>
6060
</header>
6161

6262
<div className="w-full">
6363
<UserListForm onSubmit={updateRequest} />
6464
</div>
6565

66-
<div className="flex-1 flex flex-col gap-4">
66+
<div className="flex flex-col gap-4 flex-1 min-w-0">
6767
{isLoading ? (
6868
<ListTableSkeleton columnCount={5} rowCount={8} />
6969
) : error ? (
7070
<p className="text-center text-destructive">
7171
사용자 목록을 불러오는 중 오류가 발생했습니다.
7272
</p>
7373
) : users?.length ? (
74-
<UserListTable users={users ?? []} onUpdate={openUpdateModal} />
74+
<div className="min-w-0 overflow-x-auto rounded-lg border border-border">
75+
<UserListTable users={users ?? []} onUpdate={openUpdateModal} />
76+
</div>
7577
) : (
7678
<p className="text-center text-muted-foreground">사용자가 없습니다.</p>
7779
)}

‎web/src/components/LandingFooter.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎web/src/components/admin/Footer.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎web/src/components/admin/Header.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ export default function AdminHeader() {
2626
<header className="sticky top-0 z-40 flex w-full justify-center border-b bg-background pt-[env(safe-area-inset-top)]">
2727
<div className="flex h-16 w-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
2828
<div className="flex items-center gap-2">
29-
<HeaderNavSheet
30-
navItems={[...NAV_ITEMS]}
31-
getIsActive={getIsActive}
32-
/>
29+
<HeaderNavSheet navItems={NAV_ITEMS} getIsActive={getIsActive} />
3330
<Link href="/" className="flex items-center space-x-2">
3431
<BookOpen className="h-6 w-6" />
3532
<h1 className="font-bold">NexLang</h1>

‎web/src/components/admin/Sidebar.tsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)