refine(board): 목록 추천 열·상세 추천수·추천자 인라인·아바타 축소

- 목록: 제목 옆 추천 표시 제거 → 작성일 옆 추천 열로 표기(모바일도 라벨)
- 상세: 메타에 조회수 옆 추천수 표기
- 추천자: 클릭 시 모달 대신 하단에 아바타+이름 목록 펼침(토글)
- 아바타 크기를 본문 폰트 크기에 맞춰 16px 로 축소(목록/상세/댓글/추천자)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/board/BoardDetailView.vue

@@ -141,9 +141,6 @@ const recommenders = computed(() => post.value?.recommenders || [])
 const previewRecommenders = computed(() => recommenders.value.slice(0, 10))
 const extraRecommenders = computed(() => Math.max(0, (post.value?.upCount || 0) - 10))
 const showRecommenders = ref(false)
-function openRecommenders() {
-  if (post.value?.upCount) showRecommenders.value = true
-}
 
 onMounted(load)
 </script>
@@ -161,11 +158,12 @@ onMounted(load)
             :name="post.authorName"
             :google-picture="post.authorGooglePicture"
             :profile-image="post.authorProfileImage"
-            :size="26"
+            :size="16"
           />
           <span class="meta-author">{{ post.authorName }}</span>
           <span>· {{ formatRelative(post.createdAt) }}</span>
           <span>· 조회 {{ post.viewCount }}</span>
+          <span>· 추천 {{ post.upCount || 0 }}</span>
         </div>
       </header>
 
@@ -194,23 +192,37 @@ onMounted(load)
         >👎 비추천 <b>{{ post.downCount || 0 }}</b></button>
       </div>
 
-      <!-- 추천자 (아바타 최대 10개 + 초과 안내, 클릭 시 전체 목록) -->
-      <div v-if="!restricted && post.upCount" class="recommenders" @click="openRecommenders">
-        <div class="rec-avatars">
+      <!-- 추천자 (아바타 최대 10개 + 초과 안내, 클릭 시 하단에 전체 목록 펼침) -->
+      <div v-if="!restricted && post.upCount" class="recommenders-wrap">
+        <button type="button" class="recommenders" @click="showRecommenders = !showRecommenders">
+          <span class="rec-avatars">
             <UserAvatar
               v-for="r in previewRecommenders"
               :key="r.memberId"
               :name="r.name"
               :google-picture="r.googlePicture"
               :profile-image="r.profileImage"
-            :size="28"
+              :size="16"
               class="rec-avatar"
             />
-        </div>
+          </span>
           <span class="rec-label">
             <template v-if="extraRecommenders > 0">+{{ extraRecommenders }}명이 추천했습니다</template>
             <template v-else>{{ post.upCount }}명이 추천했습니다</template>
           </span>
+          <span class="rec-toggle">{{ showRecommenders ? '▲' : '▼' }}</span>
+        </button>
+        <ul v-if="showRecommenders" class="rec-inline-list">
+          <li v-for="r in recommenders" :key="r.memberId">
+            <UserAvatar
+              :name="r.name"
+              :google-picture="r.googlePicture"
+              :profile-image="r.profileImage"
+              :size="16"
+            />
+            <span class="rec-name">{{ r.name }}</span>
+          </li>
+        </ul>
       </div>
 
       <!-- 태그 (본문 아래) -->
@@ -243,7 +255,7 @@ onMounted(load)
                 :name="c.authorName"
                 :google-picture="c.authorGooglePicture"
                 :profile-image="c.authorProfileImage"
-                :size="24"
+                :size="16"
               />
               <strong>{{ c.authorName }}</strong>
               <span class="comment-date">{{ formatRelative(c.createdAt) }}</span>
@@ -279,29 +291,6 @@ onMounted(load)
         </form>
       </section>
     </article>
-
-    <!-- 추천자 전체 목록 (아바타 + 이름) -->
-    <Teleport to="body">
-      <div v-if="showRecommenders" class="rec-modal-backdrop" @click.self="showRecommenders = false">
-        <div class="rec-modal" role="dialog" aria-modal="true" aria-label="추천한 사람">
-          <div class="rec-modal-head">
-            <strong>추천한 사람 {{ post?.upCount || 0 }}명</strong>
-            <IconBtn icon="close" title="닫기" size="sm" @click="showRecommenders = false" />
-          </div>
-          <ul class="rec-modal-list">
-            <li v-for="r in recommenders" :key="r.memberId">
-              <UserAvatar
-                :name="r.name"
-                :google-picture="r.googlePicture"
-                :profile-image="r.profileImage"
-                :size="32"
-              />
-              <span class="rec-name">{{ r.name }}</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </Teleport>
   </section>
 </template>
 
