feat: 샵 컴포넌트 아코디언들이 하나씩만 열리도록 수정

MU-Software · MU-Software · commit 13e95174045c · 2025-06-11T16:14:29.000+09:00
diff --git a/packages/common/src/components/mdx_components/one_details_opener.tsx b/packages/common/src/components/mdx_components/one_details_opener.tsx
@@ -0,0 +1,31 @@
+import { AccordionProps } from "@mui/material";
+import * as React from "react";
+
+type PHOpenOneFoldMgrPropType = {
+  children: React.ReactElement<AccordionProps>[];
+};
+
+export const OneDetailsOpener: React.FC<PHOpenOneFoldMgrPropType> = (props) => {
+  const childrenCount = React.Children.count(props.children);
+  const initialFoldState = new Array(childrenCount).fill(false);
+  const [oneFoldOpener, setOneFoldOpener] = React.useState(initialFoldState);
+  const foldStateSwitcher =
+    (index: number): ((event: React.SyntheticEvent<Element, Event>, expanded: boolean) => void) =>
+    (event, expanded) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const newOneFoldOpener = [...initialFoldState];
+      newOneFoldOpener[index] = expanded;
+
+      setOneFoldOpener(newOneFoldOpener);
+    };
+
+  return (
+    <>
+      {React.Children.map(props.children, (child, index) =>
+        React.cloneElement(child, { expanded: oneFoldOpener[index], onChange: foldStateSwitcher(index) })
+      )}
+    </>
+  );
+};
diff --git a/packages/common/src/components/mdx_components/styled_details.tsx b/packages/common/src/components/mdx_components/styled_details.tsx
@@ -3,6 +3,7 @@ import {
   Accordion,
   AccordionActions,
   AccordionDetails,
+  AccordionProps,
   AccordionSummary,
   PaletteColor,
   styled,
@@ -12,12 +13,13 @@ import {
 } from "@mui/material";
 import * as React from "react";
 
-type StyledDetailsProps = React.PropsWithChildren<{
-  expandIcon?: React.ReactNode;
-  open?: boolean;
-  summary?: React.ReactNode;
-  actions?: React.ReactNode;
-}>;
+type StyledDetailsProps = React.PropsWithChildren<
+  AccordionProps & {
+    expandIcon?: React.ReactNode;
+    summary?: React.ReactNode;
+    actions?: React.ReactNode;
+  }
+>;
 
 type BaseStyledDetailsProps = StyledDetailsProps & {
   paletteColor: PaletteColor;
@@ -26,12 +28,14 @@ type BaseStyledDetailsProps = StyledDetailsProps & {
 
 const BaseStyledDetails: React.FC<BaseStyledDetailsProps> = ({
   expandIcon,
-  open,
+  expanded,
+  onChange,
   summary,
   children,
   actions,
   paletteColor,
   transparencyOnExpand,
+  ...props
 }) => {
   const StyledAccordion = styled(Accordion)(({ theme }) => ({
     width: "100%",
@@ -59,7 +63,15 @@ const BaseStyledDetails: React.FC<BaseStyledDetailsProps> = ({
   }));
 
   return (
-    <StyledAccordion expanded={open} disableGutters square elevation={0} slotProps={{ root: { sx: rootSx } }}>
+    <StyledAccordion
+      {...props}
+      expanded={expanded}
+      onChange={onChange}
+      disableGutters
+      square
+      elevation={0}
+      slotProps={{ root: { sx: rootSx } }}
+    >
       <StyledAccordionSummary expandIcon={expandIcon || <DefaultExpandIcon />}>
         {typeof summary === "string" ? <Typography variant="h5">{summary}</Typography> : summary}
       </StyledAccordionSummary>
diff --git a/packages/shop/src/components/features/cart.tsx b/packages/shop/src/components/features/cart.tsx
@@ -1,7 +1,8 @@
 import * as Common from "@frontend/common";
-import { Backdrop, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
+import { AccordionProps, Backdrop, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
 import * as R from "remeda";
 
@@ -10,12 +11,14 @@ import ShopSchemas from "../../schemas";
 import ShopUtils from "../../utils";
 import CommonComponents from "../common";
 
-const CartItem: React.FC<{
-  language: "ko" | "en";
-  cartProdRel: ShopSchemas.OrderProductItem;
-  removeItemFromCartFunc: (cartProductId: string) => void;
-  disabled?: boolean;
-}> = ({ language, cartProdRel, disabled, removeItemFromCartFunc }) => {
+const CartItem: React.FC<
+  Omit<AccordionProps, "children"> & {
+    language: "ko" | "en";
+    cartProdRel: ShopSchemas.OrderProductItem;
+    removeItemFromCartFunc: (cartProductId: string) => void;
+    disabled?: boolean;
+  }
+> = ({ language, cartProdRel, disabled, removeItemFromCartFunc, ...props }) => {
   const cannotModifyOptionsStr =
     language === "ko"
       ? "상품 옵션을 수정하려면 장바구니에서 상품을 삭제한 후 다시 담아주세요."
@@ -25,6 +28,7 @@ const CartItem: React.FC<{
 
   return (
     <Common.Components.MDX.PrimaryStyledDetails
+      {...props}
       summary={cartProdRel.product.name}
       actions={[
         <Button
@@ -74,9 +78,14 @@ export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = Suspens
       openBackdrop: false,
     });
 
+    const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+      enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
+
     const cartIsEmptyStr = language === "ko" ? "장바구니가 비어있어요!" : "Your cart is empty!";
     const totalPriceStr = language === "ko" ? "총 결제 금액" : "Total Payment Amount";
     const orderCartStr = language === "ko" ? "장바구니에 담긴 상품 결제" : "Pay for Items in Cart";
+    const succeededToRemoveItemFromCartStr =
+      language === "ko" ? "장바구니에서 상품을 삭제했습니다." : "Item has been removed from the cart.";
     const errorWhileLoadingCartStr =
       language === "ko"
         ? "장바구니 정보를 불러오는 중 문제가 발생했습니다."
@@ -90,7 +99,14 @@ export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = Suspens
         ? "장바구니 결제에 실패했습니다.\n잠시 후 다시 시도해주세요.\n"
         : "Failed to complete the cart order.\nPlease try again later.\n";
 
-    const removeItemFromCart = (cartProductId: string) => removeItemFromCartMutation.mutate({ cartProductId });
+    const removeItemFromCart = (cartProductId: string) =>
+      removeItemFromCartMutation.mutate(
+        { cartProductId },
+        {
+          onSuccess: () => addSnackbar(succeededToRemoveItemFromCartStr, "success"),
+          onError: (error) => addSnackbar(error.message || errorWhilePreparingOrderStr, "error"),
+        }
+      );
 
     const openDialog = () => setState((ps) => ({ ...ps, openDialog: true }));
     const closeDialog = () => setState((ps) => ({ ...ps, openDialog: false }));
@@ -141,15 +157,17 @@ export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = Suspens
             defaultValue={data.customer_info}
           />
           <Stack spacing={2}>
-            {data.products.map((prodRel) => (
-              <CartItem
-                language={language}
-                key={prodRel.id}
-                cartProdRel={prodRel}
-                disabled={disabled}
-                removeItemFromCartFunc={removeItemFromCart}
-              />
-            ))}
+            <Common.Components.MDX.OneDetailsOpener>
+              {data.products.map((prodRel) => (
+                <CartItem
+                  language={language}
+                  key={prodRel.id}
+                  cartProdRel={prodRel}
+                  disabled={disabled}
+                  removeItemFromCartFunc={removeItemFromCart}
+                />
+              ))}
+            </Common.Components.MDX.OneDetailsOpener>
           </Stack>
           <br />
           <Divider />
diff --git a/packages/shop/src/components/features/order.tsx b/packages/shop/src/components/features/order.tsx
@@ -1,5 +1,6 @@
 import * as Common from "@frontend/common";
 import {
+  AccordionProps,
   Button,
   CircularProgress,
   Divider,
@@ -38,7 +39,7 @@ const PaymentHistoryStatusEn: {
   refunded: "Refunded",
 };
 
-type OrderProductRelationItemProps = {
+type OrderProductRelationItemProps = Omit<AccordionProps, "children"> & {
   language: "ko" | "en";
   order: ShopSchemas.Order;
   prodRel: ShopSchemas.OrderProductItem;
@@ -54,6 +55,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
   isPending,
   oneItemRefundMutation,
   optionsOfOneItemInOrderPatchMutation,
+  ...props
 }) => {
   const formRef = React.useRef<HTMLFormElement>(null);
   const currentCustomOptionValues: { [k: string]: string } = prodRel.options
@@ -122,6 +124,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
 
   return (
     <Common.Components.MDX.PrimaryStyledDetails
+      {...props}
       key={prodRel.id}
       summary={<Typography variant="h6">{prodRel.product.name}</Typography>}
       actions={actionButtons}
@@ -147,7 +150,9 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
   );
 };
 
-const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({ order, disabled }) => {
+type OrderItemProps = Omit<AccordionProps, "children"> & { order: ShopSchemas.Order; disabled?: boolean };
+
+const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
   const { language, shopApiDomain } = ShopHooks.useShopContext();
   const shopAPIClient = ShopHooks.useShopClient();
   const orderRefundMutation = ShopHooks.useOrderRefundMutation(shopAPIClient);
@@ -192,7 +197,7 @@ const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({
   );
 
   return (
-    <Common.Components.MDX.PrimaryStyledDetails summary={order.name} actions={actionButtons}>
+    <Common.Components.MDX.PrimaryStyledDetails {...props} summary={order.name} actions={actionButtons}>
       <Table>
         <TableHead>
           <TableRow>
@@ -241,17 +246,19 @@ const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({
       <Typography variant="h6">{productsInOrderStr}</Typography>
       <br />
       <Stack spacing={2}>
-        {order.products.map((prodRel) => (
-          <OrderProductRelationItem
-            key={prodRel.id}
-            language={language}
-            order={order}
-            prodRel={prodRel}
-            isPending={isPending}
-            oneItemRefundMutation={oneItemRefundMutation}
-            optionsOfOneItemInOrderPatchMutation={optionsOfOneItemInOrderPatchMutation}
-          />
-        ))}
+        <Common.Components.MDX.OneDetailsOpener>
+          {order.products.map((prodRel) => (
+            <OrderProductRelationItem
+              key={prodRel.id}
+              language={language}
+              order={order}
+              prodRel={prodRel}
+              isPending={isPending}
+              oneItemRefundMutation={oneItemRefundMutation}
+              optionsOfOneItemInOrderPatchMutation={optionsOfOneItemInOrderPatchMutation}
+            />
+          ))}
+        </Common.Components.MDX.OneDetailsOpener>
       </Stack>
       <br />
       <Divider />
@@ -264,7 +271,13 @@ export const OrderList: React.FC = () => {
     const shopAPIClient = ShopHooks.useShopClient();
     const { data } = ShopHooks.useOrders(shopAPIClient);
 
-    return data.map((item) => <OrderItem key={item.id} order={item} />);
+    return (
+      <Common.Components.MDX.OneDetailsOpener>
+        {data.map((item) => (
+          <OrderItem key={item.id} order={item} />
+        ))}
+      </Common.Components.MDX.OneDetailsOpener>
+    );
   };
 
   return (
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
