feat: level actions area

package.json

@@ -23,7 +23,7 @@
 		"server.js"
 	],
 	"devDependencies": {
-		"@adofai-gg/ui": "1.2.0-beta.35",
+		"@adofai-gg/ui": "1.2.0-beta.37",
 		"@commitlint/cli": "^18.4.3",
 		"@commitlint/config-conventional": "^18.4.3",
 		"@fluent/bundle": "^0.18.0",

src/lib/components/levelDetail/LevelActionsArea.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Button, Translation } from '@adofai-gg/ui'
+	import type { APILevel } from '~/lib/types'
+
+	interface Props {
+		level: APILevel
+	}
+
+	const { level }: Props = $props()
+</script>
+
+<div class="level-actions-area">
+	{#if level.downloadUrl}
+		<a href={level.downloadUrl} rel="noreferrer" target="_blank">
+			<Button size="lg" leftIcon="fileDownload">
+				<Translation key="level:download" />
+			</Button>
+		</a>
+	{/if}
+	{#if level.workshopUrl?.trim()}
+		<a href={level.workshopUrl.trim()} rel="noreferrer" target="_blank">
+			<Button size="lg" leftIcon="steam" variant="ghost-dark">
+				<Translation key="level:workshop" />
+			</Button>
+		</a>
+	{/if}
+	<Button size="lg" leftIcon="heartOutlined" variant="ghost-dark">TODO</Button>
+	<Button size="lg" variant="ghost-dark">
+		<Translation key="level:share" />
+	</Button>
+	<Button size="lg" variant="ghost-dark">
+		<Translation key="level:report" />
+	</Button>
+</div>
+
+<style lang="scss">
+	.level-actions-area {
+		display: flex;
+		gap: 8px;
+	}
+</style>

src/lib/localization/ko/level.ftl

@@ -3,4 +3,9 @@ bpm = BPM
 tiles = 타일 수
 
 artists = 아티스트
-creators = 레벨 제작자
+creators = 레벨 제작자
+
+download = 다운로드
+workshop = 창작마당
+share = 공유
+report = 신고

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '$lib'
 	import '@adofai-gg/ui/dist/stylesheets/globals.scss'
 	import { IconProvider, Nav, Footer, setGlobalContext } from '@adofai-gg/ui'
+	import { env } from '$env/dynamic/public'
 
 	import type { Snippet } from 'svelte'
 	import { writable } from 'svelte/store'
@@ -33,8 +34,8 @@
 		},
 		urls: {
 			main: '/',
-			signIn: '', // TODO
-			signUp: ''
+			signIn: `${env.PUBLIC_ACCOUNT_SERVICE_URL}/auth/signin`, // TODO
+			signUp: `${env.PUBLIC_ACCOUNT_SERVICE_URL}/auth/signup`
 		}
 	})
 </script>

src/routes/levels/[levelId]/+page.svelte

@@ -7,6 +7,7 @@
 	import UserListPanel from '~/lib/components/UserListPanel.svelte'
 	import type { UserListItemModel } from '@adofai-gg/ui'
 	import { convertUser } from '~/lib/utils/converter'
+	import LevelActionsArea from '~/lib/components/levelDetail/LevelActionsArea.svelte'
 
 	interface Props {
 		data: PageData
@@ -41,12 +42,15 @@
 	<LevelDetailHeader level={data.level} />
 	<Container topMargin class="grid">
 		<div class="main-content-area">
-			<LevelMetadataArea level={data.level} />
+			<div class="main-upper-container">
+				<LevelMetadataArea level={data.level} />
+				<LevelActionsArea level={data.level} />
+			</div>
 		</div>
 		<div class="meta-area">
 			<LevelTagDisplay level={data.level} />
-			<UserListPanel items={creators} title="level:artists" />
-			<UserListPanel items={artists} title="level:creators" />
+			<UserListPanel items={artists} title="level:artists" />
+			<UserListPanel items={creators} title="level:creators" />
 		</div>
 	</Container>
 </div>
@@ -90,4 +94,10 @@
 			grid-column: span 3;
 		}
 	}
+
+	.main-upper-container {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
 </style>

src/routes/levels/[levelId]/+page.ts

@@ -14,8 +14,6 @@ export const load: PageLoad = async ({ params, fetch }) => {
 
 	const data: APILevel = await res.json()
 
-	console.log(data)
-
 	return {
 		level: data,
 		pageTitle: data.title