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

Commit 3a961a5

Browse files
shimaenaga1123shimaenaga1123
committed
Fix Icons
1 parent 25c500a commit 3a961a5

File tree

6 files changed

+272
-59
lines changed

6 files changed

+272
-59
lines changed

‎src/app/app.html‎

Lines changed: 68 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,61 +3,104 @@
33
<div class="bg-md-sys-color-surface-container shadow-elevation-2 border-b border-md-sys-color-outline-variant">
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">
6-
<mat-icon class="text-md-sys-color-on-surface">menu</mat-icon>
6+
<mat-icon class="w-6 h-6 text-md-sys-color-on-surface">menu</mat-icon>
77
</button>
88
<h1 class="md-typescale-title-large text-md-sys-color-on-surface flex-1">Dimiplan 관리자 패널</h1>
99
</div>
1010
</div>
1111

1212
<div class="flex">
1313
<!-- Navigation Rail -->
14-
<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">
15-
<div class="p-4">
16-
<h3 *ngIf="sidenavOpened" class="md-typescale-title-medium text-md-sys-color-on-surface mb-4">관리 메뉴</h3>
14+
<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">
15+
<!-- Collapsed state header -->
16+
<div class="p-4 flex justify-center" *ngIf="!sidenavOpened">
17+
<div class="w-10 h-10 bg-md-sys-color-primary rounded-full flex items-center justify-center">
18+
<mat-icon class="w-6 h-6 text-md-sys-color-on-primary">admin_panel_settings</mat-icon>
19+
</div>
1720
</div>
1821

19-
<div class="space-y-2 px-2">
22+
<!-- Expanded state header -->
23+
<div class="p-4" *ngIf="sidenavOpened">
24+
<div class="flex items-center gap-3 mb-6">
25+
<div class="w-8 h-8 bg-md-sys-color-primary rounded-full flex items-center justify-center">
26+
<mat-icon class="w-5 h-5 text-md-sys-color-on-primary">admin_panel_settings</mat-icon>
27+
</div>
28+
<div>
29+
<h3 class="md-typescale-title-medium text-md-sys-color-on-surface">관리 메뉴</h3>
30+
<p class="md-typescale-body-small text-md-sys-color-on-surface-variant">시스템 관리</p>
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="space-y-1" [class.px-3]="sidenavOpened" [class.px-2]="!sidenavOpened">
2036
<a routerLink="/dashboard"
2137
routerLinkActive="active"
22-
class="nav-item flex items-center gap-4 p-3 rounded-xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high"
38+
class="nav-item group flex items-center gap-4 p-3 mx-1 rounded-2xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high relative overflow-hidden"
2339
[class.bg-md-sys-color-secondary-container]="router.url === '/dashboard'"
24-
[class.text-md-sys-color-on-secondary-container]="router.url === '/dashboard'">
25-
<mat-icon class="min-w-[24px]" [class.text-md-sys-color-on-secondary-container]="router.url === '/dashboard'">dashboard</mat-icon>
26-
<span *ngIf="sidenavOpened" class="md-typescale-label-large">대시보드</span>
40+
[class.text-md-sys-color-on-secondary-container]="router.url === '/dashboard'"
41+
[class.shadow-sm]="router.url === '/dashboard'"
42+
[title]="!sidenavOpened ? '대시보드' : ''">
43+
<div class="relative z-10 flex items-center" [class.justify-center]="!sidenavOpened" [class.w-full]="!sidenavOpened">
44+
<mat-icon class="w-6 h-6 flex-shrink-0" [class.text-md-sys-color-on-secondary-container]="router.url === '/dashboard'">dashboard</mat-icon>
45+
<span *ngIf="sidenavOpened" class="md-typescale-label-large ml-4">대시보드</span>
46+
</div>
47+
<div *ngIf="router.url === '/dashboard'" class="absolute inset-0 bg-gradient-to-r from-md-sys-color-secondary-container/20 to-transparent"></div>
2748
</a>
2849

