feat: 자주 사용되는 utils 및 components 추가

Author: MU-Software

package/pyconkr-common/components/mdx.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as runtime from "react/jsx-runtime";
+
+import { evaluate } from "@mdx-js/mdx";
+import { MDXProvider } from "@mdx-js/react";
+import { CircularProgress, Typography } from '@mui/material';
+import { wrap } from '@suspensive/react';
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+const useMDX = (text: string) => useSuspenseQuery({
+  queryKey: ['mdx', text],
+  queryFn: async () => {
+    const { default: RenderResult } = await evaluate(text, { ...runtime, baseUrl: import.meta.url });
+    return <MDXProvider><RenderResult /></MDXProvider>
+  }
+})
+
+export const MDXRenderer: React.FC<{ text: string }> = wrap
+  .ErrorBoundary({
+    fallback: ({ error }) => {
+      console.error('MDX 변환 오류:', error);
+      return <Typography variant="body2" color="error">MDX 변환 오류: {error.message}</Typography>
+    }
+  })
+  .Suspense({ fallback: <CircularProgress /> })
+  .on(({ text }) => useMDX(text).data);

package/pyconkr-common/components/price_display.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const PriceDisplay: React.FC<{ price: number, label?: string }> = ({ price, label }) => {
+  return <>{(label ? `${label} : ` : '') + price.toLocaleString()}원</>
+};

package/pyconkr-common/utils/form.ts

@@ -0,0 +1,40 @@
+import * as R from 'remeda'
+
+export type PossibleFormInputType = HTMLFormElement | undefined | null
+export type FormResultObject = { [k: string]: FormDataEntryValue | boolean | null }
+
+export const isFormValid = (form: HTMLFormElement | null | undefined): form is HTMLFormElement => {
+  if (!(R.isObjectType(form) && form instanceof HTMLFormElement)) return false
+
+  if (!form.checkValidity()) {
+    form.reportValidity()
+    return false
+  }
+
+  return true
+}
+
+export function getFormValue<T>(_: { form: HTMLFormElement; fieldToExcludeWhenFalse?: string[]; fieldToNullWhenFalse?: string[] }): T {
+  const formData: {
+    [k: string]: FormDataEntryValue | boolean | null
+  } = Object.fromEntries(new FormData(_.form))
+  Object.keys(formData)
+    .filter((key) => (_.fieldToExcludeWhenFalse ?? []).includes(key) || (_.fieldToNullWhenFalse ?? []).includes(key))
+    .filter((key) => R.isEmpty(formData[key] as string))
+    .forEach((key) => {
+      if ((_.fieldToExcludeWhenFalse ?? []).includes(key)) {
+        delete formData[key]
+      } else if ((_.fieldToNullWhenFalse ?? []).includes(key)) {
+        formData[key] = null
+      }
+    })
+  Array.from(_.form.children).forEach((child) => {
+    const targetElement: Element | null = child
+    if (targetElement && !(targetElement instanceof HTMLInputElement)) {
+      const targetElements = targetElement.querySelectorAll('input')
+      for (const target of targetElements)
+        if (target instanceof HTMLInputElement && target.type === 'checkbox') formData[target.name] = target.checked ? true : false
+    }
+  })
+  return formData as T
+}