fix: 상품 상세에서 로그아웃 상태일 시 버튼이 감춰지지 않던 문제 수정

Author: MU-Software

packages/shop/src/components/features/product.tsx

@@ -136,45 +136,47 @@ const ProductItem: React.FC<ProductItemPropType> = ({
     });
   const onOrderOneItemButtonClick = () => startPurchaseProcess(getCartAppendRequestPayload(product, optionFormRef));
   const actionButton = R.isNullish(notPurchasableReason) && (
-    <>
+    <CommonComponents.SignInGuard fallback={<NotPurchasable>{requiresSignInStr}</NotPurchasable>}>
       <Button {...actionButtonProps} onClick={addItemToCart} children={addToCartStr} />
       <Button {...actionButtonProps} onClick={onOrderOneItemButtonClick} children={orderOneItemStr} />
-    </>
+    </CommonComponents.SignInGuard>
   );
 
   return (
     <Common.Components.MDX.PrimaryStyledDetails {...props} summary={product.name} actions={actionButton}>
       <Common.Components.MDXRenderer text={product.description || ""} />
       <br />
       <Divider />
-      <CommonComponents.SignInGuard fallback={<NotPurchasable>{requiresSignInStr}</NotPurchasable>}>
-        {R.isNullish(notPurchasableReason) ? (
-          <>
-            <br />
-            <form ref={optionFormRef} onSubmit={formOnSubmit}>
-              <Stack spacing={2}>
-                {product.option_groups.map((group) => (
-                  <CommonComponents.OptionGroupInput
-                    key={group.id}
-                    optionGroup={group}
-                    options={group.options}
-                    defaultValue={group.options[0]?.id || ""}
-                    disabled={disabled}
-                  />
-                ))}
-              </Stack>
-            </form>
-            <br />
-            <Divider />
-            <br />
-            <Typography variant="h6" sx={{ textAlign: "right" }}>
-              {orderPriceStr}: <CommonComponents.PriceDisplay price={product.price} />
-            </Typography>
-          </>
-        ) : (
-          <NotPurchasable>{notPurchasableReason}</NotPurchasable>
-        )}
-      </CommonComponents.SignInGuard>
+      {R.isNullish(notPurchasableReason) ? (
+        <>
+          <br />
+          <form ref={optionFormRef} onSubmit={formOnSubmit}>
+            <Stack spacing={2}>
+              {product.option_groups.map((group) => (
+                <CommonComponents.OptionGroupInput
+                  key={group.id}
+                  optionGroup={group}
+                  options={group.options}
+                  defaultValue={group.options[0]?.id || ""}
+                  disabled={disabled}
+                />
+              ))}
+            </Stack>
+          </form>
+          <br />
+          {product.option_groups.length > 0 && (
+            <>
+              <Divider />
+              <br />
+            </>
+          )}
+          <Typography variant="h6" sx={{ textAlign: "right" }}>
+            {orderPriceStr}: <CommonComponents.PriceDisplay price={product.price} />
+          </Typography>
+        </>
+      ) : (
+        <NotPurchasable>{notPurchasableReason}</NotPurchasable>
+      )}
     </Common.Components.MDX.PrimaryStyledDetails>
   );
 };