2950
<a routerLink="/logs"
3051
routerLinkActive="active"
31-
class="nav-item flex items-center gap-4 p-3 rounded-xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high"
52+
class="nav-item group flex items-center gap-4 p-3 mx-1 rounded-2xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high relative overflow-hidden"
3253
[class.bg-md-sys-color-secondary-container]="router.url === '/logs'"
33-
[class.text-md-sys-color-on-secondary-container]="router.url === '/logs'">
34-
<mat-icon class="min-w-[24px]" [class.text-md-sys-color-on-secondary-container]="router.url === '/logs'">article</mat-icon>
35-
<span *ngIf="sidenavOpened" class="md-typescale-label-large">로그 관리</span>
54+
[class.text-md-sys-color-on-secondary-container]="router.url === '/logs'"
55+
[class.shadow-sm]="router.url === '/logs'"
56+
[title]="!sidenavOpened ? '로그 관리' : ''">
57+
<div class="relative z-10 flex items-center" [class.justify-center]="!sidenavOpened" [class.w-full]="!sidenavOpened">
58+
<mat-icon class="w-6 h-6 flex-shrink-0" [class.text-md-sys-color-on-secondary-container]="router.url === '/logs'">article</mat-icon>
59+
<span *ngIf="sidenavOpened" class="md-typescale-label-large ml-4">로그 관리</span>
60+
</div>
61+
<div *ngIf="router.url === '/logs'" class="absolute inset-0 bg-gradient-to-r from-md-sys-color-secondary-container/20 to-transparent"></div>
3662
</a>
3763

3864
<a routerLink="/database"
3965
routerLinkActive="active"
40-
class="nav-item flex items-center gap-4 p-3 rounded-xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high"
66+
class="nav-item group flex items-center gap-4 p-3 mx-1 rounded-2xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high relative overflow-hidden"
4167
[class.bg-md-sys-color-secondary-container]="router.url === '/database'"
42-
[class.text-md-sys-color-on-secondary-container]="router.url === '/database'">
43-
<mat-icon class="min-w-[24px]" [class.text-md-sys-color-on-secondary-container]="router.url === '/database'">storage</mat-icon>
44-
<span *ngIf="sidenavOpened" class="md-typescale-label-large">데이터베이스</span>
68+
[class.text-md-sys-color-on-secondary-container]="router.url === '/database'"
69+
[class.shadow-sm]="router.url === '/database'"
70+
[title]="!sidenavOpened ? '데이터베이스' : ''">
71+
<div class="relative z-10 flex items-center" [class.justify-center]="!sidenavOpened" [class.w-full]="!sidenavOpened">
72+
<mat-icon class="w-6 h-6 flex-shrink-0" [class.text-md-sys-color-on-secondary-container]="router.url === '/database'">storage</mat-icon>
73+
<span *ngIf="sidenavOpened" class="md-typescale-label-large ml-4">데이터베이스</span>
74+
</div>
75+
<div *ngIf="router.url === '/database'" class="absolute inset-0 bg-gradient-to-r from-md-sys-color-secondary-container/20 to-transparent"></div>
4576
</a>
4677

4778
<a routerLink="/api-docs"
4879
routerLinkActive="active"
49-
class="nav-item flex items-center gap-4 p-3 rounded-xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high"
80+
class="nav-item group flex items-center gap-4 p-3 mx-1 rounded-2xl transition-all duration-200 text-md-sys-color-on-surface hover:bg-md-sys-color-surface-container-high relative overflow-hidden"
5081
[class.bg-md-sys-color-secondary-container]="router.url === '/api-docs'"
51-
[class.text-md-sys-color-on-secondary-container]="router.url === '/api-docs'">
52-
<mat-icon class="min-w-[24px]" [class.text-md-sys-color-on-secondary-container]="router.url === '/api-docs'">code</mat-icon>
53-
<span *ngIf="sidenavOpened" class="md-typescale-label-large">API 문서</span>
82+
[class.text-md-sys-color-on-secondary-container]="router.url === '/api-docs'"
83+
[class.shadow-sm]="router.url === '/api-docs'"
84+
[title]="!sidenavOpened ? 'API 문서' : ''">
85+
<div class="relative z-10 flex items-center" [class.justify-center]="!sidenavOpened" [class.w-full]="!sidenavOpened">
86+
<mat-icon class="w-6 h-6 flex-shrink-0" [class.text-md-sys-color-on-secondary-container]="router.url === '/api-docs'">code</mat-icon>
87+
<span *ngIf="sidenavOpened" class="md-typescale-label-large ml-4">API 문서</span>
88+
</div>
89+
<div *ngIf="router.url === '/api-docs'" class="absolute inset-0 bg-gradient-to-r from-md-sys-color-secondary-container/20 to-transparent"></div>
5490
</a>
5591
</div>
5692

