jaybe/bowlingManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jaybe
2025-06-11 03:33:44 +09:00
parent d085e037a1
commit 48f1bf1c52
10 changed files with 339 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+108 -105
View File
@@ -1,97 +1,99 @@
<template>
<Toast />
<template v-if="isRouterReady">
<AppPublicLayout v-if="isPublicLayout">
<router-view />
</AppPublicLayout>
<div v-else class="app">
<AppHeader />
<div class="app-content">
<div v-if="isSidebarVisible && isMobileView" class="sidebar-overlay" @click="closeSidebar"></div>
<aside v-if="isLoggedIn" class="sidebar" :class="{ 'mobile-visible': isSidebarVisible, 'mobile-hidden': !isSidebarVisible && isMobileView }">
<div class="sidebar-content">
<!-- 클럽 정보 -->
<div class="club-info" v-if="selectedClub">
<div class="club-header">
<div class="club-title">
<h3>{{ selectedClub.name }}</h3>
<router-link v-if="userRole === 'admin' || userClubRole === '모임장'"
:to="{ name: 'ClubSettings' }"
class="settings-icon"
title="클럽 설정">
<i class="pi pi-cog"></i>
</router-link>
</div>
<p class="club-location"><i class="pi pi-map-marker"></i> {{ selectedClub.location }}</p>
</div>
<div class="club-stats">
<div class="stat-item">
<i class="pi pi-users"></i>
<span>{{ memberCount }} 명</span>
</div>
<div class="stat-item">
<i class="pi pi-user"></i>
<span>모임장: {{ ownerName }}</span>
</div>
</div>
</div>
<!-- 클럽 선택 기능 (관리자 또는 클럽이 2개 이상) -->
<div v-if="isAdmin || clubs.length > 1" class="club-selector">
<label for="club-select">클럽 선택:</label>
<select id="club-select" v-model="selectedClubId" @change="onClubChange">
<option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}({{ club.memberType }})</option>
</select>
</div>
<!-- 커스텀 사이드바 메뉴 -->
<div class="custom-sidebar-menu">
<template v-for="(menuGroup, groupIndex) in menuItems" :key="groupIndex">
<div class="menu-group">
<div class="menu-group-header" @click="toggleMenuGroup(groupIndex)">
<i :class="menuGroup.icon"></i>
<span>{{ menuGroup.label }}</span>
<i class="pi" :class="expandedGroups[groupIndex] ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
</div>
<div class="menu-items" v-if="expandedGroups[groupIndex]" v-show="menuGroup.items && menuGroup.items.length">
<router-link
v-for="(item, itemIndex) in menuGroup.items"
:key="itemIndex"
:to="item.to"
class="menu-item"
exact
active-class="router-link-active"
@click="closeSidebarOnMobile"
>
<i :class="item.icon"></i>
<span>{{ item.label }}</span>
<div id="app">
<AppHeader @toggle-sidebar="sidebarVisible = !sidebarVisible" />
<Toast />
<template v-if="isRouterReady">
<AppPublicLayout v-if="isPublicLayout">
<router-view />
</AppPublicLayout>
<div v-else class="app">
<div class="app-content">
<div v-if="sidebarVisible && isMobileView" class="sidebar-overlay" @click="closeSidebar"></div>
<aside v-if="isLoggedIn" class="sidebar" :class="{ 'mobile-visible': sidebarVisible, 'mobile-hidden': !sidebarVisible && isMobileView }">
<div class="sidebar-content">
<!-- 클럽 정보 -->
<div class="club-info" v-if="selectedClub">
<div class="club-header">
<div class="club-title">
<h3>{{ selectedClub.name }}</h3>
<router-link v-if="userRole === 'admin' || userClubRole === '모임장'"
:to="{ name: 'ClubSettings' }"
class="settings-icon"
title="클럽 설정">
<i class="pi pi-cog"></i>
</router-link>
</div>
<p class="club-location"><i class="pi pi-map-marker"></i> {{ selectedClub.location }}</p>
</div>
</template>
<!-- 그룹이 없는 단일 메뉴 아이템 -->
<template v-for="(menuItem, itemIndex) in singleMenuItems" :key="'single-'+itemIndex">
<router-link
:to="menuItem.to"
class="menu-item single-menu-item"
exact
active-class="router-link-active"
@click="closeSidebarOnMobile"
>
<i :class="menuItem.icon"></i>
<span>{{ menuItem.label }}</span>
</router-link>
</template>
<div class="club-stats">
<div class="stat-item">
<i class="pi pi-users"></i>
<span>{{ memberCount }} 명</span>
</div>
<div class="stat-item">
<i class="pi pi-user"></i>
<span>모임장: {{ ownerName }}</span>
</div>
</div>
</div>
<!-- 클럽 선택 기능 (관리자 또는 클럽이 2개 이상) -->
<div v-if="isAdmin || clubs.length > 1" class="club-selector">
<label for="club-select">클럽 선택:</label>
<select id="club-select" v-model="selectedClubId" @change="onClubChange">
<option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}({{ club.memberType }})</option>
</select>
</div>
<!-- 커스텀 사이드바 메뉴 -->
<div class="custom-sidebar-menu" :class="{ mobile: isMobileView }" v-show="sidebarVisible">
<template v-for="(menuGroup, groupIndex) in menuItems" :key="groupIndex">
<div class="menu-group">
<div class="menu-group-header" @click="toggleMenuGroup(groupIndex)">
<i :class="menuGroup.icon"></i>
<span>{{ menuGroup.label }}</span>
<i class="pi" :class="expandedGroups[groupIndex] ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
</div>
<div class="menu-items" v-if="expandedGroups[groupIndex]" v-show="menuGroup.items && menuGroup.items.length">
<router-link
v-for="(item, itemIndex) in menuGroup.items"
:key="itemIndex"
:to="item.to"
class="menu-item"
exact
active-class="router-link-active"
@click="closeSidebarOnMobile"
>
<i :class="item.icon"></i>
<span>{{ item.label }}</span>
</router-link>
</div>
</div>
</template>
<!-- 그룹이 없는 단일 메뉴 아이템 -->
<div v-for="(menuItem, itemIndex) in singleMenuItems" :key="'single-'+itemIndex">
<router-link
:to="menuItem.to"
class="menu-item single-menu-item"
exact
active-class="router-link-active"
@click="closeSidebarOnMobile"
>
<i :class="menuItem.icon"></i>
<span>{{ menuItem.label }}</span>
</router-link>
</div>
</div>
</div>
</div>
</aside>
<main class="main-content" :class="{ 'full-width': !isLoggedIn }">
<router-view />
</main>
</aside>
<main class="main-content" :class="{ 'full-width': !isLoggedIn }">
<router-view />
</main>
</div>
<footer>
<p>&copy; {{ new Date().getFullYear() }} 볼링 클럽 매니저. All rights reserved.</p>
</footer>
</div>
<footer>
<p>&copy; {{ new Date().getFullYear() }} 볼링 클럽 매니저. All rights reserved.</p>
</footer>
</div>
</template>
</template>
</div>
</template>
<script setup>
@@ -120,7 +122,7 @@ const menuItems = ref([]);
const singleMenuItems = ref([]);
const expandedGroups = ref({});
const isMobileView = ref(window.innerWidth < 768);
const isSidebarVisible = ref(!isMobileView.value);
const sidebarVisible = ref(window.innerWidth > 600);
const isLoggedIn = computed(() => !!user.value && !!localStorage.getItem('token'));
const clubs = ref([]); // 클럽 목록
const selectedClubId = ref(localStorage.getItem('clubId') || null); // 선택된 클럽 ID
@@ -135,20 +137,18 @@ const userClubRole = computed(() => localStorage.getItem('userClubRole') || '');
// 화면 크기 변경 감지
const handleResize = () => {
isMobileView.value = window.innerWidth < 768;
if (!isMobileView.value) {
isSidebarVisible.value = true;
}
sidebarVisible.value = window.innerWidth > 600;
};
// 사이드바 토글
const toggleSidebar = () => {
isSidebarVisible.value = !isSidebarVisible.value;
sidebarVisible.value = !sidebarVisible.value;
};
// 사이드바 닫기
const closeSidebar = () => {
if (isMobileView.value) {
isSidebarVisible.value = false;
sidebarVisible.value = false;
}
};
@@ -312,17 +312,7 @@ const loadMenuItems = async () => {
});
menuItems.value = groupMenus;
/*
// 구독관리 메뉴 하드코딩으로 추가
singleMenuItems.value = [
...singleMenus,
{
label: '구독관리',
icon: 'pi pi-credit-card',
to: '/club/subscription'
}
];
*/
singleMenuItems.value = singleMenus;
} else {
menuItems.value = [];
singleMenuItems.value = [];
@@ -534,6 +524,17 @@ body {
.custom-sidebar-menu {
margin-top: 20px;
}
.custom-sidebar-menu.mobile {
position: fixed;
left: 0;
width: 200px;
height: 100%;
z-index: 1200;
background: #fff;
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
transition: left 0.2s;
}
.menu-group-header {
display: flex;
@@ -602,9 +603,11 @@ body {
/* 메인 컨텐츠 스타일 */
.main-content {
width: 100%;
flex: 1;
padding: 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
.main-content.full-width {
frontend/src/components/AppHeader.vue
+30 -1
View File
@@ -1,7 +1,10 @@
<template>
<header class="app-header">
<button class="sidebar-toggle" @click="$emit('toggle-sidebar')">
<i class="pi pi-bars"></i>
</button>
<div class="logo">
<img src="@/assets/LaneBowLogo.png" alt="LaneBow Logo" class="logo-img" />
<img src="@/assets/LaneBowLogo.png" alt="LaneBow Logo" class="logo-img header-logo" />
<div class="app-title">볼링 클럽 매니저</div>
</div>
@@ -524,4 +527,30 @@ onBeforeUnmount(() => {
margin: 0.5rem;
}
}
.header-logo {
height: 60px;
transition: height 0.2s;
}
.sidebar-toggle {
display: none;
background: none;
border: none;
font-size: 2rem;
margin-right: 10px;
cursor: pointer;
}
@media (max-width: 600px) {
.header-logo {
height: 36px;
}
.app-title {
font-size: .8rem;
margin-top: -10px;
}
.sidebar-toggle {
display: block;
}
}
</style>
frontend/src/services/api.js
+1
View File
@@ -10,6 +10,7 @@ const apiClient = axios.create({
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
timeout: 10000
});
frontend/src/views/admin/ActivityLogManagement.vue
+26
View File
@@ -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>
frontend/src/views/admin/ClubManagement.vue
+31
View File
@@ -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>
frontend/src/views/admin/Dashboard.vue
+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>
frontend/src/views/admin/SubscriptionManagement.vue
+38 -4
View File
@@ -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>
frontend/src/views/admin/UserManagement.vue
+26
View File
@@ -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>