Merge pull request #8 from pythonkr/chore/move-shop-debug-component-to-library

Shop컴포넌트를 @frontend/shop 라이브러리로 이동

Author: MU-Software

apps/pyconkr/src/debug/page/shop_test.tsx

@@ -2,24 +2,23 @@ import React from "react";
 
 import { Divider, Stack, Typography } from "@mui/material";
 
-import { ShopCartList } from "./shop_component/cart";
-import { ShopOrderList } from "./shop_component/order";
-import { ShopProductList } from "./shop_component/product";
-import { ShopUserStatus } from "./shop_component/user_status";
+import * as Shop from "@frontend/shop";
 
 export const ShopTestPage: React.FC = () => (
   <Stack>
     <Stack spacing={2} sx={{ px: 4, backgroundColor: "#ddd", py: 2 }}>
-      <Typography variant="h4" gutterBottom>
-        Shop Test Page
-      </Typography>
-      <ShopUserStatus />
+      <Typography variant="h4" gutterBottom>Shop Test Page</Typography>
+      <Typography variant="h5" gutterBottom>계정 상태</Typography>
+      <Shop.Components.Features.UserInfo />
       <Divider />
-      <ShopProductList />
+      <Typography variant="h5" gutterBottom>상품 목록</Typography>
+      <Shop.Components.Features.ProductList />
       <Divider />
-      <ShopCartList />
+      <Typography variant="h5" gutterBottom>장바구니</Typography>
+      <Shop.Components.Features.CartStatus />
       <Divider />
-      <ShopOrderList />
+      <Typography variant="h5" gutterBottom>주문 내역</Typography>
+      <Shop.Components.Features.OrderList />
     </Stack>
   </Stack>
 );

apps/pyconkr/src/main.tsx

