zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

댓글 정렬과 뷰어 레일 정리

Browse Source
This commit is contained in:
zenn
2026-04-07 14:00:29 +09:00
parent 9f143d4a89
commit 09b9036bbe
9 changed files with 76 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.vue
View File

@@ -2004,6 +2004,8 @@ function reloadApp() {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 14px;
}

155
frontend/src/components/TierListCommentsCard.vue
View File

@@ -212,7 +212,7 @@ onBeforeUnmount(() => {
<template>
<section class="commentsCard">
<header class="commentsCard__head">
<div>
<div class="commentsCard__headline">
<div class="commentsCard__eyebrow">Comments</div>
<h3 class="commentsCard__title">{{ title }}</h3>
<p class="commentsCard__desc">{{ description }}</p>
@@ -232,14 +232,14 @@ onBeforeUnmount(() => {
/>
<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 class="btn btn--save commentsComposer__submit" 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>
<RouterLink class="btn btn--ghost commentsComposer__submit" :to="loginTarget">로그인</RouterLink>
</div>
<div v-if="isLoading" class="commentsCard__empty">댓글을 불러오는 중이에요.</div>
@@ -258,10 +258,7 @@ onBeforeUnmount(() => {
<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__metaTop">
<div class="commentItem__name">{{ displayNameOf(comment) }}</div>
<span class="commentItem__badge">댓글</span>
</div>
<div class="commentItem__name">{{ displayNameOf(comment) }}</div>
<div class="commentItem__date">{{ formatDate(comment.createdAt) }}</div>
</div>
</div>
@@ -310,10 +307,7 @@ onBeforeUnmount(() => {
<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__metaTop">
<div class="commentItem__name">{{ displayNameOf(reply) }}</div>
<span class="commentItem__badge commentItem__badge--reply">답글</span>
</div>
<div class="commentItem__name">{{ displayNameOf(reply) }}</div>
<div class="commentItem__date">{{ formatDate(reply.createdAt) }}</div>
</div>
</div>
@@ -340,18 +334,22 @@ onBeforeUnmount(() => {
<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);
padding: 18px;
border-radius: 22px;
border: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
}
.commentsCard__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
margin-bottom: 16px;
}
.commentsCard__headline {
min-width: 0;
}
.commentsCard__eyebrow {
@@ -366,6 +364,7 @@ onBeforeUnmount(() => {
margin: 6px 0 8px;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.04em;
}
.commentsCard__desc {
@@ -377,9 +376,9 @@ onBeforeUnmount(() => {
.commentsCard__count {
flex: 0 0 auto;
align-self: flex-start;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: var(--theme-text-muted);
font-size: 13px;
@@ -398,10 +397,9 @@ onBeforeUnmount(() => {
.commentsComposer,
.commentsLoginCta {
margin-bottom: 18px;
padding: 16px;
border-radius: 22px;
background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-surface-soft));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
padding: 14px;
border-radius: 18px;
background: var(--theme-surface-soft);
}
.commentsComposer__input {
@@ -409,27 +407,22 @@ onBeforeUnmount(() => {
min-height: 92px;
resize: vertical;
padding: 14px 16px;
border-radius: 18px;
border: 0;
border-radius: 16px;
border: 1px solid var(--theme-border);
background: var(--theme-input-bg);
color: var(--theme-text);
box-sizing: border-box;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--theme-field-border) 38%, transparent),
0 10px 24px rgba(0, 0, 0, 0.05);
}
.commentsComposer__input--reply {
min-height: 72px;
background: color-mix(in srgb, var(--theme-input-bg) 82%, var(--theme-surface-soft));
background: var(--theme-input-bg);
}
.commentsComposer__input:focus {
outline: none;
border-color: color-mix(in srgb, var(--theme-accent) 60%, var(--theme-field-border));
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 52%, transparent),
0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent);
}
.commentsComposer__footer,
@@ -457,51 +450,40 @@ onBeforeUnmount(() => {
.commentsThread {
display: grid;
gap: 16px;
gap: 12px;
}
.commentItem {
position: relative;
padding: 18px 18px 16px;
border-radius: 24px;
background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 88%, var(--theme-surface-soft)) 0%, var(--theme-surface) 100%);
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 6%, transparent),
0 14px 32px rgba(0, 0, 0, 0.08);
padding: 14px 0 0;
}
.commentItem--reply {
margin-top: 12px;
margin-left: 28px;
border-radius: 20px;
background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 6%, var(--theme-surface)) 0%, var(--theme-surface) 100%);
box-shadow:
inset 0 1px 0 color-mix(in srgb, white 4%, transparent),
0 10px 24px rgba(0, 0, 0, 0.06);
margin-top: 10px;
margin-left: 22px;
padding-top: 10px;
}
.commentItem--reply::before {
content: '';
position: absolute;
top: 22px;
left: -16px;
width: 12px;
height: calc(100% - 44px);
border-left: 2px solid color-mix(in srgb, var(--theme-accent) 36%, var(--theme-card-border));
border-bottom: 2px solid color-mix(in srgb, var(--theme-accent) 36%, var(--theme-card-border));
border-bottom-left-radius: 14px;
top: 0;
left: -12px;
width: 1px;
bottom: 0;
background: color-mix(in srgb, var(--theme-border) 82%, transparent);
}
.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);
border-radius: 18px;
background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
}
.commentItem__head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
margin-bottom: 8px;
}
.commentItem__author {
@@ -532,37 +514,11 @@ onBeforeUnmount(() => {
min-width: 0;
}
.commentItem__metaTop {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.commentItem__name {
font-size: 14px;
font-weight: 800;
}
.commentItem__badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--theme-surface-soft) 84%, transparent);
color: var(--theme-text-muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.commentItem__badge--reply {
background: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-surface-soft));
color: var(--theme-text);
}
.commentItem__date {
margin-top: 4px;
font-size: 12px;
@@ -591,10 +547,8 @@ onBeforeUnmount(() => {
.commentItem__body {
padding: 14px 15px;
border-radius: 18px;
background: color-mix(in srgb, var(--theme-input-bg) 82%, var(--theme-surface));
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--theme-card-border) 28%, transparent),
0 8px 18px rgba(0, 0, 0, 0.04);
border: 1px solid var(--theme-border);
background: var(--theme-surface);
white-space: pre-wrap;
word-break: break-word;
line-height: 1.6;
@@ -604,13 +558,12 @@ onBeforeUnmount(() => {
margin-top: 14px;
padding: 14px;
border-radius: 18px;
background: color-mix(in srgb, var(--theme-surface) 76%, var(--theme-surface-soft));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-card-border) 24%, transparent);
background: var(--theme-surface-soft);
}
.commentsComposer__submit {
min-width: 112px;
min-height: 42px;
min-height: 44px;
}
.btn {
@@ -618,35 +571,32 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 16px;
min-height: 44px;
padding: 12px 18px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
background: color-mix(in srgb, var(--theme-surface-soft) 88%, transparent);
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: var(--theme-text);
cursor: pointer;
font-size: 14px;
font-weight: 800;
transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
font-size: 15px;
font-weight: 700;
transition: background 160ms ease;
}
.btn:hover {
transform: translateY(-1px);
background: var(--theme-surface-soft-3);
}
.btn:disabled {
opacity: 0.58;
cursor: default;
transform: none;
}
.btn--save {
min-width: 112px;
font-weight: 900;
background: rgba(96, 165, 250, 0.22);
border-color: rgba(96, 165, 250, 0.36);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 18px rgba(59, 130, 246, 0.14);
}
.btn--save:hover {
@@ -659,7 +609,7 @@ onBeforeUnmount(() => {
@media (max-width: 860px) {
.commentsCard {
padding: 20px;
padding: 18px 16px;
}
.commentsCard__head,
@@ -675,8 +625,7 @@ onBeforeUnmount(() => {
}
.commentItem--reply::before {
left: -10px;
width: 8px;
left: -8px;
}
}
</style>

2
frontend/src/views/TierEditorView.vue
View File

@@ -2199,7 +2199,7 @@ onUnmounted(() => {
}
.viewerSidebar__section {
margin-top: auto;
margin-top: 0;
display: grid;
gap: 10px;
padding: 18px;