feat: 모바일 drawer에 로그인 및 장바구니 버튼 추가

Author: MU-Software

apps/pyconkr-2026/src/components/layout/CartBadgeButton/index.tsx

@@ -5,7 +5,9 @@ import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 
-type InnerCartBadgeButtonPropType = {
+type CartBadgeButtonProps = { onClose?: () => void };
+
+type InnerCartBadgeButtonPropType = CartBadgeButtonProps & {
   loading?: boolean;
   count?: number;
 };
@@ -19,24 +21,34 @@ const ColoredIconButton = styled(IconButton)(({ theme }) => ({
 
 const InnerCartBadge = styled(Badge)({ [`& .${badgeClasses.badge}`]: { top: "-12px", right: "-3px" } });
 
-const InnerCartBadgeButton: FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
+const InnerCartBadgeButton: FC<InnerCartBadgeButtonPropType> = ({ loading, count, onClose }) => {
   const navigate = useNavigate();
 
   if (!loading && (count === undefined || count <= 0)) return null;
 
+  const handleClick = () => {
+    onClose?.();
+    navigate("/store/cart");
+  };
+
   return (
-    <ColoredIconButton loading={loading} onClick={() => navigate("/store/cart")}>
+    <ColoredIconButton loading={loading} onClick={handleClick}>
       <ShoppingCart />
       {count !== undefined && count > 0 && <InnerCartBadge badgeContent={count} color="primary" overlap="circular" />}
     </ColoredIconButton>
   );
 };
 
-export const CartBadgeButton: FC = Suspense.with(
-  { fallback: <InnerCartBadgeButton loading /> },
-  ErrorBoundary.with({ fallback: <InnerCartBadgeButton /> }, () => {
-    const shopAPIClient = useShopClient();
-    const { data: cart } = useCart(shopAPIClient);
-    return <InnerCartBadgeButton count={cart?.products.length} loading={false} />;
-  })
+const CartBadgeButtonContent: FC<CartBadgeButtonProps> = ({ onClose }) => {
+  const shopAPIClient = useShopClient();
+  const { data: cart } = useCart(shopAPIClient);
+  return <InnerCartBadgeButton count={cart?.products.length} loading={false} onClose={onClose} />;
+};
+
+export const CartBadgeButton: FC<CartBadgeButtonProps> = ({ onClose }) => (
+  <ErrorBoundary fallback={<InnerCartBadgeButton onClose={onClose} />}>
+    <Suspense fallback={<InnerCartBadgeButton loading onClose={onClose} />}>
+      <CartBadgeButtonContent onClose={onClose} />
+    </Suspense>
+  </ErrorBoundary>
 );

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

@@ -6,7 +6,9 @@ import { FC, useState } from "react";
 import { Link } from "react-router-dom";
 import { isEmpty } from "remeda";
 
+import { CartBadgeButton } from "@apps/pyconkr-2026/components/layout/CartBadgeButton";
 import LanguageSelector from "@apps/pyconkr-2026/components/layout/LanguageSelector";
+import { UserMenuButton } from "@apps/pyconkr-2026/components/layout/UserMenuButton";
 
 import { HamburgerButton } from "./HamburgerButton";
 
@@ -163,9 +165,13 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ isOpen, onClose, s
           {navState.level === "depth3" && renderDepth3Menu()}
         </NavigationContent>
 
-        <Box sx={{ px: 2, py: 3, flexGrow: 0 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 3, flexGrow: 0 }}>
           <LanguageSelector />
-        </Box>
+          <Stack direction="row" alignItems="center">
+            <CartBadgeButton onClose={handleClose} />
+            <UserMenuButton onClose={handleClose} />
+          </Stack>
+        </Stack>
       </DrawerContent>
     </StyledDrawer>
   );

apps/pyconkr-2026/src/components/layout/UserMenuButton/index.tsx

@@ -15,32 +15,36 @@ const ColoredIconButton = styled(IconButton)(({ theme }) => ({
   transition: "color 0.4s ease, background-color 0.4s ease",
 }));
 
-type InnerUserMenuButtonPropType = {
+type UserMenuButtonProps = { onClose?: () => void };
+
+type InnerUserMenuButtonPropType = UserMenuButtonProps & {
   loading?: boolean;
   user?: UserSignedInStatus["data"]["user"];
   onSignOut?: () => void;
 };
 
-const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, onSignOut }) => {
+const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, onSignOut, onClose }) => {
   const navigate = useNavigate();
   const { language } = useAppContext();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
 
   const handleOpen = (event: MouseEvent<HTMLElement>) => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
+  const handleMenuClose = () => setAnchorEl(null);
 
   const signInLabel = language === "ko" ? "로그인" : "Sign In";
   const orderHistoryLabel = language === "ko" ? "결제 내역" : "Order History";
   const signOutLabel = language === "ko" ? "로그아웃" : "Sign Out";
 
   const goTo = (path: string) => {
-    handleClose();
+    handleMenuClose();
+    onClose?.();
     navigate(path);
   };
 
   const handleSignOut = () => {
-    handleClose();
+    handleMenuClose();
+    onClose?.();
     onSignOut?.();
   };
 
@@ -59,7 +63,7 @@ const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, o
         id="user-menu"
         anchorEl={anchorEl}
         open={open}
-        onClose={handleClose}
+        onClose={handleMenuClose}
         anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
         transformOrigin={{ vertical: "top", horizontal: "right" }}
         slotProps={{ paper: { sx: { minWidth: 180, mt: 0.5 } } }}
@@ -98,18 +102,18 @@ const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, o
   );
 };
 
-const UserMenuButtonContent: FC = () => {
+const UserMenuButtonContent: FC<UserMenuButtonProps> = ({ onClose }) => {
   const shopAPIClient = useShopClient();
   const signOutMutation = useSignOutMutation(shopAPIClient);
   const { data } = useUserStatus(shopAPIClient);
 
-  return <InnerUserMenuButton user={data?.data.user} onSignOut={signOutMutation.mutate} />;
+  return <InnerUserMenuButton user={data?.data.user} onSignOut={signOutMutation.mutate} onClose={onClose} />;
 };
 
-export const UserMenuButton: FC = () => (
-  <ErrorBoundary fallback={<InnerUserMenuButton />}>
-    <Suspense fallback={<InnerUserMenuButton loading />}>
-      <UserMenuButtonContent />
+export const UserMenuButton: FC<UserMenuButtonProps> = ({ onClose }) => (
+  <ErrorBoundary fallback={<InnerUserMenuButton onClose={onClose} />}>
+    <Suspense fallback={<InnerUserMenuButton loading onClose={onClose} />}>
+      <UserMenuButtonContent onClose={onClose} />
     </Suspense>
   </ErrorBoundary>
 );