각 화면 크기 조정

Author: shimaenaga1123

angular.json

@@ -42,16 +42,20 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "10kB",
+                  "maximumError": "20kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "optimization": true,
+              "extractLicenses": true,
+              "sourceMap": false,
+              "namedChunks": false
             },
             "development": {
               "optimization": false,

bun.lock

@@ -19,24 +19,26 @@
     "@angular/material": "20.0.3",
     "@angular/platform-browser": "20.0.3",
     "@angular/router": "20.0.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "rxjs": "7.8.2",
+    "tailwindcss": "^4.0.0",
     "tslib": "2.8.1",
+    "wrangler": "4.20.0",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
     "@angular/build": "20.0.2",
     "@angular/cli": "20.0.2",
     "@angular/compiler-cli": "20.0.3",
     "@types/jasmine": "5.1.8",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "10.4.21",
     "jasmine-core": "5.8.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "postcss": "^8.5.5",
-    "tailwindcss": "^3.4.17",
+    "postcss": "8.5.5",
     "typescript": "5.8.3"
   }
 }

package.json

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    require('@tailwindcss/postcss'),
+    require('autoprefixer'),
+  ],
 }

postcss.config.js

@@ -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 overflow-hidden">
       <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

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

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

@@ -22,10 +22,10 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
     MatChipsModule
   ],
   template: `
-    <div class="dashboard-container p-6 bg-md-sys-color-surface min-h-screen">
+    <div class="dashboard-container p-6 bg-md-sys-color-surface h-full overflow-y-auto">
       <h1 class="md-typescale-headline-large text-md-sys-color-on-surface mb-6">관리자 대시보드</h1>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-6">
         <!-- 시스템 상태 카드 -->
         <div class="md-card bg-md-sys-color-surface-container text-md-sys-color-on-surface hover:shadow-elevation-3 transition-all duration-300">
           <div class="flex items-center gap-3 mb-4">
@@ -52,7 +52,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
               </div>
               <div class="flex justify-between items-center py-2">
                 <span class="md-typescale-body-medium font-medium text-md-sys-color-on-surface-variant">환경:</span>
-                <span class="px-3 py-1 rounded-full text-sm" 
+                <span class="px-3 py-1 rounded-full text-sm"
                       [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'">
                   {{ systemStatus.environment }}
                 </span>
@@ -63,7 +63,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
                   <span class="md-typescale-body-small text-md-sys-color-on-surface-variant">{{ getMemoryUsagePercent().toFixed(1) }}%</span>
                 </div>
                 <div class="w-full bg-md-sys-color-surface-container-high rounded-full h-2">
-                  <div class="bg-md-sys-color-primary h-2 rounded-full transition-all duration-300" 
+                  <div class="bg-md-sys-color-primary h-2 rounded-full transition-all duration-300"
                        [style.width.%]="getMemoryUsagePercent()"></div>
                 </div>
               </div>
@@ -98,7 +98,7 @@ import { AdminService, SystemStatus, UserStats } from '../../services/admin.serv
               <div class="space-y-3">
                 <h4 class="md-typescale-title-small text-md-sys-color-on-surface-variant mb-3">최근 가입자</h4>
                 <div class="space-y-2">
-                  <div *ngFor="let user of userStats.recentUsers.slice(0, 5)" 
+                  <div *ngFor="let user of userStats.recentUsers.slice(0, 5)"
                        class="flex justify-between items-center py-2 px-3 bg-md-sys-color-surface-container-high rounded-lg">
                     <span class="md-typescale-body-medium font-medium text-md-sys-color-on-surface">{{ user.email }}</span>
                     <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
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
     }
-    
+
     .animate-spin {
       animation: spin 1s linear infinite;
     }
-    
+
     .md-card {
       min-height: 300px;
       display: flex;
       flex-direction: column;
     }
-    
+
     .md-button {
       border: none;
       cursor: pointer;
       text-decoration: none;
       transition: all 0.2s ease;
     }
-    
+
     .md-button:hover {
       transform: translateY(-1px);
     }
@@ -252,4 +252,4 @@ export class DashboardComponent implements OnInit {
     this.userStats = null;
     this.loadData();
   }
-}
+}