feat: level search

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-	"editor.formatOnSave": false,
+	"editor.formatOnSave": true,
 	"svelte.enable-ts-plugin": true,
 	"scss.lint.unknownAtRules": "ignore",
 	"eslint.workingDirectories": ["./src"],

package.json

@@ -23,6 +23,7 @@
 		"server.js"
 	],
 	"devDependencies": {
+		"@adofai-gg/query-types": "1.0.0-alpha.3",
 		"@adofai-gg/ui": "1.2.0-beta.59",
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
@@ -37,6 +38,7 @@
 		"@tanstack/svelte-query": "^5.62.9",
 		"@tanstack/svelte-virtual": "^3.11.2",
 		"@types/node": "^22.10.2",
+		"@types/uuid": "^10.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.18.2",
 		"@typescript-eslint/parser": "^8.18.2",
 		"autoprefixer": "^10.4.20",
@@ -67,6 +69,7 @@
 		"svelte-preprocess": "^6.0.3",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
+		"uuid": "^11.0.5",
 		"vite": "^6.0.6",
 		"vite-plugin-glob": "^0.3.2",
 		"vite-plugin-preload": "^0.4.2"

src/lib/localization/ko/level.ftl

@@ -12,6 +12,6 @@ report = 신고
 
 search-placeholder = 레벨, 노래, 아티스트, 제작자를 검색하세요.
 
-filter-title = 레벨 제목
+filter-music = 곡 제목
 filter-artist = 아티스트
 filter-creator = 제작자

src/lib/utils/filter.ts

@@ -0,0 +1,42 @@
+import type { SearchFilter, SearchOptionScheme } from '@adofai-gg/ui'
+import { v4 } from 'uuid'
+
+export const parseFilterItem = (rawData: any, scheme: SearchOptionScheme): SearchFilter => {
+	const schemeData = scheme.filter[rawData.key]
+	if (!schemeData) throw new Error('unknown key')
+
+	let value = rawData.value
+
+	switch (schemeData.type) {
+		case 'string':
+			if (typeof value !== 'string') throw new Error('invalid type')
+			break
+		default:
+			throw new Error('not implemented')
+	}
+
+	return { key: rawData.key, value, id: v4() }
+}
+
+export const parseFilter = (
+	filterStr: string | null,
+	scheme: SearchOptionScheme
+): SearchFilter[] => {
+	if (!filterStr) return []
+
+	try {
+		const rawData: unknown[] = JSON.parse(filterStr)
+		return rawData
+			.map((x) => {
+				try {
+					return parseFilterItem(x, scheme)
+				} catch (e) {
+					console.warn(e)
+					return null
+				}
+			})
+			.filter((x) => x) as SearchFilter[]
+	} catch {
+		return []
+	}
+}

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Container, SearchBar, Logo } from '@adofai-gg/ui'
+	import { Container, SearchBar, Logo, type SearchOptionsData } from '@adofai-gg/ui'
 	import MainSection from '$lib/components/main/MainSection.svelte'
 	import { goto } from '$app/navigation'
 
@@ -34,24 +34,23 @@
 	@use '@adofai-gg/ui/dist/stylesheets/system/breakpoints';
 
 	.root {
-		margin-top: 64px;
-
 		@include breakpoints.breakpoint('md') {
 			margin-top: 138px;
 		}
+
+		margin-top: 64px;
 	}
 
 	.search-area {
-		margin-top: 38px;
-		max-width: 760px;
 		width: 100%;
+		max-width: 760px;
+		margin-top: 38px;
 	}
 
 	.top {
-		margin-bottom: 84px;
-
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		margin-bottom: 84px;
 	}
 </style>