Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Commit ecad4b5

Browse files
shimaenaga1123shimaenaga1123
committed
각 화면 크기 조정
1 parent a0c1fc2 commit ecad4b5

File tree

10 files changed

+238
-154
lines changed

10 files changed

+238
-154
lines changed

‎bun.lock‎

Lines changed: 178 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@angular/router": "20.0.3",
2222
"rxjs": "7.8.2",
2323
"tslib": "2.8.1",
24+
"wrangler": "^4.20.0",
2425
"zone.js": "0.15.1"
2526
},
2627
"devDependencies": {

‎src/app/app.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="admin-layout bg-md-sys-color-surface min-h-screen">
1+
<div class="admin-layout bg-md-sys-color-surface min-h-screen overflow-hidden">
22
<!-- Top App Bar -->
3-
<div class="bg-md-sys-color-surface-container shadow-elevation-2 border-b border-md-sys-color-outline-variant">
3+
<div class="bg-md-sys-color-surface-container shadow-elevation-2 border-b border-md-sys-color-outline-variant h-[7svh]">
44
<div class="flex items-center h-16 px-4">
55
<button class="md-button md-button-text p-2 rounded-full mr-2" (click)="toggleSidenav()" aria-label="Toggle navigation">
66
<mat-icon class="w-6 h-6 text-md-sys-color-on-surface">menu</mat-icon>
@@ -9,7 +9,7 @@ <h1 class="md-typescale-title-large text-md-sys-color-on-surface flex-1">Dimipla
99
</div>
1010
</div>
1111

12-
<div class="flex">
12+
<div class="flex h-[93svh]">
1313
<!-- Navigation Rail -->
1414
<nav [class]="sidenavOpened ? 'w-80' : 'w-20'" class="bg-md-sys-color-surface-container border-r border-md-sys-color-outline-variant transition-all duration-300 ease-in-out overflow-hidden min-h-full flex flex-col">
1515
<!-- Collapsed state header -->
@@ -106,7 +106,7 @@ <h3 class="md-typescale-title-medium text-md-sys-color-on-surface">관리 메뉴
106106
</nav>
107107

108108
<!-- Main Content -->
109-
<main class="flex-1 bg-md-sys-color-surface min-h-[calc(100vh-4rem)]">
109+
<main class="flex-1 bg-md-sys-color-surface overflow-hidden">
110110
<router-outlet></router-outlet>
111111
</main>
112112
</div>

‎src/app/app.ts‎

Lines changed: 1 addition & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -24,102 +24,7 @@ import { RouterModule } from '@angular/router';
2424
MatMenuModule,
2525
MatDividerModule
2626
],
27-
templateUrl: './app.html',
28-
styles: [`
29-
.admin-layout {
30-
height: 100vh;
31-
display: flex;
32-
flex-direction: column;
33-
}
34-
35-
.header {
36-
position: fixed;
37-
top: 0;
38-
left: 0;
39-
right: 0;
40-
z-index: 1000;
41-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
42-
}
43-
44-
.title {
45-
font-size: 1.375rem;
46-
font-weight: 500;
47-
margin-left: 8px;
48-
}
49-
50-
.spacer {
51-
flex: 1;
52-
}
53-
54-
.sidenav-container {
55-
flex: 1;
56-
margin-top: 64px;
57-
}
58-
59-
.sidenav {
60-
width: 280px;
61-
background-color: var(--mat-sidenav-container-background-color, #fafafa);
62-
border-right: 1px solid var(--mat-sidenav-container-divider-color, #e0e0e0);
63-
}
64-
65-
.sidenav-header {
66-
padding: 24px 16px 16px;
67-
border-bottom: 1px solid var(--mat-sidenav-container-divider-color, #e0e0e0);
68-
}
69-
70-
.sidenav-header h3 {
71-
margin: 0;
72-
font-size: 1.125rem;
73-
font-weight: 500;
74-
color: var(--mat-sidenav-container-text-color, rgba(0, 0, 0, 0.87));
75-
}
76-
77-
.sidenav-footer {
78-
position: absolute;
79-
bottom: 16px;
80-
left: 16px;
81-
right: 16px;
82-
text-align: center;
83-
color: var(--mat-sidenav-container-text-color, rgba(0, 0, 0, 0.6));
84-
}
85-
86-
.main-content {
87-
padding: 0;
88-
background-color: var(--mat-app-background-color, #fafafa);
89-
}
90-
91-
.nav-item {
92-
margin: 4px 12px;
93-
border-radius: 12px !important;
94-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
95-
}
96-
97-
.nav-item:hover {
98-
background-color: var(--mat-sidenav-container-background-color, rgba(0, 0, 0, 0.04)) !important;
99-
}
100-
101-
.nav-item.active {
102-
background-color: var(--mat-primary-color, #1976d2) !important;
103-
color: var(--mat-primary-contrast-color, white) !important;
104-
}
105-
106-
.nav-item.active mat-icon {
107-
color: var(--mat-primary-contrast-color, white) !important;
108-
}
109-
110-
.nav-item.active span {
111-
color: var(--mat-primary-contrast-color, white) !important;
112-
font-weight: 500;
113-
}
114-
115-
mat-nav-list {
116-
padding-top: 8px;
117-
}
118-
119-
mat-divider {
120-
margin: 16px 0;
121-
}
122-
`]
27+
templateUrl: './app.html'
12328
})
12429
export class App implements OnInit {
12530
protected title = 'Dimiplan 관리자 패널';

‎src/app/components/api-docs/api-docs.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { AdminService, ApiDoc } from '../../services/admin.service';
3131
FormsModule
3232
],
3333
template: `
34-
<div class="p-6 bg-md-sys-color-surface min-h-screen max-w-6xl mx-auto">
34+
<div class="p-6 bg-md-sys-color-surface h-full overflow-y-auto max-w-6xl mx-auto">
3535
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-6">API 문서</h1>
3636
3737
<div class="flex flex-col md:flex-row gap-4 mb-6">
@@ -106,7 +106,7 @@ import { AdminService, ApiDoc } from '../../services/admin.service';
106106
<span *ngIf="searchTerm" class="md-typescale-body-medium text-md-sys-color-on-surface-variant ml-2">({{ filteredDocs.length }}개 필터링됨)</span>
107107
</div>
108108
109-
<div class="space-y-4">
109+
<div class="space-y-4 pb-6">
110110
<div *ngFor="let doc of filteredDocs; trackBy: trackByPath" class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface">
111111
<div class="flex items-center justify-between mb-4">
112112
<div class="flex items-center gap-3">

‎src/app/components/dashboard/dashboard.component.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
2222
MatChipsModule
2323
],
2424
template: `
25-
<div class="dashboard-container p-6 bg-md-sys-color-surface min-h-screen">
25+
<div class="dashboard-container p-6 bg-md-sys-color-surface h-full overflow-y-auto">
2626
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-6">관리자 대시보드</h1>
27-
28-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
27+
28+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-6">
2929
<!-- 시스템 상태 카드 -->
3030
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface hover:shadow-elevation-3 transition-all duration-300">
3131
<div class="flex items-center gap-3 mb-4">
@@ -52,7 +52,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
5252
</div>
5353
<div class="flex justify-between items-center py-2">
5454
<span class="md-typescale-body-medium font-medium text-md-sys-color-on-surface-variant">환경:</span>
55-
<span class="px-3 py-1 rounded-full text-sm"
55+
<span class="px-3 py-1 rounded-full text-sm"
5656
[class]="systemStatus.environment === 'production' ? 'bg-md-sys-color-error-container text-md-sys-color-on-error-container' : 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container'">
5757
{{ systemStatus.environment }}
5858
</span>
@@ -63,7 +63,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
6363
<span class="md-typescale-body-small text-md-sys-color-on-surface-variant">{{ getMemoryUsagePercent().toFixed(1) }}%</span>
6464
</div>
6565
<div class="w-full bg-md-sys-color-surface-container-high rounded-full h-2">
66-
<div class="bg-md-sys-color-primary h-2 rounded-full transition-all duration-300"
66+
<div class="bg-md-sys-color-primary h-2 rounded-full transition-all duration-300"
6767
[style.width.%]="getMemoryUsagePercent()"></div>
6868
</div>
6969
</div>
@@ -98,7 +98,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
9898
<div class="space-y-3">
9999
<h4 class="md-typescale-title-small text-md-sys-color-on-surface-variant mb-3">최근 가입자</h4>
100100
<div class="space-y-2">
101-
<div *ngFor="let user of userStats.recentUsers.slice(0, 5)"
101+
<div *ngFor="let user of userStats.recentUsers.slice(0, 5)"
102102
class="flex justify-between items-center py-2 px-3 bg-md-sys-color-surface-container-high rounded-lg">
103103
<span class="md-typescale-body-medium font-medium text-md-sys-color-on-surface">{{ user.email }}</span>
104104
<span class="md-typescale-body-small text-md-sys-color-on-surface-variant">{{ formatDate(user.created_at) }}</span>
@@ -150,24 +150,24 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
150150
from { transform: rotate(0deg); }
151151
to { transform: rotate(360deg); }
152152
}
153-
153+
154154
.animate-spin {
155155
animation: spin 1s linear infinite;
156156
}
157-
157+
158158
.md-card {
159159
min-height: 300px;
160160
display: flex;
161161
flex-direction: column;
162162
}
163-
163+
164164
.md-button {
165165
border: none;
166166
cursor: pointer;
167167
text-decoration: none;
168168
transition: all 0.2s ease;
169169
}
170-
170+
171171
.md-button:hover {
172172
transform: translateY(-1px);
173173
}
@@ -252,4 +252,4 @@ export class DashboardComponent implements OnInit {
252252
this.userStats = null;
253253
this.loadData();
254254
}
255-
}
255+
}

