feat: 로그인 버튼 구현

Author: MU-Software

apps/pyconkr/src/App.tsx

@@ -5,6 +5,7 @@ import * as R from "remeda";
 
 import MainLayout from "./components/layout/index.tsx";
 import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
+import { ShopSignInPage } from "./components/pages/sign_in.tsx";
 import { Test } from "./components/pages/test.tsx";
 import { IS_DEBUG_ENV } from "./consts";
 import { useAppContext } from "./contexts/app_context";
@@ -40,6 +41,7 @@ export const App: React.FC = () => {
     <Routes>
       <Route element={<MainLayout />}>
         {IS_DEBUG_ENV && <Route path="/debug" element={<Test />} />}
+        <Route path="/account/sign-in" element={<ShopSignInPage />} />
         <Route path="/pages/:id" element={<PageIdParamRenderer />} />
         <Route path="*" element={<RouteRenderer />} />
       </Route>

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

@@ -9,7 +9,7 @@ import * as R from "remeda";
 import BackendAPISchemas from "../../../../../../packages/common/src/schemas/backendAPI";
 import { useAppContext } from "../../../contexts/app_context";
 import LanguageSelector from "../LanguageSelector";
-import LoginButton from "../LoginButton";
+import { SignInButton } from "../SignInButton";
 
 type MenuType = BackendAPISchemas.NestedSiteMapSchema;
 type MenuOrUndefinedType = MenuType | undefined;
@@ -129,7 +129,7 @@ const Header: React.FC = () => {
         <NavSideElementContainer>
           <Stack direction="row" alignItems="center" gap={1} sx={{ marginLeft: "auto" }}>
             <LanguageSelector />
-            <LoginButton />
+            <SignInButton />
           </Stack>
         </NavSideElementContainer>
       </HeaderContainer>

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

@@ -0,0 +1,41 @@
+import * as Shop from "@frontend/shop";
+import { Button } from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import { useNavigate } from "react-router-dom";
+
+import { useAppContext } from "../../../contexts/app_context";
+
+type InnerSignInButtonImplPropType = {
+  loading?: boolean;
+  signedIn?: boolean;
+  onSignOut?: () => void;
+};
+
+const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({ loading, signedIn, onSignOut }) => {
+  const navigate = useNavigate();
+  const { language } = useAppContext();
+
+  const signInBtnStr = language === "ko" ? "로그인" : "Sign In";
+  const signOutBtnStr = language === "ko" ? "로그아웃" : "Sign Out";
+
+  return (
+    <Button
+      variant="text"
+      sx={({ palette }) => ({ color: palette.primary.dark })}
+      loading={loading}
+      onClick={() => (signedIn ? onSignOut?.() : navigate("/account/sign-in"))}
+      children={signedIn ? signOutBtnStr : signInBtnStr}
+    />
+  );
+};
+
+export const SignInButton: React.FC = ErrorBoundary.with(
+  { fallback: <InnerSignInButtonImpl /> },
+  Suspense.with({ fallback: <InnerSignInButtonImpl loading /> }, () => {
+    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} />;
+  })
+);

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

@@ -0,0 +1,126 @@
+import * as Shop from "@frontend/shop";
+import { AccountCircleOutlined, Google } from "@mui/icons-material";
+import { Backdrop, Button, ButtonProps, CircularProgress, Stack, styled, Typography } from "@mui/material";
+import { Suspense } from "@suspensive/react";
+import { enqueueSnackbar, OptionsObject } from "notistack";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAppContext } from "../../contexts/app_context";
+
+const SignInPageContainer = styled(Stack)(({ theme }) => ({
+  height: "75%",
+  width: "100%",
+  maxWidth: "1200px",
+
+  justifyContent: "flex-start",
+  alignItems: "center",
+
+  paddingTop: theme.spacing(8),
+  paddingBottom: theme.spacing(8),
+
+  paddingRight: theme.spacing(16),
+  paddingLeft: theme.spacing(16),
+
+  [theme.breakpoints.down("lg")]: {
+    padding: theme.spacing(4),
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: theme.spacing(2),
+  },
+}));
+
+type PageeStateType = {
+  openBackdrop: boolean;
+};
+
+export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
+  const { setAppContext, language } = useAppContext();
+  const [state, setState] = React.useState<PageeStateType>({ openBackdrop: false });
+  const navigate = useNavigate();
+  const shopAPIClient = Shop.Hooks.useShopClient();
+  const SignInMutation = Shop.Hooks.useSignInWithSNSMutation(shopAPIClient);
+  const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+
+  const shouldOpenBackdrop = SignInMutation.isPending || state.openBackdrop;
+
+  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+    enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
+
+  const triggerSignIn = (provider: "google" | "kakao" | "naver") => {
+    setState((ps) => ({ ...ps, openBackdrop: true }));
+    SignInMutation.mutate({ provider, callback_url: window.location.origin });
+  };
+  const signInWithGoogle = () => triggerSignIn("google");
+  const signInWithKakao = () => triggerSignIn("kakao");
+  const signInWithNaver = () => triggerSignIn("naver");
+
+  const signInTitleStr = language === "ko" ? "로그인" : "Sign In";
+  const signInWithGoogleStr = language === "ko" ? "구글로 로그인" : "Sign In with Google";
+  const signInWithKakaoStr = language === "ko" ? "카카오로 로그인" : "Sign In with Kakao";
+  const signInWithNaverStr = language === "ko" ? "네이버로 로그인" : "Sign In with Naver";
+
+  React.useEffect(() => {
+    if (data && data.meta.is_authenticated) {
+      addSnackbar(
+        language === "ko"
+          ? `이미 ${data.data.user.username}님으로 로그인되어 있습니다!`
+          : `You are already signed in as ${data.data.user.username}!`,
+        "success"
+      );
+      navigate("/");
+      return;
+    }
+
+    setAppContext((prev) => ({
+      ...prev,
+      title: signInTitleStr,
+      shouldShowTitleBanner: true,
+      shouldShowSponsorBanner: false,
+    }));
+  }, [signInTitleStr]);
+
+  const commonBtnProps: ButtonProps = {
+    variant: "contained",
+    fullWidth: true,
+    size: "large",
+    disabled: SignInMutation.isPending,
+  };
+  const commonBtnSxProps: ButtonProps["sx"] = {
+    textTransform: "none",
+  };
+  const btnProps: ButtonProps[] = [
+    {
+      children: signInWithGoogleStr,
+      onClick: signInWithGoogle,
+      startIcon: <Google />,
+      sx: { ...commonBtnSxProps, backgroundColor: "#4285F4", color: "#fff" },
+    },
+    {
+      children: signInWithNaverStr,
+      onClick: signInWithNaver,
+      startIcon: <AccountCircleOutlined />,
+      sx: { ...commonBtnSxProps, backgroundColor: "#03C75A", color: "#fff" },
+    },
+    {
+      children: signInWithKakaoStr,
+      onClick: signInWithKakao,
+      startIcon: <AccountCircleOutlined />,
+      sx: { ...commonBtnSxProps, backgroundColor: "#FEE500", color: "#000" },
+    },
+  ];
+
+  return (
+    <>
+      <SignInPageContainer spacing={6}>
+        <Typography variant="h4" sx={{ textAlign: "center", fontWeight: "bolder" }} children={signInTitleStr} />
+        <Stack spacing={1} sx={{ width: "100%", maxWidth: "400px" }}>
+          {btnProps.map((props, index) => (
+            <Button key={index} {...commonBtnProps} {...props} />
+          ))}
+        </Stack>
+      </SignInPageContainer>
+      <Backdrop sx={({ zIndex }) => ({ zIndex: zIndex.drawer + 1 })} open={shouldOpenBackdrop} onClick={() => {}} />
+    </>
+  );
+});

apps/pyconkr/src/components/pages/sign_in.tsx

@@ -45,7 +45,7 @@ namespace ShopAPIs {
    */
   export const signOut = (client: ShopAPIClient) => async () => {
     try {
-      await client.delete<ShopSchemas.UserSignedInStatus>("authn/social/browser/v1/auth/session");
+      await client.delete<void>("authn/social/browser/v1/auth/session");
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (_) {
       return Promise.resolve({});

packages/shop/src/apis/index.ts

@@ -65,6 +65,7 @@ namespace ShopHooks {
     useMutation({
       mutationKey: MUTATION_KEYS.USER_SIGN_OUT,
       mutationFn: ShopAPIs.signOut(client),
+      retry: 0,
       meta: { invalidates: [QUERY_KEYS.BASE] },
     });