refactor: auth button ui 변경에 따른 반응형 처리

#240

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",
+});

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>
   );
 };