v0.10.0 릴리즈

README.md

@@ -5,6 +5,7 @@
    <a href="https://github.com/EATSTEAK/lockerweb/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/EATSTEAK/lockerweb?style=for-the-badge"></a>
    <a href="https://eatsteak.github.io/lockerweb"><img alt="API Docs" src="https://img.shields.io/badge/API%20Docs-v1-%2389bf04?style=for-the-badge&logo=Swagger"></a>
    <a href="https://ssuitlocker.com"><img alt="Website" src="https://img.shields.io/website?down_color=red&down_message=%EC%A0%91%EC%86%8D%20%EB%B6%88%EA%B0%80&label=IT%EB%8C%80%ED%95%99%20%EC%82%AC%EB%AC%BC%ED%95%A8%20%EC%98%88%EC%95%BD%20%EC%8B%9C%EC%8A%A4%ED%85%9C&style=for-the-badge&up_color=%2300a3c9&up_message=%EC%A0%91%EC%86%8D%20%EA%B0%80%EB%8A%A5&url=https%3A%2F%2Fssuitlocker.com"></a>
+   <a href="https://github.com/EATSTEAK/lockerweb/actions/workflows/aws-deploy.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/EATSTEAK/lockerweb/Deploy%20to%20AWS?label=Deploy&logo=github&style=for-the-badge"></a>
 </p>
 
 -----
@@ -15,7 +16,7 @@
 
 ## 서비스 배포 및 설정
 
