From b28a41f14e5f4c8718812a3b489768e93de789ef Mon Sep 17 00:00:00 2001 From: dal4segno Date: Thu, 8 Oct 2026 18:28:55 +0900 Subject: [PATCH] feat: allow resetting card and outfit list sorting --- UPDATES.md | 8 +++++++- src/lib/styles/card-catalog.css | 1 + src/routes/cards/+page.svelte | 18 +++++++++--------- src/routes/cards/outfits/+page.svelte | 20 +++++++++++++++++--- 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/UPDATES.md b/UPDATES.md index 506bced..88d885b 100644 --- a/UPDATES.md +++ b/UPDATES.md @@ -1,7 +1,13 @@ --- -updatedAt: 2026-10-07T12:57:51.000Z +updatedAt: 2026-10-08T09:15:32.000Z --- +## 2026년 10월 8일 + +### 카드·의상 목록 정렬 해제 + +`IMPROVED` 카드와 의상 효과 목록에 ‘기본 정렬’ 버튼을 추가했습니다. 정렬 가능한 열 제목을 반복해서 누르면 오름차순·내림차순·기본 순서로 전환합니다. 정렬을 해제해도 필터·개화 선택과 펼친 상세는 유지하며, 기본 정렬 상태는 다음 방문에도 유지합니다. + ## 2026년 10월 7일 ### 악곡 목록에 재킷 함께 복사 diff --git a/src/lib/styles/card-catalog.css b/src/lib/styles/card-catalog.css index 914973f..ce13e66 100644 --- a/src/lib/styles/card-catalog.css +++ b/src/lib/styles/card-catalog.css @@ -51,6 +51,7 @@ body:has(.card-catalog) { .card-catalog .expanded .chevron { border-color: #df4b8a; transform: rotate(225deg) translate(-1px, -1px); } .card-catalog .list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #aab3c3; font-size: 13px; } .card-catalog .list-toolbar p { margin: 0; line-height: 1.6; } +.card-catalog .list-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex-shrink: 0; max-width: 100%; } .card-catalog .scroll-hint { display: none; margin: 0 0 10px; color: #969fb0; font-size: 12px; } .card-catalog .table-panel { container-type: inline-size; overflow-x: auto; overflow-y: hidden; border: 1px solid #2b3240; border-radius: 18px; background: #161b25; } diff --git a/src/routes/cards/+page.svelte b/src/routes/cards/+page.svelte index 0fbfbaa..aa0eacc 100644 --- a/src/routes/cards/+page.svelte +++ b/src/routes/cards/+page.svelte @@ -180,9 +180,15 @@ : [...expandedCardIds, cardId]; } + function resetSort() { + sortKey = null; + sortDirection = 'asc'; + } + function toggleSort(nextSortKey: CardListSortKey) { if (sortKey === nextSortKey) { - sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; + if (sortDirection === 'asc') sortDirection = 'desc'; + else resetSort(); return; } @@ -192,7 +198,7 @@ function sortButtonLabel(key: CardListSortKey, label: string, currentKey: CardListSortKey | null, direction: SortDirection) { if (currentKey !== key) return `${label} 오름차순 정렬`; - return `${label} ${direction === 'asc' ? '내림차순' : '오름차순'}으로 변경`; + return `${label} ${direction === 'asc' ? '내림차순으로 변경' : '기본 정렬로 변경'}`; } function secondsLabel(seconds: number | null | undefined) { @@ -400,6 +406,7 @@

수치는 선택한 개화 기준이며, 조건부 스킬은 조건 충족 시 수치입니다. 여러 행을 펼쳐 상세 정보를 함께 비교할 수 있습니다.

+
개화 @@ -831,13 +838,6 @@ } .outfit-link { display: inline-block; margin-top: 4px; color: #ef9abe; font-size: 12px; text-underline-offset: 3px; } .outfit-link:focus-visible { outline: 2px solid #ef9abe; outline-offset: 3px; } - .list-tools { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 10px; - flex-shrink: 0; - } .skill-card header { display: flex; align-items: center; diff --git a/src/routes/cards/outfits/+page.svelte b/src/routes/cards/outfits/+page.svelte index bf0e2b4..089cca2 100644 --- a/src/routes/cards/outfits/+page.svelte +++ b/src/routes/cards/outfits/+page.svelte @@ -87,13 +87,21 @@ expandedIds = expandedIds.includes(id) ? expandedIds.filter(value => value !== id) : [...expandedIds, id]; } + function resetSort() { + sortKey = null; + sortDirection = 'asc'; + } + function toggleSort(key: OutfitSortKey) { - if (sortKey === key) sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; + if (sortKey === key) { + if (sortDirection === 'asc') sortDirection = 'desc'; + else resetSort(); + } else { sortKey = key; sortDirection = 'asc'; } } function sortLabel(key: OutfitSortKey, label: string, currentKey: OutfitSortKey | null, direction: 'asc' | 'desc') { - return `${label} ${currentKey !== key ? '오름차순 정렬' : direction === 'asc' ? '내림차순으로 변경' : '오름차순으로 변경'}`; + return `${label} ${currentKey !== key ? '오름차순 정렬' : direction === 'asc' ? '내림차순으로 변경' : '기본 정렬로 변경'}`; } function valueLabel(outfit: OutfitEntry, key: OutfitSortKey) { @@ -128,7 +136,13 @@
-

수치는 조건 충족 시 기준입니다. 행을 눌러 여러 의상의 전체 설명을 함께 확인할 수 있습니다.

+
+

수치는 조건 충족 시 기준입니다. 행을 눌러 여러 의상의 전체 설명을 함께 확인할 수 있습니다.

+
+ + +
+

목록을 좌우로 밀어 모든 항목을 확인할 수 있습니다.

멤버기수의상명획득 카드발동 조건대상강화 효과