도움말템플릿릿

apps/cs/src/pages/menu/ui/type-menu-form.tsx

@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
 import dayjs from "dayjs";
+import { useEffect, useRef } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import {
   DatePicker,
@@ -30,12 +31,91 @@ const Editor = dynamic(
   { ssr: false },
 );
 
+const DEFAULT_HELP_CONTENT = `<body style="font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background-color: #f4f6f8; color: #333;">
+
+  <header style="background-color: #0078d4; color: white; padding: 20px; text-align: center;">
+
+    <h1 style="margin: 0;">📌 기능명: 예) 자동 백업</h1>
+
+    <p style="margin: 5px 0 0;">이 기능은 데이터를 자동으로 백업하여 안전하게 보관합니다.</p>
+
+  </header>
+
+  <main style="padding: 30px; max-width: 800px; margin: auto; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.05);">
+
+    <section>
+
+      <h2 style="color: #0078d4; margin-top: 40px;">기능 개요</h2>
+
+      <p>자동 백업 기능은 사용자의 데이터를 설정된 주기와 조건에 따라 자동으로 저장소에 백업합니다.</p>
+
+    </section>
+
+    <section>
+
+      <h2 style="color: #0078d4; margin-top: 40px;">사용 방법</h2>
+
+      <ol style="margin-left: 20px;">
+
+        <li>설정 메뉴에서 <strong>자동 백업</strong>을 활성화합니다.</li>
+
+        <li>백업 주기(예: 매일, 매주)를 선택합니다.</li>
+
+        <li>백업 대상 폴더 및 저장 위치를 지정합니다.</li>
+
+        <li>설정을 저장하면 자동으로 백업이 시작됩니다.</li>
+
+      </ol>
+
+    </section>
+
+    <section>
+
+      <h2 style="color: #0078d4; margin-top: 40px;">주요 기능</h2>
+
+      <ul style="margin-left: 20px;">
+
+        <li>백업 주기 설정</li>
+
+        <li>클라우드 또는 로컬 저장소 선택</li>
+
+        <li>백업 로그 확인</li>
+
+        <li>오류 발생 시 알림 기능</li>
+
+      </ul>
+
+    </section>
+
+    <section>
+
+      <h2 style="color: #0078d4; margin-top: 40px;">주의 사항</h2>
+
+      <div style="background-color: #fff8dc; border-left: 4px solid #ffcc00; padding: 10px; margin: 20px 0;">
+
+        백업 저장소의 용량을 반드시 확인하세요. 저장 공간이 부족하면 백업이 실패할 수 있습니다.
+
+      </div>
+
+    </section>
+
+    <footer style="text-align: center; font-size: 0.9em; color: #666; margin-top: 40px;">
+
+      &copy; 2025 회사명 | 기능 메뉴얼 v1.0
+
+    </footer>
+
+  </main>
+
+</body>`;
+
 type TypeMenuFormProps = {
   form: UseFormReturn<MenuFormData>;
   menuType: MenuType;
 };
 
 function TypeMenuForm({ form, menuType }: TypeMenuFormProps) {
+  const hasSetDefaultHelpContent = useRef(false);
   const handleIconClick = (icon: string) => {
     form.setValue("iconNm", icon);
   };
@@ -65,6 +145,19 @@ function TypeMenuForm({ form, menuType }: TypeMenuFormProps) {
     form.setValue("menuPicDsgnYmd", dayjs(date).format("YYYYMMDD"));
   };
 
+  useEffect(() => {
+    if (menuType === "INSIDE") {
+      const currentValue = form.getValues("menuHlpCn");
+      if ((!currentValue || currentValue.trim() === "") && !hasSetDefaultHelpContent.current) {
+        form.setValue("menuHlpCn", DEFAULT_HELP_CONTENT);
+        hasSetDefaultHelpContent.current = true;
+      }
+    } else {
+      // menuType이 "INSIDE"가 아닐 때 ref 리셋
+      hasSetDefaultHelpContent.current = false;
+    }
+  }, [menuType, form]);
+
   const getUrlPathPlaceholder = () => {
     if (menuType === "CONTENTS") return "콘텐츠 선택 시 자동으로 입력됩니다.";
     if (menuType === "BOARD") return "게시판 선택 시 자동으로 입력됩니다.";

packages/common/components/src/ui/lnb/index.tsx

@@ -299,16 +299,29 @@ export function LNB({
             <DialogTrigger asChild>
 
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[85rem]">
+            <DialogContent className="sm:max-w-[85rem] max-h-[90vh] flex flex-col">
               <DialogHeader>
                 <DialogTitle>도움말</DialogTitle>
               </DialogHeader>
-              <div className="py-4">
+              <div className="py-4 overflow-y-auto flex-1 min-h-0">
                 {helpContent ? (
                   <div
-                    className="text-sm leading-relaxed text-muted-foreground"
-                    dangerouslySetInnerHTML={{ __html: helpContent }}
-                  />
+                    style={{ 
+                      fontSize: '16px',
+                      lineHeight: '1.5',
+                    }}
+                  >
+                    <div
+                      dangerouslySetInnerHTML={{ 
+                        __html: helpContent
+                          .replace(/<body[^>]*>/gi, '<div>')
+                          .replace(/<\/body>/gi, '</div>')
+                      }}
+                      style={{
+                        fontSize: 'inherit',
+                      }}
+                    />
+                  </div>
                 ) : (
                   <p className="text-sm text-muted-foreground">
                     현재 페이지에 대한 도움말이 없습니다.