@@ -70,15 +70,15 @@ ReactDom.createRoot(document.getElementById("root")!).render(
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
       <Common.Components.CommonContextProvider options={CommonOptions}>
-        <Shop.Components.ShopContextProvider options={ShopOptions}>
+        <Shop.Components.Common.ShopContextProvider options={ShopOptions}>
           <ThemeProvider theme={muiTheme}>
             <SnackbarProvider>
               <CssBaseline />
               <Global styles={globalStyles} />
               <ErrorBoundariedApp />
             </SnackbarProvider>
           </ThemeProvider>
-        </Shop.Components.ShopContextProvider>
+        </Shop.Components.Common.ShopContextProvider>
       </Common.Components.CommonContextProvider>
     </QueryClientProvider>
   </React.StrictMode>

packages/shop/src/components/common/index.ts

@@ -0,0 +1,17 @@
+import {
+  OptionGroupInput as OptionGroupInput_,
+  OrderProductRelationOptionInput as OrderProductRelationOptionInput_,
+} from "./option_group_input";
+import { PriceDisplay as PriceDisplay_ } from "./price_display";
+import { ShopContextProvider as ShopContextProvider_ } from "./shop_context";
+import { SignInGuard as SignInGuard_ } from "./signin_guard";
+
+namespace CommonComponents {
+  export const ShopContextProvider = ShopContextProvider_;
+  export const OptionGroupInput = OptionGroupInput_;
+  export const OrderProductRelationOptionInput = OrderProductRelationOptionInput_;
+  export const PriceDisplay = PriceDisplay_;
+  export const SignInGuard = SignInGuard_;
+}
+
+export default CommonComponents;

…op/src/components/option_group_input.tsx …components/common/option_group_input.tsxpackages/shop/src/components/option_group_input.tsx renamed to packages/shop/src/components/common/option_group_input.tsx packages/shop/src/components/option_group_input.tsx renamed to packages/shop/src/components/common/option_group_input.tsx

@@ -10,8 +10,8 @@ import {
   Tooltip,
 } from "@mui/material";
 
-import ShopSchemas from "../schemas";
-import ShopAPIUtil from "../utils";
+import ShopSchemas from "../../schemas";
+import ShopAPIUtil from "../../utils";
 import { PriceDisplay } from "./price_display";
 
 type CommonOptionGroupType = {

…es/shop/src/components/price_display.tsx …/src/components/common/price_display.tsxpackages/shop/src/components/price_display.tsx renamed to packages/shop/src/components/common/price_display.tsx packages/shop/src/components/price_display.tsx renamed to packages/shop/src/components/common/price_display.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import ShopContext from '../contexts';
+import ShopContext from '../../contexts';
 
 type ShopContextProps = {
   options: ShopContext.ContextOptions;

…ges/shop/src/components/shop_context.tsx …p/src/components/common/shop_context.tsxpackages/shop/src/components/shop_context.tsx renamed to packages/shop/src/components/common/shop_context.tsx packages/shop/src/components/shop_context.tsx renamed to packages/shop/src/components/common/shop_context.tsx

@@ -3,23 +3,23 @@ import * as React from "react";
 import { CircularProgress, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 
-import ShopHooks from "../hooks";
+import ShopHooks from "../../hooks";
 
-type ShopSignInGuardProps = {
+type SignInGuardProps = {
   children: React.ReactNode;
   fallback?: React.ReactNode;
 };
 
-const InnerShopSignInGuard: React.FC<ShopSignInGuardProps> = ({ children, fallback }) => {
+const InnerSignInGuard: React.FC<SignInGuardProps> = ({ children, fallback }) => {
   const { data } = ShopHooks.useUserStatus();
   const renderedFallback = fallback || <Typography variant="h6" gutterBottom>로그인 후 이용해주세요.</Typography>;
   return data?.meta?.is_authenticated === true ? children : renderedFallback;
 };
 
-export const ShopSignInGuard: React.FC<ShopSignInGuardProps> = ({ children, fallback }) => {
+export const SignInGuard: React.FC<SignInGuardProps> = ({ children, fallback }) => {
   return <ErrorBoundary fallback={<>로그인 정보를 불러오는 중 문제가 발생했습니다.</>}>
     <Suspense fallback={<CircularProgress />}>
-      <InnerShopSignInGuard fallback={fallback}>{children}</InnerShopSignInGuard>
+      <InnerSignInGuard fallback={fallback}>{children}</InnerSignInGuard>
     </Suspense>
   </ErrorBoundary>
 };

…ges/shop/src/components/signin_guard.tsx …p/src/components/common/signin_guard.tsxpackages/shop/src/components/signin_guard.tsx renamed to packages/shop/src/components/common/signin_guard.tsx packages/shop/src/components/signin_guard.tsx renamed to packages/shop/src/components/common/signin_guard.tsx

@@ -15,10 +15,13 @@ import {
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 
-import * as Shop from "@frontend/shop";
+import ShopHooks from "../../hooks";
+import ShopSchemas from "../../schemas";
+import ShopUtils from "../../utils";
+import CommonComponents from "../common";
 
-const ShopCartItem: React.FC<{
-  cartProdRel: Shop.Schemas.OrderProductItem;
+const CartItem: React.FC<{
+  cartProdRel: ShopSchemas.OrderProductItem;
   removeItemFromCartFunc: (cartProductId: string) => void;
   disabled?: boolean;
 }> = ({ cartProdRel, disabled, removeItemFromCartFunc }) => (
@@ -31,7 +34,7 @@ const ShopCartItem: React.FC<{
     <AccordionDetails>
       <Stack spacing={2} sx={{ width: "100%" }}>
         {cartProdRel.options.map((optionRel) => (
-          <Shop.Components.OrderProductRelationOptionInput
+          <CommonComponents.OrderProductRelationOptionInput
             key={
               optionRel.product_option_group.id +
               (optionRel.product_option?.id || "")
@@ -46,7 +49,7 @@ const ShopCartItem: React.FC<{
       <Divider />
       <br />
       <Typography variant="h6" sx={{ textAlign: "end" }}>
-        상품 가격: <Shop.Components.PriceDisplay price={cartProdRel.price} />
+        상품 가격: <CommonComponents.PriceDisplay price={cartProdRel.price} />
       </Typography>
     </AccordionDetails>
     <AccordionActions>
@@ -62,33 +65,33 @@ const ShopCartItem: React.FC<{
   </Accordion>
 );
 
-export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
+export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = ({
   onPaymentCompleted,
 }) => {
   const queryClient = useQueryClient();
-  const cartOrderStartMutation = Shop.Hooks.usePrepareCartOrderMutation();
-  const removeItemFromCartMutation = Shop.Hooks.useRemoveItemFromCartMutation();
+  const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation();
+  const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation();
 
   const removeItemFromCart = (cartProductId: string) =>
     removeItemFromCartMutation.mutate({ cartProductId });
   const startCartOrder = () =>
     cartOrderStartMutation.mutate(undefined, {
-      onSuccess: (order: Shop.Schemas.Order) => {
-        Shop.Utils.startPortOnePurchase(
+      onSuccess: (order: ShopSchemas.Order) => {
+        ShopUtils.startPortOnePurchase(
           order,
           () => {
             queryClient.invalidateQueries();
             queryClient.resetQueries();
             onPaymentCompleted?.();
           },
           (response) => alert("결제를 실패했습니다!\n" + response.error_msg),
-          () => {}
+          () => { }
         );
       },
       onError: (error) =>
         alert(
           error.message ||
-            "결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요."
+          "결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요."
         ),
     });
 
@@ -97,7 +100,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
 
   const WrappedShopCartList: React.FC = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { data } = Shop.Hooks.useCart();
+    const { data } = ShopHooks.useCart();
 
     return !data.hasOwnProperty("products") || data.products.length === 0 ? (
       <Typography variant="body1" color="error">
@@ -106,7 +109,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
     ) : (
       <>
         {data.products.map((prodRel) => (
-          <ShopCartItem
+          <CartItem
             key={prodRel.id}
             cartProdRel={prodRel}
             disabled={disabled}
@@ -117,7 +120,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
         <Divider />
         <Typography variant="h6" sx={{ textAlign: "end" }}>
           결제 금액:{" "}
-          <Shop.Components.PriceDisplay price={data.first_paid_price} />
+          <CommonComponents.PriceDisplay price={data.first_paid_price} />
         </Typography>
         <Button
           variant="contained"
@@ -131,20 +134,11 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
     );
   };
 
-  return (
-    <>
-      <Typography variant="h5" gutterBottom>
-        Cart List
-      </Typography>
-      <Shop.Components.ShopSignInGuard>
-        <ErrorBoundary
-          fallback={<div>장바구니 정보를 불러오는 중 문제가 발생했습니다.</div>}
-        >
-          <Suspense fallback={<CircularProgress />}>
-            <WrappedShopCartList />
-          </Suspense>
-        </ErrorBoundary>
-      </Shop.Components.ShopSignInGuard>
-    </>
-  );
+  return <CommonComponents.SignInGuard>
+    <ErrorBoundary fallback={<div>장바구니 정보를 불러오는 중 문제가 발생했습니다.</div>}>
+      <Suspense fallback={<CircularProgress />}>
+        <WrappedShopCartList />
+      </Suspense>
+    </ErrorBoundary>
+  </CommonComponents.SignInGuard>;
 };

…r/src/debug/page/shop_component/cart.tsx …es/shop/src/components/features/cart.tsxapps/pyconkr/src/debug/page/shop_component/cart.tsx renamed to packages/shop/src/components/features/cart.tsx apps/pyconkr/src/debug/page/shop_component/cart.tsx renamed to packages/shop/src/components/features/cart.tsx

@@ -0,0 +1,13 @@
+import { CartStatus as CartStatus_ } from "./cart";
+import { OrderList as OrderList_ } from "./order";
+import { ProductList as ProductList_ } from "./product";
+import { UserInfo as UserInfo_ } from "./user_status";
+
+namespace FeatureComponents {
+  export const CartStatus = CartStatus_;
+  export const OrderList = OrderList_;
+  export const ProductList = ProductList_;
+  export const UserInfo = UserInfo_;
+}
+
+export default FeatureComponents;

packages/shop/src/components/features/index.ts

@@ -17,27 +17,30 @@ import {
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 
 import * as Common from "@frontend/common";
-import * as Shop from "@frontend/shop";
+import ShopHooks from '../../hooks';
+import ShopSchemas from '../../schemas';
+import ShopUtils from '../../utils';
+import CommonComponents from '../common';
 
 const PaymentHistoryStatusTranslated: {
-  [k in Shop.Schemas.PaymentHistoryStatus]: string;
+  [k in ShopSchemas.PaymentHistoryStatus]: string;
 } = {
   pending: "결제 대기중",
   completed: "결제 완료",
   partial_refunded: "부분 환불됨",
   refunded: "환불됨",
 };
 
-const ShopOrderItem: React.FC<{
-  order: Shop.Schemas.Order;
+const OrderItem: React.FC<{
+  order: ShopSchemas.Order;
   disabled?: boolean;
 }> = ({ order, disabled }) => {
-  const orderRefundMutation = Shop.Hooks.useOrderRefundMutation();
-  const oneItemRefundMutation = Shop.Hooks.useOneItemRefundMutation();
-  const optionsOfOneItemInOrderPatchMutation = Shop.Hooks.useOptionsOfOneItemInOrderPatchMutation();
+  const orderRefundMutation = ShopHooks.useOrderRefundMutation();
+  const oneItemRefundMutation = ShopHooks.useOneItemRefundMutation();
+  const optionsOfOneItemInOrderPatchMutation = ShopHooks.useOptionsOfOneItemInOrderPatchMutation();
 
   const refundOrder = () => orderRefundMutation.mutate({ order_id: order.id });
-  const openReceipt = () => window.open(Shop.Utils.getReceiptUrlFromOrder(order), "_blank");
+  const openReceipt = () => window.open(ShopUtils.getReceiptUrlFromOrder(order), "_blank");
 
   const isPending =
     disabled ||
@@ -62,7 +65,7 @@ const ShopOrderItem: React.FC<{
         <br />
         <Typography variant="body1">
           주문 결제 금액 :{" "}
-          <Shop.Components.PriceDisplay price={order.current_paid_price} />
+          <CommonComponents.PriceDisplay price={order.current_paid_price} />
         </Typography>
         <Typography variant="body1">
           상태: {PaymentHistoryStatusTranslated[order.current_status]}
@@ -77,7 +80,7 @@ const ShopOrderItem: React.FC<{
           const currentCustomOptionValues: { [k: string]: string } =
             prodRels.options
               .filter((optionRel) =>
-                Shop.Utils.isOrderProductOptionModifiable(optionRel)
+                ShopUtils.isOrderProductOptionModifiable(optionRel)
               )
               .reduce(
                 (acc, optionRel) => ({
@@ -109,7 +112,7 @@ const ShopOrderItem: React.FC<{
             if (!Common.Utils.isFormValid(formRef.current))
               throw new Error("Form is not valid");
 
-            const modifiedCustomOptionValues: Shop.Schemas.OrderOptionsPatchRequest["options"] =
+            const modifiedCustomOptionValues: ShopSchemas.OrderOptionsPatchRequest["options"] =
               Object.entries(
                 Common.Utils.getFormValue<{ [key: string]: string }>({
                   form: formRef.current,
@@ -145,7 +148,7 @@ const ShopOrderItem: React.FC<{
                 >
                   <Stack spacing={2} sx={{ width: "100%" }}>
                     {prodRels.options.map((optionRel) => (
-                      <Shop.Components.OrderProductRelationOptionInput
+                      <CommonComponents.OrderProductRelationOptionInput
                         key={
                           optionRel.product_option_group.id +
                           (optionRel.product_option?.id || "")
@@ -203,34 +206,25 @@ const ShopOrderItem: React.FC<{
   );
 };
 
-export const ShopOrderList: React.FC = () => {
+export const OrderList: React.FC = () => {
   const WrappedOrderList: React.FC = () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { data } = Shop.Hooks.useOrders();
+    const { data } = ShopHooks.useOrders();
 
     return (
       <List>
         {data.map((item) => (
-          <ShopOrderItem key={item.id} order={item} />
+          <OrderItem key={item.id} order={item} />
         ))}
       </List>
     );
   };
 
-  return (
-    <>
-      <Typography variant="h5" gutterBottom>
-        Order List
-      </Typography>
-      <Shop.Components.ShopSignInGuard>
-        <ErrorBoundary
-          fallback={<div>주문 내역을 불러오는 중 문제가 발생했습니다.</div>}
-        >
-          <Suspense fallback={<CircularProgress />}>
-            <WrappedOrderList />
-          </Suspense>
-        </ErrorBoundary>
-      </Shop.Components.ShopSignInGuard>
-    </>
-  );
+  return <CommonComponents.SignInGuard>
+    <ErrorBoundary fallback={<div>주문 내역을 불러오는 중 문제가 발생했습니다.</div>}>
+      <Suspense fallback={<CircularProgress />}>
+        <WrappedOrderList />
+      </Suspense>
+    </ErrorBoundary>
+  </CommonComponents.SignInGuard>;
 };