결제, 구독 기능

frontend/src/App.vue

@@ -86,11 +86,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, provide } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, provide, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import AppHeader from './components/AppHeader.vue';
-import AppPublicLayout from './layouts/AppPublicLayout.vue';
 import apiClient from './services/api';
+import authService from './services/authService';
+import { useClubStore } from './stores/clubStore';
+import AppPublicLayout from './layouts/AppPublicLayout.vue';
+import AppHeader from './components/AppHeader.vue';
 
 const route = useRoute();
 const layoutComponent = computed(() => route.meta.layout === 'public' ? AppPublicLayout : 'div');
@@ -98,7 +100,9 @@ const isPublicLayout = computed(() => {
   // 라우트 meta.layout이 public이거나, 경로가 /public/로 시작하면 public 레이아웃으로 간주
   return route.meta.layout === 'public' || route.path.startsWith('/public/');
 });
-import authService from './services/authService';
+
+// 클럽 스토어 초기화
+const clubStore = useClubStore();
 
 // 상태 변수
 const user = ref(null);
@@ -188,16 +192,21 @@ const fetchClubs = async () => {
 const fetchClubInfo = async () => {
   if (isPublicLayout.value) return;
   try {
-    const response = await apiClient.post(`/api/club`, { clubId: selectedClubId.value ?? clubs.value[0].id });
+    // 클럽 스토어를 통해 클럽 정보 가져오기
+    const clubId = selectedClubId.value ?? (clubs.value.length > 0 ? clubs.value[0].id : null);
+    if (!clubId) return;
+    
+    const clubData = await clubStore.fetchClubById(clubId);
 
-    if (response.data) {
+    if (clubData) {
       selectedClub.value = {
-        id: response.data.id,
-        name: response.data.name,
-        location: response.data.location,
+        id: clubData.id,
+        name: clubData.name,
+        location: clubData.location,
+        subscription: clubData.subscription || null
       };
-      memberCount.value = response.data.memberCount;
-      ownerName.value = response.data.ownerName;
+      memberCount.value = clubData.memberCount;
+      ownerName.value = clubData.ownerName;
     }
   } catch (error) {
     console.error('클럽 정보 가져오기 오류:', error);
@@ -287,7 +296,16 @@ const loadMenuItems = async () => {
           });
 
         menuItems.value = groupMenus;
-        singleMenuItems.value = singleMenus;
+        
+        // 구독관리 메뉴 하드코딩으로 추가
+        singleMenuItems.value = [
+          ...singleMenus,
+          {
+            label: '구독관리',
+            icon: 'pi pi-credit-card',
+            to: '/club/subscription'
+          }
+        ];
       } else {
         menuItems.value = [];
         singleMenuItems.value = [];