Merge pull request #22 from pythonkr/feature/add-map-component

feat: 지도 컴포넌트 추가

Author: MU-Software

apps/pyconkr-admin/index.html

@@ -32,12 +32,13 @@
                                    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="description" content="Admin for PyCon Korea" />
     <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 type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d3945eccce7debf0942f885e90a71f97"></script>
     <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
 
     <style>

apps/pyconkr-admin/src/consts/mdx_components.ts

@@ -1,4 +1,5 @@
 // 후대의 개발자님께 : 컴포넌트 맨 첫글자가 대문자로 시작하지 않으면 JSX 컴포넌트가 아니라 일반 HTML 태그로 인식합니다. 제발 대문자로 시작해주세요.
+import * as Common from "@frontend/common";
 import * as Shop from "@frontend/shop";
 import * as mui from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
@@ -129,6 +130,10 @@ const MUIMDXComponents: MDXComponents = {
   Mui__material__Zoom: mui.Zoom,
 };
 
+const PyConKRCommonMDXComponents: MDXComponents = {
+  Common__Components__MDX__Map: Common.Components.MDX.Map,
+};
+
 const PythonKRShopMDXComponents: MDXComponents = {
   Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
   Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
@@ -141,5 +146,6 @@ const PythonKRShopMDXComponents: MDXComponents = {
 
 export const PyConKRMDXComponents = {
   ...MUIMDXComponents,
+  ...PyConKRCommonMDXComponents,
   ...PythonKRShopMDXComponents,
 };

apps/pyconkr/index.html

@@ -38,6 +38,7 @@
     <meta name="googlebot" content="index, follow" />
     <meta name="robots" content="index, follow" />
 
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d3945eccce7debf0942f885e90a71f97"></script>
     <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
 
     <title>PyCon Korea 2025</title>

apps/pyconkr/src/components/pages/test.tsx

@@ -2,11 +2,12 @@ import { Button, Stack } from "@mui/material";
 import * as React from "react";
 
 import { BackendTestPage } from "../../debug/page/backend_test";
+import { MapTestPage } from "../../debug/page/map_test";
 import { MdiTestPage } from "../../debug/page/mdi_test";
 import { ShopTestPage } from "../../debug/page/shop_test";
 
 const LOCAL_STORAGE_KEY = "selectedTab";
-type SelectedTabType = "shop" | "mdi" | "backend";
+type SelectedTabType = "shop" | "mdi" | "backend" | "map";
 
 const getTabFromLocalStorage = (): SelectedTabType =>
   (localStorage.getItem(LOCAL_STORAGE_KEY) as SelectedTabType) || "shop";
@@ -20,6 +21,7 @@ const TabList: { [key in SelectedTabType]: React.ReactNode } = {
   shop: <ShopTestPage />,
   mdi: <MdiTestPage />,
   backend: <BackendTestPage />,
+  map: <MapTestPage />,
 };
 
 export const Test: React.FC = () => {
@@ -32,7 +34,7 @@ export const Test: React.FC = () => {
   );
 
   return (
-    <Stack>
+    <Stack sx={{ width: "100%", height: "100%", minHeight: "100%", flexGrow: 1, py: 2 }} spacing={2}>
       <Stack direction="row" spacing={2} sx={{ width: "100%", justifyContent: "center" }}>
         {Object.keys(TabList).map((tab) => (
           <TabButton key={tab} tab={tab as SelectedTabType} />

apps/pyconkr/src/consts/mdx_components.ts

@@ -1,4 +1,5 @@
 // 후대의 개발자님께 : 컴포넌트 맨 첫글자가 대문자로 시작하지 않으면 JSX 컴포넌트가 아니라 일반 HTML 태그로 인식합니다. 제발 대문자로 시작해주세요.
+import * as Common from "@frontend/common";
 import * as Shop from "@frontend/shop";
 import * as mui from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
@@ -129,6 +130,10 @@ const MUIMDXComponents: MDXComponents = {
   Mui__material__Zoom: mui.Zoom,
 };
 
+const PyConKRCommonMDXComponents: MDXComponents = {
+  Common__Components__MDX__Map: Common.Components.MDX.Map,
+};
+
 const PythonKRShopMDXComponents: MDXComponents = {
   Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
   Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
@@ -141,5 +146,6 @@ const PythonKRShopMDXComponents: MDXComponents = {
 
 export const PyConKRMDXComponents = {
   ...MUIMDXComponents,
+  ...PyConKRCommonMDXComponents,
   ...PythonKRShopMDXComponents,
 };

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

@@ -0,0 +1,107 @@
+import * as Common from "@frontend/common";
+import { Box, Button, FormControlLabel, Stack, Switch, TextField } from "@mui/material";
+import * as React from "react";
+
+type MapTestPageStateType = {
+  checked: boolean;
+  mapProps: Common.Components.MDX.MapPropType;
+};
+
+const INITIAL_DATA: Common.Components.MDX.MapPropType = {
+  language: "ko",
+  geo: { lat: 37.5580918, lng: 126.9982178 },
+  placeName: {
+    ko: "동국대학교 신공학관",
+    en: "Dongguk University\nNew Engineering Building",
+  },
+  placeCode: {
+    kakao: "17579989",
+    google: "gryFHrZub6tsXdwb9",
+    naver: "5IieESq8",
+  },
+  googleMapIframeSrc:
+    "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.871473157695!2d126.99821779999999!3d37.5580918!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca302befa0c31%3A0xbc66c66731962172!2z64-Z6rWt64yA7ZWZ6rWQIOyLoOqzte2Vmeq0gA!5e0!3m2!1sko!2sen!4v1748768615566!5m2!1sko!2sen",
+};
+
+export const MapTestPage: React.FC = () => {
+  const geoFormRef = React.useRef<HTMLFormElement>(null);
+  const placeNameFormRef = React.useRef<HTMLFormElement>(null);
+  const placeCodeFormRef = React.useRef<HTMLFormElement>(null);
+  const gMapIframeUrlInputRef = React.useRef<HTMLInputElement>(null);
+
+  const [state, setState] = React.useState<MapTestPageStateType>({ checked: false, mapProps: INITIAL_DATA });
+  const setChecked = (checked: boolean) => setState((ps) => ({ ...ps, checked }));
+  const language = state.checked ? "en" : "ko";
+
+  const onApply = () => {
+    const geoForm = geoFormRef.current;
+    const pNameForm = placeNameFormRef.current;
+    const pCodeForm = placeCodeFormRef.current;
+    const gMapIframeUrl = gMapIframeUrlInputRef.current;
+
+    [geoForm, pNameForm, pCodeForm, gMapIframeUrl].forEach((formOrInput, index) => {
+      if (!formOrInput) throw new Error(`${formOrInput}[${index}] is not defined.`);
+
+      if (formOrInput instanceof HTMLFormElement && !Common.Utils.isFormValid(formOrInput))
+        throw new Error(`${formOrInput}[${index}] is not valid.`);
+
+      if (formOrInput instanceof HTMLInputElement && !formOrInput.checkValidity())
+        throw new Error(`${formOrInput}[${index}] is not valid.`);
+    });
+    if (!(geoForm && pNameForm && pCodeForm && gMapIframeUrl)) return;
+
+    const strGeo = Common.Utils.getFormValue<{ lat: string; lng: string }>({ form: geoForm });
+    if (!strGeo.lat || !strGeo.lng || isNaN(parseFloat(strGeo.lat)) || isNaN(parseFloat(strGeo.lng))) {
+      alert("위도와 경도를 올바르게 입력해주세요.");
+      return;
+    }
+    const geo = { lat: parseFloat(strGeo.lat), lng: parseFloat(strGeo.lng) };
+    const googleMapIframeSrc = gMapIframeUrl.value.trim();
+    const placeCode = Common.Utils.getFormValue<{ kakao: string; naver: string; google: string }>({ form: pCodeForm });
+    const placeName = Common.Utils.getFormValue<{ ko: string; en: string }>({ form: pNameForm });
+    placeName.ko = placeName.ko.trim().replace("\\n", "\n");
+    placeName.en = placeName.en.trim().replace("\\n", "\n");
+
+    setState((ps) => ({ ...ps, mapProps: { language, geo, placeCode, placeName, googleMapIframeSrc } }));
+  };
+
+  return (
+    <Stack direction="row" spacing={2} sx={{ p: 2 }}>
+      <Stack spacing={2} sx={{ width: "50%", maxWidth: "50%" }}>
+        <FormControlLabel
+          control={<Switch checked={state.checked} onChange={(e) => setChecked(e.target.checked)} />}
+          label={language}
+        />
+        <form ref={geoFormRef}>
+          <Stack spacing={1}>
+            <TextField label="Latitude" name="lat" defaultValue={state.mapProps.geo.lat} />
+            <TextField label="Longitude" name="lng" defaultValue={state.mapProps.geo.lng} />
+          </Stack>
+        </form>
+        <form ref={placeNameFormRef}>
+          <Stack spacing={1}>
+            <TextField label="명칭 (KR)" name="ko" defaultValue={state.mapProps.placeName.ko} />
+            <TextField label="명칭 (EN)" name="en" defaultValue={state.mapProps.placeName.en} />
+          </Stack>
+        </form>
+        <form ref={placeCodeFormRef}>
+          <Stack spacing={1}>
+            <TextField label="Kakaomap Code" name="kakao" defaultValue={state.mapProps.placeCode.kakao} />
+            <TextField label="Google Maps Code" name="google" defaultValue={state.mapProps.placeCode.google} />
+            <TextField label="Naver Shortened URL Code" name="naver" defaultValue={state.mapProps.placeCode.naver} />
+          </Stack>
+        </form>
+        <TextField
+          label="Google Map Iframe URL"
+          type="url"
+          inputRef={gMapIframeUrlInputRef}
+          defaultValue={state.mapProps.googleMapIframeSrc}
+        />
+        <Button onClick={onApply}>적용</Button>
+      </Stack>
+      <Box sx={{ width: "50%", maxWidth: "50%" }}>
+        <Common.Components.MDX.Map {...state.mapProps} />
+      </Box>
+    </Stack>
+  );
+};

package.json

@@ -60,6 +60,7 @@
     "@tanstack/react-query-devtools": "^5.76.1",
     "@types/crypto-js": "^4.2.2",
     "@types/json-schema": "^7.0.15",
+    "@types/kakaomaps": "^1.1.5",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.4",

packages/common/src/components/index.ts

@@ -7,6 +7,8 @@ import {
 } from "./dynamic_route";
 import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
+import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
+import { Map as MapComponent } from "./mdx_components/map";
 import { MDXEditor as MDXEditorComponent } from "./mdx_editor";
 import { PythonKorea as PythonKoreaComponent } from "./pythonkorea";
 
@@ -20,6 +22,11 @@ namespace Components {
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
   export const ErrorFallback = ErrorFallbackComponent;
+
+  export namespace MDX {
+    export const Map = MapComponent;
+    export type MapPropType = MapComponentPropType;
+  }
 }
 
 export default Components;

packages/common/src/components/mdx.tsx

@@ -20,6 +20,29 @@ import * as R from "remeda";
 
 import Hooks from "../hooks";
 import { ErrorFallback } from "./error_handler";
+import { rtrim } from "../utils/string";
+
+const REGISTERED_KEYWORDS = [
+  "import",
+  "export",
+  "const",
+  "let",
+  "function",
+  "class",
+  "if",
+  "else",
+  "for",
+  "while",
+  "return",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  ",",
+  ";",
+  "{",
+  "}",
+];
 
 const CustomMDXComponents: MDXComponents = {
   h1: (props) => <h1 {...props} />,
@@ -47,13 +70,15 @@ const CustomMDXComponents: MDXComponents = {
 };
 
 const lineFormatterForMDX = (line: string) => {
-  const trimmedLine = line.trim();
+  if (R.isEmpty(line.trim())) return "\n";
 
-  if (R.isEmpty(trimmedLine)) return "\n";
+  const trimmedLine = rtrim(line);
 
-  // import문을 위한 꼼수 - import문 다음 줄은 반드시 빈 줄이어야 합니다.
+  // import / export / const문을 위한 꼼수 - import문 다음 줄은 반드시 빈 줄이어야 합니다.
   // 그러나 \n\n으로 변환할 경우, 다음 단계에서 <br />로 변환되므로, import문 다음에 공백이 있는 줄을 넣어서 <br />로 변환되지 않도록 합니다.
-  if (trimmedLine.startsWith("import")) return `${trimmedLine}\n \n`;
+  if (REGISTERED_KEYWORDS.some((keyword) => trimmedLine.startsWith(keyword) || trimmedLine.endsWith(keyword))) {
+    return `${trimmedLine}\n \n`;
+  }
 
   // Table인 경우, 뒤에 공백을 추가하지 않습니다.
   if (trimmedLine.startsWith("|") && trimmedLine.endsWith("|")) return `${trimmedLine}\n`;