정리

backend/controllers/eventController.js

@@ -1260,14 +1260,30 @@ exports.getEventParticipants = async (req, res) => {
   }
 };
 
-// 이벤트 참가자 등록
+// 참가자 정보 핵심 update 함수 (중복 제거)
+async function updateEventParticipantCore({ id, eventId, memberId, clubId, status, paymentStatus, comment }) {
+  const [updatedCount] = await EventParticipant.update(
+    { status, paymentStatus, comment },
+    {
+      where: {
+        id,
+        eventId,
+        memberId
+      }
+    }
+  );
+  return updatedCount;
+}
+
+// 이벤트 참가자 등록 (이미 있으면 update, 없으면 create)
 exports.addEventParticipant = async (req, res) => {
   try {
     const { 
       clubId,
       memberId,
       status,
-      paymentStatus
+      paymentStatus,
+      comment
     } = req.body;
     const eventId = req.params.id;
     if (!eventId || !clubId || !memberId) {
@@ -1311,35 +1327,41 @@ exports.addEventParticipant = async (req, res) => {
       }
     });
 
+    let participant;
+    let isUpdate = false;
     if (existingParticipant) {
-      return res.status(400).json({ message: '이미 참가 신청한 사용자입니다.' });
-    }
-
-    // 참가자 수 제한 확인
-    if (event.maxParticipants > 0) {
-      const currentParticipants = await EventParticipant.count({
-        where: {
+      // 이미 있으면 update (핵심 update 함수 활용)
+      await updateEventParticipantCore({
+        id: existingParticipant.id,
         eventId,
-          status: { [Op.ne]: '취소' }
-        }
+        memberId,
+        clubId,
+        status: status || existingParticipant.status,
+        paymentStatus: paymentStatus || existingParticipant.paymentStatus,
+        comment: comment || existingParticipant.comment
       });
-
-      if (currentParticipants >= event.maxParticipants) {
-        return res.status(400).json({ message: '참가자 수가 초과되었습니다.' });
+      participant = await EventParticipant.findOne({
+        where: { id: existingParticipant.id },
+        include: [
+          {
+            model: Member,
+            attributes: ['id', 'name']
           }
-    }
-
-    const participant = await EventParticipant.create({
+        ]
+      });
+      isUpdate = true;
+    } else {
+      // 없으면 create
+      participant = await EventParticipant.create({
         eventId,
         memberId,
         status: status || '참가예정',
         paymentStatus: paymentStatus || '미납',
+        comment: comment || null,
         createdAt: new Date(),
         updatedAt: new Date()
       });
-
-    // 참가자 정보 조회
-    const participantWithDetails = await EventParticipant.findOne({
+      participant = await EventParticipant.findOne({
         where: { id: participant.id },
         include: [
           {
@@ -1348,14 +1370,15 @@ exports.addEventParticipant = async (req, res) => {
           }
         ]
       });
+    }
 
     res.status(201).json({
-      message: '참가자가 등록되었습니다.',
-      participant: participantWithDetails
+      message: isUpdate ? '기존 참가자 정보를 수정했습니다.' : '참가자가 등록되었습니다.',
+      participant
     });
   } catch (error) {
-    console.error('참가자 등록 오류:', error);
-    res.status(500).json({ message: '참가자 등록 중 오류가 발생했습니다.' });
+    console.error('참가자 등록/수정 오류:', error);
+    res.status(500).json({ message: '참가자 등록/수정 중 오류가 발생했습니다.' });
   }
 };
 
@@ -1363,7 +1386,7 @@ exports.addEventParticipant = async (req, res) => {
 exports.updateEventParticipant = async (req, res) => {
   try {
     const eventId = req.params.id;
-    const { id, clubId, memberId, status, paymentStatus } = req.body;
+    const { id, clubId, memberId, status, paymentStatus, comment } = req.body;
 
     if (!eventId || !clubId || !memberId || !id) {
       return res.status(400).json({ message: '이벤트 ID, 클럽 ID, 사용자 ID가 필요합니다.' });
@@ -1384,7 +1407,7 @@ exports.updateEventParticipant = async (req, res) => {
 
     // 참가자 정보 수정
     const [updatedCount] = await EventParticipant.update(
-      { status, paymentStatus },
+      { status, paymentStatus, comment },
       {
         where: {
           id,

backend/models/EventParticipant.js

@@ -55,6 +55,13 @@ const EventParticipant = sequelize.define('EventParticipant', {
 }, {
   tableName: 'EventParticipants',
   comment: '이벤트별 참가자 정보를 저장하는 테이블',
+  indexes: [
+    {
+      unique: true,
+      fields: ['eventId', 'memberId'],
+      name: 'unique_event_member'
+    }
+  ],
   timestamps: true
 });
 

backend/models/index.js

@@ -27,8 +27,8 @@ const syncModels = async () => {
     // await sequelize.query('SET FOREIGN_KEY_CHECKS = 1');
     
     // 운영 alter: true - 구조변경만 alter처리
-    await sequelize.sync({ alter: true });
-    // await sequelize.sync();
+    // await sequelize.sync({ alter: true });
+    await sequelize.sync();
   } catch (error) {
     console.error('모델 동기화 중 오류 발생:', error);
   }

backend/seeders/2025042302-sample-club-subscriptions.js

@@ -4,7 +4,7 @@ module.exports = {
     const clubSubscriptions = [];
     for (let clubId = 1; clubId <= 5; clubId++) {
       const planId = Math.floor(Math.random() * 2) + 1; // 랜덤으로 플랜 1, 2 중 하나 선택
-      const startDate = new Date(2025, 3, 1 + clubId);
+      const startDate = new Date(2025, 4, 1 + clubId);
       const endDate = new Date(startDate.getFullYear(), startDate.getMonth()+1, startDate.getDate());
       clubSubscriptions.push({
         clubId,

backend/seeders/20250424-init-menus.js

@@ -43,7 +43,6 @@ module.exports = {
         visible: true,
         parentId: clubMenuId,
         featureCode: 'member_management',
-        requiredSubscriptionTier: 'basic',
         createdAt: new Date(),
         updatedAt: new Date()
       },

frontend/src/components/event/EventDetailsDialog.vue

@@ -7,49 +7,59 @@
     :modal="true"
     class="event-details-dialog"
   >
-    <TabView>
+    <Tabs value="기본정보">
+      <TabList>
+        <Tab value="기본정보"><i class="pi pi-info-circle mr-2" />기본정보</Tab>
+        <Tab value="참가자 관리"><i class="pi pi-users mr-2" />참가자 관리</Tab>
+        <Tab value="점수 관리"><i class="pi pi-chart-bar mr-2" />점수 관리</Tab>
+        <Tab value="팀 편성"><i class="pi pi-sitemap mr-2" />팀 편성</Tab>
+      </TabList>
+      <TabPanels>
       <!-- 기본 정보 탭 -->
-      <TabPanel header="기본 정보">
-        <div class="event-details">
-          <div class="event-details-header">
+        <TabPanel value="기본정보">
+          <div class="event-details p-3">
+            <div class="flex align-items-center gap-2 mb-3">
               <Badge :value="getEventTypeName(eventModel.eventType)" :severity="getStatusSeverity(eventModel.status)" />
               <Badge :value="getStatusName(eventModel.status)" :severity="getStatusSeverity(eventModel.status)" />
             </div>
-          
-          <div class="event-details-content">
-            <div class="event-details-section">
-              <h4>이벤트 정보</h4>
+            <div class="card surface-100 p-3 mb-3">
               <div class="grid">
-                <div class="col-12 md:col-6">
-                  <p><strong>시작일:</strong> {{ formattedStartDate }}</p>
-                  <p><strong>종료일:</strong> {{ formattedEndDate }}</p>
-                  <p><strong>장소:</strong> {{ eventModel.location }}</p>
-                  <p v-if="eventModel.publicHash">
-                    <strong>공개 URL:</strong>
-                    <InputText :value="publicEventUrl" readonly style="width:70%" class="mr-2" />
-                    <Button icon="pi pi-copy" @click="copyPublicUrl" class="p-button-sm" v-tooltip.bottom="'복사'" />
-                  </p>
-                  <p v-if="eventModel.accessPassword">
-                    <strong>공개 비밀번호:</strong> {{ eventModel.accessPassword }}
-                  </p>
+                <div class="col-12 md:col-6 mb-2">
+                  <span class="font-bold text-color-secondary">시작일:</span>
+                  <span class="ml-2">{{ formattedStartDate }}</span>
                 </div>
-                <div class="col-12 md:col-6">
-                  <p><strong>최대 참가자 수:</strong> {{ eventModel.maxParticipants || '제한 없음' }}</p>
-                  <p><strong>현재 참가자 수:</strong> {{ eventModel.participants?.length || 0 }}</p>
+                <div class="col-12 md:col-6 mb-2">
+                  <span class="font-bold text-color-secondary">종료일:</span>
+                  <span class="ml-2">{{ formattedEndDate }}</span>
+                </div>
+                <div class="col-12 md:col-6 mb-2">
+                  <span class="font-bold text-color-secondary">장소:</span>
+                  <span class="ml-2">{{ eventModel.location }}</span>
+                </div>
+                <div class="col-12 md:col-6 mb-2">
+                  <span class="font-bold text-color-secondary">참가자 수:</span>
+                  <span class="ml-2">{{ eventModel.currentParticipants }} / {{ eventModel.maxParticipants }}</span>
+                </div>
+                <div class="col-12 md:col-6 mb-2 flex align-items-center">
+                  <span class="font-bold text-color-secondary">공개 URL:</span>
+                  <InputText :value="publicEventUrl" class="ml-2 w-full" readonly />
+                  <Button icon="pi pi-copy" class="ml-2" @click="copyPublicUrl" />
+                </div>
+                <div class="col-12 md:col-6 mb-2">
+                  <span class="font-bold text-color-secondary">공개 비밀번호:</span>
+                  <span class="ml-2">{{ eventModel.publicPassword }}</span>
                 </div>
               </div>
             </div>
-            
-            <div class="event-details-section">
-              <h4>설명</h4>
-              <p>{{ eventModel.description || '설명이 없습니다.' }}</p>
-            </div>
+            <div class="card surface-100 p-3">
+              <span class="font-bold text-color-secondary">설명</span>
+              <div class="mt-2">{{ eventModel.description }}</div>
             </div>
           </div>
         </TabPanel>
 
         <!-- 참가자 관리 탭 -->
-      <TabPanel header="참가자 관리">
+        <TabPanel value="참가자 관리">
           <ParticipantManagement
             :eventId="eventModel.id"
             :availableMembers="availableMembers"
@@ -58,7 +68,7 @@
         </TabPanel>
 
         <!-- 점수 관리 탭 -->
-      <TabPanel header="점수 관리">
+        <TabPanel value="점수 관리">
           <ScoreManagement 
             :eventId="eventModel.id"
             :participants="eventModel.participants || []"
@@ -67,10 +77,11 @@
           />
         </TabPanel>
         <!-- 팀 편성 탭 -->
-      <TabPanel header="팀 편성">
-        <TeamGeneration :participants="confirmedParticipants" :teams="teams" @update:teams="teams = $event" @teams-generated="teams = $event" @save-teams="handleSaveTeams" />
+        <TabPanel value="팀 편성">
+          <TeamGeneration :participants="confirmedParticipants" :teams="teams" @save-teams="handleSaveTeams" />
         </TabPanel>
-    </TabView>
+      </TabPanels>
+    </Tabs>
 
     <template #footer>
       <div class="dialog-footer">
@@ -84,15 +95,8 @@
 import { ref, computed, watch } from 'vue';
 import TeamGeneration from './TeamGeneration.vue';
 import Dialog from 'primevue/dialog';
-import TabView from 'primevue/tabview';
-import TabPanel from 'primevue/tabpanel';
-import Badge from 'primevue/badge';
-import Button from 'primevue/button';
-import InputNumber from 'primevue/inputnumber';
-import InputText from 'primevue/inputtext';
 import ParticipantManagement from './ParticipantManagement.vue';
 import ScoreManagement from './ScoreManagement.vue';
-import dayjs from 'dayjs';
 
 const props = defineProps({
   visible: { type: Boolean, required: true },
@@ -144,11 +148,13 @@ watch(() => eventModel.value.id, async (eventId) => {
 }, { immediate: true });
 
 // 참가확정 참가자 목록을 계산하는 computed 속성
-const confirmedParticipants = computed(() => {
+const confirmedParticipants = ref([]);
+function updateConfirmedParticipants() {
   const arr = eventModel.value.EventParticipants?.filter(p => p.status === '참가확정' || p.status === '참가예정') || [];
-  console.log('[상위] 참가확정:', arr);
-  return arr;
-});
+  confirmedParticipants.value = arr;
+}
+// 최초 및 eventModel 변경 시 동기화
+watch(() => eventModel.value.EventParticipants, updateConfirmedParticipants, { immediate: true, deep: true });
 
 // 참가확정 인원 수
 const confirmedCount = computed(() => confirmedParticipants.value.length);
@@ -176,11 +182,12 @@ async function handleSaveTeams(savedTeams) {
 function handleParticipantUpdated(data) {
   // 부모 컴포넌트에 이벤트 전달
   emit('participant-updated', data);
-  
   // 전체 참가자 목록이 있는 경우 직접 업데이트
   if (data.allParticipants) {
     // EventParticipants 속성을 완전히 대체
     eventModel.value.EventParticipants = [...data.allParticipants];
+    // 참가확정 참가자도 즉시 반영
+    updateConfirmedParticipants();
   }
 };
 

frontend/src/components/event/ParticipantManagement.vue

@@ -55,7 +55,7 @@
     <Dialog v-model:visible="participantDialog" :header="dialogTitle" modal class="p-fluid" :style="{width: '450px'}">
       <div class="field">
         <label for="member">회원</label>
-        <Dropdown
+        <Select
           id="member"
           v-model="editingParticipant.memberId"
           :options="props.availableMembers"
@@ -69,7 +69,7 @@
       </div>
       <div class="field">
         <label for="status">참가 상태</label>
-        <Dropdown
+        <Select
           id="status"
           v-model="editingParticipant.status"
           :options="participantStatusOptions"
@@ -82,7 +82,7 @@
       </div>
       <div class="field">
         <label for="paymentStatus">결제 상태</label>
-        <Dropdown
+        <Select
           id="paymentStatus"
           v-model="editingParticipant.paymentStatus"
           :options="paymentStatusOptions"
@@ -118,13 +118,6 @@ import { ref, computed, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import eventService from '@/services/eventService';
 import dayjs from 'dayjs';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-import Dialog from 'primevue/dialog';
-import Button from 'primevue/button';
-import Dropdown from 'primevue/dropdown';
-import Badge from 'primevue/badge';
-import Toast from 'primevue/toast';
 
 const props = defineProps({
   eventId: {

frontend/src/components/event/ScoreManagement.vue

@@ -47,7 +47,7 @@
     <Dialog v-model:visible="scoreDialog" :header="scoreDialogTitle" modal class="p-fluid" :style="{width: '600px'}">
       <div class="field">
         <label for="participant">참가자</label>
-        <Dropdown
+        <Select
           id="participant"
           v-model="editingScore.participantId"
           :options="participants"
@@ -122,7 +122,6 @@
 import { ref, onMounted, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import eventService from '@/services/eventService';
-import dayjs from 'dayjs';
 
 const props = defineProps({
   eventId: {

frontend/src/components/event/TeamGeneration.vue

@@ -50,7 +50,7 @@
           </draggable>
         </ul>
         <div class="flex align-items-center gap-2 mt-2">
-          <Dropdown
+          <Select
             v-model="team._selectedMember"
             :options="availableMembersForTeam(idx)"
             optionLabel="name"
@@ -71,7 +71,7 @@
                 </span>
               </span>
             </template>
-          </Dropdown>
+          </Select>
           <Button icon="pi pi-plus" class="p-button-text p-0" :disabled="!team._selectedMember" @click="addMemberToTeam(idx)" />
         </div>
       </div>
@@ -89,11 +89,7 @@
 
 <script setup>
 import draggable from 'vuedraggable'; // npm install vuedraggable@next 필요 (vue3)
-
 import { ref, computed, watch, unref } from 'vue';
-import InputNumber from 'primevue/inputnumber';
-import Button from 'primevue/button';
-import Dropdown from 'primevue/dropdown';
 
 // 참가자 에버리지 구하기
 function getMemberAverage(member) {

frontend/src/main.js

@@ -26,10 +26,10 @@ import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import Dialog from 'primevue/dialog'
 import Select from 'primevue/select'
+import MultiSelect from 'primevue/multiselect'
 import Toast from 'primevue/toast'
 import ToastService from 'primevue/toastservice'
 import Card from 'primevue/card'
-import TabPanel from 'primevue/tabpanel'
 import Menu from 'primevue/menu'
 import Menubar from 'primevue/menubar'
 import PanelMenu from 'primevue/panelmenu'
@@ -46,6 +46,11 @@ import Datepicker from 'primevue/datepicker'
 import Tag from 'primevue/tag'
 import FloatLabel from 'primevue/floatlabel';
 import Tooltip from 'primevue/tooltip';
+import Tabs from 'primevue/tabs';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
 import {ko} from 'primelocale/js/ko.js';
 
 import AppHeader from './components/AppHeader.vue';
@@ -76,9 +81,14 @@ app.component('DataTable', DataTable)
 app.component('Column', Column)
 app.component('Dialog', Dialog)
 app.component('Select', Select)
+app.component('MultiSelect', MultiSelect)
 app.component('Toast', Toast)
 app.component('Card', Card)
+app.component('Tabs', Tabs)
+app.component('TabPanels', TabPanels)
 app.component('TabPanel', TabPanel)
+app.component('TabList', TabList)
+app.component('Tab', Tab)
 app.component('Menu', Menu)
 app.component('Menubar', Menubar)
 app.component('PanelMenu', PanelMenu)

frontend/src/services/PublicEventService.js

@@ -27,7 +27,7 @@ async function fetchEvent(publicHash, password) {
     headers,
     body
   });
-  if (res.status === 403 || res.status === 401) {
+  if (res.status === 403 || res.status === 401 || res.status === 404) {
     removeToken(publicHash);
   }
   const data = await res.json();

frontend/src/views/club/MemberManagement.vue

@@ -61,42 +61,35 @@
     <Dialog v-model:visible="memberDialog" :style="{width: '450px'}" 
             :header="dialogMode === 'new' ? '새 회원 추가' : '회원 정보 수정'" 
             :modal="true" class="p-fluid">
-      <div class="field">
-        <label for="name">이름</label>
-        <InputText id="name" v-model="member.name" required autofocus />
+      <!-- 회원 정보 다이얼로그 내부 폼 예시 -->
+      <div class="field mb-3">
+        <label for="gender" class="mb-1">성별</label>
+        <Select id="gender" v-model="member.gender" :options="genderOptions" optionLabel="name" placeholder="성별 선택" class="w-full" />
       </div>
-      <div class="field">
-        <label for="gender">성별</label>
-        <Dropdown id="gender" v-model="member.gender" :options="genderOptions" 
-                  optionLabel="name" placeholder="성별 선택" />
+      <div class="field mb-3">
+        <label for="memberType" class="mb-1">회원 유형</label>
+        <Select id="memberType" v-model="member.memberTypeObj" :options="memberTypes" optionLabel="name" placeholder="회원 유형 선택" class="w-full" />
       </div>
-      <div class="field">
-        <label for="memberType">회원 유형</label>
-        <Dropdown id="memberType" v-model="member.memberTypeObj" :options="memberTypes" 
-                  optionLabel="name" placeholder="회원 유형 선택" />
+      <div class="field mb-3">
+        <label for="phone" class="mb-1">전화번호</label>
+        <InputText id="phone" v-model="member.phone" class="w-full" />
       </div>
-      <div class="field">
-        <label for="phone">전화번호</label>
-        <InputText id="phone" v-model="member.phone" />
+      <div class="field mb-3">
+        <label for="email" class="mb-1">이메일</label>
+        <InputText id="email" v-model="member.email" class="w-full" />
       </div>
-      <div class="field">
-        <label for="email">이메일</label>
-        <InputText id="email" v-model="member.email" />
+      <div class="field mb-3">
+        <label for="handicap" class="mb-1">핸디캡</label>
+        <InputText id="handicap" v-model="member.handicap" type="number" min="0" max="50" class="w-full" />
       </div>
-      <div class="field">
-        <label for="handicap">핸디캡</label>
-        <InputText id="handicap" v-model="member.handicap" type="number" min="0" max="50" />
+      <div class="field mb-3">
+        <label for="status" class="mb-1">상태</label>
+        <Select id="status" v-model="member.status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="상태 선택" class="w-full" />
       </div>
-      <div class="field">
-        <label for="status">상태</label>
-        <Dropdown id="status" v-model="member.status" :options="statusOptions" 
-                  optionLabel="label" optionValue="value" placeholder="상태 선택" />
-      </div>
-      
-      <template #footer>
+      <div class="flex justify-content-end gap-2 mt-4">
         <Button label="취소" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
         <Button label="저장" icon="pi pi-check" class="p-button-text" @click="saveMember" />
-      </template>
+      </div>
     </Dialog>
     
     <!-- 삭제 확인 다이얼로그 -->
@@ -177,13 +170,6 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
-import MultiSelect from 'primevue/multiselect';
-import InputNumber from 'primevue/inputnumber';
-import Dialog from 'primevue/dialog';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
 import apiClient from '@/services/api';
 import clubService from '@/services/clubService';
 

frontend/src/views/club/ScoreManagement.vue

@@ -28,7 +28,7 @@
                 </span>
               </div>
               <div class="col-12 md:col-4">
-                <Dropdown v-model="filters.team" :options="teamOptions" optionLabel="name" 
+                <Select v-model="filters.team" :options="teamOptions" optionLabel="name" 
                           placeholder="팀 선택" class="w-full" />
               </div>
               <div class="col-12 md:col-4">
@@ -118,11 +118,11 @@
           <div class="ranking-filters mb-3">
             <div class="grid">
               <div class="col-12 md:col-4">
-                <Dropdown v-model="rankingType" :options="rankingOptions" optionLabel="name" 
+                <Select v-model="rankingType" :options="rankingOptions" optionLabel="name" 
                           placeholder="순위 유형" class="w-full" />
               </div>
               <div class="col-12 md:col-4">
-                <Dropdown v-model="rankingGame" :options="gameRankingOptions" optionLabel="name" 
+                <Select v-model="rankingGame" :options="gameRankingOptions" optionLabel="name" 
                           placeholder="게임 선택" class="w-full" />
               </div>
             </div>
@@ -177,7 +177,7 @@
       <div class="export-options">
         <div class="field">
           <label for="exportFormat">파일 형식</label>
-          <Dropdown id="exportFormat" v-model="exportFormat" :options="exportFormatOptions" 
+          <Select id="exportFormat" v-model="exportFormat" :options="exportFormatOptions" 
                     optionLabel="name" placeholder="형식 선택" class="w-full" />
         </div>
         <div class="field">

frontend/src/views/event/EventPublicPage.css

@@ -2,6 +2,8 @@
     width: 100%;
     max-width: 700px;
     margin: 0 auto;
+    padding: 1rem;
+    background-color: var(--p-gray-50);
   }
   
   .event-public-wrapper>.p-card>.p-card-body {
@@ -251,7 +253,11 @@
   .team-score-table-wrapper {
     overflow-x: auto;
     border-radius: 10px;
-    padding: 12px 8px;
+    padding: 0
+  }
+  
+  .team-score-table-wrapper .p-card-body {
+    padding: 0;
   }
   
   .event-public-card {
@@ -401,7 +407,7 @@
   }
   
   .team-name-strong {
-    font-size: 2.3rem;
+    font-size: 2rem;
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 2px;

frontend/src/views/event/EventPublicPage.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="event-public-wrapper">
     <h1 v-if="clubName" class="p-text-primary p-text-bold p-text-lg p-mb-2">{{ clubName }}</h1>
-    <Divider class="p-mb-4" />
-    <div class="p-shadow-8 p-p-5 p-rounded-xl event-public-card">
-      <div>
+    <div class="event-public-card">
       <div v-if="loading" class="p-text-center p-mb-4">로딩 중...</div>
       <div v-else-if="error" class="p-text-center p-mb-4">{{ error }}</div>
       <div v-else-if="!isAuthenticated">
+        <Card>
+          <template #content>
             <div class="event-password-form flex flex-column p-ai-center p-mt-6 p-mb-6">
               <i class="pi pi-lock p-mb-3 event-password-lock"></i>
               <div class="p-text-center p-mb-3 p-text-lg event-password-desc">이 이벤트는 비밀번호가 필요합니다.<br>비밀번호를 입력해 주세요.</div>
@@ -15,13 +15,17 @@
               <Button label="확인" @click="verifyPassword" class="p-mb-2 event-password-btn" :loading="loading" />
               <div v-if="passwordError" class="p-error p-mt-1 event-password-error">{{ passwordError }}</div>
             </div>
+          </template>
+        </Card>
       </div>
       <div v-else>
+        <template v-if="event">
+          <Divider class="p-mb-4" />
           <div class="event-tag">
             <Tag :value="event.eventType" class="event-type-tag" />
             <Tag :value="event.status"
               :severity="event.status === '완료' ? 'success' : event.status === '활성' ? 'info' : 'warning'"
-              class="p-ml-4" />
+              class="ml-1" />
           </div>
           <div>
             <div class="flex justify-content-end gap-2">
@@ -57,8 +61,10 @@
             <div class="p-text-secondary p-mb-4">{{ event.description || '' }}</div>
             <Divider />
             <!-- 팀별 게임별 점수/등수 표 -->
+          </div>
           <template v-if="teams.length > 0">
-              <div class="team-score-table-wrapper p-mt-4">
+            <Card class="team-score-table-wrapper mb-4">
+              <template #content>
                 <DataTable :value="getAllTeamsWithUnassigned()" class="team-score-table" :responsiveLayout="'scroll'">
                   <Column header="팀"> 
                     <template #body="slotProps">
@@ -88,8 +94,11 @@
                     </template>
                   </Column>
                 </DataTable>
-              </div>
-              <div v-for="team in getAllTeamsWithUnassigned()" :key="team.id">
+              </template>
+            </Card>
+            <div v-for="team in getAllTeamsWithUnassigned()" :key="team.id" class="mb-4">
+              <Card>
+                <template #content>
                   <MemberListCard
                     :title="parseInt(team.teamNumber) ? '팀 ' + team.teamNumber : '미배정 인원'"
                     :members="team.members"
@@ -107,6 +116,7 @@
                     :scoreColorClass="scoreColorClass"
                   />
                   <!-- 팀 카드 요약(총점/등수/게임별 점수)은 '팀'만 노출 -->
+                  <Divider />
                   <div v-if="team.teamNumber" class="team-game-scores">
                     <div class="team-total-row team-total-row-responsive team-total-row-block">
                       <div class="team-games-grid"
@@ -133,9 +143,13 @@
                       </div>
                     </div>
                   </div>
+                </template>
+              </Card>
             </div>
           </template>
           <template v-else>
+            <Card>
+              <template #content>
                 <MemberListCard
                   title="참가자"
                   :members="sortedParticipants"
@@ -151,8 +165,9 @@
                   :scoreColorClass="scoreColorClass"
                 />
               </template>
-          </div>
-        </div>
+            </Card>
+          </template>
+        </template>
       </div>
     </div>
     <JoinDialog v-if="showJoinDialog && canJoin" v-model:visible="showJoinDialog" :publicHash="publicHash"
@@ -170,6 +185,7 @@ import MemberListCard from '@/components/public/MemberListCard.vue';
 import JoinDialog from '@/components/public/JoinDialog.vue';
 import dayjs from 'dayjs';
 import PublicEventService from '@/services/PublicEventService';
+import Panel from 'primevue/panel';
 
 const route = useRoute();
 const publicHash = route.params.publicHash;
@@ -346,18 +362,22 @@ async function fetchEventData(password) {
   try {
     const { status, data } = await PublicEventService.fetchEvent(publicHash, password);
     if (status === 403) {
-      console.log('[fetchEventData] 403', { publicHash, password });
       error.value = '이벤트에 접근할 수 없습니다.';
       PublicEventService.removeToken(publicHash);
+      event.value = null;
       return;
     }
     if (status === 401) {
-      console.log('[fetchEventData] 401', { publicHash, password });
       isAuthenticated.value = false;
       PublicEventService.removeToken(publicHash);
+      event.value = null;
+      return;
+    }
+    if (status === 404 || (data && data.message === '이벤트를 찾을 수 없습니다.')) {
+      error.value = data && data.message ? data.message : '존재하지 않는 이벤트입니다.';
+      event.value = null;
       return;
     }
-    console.log('[fetchEventData] 200', data);
     clubName.value = data.clubName || '';
     event.value = data.event;
     teams.value = data.teams || [];
@@ -393,6 +413,7 @@ async function fetchEventData(password) {
     });
   } catch (e) {
     error.value = e.message;
+    event.value = null;
   } finally {
     loading.value = false;
   }