‎src/app/components/database/database.component.ts‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,22 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
2929
MatChipsModule
3030
],
3131
template: `
32-
<div class="p-6 bg-md-sys-color-surface min-h-screen">
32+
<div class="p-6 bg-md-sys-color-surface h-full overflow-hidden flex flex-col">
3333
<h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-6">데이터베이스 관리</h1>
3434
35-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[calc(100vh-8rem)]">
35+
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 flex-1 min-h-0">
3636
<!-- 테이블 목록 -->
37-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1">
37+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1 flex flex-col h-full">
3838
<div class="flex items-center justify-between mb-4">
3939
<h2 class="md-typescale-title-large text-md-sys-color-on-surface">테이블 목록</h2>
4040
<button class="md-button md-button-text p-2 rounded-full" (click)="refreshTables()">
4141
<mat-icon class="w-5 h-5 text-md-sys-color-primary">refresh</mat-icon>
4242
</button>
4343
</div>
44-
<div class="flex-1 overflow-y-auto">
44+
<div class="flex-1 overflow-y-auto min-h-0">
4545
<div *ngIf="tables.length > 0" class="space-y-2">
46-
<div
47-
*ngFor="let table of tables"
46+
<div
47+
*ngFor="let table of tables"
4848
[class]="'flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200 ' + (selectedTable?.name === table.name ? 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container' : 'hover:bg-md-sys-color-surface-container-high')"
4949
(click)="selectTable(table)">
5050
<mat-icon class="w-6 h-6 flex-shrink-0" [class.text-md-sys-color-on-secondary-container]="selectedTable?.name === table.name">table_chart</mat-icon>
@@ -69,7 +69,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
6969
</div>
7070
7171
<!-- 테이블 데이터 뷰어 -->
72-
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2">
72+
<div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-3 flex flex-col h-full">
7373
<div class="flex items-center justify-between mb-4">
7474
<h2 class="md-typescale-title-large text-md-sys-color-on-surface">
7575
{{ selectedTable ? selectedTable.name : '테이블 뷰어' }}
@@ -84,7 +84,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
8484
</button>
8585
</div>
8686
</div>
87-
<div class="flex-1 overflow-hidden">
87+
<div class="flex-1 overflow-hidden min-h-0">
8888
<div *ngIf="!selectedTable" class="flex items-center justify-center h-full text-md-sys-color-on-surface-variant">
8989
<div class="text-center">
9090
<mat-icon class="w-16 h-16 mb-4 text-md-sys-color-outline">table_view</mat-icon>
@@ -99,7 +99,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
9999
100100
<div *ngIf="tableData && !loadingData" class="flex flex-col h-full overflow-hidden">
101101
<!-- 컬럼 정보 -->
102-
<div class="mb-6">
102+
<div class="mb-4 flex-shrink-0">
103103
<h3 class="md-typescale-title-medium text-md-sys-color-on-surface mb-3 flex items-center gap-2">
104104
<mat-icon class="w-5 h-5 text-md-sys-color-primary">info</mat-icon>
105105
컬럼 정보
@@ -108,10 +108,10 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
108108
<div *ngFor="let column of tableData.columns" class="p-3 bg-md-sys-color-surface-container-high rounded-xl">
109109
<div class="md-typescale-body-large font-medium text-md-sys-color-on-surface mb-2">{{ column.name }}</div>
110110
<div class="flex flex-wrap gap-2">
111-
<span class="px-2 py-1 rounded-full text-xs"
112-
[class]="getColumnTypeColor(column.type) === 'primary' ? 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container' :
113-
getColumnTypeColor(column.type) === 'accent' ? 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container' :
114-
getColumnTypeColor(column.type) === 'warn' ? 'bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container' :
111+
<span class="px-2 py-1 rounded-full text-xs"
112+
[class]="getColumnTypeColor(column.type) === 'primary' ? 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container' :
113+
getColumnTypeColor(column.type) === 'accent' ? 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container' :
114+
getColumnTypeColor(column.type) === 'warn' ? 'bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container' :
115115
'bg-md-sys-color-surface-container text-md-sys-color-on-surface'">
116116
{{ column.type }}
117117
</span>
@@ -127,27 +127,27 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
127127
</div>
128128
129129
<!-- 테이블 데이터 -->
130-
<div class="flex-1 flex flex-col overflow-hidden">
131-
<h3 class="md-typescale-title-medium text-md-sys-color-on-surface mb-3 flex items-center gap-2">
130+
<div class="flex-1 flex flex-col overflow-hidden min-h-0">
131+
<h3 class="md-typescale-title-medium text-md-sys-color-on-surface mb-2 flex items-center gap-2 flex-shrink-0">
132132
<mat-icon class="w-5 h-5 text-md-sys-color-primary">table_rows</mat-icon>
133133
데이터 ({{ tableData.pagination.totalCount }}개 레코드)
134134
</h3>
135-
<div class="flex-1 overflow-auto border border-md-sys-color-outline-variant rounded-xl">
135+
<div class="flex-1 overflow-auto border border-md-sys-color-outline-variant rounded-xl min-h-0">
136136
<table mat-table [dataSource]="tableData.rows" class="w-full min-w-max">
137137
<ng-container *ngFor="let column of tableData.columns" [matColumnDef]="column.name">
138138
<th mat-header-cell *matHeaderCellDef class="bg-md-sys-color-surface-container-high">
139139
<div class="flex items-center gap-2 md-typescale-label-large font-medium text-md-sys-color-on-surface">
140140
<span>{{ column.name }}</span>
141-
<mat-icon
142-
*ngIf="column.key"
141+
<mat-icon
142+
*ngIf="column.key"
143143
class="w-4 h-4 text-md-sys-color-primary"
144144
[matTooltip]="getKeyTooltip(column.key)">
145145
{{ getKeyIcon(column.key) }}
146146
</mat-icon>
147147
</div>
148148
</th>
149149
<td mat-cell *matCellDef="let row" class="border-b border-md-sys-color-outline-variant">
150-
<div class="max-w-48 overflow-hidden text-ellipsis whitespace-nowrap md-typescale-body-medium text-md-sys-color-on-surface"
150+
<div class="max-w-48 overflow-hidden text-ellipsis whitespace-nowrap md-typescale-body-medium text-md-sys-color-on-surface"
151151
[matTooltip]="formatCellValue(row[column.name])">
152152
{{ formatCellValue(row[column.name]) }}
153153
</div>
@@ -160,8 +160,8 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
160160
</div>
161161
162162
<!-- 페이지네이션 -->
163-
<div class="mt-4">
164-
<mat-paginator
163+
<div class="mt-2 flex-shrink-0">
164+
<mat-paginator
165165
[length]="tableData.pagination.totalCount"
166166
[pageSize]="tableData.pagination.limit"
167167
[pageIndex]="tableData.pagination.page - 1"
@@ -184,7 +184,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
184184
display: flex;
185185
flex-direction: column;
186186
}
187-
187+
188188
.md-button {
189189
border: none;
190190
cursor: pointer;
@@ -194,11 +194,11 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
194194
align-items: center;
195195
justify-content: center;
196196
}
197-
197+
198198
.md-button:hover {
199199
transform: translateY(-1px);
200200
}
201-
201+
202202
.md-button:disabled {
203203
opacity: 0.5;
204204
cursor: not-allowed;
@@ -334,7 +334,7 @@ export class DatabaseComponent implements OnInit {
334334

335335
private convertToCSV(data: TableData): string {
336336
const headers = data.columns.map(col => col.name).join(',');
337-
const rows = data.rows.map(row =>
337+
const rows = data.rows.map(row =>
338338
data.columns.map(col => {
339339
const value = row[col.name];
340340
if (value === null || value === undefined) return '';
@@ -346,7 +346,7 @@ export class DatabaseComponent implements OnInit {
346346
return stringValue;
347347
}).join(',')
348348
).join('\n');
349-
349+
350350
return `${headers}\n${rows}`;
351351
}
352-
}
352+
}

0 commit comments

Comments
 (0)
⚡