댓글 시스템 복구
This commit is contained in:
530
frontend/src/components/TierListCommentsCard.vue
Normal file
530
frontend/src/components/TierListCommentsCard.vue
Normal file
@@ -0,0 +1,530 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { api } from '../lib/api'
|
||||
import { displayInitialFrom } from '../lib/display'
|
||||
import { loginPath } from '../lib/paths'
|
||||
import { toApiUrl } from '../lib/runtime'
|
||||
|
||||
const props = defineProps({
|
||||
tierListId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
canWrite: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentUserId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '댓글',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요.',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const comments = ref([])
|
||||
const isLoading = ref(false)
|
||||
const error = ref('')
|
||||
const commentDraft = ref('')
|
||||
const replyDrafts = ref({})
|
||||
const openedReplyComposerId = ref('')
|
||||
const submittingTargetId = ref('')
|
||||
const deletingCommentId = ref('')
|
||||
let activeCommentRetryTimer = 0
|
||||
|
||||
const totalCommentCount = computed(() =>
|
||||
comments.value.reduce((count, comment) => count + 1 + (comment.replies?.length || 0), 0)
|
||||
)
|
||||
const loginTarget = computed(() => loginPath(route.fullPath))
|
||||
const highlightedCommentId = computed(() =>
|
||||
typeof route.query.commentId === 'string' ? route.query.commentId.trim() : ''
|
||||
)
|
||||
|
||||
function avatarUrlOf(user) {
|
||||
return user?.authorAvatarSrc ? toApiUrl(user.authorAvatarSrc) : ''
|
||||
}
|
||||
|
||||
function avatarFallbackOf(user) {
|
||||
return displayInitialFrom(user?.authorName, user?.authorAccountName, '?')
|
||||
}
|
||||
|
||||
function displayNameOf(user) {
|
||||
return user?.authorName || '알 수 없음'
|
||||
}
|
||||
|
||||
function formatDate(ts) {
|
||||
return new Date(Number(ts || 0)).toLocaleString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function isOwnComment(comment) {
|
||||
return !!props.currentUserId && props.currentUserId === comment?.authorId
|
||||
}
|
||||
|
||||
function isHighlighted(commentId) {
|
||||
return !!commentId && highlightedCommentId.value === commentId
|
||||
}
|
||||
|
||||
function clearActiveCommentRetry() {
|
||||
if (typeof window === 'undefined' || !activeCommentRetryTimer) return
|
||||
window.clearTimeout(activeCommentRetryTimer)
|
||||
activeCommentRetryTimer = 0
|
||||
}
|
||||
|
||||
async function scrollToHighlightedComment(attempt = 0) {
|
||||
clearActiveCommentRetry()
|
||||
if (!highlightedCommentId.value || typeof document === 'undefined') return
|
||||
await nextTick()
|
||||
const target = document.querySelector(`[data-comment-id="${highlightedCommentId.value}"]`)
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: attempt === 0 ? 'auto' : 'smooth', block: 'center' })
|
||||
return
|
||||
}
|
||||
if (attempt >= 6 || typeof window === 'undefined') return
|
||||
activeCommentRetryTimer = window.setTimeout(() => {
|
||||
scrollToHighlightedComment(attempt + 1)
|
||||
}, 180)
|
||||
}
|
||||
|
||||
async function loadComments() {
|
||||
if (!props.tierListId) {
|
||||
comments.value = []
|
||||
return
|
||||
}
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const data = await api.listTierListComments(props.tierListId)
|
||||
comments.value = Array.isArray(data.comments) ? data.comments : []
|
||||
scrollToHighlightedComment()
|
||||
} catch (loadError) {
|
||||
error.value = '댓글을 불러오지 못했어요.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitComment(parentCommentId = '') {
|
||||
if (!props.canWrite || !props.tierListId) return
|
||||
const isReply = !!parentCommentId
|
||||
const draftValue = isReply ? replyDrafts.value[parentCommentId] || '' : commentDraft.value
|
||||
const content = String(draftValue || '').trim()
|
||||
if (!content) return
|
||||
|
||||
submittingTargetId.value = parentCommentId || 'root'
|
||||
error.value = ''
|
||||
try {
|
||||
const data = await api.createTierListComment(props.tierListId, {
|
||||
content,
|
||||
parentCommentId,
|
||||
})
|
||||
comments.value = Array.isArray(data.comments) ? data.comments : []
|
||||
if (isReply) {
|
||||
replyDrafts.value = { ...replyDrafts.value, [parentCommentId]: '' }
|
||||
openedReplyComposerId.value = ''
|
||||
} else {
|
||||
commentDraft.value = ''
|
||||
}
|
||||
await nextTick()
|
||||
if (data.createdCommentId && typeof window !== 'undefined') {
|
||||
const target = document.querySelector(`[data-comment-id="${data.createdCommentId}"]`)
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
} catch (submitError) {
|
||||
const code = submitError?.data?.error
|
||||
if (code === 'comment_reply_depth_invalid') {
|
||||
error.value = '답글에는 다시 답글을 달 수 없어요.'
|
||||
} else {
|
||||
error.value = '댓글을 저장하지 못했어요.'
|
||||
}
|
||||
} finally {
|
||||
submittingTargetId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteComment(commentId) {
|
||||
if (!commentId || !props.tierListId) return
|
||||
deletingCommentId.value = commentId
|
||||
error.value = ''
|
||||
try {
|
||||
const data = await api.deleteTierListComment(props.tierListId, commentId)
|
||||
comments.value = Array.isArray(data.comments) ? data.comments : []
|
||||
} catch (deleteError) {
|
||||
error.value = '댓글을 삭제하지 못했어요.'
|
||||
} finally {
|
||||
deletingCommentId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function toggleReplyComposer(commentId) {
|
||||
openedReplyComposerId.value = openedReplyComposerId.value === commentId ? '' : commentId
|
||||
}
|
||||
|
||||
watch(() => props.tierListId, loadComments, { immediate: true })
|
||||
watch(highlightedCommentId, () => {
|
||||
scrollToHighlightedComment()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearActiveCommentRetry()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="commentsCard">
|
||||
<header class="commentsCard__head">
|
||||
<div>
|
||||
<div class="commentsCard__eyebrow">Comments</div>
|
||||
<h3 class="commentsCard__title">{{ title }}</h3>
|
||||
<p class="commentsCard__desc">{{ description }}</p>
|
||||
</div>
|
||||
<div class="commentsCard__count">{{ totalCommentCount }}개</div>
|
||||
</header>
|
||||
|
||||
<div v-if="error" class="commentsCard__error">{{ error }}</div>
|
||||
|
||||
<div v-if="props.canWrite" class="commentsComposer">
|
||||
<textarea
|
||||
v-model="commentDraft"
|
||||
class="commentsComposer__input"
|
||||
maxlength="2000"
|
||||
rows="3"
|
||||
placeholder="이 티어표에 대한 의견을 남겨보세요."
|
||||
/>
|
||||
<div class="commentsComposer__footer">
|
||||
<span class="commentsComposer__hint">{{ commentDraft.length }}/2000</span>
|
||||
<button class="btn btn--save btn--small" type="button" :disabled="!commentDraft.trim() || submittingTargetId === 'root'" @click="submitComment()">
|
||||
댓글 등록
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="commentsLoginCta">
|
||||
<div class="commentsLoginCta__text">로그인하면 댓글과 답글을 남길 수 있어요.</div>
|
||||
<RouterLink class="btn btn--ghost btn--small" :to="loginTarget">로그인</RouterLink>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="commentsCard__empty">댓글을 불러오는 중이에요.</div>
|
||||
<div v-else-if="comments.length === 0" class="commentsCard__empty">아직 댓글이 없어요. 첫 댓글을 남겨보세요.</div>
|
||||
|
||||
<div v-else class="commentsThread">
|
||||
<article
|
||||
v-for="comment in comments"
|
||||
:key="comment.id"
|
||||
class="commentItem"
|
||||
:class="{ 'commentItem--highlighted': isHighlighted(comment.id) }"
|
||||
:data-comment-id="comment.id"
|
||||
>
|
||||
<div class="commentItem__head">
|
||||
<div class="commentItem__author">
|
||||
<img v-if="avatarUrlOf(comment)" class="commentItem__avatar" :src="avatarUrlOf(comment)" :alt="displayNameOf(comment)" draggable="false" />
|
||||
<div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(comment) }}</div>
|
||||
<div class="commentItem__meta">
|
||||
<div class="commentItem__name">{{ displayNameOf(comment) }}</div>
|
||||
<div class="commentItem__date">{{ formatDate(comment.createdAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commentItem__actions">
|
||||
<button v-if="props.canWrite" class="commentItem__action" type="button" @click="toggleReplyComposer(comment.id)">답글</button>
|
||||
<button
|
||||
v-if="isOwnComment(comment)"
|
||||
class="commentItem__action commentItem__action--danger"
|
||||
type="button"
|
||||
:disabled="deletingCommentId === comment.id"
|
||||
@click="deleteComment(comment.id)"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commentItem__body">{{ comment.content }}</div>
|
||||
|
||||
<div v-if="openedReplyComposerId === comment.id && props.canWrite" class="replyComposer">
|
||||
<textarea
|
||||
v-model="replyDrafts[comment.id]"
|
||||
class="commentsComposer__input commentsComposer__input--reply"
|
||||
maxlength="2000"
|
||||
rows="2"
|
||||
placeholder="답글을 입력하세요."
|
||||
/>
|
||||
<div class="commentsComposer__footer">
|
||||
<span class="commentsComposer__hint">{{ (replyDrafts[comment.id] || '').length }}/2000</span>
|
||||
<button class="btn btn--save btn--small" type="button" :disabled="!(replyDrafts[comment.id] || '').trim() || submittingTargetId === comment.id" @click="submitComment(comment.id)">
|
||||
답글 등록
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="comment.replies?.length" class="replyList">
|
||||
<article
|
||||
v-for="reply in comment.replies"
|
||||
:key="reply.id"
|
||||
class="commentItem commentItem--reply"
|
||||
:class="{ 'commentItem--highlighted': isHighlighted(reply.id) }"
|
||||
:data-comment-id="reply.id"
|
||||
>
|
||||
<div class="commentItem__head">
|
||||
<div class="commentItem__author">
|
||||
<img v-if="avatarUrlOf(reply)" class="commentItem__avatar" :src="avatarUrlOf(reply)" :alt="displayNameOf(reply)" draggable="false" />
|
||||
<div v-else class="commentItem__avatar commentItem__avatar--fallback">{{ avatarFallbackOf(reply) }}</div>
|
||||
<div class="commentItem__meta">
|
||||
<div class="commentItem__name">{{ displayNameOf(reply) }}</div>
|
||||
<div class="commentItem__date">{{ formatDate(reply.createdAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commentItem__actions">
|
||||
<button
|
||||
v-if="isOwnComment(reply)"
|
||||
class="commentItem__action commentItem__action--danger"
|
||||
type="button"
|
||||
:disabled="deletingCommentId === reply.id"
|
||||
@click="deleteComment(reply.id)"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commentItem__body">{{ reply.content }}</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.commentsCard {
|
||||
margin-top: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 28px;
|
||||
border: 1px solid var(--theme-card-border);
|
||||
background: var(--theme-card-bg);
|
||||
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
|
||||
}
|
||||
|
||||
.commentsCard__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.commentsCard__eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-text-faint);
|
||||
}
|
||||
|
||||
.commentsCard__title {
|
||||
margin: 6px 0 8px;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.commentsCard__desc {
|
||||
margin: 0;
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
|
||||
.commentsCard__count {
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--theme-surface-soft);
|
||||
color: var(--theme-text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.commentsCard__error {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--theme-danger-border);
|
||||
background: var(--theme-danger-bg);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.commentsComposer,
|
||||
.commentsLoginCta,
|
||||
.commentItem,
|
||||
.commentItem--reply {
|
||||
border: 1px solid var(--theme-card-border);
|
||||
background: var(--theme-surface);
|
||||
}
|
||||
|
||||
.commentsComposer,
|
||||
.commentsLoginCta {
|
||||
margin-bottom: 18px;
|
||||
padding: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.commentsComposer__input {
|
||||
width: 100%;
|
||||
min-height: 92px;
|
||||
resize: vertical;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--theme-field-border);
|
||||
background: var(--theme-input-bg);
|
||||
color: var(--theme-text);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.commentsComposer__input--reply {
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.commentsComposer__footer,
|
||||
.commentsLoginCta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.commentsComposer__footer {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.commentsComposer__hint,
|
||||
.commentsLoginCta__text {
|
||||
color: var(--theme-text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.commentsCard__empty {
|
||||
padding: 20px 0;
|
||||
color: var(--theme-text-muted);
|
||||
}
|
||||
|
||||
.commentsThread {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.commentItem {
|
||||
padding: 16px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.commentItem--reply {
|
||||
margin-top: 12px;
|
||||
margin-left: 24px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.commentItem--highlighted {
|
||||
border-color: color-mix(in srgb, var(--theme-accent) 65%, var(--theme-card-border));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 38%, transparent);
|
||||
}
|
||||
|
||||
.commentItem__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.commentItem__author {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.commentItem__avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 999px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--theme-avatar-border);
|
||||
background: var(--theme-border);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.commentItem__avatar--fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.commentItem__meta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.commentItem__name {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.commentItem__date {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--theme-text-faint);
|
||||
}
|
||||
|
||||
.commentItem__actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.commentItem__action {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--theme-text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.commentItem__action--danger {
|
||||
color: var(--theme-danger-text, #ff8f8f);
|
||||
}
|
||||
|
||||
.commentItem__body {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.replyComposer {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.commentsCard {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.commentsCard__head,
|
||||
.commentsComposer__footer,
|
||||
.commentsLoginCta,
|
||||
.commentItem__head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.commentItem--reply {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user