pythonkr · MU-Software · May 12, 2025 · May 12, 2025 · May 12, 2025 · May 12, 2025
diff --git a/dotenv/.env.development b/dotenv/.env.development
@@ -1,2 +1,3 @@
 VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.dev.pycon.kr
 VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=DEBUG_csrftoken
+VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp80859147
diff --git a/dotenv/.env.production b/dotenv/.env.production
@@ -1,2 +1,3 @@
 VITE_PYCONKR_SHOP_API_DOMAIN=https://shop-api.pycon.kr
 VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME=csrftoken
+VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID=imp96676915
diff --git a/index.html b/index.html
@@ -1,10 +1,46 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta charSet="UTF-8" />
+    <base href="/" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/favicon-180.png">
+
+    <meta name="theme-color" content="#fff" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#fff" />
+
+    <meta name="msapplication-navbutton-color" content="#fff" />
+    <meta name="msapplication-TileColor" content="#fff" />
+    <meta name="msapplication-TileImage" content="/favicon-192.png" />
+    <meta name="application-name" content="PyCon KR" />
+    <meta name="apple-mobile-web-app-title" content="PyCon KR" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <!-- https://developers.google.com/web/fundamentals/web-app-manifest/ -->
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <meta name="viewport" content="width=device-width,
+                                   height=device-height,
+                                   target-densitydpi=device-dpi,
+                                   initial-scale=1.0,
+                                   minimum-scale=1.0,
+                                   maximum-scale=1.0,
+                                   user-scalable=0,
+                                   user-scalable=no,
+                                   shrink-to-fit=no" />
+    <meta name="author" content="PyCon Korea Organizing Team" />
+    <meta name="description" content="Teaser site for PyCon Korea 2025" />
+    <meta name="keywords" content="PyCon, Python, Conference, Korea, 2025" />
+    <meta name="google" content="notranslate" />
+    <meta name="googlebot" content="index, follow" />
+    <meta name="robots" content="index, follow" />
+
+    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
+
+    <title>PyCon Korea 2025</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
+    "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.0.2",
     "@pyconkr-common": "link:package/pyconkr-common",
     "@pyconkr-shop": "link:package/pyconkr-shop",
@@ -28,10 +29,12 @@
     "axios": "^1.8.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "globals": "^15.15.0",
     "notistack": "^3.0.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.3"
+    "react-router-dom": "^7.5.3",
+    "remeda": "^2.21.3"
   },
 
   "devDependencies": {
@@ -49,14 +52,13 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "gh-pages": "^6.3.0",
-    "globals": "^15.15.0",
     "iamport-typings": "^1.4.0",
     "prettier": "^3.5.3",
-    "remeda": "^2.21.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",
     "vite-plugin-mdx": "^3.6.1",
+    "vite-plugin-mkcert": "^1.17.8",
     "vite-plugin-svgr": "^4.3.0"
 
   },

