Merge pull request #310 from EATSTEAK/dev

v0.11.0 릴리즈

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lockerweb",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "SSU IT Collage Locker system.",
   "private": true,
   "scripts": {

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.10.3",
+  "version": "0.11.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/components/atom/Button.svelte

@@ -28,7 +28,8 @@
 	 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
+	 hover:brightness-95 hover:shadow-lg
+	 focus:brightness-90
 	 active:brightness-75 active:shadow-md'
 	{...$$restProps}
 >

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

@@ -49,7 +49,9 @@
 	aspect-square max-w-[160px]
 	rounded-2xl bg-gray-100 box-border transition-all
 	flex-grow-0 flex-shrink-0 basis-[160px]
-	hover:brightness-90`}
+	hover:brightness-95
+	focus:brightness-90
+	active:brightness-75`}
 	on:click
 	on:click|preventDefault={() => {
 		ctx.update(id);
@@ -87,22 +89,18 @@
     }
 
     .unavailable.active {
-        @apply border-rose-600;
-        box-shadow: inset 0 0 0 4px theme('colors.red.600');
+        @apply ring-4 ring-inset ring-red-600;
     }
 
     .unavailable.active:hover {
-        @apply shadow-md;
-        box-shadow: inset 0 0 0 4px theme('colors.red.600');
+        @apply shadow-md ring-4 ring-inset ring-red-600;
     }
 
     .active {
-        @apply border-primary-800;
-        box-shadow: inset 0 0 0 4px theme('colors.primary.800');
+        @apply border-primary-800 ring-4 ring-inset ring-primary-800;
     }
 
     .active:hover {
-        @apply shadow-md;
-        box-shadow: inset 0 0 0 4px theme('colors.primary.800');
+        @apply shadow-md ring-4 ring-inset ring-primary-800;
     }
 </style>

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

@@ -21,7 +21,7 @@
 <div
 	class={`${clazz || ''} ${
 		lockerLeft <= 0 ? 'disabled' : ''
-	} relative border-2 rounded-2xl overflow-hidden`}
+	} relative ring-2 ring-gray-300 rounded-2xl overflow-hidden`}
 >
 	<div
 		class='progress absolute top-0 left-0 bg-gray-100 rounded-2xl h-full'
@@ -32,7 +32,7 @@
 			class='flex justify-end items-center px-3 font-bold text-gray-400'
 			style='width: {percentage}%'
 		>
-			<span class='hidden md:inline'>
+			<span class='hidden lg:inline'>
 				{#if percentage >= 20}
 					{percentage}%
 				{/if}
@@ -67,7 +67,7 @@
 
 <style>
     .disabled {
-        @apply border-gray-300 text-gray-400 bg-gray-300;
+        @apply ring-gray-300 text-gray-400 bg-gray-300;
     }
 
     .disabled .progress {

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

@@ -13,7 +13,7 @@
 </script>
 
 <button
-	class='{clazz} p-1 rounded-md hover:brightness-95 hover:backdrop-brightness-95 active:backdrop-brightness-75 active:brightness-75'
+	class='{clazz} p-1 rounded-md hover:brightness-95 hover:backdrop-brightness-95 focus:brightness-90 focus:backdrop-brightness-90 active:backdrop-brightness-75 active:brightness-75'
 	on:click={() => set(!$collapsed)}
 >
 	<ChevronDown class="transition-all{$collapsed ? ' rotate-180' : ''}" />

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

@@ -66,7 +66,7 @@
 
 <style>
     .pagination-btn:not(:disabled):hover {
-        @apply brightness-90 scale-[1.01];
+        @apply brightness-90 scale-101;
     }
 
     .pagination-btn:not(:disabled):focus {

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

@@ -32,9 +32,9 @@
 	class:active={selected}
 	class='{clazz}
 		bg-white box-border border-l-4 border-white transition-all p-4 outline-0 outline-none
-		hover:brightness-90 hover:scale-[1.01]
+		hover:brightness-90 hover:scale-101
 		active:brightness-75 active:border-primary-800 active:font-bold active:scale-100
-		focus:brightness-75'
+		focus:brightness-90'
 	on:click
 	on:click|preventDefault={() => {
 		ctx.update(id);

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

@@ -32,9 +32,9 @@
 	class:active={selected}
 	class='{clazz}
 		bg-white text-gray-800 box-border rounded-xl transition-all p-4 outline-0 outline-none
-		hover:brightness-90
+		hover:brightness-95
 		active:brightness-75 active:bg-primary-800 active:text-white active:font-bold
-		focus:outline-1 focus:outline-primary-600'
+		focus:brightness-90 focus:outline-1 focus:outline-primary-600'
 	on:click
 	on:click|preventDefault={() => {
 		ctx.update(id);

packages/client/src/components/atom/form/Checkbox.svelte

@@ -44,11 +44,11 @@
     }
 
     input:hover:not(:disabled) {
-        @apply brightness-90 scale-[1.01];
+        @apply brightness-90 scale-101;
     }
 
     input:focus {
-        @apply outline-0 scale-100;
+        @apply brightness-90 outline-0 scale-100;
     }
 
     input:active:not(:disabled) {

packages/client/src/components/atom/form/DateTimeInput.svelte

@@ -24,8 +24,12 @@
 		mounted = true;
 	});
 
-	$: if (mounted && localDate) {
-		value = new Date(localDate);
+	$: if (mounted) {
+		if(localDate) {
+			value = new Date(localDate);
+		} else {
+			value = null;
+		}
 	}
 </script>
 

packages/client/src/components/molecule/Credit.svelte

@@ -13,8 +13,13 @@
 	import Dismiss from '../../icons/Dismiss.svelte';
 	import Eatsteak from '../../icons/creator/Eatsteak.svelte';
 	import Twince from '../../icons/creator/Twince.svelte';
+	import { scale } from 'svelte/transition';
+	import { backInOut } from 'svelte/easing';
 
 	let open = false;
+
+	let showLove = false;
+	let noLove = true;
 </script>
 
 <section class='flex gap-1 items-center'>
@@ -37,6 +42,7 @@
 <Modal
 	title='정보'
 	bind:open
+	class='{!noLove ? "opacity-0" : ""}'
 	on:close={() => (open = false)}
 	on:click:secondary={() => (open = false)}
 	on:click={() => window.open('https://github.com/EATSTEAK/lockerweb', '_blank').focus()}
@@ -71,15 +77,23 @@
 				href='https://github.com/EATSTEAK'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#FF8C00] active:!shadow-none active:brightness-95'
+				aria-label='EATSTEAK'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#FF8C00]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<Eatsteak />
 			</Button>
 			<Button
 				href='https://github.com/Twince'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#F38630] active:!shadow-none active:brightness-95'
+				aria-label='Twince'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#F38630]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<Twince />
 			</Button>
@@ -92,60 +106,87 @@
 				href='https://github.com/TEAM-MAT'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-gray-700 active:!shadow-none active:brightness-95'
+				aria-label='TEAM-MAT'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-gray-700
+				active:!shadow-none active:brightness-95'
 			>
 				TEAM-MAT
 			</Button>
 		</div>
 	</div>
 	<div class='my-5 font-medium leading-10'>
-		<p class='text-gray-500 text-center'>Made with</p>
+		<p class='text-gray-500 text-center'>Powered by</p>
 		<div class='flex flex-row justify-center items-center gap-2 text-gray-500'>
 			<Button
 				href='https://svelte.dev'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#FF3E00] active:!shadow-none active:brightness-95'
+				aria-label='Svelte'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#FF3E00]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<Svelte />
 			</Button>
 			<Button
 				href='https://tailwindcss.com'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#38BDF8] active:!shadow-none active:brightness-95'
+				aria-label='Tailwind CSS'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#38BDF8]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<TailwindCss />
 			</Button>
 			<Button
 				href='https://aws.amazon.com/lambda/'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#FF9900] active:!shadow-none active:brightness-95'
+				aria-label='AWS Lambda'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#FF9900]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<AwsLambda />
 			</Button>
 			<Button
 				href='https://aws.amazon.com/dynamodb/'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#4053D6] active:!shadow-none active:brightness-95'
+				aria-label='Amazon DynamoDB'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#4053D6]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<AmazonDynamoDB />
 			</Button>
 			<Button
 				href='https://aws.amazon.com/api-gateway/'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#FF4F8B] active:!shadow-none active:brightness-95'
+				aria-label='Amazon API Gateway'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#FF4F8B]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<AmazonAPIGateway />
 			</Button>
 			<Button
 				href='https://aws.amazon.com/s3/'
 				rel='external'
 				target='_blank'
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-[#569A31] active:!shadow-none active:brightness-95'
+				aria-label='Amazon S3'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-[#569A31]
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
 			>
 				<AmazonS3 />
 			</Button>
@@ -155,7 +196,12 @@
 		<p class='text-gray-500 text-center'>and...</p>
 		<div class='flex flex-row justify-center items-center gap-1 text-gray-500'>
 			<Button
-				class='px-0 py-0 !shadow-none hover:!shadow-none hover:text-rose-600 active:!shadow-none active:brightness-95'
+				aria-label='Love'
+				class='px-0 py-0 !shadow-none
+				hover:!shadow-none hover:text-rose-600
+				active:!shadow-none active:brightness-95
+				after:content-[attr(aria-label)] tooltip'
+				on:click={() => showLove = true}
 			>
 				<Heart />
 			</Button>
@@ -164,3 +210,22 @@
 	<Dismiss slot='secondaryIcon' />
 	<GitHub slot='primaryIcon' />
 </Modal>
+
+{#if showLove}
+	<div in:scale={{ duration: 500, easing: backInOut }} out:scale={{ duration: 500, delay: 1000, easing: backInOut }} on:introstart={() => noLove = false} on:outroend={() => noLove = true} on:introend={() => showLove = false} class='fixed z-[9999] w-full h-full flex justify-center items-center top-0 left-0'>
+		<Heart class='w-[50vw] h-[50vw] text-rose-600' />
+	</div>
+{/if}
+
+<style>
+    :global(.tooltip) {
+        @apply hover:after:opacity-100 hover:after:visible;
+    }
+
+    :global(.tooltip::after) {
+        @apply transition-all invisible opacity-0
+        bg-gray-800 bg-opacity-75 rounded-xl
+        text-white absolute top-full left-1/2 px-2
+        -translate-x-1/2 w-max;
+    }
+</style>