feat: 등록 QR 코드 링크 추가

Author: MU-Software

apps/pyconkr/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx

@@ -11,26 +11,24 @@ interface MobileLanguageToggleProps {
 export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ isMainPath = true }) => {
   const { language, setAppContext } = useAppContext();
 
-  const handleLanguageChange = (newLanguage: "ko" | "en") => {
+  const toggleLanguage = () => {
+    const newLanguage = language === "ko" ? "en" : "ko";
     localStorage.setItem(LOCAL_STORAGE_LANGUAGE_KEY, newLanguage);
     setAppContext((ps) => ({ ...ps, language: newLanguage }));
   };
+
   return (
-    <ToggleContainer isMainPath={isMainPath}>
-      <LanguageButton isActive={language === "ko"} isMainPath={isMainPath} onClick={() => handleLanguageChange("ko")}>
-        KO
-      </LanguageButton>
-      <LanguageButton isActive={language === "en"} isMainPath={isMainPath} onClick={() => handleLanguageChange("en")}>
-        EN
-      </LanguageButton>
+    <ToggleContainer isMainPath={isMainPath} onClick={toggleLanguage}>
+      <LanguageButton isActive={language === "ko"} isMainPath={isMainPath} children="KO" />
+      <LanguageButton isActive={language === "en"} isMainPath={isMainPath} children="EN" />
     </ToggleContainer>
   );
 };
 
 const ToggleContainer = styled("div")<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
   display: "flex",
-  width: 94,
-  height: 29,
+  width: "4rem",
+  height: "1.5rem",
   border: "1px solid white",
   borderRadius: 15,
   padding: 2,

apps/pyconkr/src/components/layout/Header/Mobile/MobileNavigation.tsx

@@ -9,6 +9,7 @@ import * as R from "remeda";
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileLanguageToggle } from "./MobileLanguageToggle";
 import { SignInButton } from "../../SignInButton";
+import { ScanCodeButton } from "../../UserScanCodeButton";
 
 type MenuType = BackendAPISchemas.NestedSiteMapSchema;
 
@@ -195,12 +196,15 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           {navState.level === "depth3" && renderDepth3Menu()}
         </NavigationContent>
 
-        <BottomActions isMainPath={isMainPath}>
-          <Stack direction="row" alignItems="center" spacing={6.25}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 4, flexGrow: 0, width: "100%" }}>
+          <Stack alignItems="center" justifyContent="center" sx={{ flex: 1 }}>
             <MobileLanguageToggle isMainPath={isMainPath} />
-            <SignInButton isMobile={true} isMainPath={isMainPath} onClose={handleClose} />
           </Stack>
-        </BottomActions>
+          <ScanCodeButton />
+          <Stack alignItems="center" justifyContent="center" sx={{ flex: 1 }}>
+            <SignInButton isMobile isMainPath={isMainPath} onClose={handleClose} />
+          </Stack>
+        </Stack>
       </DrawerContent>
     </StyledDrawer>
   );
@@ -300,12 +304,6 @@ const MenuChip = styled(Chip)<{ isMainPath?: boolean }>(({ theme, isMainPath = t
   },
 }));
 