diff --git a/package/pyconkr-shop/apis/index.ts b/package/pyconkr-shop/apis/index.ts
@@ -86,7 +86,7 @@ namespace ShopAPIRoute {
    * @returns 현재 장바구니 상태
    */
   export const retrieveCart = () =>
-    shopAPIClient.get<ShopAPISchema.OrderProductItem[]>("v1/orders/cart/");
+    shopAPIClient.get<ShopAPISchema.Order>("v1/orders/cart/");
 
   /**
    * 장바구니에 상품을 추가합니다.
@@ -138,7 +138,7 @@ namespace ShopAPIRoute {
    */
   export const prepareCartOrder = () =>
     shopAPIClient.post<ShopAPISchema.Order, undefined>(
-      "v1/orders/cart/",
+      "v1/orders/",
       undefined
     );
 
@@ -168,6 +168,20 @@ namespace ShopAPIRoute {
    */
   export const refundAllItemsInOrder = (data: { order_id: string }) =>
     shopAPIClient.delete<void>(`v1/orders/${data.order_id}/`);
+
+  /**
+   * 결제 완료된 주문의 사용자 정의 응답용 상품 옵션을 수정합니다.
+   * @param data.order_id - 수정할 주문 내역의 UUID
+   * @param data.order_product_relation_id - 수정할 주문 내역 내 상품의 UUID
+   * @param data.options - 수정할 상품 옵션 정보
+   * @param data.options[].order_product_option_relation - 수정할 상품 옵션의 UUID
+   * @param data.options[].custom_response - 수정할 상품 옵션에 대한 사용자 정의 응답
+   */
+  export const patchOrderOptions = async (data: ShopAPISchema.OrderOptionsPatchRequest) =>
+    shopAPIClient.patch<ShopAPISchema.Order, ShopAPISchema.OrderOptionsPatchRequest['options']>(
+      `v1/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
+      data.options
+    );
 }
 
 export default ShopAPIRoute;
diff --git a/package/pyconkr-shop/components/index.ts b/package/pyconkr-shop/components/index.ts
@@ -0,0 +1,15 @@
+import {
+  OptionGroupInput as OptionGroupInputComponent,
+  OrderProductRelationOptionInput as OrderProductRelationOptionInputComponent,
+} from "./option_group_input";
+import { PriceDisplay as PriceDisplayComponent } from "./price_display";
+import { ShopSignInGuard as ShopSignInGuardComponent } from "./signin_guard";
+
+namespace ShopComponent {
+  export const OptionGroupInput = OptionGroupInputComponent;
+  export const OrderProductRelationOptionInput = OrderProductRelationOptionInputComponent;
+  export const PriceDisplay = PriceDisplayComponent;
+  export const ShopSignInGuard = ShopSignInGuardComponent;
+}
+
+export default ShopComponent;
diff --git a/package/pyconkr-shop/components/option_group_input.tsx b/package/pyconkr-shop/components/option_group_input.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import * as R from 'remeda';
+
+import { FormControl, InputLabel, MenuItem, Select, TextField, Tooltip } from '@mui/material';
+
+import ShopAPISchema from '@pyconkr-shop/schemas';
+import ShopAPIUtil from '@pyconkr-shop/utils';
+import { PriceDisplay } from './price_display';
+
+type CommonOptionGroupType = {
+  id: string;
+  name: string;
+}
+type SelectableOptionGroupType = CommonOptionGroupType & {
+  is_custom_response: false;
+  custom_response_pattern: null;
+}
+type CustomResponseOptionGroupType = CommonOptionGroupType & {
+  is_custom_response: true;
+  custom_response_pattern: string;
+}
+type OptionGroupType = SelectableOptionGroupType | CustomResponseOptionGroupType;
+
+type SimplifiedOption = Pick<ShopAPISchema.Option, ('id' | 'name' | 'additional_price' | 'leftover_stock')>;
+
+const isFilledString = (str: unknown): str is string => R.isString(str) && !R.isEmpty(str);
+
+const SelectableOptionGroupInput: React.FC<{
+  optionGroup: SelectableOptionGroupType;
+  options: SimplifiedOption[];
+  defaultValue?: string;
+  disabled?: boolean;
+  disabledReason?: string;
+}> = ({ optionGroup, options, defaultValue, disabled, disabledReason }) => {
+  const optionElements = options.map(
+    (option) => {
+      const isOptionOutOfStock = R.isNumber(option.leftover_stock) && option.leftover_stock <= 0;
+
+      return <MenuItem key={option.id} value={option.id} disabled={disabled || isOptionOutOfStock}>
+        {option.name}
+        {option.additional_price > 0 && (<> [ +<PriceDisplay price={option.additional_price} /> ]</>)}
+        {isOptionOutOfStock && <> (품절)</>}
+      </MenuItem>
+    }
+  )
+
+  const selectElement = <FormControl fullWidth>
+    <InputLabel id={`${optionGroup.id}label`}>{optionGroup.name}</InputLabel>
+    <Select label={`${optionGroup.id}label`} name={optionGroup.id} defaultValue={defaultValue} disabled={disabled} required>
+      {optionElements}
+    </Select>
+  </FormControl>
+
+  return isFilledString(disabledReason) ? <Tooltip title={disabledReason}>{selectElement}</Tooltip> : selectElement
+}
+
+const CustomResponseOptionGroupInput: React.FC<{
+  optionGroup: CustomResponseOptionGroupType;
+  defaultValue?: string;
+  disabled?: boolean;
+  disabledReason?: string;
+}> = ({ optionGroup, defaultValue, disabled, disabledReason }) => {
+  const pattern = ShopAPIUtil.getCustomResponsePattern(optionGroup)?.source;
+
+  const textFieldElement = <TextField
+    label={optionGroup.name}
+    name={optionGroup.id}
+    required
+    defaultValue={defaultValue}
+    disabled={disabled}
+    slotProps={{ htmlInput: { pattern } }} />
+
+  return isFilledString(disabledReason) ? <Tooltip title={disabledReason}>{textFieldElement}</Tooltip> : textFieldElement
+}
+
+export const OptionGroupInput: React.FC<{
+  optionGroup: OptionGroupType;
+  options: SimplifiedOption[];
+
+  defaultValue?: string;
+  disabled?: boolean;
+  disabledReason?: string;
+}> = ({ optionGroup, options, defaultValue, disabled, disabledReason }) => optionGroup.is_custom_response
+  ? <CustomResponseOptionGroupInput optionGroup={optionGroup} defaultValue={defaultValue} disabled={disabled} disabledReason={disabledReason} />
+  : <SelectableOptionGroupInput optionGroup={optionGroup} options={options} defaultValue={defaultValue} disabled={disabled} disabledReason={disabledReason} />
+
+
+export const OrderProductRelationOptionInput: React.FC<{
+  optionRel: ShopAPISchema.OrderProductItem["options"][number];
+  disabled?: boolean;
+  disabledReason?: string;
+}> = ({ optionRel, disabled, disabledReason }) => {
+  let defaultValue: string | null = null;
+  let guessedDisabledReason: string | undefined = undefined;
+  let dummyOptions: { id: string; name: string; additional_price: number; leftover_stock: number | null }[] = [];
+
+  // type hinting을 위해 if문을 사용함
+  if (optionRel.product_option_group.is_custom_response === false && R.isNonNull(optionRel.product_option)) {
+    defaultValue = optionRel.product_option.id;
+    guessedDisabledReason = '추가 비용이 발생하는 옵션은 수정할 수 없어요.';
+    dummyOptions = [
+      {
+        id: optionRel.product_option.id,
+        name: optionRel.product_option.name,
+        additional_price: optionRel.product_option.additional_price || 0,
+        leftover_stock: null,
+      }
+    ]
+  } else {
+    defaultValue = optionRel.custom_response;
+  }
+
+  return <OptionGroupInput
+    key={optionRel.product_option_group.id}
+    optionGroup={optionRel.product_option_group}
+    options={dummyOptions}
+    defaultValue={defaultValue || undefined}
+    disabled={disabled || !ShopAPIUtil.isOrderProductOptionModifiable(optionRel)}
+    disabledReason={disabledReason || guessedDisabledReason}
+  />
+}
diff --git a/...conkr-common/components/price_display.tsx → ...pyconkr-shop/components/price_display.tsx b/...conkr-common/components/price_display.tsx → ...pyconkr-shop/components/price_display.tsx
diff --git a/package/pyconkr-shop/components/signin_guard.tsx b/package/pyconkr-shop/components/signin_guard.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Typography } from '@mui/material';
+
+import ShopAPIHook from '@pyconkr-shop/hooks';
+
+export const ShopSignInGuard: React.FC<{ children: React.ReactNode, fallback?: React.ReactNode }> = ({ children, fallback }) => {
+  const { data } = ShopAPIHook.useUserStatus();
+  const renderedFallback = fallback || <Typography variant="h6" gutterBottom>로그인 후 이용해주세요.</Typography>;
+  return (data && data.meta.is_authenticated === true) ? children : renderedFallback;
+};
diff --git a/package/pyconkr-shop/hooks/index.ts b/package/pyconkr-shop/hooks/index.ts
@@ -140,6 +140,13 @@ namespace ShopAPIHook {
       mutationFn: ShopAPIRoute.refundAllItemsInOrder,
       meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
     });
+
+  export const useOptionsOfOneItemInOrderPatchMutation = () =>
+    useMutation({
+      mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
+      mutationFn: ShopAPIRoute.patchOrderOptions,
+      meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
+    });
 }
 
 export default ShopAPIHook;