(() => () => null);
const [count, setCount] = useState(0);
diff --git a/src/debug/page/shop_component/cart.tsx b/src/debug/page/shop_component/cart.tsx
new file mode 100644
index 0000000..76a903c
--- /dev/null
+++ b/src/debug/page/shop_component/cart.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+
+import { ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
+import { wrap } from "@suspensive/react";
+import { useQueryClient } from '@tanstack/react-query';
+
+import ShopComponent from "@pyconkr-shop/components";
+import ShopAPIHook from "@pyconkr-shop/hooks";
+import ShopAPISchema from '@pyconkr-shop/schemas';
+import ShopAPIUtil from "@pyconkr-shop/utils";
+
+const ShopCartItem: React.FC<{
+ cartProdRel: ShopAPISchema.OrderProductItem,
+ removeItemFromCartFunc: (cartProductId: string) => void,
+ disabled?: boolean
+}> = ({ cartProdRel, disabled, removeItemFromCartFunc }) =>
+ }>
+
+ {cartProdRel.product.name}
+
+
+
+
+ {
+ cartProdRel.options.map(
+ (optionRel) =>
+ )
+ }
+
+
+
+
+
+ 상품 가격:
+
+
+
+
+
+
+
+
+export const ShopCartList: React.FC<{ onPaymentCompleted?: () => void; }> = ({ onPaymentCompleted }) => {
+ const queryClient = useQueryClient();
+ const cartOrderStartMutation = ShopAPIHook.usePrepareCartOrderMutation();
+ const removeItemFromCartMutation = ShopAPIHook.useRemoveItemFromCartMutation();
+
+ const removeItemFromCart = (cartProductId: string) => removeItemFromCartMutation.mutate({ cartProductId });
+ const startCartOrder = () => cartOrderStartMutation.mutate(
+ undefined,
+ {
+ onSuccess: (order: ShopAPISchema.Order) => {
+ ShopAPIUtil.startPortOnePurchase(
+ order,
+ () => {
+ queryClient.invalidateQueries();
+ queryClient.resetQueries();
+ onPaymentCompleted?.();
+ },
+ (response) => alert("결제를 실패했습니다!\n" + response.error_msg),
+ () => { }
+ );
+ },
+ onError: (error) => alert(error.message || '결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요.'),
+ }
+ );
+
+ const disabled = removeItemFromCartMutation.isPending || cartOrderStartMutation.isPending;
+
+ const WrappedShopCartList = wrap
+ .ErrorBoundary({ fallback: 장바구니 정보를 불러오는 중 문제가 발생했습니다.
})
+ .Suspense({ fallback: })
+ .on(() => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { data } = ShopAPIHook.useCart();
+
+ return data.products.length === 0
+ ? 장바구니가 비어있어요!
+ : <>
+ {data.products.map((prodRel) => )}
+
+
+
+ 결제 금액:
+
+
+
+ });
+
+ return <>
+ Cart List
+
+
+
+
+}
diff --git a/src/debug/page/shop_component/order.tsx b/src/debug/page/shop_component/order.tsx
new file mode 100644
index 0000000..ddb77b8
--- /dev/null
+++ b/src/debug/page/shop_component/order.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import * as R from "remeda";
+
+import { ExpandMore } from '@mui/icons-material';
+import {
+ Accordion,
+ AccordionActions,
+ AccordionDetails,
+ AccordionSummary,
+ Button,
+ CircularProgress,
+ Divider,
+ List,
+ Stack,
+ Typography
+} from "@mui/material";
+import { wrap } from "@suspensive/react";
+
+import { getFormValue, isFormValid } from '@pyconkr-common/utils/form';
+import ShopComponent from "@pyconkr-shop/components";
+import ShopAPIHook from "@pyconkr-shop/hooks";
+import ShopAPISchema from "@pyconkr-shop/schemas";
+import ShopAPIUtil from '@pyconkr-shop/utils';
+
+const PaymentHistoryStatusTranslated: { [k in ShopAPISchema.PaymentHistoryStatus]: string } = {
+ "pending": "결제 대기중",
+ "completed": "결제 완료",
+ "partial_refunded": "부분 환불됨",
+ "refunded": "환불됨",
+}
+
+const ShopOrderItem: React.FC<{ order: ShopAPISchema.Order, disabled?: boolean }> = ({ order, disabled }) => {
+ const orderRefundMutation = ShopAPIHook.useOrderRefundMutation();
+ const oneItemRefundMutation = ShopAPIHook.useOneItemRefundMutation();
+ const optionsOfOneItemInOrderPatchMutation = ShopAPIHook.useOptionsOfOneItemInOrderPatchMutation();
+
+ const receiptUrl = `${import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN}/v1/orders/${order.id}/receipt/`
+
+ const refundOrder = () => orderRefundMutation.mutate({ order_id: order.id });
+ const openReceipt = () => window.open(receiptUrl, '_blank');
+
+ const isPending = disabled || orderRefundMutation.isPending || oneItemRefundMutation.isPending || optionsOfOneItemInOrderPatchMutation.isPending;
+ const btnDisabled = isPending || !R.isNullish(order.not_fully_refundable_reason);
+ const btnText = R.isNullish(order.not_fully_refundable_reason) ? '주문 전체 환불' : order.current_status === 'refunded' ? '주문 전체 환불됨' : order.not_fully_refundable_reason;
+
+ return
+ }>
+ {order.name}
+
+
+
+
+ 주문 결제 금액 :
+ 상태: {PaymentHistoryStatusTranslated[order.current_status]}
+
+
+
+ 주문 상품 목록
+
+ {
+ order.products.map(
+ (prodRels) => {
+ const formRef = React.useRef(null);
+ const currentCustomOptionValues: { [k: string]: string } = prodRels.options
+ .filter((optionRel) => ShopAPIUtil.isOrderProductOptionModifiable(optionRel))
+ .reduce((acc, optionRel) => ({ ...acc, [optionRel.product_option_group.id]: optionRel.custom_response }), {});
+
+ const hasPatchableOption = Object.entries(currentCustomOptionValues).length > 0;
+ const patchOptionBtnDisabled = isPending || !hasPatchableOption;
+
+ const refundBtnDisabled = isPending || !R.isNullish(prodRels.not_refundable_reason);
+ const refundBtnText = R.isNullish(prodRels.not_refundable_reason) ? '단일 상품 환불' : prodRels.status === 'refunded' ? '환불됨' : prodRels.not_refundable_reason;
+
+ const refundOneItem = () => oneItemRefundMutation.mutate({ order_id: order.id, order_product_relation_id: prodRels.id });
+ const patchOneItemOptions = () => {
+ if (!isFormValid(formRef.current))
+ throw new Error('Form is not valid');
+
+ const modifiedCustomOptionValues: ShopAPISchema.OrderOptionsPatchRequest['options'] = Object.entries(getFormValue<{ [key: string]: string }>({ form: formRef.current }))
+ .filter(([key, value]) => currentCustomOptionValues[key] !== value)
+ .map(([key, value]) => ({ order_product_option_relation: key, custom_response: value }));
+
+ optionsOfOneItemInOrderPatchMutation.mutate({ order_id: order.id, order_product_relation_id: prodRels.id, options: modifiedCustomOptionValues });
+ }
+
+ return
+ }>{prodRels.product.name}
+
+
+
+
+
+
+
+
+ }
+ )
+ }
+
+
+
+
+
+
+
+
+}
+
+export const ShopOrderList: React.FC = () => {
+ const WrappedShopOrderList = wrap
+ .ErrorBoundary({ fallback: 주문 내역을 불러오는 중 문제가 발생했습니다.
})
+ .Suspense({ fallback: })
+ .on(() => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { data } = ShopAPIHook.useOrders();
+ return {data.map((item) => )}
+ })
+
+ return <>
+ Order List
+
+
+
+
+}
diff --git a/src/debug/page/shop_component/product.tsx b/src/debug/page/shop_component/product.tsx
new file mode 100644
index 0000000..cf29de8
--- /dev/null
+++ b/src/debug/page/shop_component/product.tsx
@@ -0,0 +1,156 @@
+import React from "react";
+import * as R from "remeda";
+
+import { ExpandMore } from "@mui/icons-material";
+import {
+ Accordion,
+ AccordionActions,
+ AccordionDetails,
+ AccordionSummary,
+ Button,
+ ButtonProps,
+ CircularProgress,
+ Divider,
+ List,
+ Stack,
+ Typography
+} from "@mui/material";
+import { wrap } from "@suspensive/react";
+import { useQueryClient } from '@tanstack/react-query';
+
+import { MDXRenderer } from "@pyconkr-common/components/mdx";
+import { getFormValue, isFormValid } from '@pyconkr-common/utils/form';
+import ShopComponent from '@pyconkr-shop/components';
+import ShopAPIHook from "@pyconkr-shop/hooks";
+import ShopAPISchema from "@pyconkr-shop/schemas";
+import ShopAPIUtil from "@pyconkr-shop/utils";
+
+const getCartAppendRequestPayload = (product: ShopAPISchema.Product, formRef: React.RefObject): ShopAPISchema.CartItemAppendRequest => {
+ if (!isFormValid(formRef.current))
+ throw new Error('Form is not valid');
+
+ const options = Object.entries(getFormValue<{ [key: string]: string }>({ form: formRef.current })).map(([product_option_group, value]) => {
+ const optionGroup = product.option_groups.find((group) => group.id === product_option_group);
+ if (!optionGroup) throw new Error(`Option group ${product_option_group} not found`);
+
+ const product_option = optionGroup.is_custom_response ? null : value;
+ const custom_response = optionGroup.is_custom_response ? value : null;
+ return { product_option_group, product_option, custom_response }
+ });
+ return { product: product.id, options };
+}
+
+const getProductNotPurchasableReason = (product: ShopAPISchema.Product): string | null => {
+ // 상품이 구매 가능 기간 내에 있고, 상품이 매진되지 않았으며, 매진된 상품 옵션 재고가 없으면 true
+ const now = new Date();
+ const orderableStartsAt = new Date(product.orderable_starts_at);
+ const orderableEndsAt = new Date(product.orderable_ends_at);
+ if (orderableStartsAt > now) return `아직 구매할 수 없어요!\n(${orderableStartsAt.toLocaleString()}부터 구매하실 수 있어요.)`;
+ if (orderableEndsAt < now) return '판매가 종료됐어요!';
+
+ if (R.isNumber(product.leftover_stock) && product.leftover_stock <= 0) return '상품이 품절되었어요!';
+ if (product.option_groups.some((og) => !R.isEmpty(og.options) && og.options.every((o) => R.isNumber(o.leftover_stock) && o.leftover_stock <= 0)))
+ return '선택 가능한 상품 옵션이 모두 품절되어 구매할 수 없어요!';
+
+ return null;
+}
+
+const NotPurchasable: React.FC = ({ children }) => {
+ return
+ {children}
+
+}
+
+const ShopProductItem: React.FC<{ product: ShopAPISchema.Product; onPaymentCompleted?: () => void; }> = ({ product, onPaymentCompleted }) => {
+ const optionFormRef = React.useRef(null);
+
+ const queryClient = useQueryClient();
+ const oneItemOrderStartMutation = ShopAPIHook.usePrepareOneItemOrderMutation();
+ const addItemToCartMutation = ShopAPIHook.useAddItemToCartMutation();
+
+ const addItemToCart = () => addItemToCartMutation.mutate(getCartAppendRequestPayload(product, optionFormRef));
+ const oneItemOrderStart = () => oneItemOrderStartMutation.mutate(
+ getCartAppendRequestPayload(product, optionFormRef),
+ {
+ onSuccess: (order: ShopAPISchema.Order) => {
+ ShopAPIUtil.startPortOnePurchase(
+ order,
+ () => {
+ queryClient.invalidateQueries();
+ queryClient.resetQueries();
+ onPaymentCompleted?.();
+ },
+ (response) => alert("결제를 실패했습니다!\n" + response.error_msg),
+ () => { }
+ );
+ },
+ onError: (error) => alert(error.message || '결제 준비 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요.'),
+ }
+ );
+
+ const formOnSubmit: React.FormEventHandler = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ const disabled = oneItemOrderStartMutation.isPending || addItemToCartMutation.isPending;
+
+ const notPurchasableReason = getProductNotPurchasableReason(product);
+ const actionButtonProps: ButtonProps = {
+ variant: "contained",
+ color: "secondary",
+ disabled,
+ }
+
+ return
+ } sx={{ m: '0' }}>
+
+ {product.name}
+
+
+
+
+
+
+ 로그인 후 장바구니에 담거나 구매할 수 있어요.}>
+ {
+ R.isNullish(notPurchasableReason)
+ ? <>
+
+
+
+
+
+ 결제 금액:
+
+ : {notPurchasableReason}
+ }
+
+
+ {
+ R.isNullish(notPurchasableReason) &&
+
+
+
+ }
+
+}
+
+export const ShopProductList: React.FC = () => {
+ const WrappedShopProductList = wrap
+ .ErrorBoundary({ fallback: 상품 목록을 불러오는 중 문제가 발생했습니다.
})
+ .Suspense({ fallback: })
+ .on(() => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { data } = ShopAPIHook.useProducts();
+ return {data.map((product) => )}
+ })
+
+ return
+ Product List
+
+
+}
diff --git a/src/debug/page/shop_component/user_status.tsx b/src/debug/page/shop_component/user_status.tsx
new file mode 100644
index 0000000..759864e
--- /dev/null
+++ b/src/debug/page/shop_component/user_status.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { Button, CircularProgress, Stack, TextField, Typography } from "@mui/material";
+import { wrap } from "@suspensive/react";
+
+import { getFormValue, isFormValid } from "@pyconkr-common/utils/form";
+import ShopAPIHook from "@pyconkr-shop/hooks";
+
+export const ShopUserStatus: React.FC = () => {
+ const formRef = React.useRef(null);
+ const signInWithEmailMutation = ShopAPIHook.useSignInWithEmailMutation();
+ const SignInWithSNSMutation = ShopAPIHook.useSignInWithSNSMutation();
+ const signOutMutation = ShopAPIHook.useSignOutMutation();
+
+ const signInWithGoogle = () => SignInWithSNSMutation.mutate({ provider: 'google', callback_url: window.location.href });
+ const signInWithEmail = (e: React.FormEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (!isFormValid(formRef.current)) return;
+ signInWithEmailMutation.mutate(getFormValue<{ email: string; password: string }>({ form: formRef.current }));
+ }
+
+ const disabled = SignInWithSNSMutation.isPending || signInWithEmailMutation.isPending || signOutMutation.isPending;
+
+ const WrappedShopUserStatus = wrap
+ .ErrorBoundary({ fallback: 로그인 정보를 불러오는 중 문제가 발생했습니다.
})
+ .Suspense({ fallback: })
+ .on(() => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const { data } = ShopAPIHook.useUserStatus();
+
+ return (data && data.meta.is_authenticated === true) ? (
+
+ User: {data.data.user.username}
+
+
+ ) : (
+
+
+
+
+ )
+ })
+
+ return
+ User Status
+
+
+};
diff --git a/src/debug/page/shop_test.tsx b/src/debug/page/shop_test.tsx
new file mode 100644
index 0000000..efe38f2
--- /dev/null
+++ b/src/debug/page/shop_test.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Divider, Stack, Typography } from "@mui/material";
+
+import { ShopCartList } from '@src/debug/page/shop_component/cart';
+import { ShopOrderList } from "@src/debug/page/shop_component/order";
+import { ShopProductList } from "@src/debug/page/shop_component/product";
+import { ShopUserStatus } from "@src/debug/page/shop_component/user_status";
+
+export const ShopTestPage: React.FC = () =>
+
+ Shop Test Page
+
+
+
+
+
+
+
+
+
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/main.tsx b/src/main.tsx
index edcb36c..e229113 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,23 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ThemeProvider, CssBaseline } from "@mui/material";
+
import { Global } from "@emotion/react";
-import { muiTheme, globalStyles } from "./styles/globalStyles";
-import "./index.css";
-import App from "./App.tsx";
+import { CircularProgress, CssBaseline, ThemeProvider } from "@mui/material";
+import { wrap } from "@suspensive/react";
+import { matchQuery, MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { SnackbarProvider } from "notistack";
+
+import { App } from "./App.tsx";
+import { globalStyles, muiTheme } from "./styles/globalStyles";
+
+declare module '@tanstack/react-query' {
+ interface Register {
+ mutationMeta: {
+ invalidates?: string[][];
+ }
+ }
+}
const queryClient = new QueryClient({
defaultOptions: {
@@ -15,15 +27,42 @@ const queryClient = new QueryClient({
retry: 1,
},
},
+ mutationCache: new MutationCache({
+ onSuccess: (_data, _variables, _context, mutation) => {
+ queryClient.invalidateQueries({ predicate: (query) => mutation.meta?.invalidates?.some((queryKey) => matchQuery({ queryKey }, query)) ?? true })
+ },
+ }),
});
+const CenteredPage: React.FC = ({ children }) => (
+
+);
+
+const ErrorBoundariedApp: React.FC = wrap
+ .ErrorBoundary({ fallback: 문제가 발생했습니다, 새로고침을 해주세요. })
+ .Suspense({ fallback: })
+ .on(() => );
+
createRoot(document.getElementById("root")!).render(
+
-
-
-
+
+
+
+
+
diff --git a/vite.config.ts b/vite.config.ts
index 1fe7815..303a9e2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,13 +2,14 @@ import mdx from "@mdx-js/rollup";
import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";
+import mkcert from "vite-plugin-mkcert";
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
- base: "/frontend/",
+ base: "/",
envDir: "./dotenv",
- plugins: [react(), mdx(), svgr()],
+ plugins: [react(), mdx(), mkcert({ hosts: ["local.dev.pycon.kr"] }), svgr()],
resolve: {
alias: {
"@pyconkr-common": path.resolve(__dirname, "./package/pyconkr-common"),