Skip to content

Commit e237b32

Browse files
MU-SoftwareMU-Software
authored
Merge pull request #8 from pythonkr/chore/move-shop-debug-component-to-library
Shop컴포넌트를 @frontend/shop 라이브러리로 이동
2 parents 317d9fd + d289870 commit e237b32

13 files changed

Lines changed: 140 additions & 147 deletions

File tree

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,23 @@ import React from "react";
22

33
import { Divider, Stack, Typography } from "@mui/material";
44

5-
import { ShopCartList } from "./shop_component/cart";
6-
import { ShopOrderList } from "./shop_component/order";
7-
import { ShopProductList } from "./shop_component/product";
8-
import { ShopUserStatus } from "./shop_component/user_status";
5+
import * as Shop from "@frontend/shop";
96

107
export const ShopTestPage: React.FC = () => (
118
<Stack>
129
<Stack spacing={2} sx={{ px: 4, backgroundColor: "#ddd", py: 2 }}>
13-
<Typography variant="h4" gutterBottom>
14-
Shop Test Page
15-
</Typography>
16-
<ShopUserStatus />
10+
<Typography variant="h4" gutterBottom>Shop Test Page</Typography>
11+
<Typography variant="h5" gutterBottom>계정 상태</Typography>
12+
<Shop.Components.Features.UserInfo />
1713
<Divider />
18-
<ShopProductList />
14+
<Typography variant="h5" gutterBottom>상품 목록</Typography>
15+
<Shop.Components.Features.ProductList />
1916
<Divider />
20-
<ShopCartList />
17+
<Typography variant="h5" gutterBottom>장바구니</Typography>
18+
<Shop.Components.Features.CartStatus />
2119
<Divider />
22-
<ShopOrderList />
20+
<Typography variant="h5" gutterBottom>주문 내역</Typography>
21+
<Shop.Components.Features.OrderList />
2322
</Stack>
2423
</Stack>
2524
);

‎apps/pyconkr/src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,15 @@ ReactDom.createRoot(document.getElementById("root")!).render(
7070
<QueryClientProvider client={queryClient}>
7171
<ReactQueryDevtools initialIsOpen={false} />
7272
<Common.Components.CommonContextProvider options={CommonOptions}>
73-
<Shop.Components.ShopContextProvider options={ShopOptions}>
73+
<Shop.Components.Common.ShopContextProvider options={ShopOptions}>
7474
<ThemeProvider theme={muiTheme}>
7575
<SnackbarProvider>
7676
<CssBaseline />
7777
<Global styles={globalStyles} />
7878
<ErrorBoundariedApp />
7979
</SnackbarProvider>
8080
</ThemeProvider>
81-
</Shop.Components.ShopContextProvider>
81+
</Shop.Components.Common.ShopContextProvider>
8282
</Common.Components.CommonContextProvider>
8383
</QueryClientProvider>
8484
</React.StrictMode>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
OptionGroupInput as OptionGroupInput_,
3+
OrderProductRelationOptionInput as OrderProductRelationOptionInput_,
4+
} from "./option_group_input";
5+
import { PriceDisplay as PriceDisplay_ } from "./price_display";
6+
import { ShopContextProvider as ShopContextProvider_ } from "./shop_context";
7+
import { SignInGuard as SignInGuard_ } from "./signin_guard";
8+
9+
namespace CommonComponents {
10+
export const ShopContextProvider = ShopContextProvider_;
11+
export const OptionGroupInput = OptionGroupInput_;
12+
export const OrderProductRelationOptionInput = OrderProductRelationOptionInput_;
13+
export const PriceDisplay = PriceDisplay_;
14+
export const SignInGuard = SignInGuard_;
15+
}
16+
17+
export default CommonComponents;

packages/shop/src/components/option_group_input.tsx renamed to packages/shop/src/components/common/option_group_input.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import {
1010
Tooltip,
1111
} from "@mui/material";
1212

13-
import ShopSchemas from "../schemas";
14-
import ShopAPIUtil from "../utils";
13+
import ShopSchemas from "../../schemas";
14+
import ShopAPIUtil from "../../utils";
1515
import { PriceDisplay } from "./price_display";
1616

