From 1636c35aef80ea38a5145c1ec45852252e1dcf14 Mon Sep 17 00:00:00 2001 From: ByungCheol Date: Sun, 28 Jun 2026 12:45:27 +0900 Subject: [PATCH] =?UTF-8?q?refine(board):=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94?= =?UTF-8?q?=EC=B2=9C=20=EC=97=B4=C2=B7=EC=83=81=EC=84=B8=20=EC=B6=94?= =?UTF-8?q?=EC=B2=9C=EC=88=98=C2=B7=EC=B6=94=EC=B2=9C=EC=9E=90=20=EC=9D=B8?= =?UTF-8?q?=EB=9D=BC=EC=9D=B8=C2=B7=EC=95=84=EB=B0=94=ED=83=80=20=EC=B6=95?= =?UTF-8?q?=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 목록: 제목 옆 추천 표시 제거 → 작성일 옆 추천 열로 표기(모바일도 라벨) - 상세: 메타에 조회수 옆 추천수 표기 - 추천자: 클릭 시 모달 대신 하단에 아바타+이름 목록 펼침(토글) - 아바타 크기를 본문 폰트 크기에 맞춰 16px 로 축소(목록/상세/댓글/추천자) Co-Authored-By: Claude Opus 4.8 --- src/views/board/BoardDetailView.vue | 157 ++++++++++++---------------- src/views/board/BoardListView.vue | 23 ++-- 2 files changed, 79 insertions(+), 101 deletions(-) diff --git a/src/views/board/BoardDetailView.vue b/src/views/board/BoardDetailView.vue index add9e29..f895afb 100644 --- a/src/views/board/BoardDetailView.vue +++ b/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) @@ -161,11 +158,12 @@ onMounted(load) :name="post.authorName" :google-picture="post.authorGooglePicture" :profile-image="post.authorProfileImage" - :size="26" + :size="16" /> {{ post.authorName }} · {{ formatRelative(post.createdAt) }} · 조회 {{ post.viewCount }} + · 추천 {{ post.upCount || 0 }} @@ -194,23 +192,37 @@ onMounted(load) >👎 비추천 {{ post.downCount || 0 }} - -
-
- -
- - - - + +
+ +
    +
  • + + {{ r.name }} +
    • +
@@ -243,7 +255,7 @@ onMounted(load) :name="c.authorName" :google-picture="c.authorGooglePicture" :profile-image="c.authorProfileImage" - :size="24" + :size="16" /> {{ c.authorName }} {{ formatRelative(c.createdAt) }} @@ -279,29 +291,6 @@ onMounted(load) - - - -
- -
- @@ -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; } diff --git a/src/views/board/BoardListView.vue b/src/views/board/BoardListView.vue index 366b979..f574126 100644 --- a/src/views/board/BoardListView.vue +++ b/src/views/board/BoardListView.vue @@ -157,6 +157,7 @@ onMounted(loadTags) 제목 작성자 조회 + 추천 작성일 @@ -171,7 +172,6 @@ onMounted(loadTags) {{ p.title }} 제한 [{{ p.commentCount }}] - 👍 {{ p.upCount }} @@ -180,12 +180,13 @@ onMounted(loadTags) :name="p.authorName" :google-picture="p.authorGooglePicture" :profile-image="p.authorProfileImage" - :size="22" + :size="16" /> {{ p.authorName }} {{ p.viewCount }} + {{ p.upCount || 0 }} {{ formatRelative(p.createdAt) }} @@ -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: '· '; }