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

frontend/src/App.vue

@@ -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 {