1717
type CommonOptionGroupType = {

packages/shop/src/components/price_display.tsx renamed to packages/shop/src/components/common/price_display.tsx

File renamed without changes.

packages/shop/src/components/shop_context.tsx renamed to packages/shop/src/components/common/shop_context.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22

3-
import ShopContext from '../contexts';
3+
import ShopContext from '../../contexts';
44

55
type ShopContextProps = {
66
options: ShopContext.ContextOptions;

packages/shop/src/components/signin_guard.tsx renamed to packages/shop/src/components/common/signin_guard.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ import * as React from "react";
33
import { CircularProgress, Typography } from "@mui/material";
44
import { ErrorBoundary, Suspense } from "@suspensive/react";
55

6-
import ShopHooks from "../hooks";
6+
import ShopHooks from "../../hooks";
77

8-
type ShopSignInGuardProps = {
8+
type SignInGuardProps = {
99
children: React.ReactNode;
1010
fallback?: React.ReactNode;
1111
};
1212

13-
const InnerShopSignInGuard: React.FC<ShopSignInGuardProps> = ({ children, fallback }) => {
13+
const InnerSignInGuard: React.FC<SignInGuardProps> = ({ children, fallback }) => {
1414
const { data } = ShopHooks.useUserStatus();
1515
const renderedFallback = fallback || <Typography variant="h6" gutterBottom>로그인 후 이용해주세요.</Typography>;
1616
return data?.meta?.is_authenticated === true ? children : renderedFallback;
1717
};
1818

19-
export const ShopSignInGuard: React.FC<ShopSignInGuardProps> = ({ children, fallback }) => {
19+
export const SignInGuard: React.FC<SignInGuardProps> = ({ children, fallback }) => {
2020
return <ErrorBoundary fallback={<>로그인 정보를 불러오는 중 문제가 발생했습니다.</>}>
2121
<Suspense fallback={<CircularProgress />}>
22-
<InnerShopSignInGuard fallback={fallback}>{children}</InnerShopSignInGuard>
22+
<InnerSignInGuard fallback={fallback}>{children}</InnerSignInGuard>
2323
</Suspense>
2424
</ErrorBoundary>
2525
};

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

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@ import {
1515
import { ErrorBoundary, Suspense } from "@suspensive/react";
1616
import { useQueryClient } from "@tanstack/react-query";
1717

18-
import * as Shop from "@frontend/shop";
18+
import ShopHooks from "../../hooks";
19+
import ShopSchemas from "../../schemas";
20+
import ShopUtils from "../../utils";
21+
import CommonComponents from "../common";
1922

20-
const ShopCartItem: React.FC<{
21-
cartProdRel: Shop.Schemas.OrderProductItem;
23+
const CartItem: React.FC<{
24+
cartProdRel: ShopSchemas.OrderProductItem;
2225
removeItemFromCartFunc: (cartProductId: string) => void;
2326
disabled?: boolean;
2427
}> = ({ cartProdRel, disabled, removeItemFromCartFunc }) => (
@@ -31,7 +34,7 @@ const ShopCartItem: React.FC<{
3134
<AccordionDetails>
3235
<Stack spacing={2} sx={{ width: "100%" }}>
3336
{cartProdRel.options.map((optionRel) => (
34-
<Shop.Components.OrderProductRelationOptionInput
37+
<CommonComponents.OrderProductRelationOptionInput
3538
key={
3639
optionRel.product_option_group.id +
3740
(optionRel.product_option?.id || "")
@@ -46,7 +49,7 @@ const ShopCartItem: React.FC<{
4649
<Divider />
4750
<br />
4851
<Typography variant="h6" sx={{ textAlign: "end" }}>
49-
상품 가격: <Shop.Components.PriceDisplay price={cartProdRel.price} />
52+
상품 가격: <CommonComponents.PriceDisplay price={cartProdRel.price} />
5053
</Typography>
5154
</AccordionDetails>
5255
<AccordionActions>
@@ -62,33 +65,33 @@ const ShopCartItem: React.FC<{
6265
</Accordion>
6366
);
6467

65-
export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
68+
export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = ({
6669
onPaymentCompleted,
6770
}) => {
6871
const queryClient = useQueryClient();
69-
const cartOrderStartMutation = Shop.Hooks.usePrepareCartOrderMutation();
70-
const removeItemFromCartMutation = Shop.Hooks.useRemoveItemFromCartMutation();
72+
const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation();
73+
const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation();
7174

7275
const removeItemFromCart = (cartProductId: string) =>
7376
removeItemFromCartMutation.mutate({ cartProductId });
7477
const startCartOrder = () =>
7578
cartOrderStartMutation.mutate(undefined, {
76-
onSuccess: (order: Shop.Schemas.Order) => {
77-
Shop.Utils.startPortOnePurchase(
79+
onSuccess: (order: ShopSchemas.Order) => {
80+
ShopUtils.startPortOnePurchase(
7881
order,
7982
() => {
8083
queryClient.invalidateQueries();
8184
queryClient.resetQueries();
8285
onPaymentCompleted?.();
8386
},
8487
(response) => alert("결제를 실패했습니다!\n" + response.error_msg),
85-
() => {}
88+
() => { }
8689
);
8790
},
8891
onError: (error) =>
8992
alert(
9093
error.message ||
91-
"결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요."
94+
"결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요."
9295
),
9396
});
9497

@@ -97,7 +100,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
97100

98101
const WrappedShopCartList: React.FC = () => {
99102
// eslint-disable-next-line react-hooks/rules-of-hooks
100-
const { data } = Shop.Hooks.useCart();
103+
const { data } = ShopHooks.useCart();
101104

102105
return !data.hasOwnProperty("products") || data.products.length === 0 ? (
103106
<Typography variant="body1" color="error">
@@ -106,7 +109,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
106109
) : (
107110
<>
108111
{data.products.map((prodRel) => (
109-
<ShopCartItem
112+
<CartItem
110113
key={prodRel.id}
111114
cartProdRel={prodRel}
112115
disabled={disabled}
@@ -117,7 +120,7 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
117120
<Divider />
118121
<Typography variant="h6" sx={{ textAlign: "end" }}>
119122
결제 금액:{" "}
120-
<Shop.Components.PriceDisplay price={data.first_paid_price} />
123+
<CommonComponents.PriceDisplay price={data.first_paid_price} />
121124
</Typography>
122125
<Button
123126
variant="contained"
@@ -131,20 +134,11 @@ export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void }> = ({
131134
);
132135
};
133136

134-
return (
135-
<>
136-
<Typography variant="h5" gutterBottom>
137-
Cart List
138-
</Typography>
139-
<Shop.Components.ShopSignInGuard>
140-
<ErrorBoundary
141-
fallback={<div>장바구니 정보를 불러오는 중 문제가 발생했습니다.</div>}
142-
>
143-
<Suspense fallback={<CircularProgress />}>
144-
<WrappedShopCartList />
145-
</Suspense>
146-
</ErrorBoundary>
147-
</Shop.Components.ShopSignInGuard>
148-
</>
149-
);
137+
return <CommonComponents.SignInGuard>
138+
<ErrorBoundary fallback={<div>장바구니 정보를 불러오는 중 문제가 발생했습니다.</div>}>
139+
<Suspense fallback={<CircularProgress />}>
140+
<WrappedShopCartList />
141+
</Suspense>
142+
</ErrorBoundary>
143+
</CommonComponents.SignInGuard>;
150144
};

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { CartStatus as CartStatus_ } from "./cart";
2+
import { OrderList as OrderList_ } from "./order";
3+
import { ProductList as ProductList_ } from "./product";
4+
import { UserInfo as UserInfo_ } from "./user_status";
5+
6+
namespace FeatureComponents {
7+
export const CartStatus = CartStatus_;
8+
export const OrderList = OrderList_;
9+
export const ProductList = ProductList_;
10+
export const UserInfo = UserInfo_;
11+
}
12+
13+
export default FeatureComponents;

apps/pyconkr/src/debug/page/shop_component/order.tsx renamed to packages/shop/src/components/features/order.tsx

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,30 @@ import {
1717
import { ErrorBoundary, Suspense } from "@suspensive/react";
1818

1919
import * as Common from "@frontend/common";
20-
import * as Shop from "@frontend/shop";
20+
import ShopHooks from '../../hooks';
21+
import ShopSchemas from '../../schemas';
22+
import ShopUtils from '../../utils';
23+
import CommonComponents from '../common';
2124

2225
const PaymentHistoryStatusTranslated: {
23-
[k in Shop.Schemas.PaymentHistoryStatus]: string;
26+
[k in ShopSchemas.PaymentHistoryStatus]: string;
2427
} = {
2528
pending: "결제 대기중",
2629
completed: "결제 완료",
2730
partial_refunded: "부분 환불됨",
2831
refunded: "환불됨",
2932
};
3033

31-
const ShopOrderItem: React.FC<{
32-
order: Shop.Schemas.Order;
34+
const OrderItem: React.FC<{
35+
order: ShopSchemas.Order;
3336
disabled?: boolean;
3437
}> = ({ order, disabled }) => {
35-
const orderRefundMutation = Shop.Hooks.useOrderRefundMutation();
36-
const oneItemRefundMutation = Shop.Hooks.useOneItemRefundMutation();
37-
const optionsOfOneItemInOrderPatchMutation = Shop.Hooks.useOptionsOfOneItemInOrderPatchMutation();
38+
const orderRefundMutation = ShopHooks.useOrderRefundMutation();
39+
const oneItemRefundMutation = ShopHooks.useOneItemRefundMutation();
40+
const optionsOfOneItemInOrderPatchMutation = ShopHooks.useOptionsOfOneItemInOrderPatchMutation();
3841

3942
const refundOrder = () => orderRefundMutation.mutate({ order_id: order.id });
40-
const openReceipt = () => window.open(Shop.Utils.getReceiptUrlFromOrder(order), "_blank");
43+
const openReceipt = () => window.open(ShopUtils.getReceiptUrlFromOrder(order), "_blank");
4144

4245
const isPending =
4346
disabled ||
@@ -62,7 +65,7 @@ const ShopOrderItem: React.FC<{
6265
<br />
6366
<Typography variant="body1">
6467
주문 결제 금액 :{" "}
65-
<Shop.Components.PriceDisplay price={order.current_paid_price} />
68+
<CommonComponents.PriceDisplay price={order.current_paid_price} />
6669
</Typography>
6770
<Typography variant="body1">
6871
상태: {PaymentHistoryStatusTranslated[order.current_status]}
@@ -77,7 +80,7 @@ const ShopOrderItem: React.FC<{
7780
const currentCustomOptionValues: { [k: string]: string } =
7881
prodRels.options
7982
.filter((optionRel) =>
80-
Shop.Utils.isOrderProductOptionModifiable(optionRel)
83+
ShopUtils.isOrderProductOptionModifiable(optionRel)
8184
)
8285
.reduce(
8386
(acc, optionRel) => ({
@@ -109,7 +112,7 @@ const ShopOrderItem: React.FC<{
109112
if (!Common.Utils.isFormValid(formRef.current))
110113
throw new Error("Form is not valid");
111114

112-
const modifiedCustomOptionValues: Shop.Schemas.OrderOptionsPatchRequest["options"] =
115+
const modifiedCustomOptionValues: ShopSchemas.OrderOptionsPatchRequest["options"] =
113116
Object.entries(
114117
Common.Utils.getFormValue<{ [key: string]: string }>({
115118
form: formRef.current,
@@ -145,7 +148,7 @@ const ShopOrderItem: React.FC<{
145148
>
146149
<Stack spacing={2} sx={{ width: "100%" }}>
147150
{prodRels.options.map((optionRel) => (
148-
<Shop.Components.OrderProductRelationOptionInput
151+
<CommonComponents.OrderProductRelationOptionInput
149152
key={
150153
optionRel.product_option_group.id +
151154
(optionRel.product_option?.id || "")
@@ -203,34 +206,25 @@ const ShopOrderItem: React.FC<{
203206
);
204207
};
205208

206-
export const ShopOrderList: React.FC = () => {
209+
export const OrderList: React.FC = () => {
207210
const WrappedOrderList: React.FC = () => {
208211
// eslint-disable-next-line react-hooks/rules-of-hooks
209-
const { data } = Shop.Hooks.useOrders();
212+
const { data } = ShopHooks.useOrders();
210213

211214
return (
212215
<List>
213216
{data.map((item) => (
214-
<ShopOrderItem key={item.id} order={item} />
217+
<OrderItem key={item.id} order={item} />
215218
))}
216219
</List>
217220
);
218221
};
219222

220-
return (
221-
<>
222-
<Typography variant="h5" gutterBottom>
223-
Order List
224-
</Typography>
225-
<Shop.Components.ShopSignInGuard>
226-
<ErrorBoundary
227-
fallback={<div>주문 내역을 불러오는 중 문제가 발생했습니다.</div>}
228-
>
229-
<Suspense fallback={<CircularProgress />}>
230-
<WrappedOrderList />
231-
</Suspense>
232-
</ErrorBoundary>
233-
</Shop.Components.ShopSignInGuard>
234-
</>
235-
);
223+
return <CommonComponents.SignInGuard>
224+
<ErrorBoundary fallback={<div>주문 내역을 불러오는 중 문제가 발생했습니다.</div>}>
225+
<Suspense fallback={<CircularProgress />}>
226+
<WrappedOrderList />
227+
</Suspense>
228+
</ErrorBoundary>
229+
</CommonComponents.SignInGuard>;
236230
};

0 commit comments

Comments
 (0)