feat : 모바일 UI에 로그인 기능 추가

Author: y00eunji

apps/pyconkr/src/components/layout/SignInButton/index.tsx

@@ -1,5 +1,5 @@
 import * as Shop from "@frontend/shop";
-import { Login } from "@mui/icons-material";
+import { Login, Logout } from "@mui/icons-material";
 import { Button, Stack } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useNavigate } from "react-router-dom";
@@ -12,15 +12,32 @@ type InnerSignInButtonImplPropType = {
   onSignOut?: () => void;
   isMobile?: boolean;
   isMainPath?: boolean;
+  onClose?: () => void;
 };
 
-const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loading, signedIn, onSignOut, isMobile = false, isMainPath = true }) => {
+const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({
+  loading,
+  signedIn,
+  onSignOut,
+  isMobile = false,
+  isMainPath = true,
+  onClose,
+}) => {
   const navigate = useNavigate();
   const { language } = useAppContext();
 
   const signInBtnStr = language === "ko" ? "로그인" : "Sign In";
   const signOutBtnStr = language === "ko" ? "로그아웃" : "Sign Out";
 
+  const handleClick = () => {
+    if (signedIn) {
+      onSignOut?.();
+    } else {
+      onClose?.();
+      navigate("/account/sign-in");
+    }
+  };
+
   if (isMobile) {
     return (
       <Button
@@ -39,10 +56,10 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loadin
           },
         }}
         loading={loading}
-        onClick={() => (signedIn ? onSignOut?.() : navigate("/account/sign-in"))}
+        onClick={handleClick}
       >
-        <Stack direction="row" alignItems="center" spacing={0.5}>
-          <Login fontSize="small" />
+        <Stack direction="row" alignItems="center" sx={{ gap: "3px" }}>
+          {signedIn ? <Logout fontSize="small" /> : <Login fontSize="small" />}
           {signedIn ? signOutBtnStr : signInBtnStr}
         </Stack>
       </Button>
@@ -60,15 +77,27 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loadin
   );
 };
 
-export const SignInButton: React.FC<{ isMobile?: boolean; isMainPath?: boolean }> = ({ isMobile = false, isMainPath = true }) => {
+export const SignInButton: React.FC<{ isMobile?: boolean; isMainPath?: boolean; onClose?: () => void }> = ({
+  isMobile = false,
+  isMainPath = true,
+  onClose,
+}) => {
   const SignInWithErrorBoundary = ErrorBoundary.with(
-    { fallback: <InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} /> },
-    Suspense.with({ fallback: <InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} /> }, () => {
+    { fallback: <InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> },
+    Suspense.with({ fallback: <InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> }, () => {
       const shopAPIClient = Shop.Hooks.useShopClient();
       const signOutMutation = Shop.Hooks.useSignOutMutation(shopAPIClient);
       const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
 
-      return <InnerSignInButtonImpl signedIn={data !== null} onSignOut={signOutMutation.mutate} isMobile={isMobile} isMainPath={isMainPath} />;
+      return (
+        <InnerSignInButtonImpl
+          signedIn={data !== null}
+          onSignOut={signOutMutation.mutate}
+          isMobile={isMobile}
+          isMainPath={isMainPath}
+          onClose={onClose}
+        />
+      );
     })
   );