export default function App() { const { ask, loading } = useAI(); const [eventName, setEventName] = useState("vibeland 런칭"); const [inputValue, setInputValue] = useState("vibeland 런칭"); const [message, setMessage] = useState(""); const [generated, setGenerated] = useState(false); const fireConfetti = () => { confetti({ particleCount: 120, spread: 80, origin: { y: 0.5 }, colors: ["#f97316", "#fbbf24", "#fb7185", "#a78bfa", "#34d399"] }); }; const generateMessage = useCallback(async (name) => { const target = (name || "").trim() || "vibeland 런칭"; const prompt = `당신은 따뜻하고 진심 어린 축하 메시지를 작성하는 전문가입니다. 아래 이벤트에 대해 한국어로 축하 메시지를 작성해주세요. - 이벤트: "${target}" - 조건: 2~3문장, 긍정적이고 진심 어린 톤, 이모지 2~3개 포함, 이벤트 이름 반드시 언급`; const result = await ask(prompt); if (result) { setMessage(result); setGenerated(true); fireConfetti(); } }, [ask]); useEffect(() => { generateMessage("vibeland 런칭"); }, []); const handleGenerate = () => { const name = inputValue.trim() || "vibeland 런칭"; setEventName(name); setInputValue(name); generateMessage(name); }; const handleKeyDown = (e) => { if (e.key === "Enter") handleGenerate(); }; return (

{/* Hero 결과 영역 */}

{loading ? (

축하 메시지를 생성 중입니다...

) : generated && message ? ( <>

🎉

{eventName}

{message}

) : (

✨

아래에서 이벤트 이름을 입력하고
축하 메시지를 생성해보세요!

)}

{/* 입력 영역 */}

🎊 축하할 이벤트

setInputValue(e.target.value)} onKeyDown={handleKeyDown} placeholder="예: vibeland 런칭, 생일, 졸업..." className="w-full px-4 py-3 rounded-xl border border-orange-200 bg-amber-50 text-stone-900 placeholder-stone-400 text-sm outline-none focus:border-orange-400 transition-all" />

{/* 다시 생성 버튼 */} {generated && !loading && ( )} {/* 하단 힌트 */}

이벤트 이름을 바꿔가며 다양한 축하 메시지를 생성해보세요 🌟

); }