클럽 설정 기능

frontend/src/App.vue

@@ -12,7 +12,15 @@
             <!-- 클럽 정보 -->
             <div class="club-info" v-if="selectedClub">
               <div class="club-header">
-                <h3>{{ selectedClub.name }}</h3>
+                <div class="club-title">
+                  <h3>{{ selectedClub.name }}</h3>
+                  <router-link v-if="userRole === 'admin' || userRole === '모임장' || userRole === '운영진'" 
+                    :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">
@@ -121,6 +129,7 @@ const ownerName = ref('');
 const isRouterReady = ref(false);
 const userRole = computed(() => user.value?.role || '');
 const isAdmin = computed(() => userRole.value === 'admin' || userRole.value === 'superadmin');
+const userClubRole = ref(localStorage.getItem('userClubRole') || '');
 
 // 화면 크기 변경 감지
 const handleResize = () => {
@@ -430,12 +439,29 @@ body {
   margin-bottom: 10px;
 }
 
+.club-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+
 .club-header h3 {
   margin: 0;
   font-size: 1.2em;
   font-weight: bold;
 }
 
+.settings-icon {
+  color: #6c757d;
+  font-size: 1.1em;
+  transition: color 0.3s ease;
+}
+
+.settings-icon:hover {
+  color: #007bff;
+}
+
 .club-location {
   margin: 0;
   font-size: 0.9em;