각 화면 크기 조정

Author: shimaenaga1123

bun.lock

@@ -21,6 +21,7 @@
     "@angular/router": "20.0.3",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
+    "wrangler": "^4.20.0",
     "zone.js": "0.15.1"
   },
   "devDependencies": {

package.json

@@ -1,6 +1,6 @@
-<div class="admin-layout bg-md-sys-color-surface min-h-screen">
+<div class="admin-layout bg-md-sys-color-surface min-h-screen overflow-hidden">
   <!-- Top App Bar -->
-  <div class="bg-md-sys-color-surface-container shadow-elevation-2 border-b border-md-sys-color-outline-variant">
+  <div class="bg-md-sys-color-surface-container shadow-elevation-2 border-b border-md-sys-color-outline-variant h-[7svh]">
     <div class="flex items-center h-16 px-4">
       <button class="md-button md-button-text p-2 rounded-full mr-2" (click)="toggleSidenav()" aria-label="Toggle navigation">
         <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
     </div>
   </div>
 
-  <div class="flex">
+  <div class="flex h-[93svh]">
     <!-- Navigation Rail -->
     <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">
       <!-- Collapsed state header -->
@@ -106,7 +106,7 @@ <h3 class="md-typescale-title-medium text-md-sys-color-on-surface">관리 메뉴
     </nav>
 
     <!-- Main Content -->
-    <main class="flex-1 bg-md-sys-color-surface min-h-[calc(100vh-4rem)]">
+    <main class="flex-1 bg-md-sys-color-surface min-h-[calc(93svh-20rem)]">
       <router-outlet></router-outlet>
     </main>
   </div>

src/app/app.html

@@ -24,102 +24,7 @@ import { RouterModule } from '@angular/router';
     MatMenuModule,
     MatDividerModule
   ],
