From 1a2241c40e10193c5ff7008a7b7b36cc1d855d96 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 25 Mar 2025 15:55:45 +0900
Subject: initial commit

---
 components/faq/FaqCard.tsx    |  36 ++++++++
 components/faq/FaqManager.tsx | 192 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 228 insertions(+)
 create mode 100644 components/faq/FaqCard.tsx
 create mode 100644 components/faq/FaqManager.tsx

(limited to 'components/faq')

diff --git a/components/faq/FaqCard.tsx b/components/faq/FaqCard.tsx
new file mode 100644
index 00000000..ef622e67
--- /dev/null
+++ b/components/faq/FaqCard.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export interface FaqItem {
+    title: string;
+    content: string[];
+}
+
+export interface FaqCategory {
+    label: string;  // 카테고리 이름 (식별자로도 사용)
+    items: {
+        title: string;
+        content: string[];
+    }[];
+} 
+
+interface FaqCardProps {
+    item: FaqItem;
+}
+
+export function FaqCard({ item }: FaqCardProps) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{item.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                {item.content.map((line, index) => (
+                    <div key={index}>
+                        {line}
+                        {index < item.content.length - 1 && <br />}
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    )
+} 
\ No newline at end of file
diff --git a/components/faq/FaqManager.tsx b/components/faq/FaqManager.tsx
new file mode 100644
index 00000000..27755270
--- /dev/null
+++ b/components/faq/FaqManager.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import { useState } from 'react';
+import { FaqCategory } from './FaqCard';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Plus, Trash, Save, Settings } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useRouter } from 'next/navigation';
+
+interface FaqManagerProps {
+    initialData: FaqCategory[];
+    onSave: (data: FaqCategory[]) => Promise<void>;
+    lng: string;
+}
+
+export function FaqManager({ initialData, onSave, lng }: FaqManagerProps) {
+    const [categories, setCategories] = useState<FaqCategory[]>(initialData);
+    const [activeTab, setActiveTab] = useState<string>(categories[0]?.label || '');
+    const [isSettingsView, setIsSettingsView] = useState(false);
+    const [showSaveDialog, setShowSaveDialog] = useState(false);
+    const router = useRouter();
+
+    const addCategory = () => {
+        const newCategory = {
+            label: 'New Category',
+            items: []
+        };
+        setCategories([...categories, newCategory]);
+        setActiveTab(newCategory.label);
+    };
+
+    const addItem = (categoryIndex: number) => {
+        const newCategories = [...categories];
+        newCategories[categoryIndex].items.push({
+            title: 'New FAQ Item',
+            content: ['Enter content here']
+        });
+        setCategories(newCategories);
+    };
+
+    const handleSave = async () => {
+        await onSave(categories);
+        setShowSaveDialog(false);
+        router.push(`/${lng}/evcp/faq`);
+    };
+
+    const updateCategory = (index: number, label: string) => {
+        const newCategories = [...categories];
+        newCategories[index] = { ...newCategories[index], label };
+        setCategories(newCategories);
+        if (activeTab === categories[index].label) {
+            setActiveTab(label);
+        }
+    };
+
+    const updateItem = (categoryIndex: number, itemIndex: number, field: 'title' | 'content', value: string | string[]) => {
+        const newCategories = [...categories];
+        if (field === 'content') {
+            newCategories[categoryIndex].items[itemIndex][field] = (value as string).split('\n');
+        } else {
+            newCategories[categoryIndex].items[itemIndex][field] = value as string;
+        }
+        setCategories(newCategories);
+    };
+
+    const removeCategory = (index: number) => {
+        const newCategories = categories.filter((_, i) => i !== index);
+        setCategories(newCategories);
+        setActiveTab(newCategories[0]?.label || '');
+    };
+
+    const removeItem = (categoryIndex: number, itemIndex: number) => {
+        const newCategories = [...categories];
+        newCategories[categoryIndex].items = newCategories[categoryIndex].items.filter((_, i) => i !== itemIndex);
+        setCategories(newCategories);
+    };
+
+    return (
+        <div className="space-y-6">
+            <div className="flex justify-between items-center">
+                <div className="flex items-center space-x-2">
+                    <Button 
+                        variant={isSettingsView ? "default" : "outline"} 
+                        onClick={() => setIsSettingsView(true)}
+                    >
+                        <Settings className="w-4 h-4 mr-2" />
+                        Category Settings
+                    </Button>
+                    <Button 
+                        variant={!isSettingsView ? "default" : "outline"} 
+                        onClick={() => setIsSettingsView(false)}
+                    >
+                        FAQ Management
+                    </Button>
+                </div>
+                <Button onClick={() => setShowSaveDialog(true)}>
+                    <Save className="w-4 h-4 mr-2" />
+                    Save Changes
+                </Button>
+            </div>
+
+            {isSettingsView ? (
+                <div className="grid gap-4">
+                    {categories.map((category, index) => (
+                        <Card key={index} className="p-4">
+                            <div className="flex space-x-4 items-center">
+                                <Input
+                                    value={category.label}
+                                    onChange={(e) => updateCategory(index, e.target.value)}
+                                    className="flex-1"
+                                    placeholder="Category Name"
+                                />
+                                <Button variant="destructive" size="icon" onClick={() => removeCategory(index)}>
+                                    <Trash className="w-4 h-4" />
+                                </Button>
+                            </div>
+                        </Card>
+                    ))}
+                    <Button onClick={addCategory} variant="outline" className="w-full">
+                        <Plus className="w-4 h-4 mr-2" />
+                        Add Category
+                    </Button>
+                </div>
+            ) : (
+                <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+                    <TabsList>
+                        {categories.map((category) => (
+                            <TabsTrigger key={category.label} value={category.label}>
+                                {category.label}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+
+                    {categories.map((category, categoryIndex) => (
+                        <TabsContent key={category.label} value={category.label} className="space-y-4">
+                            {category.items.map((item, itemIndex) => (
+                                <Card key={itemIndex}>
+                                    <CardContent className="space-y-2 pt-6">
+                                        <div className="flex justify-between items-start">
+                                            <Input
+                                                value={item.title}
+                                                onChange={(e) => updateItem(categoryIndex, itemIndex, 'title', e.target.value)}
+                                                className="flex-1 mr-2"
+                                                placeholder="Question"
+                                            />
+                                            <Button variant="destructive" size="icon" onClick={() => removeItem(categoryIndex, itemIndex)}>
+                                                <Trash className="w-4 h-4" />
+                                            </Button>
+                                        </div>
+                                        <Textarea
+                                            value={item.content.join('\n')}
+                                            onChange={(e) => updateItem(categoryIndex, itemIndex, 'content', e.target.value)}
+                                            placeholder="Answer (separate lines with Enter)"
+                                            rows={3}
+                                        />
+                                    </CardContent>
+                                </Card>
+                            ))}
+                            <Button variant="outline" onClick={() => addItem(categoryIndex)} className="w-full">
+                                <Plus className="w-4 h-4 mr-2" />
+                                Add FAQ Item
+                            </Button>
+                        </TabsContent>
+                    ))}
+                </Tabs>
+            )}
+
+            <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Save Changes</DialogTitle>
+                        <DialogDescription>
+                            Are you sure you want to save the changes? This will update the FAQ data.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button variant="outline" onClick={() => setShowSaveDialog(false)}>
+                            Cancel
+                        </Button>
+                        <Button onClick={handleSave}>
+                            Save
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+} 
\ No newline at end of file
-- 
cgit v1.2.3