57-
<div class="border-t border-md-sys-color-outline-variant mt-8 pt-4">
58-
<div class="px-4">
59-
<small *ngIf="sidenavOpened" class="md-typescale-body-small text-md-sys-color-on-surface-variant">버전 1.0.0</small>
60-
<mat-icon *ngIf="!sidenavOpened" class="text-md-sys-color-on-surface-variant w-full text-center" title="버전 1.0.0">info</mat-icon>
93+
<div class="border-t border-md-sys-color-outline-variant/30 mt-auto pt-6 pb-4">
94+
<div class="px-4" *ngIf="sidenavOpened">
95+
<div class="flex items-center gap-2 p-2 rounded-lg bg-md-sys-color-surface-container-low">
96+
<mat-icon class="w-4 h-4 text-md-sys-color-on-surface-variant">info</mat-icon>
97+
<small class="md-typescale-body-small text-md-sys-color-on-surface-variant">버전 1.0.0</small>
98+
</div>
99+
</div>
100+
<div class="flex justify-center px-4" *ngIf="!sidenavOpened">
101+
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-md-sys-color-surface-container-low">
102+
<mat-icon class="w-4 h-4 text-md-sys-color-on-surface-variant" title="버전 1.0.0">info</mat-icon>
103+
</div>
61104
</div>
62105
</div>
63106
</nav>

