init

2025-04-17 23:32:39 +09:00
commit 5b719b6766
105 changed files with 25653 additions and 0 deletions
@@ -0,0 +1,160 @@
+<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>
+    <Toast />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } 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 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 });
+    
+    // 클럽 페이지로 이동
+    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>