bowlingManager/frontend/src/views/club/ClubCreate.vue

<template>
  <div class="club-create-container">
    <div class="club-create-card">
      <h2>클럽 생성</h2>
      <p class="info-text">볼링 클럽을 생성하여 회원들을 관리하고 활동을 시작해보세요.</p>
      
      <form @submit.prevent="handleCreateClub">
        <div class="form-group">
          <label for="clubName">클럽 이름</label>
          <InputText id="clubName" v-model="clubName" class="w-full" :class="{'p-invalid': clubNameError}" />
          <small v-if="clubNameError" class="p-error">{{ clubNameError }}</small>
        </div>
        
        <div class="form-group">
          <label for="clubDescription">클럽 설명</label>
          <Textarea id="clubDescription" v-model="clubDescription" rows="4" class="w-full" :class="{'p-invalid': clubDescriptionError}" />
          <small v-if="clubDescriptionError" class="p-error">{{ clubDescriptionError }}</small>
        </div>
        
        <div class="form-group">
          <label for="clubLocation">활동 볼링장</label>
          <InputText id="clubLocation" v-model="clubLocation" class="w-full" />
        </div>
        
        <div class="form-group">
          <label for="clubContact">연락처</label>
          <InputText id="clubContact" v-model="clubContact" class="w-full" />
        </div>
        
        <Button type="submit" label="클럽 생성하기" class="w-full" :loading="loading" />
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, inject } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import clubService from '@/services/clubService';
import { useAuthStore } from '@/stores/authStore';
import axios from 'axios'

const toast = useToast();
const authStore = useAuthStore();
const router = useRouter();
const refreshSidebar = inject('refreshSidebar'); // App.vue에서 제공하는 사이드바 새로고침 메소드 주입

const clubName = ref('');
const clubDescription = ref('');
const clubLocation = ref('');
const clubContact = ref('');
const loading = ref(false);
const clubNameError = ref('');
const clubDescriptionError = ref('');

onMounted(() => {
  authStore.loadUserInfo();
});

const validateForm = () => {
  let isValid = true;
  
  // 클럽 이름 유효성 검사
  if (!clubName.value) {
    clubNameError.value = '클럽 이름을 입력해주세요.';
    isValid = false;
  } else {
    clubNameError.value = '';
  }
  
  // 클럽 설명 유효성 검사
  if (!clubDescription.value) {
    clubDescriptionError.value = '클럽 설명을 입력해주세요.';
    isValid = false;
  } else {
    clubDescriptionError.value = '';
  }
  
  return isValid;
};

const handleCreateClub = async () => {
  if (!validateForm()) return;
  
  if (!authStore.user) {
    toast.add({ severity: 'error', summary: '오류', detail: '로그인이 필요합니다.', life: 3000 });
    return;
  }
  
  loading.value = true;
  
  try {
   
    const response = await clubService.createClub({
      name: clubName.value,
      description: clubDescription.value,
      location: clubLocation.value,
      contact: clubContact.value,
      ownerEmail: authStore.user.email
    });
    
    // 클럽 ID 저장
    const clubId = response.data.id;
    localStorage.setItem('clubId', clubId);
    
    // 성공 메시지
    toast.add({ severity: 'success', summary: '성공', detail: '클럽이 성공적으로 생성되었습니다.', life: 3000 });
    
    // 사이드바 새로고침
    if (refreshSidebar) {
      try {
        await refreshSidebar();
        console.log('클럽 생성 후 사이드바 새로고침 완료');
      } catch (refreshError) {
        console.error('사이드바 새로고침 오류:', refreshError);
      }
    }
    
    // 클럽 페이지로 이동
    router.push('/club');
  } catch (error) {
    console.error('클럽 생성 오류:', error);
    
    // 오류 메시지 처리
    const errorMessage = error.response?.data?.message || '클럽 생성에 실패했습니다. 다시 시도해주세요.';
    toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.club-create-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 2rem 0;
}

.club-create-card {
  width: 100%;
  max-width: 600px;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.info-text {
  margin-bottom: 1.5rem;
  color: #666;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.w-full {
  width: 100%;
}
</style>