From 1dec80b9a07c1f50855e8621e68c2478ae874cf3 Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Sat, 30 Nov 2024 19:50:58 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20auth=20button=20ui=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B2=98=EB=A6=AC=20#240?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/features/auth/AuthButton.style.ts | 10 ++++++++++
 client/src/features/auth/AuthButton.tsx      | 10 ++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 client/src/features/auth/AuthButton.style.ts

diff --git a/client/src/features/auth/AuthButton.style.ts b/client/src/features/auth/AuthButton.style.ts
new file mode 100644
index 00000000..00e65f86
--- /dev/null
+++ b/client/src/features/auth/AuthButton.style.ts
@@ -0,0 +1,10 @@
+import { css } from "@styled-system/css";
+
+export const container = css({
+  display: "flex",
+  gap: "md",
+  flexGrow: 1,
+  justifyContent: "end",
+  alignItems: "center",
+  width: "auto",
+});
diff --git a/client/src/features/auth/AuthButton.tsx b/client/src/features/auth/AuthButton.tsx
index 82dbffea..72c57daa 100644
--- a/client/src/features/auth/AuthButton.tsx
+++ b/client/src/features/auth/AuthButton.tsx
@@ -4,6 +4,8 @@ import { TextButton } from "@components/button/textButton";
 import { Modal } from "@components/modal/modal";
 import { useModal } from "@components/modal/useModal";
 import { AuthModal } from "./AuthModal";
+import { css } from "@styled-system/css";
+import { container } from "./AuthButton.style";
 
 export const AuthButton = () => {
   const isLogin = useCheckLogin();
@@ -23,13 +25,13 @@ export const AuthButton = () => {
   const { mutate: logout } = useLogoutMutation(closeLogoutModal);
 
   return (
-    <>
+    <div className={container}>
       {isLogin ? (
-        <TextButton variant="secondary" onClick={openLogoutModal}>
+        <TextButton onClick={openLogoutModal} variant="secondary">
           로그아웃
         </TextButton>
       ) : (
-        <TextButton variant="secondary" onClick={openAuthModal}>
+        <TextButton onClick={openAuthModal} variant="secondary">
           로그인
         </TextButton>
       )}
@@ -44,6 +46,6 @@ export const AuthButton = () => {
       >
         <p>로그아웃 하시겠습니까?</p>
       </Modal>
-    </>
+    </div>
   );
 };