정리

frontend/src/views/club/subscription/SubscriptionManagement.vue

@@ -112,8 +112,8 @@
         </div>
         
         <div class="plan-details">
-          <div class="plan-detail-item">
-            <span class="detail-label">최대 회원수:</span>
+          <div>
+            <span class="detail-label mr-3">최대 회원수:</span>
             <span class="detail-value">{{ selectedPlan.maxMembers || '제한 없음' }}</span>
           </div>
           
@@ -1403,7 +1403,6 @@ onMounted(async () => {
   display: flex;
   align-items: flex-start;
   padding: 8px 12px;
-  background-color: #f8f9fa;
   border-radius: 8px;
   flex: 1 1 calc(33% - 15px);
   min-width: 200px;
@@ -1411,11 +1410,6 @@ onMounted(async () => {
   transition: all 0.2s ease;
 }
 
-.feature-item:hover {
-  background-color: #f1f3f5;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
 .feature-item i {
   color: #4CAF50;
   margin-right: 10px;

frontend/src/views/event/EventPublicPage.css

@@ -1,3 +1,6 @@
+.text-red {
+    color: var(--p-red-500) !important;
+}
 .event-public-wrapper {
     width: 100%;
     max-width: 700px;

frontend/src/views/event/EventPublicPage.vue

@@ -2,26 +2,29 @@
   <div class="event-public-wrapper">
     <h1 v-if="clubName" class="p-text-primary p-text-bold p-text-lg p-mb-2">{{ clubName }}</h1>
     <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-if="loading" class="text-center">로딩 중...</div>
+      <div v-else-if="error" class="text-center">
+        <i class="pi pi-exclamation-triangle text-red block"></i>
+        <span class="text-red">{{ error }}</span>
+      </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>
+            <div class="event-password-form flex flex-column p-ai-center mt-6 mb-6">
+              <i class="pi pi-lock mb-3 event-password-lock"></i>
+              <div class="p-text-center mb-3 p-text-lg event-password-desc">이 이벤트는 비밀번호가 필요합니다.<br>비밀번호를 입력해 주세요.</div>
               <InputText v-model="inputPassword" type="password" placeholder="비밀번호 입력" class="p-mb-2 event-password-input"
                 @keyup.enter="verifyPassword" autofocus />
               <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 v-if="passwordError" class="p-error 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">
+          <Divider class="mb-4" />
+          <div class="event-tag mb-2">
             <Tag :value="event.eventType" class="event-type-tag" />
             <Tag :value="event.status"
               :severity="event.status === '완료' ? 'success' : event.status === '활성' ? 'info' : 'warning'"
@@ -31,34 +34,34 @@
             <div class="flex justify-content-end gap-2">
               <Button :label="joinButtonLabel" class="p-button-lg p-button-primary" @click="showJoinDialog = true" v-if="canJoin" />
             </div>
-            <div class="flex justify-content-start p-ai-center p-mb-4">
+            <div class="flex justify-content-start p-ai-center mb-4">
               <h2 class="event-title-inline p-text-lg p-text-bold">
                 {{ event.title }}
               </h2>
             </div>
-            <div class="p-text-secondary p-mb-3">
+            <div class="p-text-secondary mb-3">
               <div class="info-row">
-                <i class="pi pi-calendar p-mr-5" /><strong>기간</strong>
+                <i class="pi pi-calendar mr-1" /><strong>기간:</strong>
                 {{ formatDate(event.startDate) }}
                 <template v-if="event.endDate">~ {{ formatDate(event.endDate) }}</template>
               </div>
-              <div v-if="event.registrationDeadline" class="info-row">
-                <i class="pi pi-calendar-times p-mr-2" /><strong>마감</strong> {{ formatDate(event.registrationDeadline)
+              <div v-if="event.registrationDeadline" class="info-row" :class="isRegistrationClosed ? 'text-red' : ''">
+                <i class="pi pi-calendar-times mr-1" /><strong>마감:</strong> {{ formatDate(event.registrationDeadline)
                 }}
               </div>
               <div v-if="event.location" class="info-row">
-                <i class="pi pi-map-marker p-mr-2" /><strong>장소</strong> {{ event.location }}
+                <i class="pi pi-map-marker mr-1" /><strong>장소:</strong> {{ event.location }}
               </div>
               <div v-if="event.participantFee" class="info-row">
-                <i class="pi pi-credit-card p-mr-2" /><strong>참가비</strong> {{
+                <i class="pi pi-credit-card mr-1" /><strong>참가비:</strong> {{
                   Number(event.participantFee).toLocaleString('ko-KR') }}원
               </div>
               <div v-if="event.maxParticipants" class="info-row">
-                <i class="pi pi-user p-mr-2" /><strong>참여</strong> {{ participants.length }}/{{ event.maxParticipants
+                <i class="pi pi-user mr-1" /><strong>참여:</strong> {{ participants.length }}/{{ event.maxParticipants
                 }}명
               </div>
             </div>
-            <div class="p-text-secondary p-mb-4">{{ event.description || '' }}</div>
+            <div class="p-text-secondary mb-4">{{ event.description || '' }}</div>
             <Divider />
             <!-- 팀별 게임별 점수/등수 표 -->
           </div>
@@ -208,12 +211,21 @@ const isReady = computed(() => event.value.status === '준비');
 const isActive = computed(() => event.value.status === '활성');
 const isFinished = computed(() => event.value.status === '완료');
 
-const canJoin = computed(() => (isReady.value || isActive.value) && isAuthenticated.value);
-const canAddGuest = computed(() => isReady.value && isAuthenticated.value);
+// 신청 마감일시 체크
+const isRegistrationClosed = computed(() => {
+  if (!event.value.registrationDeadline) return false;
+  const now = new Date();
+  const deadline = new Date(event.value.registrationDeadline);
+  return now > deadline;
+});
+
+// 신청 마감일시가 지나지 않았고, 이벤트가 준비 또는 활성 상태이며, 인증되었을 때만 참가 신청 가능
+const canJoin = computed(() => (isReady.value || isActive.value) && isAuthenticated.value && !isRegistrationClosed.value);
 const canEditParticipant = computed(() => (isReady.value || isActive.value) && isAuthenticated.value);
 const canInputScore = computed(() => isActive.value && isAuthenticated.value);
 
 const joinButtonLabel = computed(() => {
+  if (isRegistrationClosed.value) return '신청 마감';
   if (isReady.value) return '참가 신청/수정';
   if (isActive.value) return '참가자 정보 수정';
   return '참가자 정보';