From 744a0db3bdbf612c09ad749c47794af9138add52 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Thu, 8 May 2025 00:50:12 +0900
Subject: [PATCH] =?UTF-8?q?public=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/event/EventDetailsDialog.vue   |   2 +-
 .../public}/JoinDialog.vue                    |   2 +-
 .../src/components/public/MemberListCard.vue  |  85 ++++++
 frontend/src/views/event/EventPublicPage.css  |   1 -
 frontend/src/views/event/EventPublicPage.vue  | 244 ++++++++----------
 5 files changed, 189 insertions(+), 145 deletions(-)
 rename frontend/src/{views/event => components/public}/JoinDialog.vue (99%)
 create mode 100644 frontend/src/components/public/MemberListCard.vue

diff --git a/frontend/src/components/event/EventDetailsDialog.vue b/frontend/src/components/event/EventDetailsDialog.vue
index b2e1fcf..30780e6 100644
--- a/frontend/src/components/event/EventDetailsDialog.vue
+++ b/frontend/src/components/event/EventDetailsDialog.vue
@@ -145,7 +145,7 @@ watch(() => eventModel.value.id, async (eventId) => {
 
 // 참가확정 참가자 목록을 계산하는 computed 속성
 const confirmedParticipants = computed(() => {
-  const arr = eventModel.value.EventParticipants?.filter(p => p.status === '참가확정') || [];
+  const arr = eventModel.value.EventParticipants?.filter(p => p.status === '참가확정' || p.status === '참가예정') || [];
   console.log('[상위] 참가확정:', arr);
   return arr;
 });
diff --git a/frontend/src/views/event/JoinDialog.vue b/frontend/src/components/public/JoinDialog.vue
similarity index 99%
rename from frontend/src/views/event/JoinDialog.vue
rename to frontend/src/components/public/JoinDialog.vue
index ee95942..7e402ca 100644
--- a/frontend/src/views/event/JoinDialog.vue
+++ b/frontend/src/components/public/JoinDialog.vue
@@ -130,7 +130,7 @@ const props = defineProps({
   visible: Boolean, // Dialog의 v-model:visible과 연결
   eventStatus: String
 });
-const emits = defineEmits(['close', 'updated']);
+const emits = defineEmits(['close', 'updated', 'update:visible']);
 
 const selectedMember = ref(null);
 const memberOptions = computed(() => {
diff --git a/frontend/src/components/public/MemberListCard.vue b/frontend/src/components/public/MemberListCard.vue
new file mode 100644
index 0000000..ab08053
--- /dev/null
+++ b/frontend/src/components/public/MemberListCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="team-title-row">
+    <span class="team-name-strong">{{ title }}</span>
+    <span v-if="teamHandicap" class="team-hc">팀 핸디캡: {{ teamHandicap }}</span>
+  </div>
+  <div class="member-list">
+    <div v-for="member in members" :key="member.participantId" class="member-row">
+      <div class="member-info-block">
+        <div class="member-header-row">
+          <span class="member-name">{{ member.name }}</span>
+          <Tag v-if="member.isGuest" value="G" severity="warning" class="ml-2" />
+        </div>
+        <div class="info-under-name">
+          {{ member.gender || '-' }}
+          <span v-if="member.status" :class="{
+            'status-cancel': member.status === '취소',
+            'status-pending': member.status === '참가예정'
+          }">
+            · {{ member.status }}
+          </span>
+          <span v-if="member.paymentStatus" :class="{
+            'payment-unpaid': member.paymentStatus === '미납'
+          }">
+            · {{ member.paymentStatus }}
+          </span>
+        </div>
+        <div class="member-meta">핸디캡: {{ member.handicap ?? '-' }} / 에버리지: {{ member.average ?? '-' }}</div>
+        <div class="member-meta">{{ member.comment }}</div>
+      </div>
+      <div class="score-inputs-vertical">
+        <template v-for="n in gameCount" :key="n">
+          <div class="score-input-hc-wrap">
+            <div class="score-input-status-wrap">
+              <InputText
+                v-if="canInputScore"
+                v-model.number="scoresProxy[member.participantId + '-' + n]"
+                type="number"
+                class="score-input"
+                :placeholder="n + 'G'"
+                maxlength="3"
+                @input="onScoreInput(member, n, teamNumber)"
+                @blur="onScoreBlur(member, n, teamNumber)"
+                @keydown.enter="onScoreEnter(member, n, teamNumber)"
+              />
+              <span v-else>{{ member.scores?.[n - 1] ?? '-' }}</span>
+              <span :class="scoreColorClass(scoreStates[member.participantId + '-' + n], scoresProxy[member.participantId + '-' + n], member.handicap)"
+                    class="score-hc-value score-status-text"
+                    :key="scoreStates[member.participantId + '-' + n] + '-' + scoresProxy[member.participantId + '-' + n]">
+                {{ (scoresProxy[member.participantId + '-' + n] !== undefined && scoresProxy[member.participantId + '-' + n] !== '') ?
+                  Number(scoresProxy[member.participantId + '-' + n]) + (Number(member.handicap) || 0) : ''
+                }}
+                <i v-if="scoreStates[member.participantId + '-' + n] === 'saving'" class="pi pi-spin pi-spinner score-status-icon" />
+                <i v-else-if="scoreStates[member.participantId + '-' + n] === 'saved'" class="pi pi-check score-status-icon" />
+                <i v-else-if="scoreStates[member.participantId + '-' + n] === 'error'" class="pi pi-times score-status-icon" />
+              </span>
+            </div>
+          </div>
+        </template>
+        <div class="member-score-summary">
+          <span>총점: {{ getMemberTotalScore(member) }}</span>
+          <span class="member-score-avg">/ 에버리지: {{ getMemberAverageScore(member) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { toRefs } from 'vue'
+const props = defineProps({
+  title: String,
+  members: Array,
+  teamHandicap: [Number, String],
+  teamNumber: [Number, String, null],
+  gameCount: Number,
+  canInputScore: Boolean,
+  scoresProxy: Object,
+  scoreStates: Object,
+  onScoreInput: Function,
+  onScoreBlur: Function,
+  onScoreEnter: Function,
+  getMemberTotalScore: Function,
+  getMemberAverageScore: Function,
+  scoreColorClass: Function
+})
+</script>
diff --git a/frontend/src/views/event/EventPublicPage.css b/frontend/src/views/event/EventPublicPage.css
index 12f06c0..89aa499 100644
--- a/frontend/src/views/event/EventPublicPage.css
+++ b/frontend/src/views/event/EventPublicPage.css
@@ -391,7 +391,6 @@
     font-weight: 700;
     margin-left: 3px;
     vertical-align: middle;
-    color: var(--p-purple-500);
   }
   
   .team-title-row {
diff --git a/frontend/src/views/event/EventPublicPage.vue b/frontend/src/views/event/EventPublicPage.vue
index 97c5f22..a373606 100644
--- a/frontend/src/views/event/EventPublicPage.vue
+++ b/frontend/src/views/event/EventPublicPage.vue
@@ -2,8 +2,8 @@
   <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" />
-    <Card class="p-shadow-8 p-p-5 p-rounded-xl event-public-card">
-      <template #content>
+    <div class="p-shadow-8 p-p-5 p-rounded-xl event-public-card">
+      <div>
         <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">
@@ -55,150 +55,110 @@
               </div>
             </div>
             <div class="p-text-secondary p-mb-4">{{ event.description || '' }}</div>
-
-            <!-- 팀별 게임별 점수/등수 표: 하단으로 이동 -->
-            <div v-if="teams.length > 0 || unassignedMembers.length > 0" class="team-score-table-wrapper p-mt-4">
-              <DataTable :value="getAllTeamsWithUnassigned()" class="team-score-table" :responsiveLayout="'scroll'">
-                <Column header="팀"> 
-                  <template #body="slotProps">
-                    팀 {{ slotProps.data.teamNumber }}
-                    <span v-if="slotProps.data.handicap" class="team-hc-small">
-                      팀 핸디캡: {{ slotProps.data.handicap ?? 0 }}
-                    </span>
-                  </template>
-                </Column>
-                <Column v-for="n in event.gameCount" :key="n" :header="n + 'G'">
-                  <template #body="slotProps">
-                    <span class="score-main">{{ getTeamTotalScore(slotProps.data, n) }}</span>
-                    <span class="block rank-badge"
-                      v-if="getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + ''] !== undefined"
-                      :class="'rank-badge rank-' + getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + '']">
-                      ({{ getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + ''] }}위)
-                    </span>
-                  </template>
-                </Column>
-                <Column header="총점">
-                  <template #body="slotProps">
-                    {{Array.from({ length: event.gameCount }, (_, i) => getTeamTotalScore(slotProps.data, i +
-                      1)).reduce((a, b) => a + b, 0) }}
-                    <span class="block rank-badge" :class="'rank-' + getTeamOverallRank(slotProps.data)">
-                      ({{ getTeamOverallRank(slotProps.data) }}위)
-                    </span>
-                  </template>
-                </Column>
-              </DataTable>
-            </div>
-            <div v-for="team in getAllTeamsWithUnassigned()" :key="team.id" class="team-card">
-              <Card class=" p-rounded-lg p-shadow-1 p-p-3 p-mb-4">
-                <template #title>
-                  <div class="team-title-row">
-                    <span class="team-name-strong">{{ parseInt(team.teamNumber) ? '팀 ' + team.teamNumber : '미배정 인원'}}</span>
-                    <span class="team-hc" v-if="team.handicap">팀 핸디캡: {{ team.handicap ?? 0 }}</span>
-                  </div>
-                </template>
-                <template #content>
-                  <div class="member-list">
-                    <div v-for="member in team.members" :key="member.participantId" class="member-row">
-                      <div class="member-info-block">
-                        <div class="member-header-row">
-                          <span class="member-name">{{ member.name }}</span>
-                          <Tag v-if="member.isGuest" value="G" severity="warning" class="ml-2" />
-                        </div>
-                        <div class="info-under-name">
-                          {{ member.gender || '-' }}
-                          <span v-if="member.status" :class="{
-                            'status-cancel': member.status === '취소',
-                            'status-pending': member.status === '참가예정'
-                          }">
-                            · {{ member.status }}
-                          </span>
-                          <span v-if="member.paymentStatus" :class="{
-                            'payment-unpaid': member.paymentStatus === '미납'
-                          }">
-                            · {{ member.paymentStatus }}
+            <Divider />
+            <!-- 팀별 게임별 점수/등수 표 -->
+            <template v-if="teams.length > 0">
+              <div class="team-score-table-wrapper p-mt-4">
+                <DataTable :value="getAllTeamsWithUnassigned()" class="team-score-table" :responsiveLayout="'scroll'">
+                  <Column header="팀"> 
+                    <template #body="slotProps">
+                      팀 {{ slotProps.data.teamNumber }}
+                      <span v-if="slotProps.data.handicap" class="team-hc-small">
+                        팀 핸디캡: {{ slotProps.data.handicap ?? 0 }}
+                      </span>
+                    </template>
+                  </Column>
+                  <Column v-for="n in event.gameCount" :key="n" :header="n + 'G'">
+                    <template #body="slotProps">
+                      <span class="score-main">{{ getTeamTotalScore(slotProps.data, n) }}</span>
+                      <span class="block rank-badge"
+                        v-if="getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + ''] !== undefined"
+                        :class="'rank-badge rank-' + getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + '']">
+                        ({{ getRanksByGame(n)[(slotProps.data.id || slotProps.data.teamNumber) + ''] }}위)
+                      </span>
+                    </template>
+                  </Column>
+                  <Column header="총점">
+                    <template #body="slotProps">
+                      {{Array.from({ length: event.gameCount }, (_, i) => getTeamTotalScore(slotProps.data, i +
+                        1)).reduce((a, b) => a + b, 0) }}
+                      <span class="block rank-badge" :class="'rank-' + getTeamOverallRank(slotProps.data)">
+                        ({{ getTeamOverallRank(slotProps.data) }}위)
+                      </span>
+                    </template>
+                  </Column>
+                </DataTable>
+              </div>
+              <div v-for="team in getAllTeamsWithUnassigned()" :key="team.id">
+                <MemberListCard
+                  :title="parseInt(team.teamNumber) ? '팀 ' + team.teamNumber : '미배정 인원'"
+                  :members="team.members"
+                  :teamHandicap="team.handicap"
+                  :teamNumber="team.teamNumber"
+                  :gameCount="event.gameCount"
+                  :canInputScore="canInputScore"
+                  :scoresProxy="scoresProxy"
+                  :scoreStates="scoreStates"
+                  :onScoreInput="onScoreInput"
+                  :onScoreBlur="onScoreBlur"
+                  :onScoreEnter="onScoreEnter"
+                  :getMemberTotalScore="getMemberTotalScore"
+                  :getMemberAverageScore="getMemberAverageScore"
+                  :scoreColorClass="scoreColorClass"
+                />
+                <!-- 팀 카드 요약(총점/등수/게임별 점수)은 '팀'만 노출 -->
+                <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"
+                      :style="{ gridTemplateColumns: `repeat(${event.gameCount > 3 ? 3 : event.gameCount}, 1fr)` }">
+                      <template v-for="n in event.gameCount" :key="n">
+                        <div class="team-game-cell">
+                          <b>{{ n }}G:</b> {{ getTeamTotalScore(team, n) }}
+                          <span v-if="getRanksByGame(n)[(team.id || team.teamNumber) + ''] !== undefined"
+                            class="rank-badge"
+                            :class="'rank-' + getRanksByGame(n)[(team.id || team.teamNumber) + '']">
+                            ({{ getRanksByGame(n)[(team.id || team.teamNumber) + ''] }}위)
                           </span>
                         </div>
-                        <div class="member-meta">핸디캡: {{ member.handicap ?? '-' }} / 에버리지: {{ member.average ?? '-' }}
-                        </div>
-                        <div class="member-meta">{{ member.comment }}</div>
-                      </div>
-                      <div class="score-inputs-vertical">
-                        <template v-for="n in event.gameCount" :key="n">
-                          <div class="score-input-hc-wrap">
-                            <div class="score-input-status-wrap">
-  <InputText
-    v-if="canInputScore"
-    v-model.number="scoresProxy[member.participantId + '-' + n]"
-    type="number"
-    class="score-input"
-    :placeholder="n + 'G'"
-    maxlength="3"
-    @input="onScoreInput(member, n, team.teamNumber)"
-    @blur="onScoreBlur(member, n, team.teamNumber)"
-    @keydown.enter="onScoreEnter(member, n, team.teamNumber)"
-  />
-  <span v-else>{{ member.scores?.[n - 1] ?? '-' }}</span>
-  <span :class="scoreColorClass(scoreStates[member.participantId + '-' + n], scoresProxy[member.participantId + '-' + n], member.handicap)"
-        class="score-hc-value score-status-text"
-        :key="scoreStates[member.participantId + '-' + n] + '-' + scoresProxy[member.participantId + '-' + n]">
-    {{ (scoresProxy[member.participantId + '-' + n] !== undefined && scoresProxy[member.participantId + '-' + n] !== '') ?
-      Number(scoresProxy[member.participantId + '-' + n]) + (Number(member.handicap) || 0) : ''
-    }}
-    <i v-if="scoreStates[member.participantId + '-' + n] === 'saving'" class="pi pi-spin pi-spinner score-status-icon" />
-    <i v-else-if="scoreStates[member.participantId + '-' + n] === 'saved'" class="pi pi-check score-status-icon" />
-    <i v-else-if="scoreStates[member.participantId + '-' + n] === 'error'" class="pi pi-times score-status-icon" />
-  </span>
-</div>
-                          </div>
-                        </template>
-                        <div class="member-score-summary">
-                          <span>총점: {{ getMemberTotalScore(member) }}</span>
-                          <span class="member-score-avg">/ 에버리지: {{ getMemberAverageScore(member) }}</span>
-                        </div>
-                      </div>
+                      </template>
+                    </div>
+                    <div class="team-total-main">
+                      <span class="team-total-label">총점</span>
+                      <span class="team-total-scores">{{ Array.from({ length: event.gameCount }, (_, i) => getTeamTotalScore(team, i + 1)).reduce((a, b) => a + b, 0) }}</span>
+                      <span v-if="getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' })"
+                        class="rank-badge"
+                        :class="'rank-' + getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' })">
+                        {{ getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' }) }}위
+                      </span>
                     </div>
                   </div>
-                  <Divider />
-                  <div class="team-game-scores">
-                    <div class="team-total-row team-total-row-responsive team-total-row-block">
-                      <div class="team-games-grid"
-                        :style="{ gridTemplateColumns: `repeat(${event.gameCount > 3 ? 3 : event.gameCount}, 1fr)` }">
-                        <template v-for="n in event.gameCount" :key="n">
-                          <div class="team-game-cell">
-                            <b>{{ n }}G:</b> {{ getTeamTotalScore(team, n) }}
-                            <span v-if="getRanksByGame(n)[(team.id || team.teamNumber) + ''] !== undefined"
-                              class="rank-badge"
-                              :class="'rank-' + getRanksByGame(n)[(team.id || team.teamNumber) + '']">
-                              ({{ getRanksByGame(n)[(team.id || team.teamNumber) + ''] }}위)
-                            </span>
-                          </div>
-                        </template>
-                      </div>
-                      <div class="team-total-main">
-                        <span class="team-total-label">총점</span>
-                        <span class="team-total-scores">{{Array.from({ length: event.gameCount }, (_, i) =>
-                          getTeamTotalScore(team, i + 1)).reduce((a, b) => a + b, 0)}}</span>
-                        <span v-if="getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' })"
-                          class="rank-badge"
-                          :class="'rank-' + getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' })">
-                          {{ getTeamOverallRank({ ...team, id: (team.id || team.teamNumber) + '' }) }}위
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </Card>
-            </div>
-            <JoinDialog v-if="showJoinDialog && canJoin" v-model:visible="showJoinDialog" :publicHash="publicHash"
-              :password="needPassword ? inputPassword : ''" :participants="participants"
-              :availableMembers="availableMembers" :eventStatus="event.status"
-              @close="showJoinDialog = false" @updated="reload" />
-            <GuestDialog v-if="showGuestDialog && canAddGuest" v-model:visible="showGuestDialog" :publicHash="publicHash"
-              :password="needPassword ? inputPassword : ''" @close="showGuestDialog = false" @updated="reload" />
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <MemberListCard
+                title="참가자"
+                :members="sortedParticipants"
+                :gameCount="event.gameCount"
+                :canInputScore="canInputScore"
+                :scoresProxy="scoresProxy"
+                :scoreStates="scoreStates"
+                :onScoreInput="onScoreInput"
+                :onScoreBlur="onScoreBlur"
+                :onScoreEnter="onScoreEnter"
+                :getMemberTotalScore="getMemberTotalScore"
+                :getMemberAverageScore="getMemberAverageScore"
+                :scoreColorClass="scoreColorClass"
+              />
+            </template>
           </div>
         </div>
-      </template>
-    </Card>
+      </div>
+    </div>
+    <JoinDialog v-if="showJoinDialog && canJoin" v-model:visible="showJoinDialog" :publicHash="publicHash"
+              :participants="participants"
+              :availableMembers="availableMembers" :eventStatus="event.status"
+              @close="showJoinDialog = false" @updated="reload" />
   </div>
 </template>
 
@@ -206,7 +166,8 @@
 import { ref, computed, watch, reactive, onMounted } from 'vue';
 import { debounce } from 'lodash-es'; // lodash 설치 필요 (이미 있다면 무시)
 import { useRoute } from 'vue-router';
-import JoinDialog from './JoinDialog.vue';
+import MemberListCard from '@/components/public/MemberListCard.vue';
+import JoinDialog from '@/components/public/JoinDialog.vue';
 import dayjs from 'dayjs';
 import PublicEventService from '@/services/PublicEventService';
 
@@ -223,7 +184,6 @@ const isAuthenticated = ref(false);
 const inputPassword = ref('');
 const passwordError = ref('');
 const showJoinDialog = ref(false);
-const showGuestDialog = ref(false);
 
 const allMembers = ref([]); // 전체 클럽 멤버 목록
 const availableMembers = ref([]); // 참가 신청 가능 명단