테스트

Author: shimaenaga1123

src/app/components/database/database.component.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-96 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}`;
   }
-}
+}