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-03 12:34:14 +09:00
parent 9847b4dd8f
commit f9767624d1
16 changed files with 1199 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
frontend/src/views/FollowingFeedView.vue Normal file
View File

@@ -0,0 +1,328 @@
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '../lib/api'
import { editorPath, loginPath, userProfilePath } from '../lib/paths'
import { toApiUrl } from '../lib/runtime'
import { useToast } from '../composables/useToast'
const router = useRouter()
const toast = useToast()
const tierLists = ref([])
const query = ref('')
const isLoading = ref(false)
const error = ref('')
const brokenThumbnailIds = ref({})
watch(error, (message) => {
if (!message) return
toast.error(message)
error.value = ''
})
function fmt(ts) {
return new Date(ts).toLocaleDateString(undefined, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
}
function displayNameOf(tierList) {
return tierList.authorName || '알 수 없음'
}
function avatarSrcOf(tierList) {
return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : ''
}
function avatarFallbackOf(tierList) {
return (tierList.authorAccountName || 'u').trim().charAt(0).toUpperCase() || '?'
}
function tierListThumbnailUrl(tierList) {
if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
}
function handleThumbnailError(tierListId) {
if (!tierListId || brokenThumbnailIds.value[tierListId]) return
brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
}
async function loadFollowingFeed() {
isLoading.value = true
try {
const data = await api.listFollowingFeed({ q: query.value })
brokenThumbnailIds.value = {}
tierLists.value = data.tierLists || []
} catch (e) {
toast.error('로그인이 필요해요.')
router.push(loginPath('/following'))
} finally {
isLoading.value = false
}
}
function openTierList(tierList) {
router.push(editorPath(tierList.topicId, tierList.id))
}
function openAuthorProfile(tierList) {
if (!tierList?.authorId) return
router.push(userProfilePath(tierList.authorId))
}
onMounted(loadFollowingFeed)
</script>
<template>
<section class="pageWrap">
<section class="pageHead">
<div class="pageHead__main">
<div class="pageHead__eyebrow">Following</div>
<h2 class="pageHead__title">팔로우 피드</h2>
<div class="pageHead__desc">팔로우한 작성자가 공개한 티어표를 최신 업데이트순으로 모아봅니다.</div>
</div>
<div class="pageHead__aside toolbar">
<input v-model="query" class="input" placeholder="제목, 주제, 작성자 검색" @keydown.enter.prevent="loadFollowingFeed" />
<button class="btn" :disabled="isLoading" @click="loadFollowingFeed">{{ isLoading ? '검색중...' : '검색' }}</button>
</div>
</section>
<section class="panel">
<div v-if="isLoading" class="empty">팔로우 피드를 불러오고 있어요.</div>
<div v-else-if="tierLists.length === 0" class="empty">아직 팔로우한 작성자의 공개 티어표가 없어요.</div>
<div v-else class="list">
<article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
<button class="boardCard__body" type="button" @click="openTierList(tierList)">
<div class="boardCard__thumbWrap">
<img
v-if="tierListThumbnailUrl(tierList)"
class="boardCard__thumb"
:src="tierListThumbnailUrl(tierList)"
:alt="tierList.title"
draggable="false"
@error="handleThumbnailError(tierList.id)"
/>
<div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
</div>
<div class="boardCard__head">
<div class="boardCard__titleRow">
<div class="boardCard__title">{{ tierList.title }}</div>
<div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
</div>
<div class="boardCard__topic">{{ tierList.topicName || tierList.topicId }}</div>
</div>
</button>
<button class="authorLink" type="button" @click="openAuthorProfile(tierList)">
<div class="authorLink__main">
<img
v-if="avatarSrcOf(tierList)"
class="boardCard__avatar"
:src="avatarSrcOf(tierList)"
:alt="displayNameOf(tierList)"
draggable="false"
/>
<div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
<span class="authorLink__name">{{ displayNameOf(tierList) }}</span>
</div>
<span class="authorLink__date">{{ fmt(tierList.updatedAt) }}</span>
</button>
</article>
</div>
</section>
</section>
</template>
<style scoped>
.panel {
background: transparent;
border-radius: 0;
padding: 0;
}
.toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.input {
min-width: 240px;
padding: 11px 13px;
border-radius: 14px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: var(--theme-text);
}
.btn {
padding: 11px 13px;
border-radius: 14px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft-2);
color: var(--theme-text);
font-weight: 800;
cursor: pointer;
}
.empty {
opacity: 0.75;
}
.list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.boardCard {
min-width: 0;
border-radius: 22px;
border: 1px solid var(--theme-card-border);
background: var(--theme-card-bg);
color: var(--theme-text);
overflow: hidden;
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
transition:
transform 0.16s ease,
background 0.16s ease;
}
.boardCard:hover {
background: var(--theme-card-bg-hover);
transform: translateY(-2px);
}
.boardCard__body {
width: 100%;
min-width: 0;
text-align: left;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
padding: 0;
display: grid;
}
.boardCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
padding: 14px 14px 0;
box-sizing: border-box;
}
.boardCard__thumb,
.boardCard__thumbPlaceholder {
width: 100%;
height: 100%;
border-radius: 18px;
display: block;
}
.boardCard__thumb {
object-fit: cover;
}
.boardCard__thumbPlaceholder {
display: grid;
place-items: center;
background: var(--theme-thumb-fallback-bg);
color: var(--theme-text-faint);
font-size: 13px;
font-weight: 700;
}
.boardCard__head {
min-width: 0;
padding: 16px 18px 0;
display: grid;
gap: 6px;
}
.boardCard__titleRow {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: flex-start;
}
.boardCard__title {
min-width: 0;
font-weight: 800;
font-size: 18px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.boardCard__topic,
.favoriteStat {
font-size: 13px;
color: var(--theme-text-faint);
}
.favoriteStat {
white-space: nowrap;
}
.authorLink {
width: calc(100% - 28px);
margin: 14px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: inherit;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.authorLink__main {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.authorLink__name {
min-width: 0;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.authorLink__date {
flex: 0 0 auto;
font-size: 10px;
color: var(--theme-text-faint);
}
.boardCard__avatar {
width: 22px;
height: 22px;
border-radius: 9999px;
object-fit: cover;
border: 1px solid var(--theme-avatar-border);
background: var(--theme-border);
flex: 0 0 auto;
}
.boardCard__avatar--fallback {
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
}
@media (max-width: 1400px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.list {
grid-template-columns: 1fr;
}
.input {
min-width: 0;
width: 100%;
}
}
</style>

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

@@ -10,7 +10,7 @@ import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
import shareIcon from '../assets/icons/share.svg'
import RightRailAd from '../components/RightRailAd.vue'
import { api } from '../lib/api'
import { editorNewPath, editorPath, loginPath, mePath, topicPath } from '../lib/paths'
import { editorNewPath, editorPath, loginPath, mePath, topicPath, userProfilePath } from '../lib/paths'
import { toApiUrl } from '../lib/runtime'
import { useAuthStore } from '../stores/auth'
import { useToast } from '../composables/useToast'
@@ -122,9 +122,11 @@ const untitledWarning = computed(
'제목 없이 저장된 티어표는 무분별한 도배 방지를 위해 관리자에 의해 임의 삭제될 수 있어요.'
)
const canFavorite = computed(() => !!auth.user && !isNewTierList.value && !canEdit.value)
const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value && !isOwnTierList.value)
const canDuplicate = computed(() => !!auth.user && hasSavedTierList.value)
const canSwitchToViewerMode = computed(() => isOwnTierList.value && hasSavedTierList.value && !previewMode.value)
const canSwitchToEditMode = computed(() => isOwnTierList.value && hasSavedTierList.value && previewMode.value)
const duplicateActionLabel = computed(() => (isOwnTierList.value ? '복사본 만들기' : '내 티어표로 복사'))
const canOpenAuthorProfile = computed(() => !!ownerId.value && hasSavedTierList.value)
const copiedFromLabel = computed(() => {
if (!sourceTierListId.value) return ''
const parts = []
@@ -940,6 +942,11 @@ function openSourceTierList() {
requestEditorNavigation(editorPath(templateId.value, sourceTierListId.value))
}
function openAuthorProfile() {
if (!canOpenAuthorProfile.value) return
router.push(userProfilePath(ownerId.value))
}
function closeSaveModal() {
isSaveModalOpen.value = false
}
@@ -998,6 +1005,9 @@ async function confirmDeleteTierList() {
async function duplicateCurrentTierList() {
if (!canDuplicate.value) return
try {
if (canEdit.value && hasUnsavedChanges.value) {
await persistTierList({ showModal: false })
}
const data = await api.duplicateTierList(tierListId.value)
const duplicatedId = data.tierList?.id
if (!duplicatedId) throw new Error('duplicate_failed')
@@ -1297,11 +1307,14 @@ onUnmounted(() => {
공유하기
</button>
<button v-if="canDuplicate" class="btn btn--save viewerSidebar__button" type="button" @click="duplicateCurrentTierList">
내 티어표로 복사
{{ duplicateActionLabel }}
</button>
<button v-if="canSwitchToEditMode" class="btn btn--save viewerSidebar__button" type="button" @click="openEditMode">
수정 모드로 전환
</button>
<button v-if="canOpenAuthorProfile" class="btn btn--ghost viewerSidebar__button" type="button" @click="openAuthorProfile">
작성자 프로필 보기
</button>
</div>
</div>
</template>
@@ -1730,8 +1743,9 @@ onUnmounted(() => {
<SvgIcon :src="shareIcon" :size="16" />
<span>공유하기</span>
</button>
<button v-if="canOpenAuthorProfile" class="editorSidebar__utilityLink" @click="openAuthorProfile">작성자 프로필 보기</button>
<button v-if="canEdit && hasSavedTierList" class="editorSidebar__utilityLink editorSidebar__utilityLink--danger" @click="openDeleteModal">삭제하기</button>
<button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">복사해서 내 티어표로 가져오기</button>
<button v-if="canDuplicate" class="editorSidebar__utilityLink" @click="duplicateCurrentTierList">{{ duplicateActionLabel }}</button>
<button
v-if="canRequestTemplateCreate"
class="editorSidebar__utilityLink"

471
frontend/src/views/UserProfileView.vue Normal file
View File

@@ -0,0 +1,471 @@
<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { api } from '../lib/api'
import { editorPath, followingFeedPath, loginPath } from '../lib/paths'
import { toApiUrl } from '../lib/runtime'
import { useAuthStore } from '../stores/auth'
import { useToast } from '../composables/useToast'
const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const toast = useToast()
const userId = computed(() => route.params.userId || '')
const profile = ref(null)
const tierLists = ref([])
const query = ref('')
const isLoading = ref(false)
const isFollowBusy = ref(false)
const error = ref('')
const brokenThumbnailIds = ref({})
const profileAvatarUrl = computed(() => (profile.value?.avatarSrc ? toApiUrl(profile.value.avatarSrc) : ''))
const profileDisplayName = computed(() => profile.value?.nickname || profile.value?.accountName || '알 수 없음')
const profileFallback = computed(() => (profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?')
const canFollow = computed(() => !!auth.user && !!profile.value && !profile.value.isSelf)
watch(error, (message) => {
if (!message) return
toast.error(message)
error.value = ''
})
function fmt(ts) {
return new Date(ts).toLocaleDateString(undefined, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
}
function displayNameOf(tierList) {
return tierList.authorName || profileDisplayName.value
}
function avatarSrcOf(tierList) {
return tierList.authorAvatarSrc ? toApiUrl(tierList.authorAvatarSrc) : profileAvatarUrl.value
}
function avatarFallbackOf(tierList) {
return (tierList.authorAccountName || profile.value?.accountName || 'u').trim().charAt(0).toUpperCase() || '?'
}
function tierListThumbnailUrl(tierList) {
if (!tierList?.id || brokenThumbnailIds.value[tierList.id]) return ''
return tierList.thumbnailSrc ? toApiUrl(tierList.thumbnailSrc) : ''
}
function handleThumbnailError(tierListId) {
if (!tierListId || brokenThumbnailIds.value[tierListId]) return
brokenThumbnailIds.value = { ...brokenThumbnailIds.value, [tierListId]: true }
}
async function loadProfile() {
isLoading.value = true
try {
if (!auth.hydrated) await auth.refresh()
const [profileRes, tierListsRes] = await Promise.all([
api.getUserProfile(userId.value),
api.listUserPublicTierLists(userId.value, { q: query.value }),
])
profile.value = profileRes.user || null
tierLists.value = tierListsRes.tierLists || []
brokenThumbnailIds.value = {}
} catch (e) {
error.value = '작성자 프로필을 불러오지 못했어요.'
profile.value = null
tierLists.value = []
} finally {
isLoading.value = false
}
}
async function toggleFollow() {
if (!canFollow.value || !profile.value?.id || isFollowBusy.value) return
try {
isFollowBusy.value = true
const data = profile.value.isFollowing
? await api.unfollowUser(profile.value.id)
: await api.followUser(profile.value.id)
profile.value = data.user || profile.value
toast.success(profile.value.isFollowing ? '팔로우했어요.' : '팔로우를 해제했어요.')
} catch (e) {
if (e?.status === 401) {
router.push(loginPath(route.fullPath))
return
}
error.value = '팔로우 상태를 변경하지 못했어요.'
} finally {
isFollowBusy.value = false
}
}
function openTierList(tierList) {
router.push(editorPath(tierList.topicId, tierList.id))
}
watch(userId, loadProfile, { immediate: true })
</script>
<template>
<section class="pageWrap">
<section class="pageHead">
<div class="pageHead__main">
<div class="pageHead__eyebrow">Author</div>
<h2 class="pageHead__title">{{ profileDisplayName }}</h2>
<div class="pageHead__desc">
{{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}
</div>
</div>
<div class="pageHead__aside profileActions">
<button v-if="canFollow" class="btn btn--primary" :disabled="isFollowBusy" type="button" @click="toggleFollow">
{{ profile?.isFollowing ? '팔로잉' : '팔로우' }}
</button>
<button v-if="auth.user" class="btn" type="button" @click="router.push(followingFeedPath())">팔로우 피드</button>
</div>
</section>
<section class="profileHero">
<div class="profileCard">
<img v-if="profileAvatarUrl" class="profileAvatar" :src="profileAvatarUrl" :alt="profileDisplayName" draggable="false" />
<div v-else class="profileAvatar profileAvatar--fallback">{{ profileFallback }}</div>
<div class="profileMeta">
<div class="profileMeta__name">{{ profileDisplayName }}</div>
<div class="profileMeta__handle">{{ profile?.accountName ? `@${profile.accountName}` : '작성자 프로필' }}</div>
</div>
</div>
<div class="profileStats">
<article class="profileStat">
<span class="profileStat__label">공개 티어표</span>
<strong class="profileStat__value">{{ profile?.publicTierListCount || 0 }}</strong>
</article>
<article class="profileStat">
<span class="profileStat__label">팔로워</span>
<strong class="profileStat__value">{{ profile?.followerCount || 0 }}</strong>
</article>
<article class="profileStat">
<span class="profileStat__label">팔로잉</span>
<strong class="profileStat__value">{{ profile?.followingCount || 0 }}</strong>
</article>
</div>
</section>
<section class="listToolbar">
<input v-model="query" class="input" placeholder="이 작성자의 공개 티어표 검색" @keydown.enter.prevent="loadProfile" />
<button class="btn" :disabled="isLoading" type="button" @click="loadProfile">{{ isLoading ? '검색중...' : '검색' }}</button>
</section>
<div v-if="isLoading" class="empty">작성자 티어표를 불러오고 있어요.</div>
<div v-else-if="!tierLists.length" class="empty">아직 공개 티어표가 없어요.</div>
<div v-else class="list">
<article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
<button class="boardCard__body" type="button" @click="openTierList(tierList)">
<div class="boardCard__thumbWrap">
<img
v-if="tierListThumbnailUrl(tierList)"
class="boardCard__thumb"
:src="tierListThumbnailUrl(tierList)"
:alt="tierList.title"
draggable="false"
@error="handleThumbnailError(tierList.id)"
/>
<div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
</div>
<div class="boardCard__head">
<div class="boardCard__titleRow">
<div class="boardCard__title">{{ tierList.title }}</div>
<div class="favoriteStat">{{ tierList.isFavorited ? '♥' : '♡' }} {{ tierList.favoriteCount || 0 }}</div>
</div>
<div class="boardCard__metaRow">
<div class="boardCard__author">
<img
v-if="avatarSrcOf(tierList)"
class="boardCard__avatar"
:src="avatarSrcOf(tierList)"
:alt="displayNameOf(tierList)"
draggable="false"
/>
<div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
<span class="boardCard__authorName">{{ displayNameOf(tierList) }}</span>
</div>
<div class="boardCard__date">{{ fmt(tierList.updatedAt) }}</div>
</div>
</div>
</button>
</article>
</div>
</section>
</template>
<style scoped>
.profileActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
padding: 11px 13px;
border-radius: 14px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft-2);
color: var(--theme-text);
font-weight: 800;
cursor: pointer;
}
.btn--primary {
border: 0;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
}
.profileHero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
gap: 18px;
margin-bottom: 22px;
}
.profileCard,
.profileStat {
border-radius: 24px;
border: 1px solid var(--theme-card-border);
background: var(--theme-card-bg);
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
}
.profileCard {
padding: 24px;
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
}
.profileAvatar {
width: 82px;
height: 82px;
border-radius: 9999px;
object-fit: cover;
border: 1px solid var(--theme-avatar-border);
background: var(--theme-border);
flex: 0 0 auto;
}
.profileAvatar--fallback {
display: grid;
place-items: center;
font-size: 28px;
font-weight: 900;
}
.profileMeta {
min-width: 0;
display: grid;
gap: 6px;
}
.profileMeta__name {
font-size: 24px;
font-weight: 900;
color: var(--theme-text);
word-break: break-word;
}
.profileMeta__handle {
font-size: 14px;
color: var(--theme-text-faint);
}
.profileStats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.profileStat {
padding: 18px;
display: grid;
gap: 8px;
align-content: center;
}
.profileStat__label {
font-size: 12px;
font-weight: 800;
color: var(--theme-text-faint);
}
.profileStat__value {
font-size: 26px;
font-weight: 900;
color: var(--theme-text);
}
.listToolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.input {
min-width: 260px;
padding: 11px 13px;
border-radius: 14px;
border: 1px solid var(--theme-border);
background: var(--theme-surface-soft);
color: var(--theme-text);
}
.empty {
opacity: 0.76;
}
.list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.boardCard {
min-width: 0;
border-radius: 22px;
border: 1px solid var(--theme-card-border);
background: var(--theme-card-bg);
color: var(--theme-text);
overflow: hidden;
box-shadow: inset 0 1px 0 var(--theme-card-shadow);
transition:
transform 0.16s ease,
background 0.16s ease;
}
.boardCard:hover {
background: var(--theme-card-bg-hover);
transform: translateY(-2px);
}
.boardCard__body {
width: 100%;
min-width: 0;
text-align: left;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
padding: 0;
display: grid;
}
.boardCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
padding: 14px 14px 0;
box-sizing: border-box;
}
.boardCard__thumb,
.boardCard__thumbPlaceholder {
width: 100%;
height: 100%;
border-radius: 18px;
display: block;
}
.boardCard__thumb {
object-fit: cover;
}
.boardCard__thumbPlaceholder {
display: grid;
place-items: center;
background: var(--theme-thumb-fallback-bg);
color: var(--theme-text-faint);
font-size: 13px;
font-weight: 700;
}
.boardCard__head {
min-width: 0;
padding: 16px 18px 18px;
display: grid;
gap: 8px;
}
.boardCard__titleRow,
.boardCard__metaRow {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.boardCard__titleRow {
align-items: flex-start;
}
.boardCard__metaRow {
align-items: flex-end;
}
.boardCard__title {
min-width: 0;
font-weight: 800;
font-size: 18px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.boardCard__author {
min-width: 0;
max-width: 100%;
display: inline-flex;
gap: 7px;
align-items: center;
font-size: 13px;
opacity: 0.86;
overflow: hidden;
}
.boardCard__authorName {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.boardCard__avatar {
width: 22px;
height: 22px;
border-radius: 9999px;
object-fit: cover;
border: 1px solid var(--theme-avatar-border);
background: var(--theme-border);
flex: 0 0 auto;
}
.boardCard__avatar--fallback {
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
}
.boardCard__date,
.favoriteStat {
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
font-size: 13px;
color: var(--theme-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.boardCard__date {
font-size: 10px;
}
@media (max-width: 1400px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.profileHero {
grid-template-columns: 1fr;
}
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.profileCard {
padding: 18px;
}
.profileStats,
.list {
grid-template-columns: 1fr;
}
.input {
min-width: 0;
width: 100%;
}
}
</style>