-const BottomActions = styled(Stack)<{ isMainPath: boolean }>({
-  padding: "20px 23px",
-  gap: 50,
-  alignItems: "center",
-});
-
 const HeaderTitle = styled(Typography)<{ isMainPath: boolean }>(({ theme, isMainPath }) => ({
   color: isMainPath ? theme.palette.mobileHeader.main.text : theme.palette.mobileHeader.sub.text,
   fontSize: 18,

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

@@ -11,6 +11,7 @@ import { useAppContext } from "../../../contexts/app_context";
 import { CartBadgeButton } from "../CartBadgeButton";
 import LanguageSelector from "../LanguageSelector";
 import { SignInButton } from "../SignInButton";
+import { ScanCodeIconButton } from "../UserScanCodeButton";
 import { MobileHeader } from "./Mobile/MobileHeader";
 
 type MenuType = BackendAPISchemas.NestedSiteMapSchema;
@@ -148,6 +149,7 @@ const Header: React.FC = () => {
           <Stack direction="row" alignItems="center" gap={1} sx={{ marginLeft: "auto" }}>
             <LanguageSelector />
             <CartBadgeButton />
+            <ScanCodeIconButton />
             <SignInButton />
           </Stack>
         </NavSideElementContainer>

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

@@ -49,7 +49,7 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({
           fontWeight: 500,
           textTransform: "none",
           minWidth: "auto",
-          padding: "0 13px",
+          padding: 0,
 
           "&:hover": {
             backgroundColor: isMainPath ? "rgba(255, 255, 255, 0.1)" : "rgba(18, 109, 127, 0.1)",

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

@@ -0,0 +1,56 @@
+import * as Shop from "@frontend/shop";
+import { QrCode2 } from "@mui/icons-material";
+import { Button, IconButton, IconButtonProps } from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import * as React from "react";
+
+import { useAppContext } from "../../../contexts/app_context";
+
+export const ScanCodeIconButton: React.FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
+  { fallback: <React.Fragment /> },
+  ErrorBoundary.with({ fallback: <React.Fragment /> }, ({ sx }) => {
+    const shopAPIClient = Shop.Hooks.useShopClient();
+    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+
+    const iconBtnStyle: IconButtonProps["sx"] = (theme) => ({
+      color: theme.palette.primary.nonFocus,
+      "&:hover": { color: theme.palette.primary.dark },
+      "&:active": { color: theme.palette.primary.main },
+      transition: "color 0.4s ease, background-color 0.4s ease",
+    });
+
+    return (
+      <a href={data.scancode_url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton children={<QrCode2 />} sx={sx ?? iconBtnStyle} />
+      </a>
+    );
+  })
+);
+
+export const ScanCodeButton: React.FC = Suspense.with(
+  { fallback: null },
+  ErrorBoundary.with({ fallback: null }, () => {
+    const { language } = useAppContext();
+    const shopAPIClient = Shop.Hooks.useShopClient();
+    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+
+    const buttonText = language === "ko" ? "등록 코드" : "Entrance QR Code";
+
+    return (
+      <a
+        href={data.scancode_url}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          textDecoration: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1,
+        }}
+      >
+        <Button startIcon={<QrCode2 />} sx={{ color: "white", p: 0, textTransform: "none", lineHeight: 1 }} children={buttonText} />
+      </a>
+    );
+  })
+);

packages/shop/src/apis/index.ts

@@ -67,6 +67,12 @@ namespace ShopAPIs {
     }
   };
 
+  /**
+   * 현재 사용자의 row 정보를 가져옵니다.
+   * @returns 로그인 정보
+   */
+  export const retrieveUserRowInfo = (client: ShopAPIClient) => async () => client.get<ShopSchemas.UserRow>("v1/users/");
+
   /**
    * 노출 중인 모든 상품의 목록을 가져옵니다.
    * @returns 노출 중인 모든 상품의 목록

packages/shop/src/hooks/index.ts

@@ -9,6 +9,7 @@ import ShopSchemas from "../schemas";
 const QUERY_KEYS = {
   BASE: ["query", "shop"],
   USER: ["query", "shop", "user"],
+  USER_ROW: ["query", "shop", "user_row"],
   PRODUCT_LIST: ["query", "shop", "products"],
   CART_INFO: ["query", "shop", "cart"],
   ORDER_LIST: ["query", "shop", "orders"],
@@ -48,6 +49,13 @@ namespace ShopHooks {
       retry: 3,
     });
 
+  export const useUserInfo = (client: ShopAPIClient) =>
+    useSuspenseQuery({
+      queryKey: [...QUERY_KEYS.USER_ROW, client.language],
+      queryFn: ShopAPIs.retrieveUserRowInfo(client),
+      retry: 3,
+    });
+
   export const useSignInWithEmailMutation = (client: ShopAPIClient) =>
     useMutation({
       mutationKey: MUTATION_KEYS.USER_SIGN_IN_EMAIL,

packages/shop/src/schemas/index.ts

@@ -74,6 +74,12 @@ namespace ShopSchemas {
     };
   };
 
+  export type UserRow = {
+    id: string;
+    email: string;
+    scancode_url: string;
+  };
+
   export type Option = {
     id: string;
     name: string;