feat: 헤더에 장바구니 버튼 추가

Author: MU-Software

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

@@ -0,0 +1,33 @@
+import * as Shop from "@frontend/shop";
+import { ShoppingCart } from "@mui/icons-material";
+import { Badge, badgeClasses, IconButton, styled } from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+
+type InnerCartBadgeButtonPropType = {
+  loading?: boolean;
+  count?: number;
+};
+
+const InnerCartBadge = styled(Badge)({ [`& .${badgeClasses.badge}`]: { top: "-12px", right: "-3px" } });
+
+const InnerCartBadgeButton: React.FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
+  const navigate = useNavigate();
+
+  return (
+    <IconButton loading={loading} onClick={() => navigate("/store/cart")}>
+      <ShoppingCart />
+      {count && <InnerCartBadge badgeContent={count} color="primary" overlap="circular" />}
+    </IconButton>
+  );
+};
+
+export const CartBadgeButton: React.FC = Suspense.with(
+  { fallback: <InnerCartBadgeButton loading /> },
+  ErrorBoundary.with({ fallback: <InnerCartBadgeButton /> }, () => {
+    const shopAPIClient = Shop.Hooks.useShopClient();
+    const { data: cart } = Shop.Hooks.useCart(shopAPIClient);
+    return <InnerCartBadgeButton count={cart?.products.length} loading={false} />;
+  })
+);

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

@@ -8,6 +8,7 @@ import * as R from "remeda";
 
 import BackendAPISchemas from "../../../../../../packages/common/src/schemas/backendAPI";
 import { useAppContext } from "../../../contexts/app_context";
+import { CartBadgeButton } from "../CartBadgeButton";
 import LanguageSelector from "../LanguageSelector";
 import { SignInButton } from "../SignInButton";
 
@@ -129,6 +130,7 @@ const Header: React.FC = () => {
         <NavSideElementContainer>
           <Stack direction="row" alignItems="center" gap={1} sx={{ marginLeft: "auto" }}>
             <LanguageSelector />
+            <CartBadgeButton />
             <SignInButton />
           </Stack>
         </NavSideElementContainer>