보안설정 수정, 모바일 최적화 변경

This commit is contained in:
2025-06-11 03:33:44 +09:00
parent d085e037a1
commit 48f1bf1c52
10 changed files with 339 additions and 141 deletions
@@ -170,4 +170,30 @@ const formatDate = (date) => {
:deep(.p-datatable-wrapper) {
overflow-x: auto;
}
@media (max-width: 600px) {
.activity-log-container, .header, .dashboard-card, .subscription-management-container, .user-management-container, .club-management {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.dashboard-card {
padding: 0.7rem !important;
font-size: 0.95rem;
}
.header h2, .dashboard-card h3 {
font-size: 1.1rem !important;
}
.p-datatable-wrapper {
overflow-x: auto !important;
}
/* Dialog 팝업 중앙 정렬 개선 */
:deep(.p-dialog) {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2.5rem !important;
}
:deep(.p-dialog .p-dialog-content) {
margin-top: 0 !important;
}
}
</style>
@@ -725,4 +725,35 @@ const saveMember = async () => {
color: #666;
line-height: 1.2;
}
@media (max-width: 600px) {
.club-management, .header, .dashboard-card, .activity-log-container, .subscription-management-container, .user-management-container {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.dashboard-card {
padding: 0.7rem !important;
font-size: 0.95rem;
}
.header h2, .dashboard-card h3 {
font-size: 1.1rem !important;
}
.features-grid, .plan-details {
grid-template-columns: 1fr !important;
flex-direction: column !important;
gap: 0.7rem !important;
}
.p-datatable-wrapper {
overflow-x: auto !important;
}
/* Dialog 팝업 중앙 정렬 개선 */
:deep(.p-dialog) {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2.5rem !important;
}
:deep(.p-dialog .p-dialog-content) {
margin-top: 0 !important;
}
}
</style>
+26
View File
@@ -303,4 +303,30 @@ const navigateTo = (path) => {
:deep(.p-datatable .p-datatable-tbody > tr) {
background-color: transparent;
}
@media (max-width: 600px) {
.admin-dashboard, .header, .dashboard-card, .activity-log-container, .subscription-management-container, .user-management-container, .club-management {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.dashboard-card {
padding: 0.7rem !important;
font-size: 0.95rem;
}
.header h2, .dashboard-card h3 {
font-size: 1.1rem !important;
}
.p-datatable-wrapper {
overflow-x: auto !important;
}
/* Dialog 팝업 중앙 정렬 개선 */
:deep(.p-dialog) {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2.5rem !important;
}
:deep(.p-dialog .p-dialog-content) {
margin-top: 0 !important;
}
}
</style>
@@ -16,10 +16,9 @@
dataKey="id"
@row-expand="onPlanExpand"
>
<Column :expander="true" style="width: 3%"/>
<Column :expander="true" style="width: 1%"/>
<Column field="id" header="ID" sortable style="width: 5%"></Column>
<Column field="name" header="플랜명" sortable style="width: 15%"></Column>
<Column field="description" header="설명" style="width: 25%"></Column>
<Column field="name" header="플랜명" sortable></Column>
<Column field="maxMembers" header="최대 회원수" sortable style="width: 10%">
<template #body="slotProps">
{{ slotProps.data.maxMembers }}
@@ -30,7 +29,7 @@
{{ formatCurrency(slotProps.data.price) }}
</template>
</Column>
<Column field="status" header="상태" sortable style="width: 10%">
<Column field="status" header="상태" sortable style="width: 15%">
<template #body="slotProps">
<Badge :value="getStatusLabel(slotProps.data.status)" :severity="getStatusSeverity(slotProps.data.status)" />
</template>
@@ -45,6 +44,10 @@
</Column>
<template #expansion="slotProps">
<div class="plan-details">
<div class="plan-description">
<h4>설명</h4>
<p>{{ slotProps.data.description }}</p>
</div>
<div class="plan-features">
<h4>포함된 기능</h4>
<div class="features-grid">
@@ -603,4 +606,35 @@ const formatDate = (date) => {
font-size: 0.8rem;
padding: 0.3rem 0.5rem;
}
@media (max-width: 600px) {
.subscription-management-container, .header, .dashboard-card, .activity-log-container, .user-management-container, .club-management {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.dashboard-card {
padding: 0.7rem !important;
font-size: 0.95rem;
}
.header h2, .dashboard-card h3 {
font-size: 1.1rem !important;
}
.features-grid, .plan-details {
grid-template-columns: 1fr !important;
flex-direction: column !important;
gap: 0.7rem !important;
}
.p-datatable-wrapper {
overflow-x: auto !important;
}
/* Dialog 팝업 중앙 정렬 개선 */
:deep(.p-dialog) {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2.5rem !important;
}
:deep(.p-dialog .p-dialog-content) {
margin-top: 0 !important;
}
}
</style>
@@ -294,4 +294,30 @@ const formatDate = (date) => {
:deep(.p-password-input) {
width: 100%;
}
@media (max-width: 600px) {
.user-management-container, .header, .dashboard-card, .activity-log-container, .subscription-management-container, .club-management {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.dashboard-card {
padding: 0.7rem !important;
font-size: 0.95rem;
}
.header h2, .dashboard-card h3 {
font-size: 1.1rem !important;
}
.p-datatable-wrapper {
overflow-x: auto !important;
}
/* Dialog 팝업 중앙 정렬 개선 */
:deep(.p-dialog) {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 2.5rem !important;
}
:deep(.p-dialog .p-dialog-content) {
margin-top: 0 !important;
}
}
</style>