@@ -362,26 +351,30 @@ h1 {
   background: rgba(230, 126, 34, 0.08);
 }
 /* 추천자 */
+.recommenders-wrap {
+  margin-bottom: 0.75rem;
+}
 .recommenders {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   flex-wrap: wrap;
+  width: 100%;
   padding: 0.6rem 0.8rem;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   background: var(--color-background-soft);
   cursor: pointer;
-  margin-bottom: 0.5rem;
+  text-align: left;
 }
 .recommenders:hover {
   background: var(--color-background-mute);
 }
 .rec-avatars {
-  display: flex;
+  display: inline-flex;
 }
 .rec-avatar {
-  margin-left: -6px;
+  margin-left: -4px;
   box-shadow: 0 0 0 2px var(--color-background-soft);
 }
 .rec-avatar:first-child {
@@ -392,6 +385,30 @@ h1 {
   color: var(--color-text);
   opacity: 0.85;
 }
+.rec-toggle {
+  margin-left: auto;
+  font-size: 0.7rem;
+  opacity: 0.6;
+}
+.rec-inline-list {
+  list-style: none;
+  margin: 0.4rem 0 0;
+  padding: 0.3rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+.rec-inline-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.4rem;
+}
+.rec-name {
+  font-size: 0.9rem;
+}
 .tags {
   display: flex;
   gap: 0.4rem;
@@ -520,50 +537,6 @@ button.notice-btn {
   border-color: #e67e22;
   color: #e67e22;
 }
-/* 추천자 모달 */
-.rec-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-.rec-modal {
-  width: 100%;
-  max-width: 360px;
-  max-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  overflow: hidden;
-}
-.rec-modal-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.85rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-}
-.rec-modal-list {
-  list-style: none;
-  margin: 0;
-  padding: 0.5rem 0;
-  overflow-y: auto;
-}
-.rec-modal-list li {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.5rem 1rem;
-}
-.rec-name {
-  font-size: 0.95rem;
-}
 .comment-form {
   margin-top: 1rem;
 }

src/views/board/BoardListView.vue

@@ -157,6 +157,7 @@ onMounted(loadTags)
           <th>제목</th>
           <th class="col-author">작성자</th>
           <th class="col-num">조회</th>
+          <th class="col-recommend">추천</th>
           <th class="col-date">작성일</th>
         </tr>
       </thead>
@@ -171,7 +172,6 @@ onMounted(loadTags)
               <span class="title">{{ p.title }}</span>
               <span v-if="p.blocked" class="blocked-badge">제한</span>
               <span v-if="p.commentCount" class="comment-count">[{{ p.commentCount }}]</span>
-              <span v-if="p.upCount" class="recommend-count">👍 {{ p.upCount }}</span>
             </template>
           </td>
           <td class="col-author">
@@ -180,12 +180,13 @@ onMounted(loadTags)
                 :name="p.authorName"
                 :google-picture="p.authorGooglePicture"
                 :profile-image="p.authorProfileImage"
-                :size="22"
+                :size="16"
               />
               <span class="author-name">{{ p.authorName }}</span>
             </span>
           </td>
           <td class="col-num">{{ p.viewCount }}</td>
+          <td class="col-recommend">{{ p.upCount || 0 }}</td>
           <td class="col-date">{{ formatRelative(p.createdAt) }}</td>
         </tr>
       </tbody>
@@ -318,6 +319,10 @@ button:disabled {
   width: 60px;
   text-align: center;
 }
+.col-recommend {
+  width: 56px;
+  text-align: center;
+}
 .col-author {
   width: 130px;
 }
@@ -341,12 +346,6 @@ button:disabled {
   color: hsla(160, 100%, 37%, 1);
   font-size: 0.85rem;
 }
-.recommend-count {
-  margin-left: 0.35rem;
-  color: var(--color-text);
-  opacity: 0.7;
-  font-size: 0.82rem;
-}
 .blocked-msg {
   color: #c0392b;
   font-size: 0.9rem;
@@ -517,9 +516,15 @@ button:disabled {
   .post-table .col-num::before {
     content: '· 조회 ';
   }
-  .post-table .col-date {
+  .post-table .col-recommend {
     order: 4;
   }
+  .post-table .col-recommend::before {
+    content: '· 추천 ';
+  }
+  .post-table .col-date {
+    order: 5;
+  }
   .post-table .col-date::before {
     content: '· ';
   }