‎src/app/app.scss‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
// App-specific styles with Material You design improvements
2+
3+
.admin-layout {
4+
font-family: var(--md-sys-typescale-body-medium-font);
5+
}
6+
7+
// Enhanced navigation rail styles
8+
.nav-item {
9+
position: relative;
10+
text-decoration: none;
11+
display: flex;
12+
align-items: center;
13+
min-height: 48px;
14+
15+
// Smooth hover animations
16+
&:hover {
17+
transform: translateX(2px);
18+
transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
19+
}
20+
21+
// Active state with subtle animation
22+
&.active,
23+
&[class*="bg-md-sys-color-secondary-container"] {
24+
&::before {
25+
content: '';
26+
position: absolute;
27+
left: -12px;
28+
top: 50%;
29+
transform: translateY(-50%);
30+
width: 4px;
31+
height: 24px;
32+
background-color: var(--md-sys-color-primary);
33+
border-radius: 2px;
34+
transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
35+
}
36+
}
37+
38+
// Icon container improvements
39+
mat-icon {
40+
font-size: 24px;
41+
transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
42+
}
43+
44+
// Text fade-in animation when sidebar opens
45+
span {
46+
opacity: 1;
47+
transform: translateX(0);
48+
transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
49+
transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
50+
}
51+
}
52+
53+
// Top app bar enhancements
54+
.admin-layout .top-app-bar {
55+
backdrop-filter: blur(8px);
56+
background-color: rgba(var(--md-sys-color-surface-container-rgb), 0.95);
57+
}
58+
59+
// Navigation rail responsive improvements
60+
nav {
61+
// Enhanced shadow for depth
62+
box-shadow: var(--md-sys-elevation-level1);
63+
64+
// Smooth width transitions
65+
transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
66+
67+
// Ensure proper height
68+
min-height: calc(100vh - 4rem);
69+
}
70+
71+
// Main content area improvements
72+
main {
73+
// Smooth padding adjustments when sidebar toggles
74+
transition: margin-left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
75+
76+
// Better background for content
77+
background: linear-gradient(135deg,
78+
var(--md-sys-color-surface) 0%,
79+
var(--md-sys-color-surface-container-low) 100%);
80+
}
81+
82+
// Menu button improvements
83+
.md-button {
84+
// Enhanced ripple effect
85+
position: relative;
86+
overflow: hidden;
87+
88+
&::before {
89+
content: '';
90+
position: absolute;
91+
top: 50%;
92+
left: 50%;
93+
width: 0;
94+
height: 0;
95+
border-radius: 50%;
96+
background-color: currentColor;
97+
opacity: 0.1;
98+
transform: translate(-50%, -50%);
99+
transition: width var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
100+
height var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
101+
}
102+
103+
&:active::before {
104+
width: 200px;
105+
height: 200px;
106+
}
107+
}
108+
109+
// Improved accessibility and focus states
110+
.nav-item:focus-visible,
111+
.md-button:focus-visible {
112+
outline: 2px solid var(--md-sys-color-primary);
113+
outline-offset: 2px;
114+
border-radius: var(--md-sys-shape-corner-small);
115+
}
116+
117+
// Enhanced Material You elevation classes
118+
.shadow-elevation-1 {
119+
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
120+
0px 1px 3px 1px rgba(0, 0, 0, 0.15);
121+
}
122+
123+
.shadow-elevation-2 {
124+
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
125+
0px 2px 6px 2px rgba(0, 0, 0, 0.15);
126+
}
127+
128+
.shadow-elevation-3 {
129+
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3),
130+
0px 4px 8px 3px rgba(0, 0, 0, 0.15);
131+
}
132+
133+
// Responsive design improvements
134+
@media (max-width: 768px) {
135+
nav {
136+
width: 280px !important;
137+
transform: translateX(-100%);
138+
position: fixed;
139+
z-index: 1000;
140+
141+
&.opened {
142+
transform: translateX(0);
143+
}
144+
}
145+
146+
main {
147+
margin-left: 0 !important;
148+
}
149+
150+
.nav-backdrop {
151+
position: fixed;
152+
top: 0;
153+
left: 0;
154+
right: 0;
155+
bottom: 0;
156+
background-color: rgba(0, 0, 0, 0.5);
157+
z-index: 999;
158+
}
159+
}
160+
161+
// Animation for gradient backgrounds on active items
162+
@keyframes gradientShift {
163+
0% { opacity: 0.2; }
164+
50% { opacity: 0.3; }
165+
100% { opacity: 0.2; }
166+
}
167+
168+
.nav-item[class*="bg-md-sys-color-secondary-container"] .absolute {
169+
animation: gradientShift 3s ease-in-out infinite;
170+
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,19 @@ import { AdminService, ApiDoc } from '../../services/admin.service';
4141
(input)="filterApis()"
4242
placeholder="경로나 설명으로 검색..."
4343
class="w-full p-3 pr-12 bg-md-sys-color-surface-container-highest text-md-sys-color-on-surface rounded-xl border border-md-sys-color-outline focus:border-md-sys-color-primary focus:outline-none md-typescale-body-large">
44-
<mat-icon class="absolute right-3 top-1/2 transform -translate-y-1/2 text-md-sys-color-on-surface-variant">search</mat-icon>
44+
<mat-icon class="w-5 h-5 absolute right-3 top-1/2 transform -translate-y-1/2 text-md-sys-color-on-surface-variant">search</mat-icon>
4545
</div>
4646
</div>
4747
4848
<div class="flex items-center gap-2">
4949
<button class="md-button md-button-text p-2 rounded-full" (click)="refreshDocs()" [disabled]="loading" title="새로고침">
50-
<mat-icon class="text-md-sys-color-primary">refresh</mat-icon>
50+
<mat-icon class="w-5 h-5 text-md-sys-color-primary">refresh</mat-icon>
5151
</button>
5252
<button class="md-button md-button-text p-2 rounded-full" (click)="regenerateDocs()" [disabled]="loading" title="JSDoc 재생성">
53-
<mat-icon class="text-md-sys-color-primary">autorenew</mat-icon>
53+
<mat-icon class="w-5 h-5 text-md-sys-color-primary">autorenew</mat-icon>
5454
</button>
5555
<button class="md-button md-button-filled px-4 py-2 rounded-full" (click)="exportDocs()" [disabled]="!apiDocs.length">
56-
<mat-icon class="mr-2">download</mat-icon>
56+
<mat-icon class="w-5 h-5 mr-2">download</mat-icon>
5757
<span class="md-typescale-label-large">내보내기</span>
5858
</button>
5959
</div>
@@ -65,12 +65,12 @@ import { AdminService, ApiDoc } from '../../services/admin.service';
6565
</div>
6666
6767
<div *ngIf="!loading && filteredDocs.length === 0 && apiDocs.length > 0" class="flex flex-col items-center justify-center py-20">
68-
<mat-icon class="text-6xl mb-4 text-md-sys-color-outline">search_off</mat-icon>
68+
<mat-icon class="w-16 h-16 mb-4 text-md-sys-color-outline">search_off</mat-icon>
6969
<p class="md-typescale-body-large text-md-sys-color-on-surface-variant">검색 결과가 없습니다.</p>
7070
</div>
7171
7272
<div *ngIf="!loading && apiDocs.length === 0" class="flex flex-col items-center justify-center py-20">
73-
<mat-icon class="text-6xl mb-4 text-md-sys-color-outline">api</mat-icon>
73+
<mat-icon class="w-16 h-16 mb-4 text-md-sys-color-outline">api</mat-icon>
7474
<p class="md-typescale-body-large text-md-sys-color-on-surface-variant">API 문서를 찾을 수 없습니다.</p>
7575
</div>
7676
@@ -121,31 +121,31 @@ import { AdminService, ApiDoc } from '../../services/admin.service';
121121
122122
<div *ngIf="doc.details" class="space-y-2">
123123
<h4 class="md-typescale-title-small text-md-sys-color-on-surface flex items-center gap-2">
124-
<mat-icon class="text-md-sys-color-primary text-lg">description</mat-icon>
124+
<mat-icon class="w-5 h-5 text-md-sys-color-primary">description</mat-icon>
125125
상세 설명
126126
</h4>
127127
<p class="md-typescale-body-medium text-md-sys-color-on-surface leading-relaxed">{{ doc.details }}</p>
128128
</div>
129129
130130
<div *ngIf="doc.returns" class="space-y-2">
131131
<h4 class="md-typescale-title-small text-md-sys-color-on-surface flex items-center gap-2">
132-
<mat-icon class="text-md-sys-color-primary text-lg">keyboard_return</mat-icon>
132+
<mat-icon class="w-5 h-5 text-md-sys-color-primary">keyboard_return</mat-icon>
133133
반환값
134134
</h4>
135135
<p class="md-typescale-body-medium text-md-sys-color-on-surface leading-relaxed">{{ doc.returns }}</p>
136136
</div>
137137
138138
<div class="space-y-2">
139139
<h4 class="md-typescale-title-small text-md-sys-color-on-surface flex items-center gap-2">
140-
<mat-icon class="text-md-sys-color-primary text-lg">code</mat-icon>
140+
<mat-icon class="w-5 h-5 text-md-sys-color-primary">code</mat-icon>
141141
사용 예시
142142
</h4>
143143
<div class="relative bg-gray-900 text-gray-100 rounded-xl overflow-hidden">
144144
<pre class="p-4 overflow-x-auto font-mono text-sm leading-relaxed"><code>{{ generateCurlExample(doc) }}</code></pre>
145145
<button class="absolute top-3 right-3 p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
146146
(click)="copyCurl(doc)"
147147
title="클립보드에 복사">
148-
<mat-icon class="text-gray-300 text-lg">content_copy</mat-icon>
148+
<mat-icon class="w-5 h-5 text-gray-300">content_copy</mat-icon>
149149
</button>
150150
</div>
151151
</div>

0 commit comments

Comments
 (0)
⚡