-서비스를 설정하고 배포하려는 운영자라면 [서비스 배포 및 설정]([https://github.com/EATSTEAK/lockerweb/wiki/%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EB%B0%B0%ED%8F%AC](https://github.com/EATSTEAK/lockerweb/wiki/%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-%EC%84%A4%EC%A0%95))를 참고하세요.
+서비스를 설정하고 배포하려는 운영자라면 [서비스 배포 및 설정](https://github.com/EATSTEAK/lockerweb/wiki/%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-%EC%84%A4%EC%A0%95)을 참고하세요.
 
 ## 개발하기
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "lockerweb",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "SSU IT Collage Locker system.",
   "private": true,
   "scripts": {
     "build": "concurrently -p \"[{name} / {time}]\" -c \"green,magenta\" -n \"client,server\" \"pnpm run -r --filter=client build \" \"pnpm run -r -filter=server build\"",
     "dev": "concurrently -p \"[{name} / {time}]\" -c \"green,magenta\" -n \"client,server\" \"pnpm run -r --filter=client dev \" \"pnpm run -r -filter=server dev\"",
     "delete": "pnpm run --filter=client delete && pnpm run --filter=server delete",
-    "deploy": "pnpm run --filter=server deploy && pnpm run --filter=client deploy"
+    "deploy": "node ./scripts/deploy.js"
   },
   "repository": {
     "type": "git",

packages/client/.eslintrc.cjs

@@ -1,7 +1,15 @@
 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-	extends: ['plugin:import/recommended', 'plugin:import/typescript', 'plugin:tailwindcss/recommended', 'eslint:recommended', 'airbnb-typescript/base', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	extends: [
+		'plugin:import/recommended',
+		'plugin:import/typescript',
+		'plugin:tailwindcss/recommended',
+		'eslint:recommended',
+		'airbnb-typescript/base',
+		'plugin:@typescript-eslint/recommended',
+		'prettier'
+	],
 	plugins: ['svelte3', '@typescript-eslint', 'tailwindcss'],
 	ignorePatterns: ['*.cjs'],
 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "scripts": {
     "dev": "cross-env VITE_BASE_URL=http://localhost:3000 vite dev --port 5002 --host 0.0.0.0",
     "build": "vite build",

packages/client/src/app.css

@@ -1,5 +1,5 @@
 /* Write your global styles here, in PostCSS syntax */
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.css");
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.css');
 
 @import 'css/normalize.css';
 
@@ -13,11 +13,18 @@ html {
 }
 
 :root {
-    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
+    Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
     @apply text-gray-700;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     @apply font-bold;
 }
 
@@ -44,5 +51,3 @@ h5 {
 h6 {
     @apply text-lg;
 }
-
-

packages/client/src/components/atom/Button.svelte

@@ -5,31 +5,33 @@
 	export let href = null;
 </script>
 
-
 <!--suppress RequiredAttributes -->
-<svelte:element this='{href ? "a" : "button"}' on:click
-								on:dblclick
-								on:mousedown
-								on:mousemove
-								on:blur
-								on:mouseout
-								on:focus
-								on:mouseover
-								on:mouseup
-								on:mouseenter
-								on:mouseleave
-								on:keydown
-								on:keypress
-								on:keyup
-								{href}
-								tabindex='0'
-								class='{clazz} cursor-pointer select-none
+<svelte:element
+	this={href ? 'a' : 'button'}
+	on:click
+	on:dblclick
+	on:mousedown
+	on:mousemove
+	on:blur
+	on:mouseout
+	on:focus
+	on:mouseover
+	on:mouseup
+	on:mouseenter
+	on:mouseleave
+	on:keydown
+	on:keypress
+	on:keyup
+	{href}
+	tabindex='0'
+	class='{clazz} cursor-pointer select-none
 	 flex justify-between items-center px-4 py-3 flex-shrink-0 gap-x-3
 	 rounded-xl shadow-md font-bold transition-all ease-in
 	 [&[disabled]]:opacity-50 [&[disabled]]:shadow-none [&[disabled]]:pointer-events-none
 	 hover:brightness-90 hover:shadow-lg
 	 active:brightness-75 active:shadow-md'
-								{...$$restProps}>
+	{...$$restProps}
+>
 	{#if !isIconRight}
 		{#if $$slots.icon}
 			<div class='btn-icon'>
@@ -48,7 +50,7 @@
 </svelte:element>
 
 <style>
-    :global(.btn-icon path:not([fill="none"])) {
+    :global(.btn-icon path:not([fill='none'])) {
         fill: currentColor;
     }
-</style>
+</style>

packages/client/src/components/atom/DepartmentSelection.svelte

@@ -9,7 +9,7 @@
 	export let activateFrom: Date;
 	export let activateTo: Date;
 
-	$: activateTime = (activateFrom || activateTo) ? timeCalc(activateFrom, activateTo) : '';
+	$: activateTime = activateFrom || activateTo ? timeCalc(activateFrom, activateTo) : '';
 
 	let ref = null;
 
@@ -45,7 +45,7 @@
 
 <button
 	bind:this={ref}
-	class={`${lockerLeft <= 0 ? 'unavailable' : ''} ${selected ? "active" : ''}
+	class={`${lockerLeft <= 0 ? 'unavailable' : ''} ${selected ? 'active' : ''}
 	aspect-square max-w-[160px]
 	rounded-2xl bg-gray-100 box-border transition-all
 	flex-grow-0 flex-shrink-0 basis-[160px]
@@ -60,12 +60,12 @@
 	on:mouseleave
 	on:keydown
 	on:keydown={({ key }) => {
-    if (key === 'ArrowRight') {
-      ctx.change(1);
-    } else if (key === 'ArrowLeft') {
-      ctx.change(-1);
-    }
-  }}
+		if (key === 'ArrowRight') {
+			ctx.change(1);
+		} else if (key === 'ArrowLeft') {
+			ctx.change(-1);
+		}
+	}}
 >
 	<div class='flex flex-col'>
 		<div class='department-text'>{departmentText}</div>
@@ -105,5 +105,4 @@
         @apply shadow-md;
         box-shadow: inset 0 0 0 4px theme('colors.primary.800');
     }
-
-</style>
+</style>

packages/client/src/components/atom/DepartmentSelectionGroup.svelte

@@ -59,4 +59,4 @@
         scrollbar-color: #c2c2c2 #e0e0e0;
         scrollbar-width: thin;
     }
-</style>
+</style>

packages/client/src/components/atom/Divider.svelte

@@ -3,4 +3,4 @@
 	export { clazz as class };
 </script>
 
-<hr class='{clazz} w-full h-0.5 bg-gray-300' />
+<hr class='{clazz} w-full h-0.5 bg-gray-300' />

packages/client/src/components/atom/ErrorScreen.svelte

@@ -18,4 +18,4 @@
 </div>
 
 <style>
-</style>
+</style>

packages/client/src/components/atom/FloorMap.svelte

@@ -14,21 +14,30 @@
 
 	$: if ($config.success && selectedBuildingId) {
 		const serviceConfig = getServiceConfig($config?.result);
-		alt = `${getBuildingName(serviceConfig.buildings, selectedBuildingId)} ${selectedFloor}층 배치도`;
+		alt = `${getBuildingName(
+			serviceConfig.buildings,
+			selectedBuildingId
+		)} ${selectedFloor}층 배치도`;
 	}
 </script>
+
 {#key `${selectedBuildingId}-${selectedFloor}`}
-	<div style:--bg-img='url("/floorMaps/{selectedBuildingId}/{selectedFloor}.svg")' class='{clazz} w-full h-full bg'
-			 in:fly={{ y: 100, duration: 300 }} aria-label={alt}>
+	<div
+		style:--bg-img='url("/floorMaps/{selectedBuildingId}/{selectedFloor}.png")'
+		class='{clazz} w-full h-full bg'
+		in:fly={{ y: 100, duration: 300 }}
+		aria-label={alt}
+	>
 		{#if selectedSectionId}
-			<div in:fade style:--locker-img='url("/floorMaps/{selectedBuildingId}/{selectedFloor}/{selectedSectionId}.svg"'
-					 class='w-full h-full locker animate-pulse transition-all'></div>
+			<div
+				in:fade
+				style:--locker-img='url("/floorMaps/{selectedBuildingId}/{selectedFloor}/{selectedSectionId}.svg")'
+				class='w-full h-full locker animate-pulse transition-all'></div>
 		{/if}
 	</div>
 {/key}
 
 <style>
-
     .bg {
         background-image: var(--bg-img);
         background-repeat: no-repeat;
@@ -43,5 +52,3 @@
         background-position: center;
     }
 </style>
-
-

packages/client/src/components/atom/FloorStatus.svelte

@@ -1,5 +1,4 @@
 <script lang='ts'>
-
 	import { config } from '$lib/store';
 	import { getServiceConfig } from '$lib/api/config';
 
@@ -9,57 +8,73 @@
 	export let totalLocker: number;
 	let clazz = '';
 	export { clazz as class };
-	$: buildingDisplay = $config && $config.success && (getServiceConfig($config.result).buildings[building]?.name ?? '알 수 없음');
+	$: buildingDisplay =
+		$config &&
+		$config.success &&
+		(getServiceConfig($config.result).buildings[building]?.name ?? '알 수 없음');
 	$: floorDisplay = !(floor ?? '').startsWith('B') ? `${floor}F` : floor;
-	$: percentage = totalLocker ? Math.round(((totalLocker - (lockerLeft ?? 0)) / totalLocker) * 100) : 0;
+	$: percentage = totalLocker
+		? Math.round(((totalLocker - (lockerLeft ?? 0)) / totalLocker) * 100)
+		: 0;
 </script>
 
-<div class={`${clazz || ''} ${lockerLeft <= 0 ? 'disabled' : ''} relative border-2 rounded-2xl overflow-hidden`}>
-	<div class='progress absolute top-0 left-0 bg-gray-100 rounded-2xl h-full' style='width: {percentage}%'></div>
+<div
+	class={`${clazz || ''} ${
+		lockerLeft <= 0 ? 'disabled' : ''
+	} relative border-2 rounded-2xl overflow-hidden`}
+>
+	<div
+		class='progress absolute top-0 left-0 bg-gray-100 rounded-2xl h-full'
+		style='width: {percentage}%'
+	/>
 	<div class='absolute top-0 left-0 flex justify-between items-center px-3 w-full h-full'>
-		<div class='flex justify-end items-center px-3 font-bold text-gray-400' style='width: {percentage}%'>
+		<div
+			class='flex justify-end items-center px-3 font-bold text-gray-400'
+			style='width: {percentage}%'
+		>
 			<span class='hidden md:inline'>
 				{#if percentage >= 20}
-				{percentage}%
-			{/if}
+					{percentage}%
+				{/if}
 			</span>
-
 		</div>
 		<div class='font-bold'>
-			<span class='locker-left text-primary-800 text-4xl'>{lockerLeft}</span><span class='text-xl'>/{totalLocker}</span>
+			<span class='locker-left text-primary-800 text-4xl'>{lockerLeft}</span><span class='text-xl'
+		>/{totalLocker}</span
+		>
 		</div>
 	</div>
-	<div class='absolute top-0 left-0 flex flex-row relative items-center justify-between gap-5 px-4 py-1.5'>
+	<div
+		class='absolute top-0 left-0 flex flex-row relative items-center justify-between gap-5 px-4 py-1.5'
+	>
 		<div class='flex flex-col'>
 			<p class='text-sm text-gray-500'>{buildingDisplay}</p>
 			<div class='flex text-3xl font-bold gap-5'>
 				<div>{floorDisplay} |</div>
 				<div>
-				<span class='hidden sm:inline'>
-				{#if lockerLeft > 0}
-					예약 가능
-				{:else}
-					예약 불가
-				{/if}
-				</span>
+					<span class='hidden sm:inline'>
+						{#if lockerLeft > 0}
+							예약 가능
+						{:else}
+							예약 불가
+						{/if}
+					</span>
 				</div>
 			</div>
 		</div>
-
 	</div>
 </div>
 
-
 <style>
-		.disabled {
-			@apply border-gray-300 text-gray-400 bg-gray-300;
-		}
+    .disabled {
+        @apply border-gray-300 text-gray-400 bg-gray-300;
+    }
 
-		.disabled .progress {
-				@apply bg-gray-300;
-		}
+    .disabled .progress {
+        @apply bg-gray-300;
+    }
 
-		.disabled .locker-left {
-				@apply text-red-600;
-		}
-</style>
+    .disabled .locker-left {
+        @apply text-red-600;
+    }
+</style>

packages/client/src/components/atom/LoadingScreen.svelte

@@ -5,13 +5,7 @@
 	export { clazz as class };
 </script>
 
-<div class={clazz}>
+<div class='{clazz} h-full bg-gray-200 text-gray-400 flex flex-col justify-center items-center'>
 	<ArrowClockwise class='animate-spin w-16 h-16' />
 	<p>불러오는 중...</p>
 </div>
-
-<style>
-    div {
-        @apply h-full bg-gray-200 text-gray-400 flex flex-col justify-center items-center;
-    }
-</style>