desktop 환경일 때만 챗봇 노출

Author: CirnoV

package.json

@@ -42,7 +42,7 @@
 		"@portone-io/lint-local-links-valid": "workspace:^",
 		"@portone-io/lint-no-jamo": "workspace:^",
 		"@portone-io/remark-param-tree": "workspace:^",
-		"@portone/ai-chatbot-loader": "^0.0.2",
+		"@portone/ai-chatbot-loader": "^0.0.4",
 		"@portone/browser-sdk": "^0.1.0",
 		"@rollup/plugin-yaml": "^4.1.2",
 		"@sentry/solidstart": "^10.12.0",
@@ -53,6 +53,7 @@
 		"@solid-primitives/deep": "^0.3.3",
 		"@solid-primitives/intersection-observer": "^2.2.2",
 		"@solid-primitives/map": "^0.7.2",
+		"@solid-primitives/media": "^2.3.3",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
 		"@solidjs/start": "^1.2.0",

pnpm-lock.yaml

@@ -8,11 +8,12 @@ import "./styles/docsearch/modal.css";
 import "./styles/docsearch/button.css";
 
 import { withSentryRouterRouting } from "@sentry/solidstart/solidrouter";
+import { createMediaQuery } from "@solid-primitives/media";
 import { Link, Meta, MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { clientOnly } from "@solidjs/start";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
+import { Show, Suspense } from "solid-js";
 
 import { NotFoundBoundary } from "./components/404";
 import Trackers from "./layouts/trackers/Trackers";
@@ -40,6 +41,7 @@ const ViteErrorHandler = () => {
 const Chatbot = clientOnly(() => import("./components/Chatbot"));
 
 export default function App() {
+  const isDesktop = createMediaQuery("(min-width: 769px)");
   return (
     <SentryRouter
       root={(props) => (
@@ -50,7 +52,9 @@ export default function App() {
           <Link rel="icon" type="image/png" href="/favicon.png" />
           <Trackers />
           <ViteErrorHandler />
-          <Chatbot />
+          <Show when={isDesktop()}>
+            <Chatbot />
+          </Show>
           <Suspense>
             <NotFoundBoundary>{props.children}</NotFoundBoundary>
           </Suspense>