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

릴리스: v1.2.6 목록 화면 카드 레이아웃 정리

Browse Source
This commit is contained in:
zenn
2026-03-30 16:08:00 +09:00
parent 7886b98380
commit 6fceeaf15b
9 changed files with 348 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/views/FavoriteTierListsView.vue
View File

@@ -62,6 +62,7 @@ onMounted(loadFavorites)
<section class="wrap">
<div class="head">
<div>
<div class="head__eyebrow">Collection</div>
<h2 class="title">내 즐겨찾기</h2>
<div class="desc">마음에 드는 티어표를 모아보고, 원하는 기준으로 정렬할 수 있어요.</div>
</div>
@@ -78,23 +79,23 @@ onMounted(loadFavorites)
<div v-if="favorites.length === 0" class="empty">즐겨찾기한 티어표가 없어요.</div>
<div v-else class="list">
<article v-for="tierList in favorites" :key="tierList.id" class="row">
<button class="row__body" @click="openTierList(tierList)">
<div class="row__thumbWrap">
<img v-if="tierListThumbnailUrl(tierList)" class="row__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
<div v-else class="row__thumbPlaceholder"></div>
<article v-for="tierList in favorites" :key="tierList.id" class="boardCard">
<button class="boardCard__body" @click="openTierList(tierList)">
<div class="boardCard__thumbWrap">
<img v-if="tierListThumbnailUrl(tierList)" class="boardCard__thumb" :src="tierListThumbnailUrl(tierList)" :alt="tierList.title" />
<div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
</div>
<div class="row__head">
<div class="row__title">{{ tierList.title }}</div>
<div class="row__author">
<img v-if="avatarSrcOf(tierList)" class="row__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
<div class="boardCard__head">
<div class="boardCard__title">{{ tierList.title }}</div>
<div class="boardCard__author">
<img v-if="avatarSrcOf(tierList)" class="boardCard__avatar" :src="avatarSrcOf(tierList)" :alt="displayNameOf(tierList)" />
<div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(tierList) }}</div>
<span>by {{ displayNameOf(tierList) }}</span>
</div>
</div>
</button>
<div class="row__foot">
<div class="row__meta">
<div class="boardCard__foot">
<div class="boardCard__meta">
<div>{{ tierList.gameName || tierList.gameId }}</div>
<div>{{ sortLabel }}: {{ fmt(sort === 'favorited' ? tierList.favoritedAt : tierList.updatedAt) }}</div>
</div>
@@ -117,9 +118,15 @@ onMounted(loadFavorites)
align-items: flex-end;
flex-wrap: wrap;
}
.head__eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.title {
margin: 0;
font-size: 30px;
margin: 4px 0 0;
font-size: 32px;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.04em;
}
@@ -157,15 +164,16 @@ onMounted(loadFavorites)
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
border-radius: 14px;
.boardCard {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
overflow: hidden;
display: grid;
gap: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.row__body {
.boardCard__body {
border: 0;
background: transparent;
color: inherit;
@@ -175,60 +183,67 @@ onMounted(loadFavorites)
display: grid;
gap: 10px;
}
.row__thumbWrap {
.boardCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
background: #555;
display: grid;
place-items: center;
}
.row__thumb,
.row__thumbPlaceholder {
.boardCard__thumb,
.boardCard__thumbPlaceholder {
width: 100%;
height: 100%;
display: block;
}
.row__thumb {
.boardCard__thumb {
object-fit: cover;
}
.row__thumbPlaceholder {
.boardCard__thumbPlaceholder {
background: #555;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
font-weight: 700;
}
.row__head {
.boardCard__head {
padding: 14px 14px 0;
display: grid;
gap: 10px;
}
.row__title {
.boardCard__title {
font-weight: 800;
font-size: 18px;
}
.row__author {
.boardCard__author {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
opacity: 0.86;
}
.row__avatar {
.boardCard__avatar {
width: 28px;
height: 28px;
border-radius: 999px;
object-fit: cover;
background: rgba(255, 255, 255, 0.08);
}
.row__avatar--fallback {
.boardCard__avatar--fallback {
display: grid;
place-items: center;
font-size: 12px;
font-weight: 900;
}
.row__foot {
.boardCard__foot {
padding: 0 14px 14px;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.row__meta {
.boardCard__meta {
display: grid;
gap: 4px;
opacity: 0.78;

159
frontend/src/views/GameHubView.vue
View File

@@ -77,13 +77,17 @@ function submitSearch() {
</script>
<template>
<section class="head">
<div class="head__left">
<div class="kicker">Collection</div>
<h2 class="title">{{ gameName || gameId }}</h2>
<p class="desc">새 티어표를 만들거나, 다른 사람들이 올린 티어표를 카드형 목록으로 탐색할 수 있어요.</p>
<section class="dashboardHero">
<div class="dashboardHero__left">
<div class="dashboardHero__eyebrow">Collection</div>
<h2 class="dashboardHero__title">{{ gameName || gameId }}</h2>
<p class="dashboardHero__desc">이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
</div>
<div class="head__right">
<div class="dashboardHero__right">
<div class="dashboardStat">
<span class="dashboardStat__label">Visible Lists</span>
<strong class="dashboardStat__value">{{ tierLists.length }}</strong>
</div>
<button class="primary" @click="createNew">{{ auth.user ? '새로운 티어표 만들기' : '로그인 후 새 티어표 만들기' }}</button>
</div>
</section>
@@ -91,7 +95,10 @@ function submitSearch() {
<div v-if="error" class="error">{{ error }}</div>
<section class="panel">
<div class="panel__head">
<div class="panel__title">공개 티어표</div>
<div>
<div class="panel__title">공개 티어표</div>
<div class="panel__sub">제목이나 작성자로 빠르게 좁혀볼 수 있어요.</div>
</div>
<div class="searchBar">
<input v-model="query" class="searchBar__input" placeholder="제목 또는 작성자 검색" @keydown.enter.prevent="submitSearch" />
<button class="searchBar__button" @click="submitSearch">검색</button>
@@ -99,23 +106,23 @@ function submitSearch() {
</div>
<div v-if="tierLists.length === 0" class="empty">아직 공개 티어표가 없어요.</div>
<div v-else class="list">
<article v-for="t in tierLists" :key="t.id" class="row">
<button class="row__body" @click="openTierList(t.id)">
<div class="row__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="row__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="row__thumbPlaceholder"></div>
<article v-for="t in tierLists" :key="t.id" class="boardCard">
<button class="boardCard__body" @click="openTierList(t.id)">
<div class="boardCard__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
</div>
<div class="row__head">
<div class="row__title">{{ t.title }}</div>
<div class="row__author">
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<div class="boardCard__head">
<div class="boardCard__title">{{ t.title }}</div>
<div class="boardCard__author">
<img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<span>by {{ displayNameOf(t) }}</span>
</div>
</div>
</button>
<div class="row__foot">
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
<div class="boardCard__foot">
<div class="boardCard__meta">{{ fmt(t.updatedAt) }}</div>
<div class="favoriteStat" :title="t.isFavorited ? '이미 즐겨찾기한 티어표' : '즐겨찾기 수'">
{{ t.isFavorited ? '★' : '☆' }} {{ t.favoriteCount || 0 }}
</div>
@@ -126,44 +133,71 @@ function submitSearch() {
</template>
<style scoped>
.head {
.dashboardHero {
display: flex;
gap: 18px;
align-items: flex-end;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
padding: 4px 2px 18px;
}
.kicker {
.dashboardHero__left {
display: grid;
gap: 8px;
}
.dashboardHero__right {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.dashboardHero__eyebrow {
font-size: 12px;
color: rgba(255, 255, 255, 0.42);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.title {
.dashboardHero__title {
margin: 4px 0 6px;
font-size: 30px;
font-size: 32px;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.96);
}
.desc {
.dashboardHero__desc {
margin: 0;
color: rgba(255, 255, 255, 0.58);
max-width: 720px;
}
.dashboardStat {
display: grid;
gap: 2px;
min-width: 112px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.dashboardStat__label {
font-size: 11px;
color: rgba(255, 255, 255, 0.48);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dashboardStat__value {
font-size: 18px;
font-weight: 900;
}
.primary {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.92);
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(77, 127, 233, 0.96);
background: rgba(77, 127, 233, 0.88);
color: #fff;
cursor: pointer;
font-weight: 700;
}
.primary:hover {
background: rgba(255, 255, 255, 0.12);
font-weight: 800;
}
.panel {
border: 1px solid rgba(255, 255, 255, 0.08);
/* border: 1px solid rgba(255, 255, 255, 0.08); */
background: transparent;
border-radius: 0;
padding: 0;
@@ -177,6 +211,12 @@ function submitSearch() {
}
.panel__title {
font-weight: 800;
font-size: 18px;
}
.panel__sub {
margin-top: 6px;
color: rgba(255, 255, 255, 0.56);
font-size: 13px;
}
.panel__head {
display: flex;
@@ -201,8 +241,8 @@ function submitSearch() {
color: rgba(255, 255, 255, 0.92);
}
.searchBar__button {
padding: 10px 12px;
border-radius: 10px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
@@ -217,8 +257,8 @@ function submitSearch() {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
border-radius: 14px;
.boardCard {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
color: rgba(255, 255, 255, 0.92);
@@ -227,11 +267,12 @@ function submitSearch() {
align-content: start;
min-height: 168px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.row:hover {
background: rgba(255, 255, 255, 0.05);
.boardCard:hover {
background: rgba(70, 70, 70, 0.96);
}
.row__body {
.boardCard__body {
text-align: left;
padding: 0;
border: 0;
@@ -242,35 +283,42 @@ function submitSearch() {
display: grid;
gap: 10px;
}
.row__thumbWrap {
.boardCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
background: #555;
display: grid;
place-items: center;
}
.row__thumb {
.boardCard__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.row__thumbPlaceholder {
.boardCard__thumbPlaceholder {
width: 100%;
height: 100%;
background: #555;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
font-weight: 700;
}
.row__title {
.boardCard__title {
font-weight: 800;
min-width: 0;
font-size: 18px;
line-height: 1.35;
}
.row__head {
.boardCard__head {
padding: 14px 14px 0;
display: grid;
gap: 12px;
align-content: start;
}
.row__author {
.boardCard__author {
display: inline-flex;
gap: 8px;
align-items: center;
@@ -278,7 +326,7 @@ function submitSearch() {
opacity: 0.86;
flex: 0 0 auto;
}
.row__avatar {
.boardCard__avatar {
width: 28px;
height: 28px;
border-radius: 999px;
@@ -286,17 +334,17 @@ function submitSearch() {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
}
.row__avatar--fallback {
.boardCard__avatar--fallback {
display: grid;
place-items: center;
font-size: 12px;
font-weight: 900;
}
.row__meta {
.boardCard__meta {
opacity: 0.78;
font-size: 13px;
}
.row__foot {
.boardCard__foot {
padding: 0 14px 14px;
display: flex;
gap: 12px;
@@ -323,6 +371,13 @@ function submitSearch() {
}
}
@media (max-width: 720px) {
.dashboardHero__right {
width: 100%;
}
.dashboardStat,
.primary {
width: 100%;
}
.list {
grid-template-columns: 1fr;
}

140
frontend/src/views/HomeView.vue
View File

@@ -41,32 +41,43 @@ function thumbUrl(g) {
</script>
<template>
<section class="topBar">
<div class="topBar__copy">
<h1 class="topBar__title">Main Title</h1>
<p class="topBar__desc">게임 선택과 커스텀 티어표 진입을 하나의 대시보드처럼 정리했습니다.</p>
<section class="dashboardHero">
<div class="dashboardHero__copy">
<div class="dashboardHero__eyebrow">Workspace</div>
<h1 class="dashboardHero__title">Game Library</h1>
<p class="dashboardHero__desc">자주 쓰는 게임 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
</div>
<div class="toolbar">
<button class="toolbar__ghost" @click="goFreeform">Toggle Filter</button>
<button class="toolbar__select" @click="goFreeform">Select Filter</button>
<div class="dashboardToolbar">
<div class="dashboardToolbar__stat">
<span class="dashboardToolbar__label">Visible Games</span>
<strong class="dashboardToolbar__value">{{ games.length }}</strong>
</div>
<button class="dashboardToolbar__ghost" @click="goFreeform">Quick Start</button>
<button class="dashboardToolbar__ghost" @click="goFreeform">Browse All</button>
<button class="customTierBtn" @click="goFreeform">{{ auth.user ? '+ 커스텀 티어표 만들기' : '+ 로그인 후 커스텀 티어표 만들기' }}</button>
</div>
</section>
<div v-if="error" class="error">{{ error }}</div>
<section class="grid">
<button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
<div class="thumbWrap">
<img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
<div v-else class="thumbFallback">{{ g.name[0] }}</div>
<section class="libraryGrid">
<button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
<div class="libraryCard__thumbWrap">
<img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
<div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
</div>
<div class="libraryCard__body">
<div class="libraryCard__title">{{ g.name }}</div>
<div class="libraryCard__meta">
<span class="libraryCard__metaDot"></span>
<span>{{ g.id }}</span>
</div>
</div>
<div class="card__title">{{ g.name }}</div>
</button>
</section>
</template>
<style scoped>
.topBar {
.dashboardHero {
display: flex;
gap: 18px;
justify-content: space-between;
@@ -75,32 +86,57 @@ function thumbUrl(g) {
margin-top: 2px;
margin-bottom: 18px;
}
.topBar__copy {
.dashboardHero__copy {
display: grid;
gap: 8px;
}
.topBar__title {
.dashboardHero__eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.dashboardHero__title {
margin: 0;
font-size: 32px;
font-size: 34px;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.96);
}
.topBar__desc {
.dashboardHero__desc {
margin: 0;
color: rgba(255, 255, 255, 0.58);
line-height: 1.5;
max-width: 720px;
}
.toolbar {
.dashboardToolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.toolbar__ghost,
.toolbar__select,
.dashboardToolbar__stat {
display: grid;
gap: 2px;
min-width: 112px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.dashboardToolbar__label {
font-size: 11px;
color: rgba(255, 255, 255, 0.48);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dashboardToolbar__value {
font-size: 18px;
font-weight: 900;
}
.dashboardToolbar__ghost,
.customTierBtn {
padding: 10px 14px;
border-radius: 10px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.84);
@@ -108,9 +144,11 @@ function thumbUrl(g) {
cursor: pointer;
}
.customTierBtn {
background: rgba(255, 255, 255, 0.08);
background: rgba(77, 127, 233, 0.88);
border-color: rgba(77, 127, 233, 0.96);
color: #fff;
}
.grid {
.libraryGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
@@ -123,69 +161,87 @@ function thumbUrl(g) {
background: rgba(239, 68, 68, 0.1);
color: rgba(255, 255, 255, 0.92);
}
.card {
.libraryCard {
text-align: left;
padding: 12px;
border-radius: 14px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
display: grid;
gap: 12px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.card:hover {
background: rgba(72, 72, 72, 0.92);
.libraryCard:hover {
background: rgba(70, 70, 70, 0.96);
}
.thumbWrap {
.libraryCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: #555;
overflow: hidden;
display: grid;
place-items: center;
}
.thumb {
.libraryCard__thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbFallback {
.libraryCard__thumbFallback {
font-size: 13px;
font-weight: 700;
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
}
.card__title {
.libraryCard__body {
display: grid;
gap: 8px;
}
.libraryCard__title {
font-weight: 800;
letter-spacing: -0.02em;
font-size: 15px;
font-size: 16px;
}
.libraryCard__meta {
display: inline-flex;
gap: 8px;
align-items: center;
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
}
.libraryCard__metaDot {
width: 10px;
height: 10px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.9);
}
@media (max-width: 1200px) {
.grid {
.libraryGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.grid {
.libraryGrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.topBar {
.dashboardHero {
align-items: stretch;
}
.toolbar {
.dashboardToolbar {
width: 100%;
}
.toolbar__ghost,
.toolbar__select,
.dashboardToolbar__ghost,
.dashboardToolbar__stat,
.customTierBtn {
flex: 1 1 100%;
}
.grid {
.libraryGrid {
grid-template-columns: 1fr;
}
}

109
frontend/src/views/MyTierListsView.vue
View File

@@ -72,25 +72,35 @@ async function removeList(t) {
<template>
<section class="wrap">
<h2 class="title">내 티어표</h2>
<header class="head">
<div>
<div class="head__eyebrow">Library</div>
<h2 class="title">내 티어표</h2>
<div class="desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
</div>
<div class="head__stat">
<span class="head__statLabel">Saved Lists</span>
<strong class="head__statValue">{{ myLists.length }}</strong>
</div>
</header>
<div class="card">
<div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
<div v-else class="list">
<article v-for="t in myLists" :key="t.id" class="row">
<button class="row__body" @click="openList(t)">
<div class="row__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="row__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="row__thumbPlaceholder"></div>
<article v-for="t in myLists" :key="t.id" class="boardCard">
<button class="boardCard__body" @click="openList(t)">
<div class="boardCard__thumbWrap">
<img v-if="tierListThumbnailUrl(t)" class="boardCard__thumb" :src="tierListThumbnailUrl(t)" :alt="t.title" />
<div v-else class="boardCard__thumbPlaceholder">대표 썸네일</div>
</div>
<div class="row__head">
<div class="row__title">{{ t.title }}</div>
<div class="row__author">
<img v-if="avatarSrcOf(t)" class="row__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="row__avatar row__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<div class="boardCard__head">
<div class="boardCard__title">{{ t.title }}</div>
<div class="boardCard__author">
<img v-if="avatarSrcOf(t)" class="boardCard__avatar" :src="avatarSrcOf(t)" :alt="displayNameOf(t)" />
<div v-else class="boardCard__avatar boardCard__avatar--fallback">{{ avatarFallbackOf(t) }}</div>
<span>by {{ displayNameOf(t) }}</span>
</div>
</div>
<div class="row__meta">{{ fmt(t.updatedAt) }}</div>
<div class="boardCard__meta">{{ fmt(t.updatedAt) }}</div>
</button>
<button class="link link--danger" @click="removeList(t)">삭제</button>
</article>
@@ -103,12 +113,48 @@ async function removeList(t) {
.wrap {
padding: 4px 2px;
}
.head {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 18px;
}
.head__eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.title {
margin: 0 0 18px;
font-size: 30px;
margin: 4px 0 6px;
font-size: 32px;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.96);
}
.desc {
color: rgba(255, 255, 255, 0.58);
}
.head__stat {
display: grid;
gap: 2px;
min-width: 112px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.head__statLabel {
font-size: 11px;
color: rgba(255, 255, 255, 0.48);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.head__statValue {
font-size: 18px;
font-weight: 900;
}
.card {
border: 0;
background: transparent;
@@ -132,16 +178,17 @@ async function removeList(t) {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
.boardCard {
display: grid;
gap: 10px;
border-radius: 14px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(62, 62, 62, 0.82);
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.row__body {
.boardCard__body {
flex: 1 1 auto;
min-width: 0;
text-align: left;
@@ -153,27 +200,34 @@ async function removeList(t) {
display: grid;
gap: 10px;
}
.row__thumbWrap {
.boardCard__thumbWrap {
width: 100%;
aspect-ratio: 16 / 9;
background: #555;
display: grid;
place-items: center;
}
.row__thumb {
.boardCard__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.row__thumbPlaceholder {
.boardCard__thumbPlaceholder {
width: 100%;
height: 100%;
background: #555;
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
font-weight: 700;
}
.row__title {
.boardCard__title {
font-weight: 900;
min-width: 0;
}
.row__head {
.boardCard__head {
padding: 0 14px;
display: flex;
gap: 12px;
@@ -181,14 +235,14 @@ async function removeList(t) {
justify-content: space-between;
flex-wrap: wrap;
}
.row__author {
.boardCard__author {
display: inline-flex;
gap: 8px;
align-items: center;
font-size: 13px;
opacity: 0.84;
}
.row__avatar {
.boardCard__avatar {
width: 28px;
height: 28px;
border-radius: 999px;
@@ -196,13 +250,13 @@ async function removeList(t) {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.08);
}
.row__avatar--fallback {
.boardCard__avatar--fallback {
display: grid;
place-items: center;
font-size: 12px;
font-weight: 900;
}
.row__meta {
.boardCard__meta {
padding: 0 14px;
margin-top: 6px;
opacity: 0.76;
@@ -224,6 +278,9 @@ async function removeList(t) {
}
}
@media (max-width: 720px) {
.head__stat {
width: 100%;
}
.list {
grid-template-columns: 1fr;
}