-  templateUrl: './app.html',
-  styles: [`
-    .admin-layout {
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-
-    .title {
-      font-size: 1.375rem;
-      font-weight: 500;
-      margin-left: 8px;
-    }
-
-    .spacer {
-      flex: 1;
-    }
-
-    .sidenav-container {
-      flex: 1;
-      margin-top: 64px;
-    }
-
-    .sidenav {
-      width: 280px;
-      background-color: var(--mat-sidenav-container-background-color, #fafafa);
-      border-right: 1px solid var(--mat-sidenav-container-divider-color, #e0e0e0);
-    }
-
-    .sidenav-header {
-      padding: 24px 16px 16px;
-      border-bottom: 1px solid var(--mat-sidenav-container-divider-color, #e0e0e0);
-    }
-
-    .sidenav-header h3 {
-      margin: 0;
-      font-size: 1.125rem;
-      font-weight: 500;
-      color: var(--mat-sidenav-container-text-color, rgba(0, 0, 0, 0.87));
-    }
-
-    .sidenav-footer {
-      position: absolute;
-      bottom: 16px;
-      left: 16px;
-      right: 16px;
-      text-align: center;
-      color: var(--mat-sidenav-container-text-color, rgba(0, 0, 0, 0.6));
-    }
-
-    .main-content {
-      padding: 0;
-      background-color: var(--mat-app-background-color, #fafafa);
-    }
-
-    .nav-item {
-      margin: 4px 12px;
-      border-radius: 12px !important;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .nav-item:hover {
-      background-color: var(--mat-sidenav-container-background-color, rgba(0, 0, 0, 0.04)) !important;
-    }
-
-    .nav-item.active {
-      background-color: var(--mat-primary-color, #1976d2) !important;
-      color: var(--mat-primary-contrast-color, white) !important;
-    }
-
-    .nav-item.active mat-icon {
-      color: var(--mat-primary-contrast-color, white) !important;
-    }
-
-    .nav-item.active span {
-      color: var(--mat-primary-contrast-color, white) !important;
-      font-weight: 500;
-    }
-
-    mat-nav-list {
-      padding-top: 8px;
-    }
-
-    mat-divider {
-      margin: 16px 0;
-    }
-  `]
+  templateUrl: './app.html'
 })
 export class App implements OnInit {
   protected title = 'Dimiplan 관리자 패널';

src/app/app.ts

@@ -32,7 +32,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
     <div class="p-6 bg-md-sys-color-surface min-h-screen">
       <h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-6">데이터베이스 관리</h1>
 
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[calc(100vh-8rem)]">
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[calc(100vh-8rem)]">
         <!-- 테이블 목록 -->
         <div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-1">
           <div class="flex items-center justify-between mb-4">
@@ -43,8 +43,8 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
           </div>
           <div class="flex-1 overflow-y-auto">
             <div *ngIf="tables.length > 0" class="space-y-2">
-              <div 
-                *ngFor="let table of tables" 
+              <div
+                *ngFor="let table of tables"
                 [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')"
                 (click)="selectTable(table)">
                 <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
         </div>
 
         <!-- 테이블 데이터 뷰어 -->
-        <div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-2">
+        <div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface lg:col-span-3 width-full h-full flex flex-col">
           <div class="flex items-center justify-between mb-4">
             <h2 class="md-typescale-title-large text-md-sys-color-on-surface">
               {{ selectedTable ? selectedTable.name : '테이블 뷰어' }}
@@ -97,7 +97,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
               <p class="md-typescale-body-medium">테이블 데이터를 불러오는 중...</p>
             </div>
 
-            <div *ngIf="tableData && !loadingData" class="flex flex-col h-full overflow-hidden">
+            <div *ngIf="tableData && !loadingData" class="flex flex-col h-full w-full">
               <!-- 컬럼 정보 -->
               <div class="mb-6">
                 <h3 class="md-typescale-title-medium text-md-sys-color-on-surface mb-3 flex items-center gap-2">
@@ -108,10 +108,10 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
                   <div *ngFor="let column of tableData.columns" class="p-3 bg-md-sys-color-surface-container-high rounded-xl">
                     <div class="md-typescale-body-large font-medium text-md-sys-color-on-surface mb-2">{{ column.name }}</div>
                     <div class="flex flex-wrap gap-2">
-                      <span class="px-2 py-1 rounded-full text-xs" 
-                            [class]="getColumnTypeColor(column.type) === 'primary' ? 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container' : 
-                                     getColumnTypeColor(column.type) === 'accent' ? 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container' : 
-                                     getColumnTypeColor(column.type) === 'warn' ? 'bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container' : 
+                      <span class="px-2 py-1 rounded-full text-xs"
+                            [class]="getColumnTypeColor(column.type) === 'primary' ? 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container' :
+                                     getColumnTypeColor(column.type) === 'accent' ? 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container' :
+                                     getColumnTypeColor(column.type) === 'warn' ? 'bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container' :
                                      'bg-md-sys-color-surface-container text-md-sys-color-on-surface'">
                         {{ column.type }}
                       </span>
@@ -132,22 +132,22 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
                   <mat-icon class="w-5 h-5 text-md-sys-color-primary">table_rows</mat-icon>
                   데이터 ({{ tableData.pagination.totalCount }}개 레코드)
                 </h3>
-                <div class="flex-1 overflow-auto border border-md-sys-color-outline-variant rounded-xl">
+                <div class="h-full overflow-auto border border-md-sys-color-outline-variant rounded-xl overflow-y-scroll">
                   <table mat-table [dataSource]="tableData.rows" class="w-full min-w-max">
                     <ng-container *ngFor="let column of tableData.columns" [matColumnDef]="column.name">
                       <th mat-header-cell *matHeaderCellDef class="bg-md-sys-color-surface-container-high">
                         <div class="flex items-center gap-2 md-typescale-label-large font-medium text-md-sys-color-on-surface">
                           <span>{{ column.name }}</span>
-                          <mat-icon 
-                            *ngIf="column.key" 
+                          <mat-icon
+                            *ngIf="column.key"
                             class="w-4 h-4 text-md-sys-color-primary"
                             [matTooltip]="getKeyTooltip(column.key)">
                             {{ getKeyIcon(column.key) }}
                           </mat-icon>
                         </div>
                       </th>
                       <td mat-cell *matCellDef="let row" class="border-b border-md-sys-color-outline-variant">
-                        <div class="max-w-48 overflow-hidden text-ellipsis whitespace-nowrap md-typescale-body-medium text-md-sys-color-on-surface" 
+                        <div class="max-w-48 overflow-hidden text-ellipsis whitespace-nowrap md-typescale-body-medium text-md-sys-color-on-surface"
                              [matTooltip]="formatCellValue(row[column.name])">
                           {{ formatCellValue(row[column.name]) }}
                         </div>
@@ -161,7 +161,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
 
                 <!-- 페이지네이션 -->
                 <div class="mt-4">
-                  <mat-paginator 
+                  <mat-paginator
                     [length]="tableData.pagination.totalCount"
                     [pageSize]="tableData.pagination.limit"
                     [pageIndex]="tableData.pagination.page - 1"
@@ -184,7 +184,7 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
       display: flex;
       flex-direction: column;
     }
-    
+
     .md-button {
       border: none;
       cursor: pointer;
@@ -194,11 +194,11 @@ import { AdminService, TableInfo, TableData } from '../../services/admin.service
       align-items: center;
       justify-content: center;
     }
-    
+
     .md-button:hover {
       transform: translateY(-1px);
     }
-    
+
     .md-button:disabled {
       opacity: 0.5;
       cursor: not-allowed;
@@ -334,7 +334,7 @@ export class DatabaseComponent implements OnInit {
 
   private convertToCSV(data: TableData): string {
     const headers = data.columns.map(col => col.name).join(',');
-    const rows = data.rows.map(row => 
+    const rows = data.rows.map(row =>
       data.columns.map(col => {
         const value = row[col.name];
         if (value === null || value === undefined) return '';
@@ -346,7 +346,7 @@ export class DatabaseComponent implements OnInit {
         return stringValue;
       }).join(',')
     ).join('\n');
-    
+
     return `${headers}\n${rows}`;
   }
-}
+}

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

@@ -1,3 +1,4 @@
+@use "sass:meta";
 /* You can add global styles to this file, and also import other style files */
 
 // Import Tailwind CSS
@@ -10,8 +11,8 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 // Import Material Design 3 tokens and Material You theme
-@import './styles/material-tokens.scss';
-@import './styles/material-you-theme.scss';
+@include meta.load-css('styles/material-tokens.scss');
+@include meta.load-css('styles/material-you-theme.scss');
 
 html, body { 
   height: 100%; 

src/styles.scss

@@ -1,7 +1,7 @@
 // Material You Dynamic Color Theme Generator
 // This file provides utilities for creating Material You themes
 
-@import './material-tokens.scss';
+@use 'material-tokens.scss';
 
 // Base Material You Theme Class
 .material-you-theme {