Merge pull request #42 from EATSTEAK/refactor/button

Button 개선
Twinsteak · Aug 21, 2022 · 388547d · 388547d
2 parents 3128344 + b57f214
commit 388547d
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/packages/client/src/components/atom/Button.svelte b/packages/client/src/components/atom/Button.svelte
@@ -4,35 +4,39 @@
 	export { clazz as class };
 </script>
 
-<a class={`${clazz || ''}`} {...$$restProps}>
+<a tabindex='0' class={`${clazz || ''}`} {...$$restProps}>
 	{#if !isIconRight}
-		<div class='btn-icon'>
-			<slot name='icon' />
-		</div>
+		{#if $$slots.icon}
+			<div class='btn-icon'>
+				<slot name='icon' />
+			</div>
+		{/if}
 		<slot />
 	{:else}
 		<slot />
-		<div class='btn-icon'>
-			<slot name='icon' />
-		</div>
+		{#if $$slots.icon}
+			<div class='btn-icon'>
+				<slot name='icon' />
+			</div>
+		{/if}
 	{/if}
 </a>
 
 <style>
     a {
-        @apply flex justify-between rounded-lg shadow-md px-4 py-3 font-bold flex-shrink-0 items-center gap-x-3 m-1 transition-all ease-in;
+        @apply cursor-pointer flex justify-between rounded-lg shadow-md px-4 py-3 font-bold flex-shrink-0 items-center gap-x-3 transition-all ease-in;
     }
 
     a[disabled] {
         @apply backdrop-brightness-75 shadow-none pointer-events-none;
     }
 
     a:hover {
-        @apply brightness-90 drop-shadow-lg;
+        @apply brightness-90 shadow-lg;
     }
 
-    .btn-icon {
-
+    a:active {
+        @apply brightness-75 shadow-md;
     }
 
     :global(.btn-icon path:not([fill="none"])) {