(대표님, 최겸) 작업사항 - 이메일 템플릿, 메일링, 기술영업 요구사항 반영

5 files changed, 2226 insertions, 0 deletions

diff --git a/lib/email-template/editor/template-content-editor.tsx b/lib/email-template/editor/template-content-editor.tsx
new file mode 100644
index 00000000..4d31753c
--- /dev/null
+++ b/lib/email-template/editor/template-content-editor.tsx
@@ -0,0 +1,609 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { AlertTriangle, Save, Mail, RefreshCw, Settings2, Code2, Lightbulb, Moon, Sun } from "lucide-react"
+import { toast } from "sonner"
+import { type TemplateWithVariables } from "@/db/schema"
+import { previewTemplateAction, updateTemplateAction } from "../service"
+import { useSession } from "next-auth/react"
+import { HtmlCodeEditor } from "@/components/template-editor/html-code-editor"
+import { formatHtml } from "@/lib/utils"
+
+interface TemplateContentEditorProps {
+    template: TemplateWithVariables
+    onUpdate: (template: TemplateWithVariables) => void
+}
+
+export function TemplateContentEditor({ template, onUpdate }: TemplateContentEditorProps) {
+    const [content, setContent] = React.useState(() => {
+        return formatHtml(template.content)
+    })
+    const [subject, setSubject] = React.useState(template.subject || '')
+    const [isLoading, setIsLoading] = React.useState(false)
+    const [isPreviewLoading, setIsPreviewLoading] = React.useState(false)
+    const [previewHtml, setPreviewHtml] = React.useState<string>("")
+    const [previewSubject, setPreviewSubject] = React.useState<string>("")
+    const [validationErrors, setValidationErrors] = React.useState<string[]>([])
+    const [sampleData, setSampleData] = React.useState(template.sampleData || {})
+    const [autoPreview, setAutoPreview] = React.useState(true)
+    const [darkMode, setDarkMode] = React.useState(false) // 다크모드 상태 추가
+    const { data: session } = useSession();
+
+    React.useEffect(() => {
+        if (template.content !== content) {
+          const formatted = formatHtml(template.content)
+          setContent(formatted)
+        }
+      }, [template.content])
+
+    // HtmlCodeEditor ref
+    const editorRef = React.useRef<{
+        focus: () => void
+        insertText: (text: string) => void
+        getEditor: () => any
+    }>(null)
+
+    React.useEffect(() => {
+        if (!session?.user?.id) {
+            toast.error("로그인이 필요합니다");
+        }
+    }, [session]);
+
+    // 자동 미리보기 (디바운스) - 시간 늘림
+    React.useEffect(() => {
+        if (!autoPreview) return
+
+        const timer = setTimeout(() => {
+            handlePreview(true)
+        }, 1500) // 1.5초로 증가
+
+        return () => clearTimeout(timer)
+    }, [content, subject, sampleData, autoPreview])
+
+    // 실시간 검증
+    React.useEffect(() => {
+        validateContent(content, subject)
+    }, [content, subject])
+
+    // 변수 사용량 분석
+    const analyzeVariableUsage = React.useCallback(() => {
+        const templateVars = template.variables.map(v => v.variableName)
+        const usedVars = new Set<string>()
+
+        const combinedText = content + ' ' + subject
+        const matches = combinedText.match(/\{\{\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*\}\}/g)
+        if (matches) {
+            matches.forEach(match => {
+                const varName = match.replace(/\{\{\s*|\s*\}\}/g, '')
+                usedVars.add(varName)
+            })
+        }
+
+        const unusedVars = templateVars.filter(v => !usedVars.has(v))
+        const undefinedVars = Array.from(usedVars).filter(v =>
+            !templateVars.includes(v) &&
+            !['t', 'siteName', 'companyName', 'i18n'].includes(v)
+        )
+
+        return { unusedVars, undefinedVars, usedVars: Array.from(usedVars) }
+    }, [content, subject, template.variables])
+
+    // 검증 함수
+    const validateContent = (content: string, subject: string) => {
+        const errors: string[] = []
+
+        if (subject.length > 200) {
+            errors.push('이메일 제목이 너무 깁니다 (200자 초과)')
+        }
+
+        const forbiddenChars = ['\n', '\r', '\t']
+        forbiddenChars.forEach(char => {
+            if (subject.includes(char)) {
+                errors.push('이메일 제목에 개행 문자나 탭 문자를 사용할 수 없습니다')
+            }
+        })
+
+        // HTML 기본 검증 추가
+        if (content.trim()) {
+            try {
+                const parser = new DOMParser()
+                const doc = parser.parseFromString(`<div>${content}</div>`, 'text/html')
+
+                const parseError = doc.querySelector('parsererror')
+                if (parseError) {
+                    errors.push('유효하지 않은 HTML 구조가 감지되었습니다.')
+                }
+            } catch (error) {
+                errors.push('HTML 구문 분석 중 오류가 발생했습니다.')
+            }
+        }
+
+        const dangerousPatterns = [
+            /\{\{\s*(constructor|prototype|__proto__|process|global|require|import|eval|Function)\s*\}\}/gi,
+            /\{\{\s*.*\.(constructor|prototype|__proto__)\s*.*\}\}/gi,
+        ]
+
+        const combinedText = content + ' ' + subject
+        for (const pattern of dangerousPatterns) {
+            if (pattern.test(combinedText)) {
+                errors.push('보안상 위험한 구문이 감지되었습니다.')
+                break
+            }
+        }
+
+        setValidationErrors(errors)
+    }
+
+    // 저장 함수
+    const handleSave = async () => {
+        if (validationErrors.length > 0) {
+            toast.error('검증 오류를 먼저 해결해주세요.')
+            return
+        }
+
+        setIsLoading(true)
+        try {
+            if (!session?.user?.id) {
+                toast.error("로그인이 필요합니다")
+                return
+            }
+
+            const result = await updateTemplateAction(template.slug, {
+                subject,
+                content,
+                sampleData,
+                updatedBy: Number(session.user.id)
+            })
+
+            if (result.success) {
+                toast.success('템플릿이 저장되었습니다.')
+                onUpdate({
+                    ...template,
+                    subject,
+                    content,
+                    sampleData,
+                    version: template.version + 1
+                })
+            } else {
+                toast.error(result.error || '저장에 실패했습니다.')
+            }
+        } catch (error) {
+            toast.error('저장 중 오류가 발생했습니다.')
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    // 미리보기 생성
+    const handlePreview = async (silent = false) => {
+        if (!silent) setIsPreviewLoading(true)
+
+        try {
+            const result = await previewTemplateAction(
+                template.slug,
+                sampleData,
+                content,
+                // subject // 주석 해제
+            )
+
+            if (result.success) {
+                setPreviewHtml(result.data.html)
+                setPreviewSubject(result.data.subject)
+                if (!silent) toast.success('미리보기가 생성되었습니다.')
+            } else {
+                if (!silent) toast.error(result.error || '미리보기 생성에 실패했습니다.')
+            }
+        } catch (error) {
+            if (!silent) toast.error('미리보기 생성 중 오류가 발생했습니다.')
+        } finally {
+            if (!silent) setIsPreviewLoading(false)
+        }
+    }
+
+    // 변수 삽입 함수 - HtmlCodeEditor 지원
+    const insertVariable = (variableName: string, targetField: 'subject' | 'content') => {
+        const variable = `{{${variableName}}}`
+
+        if (targetField === 'subject') {
+            const input = document.querySelector('input[data-subject-input]') as HTMLInputElement
+            if (input) {
+                const start = input.selectionStart || 0
+                const end = input.selectionEnd || 0
+                const newValue = subject.substring(0, start) + variable + subject.substring(end)
+                setSubject(newValue)
+
+                setTimeout(() => {
+                    input.focus()
+                    input.setSelectionRange(start + variable.length, start + variable.length)
+                }, 0)
+            }
+        } else {
+            // HtmlCodeEditor에 변수 삽입
+            if (editorRef.current) {
+                editorRef.current.insertText(variable)
+            }
+        }
+    }
+
+    // HTML 템플릿 스니펫 삽입 - HtmlCodeEditor 지원
+    const insertHtmlSnippet = (snippet: string) => {
+        if (editorRef.current) {
+            editorRef.current.insertText(snippet)
+        }
+    }
+
+    // 샘플 데이터 업데이트
+    const updateSampleData = (key: string, value: any) => {
+        const newSampleData = { ...sampleData, [key]: value }
+        setSampleData(newSampleData)
+    }
+
+    const variableAnalysis = analyzeVariableUsage()
+
+    // HTML 스니펫들 - 개행 추가로 더 깔끔하게
+    const htmlSnippets = [
+        {
+            name: '버튼',
+            snippet: `\n<div style="text-align: center; margin: 20px 0;">
+  <a href="{{buttonUrl}}" style="background-color: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;">
+    {{buttonText}}
+  </a>
+</div>\n`
+        },
+        {
+            name: '구분선',
+            snippet: `\n<hr style="border: none; border-top: 1px solid #eee; margin: 30px 0;">\n`
+        },
+        {
+            name: '박스',
+            snippet: `\n<div style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 20px; margin: 20px 0;">
+  {{content}}
+</div>\n`
+        },
+        {
+            name: '이미지',
+            snippet: `\n<div style="text-align: center; margin: 20px 0;">
+  <img src="{{imageUrl}}" alt="{{imageAlt}}" style="max-width: 100%; height: auto;">
+</div>\n`
+        },
+        {
+            name: '2열 레이아웃',
+            snippet: `\n<table width="100%" cellpadding="0" cellspacing="0" style="margin: 20px 0;">
+  <tr>
+    <td width="50%" style="padding: 10px;">
+      {{leftContent}}
+    </td>
+    <td width="50%" style="padding: 10px;">
+      {{rightContent}}
+    </td>
+  </tr>
+</table>\n`
+        },
+        {
+            name: '헤더',
+            snippet: `\n<h2 style="color: #333; margin: 20px 0 10px 0; font-size: 24px;">{{title}}</h2>\n`
+        }
+    ]
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* 왼쪽: 편집 영역 */}
+            <div className="space-y-6">
+                {/* 상태 표시 */}
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        {validationErrors.length > 0 && (
+                            <Badge variant="destructive" className="gap-1">
+                                <AlertTriangle className="h-3 w-3" />
+                                {validationErrors.length}개 오류
+                            </Badge>
+                        )}
+
+                        {variableAnalysis.undefinedVars.length > 0 && (
+                            <Badge variant="secondary" className="gap-1">
+                                <AlertTriangle className="h-3 w-3" />
+                                {variableAnalysis.undefinedVars.length}개 미정의 변수
+                            </Badge>
+                        )}
+
+                        <Badge variant="outline">
+                            {variableAnalysis.usedVars.length}/{template.variables.length} 변수 사용 중
+                        </Badge>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setDarkMode(!darkMode)}
+                            title="다크모드 전환"
+                        >
+                            {darkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+                        </Button>
+
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setAutoPreview(!autoPreview)}
+                            className={autoPreview ? 'bg-blue-50' : ''}
+                        >
+                            <RefreshCw className={`mr-2 h-4 w-4 ${autoPreview ? 'text-blue-600' : ''}`} />
+                            자동 미리보기
+                        </Button>
+
+                        <Button
+                            size="sm"
+                            onClick={handleSave}
+                            disabled={isLoading || validationErrors.length > 0}
+                        >
+                            <Save className="mr-2 h-4 w-4" />
+                            {isLoading ? '저장 중...' : '저장'}
+                        </Button>
+                    </div>
+                </div>
+
+                {/* 오류 표시 */}
+                {validationErrors.length > 0 && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+                        <div className="flex items-start gap-3">
+                            <AlertTriangle className="h-5 w-5 text-red-600 mt-0.5" />
+                            <div>
+                                <h3 className="font-semibold text-red-800">검증 오류</h3>
+                                <ul className="mt-2 text-sm text-red-700 space-y-1">
+                                    {validationErrors.map((error, index) => (
+                                        <li key={index}>• {error}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* 이메일 제목 편집 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Mail className="h-5 w-5" />
+                            이메일 제목
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div>
+                            <Label htmlFor="subject">제목 템플릿</Label>
+                            <Input
+                                id="subject"
+                                data-subject-input
+                                value={subject}
+                                onChange={(e) => setSubject(e.target.value)}
+                                placeholder="예: {{userName}}님의 {{type}} 알림"
+                                className="font-mono"
+                            />
+                        </div>
+
+                        <div>
+                            <Label className="text-sm font-medium">제목에 변수 삽입</Label>
+                            <div className="flex flex-wrap gap-1 mt-2">
+                                {template.variables.map(variable => (
+                                    <Badge
+                                        key={variable.id}
+                                        variant="outline"
+                                        className="cursor-pointer hover:bg-blue-50"
+                                        onClick={() => insertVariable(variable.variableName, 'subject')}
+                                    >
+                                        {variable.variableName}
+                                    </Badge>
+                                ))}
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* 변수 분석 결과 */}
+                {(variableAnalysis.undefinedVars.length > 0 || variableAnalysis.unusedVars.length > 0) && (
+                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                        <h3 className="font-semibold text-blue-800 mb-3">변수 사용 분석</h3>
+
+                        {variableAnalysis.undefinedVars.length > 0 && (
+                            <div className="mb-3">
+                                <h4 className="text-sm font-medium text-blue-700 mb-1">미정의 변수</h4>
+                                <div className="flex flex-wrap gap-1">
+                                    {variableAnalysis.undefinedVars.map(varName => (
+                                        <Badge key={varName} variant="destructive" className="text-xs">
+                                            {varName}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {variableAnalysis.unusedVars.length > 0 && (
+                            <div>
+                                <h4 className="text-sm font-medium text-blue-700 mb-1">미사용 변수</h4>
+                                <div className="flex flex-wrap gap-1">
+                                    {variableAnalysis.unusedVars.map(varName => (
+                                        <Badge key={varName} variant="secondary" className="text-xs">
+                                            {varName}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {/* HTML 스니펫 도구 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Code2 className="h-5 w-5" />
+                            빠른 HTML 삽입
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="grid grid-cols-2 gap-2">
+                            {htmlSnippets.map((snippet, index) => (
+                                <Button
+                                    key={index}
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => insertHtmlSnippet(snippet.snippet)}
+                                    className="justify-start"
+                                >
+                                    {snippet.name}
+                                </Button>
+                            ))}
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* HtmlCodeEditor로 교체된 HTML 편집기 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Code2 className="h-5 w-5" />
+                            HTML 템플릿 편집
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        {/* HtmlCodeEditor 사용 */}
+                        <HtmlCodeEditor
+                            ref={editorRef}
+                            value={content}
+                            onChange={setContent}
+                            height="600px"
+                            darkMode={darkMode}
+                            placeholder="HTML 템플릿을 입력하세요..."
+                        />
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {/* 변수 삽입 */}
+                            <div className="bg-gray-50 p-4 rounded-lg">
+                                <h4 className="font-medium text-gray-900 mb-2">변수 삽입</h4>
+                                <div className="flex flex-wrap gap-1">
+                                    {template.variables.map(variable => (
+                                        <Badge
+                                            key={variable.id}
+                                            variant="outline"
+                                            className="cursor-pointer hover:bg-blue-50"
+                                            onClick={() => insertVariable(variable.variableName, 'content')}
+                                        >
+                                            {variable.variableName}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* 도움말 */}
+                            <div className="bg-amber-50 p-4 rounded-lg">
+                                <h4 className="font-medium text-amber-900 mb-2 flex items-center gap-1">
+                                    <Lightbulb className="h-4 w-4" />
+                                    이메일 HTML 팁
+                                </h4>
+                                <ul className="text-sm text-amber-800 space-y-1">
+                                    <li>• 테이블 기반 레이아웃 사용</li>
+                                    <li>• 인라인 CSS 스타일 권장</li>
+                                    <li>• max-width: 600px 권장</li>
+                                    <li>• 이미지에 alt 속성 필수</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+
+            {/* 오른쪽: 미리보기 영역 */}
+            <div className="space-y-6">
+                {/* 샘플 데이터 편집 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Settings2 className="h-5 w-5" />
+                            샘플 데이터
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                        {template.variables.length > 0 ? (
+                            <>
+                                {template.variables.map(variable => (
+                                    <div key={variable.id}>
+                                        <Label className="text-sm">{variable.variableName}</Label>
+                                        <Input
+                                            value={sampleData[variable.variableName] || ''}
+                                            onChange={(e) => updateSampleData(variable.variableName, e.target.value)}
+                                            placeholder={variable.description || `${variable.variableName} 값 입력`}
+                                            className="text-sm"
+                                        />
+                                    </div>
+                                ))}
+
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    onClick={() => handlePreview(false)}
+                                    disabled={isPreviewLoading}
+                                    className="w-full mt-4"
+                                >
+                                    <RefreshCw className={`mr-2 h-4 w-4 ${isPreviewLoading ? 'animate-spin' : ''}`} />
+                                    미리보기 새로고침
+                                </Button>
+                            </>
+                        ) : (
+                            <div className="text-center py-8 text-muted-foreground">
+                                <p>변수가 없습니다.</p>
+                                <p className="text-sm">변수 관리 탭에서 변수를 추가하세요.</p>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+
+                {/* 미리보기 결과 */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle>미리보기</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        {/* 제목 미리보기 */}
+                        {previewSubject && (
+                            <div className="p-3 bg-blue-50 rounded-lg">
+                                <Label className="text-sm font-medium text-blue-900">제목:</Label>
+                                <p className="font-semibold text-blue-900 break-words">{previewSubject}</p>
+                            </div>
+                        )}
+
+                        {/* 내용 미리보기 */}
+                        {previewHtml ? (
+                            <div className="border rounded-lg bg-white">
+                                <iframe
+                                    srcDoc={previewHtml}
+                                    sandbox="allow-same-origin"
+                                    className="w-full h-96 border-0 rounded-lg"
+                                    title="Template Preview"
+                                />
+                            </div>
+                        ) : (
+                            <div className="flex items-center justify-center h-96 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+                                <div className="text-center">
+                                    <Mail className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                                    <p className="text-gray-500 mb-2">템플릿을 편집하면 미리보기가 표시됩니다</p>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => handlePreview(false)}
+                                        className="mt-2"
+                                    >
+                                        미리보기 생성
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/lib/email-template/editor/template-editor.tsx b/lib/email-template/editor/template-editor.tsx
new file mode 100644
index 00000000..68cade45
--- /dev/null
+++ b/lib/email-template/editor/template-editor.tsx
@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { ArrowLeft, Save, Edit, Settings, List } from "lucide-react"
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+import { 
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Separator } from "@/components/ui/separator"
+import { Badge } from "@/components/ui/badge"
+
+import { type TemplateWithVariables } from "@/db/schema"
+import { TemplateContentEditor } from "./template-content-editor"
+import { TemplateVariableManager } from "./template-variable-manager"
+import { TemplateSettings } from "./template-settings"
+
+interface TemplateEditorProps {
+  templateSlug: string
+  initialTemplate: TemplateWithVariables
+}
+
+export function TemplateEditor({ templateSlug, initialTemplate }: TemplateEditorProps) {
+  const router = useRouter()
+  const [template, setTemplate] = React.useState(initialTemplate)
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+      {/* 헤더 */}
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="icon" asChild>
+          <Link href="/evcp/email-template">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <div className="flex-1">
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-semibold">{template.name}</h1>
+            <Badge variant="outline" className="text-xs">
+              v{template.version}
+            </Badge>
+            {template.category && (
+              <Badge variant="secondary" className="text-xs">
+                {template.category}
+              </Badge>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {template.description || "템플릿 편집"}
+          </p>
+        </div>
+        
+        {/* 헤더 액션 버튼들 */}
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" asChild>
+            <Link href={`/evcp/templates/${template.slug}/send`}>
+              테스트 발송
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 메인 편집 영역 - 3개 탭으로 간소화 */}
+      <Tabs defaultValue="editor" className="flex-1">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="editor" className="gap-2">
+            <Edit className="h-4 w-4" />
+            편집 & 미리보기
+          </TabsTrigger>
+          <TabsTrigger value="variables" className="gap-2">
+            <List className="h-4 w-4" />
+            변수 관리
+          </TabsTrigger>
+          <TabsTrigger value="settings" className="gap-2">
+            <Settings className="h-4 w-4" />
+            설정
+          </TabsTrigger>
+        </TabsList>
+
+        {/* 편집 & 미리보기 탭 (통합) */}
+        <TabsContent value="editor" className="mt-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>템플릿 편집 & 미리보기</CardTitle>
+              <CardDescription>
+                왼쪽에서 이메일 제목과 내용을 편집하고, 오른쪽에서 실시간 미리보기를 확인하세요.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TemplateContentEditor 
+                template={template}
+                onUpdate={setTemplate}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 변수 관리 탭 */}
+        <TabsContent value="variables" className="mt-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>변수 관리</CardTitle>
+              <CardDescription>
+                템플릿에서 사용할 변수를 추가하고 관리하세요. 추가되는 변수는 실제 코드에서 정의가 되어있지 않으면 템플릿에 있더라도 나타나지 않습니다.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TemplateVariableManager 
+                template={template}
+                onUpdate={setTemplate}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 설정 탭 */}
+        <TabsContent value="settings" className="mt-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>템플릿 설정</CardTitle>
+              <CardDescription>
+                템플릿의 기본 정보와 설정을 관리하세요.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TemplateSettings 
+                template={template}
+                onUpdate={setTemplate}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 추가 정보 */}
+      <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-muted-foreground">
+        <div className="bg-blue-50 p-4 rounded-lg">
+          <h4 className="font-medium text-blue-900 mb-2">💡 편집 팁</h4>
+          <ul className="space-y-1 text-blue-800">
+            <li>• 자동 미리보기를 켜두면 편집하면서 바로 확인 가능</li>
+            <li>• 변수 배지를 클릭하면 커서 위치에 바로 삽입</li>
+            <li>• Ctrl+S로 빠른 저장</li>
+          </ul>
+        </div>
+        
+        <div className="bg-green-50 p-4 rounded-lg">
+          <h4 className="font-medium text-green-900 mb-2">📊 템플릿 상태</h4>
+          <ul className="space-y-1 text-green-800">
+            <li>• 변수: {template.variables.length}개</li>
+            <li>• 필수 변수: {template.variables.filter(v => v.isRequired).length}개</li>
+            <li>• 최종 수정: {new Date(template.updatedAt).toLocaleDateString('ko-KR')}</li>
+          </ul>
+        </div>
+        
+        <div className="bg-purple-50 p-4 rounded-lg">
+          <h4 className="font-medium text-purple-900 mb-2">🚀 다음 단계</h4>
+          <ul className="space-y-1 text-purple-800">
+            <li>• 변수 관리에서 필요한 변수 추가</li>
+            <li>• 설정에서 카테고리 및 설명 수정</li>
+            <li>• 테스트 발송으로 실제 이메일 확인</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/email-template/editor/template-preview.tsx b/lib/email-template/editor/template-preview.tsx
new file mode 100644
index 00000000..df6b8461
--- /dev/null
+++ b/lib/email-template/editor/template-preview.tsx
@@ -0,0 +1,406 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { 
+  Eye, 
+  Smartphone, 
+  Monitor, 
+  Tablet, 
+  RefreshCw, 
+  Copy,
+  Download,
+  Send
+} from "lucide-react"
+import { toast } from "sonner"
+import { type TemplateWithVariables } from "@/db/schema"
+import { previewTemplateAction } from "../service"
+import { copyTextToClipboard } from "@/lib/utils"
+
+interface TemplatePreviewProps {
+  template: TemplateWithVariables
+}
+
+type ViewMode = 'desktop' | 'tablet' | 'mobile'
+
+export function TemplatePreview({ template }: TemplatePreviewProps) {
+  const [previewData, setPreviewData] = React.useState<Record<string, any>>(
+    template.sampleData || {}
+  )
+  const [previewHtml, setPreviewHtml] = React.useState<string>("")
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [viewMode, setViewMode] = React.useState<ViewMode>('desktop')
+  const [lastUpdated, setLastUpdated] = React.useState<Date | null>(null)
+
+  // 미리보기 생성
+  const generatePreview = async () => {
+    setIsLoading(true)
+    try {
+      const result = await previewTemplateAction(
+        template.slug,
+        previewData,
+        template.content
+      )
+
+      if (result.success) {
+        setPreviewHtml(result.data.html)
+        setLastUpdated(new Date())
+        toast.success('미리보기가 생성되었습니다.')
+      } else {
+        toast.error("샘플데이터를 먼저 생성해주세요." || '미리보기 생성에 실패했습니다.')
+      }
+    } catch (error) {
+      toast.error('미리보기 생성 중 오류가 발생했습니다.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 초기 미리보기 생성
+  React.useEffect(() => {
+    generatePreview()
+  }, [])
+
+  // 샘플 데이터 업데이트
+  const updatePreviewData = (key: string, value: any) => {
+    setPreviewData(prev => ({ ...prev, [key]: value }))
+  }
+
+  // 샘플 데이터 리셋
+  const resetToDefaults = () => {
+    const defaultData: Record<string, any> = {}
+    
+    template.variables.forEach(variable => {
+      if (variable.defaultValue) {
+        switch (variable.variableType) {
+          case 'number':
+            defaultData[variable.variableName] = parseFloat(variable.defaultValue) || 0
+            break
+          case 'boolean':
+            defaultData[variable.variableName] = variable.defaultValue.toLowerCase() === 'true'
+            break
+          default:
+            defaultData[variable.variableName] = variable.defaultValue
+        }
+      } else {
+        // 기본 샘플 값
+        switch (variable.variableType) {
+          case 'string':
+            defaultData[variable.variableName] = `샘플 ${variable.variableName}`
+            break
+          case 'number':
+            defaultData[variable.variableName] = 123
+            break
+          case 'boolean':
+            defaultData[variable.variableName] = true
+            break
+          case 'date':
+            defaultData[variable.variableName] = new Date().toLocaleDateString('ko-KR')
+            break
+        }
+      }
+    })
+
+    setPreviewData(defaultData)
+    toast.success('샘플 데이터가 초기화되었습니다.')
+  }
+
+  // HTML 복사
+  const copyHtml = async () => {
+    if (!previewHtml) {
+      toast.error("미리보기를 먼저 생성해주세요.")
+      return
+    }
+  
+    const ok = await copyTextToClipboard(previewHtml)
+    ok
+      ? toast.success("HTML이 클립보드에 복사되었습니다.")
+      : toast.error("복사에 실패했습니다.")
+  }
+  // HTML 다운로드
+  const downloadHtml = () => {
+    if (!previewHtml) {
+      toast.error('미리보기를 먼저 생성해주세요.')
+      return
+    }
+
+    const blob = new Blob([previewHtml], { type: 'text/html' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${template.slug}-preview.html`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+    
+    toast.success('HTML 파일이 다운로드되었습니다.')
+  }
+
+  // 뷰포트 크기
+  const getViewportStyle = (): React.CSSProperties => {
+    switch (viewMode) {
+      case 'mobile':
+        return { width: '375px', height: '667px' }
+      case 'tablet':
+        return { width: '768px', height: '1024px' }
+      case 'desktop':
+      default:
+        return { width: '100%', height: '600px' }
+    }
+  }
+
+  // 입력 컴포넌트 렌더링
+  const renderInputForVariable = (variable: any) => {
+    const value = previewData[variable.variableName] || ''
+
+    switch (variable.variableType) {
+      case 'boolean':
+        return (
+          <Select
+            value={String(value)}
+            onValueChange={(newValue) => updatePreviewData(variable.variableName, newValue === 'true')}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="true">True</SelectItem>
+              <SelectItem value="false">False</SelectItem>
+            </SelectContent>
+          </Select>
+        )
+
+      case 'number':
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => updatePreviewData(variable.variableName, parseFloat(e.target.value) || 0)}
+            placeholder="숫자를 입력하세요"
+          />
+        )
+
+      case 'date':
+        return (
+          <Input
+            type="date"
+            value={value}
+            onChange={(e) => updatePreviewData(variable.variableName, e.target.value)}
+          />
+        )
+
+      default:
+        // string 타입이거나 긴 텍스트인 경우
+        if (variable.variableName.toLowerCase().includes('message') || 
+            variable.variableName.toLowerCase().includes('content') ||
+            variable.variableName.toLowerCase().includes('description')) {
+          return (
+            <Textarea
+              value={value}
+              onChange={(e) => updatePreviewData(variable.variableName, e.target.value)}
+              placeholder="텍스트를 입력하세요"
+              className="min-h-[80px]"
+            />
+          )
+        }
+        
+        return (
+          <Input
+            value={value}
+            onChange={(e) => updatePreviewData(variable.variableName, e.target.value)}
+            placeholder="텍스트를 입력하세요"
+          />
+        )
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 상태 표시 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">
+            {template.variables.length}개 변수
+          </Badge>
+          {lastUpdated && (
+            <Badge variant="secondary" className="text-xs">
+              마지막 업데이트: {lastUpdated.toLocaleTimeString('ko-KR')}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={copyHtml}
+            disabled={!previewHtml}
+          >
+            <Copy className="mr-2 h-4 w-4" />
+            HTML 복사
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={downloadHtml}
+            disabled={!previewHtml}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            다운로드
+          </Button>
+
+        </div>
+      </div>
+
+      <Tabs defaultValue="preview" className="space-y-6">
+        <TabsList>
+          <TabsTrigger value="preview">미리보기</TabsTrigger>
+          <TabsTrigger value="data">샘플 데이터</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="preview" className="space-y-4">
+          {/* 뷰포트 모드 선택 */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Label>뷰포트:</Label>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant={viewMode === 'desktop' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setViewMode('desktop')}
+                >
+                  <Monitor className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant={viewMode === 'tablet' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setViewMode('tablet')}
+                >
+                  <Tablet className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant={viewMode === 'mobile' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setViewMode('mobile')}
+                >
+                  <Smartphone className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <Button
+              onClick={generatePreview}
+              disabled={isLoading}
+              size="sm"
+            >
+              <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+              {isLoading ? '생성 중...' : '새로고침'}
+            </Button>
+          </div>
+
+          {/* 미리보기 영역 */}
+          <div className="border rounded-lg bg-gray-100 p-4 flex justify-center">
+            {previewHtml ? (
+              <div 
+                className="bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300"
+                style={getViewportStyle()}
+              >
+                <iframe
+                  srcDoc={previewHtml}
+                  sandbox="allow-same-origin"
+                  className="w-full h-full border-0"
+                  title="Template Preview"
+                />
+              </div>
+            ) : (
+              <div className="flex items-center justify-center h-[400px] text-muted-foreground">
+                <div className="text-center">
+                  <Eye className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>미리보기를 생성하려면 새로고침 버튼을 클릭하세요.</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="data" className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold">샘플 데이터 편집</h3>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={resetToDefaults}
+            >
+              기본값으로 리셋
+            </Button>
+          </div>
+
+          {template.variables.length === 0 ? (
+            <div className="text-center py-12 border border-dashed rounded-lg">
+              <p className="text-muted-foreground">등록된 변수가 없습니다.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {template.variables.map((variable) => (
+                <div key={variable.id} className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Label htmlFor={variable.variableName}>
+                      {variable.variableName}
+                    </Label>
+                    <Badge variant="outline" className="text-xs">
+                      {variable.variableType}
+                    </Badge>
+                    {variable.isRequired && (
+                      <Badge variant="destructive" className="text-xs">
+                        필수
+                      </Badge>
+                    )}
+                  </div>
+                  
+                  {renderInputForVariable(variable)}
+                  
+                  {variable.description && (
+                    <p className="text-xs text-muted-foreground">
+                      {variable.description}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="flex justify-end">
+            <Button onClick={generatePreview} disabled={isLoading}>
+              <Eye className="mr-2 h-4 w-4" />
+              미리보기 업데이트
+            </Button>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* 도움말 */}
+      <div className="bg-green-50 p-4 rounded-lg">
+        <h4 className="font-medium text-green-900 mb-2">미리보기 가이드</h4>
+        <div className="text-sm text-green-800 space-y-1">
+          <p>• 샘플 데이터를 수정하여 다양한 시나리오를 테스트해보세요</p>
+          <p>• 다양한 뷰포트에서 이메일이 어떻게 보이는지 확인하세요</p>
+          <p>• HTML을 복사하여 다른 이메일 클라이언트에서 테스트할 수 있습니다</p>
+          <p>• 변수가 올바르게 치환되는지 확인하세요</p>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/email-template/editor/template-settings.tsx b/lib/email-template/editor/template-settings.tsx
new file mode 100644
index 00000000..f253f87d
--- /dev/null
+++ b/lib/email-template/editor/template-settings.tsx
@@ -0,0 +1,474 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { 
+  Save, 
+  Trash2, 
+  AlertTriangle, 
+  Info, 
+  Calendar,
+  User,
+  Hash,
+  Copy
+} from "lucide-react"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+import { type TemplateWithVariables } from "@/db/schema"
+import { deleteTemplate, duplicateTemplate, updateTemplateAction } from "../service"
+import { TEMPLATE_CATEGORY_OPTIONS, getCategoryDisplayName } from "../validations"
+
+
+interface TemplateSettingsProps {
+  template: TemplateWithVariables
+  onUpdate: (template: TemplateWithVariables) => void
+}
+
+export function TemplateSettings({ template, onUpdate }: TemplateSettingsProps) {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [formData, setFormData] = React.useState({
+    name: template.name,
+    description: template.description || '',
+    category: template.category || '',
+    sampleData: JSON.stringify(template.sampleData || {}, null, 2)
+  })
+
+  // 폼 데이터 업데이트
+  const updateFormData = (field: keyof typeof formData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+  }
+
+  // 기본 정보 저장
+  const handleSaveBasicInfo = async () => {
+    setIsLoading(true)
+    try {
+      // 샘플 데이터 JSON 파싱 검증
+      let parsedSampleData = {}
+      if (formData.sampleData.trim()) {
+        try {
+          parsedSampleData = JSON.parse(formData.sampleData)
+        } catch (error) {
+          toast.error('샘플 데이터 JSON 형식이 올바르지 않습니다.')
+          setIsLoading(false)
+          return
+        }
+      }
+
+      const result = await updateTemplateAction(template.slug, {
+        name: formData.name,
+        description: formData.description || undefined,
+        sampleData: parsedSampleData,
+        updatedBy: 'current-user-id' // TODO: 실제 사용자 ID
+      })
+
+      if (result.success) {
+        toast.success('템플릿 설정이 저장되었습니다.')
+        onUpdate({
+          ...template,
+          name: formData.name,
+          description: formData.description,
+          sampleData: parsedSampleData,
+          version: template.version + 1
+        })
+      } else {
+        toast.error(result.error || '저장에 실패했습니다.')
+      }
+    } catch (error) {
+      toast.error('저장 중 오류가 발생했습니다.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 템플릿 복제
+  const handleDuplicate = async () => {
+    setIsLoading(true)
+    try {
+      const copyName = `${template.name} (복사본)`
+      const copySlug = `${template.slug}-copy-${Date.now()}`
+      
+      const result = await duplicateTemplate(
+        template.id,
+        copyName,
+        copySlug,
+        'current-user-id' // TODO: 실제 사용자 ID
+      )
+
+      if (result.success && result.data) {
+        toast.success('템플릿이 복제되었습니다.')
+        router.push(`/evcp/templates/${result.data.slug}`)
+      } else {
+        toast.error(result.error || '복제에 실패했습니다.')
+      }
+    } catch (error) {
+      toast.error('복제 중 오류가 발생했습니다.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 템플릿 삭제
+  const handleDelete = async () => {
+    setIsLoading(true)
+    try {
+      const result = await deleteTemplate(template.id)
+
+      if (result.success) {
+        toast.success('템플릿이 삭제되었습니다.')
+        router.push('/evcp/templates')
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.')
+      }
+    } catch (error) {
+      toast.error('삭제 중 오류가 발생했습니다.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 샘플 데이터 포맷팅
+  const formatSampleData = () => {
+    try {
+      const parsed = JSON.parse(formData.sampleData)
+      const formatted = JSON.stringify(parsed, null, 2)
+      updateFormData('sampleData', formatted)
+      toast.success('JSON이 포맷팅되었습니다.')
+    } catch (error) {
+      toast.error('유효한 JSON이 아닙니다.')
+    }
+  }
+
+  // 기본 샘플 데이터 생성
+  const generateDefaultSampleData = () => {
+    const defaultData: Record<string, any> = {}
+    
+    template.variables.forEach(variable => {
+      switch (variable.variableType) {
+        case 'string':
+          defaultData[variable.variableName] = variable.defaultValue || `샘플 ${variable.variableName}`
+          break
+        case 'number':
+          defaultData[variable.variableName] = variable.defaultValue ? parseFloat(variable.defaultValue) : 123
+          break
+        case 'boolean':
+          defaultData[variable.variableName] = variable.defaultValue ? variable.defaultValue === 'true' : true
+          break
+        case 'date':
+          defaultData[variable.variableName] = variable.defaultValue || new Date().toLocaleDateString('ko-KR')
+          break
+      }
+    })
+
+    const formatted = JSON.stringify(defaultData, null, 2)
+    updateFormData('sampleData', formatted)
+    toast.success('기본 샘플 데이터가 생성되었습니다.')
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 기본 정보 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>기본 정보</CardTitle>
+          <CardDescription>
+            템플릿의 기본 정보를 수정할 수 있습니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <Label htmlFor="name">템플릿 이름</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => updateFormData('name', e.target.value)}
+              placeholder="템플릿 이름을 입력하세요"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="description">설명</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => updateFormData('description', e.target.value)}
+              placeholder="템플릿에 대한 설명을 입력하세요"
+              className="min-h-[100px]"
+            />
+          </div>
+
+          <div>
+  <Label htmlFor="category">카테고리</Label>
+  <Select
+    value={formData.category || "none"} // 빈 문자열일 때 "none"으로 표시
+    onValueChange={(value) => {
+      // "none"이 선택되면 빈 문자열로 변환
+      updateFormData('category', value === "none" ? "" : value)
+    }}
+  >
+    <SelectTrigger>
+      <SelectValue placeholder="카테고리를 선택하세요" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="none">카테고리 없음</SelectItem> {/* ✅ "none" 사용 */}
+      {TEMPLATE_CATEGORY_OPTIONS.map((option) => (
+        <SelectItem key={option.value} value={option.value}>
+          {option.label}
+        </SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+</div>
+
+          <div className="flex justify-end">
+            <Button onClick={handleSaveBasicInfo} disabled={isLoading}>
+              <Save className="mr-2 h-4 w-4" />
+              {isLoading ? '저장 중...' : '기본 정보 저장'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 샘플 데이터 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>샘플 데이터</CardTitle>
+          <CardDescription>
+            미리보기에서 사용될 기본 샘플 데이터를 설정합니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={formatSampleData}
+            >
+              JSON 포맷팅
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={generateDefaultSampleData}
+            >
+              기본 데이터 생성
+            </Button>
+          </div>
+
+          <div>
+            <Label htmlFor="sampleData">샘플 데이터 (JSON)</Label>
+            <Textarea
+              id="sampleData"
+              value={formData.sampleData}
+              onChange={(e) => updateFormData('sampleData', e.target.value)}
+              placeholder='{"userName": "홍길동", "email": "user@example.com"}'
+              className="min-h-[200px] font-mono text-sm"
+            />
+          </div>
+
+          <div className="bg-blue-50 p-3 rounded-lg">
+            <p className="text-sm text-blue-800">
+              <Info className="inline h-4 w-4 mr-1" />
+              샘플 데이터는 템플릿 미리보기에서 기본값으로 사용됩니다.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 메타 정보 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>메타 정보</CardTitle>
+          <CardDescription>
+            템플릿의 상세 정보를 확인할 수 있습니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <Hash className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">Slug:</span>
+                <code className="text-sm bg-muted px-2 py-1 rounded">
+                  {template.slug}
+                </code>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">버전 {template.version}</Badge>
+                <Badge variant={template.category ? "default" : "secondary"}>
+                  {getCategoryDisplayName(template.category)}
+                </Badge>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Calendar className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">
+                  생성일: {new Date(template.createdAt).toLocaleString('ko-KR')}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Calendar className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">
+                  수정일: {new Date(template.updatedAt).toLocaleString('ko-KR')}
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <User className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm">
+                  생성자: {template.createdBy}
+                </span>
+              </div>
+
+              <div>
+                <span className="text-sm font-medium">변수 개수:</span>
+                <span className="ml-2 text-sm">{template.variables.length}개</span>
+              </div>
+
+              <div>
+                <span className="text-sm font-medium">필수 변수:</span>
+                <span className="ml-2 text-sm">
+                  {template.variables.filter(v => v.isRequired).length}개
+                </span>
+              </div>
+
+              <div>
+                <span className="text-sm font-medium">콘텐츠 길이:</span>
+                <span className="ml-2 text-sm">{template.content.length} 문자</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      {/* 위험한 작업 */}
+      <Card className="border-destructive">
+        <CardHeader>
+          <CardTitle className="text-destructive">위험한 작업</CardTitle>
+          <CardDescription>
+            다음 작업들은 신중히 수행해주세요. 일부는 되돌릴 수 없습니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between p-4 border rounded-lg">
+            <div>
+              <h4 className="font-medium">템플릿 복제</h4>
+              <p className="text-sm text-muted-foreground">
+                현재 템플릿을 복사하여 새로운 템플릿을 생성합니다.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleDuplicate}
+              disabled={isLoading}
+            >
+              <Copy className="mr-2 h-4 w-4" />
+              복제
+            </Button>
+          </div>
+
+          <div className="flex items-center justify-between p-4 border border-destructive rounded-lg bg-destructive/5">
+            <div>
+              <h4 className="font-medium text-destructive">템플릿 삭제</h4>
+              <p className="text-sm text-muted-foreground">
+                이 템플릿을 완전히 삭제합니다. 이 작업은 되돌릴 수 없습니다.
+              </p>
+            </div>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive" disabled={isLoading}>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  삭제
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>템플릿 삭제 확인</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    정말로 <strong>"{template.name}"</strong> 템플릿을 삭제하시겠습니까?
+                    <br />
+                    <br />
+                    이 작업은 되돌릴 수 없으며, 다음 항목들이 함께 삭제됩니다:
+                    <br />
+                    • 템플릿 내용 및 설정
+                    <br />
+                    • 모든 변수 ({template.variables.length}개)
+                    <br />
+                    • 변경 이력
+                    <br />
+                    <br />
+                    <span className="text-destructive font-medium">
+                      삭제하려면 "영구 삭제"를 클릭하세요.
+                    </span>
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>취소</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={handleDelete}
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    영구 삭제
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 주의사항 */}
+      <div className="bg-amber-50 border border-amber-200 p-4 rounded-lg">
+        <div className="flex items-start gap-3">
+          <AlertTriangle className="h-5 w-5 text-amber-600 mt-0.5" />
+          <div>
+            <h3 className="font-semibold text-amber-800">주의사항</h3>
+            <div className="mt-2 text-sm text-amber-700 space-y-1">
+              <p>• 템플릿 설정 변경 시 기존 미리보기가 무효화될 수 있습니다.</p>
+              <p>• 샘플 데이터는 유효한 JSON 형식이어야 합니다.</p>
+              <p>• 템플릿 삭제는 되돌릴 수 없으니 신중히 결정하세요.</p>
+              <p>• 카테고리 변경 시 관련 기본 변수가 영향받을 수 있습니다.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lib/email-template/editor/template-variable-manager.tsx b/lib/email-template/editor/template-variable-manager.tsx
new file mode 100644
index 00000000..9b86dd5e
--- /dev/null
+++ b/lib/email-template/editor/template-variable-manager.tsx
@@ -0,0 +1,562 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Badge } from "@/components/ui/badge"
+import { Plus, Edit, Trash2, GripVertical, Copy } from "lucide-react"
+import { toast } from "sonner"
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
+import { type TemplateWithVariables, type TemplateVariable } from "@/db/schema"
+import { addTemplateVariableAction } from "../service"
+
+interface TemplateVariableManagerProps {
+    template: TemplateWithVariables
+    onUpdate: (template: TemplateWithVariables) => void
+}
+
+interface VariableFormData {
+    variableName: string
+    variableType: 'string' | 'number' | 'boolean' | 'date'
+    defaultValue: string
+    isRequired: boolean
+    description: string
+}
+
+export function TemplateVariableManager({ template, onUpdate }: TemplateVariableManagerProps) {
+    const [variables, setVariables] = React.useState(template.variables)
+    //   const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false)
+    const [editingVariable, setEditingVariable] = React.useState<TemplateVariable | null>(null)
+    const [isSubmitting, setIsSubmitting] = React.useState(false)
+    const [isDialogOpen, setIsDialogOpen] = React.useState(false) // 이름 변경
+
+    const [formData, setFormData] = React.useState<VariableFormData>({
+        variableName: '',
+        variableType: 'string',
+        defaultValue: '',
+        isRequired: false,
+        description: ''
+    })
+
+    const isEditMode = editingVariable !== null
+
+    // 폼 초기화
+    const resetForm = () => {
+        setFormData({
+            variableName: '',
+            variableType: 'string',
+            defaultValue: '',
+            isRequired: false,
+            description: ''
+        })
+        setEditingVariable(null)
+    }
+
+    const handleEditVariable = (variable: TemplateVariable) => {
+        setEditingVariable(variable)
+        setFormData({
+            variableName: variable.variableName,
+            variableType: variable.variableType as any,
+            defaultValue: variable.defaultValue || '',
+            isRequired: variable.isRequired || false,
+            description: variable.description || ''
+        })
+        setIsDialogOpen(true)
+    }
+
+
+    const handleSubmitVariable = async () => {
+        if (!formData.variableName.trim()) {
+            toast.error('변수명을 입력해주세요.')
+            return
+        }
+
+        // 편집 모드가 아닐 때만 중복 검사
+        if (!isEditMode && variables.some(v => v.variableName === formData.variableName)) {
+            toast.error('이미 존재하는 변수명입니다.')
+            return
+        }
+
+        // 편집 모드일 때 다른 변수와 중복되는지 검사
+        if (isEditMode && variables.some(v => v.id !== editingVariable!.id && v.variableName === formData.variableName)) {
+            toast.error('이미 존재하는 변수명입니다.')
+            return
+        }
+
+        // 변수명 유효성 검사
+        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(formData.variableName)) {
+            toast.error('변수명은 영문자, 숫자, 언더스코어만 사용 가능하며 숫자로 시작할 수 없습니다.')
+            return
+        }
+
+        setIsSubmitting(true)
+        try {
+            if (isEditMode) {
+                // 편집 모드 - TODO: updateTemplateVariableAction 구현 필요
+                // const result = await updateTemplateVariableAction(template.slug, editingVariable!.id, formData)
+
+                // 임시로 클라이언트 사이드에서 업데이트
+                const updatedVariables = variables.map(v =>
+                    v.id === editingVariable!.id
+                        ? { ...v, ...formData }
+                        : v
+                )
+                setVariables(updatedVariables)
+                onUpdate({ ...template, variables: updatedVariables })
+                toast.success('변수가 수정되었습니다.')
+            } else {
+                // 추가 모드
+                const result = await addTemplateVariableAction(template.slug, {
+                    variableName: formData.variableName,
+                    variableType: formData.variableType,
+                    defaultValue: formData.defaultValue || undefined,
+                    isRequired: formData.isRequired,
+                    description: formData.description || undefined,
+                })
+
+                if (result.success) {
+                    const newVariable = result.data
+                    const updatedVariables = [...variables, newVariable]
+                    setVariables(updatedVariables)
+                    onUpdate({ ...template, variables: updatedVariables })
+                    toast.success('변수가 추가되었습니다.')
+                } else {
+                    toast.error(result.error || '변수 추가에 실패했습니다.')
+                    return
+                }
+            }
+
+            setIsDialogOpen(false)
+            resetForm()
+        } catch (error) {
+            toast.error(`변수 ${isEditMode ? '수정' : '추가'} 중 오류가 발생했습니다.`)
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    // Dialog 닫기 처리
+    const handleDialogClose = (open: boolean) => {
+        setIsDialogOpen(open)
+        if (!open) {
+            resetForm()
+        }
+    }
+
+    // 변수 추가
+    // const handleAddVariable = async () => {
+    //     if (!formData.variableName.trim()) {
+    //         toast.error('변수명을 입력해주세요.')
+    //         return
+    //     }
+
+    //     // 변수명 중복 검사
+    //     if (variables.some(v => v.variableName === formData.variableName)) {
+    //         toast.error('이미 존재하는 변수명입니다.')
+    //         return
+    //     }
+
+    //     // 변수명 유효성 검사
+    //     if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(formData.variableName)) {
+    //         toast.error('변수명은 영문자, 숫자, 언더스코어만 사용 가능하며 숫자로 시작할 수 없습니다.')
+    //         return
+    //     }
+
+    //     setIsSubmitting(true)
+    //     try {
+    //         const result = await addTemplateVariableAction(template.slug, {
+    //             variableName: formData.variableName,
+    //             variableType: formData.variableType,
+    //             defaultValue: formData.defaultValue || undefined,
+    //             isRequired: formData.isRequired,
+    //             description: formData.description || undefined,
+    //         })
+
+    //         if (result.success) {
+    //             const newVariable = result.data
+    //             const updatedVariables = [...variables, newVariable]
+    //             setVariables(updatedVariables)
+    //             onUpdate({ ...template, variables: updatedVariables })
+
+    //             toast.success('변수가 추가되었습니다.')
+    //             setIsAddDialogOpen(false)
+    //             resetForm()
+    //         } else {
+    //             toast.error(result.error || '변수 추가에 실패했습니다.')
+    //         }
+    //     } catch (error) {
+    //         toast.error('변수 추가 중 오류가 발생했습니다.')
+    //     } finally {
+    //         setIsSubmitting(false)
+    //     }
+    // }
+
+    // 변수 순서 변경
+    const handleDragEnd = (result: any) => {
+        if (!result.destination) return
+
+        const items = Array.from(variables)
+        const [reorderedItem] = items.splice(result.source.index, 1)
+        items.splice(result.destination.index, 0, reorderedItem)
+
+        // displayOrder 업데이트
+        const updatedItems = items.map((item, index) => ({
+            ...item,
+            displayOrder: index
+        }))
+
+        setVariables(updatedItems)
+        onUpdate({ ...template, variables: updatedItems })
+
+        // TODO: 서버에 순서 변경 요청
+        toast.success('변수 순서가 변경되었습니다.')
+    }
+
+    // 변수 복사
+    const handleCopyVariable = (variable: TemplateVariable) => {
+        const copyName = `${variable.variableName}_copy`
+        setFormData({
+            variableName: copyName,
+            variableType: variable.variableType as any,
+            defaultValue: variable.defaultValue || '',
+            isRequired: variable.isRequired || false,
+            description: variable.description || ''
+        })
+        setIsDialogOpen(true)
+    }
+
+    // 변수 삭제
+    const handleDeleteVariable = async (variableId: string) => {
+        // TODO: 서버에서 변수 삭제 구현
+        const updatedVariables = variables.filter(v => v.id !== variableId)
+        setVariables(updatedVariables)
+        onUpdate({ ...template, variables: updatedVariables })
+        toast.success('변수가 삭제되었습니다.')
+    }
+
+    // 변수 타입에 따른 기본값 예시
+    const getDefaultValuePlaceholder = (type: string) => {
+        switch (type) {
+            case 'string': return '예: 홍길동'
+            case 'number': return '예: 123'
+            case 'boolean': return 'true 또는 false'
+            case 'date': return '예: 2025-01-01'
+            default: return ''
+        }
+    }
+
+    // 변수 타입별 아이콘
+    const getVariableTypeIcon = (type: string) => {
+        switch (type) {
+            case 'string': return '📝'
+            case 'number': return '🔢'
+            case 'boolean': return '✅'
+            case 'date': return '📅'
+            default: return '❓'
+        }
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* 헤더 */}
+            <div className="flex items-center justify-between">
+                <div>
+                    {/* <h3 className="text-lg font-semibold">변수 관리</h3> */}
+                    <p className="text-sm text-muted-foreground">
+                        총 {variables.length}개의 변수가 등록되어 있습니다.
+                    </p>
+                </div>
+
+                <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
+                    <DialogTrigger asChild>
+                        <Button onClick={() => { resetForm(); setIsDialogOpen(true) }}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            변수 추가
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-md">
+                        <DialogHeader>
+                            <DialogTitle>
+                                {isEditMode ? '변수 수정' : '새 변수 추가'}
+                            </DialogTitle>
+                            <DialogDescription>
+                                {isEditMode
+                                    ? '기존 변수의 정보를 수정합니다.'
+                                    : '템플릿에서 사용할 새로운 변수를 추가합니다.'
+                                }
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div className="space-y-4">
+                            <div>
+                                <Label htmlFor="variableName">변수명</Label>
+                                <Input
+                                    id="variableName"
+                                    value={formData.variableName}
+                                    onChange={(e) => setFormData(prev => ({ ...prev, variableName: e.target.value }))}
+                                    placeholder="예: userName, orderDate"
+                                />
+                            </div>
+
+                            <div>
+                                <Label htmlFor="variableType">타입</Label>
+                                <Select
+                                    value={formData.variableType}
+                                    onValueChange={(value) => setFormData(prev => ({ ...prev, variableType: value as any }))}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="string">📝 문자열</SelectItem>
+                                        <SelectItem value="number">🔢 숫자</SelectItem>
+                                        <SelectItem value="boolean">✅ 불린</SelectItem>
+                                        <SelectItem value="date">📅 날짜</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div>
+                                <Label htmlFor="defaultValue">기본값</Label>
+                                <Input
+                                    id="defaultValue"
+                                    value={formData.defaultValue}
+                                    onChange={(e) => setFormData(prev => ({ ...prev, defaultValue: e.target.value }))}
+                                    placeholder={getDefaultValuePlaceholder(formData.variableType)}
+                                />
+                            </div>
+
+                            <div>
+                                <Label htmlFor="description">설명</Label>
+                                <Textarea
+                                    id="description"
+                                    value={formData.description}
+                                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                                    placeholder="변수에 대한 설명을 입력하세요"
+                                    className="min-h-[80px]"
+                                />
+                            </div>
+
+                            <div className="flex items-center space-x-2">
+                                <Checkbox
+                                    id="isRequired"
+                                    checked={formData.isRequired}
+                                    onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isRequired: !!checked }))}
+                                />
+                                <Label htmlFor="isRequired">필수 변수</Label>
+                            </div>
+                        </div>
+
+                        <DialogFooter>
+                            <Button
+                                variant="outline"
+                                onClick={() => handleDialogClose(false)}
+                            >
+                                취소
+                            </Button>
+                            <Button
+                                onClick={handleSubmitVariable}
+                                disabled={isSubmitting}
+                            >
+                                {isSubmitting
+                                    ? `${isEditMode ? '수정' : '추가'} 중...`
+                                    : isEditMode ? '수정' : '추가'
+                                }
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            {/* 변수 목록 */}
+            {variables.length === 0 ? (
+                <div className="text-center py-12 border border-dashed rounded-lg">
+                    <div className="text-muted-foreground">
+                        <Plus className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                        <p className="text-lg font-medium">등록된 변수가 없습니다</p>
+                        <p className="text-sm">첫 번째 변수를 추가해보세요.</p>
+                    </div>
+                </div>
+            ) : (
+                <DragDropContext onDragEnd={handleDragEnd}>
+                    <Droppable droppableId="variables">
+                        {(provided) => (
+                            <div
+                                {...provided.droppableProps}
+                                ref={provided.innerRef}
+                                className="border rounded-lg"
+                            >
+                                <Table>
+                                    <TableHeader>
+                                        <TableRow>
+                                            <TableHead className="w-10"></TableHead>
+                                            <TableHead>변수명</TableHead>
+                                            <TableHead>타입</TableHead>
+                                            <TableHead>기본값</TableHead>
+                                            <TableHead>필수</TableHead>
+                                            <TableHead>설명</TableHead>
+                                            <TableHead className="w-24">작업</TableHead>
+                                        </TableRow>
+                                    </TableHeader>
+                                    <TableBody>
+                                        {variables.map((variable, index) => (
+                                            <Draggable
+                                                key={variable.id}
+                                                draggableId={variable.id}
+                                                index={index}
+                                            >
+                                                {(provided, snapshot) => (
+                                                    <TableRow
+                                                        ref={provided.innerRef}
+                                                        {...provided.draggableProps}
+                                                        className={snapshot.isDragging ? 'bg-muted' : ''}
+                                                    >
+                                                        <TableCell>
+                                                            <div
+                                                                {...provided.dragHandleProps}
+                                                                className="cursor-grab hover:cursor-grabbing"
+                                                            >
+                                                                <GripVertical className="h-4 w-4 text-muted-foreground" />
+                                                            </div>
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <div className="font-mono text-sm">
+                                                                {variable.variableName}
+                                                            </div>
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <Badge variant="outline" className="gap-1">
+                                                                {getVariableTypeIcon(variable.variableType)}
+                                                                {variable.variableType}
+                                                            </Badge>
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <div className="text-sm text-muted-foreground max-w-[100px] truncate">
+                                                                {variable.defaultValue || '-'}
+                                                            </div>
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            {variable.isRequired ? (
+                                                                <Badge variant="destructive" className="text-xs">필수</Badge>
+                                                            ) : (
+                                                                <Badge variant="secondary" className="text-xs">선택</Badge>
+                                                            )}
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <div className="text-sm text-muted-foreground max-w-[200px] truncate">
+                                                                {variable.description || '-'}
+                                                            </div>
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <div className="flex items-center gap-1">
+                                                                <Button
+                                                                    variant="ghost"
+                                                                    size="icon"
+                                                                    className="h-8 w-8"
+                                                                    onClick={() => handleCopyVariable(variable)}
+                                                                >
+                                                                    <Copy className="h-3 w-3" />
+                                                                </Button>
+                                                                <Button
+                                                                    variant="ghost"
+                                                                    size="icon"
+                                                                    className="h-8 w-8"
+                                                                    onClick={() => handleEditVariable(variable)}
+                                                                >
+                                                                    <Edit className="h-3 w-3" />
+                                                                </Button>
+                                                                <AlertDialog>
+                                                                    <AlertDialogTrigger asChild>
+                                                                        <Button
+                                                                            variant="ghost"
+                                                                            size="icon"
+                                                                            className="h-8 w-8 text-destructive hover:text-destructive"
+                                                                        >
+                                                                            <Trash2 className="h-3 w-3" />
+                                                                        </Button>
+                                                                    </AlertDialogTrigger>
+                                                                    <AlertDialogContent>
+                                                                        <AlertDialogHeader>
+                                                                            <AlertDialogTitle>변수 삭제</AlertDialogTitle>
+                                                                            <AlertDialogDescription>
+                                                                                정말로 '{variable.variableName}' 변수를 삭제하시겠습니까?
+                                                                                이 작업은 되돌릴 수 없습니다.
+                                                                            </AlertDialogDescription>
+                                                                        </AlertDialogHeader>
+                                                                        <AlertDialogFooter>
+                                                                            <AlertDialogCancel>취소</AlertDialogCancel>
+                                                                            <AlertDialogAction
+                                                                                onClick={() => handleDeleteVariable(variable.id)}
+                                                                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                                                                            >
+                                                                                삭제
+                                                                            </AlertDialogAction>
+                                                                        </AlertDialogFooter>
+                                                                    </AlertDialogContent>
+                                                                </AlertDialog>
+                                                            </div>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )}
+                                            </Draggable>
+                                        ))}
+                                        {provided.placeholder}
+                                    </TableBody>
+                                </Table>
+                            </div>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            )}
+
+            {/* 도움말 */}
+            <div className="bg-blue-50 p-4 rounded-lg">
+                <h4 className="font-medium text-blue-900 mb-2">변수 사용법</h4>
+                <div className="text-sm text-blue-800 space-y-1">
+                    <p>• 템플릿에서 <code className="bg-blue-100 px-1 rounded">{`{{variableName}}`}</code> 형태로 사용</p>
+                    <p>• 드래그 앤 드롭으로 변수 순서 변경 가능</p>
+                    <p>• 필수 변수는 반드시 값이 제공되어야 함</p>
+                    <p>• 변수명은 영문자, 숫자, 언더스코어만 사용 가능</p>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file