ae:I[903690,["/chat-static/_next/static/immutable/chunks/1lkf6k2m1flb0.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/02i94wxetye3o.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ufyz6yxs0z2e.js","/chat-static/_next/static/immutable/chunks/2dh4piq3ytqcg.js","/chat-static/_next/static/immutable/chunks/3o68x5y6o8416.js","/chat-static/_next/static/immutable/chunks/2ismecd3wpydo.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/0stn4fyh7vt2p.js","/chat-static/_next/static/immutable/chunks/05nwfqhkhjzq1.js","/chat-static/_next/static/immutable/chunks/2yb_r2rxioeq7.js","/chat-static/_next/static/immutable/chunks/3hiry5_gl-olj.js","/chat-static/_next/static/immutable/chunks/3onevyvova1-x.js","/chat-static/_next/static/immutable/chunks/2nhia_dkrl056.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2iq10ibnlud11.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/04l72d75eqpuv.js","/chat-static/_next/static/immutable/chunks/1bapz7shexh_1.js","/chat-static/_next/static/immutable/chunks/2qdpxcwszvh9d.js","/chat-static/_next/static/immutable/chunks/28paj9r0h0i-2.js","/chat-static/_next/static/immutable/chunks/2rl_28388m3mk.js","/chat-static/_next/static/immutable/chunks/1vmsiis7-ckum.js","/chat-static/_next/static/immutable/chunks/3gr9g15aj6bnd.js","/chat-static/_next/static/immutable/chunks/1enbdr75qikbc.js","/chat-static/_next/static/immutable/chunks/0hl06z9smjl4k.js","/chat-static/_next/static/immutable/chunks/3y8epj96xs3p-.js","/chat-static/_next/static/immutable/chunks/1brjd04mcbgl6.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/1e0rcv99ytjcb.js","/chat-static/_next/static/immutable/chunks/0n7q9fcl3jcrv.js","/chat-static/_next/static/immutable/chunks/2lrohyk-nd291.js","/chat-static/_next/static/immutable/chunks/09cgg7k7wixw8.js","/chat-static/_next/static/immutable/chunks/10v7ydpea6nr6.js","/chat-static/_next/static/immutable/chunks/3u8-q0_zrsq3a.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/3j-tycn5m0jn9.js","/chat-static/_next/static/immutable/chunks/05wnlk6xbjsq8.js","/chat-static/_next/static/immutable/chunks/3k3j2f1pv2vk9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/2qvuo3-v7nyo9.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1-dy_7sysc2c9.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/221p-9jysj5ag.js","/chat-static/_next/static/immutable/chunks/44yv1x71fh45j.js","/chat-static/_next/static/immutable/chunks/0a3-vdkd9kqel.js"],"ExplicitChatIdProvider"] af:I[838238,["/chat-static/_next/static/immutable/chunks/1lkf6k2m1flb0.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/02i94wxetye3o.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ufyz6yxs0z2e.js","/chat-static/_next/static/immutable/chunks/2dh4piq3ytqcg.js","/chat-static/_next/static/immutable/chunks/3o68x5y6o8416.js","/chat-static/_next/static/immutable/chunks/2ismecd3wpydo.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/0stn4fyh7vt2p.js","/chat-static/_next/static/immutable/chunks/05nwfqhkhjzq1.js","/chat-static/_next/static/immutable/chunks/2yb_r2rxioeq7.js","/chat-static/_next/static/immutable/chunks/3hiry5_gl-olj.js","/chat-static/_next/static/immutable/chunks/3onevyvova1-x.js","/chat-static/_next/static/immutable/chunks/2nhia_dkrl056.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2iq10ibnlud11.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/04l72d75eqpuv.js","/chat-static/_next/static/immutable/chunks/1bapz7shexh_1.js","/chat-static/_next/static/immutable/chunks/2qdpxcwszvh9d.js","/chat-static/_next/static/immutable/chunks/28paj9r0h0i-2.js","/chat-static/_next/static/immutable/chunks/2rl_28388m3mk.js","/chat-static/_next/static/immutable/chunks/1vmsiis7-ckum.js","/chat-static/_next/static/immutable/chunks/3gr9g15aj6bnd.js","/chat-static/_next/static/immutable/chunks/1enbdr75qikbc.js","/chat-static/_next/static/immutable/chunks/0hl06z9smjl4k.js","/chat-static/_next/static/immutable/chunks/3y8epj96xs3p-.js","/chat-static/_next/static/immutable/chunks/1brjd04mcbgl6.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/1e0rcv99ytjcb.js","/chat-static/_next/static/immutable/chunks/0n7q9fcl3jcrv.js","/chat-static/_next/static/immutable/chunks/2lrohyk-nd291.js","/chat-static/_next/static/immutable/chunks/09cgg7k7wixw8.js","/chat-static/_next/static/immutable/chunks/10v7ydpea6nr6.js","/chat-static/_next/static/immutable/chunks/3u8-q0_zrsq3a.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/3j-tycn5m0jn9.js","/chat-static/_next/static/immutable/chunks/05wnlk6xbjsq8.js","/chat-static/_next/static/immutable/chunks/3k3j2f1pv2vk9.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/2qvuo3-v7nyo9.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/1-dy_7sysc2c9.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/221p-9jysj5ag.js","/chat-static/_next/static/immutable/chunks/44yv1x71fh45j.js","/chat-static/_next/static/immutable/chunks/0a3-vdkd9kqel.js"],"SWRDataProvider"] b1:[] b2:[["b_ZZwdAJeu4GW",null],["b_YyWJpIQPTy0",null],["b_tJcsnzioyhF",null]] b3:[["b_ZZwdAJeu4GW",{"templateVersionId":null,"templateCanonId":null}],["b_YyWJpIQPTy0",{"templateVersionId":null,"templateCanonId":null}],["b_tJcsnzioyhF",{"templateVersionId":null,"templateCanonId":null}]] b4:[["oaWnhrMRiab","$D2025-04-03T04:29:26.388Z"],["b_nuQhr23rPYk","$D2025-04-03T04:32:31.107Z"],["b_h8Vi84iJN8Y","$D2025-04-03T04:38:47.241Z"],["b_qwU1YXFiGxh","$D2025-04-03T04:42:57.906Z"],["b_unPWJiEoIHn","$D2025-04-03T04:47:40.144Z"],["b_oiPT2BOhn0Y","$D2025-04-03T04:49:45.615Z"],["b_xtAQ0YRUMoc","$D2025-04-03T04:52:25.119Z"],["b_Og6AedYYCVN","$D2025-04-03T05:01:41.196Z"],["b_a48ZXr9oecc","$D2025-04-03T05:05:31.422Z"],["b_pMDtiHu6gTd","$D2025-04-03T05:08:36.689Z"],["b_zbPdlwAbivh","$D2025-04-03T05:14:14.738Z"],["b_5fwtDSaZLtJ","$D2025-04-03T05:36:40.105Z"],["b_9P0lulDCj3C","$D2025-04-03T05:38:38.854Z"],["b_HN87uDxfTxV","$D2025-04-03T05:41:05.857Z"],["b_5nyaruQhUDZ","$D2025-04-03T05:44:29.836Z"],["b_ek2GEexlOKT","$D2025-04-03T05:48:44.733Z"],["b_X3OxWjaG3Hi","$D2025-04-03T05:52:25.929Z"],["b_5SKvNuM5Fdu","$D2025-04-03T05:55:04.993Z"],["b_ytc92wmf2AN","$D2025-04-03T05:58:41.872Z"],["b_c9DmX5JnFS5","$D2025-04-03T06:02:01.093Z"],["b_Hu6rzuPkgnh","$D2025-04-03T06:04:45.823Z"],["b_SXXB1wXLUM2","$D2025-04-03T06:09:14.397Z"],["b_vYKLrYYoIfO","$D2025-04-03T06:12:12.709Z"],["b_90jsdoDk263","$D2025-04-03T06:14:53.776Z"],["b_kAnVFg4NNAJ","$D2025-04-03T06:17:00.327Z"],["b_ffByPNPkgC5","$D2025-04-03T06:21:22.559Z"],["b_yE2qzlsuw6T","$D2025-04-03T06:33:17.568Z"],["b_91xNRomnRiZ","$D2025-04-03T06:36:11.165Z"],["b_RzM1fKnHTwc","$D2025-04-03T06:49:49.480Z"],["b_fT0QR1fNIUh","$D2025-04-03T06:53:23.466Z"],["b_aSCTJfUaNQW","$D2025-04-03T06:55:42.344Z"],["b_vEcM9nattSu","$D2025-04-03T06:59:00.439Z"],["b_fduGVzWHcCy","$D2025-04-03T07:09:51.459Z"],["b_44JKlq0eZXk","$D2025-04-03T07:12:53.105Z"],["b_vmhnlEOQJ1w","$D2025-04-03T07:15:29.171Z"],["b_eAD2Y1bCssL","$D2025-04-03T07:17:29.533Z"],["b_u8X95zhQpes","$D2025-04-03T07:20:51.081Z"],["b_N2NHLXHrnXh","$D2025-04-03T07:22:48.004Z"],["b_rHnPW91KKhO","$D2025-04-03T07:27:34.968Z"],["b_3R8WYEsYBmF","$D2025-04-03T07:28:55.655Z"],["b_zjrNPLBPruW","$D2025-04-03T07:31:55.994Z"],["b_wG1FtMBn9Fk","$D2025-04-03T07:35:25.235Z"],["b_cD2w23gqaJn","$D2025-04-03T07:36:13.156Z"],["b_34pXlk89ALT","$D2025-04-07T00:14:52.055Z"],["b_lwV2Wof1YPK","$D2025-04-07T00:17:36.170Z"],["b_ZZwdAJeu4GW","$D2025-04-07T01:03:02.959Z"],["b_YyWJpIQPTy0","$D2025-07-26T01:01:07.243Z"],["b_vf1gTgeEZf5","$D2025-07-26T01:02:57.864Z"],["b_tJcsnzioyhF","$D2025-08-09T06:14:59.255Z"]] b5:[["b_ZZwdAJeu4GW",false],["b_YyWJpIQPTy0",false],["b_tJcsnzioyhF",false]] b6:[["b_ZZwdAJeu4GW",{"aliasUrl":"v0-kidlearn-landing-76lvba3ei-kyuhyis-projects.vercel.app","readyState":"READY","deploymentId":"dpl_EY5MSFt9iXyWtt1WVj9m7UifXZTR"}],["b_YyWJpIQPTy0","$undefined"],["b_tJcsnzioyhF","$undefined"]] b7:[["b_ZZwdAJeu4GW",null],["b_YyWJpIQPTy0",null],["b_tJcsnzioyhF",null]] b8:[["b_ZZwdAJeu4GW",true],["b_YyWJpIQPTy0",true],["b_tJcsnzioyhF",true]] b9:[["b_ZZwdAJeu4GW",true],["b_YyWJpIQPTy0",true],["b_tJcsnzioyhF",true]] ba:[] bb:T79162,[V0_FILE]typescriptreact:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, experimental: { webpackBuildWorker: true, parallelServerBuildTraces: true, parallelServerCompiles: true, }, images: { domains: ['v0.blob.com'], unoptimized: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/upload/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import Image from "next/image" import Link from "next/link" import { Upload, X, Check } from "lucide-react" export default function ImageUpload() { const [selectedImage, setSelectedImage] = useState(null) const [uploading, setUploading] = useState(false) const [uploadSuccess, setUploadSuccess] = useState(false) const fileInputRef = useRef(null) const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { // 파일을 읽어서 미리보기 이미지 생성 const reader = new FileReader() reader.onload = () => { setSelectedImage(reader.result as string) setUploadSuccess(false) } reader.readAsDataURL(file) } } const handleUpload = async () => { if (!selectedImage) return setUploading(true) // 여기서는 실제 업로드 대신 타이머로 시뮬레이션 // 실제 구현에서는 API 호출이 필요합니다 setTimeout(() => { setUploading(false) setUploadSuccess(true) }, 1500) // 실제 업로드 구현 예시 (주석 처리됨) /* try { const formData = new FormData() const file = fileInputRef.current?.files?.[0] if (!file) return formData.append('image', file) const response = await fetch('/api/upload', { method: 'POST', body: formData, }) if (response.ok) { setUploadSuccess(true) } else { // 에러 처리 console.error('업로드 실패') } } catch (error) { console.error('업로드 중 오류 발생:', error) } finally { setUploading(false) } */ } const triggerFileInput = () => { fileInputRef.current?.click() } return (

{/* Decorative elements */}

이미지 업로드

소중한 아이의 사진을 업로드하세요

{selectedImage ? (

) : (

클릭하여 이미지 선택

또는 파일을 여기에 끌어다 놓으세요

)}

{selectedImage && ( )} {uploadSuccess && (

이미지가 성공적으로 업로드되었습니다!

이제 이 이미지를 사이트에서 사용할 수 있습니다.

)}

홈으로 돌아가기

) } [V0_FILE]typescriptreact:file="app/api/upload/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { writeFile } from "fs/promises" import { join } from "path" import { v4 as uuidv4 } from "uuid" export async function POST(request: NextRequest) { try { const formData = await request.formData() const file = formData.get("image") as File if (!file) { return NextResponse.json({ error: "이미지 파일이 필요합니다" }, { status: 400 }) } // 파일 확장자 확인 const fileType = file.type if (!fileType.startsWith("image/")) { return NextResponse.json({ error: "이미지 파일만 업로드 가능합니다" }, { status: 400 }) } // 파일 크기 제한 (5MB) const maxSize = 5 * 1024 * 1024 // 5MB if (file.size > maxSize) { return NextResponse.json({ error: "파일 크기는 5MB 이하여야 합니다" }, { status: 400 }) } // 파일 이름 생성 (고유 ID + 원래 확장자) const bytes = await file.arrayBuffer() const buffer = Buffer.from(bytes) const ext = file.name.split(".").pop() const fileName = `${uuidv4()}.${ext}` // 파일 저장 경로 const imagesDir = join(process.cwd(), "public", "images") const filePath = join(imagesDir, fileName) // 파일 저장 await writeFile(filePath, buffer) // 성공 응답 return NextResponse.json({ success: true, fileName: fileName, path: `/images/${fileName}`, }) } catch (error) { console.error("파일 업로드 오류:", error) return NextResponse.json({ error: "파일 업로드 중 오류가 발생했습니다" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" const GEMINI_API_KEY = "AIzaSyDV6nReg51vwG0LFvyHc0dPA5nagJYQPG8" const GEMINI_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent" export async function POST(request: NextRequest) { try { const { message } = await request.json() // 시스템 프롬프트 설정 (대한민국 육아 정보에 특화된 챗봇) const systemPrompt = `당신은 "제이파파"라는 이름의 대한민국 육아 전문 챗봇입니다. 대한민국의 육아 관련 정보, 팁, 조언에 대해서만 답변해 주세요. 아기의 발달 단계, 육아 방법, 수면, 식이, 건강, 교육 등 육아와 관련된 질문에 친절하고 정확하게 답변해 주세요. 육아와 관련 없는 질문에는 "죄송합니다. 저는 육아 관련 질문에만 답변할 수 있습니다."라고 답변해 주세요. 답변은 한국어로 제공하며, 친근하고 따뜻한 어조를 유지해 주세요.` // Gemini API 요청 본문 구성 const requestBody = { contents: [ { parts: [{ text: systemPrompt }, { text: message }], }, ], } // Gemini API 호출 const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(requestBody), }) if (!response.ok) { const errorData = await response.json() console.error("Gemini API 오류:", errorData) return NextResponse.json({ error: "챗봇 응답을 가져오는 중 오류가 발생했습니다." }, { status: response.status }) } const data = await response.json() const reply = data.candidates?.[0]?.content?.parts?.[0]?.text || "죄송합니다. 응답을 생성할 수 없습니다." return NextResponse.json({ reply }) } catch (error) { console.error("서버 오류:", error) return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/chatbot/chatbot.tsx" isMerged="true" "use client" import { useState } from "react" import BabyFaceButton from "./baby-face-button" import ChatWindow from "./chat-window" export default function Chatbot() { const [isOpen, setIsOpen] = useState(false) const toggleChat = () => { setIsOpen(!isOpen) } return ( <> setIsOpen(false)} /> ) } [V0_FILE]plaintext:file="public/images/baby-face.png" isMerged="true" [V0_FILE]plaintext:file="public/images/baby-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/baby-tyBmR5C7q0Sp50D77Wa780vvg1QgtA.png" isMerged="true" [V0_FILE]typescriptreact:file="components/chatbot/chat-window.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Send, X, Loader2 } from "lucide-react" import Image from "next/image" interface ChatWindowProps { isOpen: boolean onClose: () => void } interface Message { id: string text: string sender: "user" | "bot" } export default function ChatWindow({ isOpen, onClose }: ChatWindowProps) { const [messages, setMessages] = useState([ { id: "1", text: "안녕하세요! 저는 육아 전문 챗봇 제이파파입니다. 육아에 관한 질문이 있으시면 언제든지 물어보세요!", sender: "bot", }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const messagesEndRef = useRef(null) // 메시지가 추가될 때마다 스크롤을 아래로 이동 useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleSendMessage = async () => { if (!input.trim()) return const userMessage: Message = { id: Date.now().toString(), text: input, sender: "user", } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message: input }), }) const data = await response.json() if (response.ok) { const botMessage: Message = { id: (Date.now() + 1).toString(), text: data.reply, sender: "bot", } setMessages((prev) => [...prev, botMessage]) } else { const errorMessage: Message = { id: (Date.now() + 1).toString(), text: "죄송합니다. 응답을 생성하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", sender: "bot", } setMessages((prev) => [...prev, errorMessage]) } } catch (error) { const errorMessage: Message = { id: (Date.now() + 1).toString(), text: "네트워크 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.", sender: "bot", } setMessages((prev) => [...prev, errorMessage]) } finally { setIsLoading(false) } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return ( {isOpen && ( {/* 헤더 */}

육아 도우미 챗봇

{/* 메시지 영역 */}

{messages.map((message) => (

{message.text}

))} {isLoading && (

답변 생성 중...

)}

{/* 입력 영역 */}

setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="육아 관련 질문을 입력하세요..."
              className="flex-1 h-full resize-none border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-baby-pink"
              disabled={isLoading}
            />
            <button
              onClick={handleSendMessage}
              disabled={!input.trim() || isLoading}
              className={`ml-2 w-10 h-10 rounded-full flex items-center justify-center ${
                !input.trim() || isLoading
                  ? "bg-gray-200 text-gray-400"
                  : "bg-baby-pink text-white hover:bg-baby-pink/90"
              } transition-colors`}
            >
              <Send size={18} />
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescript:file="components/youtube/youtube-section.tsx" isMerged="true"
import YouTubeVideos from "./youtube-videos"

export default function YouTubeSection() {
  const categories = [
    {
      id: "development",
      title: "영유아 발달 및 교육",
      description: "아이의 성장 단계별 발달 특징과 교육 방법에 관한 유용한 영상을 확인하세요.",
    },
    {
      id: "tips",
      title: "육아 팁 및 노하우",
      description: "경험 많은 부모님들이 공유하는 실용적인 육아 팁과 노하우를 배워보세요.",
    },
    {
      id: "activities",
      title: "아이와 함께하는 놀이 활동",
      description: "아이의 창의력과 상상력을 키워주는 다양한 놀이 활동을 소개합니다.",
    },
  ]

return (
    <section className="py-12 bg-baby-bg">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="font-jua text-3xl md:text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">육아 영상</span> 모음
          </h2>
          <p className="text-text-secondary max-w-2xl mx-auto">
            카테고리별로 엄선된 육아 관련 유튜브 영상을 확인하고 유용한 정보를 얻어가세요.
          </p>
        </div>

{categories.map((category) => (
          <div key={category.id} className="mb-16">
            <YouTubeVideos category={category.id} title={category.title} description={category.description} />
          </div>
        ))}
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="app/videos/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { Play, Loader2, ArrowLeft } from "lucide-react"

interface Video {
  id: {
    videoId: string
  }
  snippet: {
    title: string
    description: string
    thumbnails: {
      medium: {
        url: string
      }
    }
    publishedAt: string
    channelTitle: string
  }
}

interface Category {
  id: string
  title: string
  description: string
}

export default function VideosPage() {
  const [activeCategory, setActiveCategory] = useState("development")
  const [videos, setVideos] = useState<Video[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

const categories: Category[] = [
    {
      id: "development",
      title: "영유아 발달 및 교육",
      description: "아이의 성장 단계별 발달 특징과 교육 방법에 관한 유용한 영상을 확인하세요.",
    },
    {
      id: "tips",
      title: "육아 팁 및 노하우",
      description: "경험 많은 부모님들이 공유하는 실용적인 육아 팁과 노하우를 배워보세요.",
    },
    {
      id: "activities",
      title: "아이와 함께하는 놀이 활동",
      description: "아이의 창의력과 상상력을 키워주는 다���한 놀이 활동을 소개합니다.",
    },
  ]

useEffect(() => {
    const fetchVideos = async () => {
      try {
        setLoading(true)
        const response = await fetch(`/api/youtube?category=${activeCategory}`)

if (!response.ok) {
          throw new Error("영상을 가져오는데 실패했습니다.")
        }

const data = await response.json()
        setVideos(data.items || [])
      } catch (err) {
        setError("영상을 불러오는 중 오류가 발생했습니다.")
        console.error(err)
      } finally {
        setLoading(false)
      }
    }

fetchVideos()
  }, [activeCategory])

const activeTab = categories.find((cat) => cat.id === activeCategory)

return (
    <div className="min-h-screen py-12">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <Link href="/" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            홈으로 돌아가기
          </Link>
        </div>

<div className="text-center mb-12">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">육아 영상</span> 모음
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            카테고리별로 엄선된 육아 관련 유튜브 영상을 확인하고 유용한 정보를 얻어가세요.
          </p>
        </div>

<div className="flex flex-wrap justify-center gap-4 mb-12">
          {categories.map((category) => (
            <button
              key={category.id}
              onClick={() => setActiveCategory(category.id)}
              className={`px-6 py-3 rounded-full font-jua transition-all ${
                activeCategory === category.id
                  ? "bg-baby-pink text-white shadow-md"
                  : "bg-white text-text-secondary hover:bg-baby-pink/10"
              }`}
            >
              {category.title}
            </button>
          ))}
        </div>

{activeTab && (
          <div className="mb-8 text-center">
            <h2 className="font-jua text-2xl text-text-primary mb-2">{activeTab.title}</h2>
            <p className="text-text-secondary max-w-2xl mx-auto">{activeTab.description}</p>
          </div>
        )}

{loading ? (
          <div className="flex justify-center items-center py-12">
            <Loader2 className="w-8 h-8 text-baby-pink animate-spin" />
            <span className="ml-2 text-text-secondary">영상을 불러오는 중...</span>
          </div>
        ) : error ? (
          <div className="text-center py-12">
            <p className="text-red-500">{error}</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {videos.map((video) => (
              <Link
                href={`https://www.youtube.com/watch?v=${video.id.videoId}`}
                target="_blank"
                rel="noopener noreferrer"
                key={video.id.videoId}
                className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group"
              >
                <div className="relative">
                  <Image
                    src={video.snippet.thumbnails.medium.url || "/placeholder.svg"}
                    alt={video.snippet.title}
                    width={320}
                    height={180}
                    className="w-full object-cover"
                  />
                  <div className="absolute inset-0 bg-baby-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center">
                      <Play className="w-6 h-6 text-baby-pink" />
                    </div>
                  </div>
                </div>
                <div className="p-4">
                  <h3 className="font-jua text-text-primary line-clamp-2 mb-2">{video.snippet.title}</h3>
                  <p className="text-text-secondary text-sm line-clamp-2 mb-2">{video.snippet.description}</p>
                  <div className="flex justify-between items-center text-xs text-text-light">
                    <span>{video.snippet.channelTitle}</span>
                    <span>{new Date(video.snippet.publishedAt).toLocaleDateString()}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/mock-data.ts" isMerged="true"
export const mockYoutubeVideos = {
  development: [
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "아기 발달 단계별 특징과 놀이 방법",
        description: "0~12개월 아기의 발달 단계별 특징과 그에 맞는 놀이 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-06-15T09:30:00Z",
        channelTitle: "행복한육아",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "영유아 언어발달 촉진하는 대화법",
        description: "아이의 언어 발달을 촉진하는 효과적인 대화 방법과 활동을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-07-20T14:15:00Z",
        channelTitle: "똑똑맘",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "아이 두뇌발달에 좋은 놀이 5가지",
        description: "영유아기 두뇌 발달에 도움이 되는 간단하면서도 효과적인 놀이 활동을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-08-05T10:45:00Z",
        channelTitle: "육아전문가TV",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "영유아 사회성 발달을 위한 그룹 활동",
        description: "아이의 사회성 발달을 돕는 다양한 그룹 활동과 놀이 방법을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-09-10T08:20:00Z",
        channelTitle: "슬기로운육아",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "아이 감각발달을 위한 몬테소리 활동",
        description: "집에서 쉽게 할 수 있는 몬테소리 교육법과 감각발달 활동을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-10-18T11:30:00Z",
        channelTitle: "몬테소리맘",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "영유아 운동발달 촉진하는 신체활동",
        description: "아이의 대근육, 소근육 발달을 돕는 다양한 신체활동과 운동 놀이를 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-11-05T15:40:00Z",
        channelTitle: "튼튼아이",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "아이 창의력 발달을 위한 미술활동",
        description: "영유아기 창의력과 상상력 발달에 도움이 되는 다양한 미술활동을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-12-12T09:15:00Z",
        channelTitle: "창의력쑥쑥",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "영유아 정서발달을 위한 그림책 읽기",
        description: "아이의 정서 발달과 공감 능력을 키워주는 그림책 선택법과 읽기 방법을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2024-01-08T13:50:00Z",
        channelTitle: "그림책육아",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "아이 인지발달을 위한 퍼즐 놀이",
        description: "연령별 인지 발달에 도움이 되는 다양한 퍼즐과 블록 놀이 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2024-02-15T10:10:00Z",
        channelTitle: "똑똑육아",
      },
    },
  ],
  tips: [
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "신생아 목욕 시키는 방법",
        description: "처음 아기를 키우는 부모를 위한 안전하고 편안한 신생아 목욕 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-06-10T08:30:00Z",
        channelTitle: "육아의신",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "아기 수면 습관 만들기",
        description: "아기의 건강한 수면 습관을 만들기 위한 효과적인 방법과 루틴을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-07-15T12:45:00Z",
        channelTitle: "꿀잠육아",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "이유식 시작하는 방법과 주의사항",
        description: "아기의 첫 이유식 시작 시기와 방법, 그리고 알아두어야 할 주의사항을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-08-20T09:20:00Z",
        channelTitle: "맛있는육아",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "아이 떼쓰기 대처법",
        description: "아이의 떼쓰기와 감정 폭발에 효과적으로 대처하는 방법과 팁을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-09-05T14:10:00Z",
        channelTitle: "현명한부모",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "아이 면역력 높이는 생활습관",
        description: "아이의 면역력을 자연스럽게 높여주는 식습관과 생활 습관을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-10-12T11:25:00Z",
        channelTitle: "건강한육아",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "육아 스트레스 해소법",
        description: "육아로 인한 스트레스를 효과적으로 관리하고 해소하는 방법을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-11-18T16:30:00Z",
        channelTitle: "행복한맘",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "아이 편식 고치는 방법",
        description: "아이의 편식 습관을 자연스럽게 개선하는 효과적인 방법과 식사 전략을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-12-05T10:40:00Z",
        channelTitle: "맛있는육아",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "아이 화장실 훈련 성공 노하우",
        description: "아이의 화장실 훈련을 성공적으로 이끄는 단계별 방법과 팁을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2024-01-15T09:15:00Z",
        channelTitle: "육아의신",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "형제자매 간 다툼 중재하기",
        description: "형제자매 간의 다툼을 효과적으로 중재하고 건강한 관계를 형성하도록 돕는 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2024-02-08T13:20:00Z",
        channelTitle: "슬기로운육아",
      },
    },
  ],
  activities: [
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "실내에서 할 수 있는 신체놀이 5가지",
        description: "날씨가 안 좋을 때 집에서 할 수 있는 아이의 체력 소모에 좋은 신체놀이를 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-06-05T10:15:00Z",
        channelTitle: "놀이육아",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "집에서 만드는 감각놀이 재료",
        description: "집에 있는 재료로 만들 수 있는 다양한 감각놀이 재료와 활동 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-07-12T11:30:00Z",
        channelTitle: "창의력쑥쑥",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "아이와 함께하는 요리 활동",
        description: "아이의 소근육 발달과 창의력을 키워주는 간단한 요리 활동을 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-08-18T09:45:00Z",
        channelTitle: "쿡쿡맘",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "종이접기로 배우는 창의력 놀이",
        description: "간단한 종이접기를 통해 아이의 창의력과 집중력을 키워주는 활동을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-09-22T14:20:00Z",
        channelTitle: "종이접기마스터",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "비오는 날 실내 놀이 아이디어",
        description: "비오는 날 집에서 할 수 있는 다양하고 재미있는 실내 놀이 아이디어를 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2023-10-15T10:10:00Z",
        channelTitle: "놀이육아",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "아이와 함께하는 자연 탐험",
        description: "아이와 함께 할 수 있는 자연 탐험 활동과 관찰 놀이 방법을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2023-11-08T15:35:00Z",
        channelTitle: "자연탐험대",
      },
    },
    {
      id: { videoId: "Kkd8KdWrZiU" },
      snippet: {
        title: "아이와 함께하는 음악 놀이",
        description: "집에서 간단하게 할 수 있는 음악 활동과 리듬 놀이를 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/Kkd8KdWrZiU/mqdefault.jpg" },
        },
        publishedAt: "2023-12-20T09:50:00Z",
        channelTitle: "음악놀이터",
      },
    },
    {
      id: { videoId: "qZcuN7rBhyc" },
      snippet: {
        title: "아이와 함께하는 과학 실험",
        description: "집에서 안전하게 할 수 있는 재미있는 과학 실험과 STEM 활동을 알아봅니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/qZcuN7rBhyc/mqdefault.jpg" },
        },
        publishedAt: "2024-01-25T11:40:00Z",
        channelTitle: "과학탐험대",
      },
    },
    {
      id: { videoId: "XmEk_5xQHGU" },
      snippet: {
        title: "아이와 함께하는 미술 놀이",
        description: "다양한 재료를 활용한 창의적인 미술 활동과 만들기 놀이를 소개합니다.",
        thumbnails: {
          medium: { url: "https://i.ytimg.com/vi/XmEk_5xQHGU/mqdefault.jpg" },
        },
        publishedAt: "2024-02-18T13:15:00Z",
        channelTitle: "아트키즈",
      },
    },
  ],
}
[V0_FILE]typescript:file="app/api/youtube/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { mockYoutubeVideos } from "@/lib/mock-data"

const YOUTUBE_API_KEY = "AIzaSyCJhiw9D9b1zEmymUZxeAtkQ0zI1ddEAec"

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const category = searchParams.get("category") || "development"
  const maxResults = searchParams.get("maxResults") || "9"

try {
    // 카테고리에 따른 검색어 설정
    let searchQuery = "육아"
    if (category === "development") {
      searchQuery = "영유아 발달 교육"
    } else if (category === "tips") {
      searchQuery = "육아 팁 노하우"
    } else if (category === "activities") {
      searchQuery = "아이와 함께하는 놀이"
    }

// 실제 YouTube API 호출 시도
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(
        searchQuery,
      )}&maxResults=${maxResults}&type=video&key=${YOUTUBE_API_KEY}`,
      {
        // 5초 타임아웃 설정
        signal: AbortSignal.timeout(5000),
      },
    )

if (!response.ok) {
      console.log(`YouTube API 응답 오류: ${response.status} ${response.statusText}`)
      // API 호출 실패 시 목업 데이터 반환
      return NextResponse.json({
        items: mockYoutubeVideos[category as keyof typeof mockYoutubeVideos] || mockYoutubeVideos.development,
        _source: "mock",
      })
    }

const data = await response.json()
    return NextResponse.json({
      ...data,
      _source: "api",
    })
  } catch (error) {
    console.error("YouTube API 오류:", error)

// 오류 발생 시 목업 데이터 반환
    return NextResponse.json({
      items: mockYoutubeVideos[category as keyof typeof mockYoutubeVideos] || mockYoutubeVideos.development,
      _source: "mock",
    })
  }
}
[V0_FILE]typescript:file="components/youtube/youtube-videos.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { Play, Loader2, Info } from "lucide-react"

interface YouTubeVideosProps {
  category: string
  title: string
  description: string
}

export default function YouTubeVideos({ category, title, description }: YouTubeVideosProps) {
  const [videos, setVideos] = useState<Video[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")
  const [dataSource, setDataSource] = useState<"api" | "mock" | null>(null)

useEffect(() => {
    const fetchVideos = async () => {
      try {
        setLoading(true)
        const response = await fetch(`/api/youtube?category=${category}&maxResults=9`)

if (!response.ok) {
          throw new Error("영상을 가져오는데 실패했습니다.")
        }

const data = await response.json()
        setVideos(data.items || [])
        setDataSource(data._source || null)
      } catch (err) {
        setError("영상을 불러오는 중 오류가 발생했습니다.")
        console.error(err)
      } finally {
        setLoading(false)
      }
    }

fetchVideos()
  }, [category])

if (loading) {
    return (
      <div className="flex justify-center items-center py-12">
        <Loader2 className="w-8 h-8 text-baby-pink animate-spin" />
        <span className="ml-2 text-text-secondary">영상을 불러오는 중...</span>
      </div>
    )
  }

if (error) {
    return (
      <div className="text-center py-12">
        <p className="text-red-500">{error}</p>
      </div>
    )
  }

return (
    <div className="py-8">
      <div className="text-center mb-8">
        <h2 className="font-jua text-2xl text-text-primary mb-2">{title}</h2>
        <p className="text-text-secondary max-w-2xl mx-auto">{description}</p>
        {dataSource === "mock" && (
          <div className="mt-2 inline-flex items-center text-xs text-baby-pink bg-baby-pink/10 px-3 py-1 rounded-full">
            <Info size={12} className="mr-1" />
            API 할당량 초과로 샘플 데이터를 표시합니다
          </div>
        )}
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {videos.map((video) => (
          <Link
            href={`https://www.youtube.com/watch?v=${video.id.videoId}`}
            target="_blank"
            rel="noopener noreferrer"
            key={video.id.videoId}
            className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 group"
          >
            <div className="relative">
              <Image
                src={video.snippet.thumbnails.medium.url || "/placeholder.svg"}
                alt={video.snippet.title}
                width={320}
                height={180}
                className="w-full object-cover"
              />
              <div className="absolute inset-0 bg-baby-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center">
                  <Play className="w-6 h-6 text-baby-pink" />
                </div>
              </div>
            </div>
            <div className="p-4">
              <h3 className="font-jua text-text-primary line-clamp-2 mb-2">{video.snippet.title}</h3>
              <p className="text-text-secondary text-sm line-clamp-2 mb-2">{video.snippet.description}</p>
              <div className="flex justify-between items-center text-xs text-text-light">
                <span>{video.snippet.channelTitle}</span>
                <span>{new Date(video.snippet.publishedAt).toLocaleDateString()}</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { Calendar, ImageIcon, Save, ArrowLeft, X } from "lucide-react"

export default function NewDiaryPage() {
  const router = useRouter()
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [date, setDate] = useState(new Date().toISOString().split("T")[0])
  const [mood, setMood] = useState("happy")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = () => {
        setSelectedImage(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!title || !content) {
      alert("제목과 내용을 입력해주세요.")
      return
    }

setSaving(true)

// 실제 구현에서는 여기서 API 호출을 통해 데이터를 저장합니다.
    // 현재는 저장 시뮬레이션만 구현합니다.
    setTimeout(() => {
      setSaving(false)
      alert("일기가 성공적으로 저장되었습니다!")
      router.push("/diary")
    }, 1500)
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

const removeImage = () => {
    setSelectedImage(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const moods = [
    { id: "happy", emoji: "😊", label: "행복" },
    { id: "sad", emoji: "😢", label: "슬픔" },
    { id: "excited", emoji: "😆", label: "신남" },
    { id: "tired", emoji: "😴", label: "피곤" },
    { id: "angry", emoji: "😠", label: "화남" },
  ]

return (
    <div className="min-h-screen py-8 px-4">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/diary" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            육아일기로 돌아가기
          </Link>
        </div>

<form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="date" className="block font-jua text-text-primary mb-2">
                날짜
              </label>
              <div className="relative">
                <input
                  type="date"
                  id="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className="input w-full pl-10"
                  required
                />
                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-pink w-5 h-5" />
              </div>
            </div>

<div>
              <label htmlFor="mood" className="block font-jua text-text-primary mb-2">
                오늘의 기분
              </label>
              <div className="flex justify-between items-center">
                {moods.map((item) => (
                  <button
                    key={item.id}
                    type="button"
                    onClick={() => setMood(item.id)}
                    className={`flex flex-col items-center p-3 rounded-lg transition-all ${
                      mood === item.id
                        ? "bg-baby-pink/20 border-2 border-baby-pink"
                        : "bg-white border-2 border-gray-200 hover:border-baby-pink/50"
                    }`}
                  >
                    <span className="text-2xl mb-1">{item.emoji}</span>
                    <span className="text-xs font-jua">{item.label}</span>
                  </button>
                ))}
              </div>
            </div>

<div>
              <label htmlFor="title" className="block font-jua text-text-primary mb-2">
                제목
              </label>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="input w-full"
                placeholder="일기 제목을 입력하세요"
                required
              />
            </div>

<div>
              <label htmlFor="content" className="block font-jua text-text-primary mb-2">
                내용
              </label>
              <textarea
                id="content"
                value={content}
                onChange={(e) => setContent(e.target.value)}
                className="input w-full min-h-[200px] resize-y"
                placeholder="오늘 있었던 일을 기록해보세요..."
                required
              />
            </div>

{selectedImage ? (
                <div className="relative mt-2">
                  <Image
                    src={selectedImage || "/placeholder.svg"}
                    alt="선택한 이미지"
                    width={400}
                    height={300}
                    className="w-full h-auto max-h-[300px] object-contain rounded-lg border border-gray-200"
                  />
                  <button
                    type="button"
                    onClick={removeImage}
                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
                  >
                    <X size={16} className="text-text-secondary" />
                  </button>
                </div>
              ) : (
                <button
                  type="button"
                  onClick={triggerFileInput}
                  className="w-full border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-baby-pink hover:bg-baby-pink/5 transition-colors"
                >
                  <ImageIcon className="mx-auto h-12 w-12 text-baby-lavender mb-2" />
                  <p className="font-jua text-text-primary">클릭하여 이미지 선택</p>
                  <p className="text-text-secondary text-sm mt-1">아이의 소중한 순간을 사진으로 남겨보세요</p>
                </button>
              )}
            </div>

<div className="pt-4">
              <button
                type="submit"
                disabled={saving}
                className="btn btn-primary w-full flex items-center justify-center"
              >
                {saving ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    저장 중...
                  </>
                ) : (
                  <>
                    <Save size={16} className="mr-2" /> 일기 저장하기
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/formula/route.ts" isMerged="true"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { type NextRequest, NextResponse } from "next/server"

// 분유 기록 가져오기
export async function GET(request: NextRequest) {
  const supabase = createRouteHandlerClient({ cookies })

// 사용자 인증 확인
  const {
    data: { session },
  } = await supabase.auth.getSession()
  if (!session) {
    return NextResponse.json({ error: "인증이 필요합니다" }, { status: 401 })
  }

// 분유 기록 조회
  const { data, error } = await supabase
    .from("formula_records")
    .select("*")
    .order("date", { ascending: false })
    .order("time", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json(data)
}

// 분유 기록 추가
export async function POST(request: NextRequest) {
  const supabase = createRouteHandlerClient({ cookies })

// 요청 데이터 파싱
  const { date, time, amount, note } = await request.json()

// 데이터 유효성 검사
  if (!date || !time || !amount) {
    return NextResponse.json({ error: "필수 필드가 누락되었습니다" }, { status: 400 })
  }

// 분유 기록 추가
  const { data, error } = await supabase
    .from("formula_records")
    .insert({
      user_id: session.user.id,
      date,
      time,
      amount,
      note,
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json(data)
}
[V0_FILE]typescript:file="app/api/formula/[id]/route.ts" isMerged="true"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { type NextRequest, NextResponse } from "next/server"

// 분유 기록 삭제
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  const supabase = createRouteHandlerClient({ cookies })

// 분유 기록 삭제
  const { error } = await supabase.from("formula_records").delete().eq("id", params.id).eq("user_id", session.user.id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/signup/actions.ts" isMerged="true"
"use server"

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export async function signUp(formData: FormData) {
  const supabase = createServerActionClient({ cookies })

const email = formData.get("email") as string
  const password = formData.get("password") as string
  const name = formData.get("name") as string

const { error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: {
        name,
      },
    },
  })

if (error) {
    return { error: error.message }
  }

return { success: true, message: "회원가입이 완료되었습니다. 로그인해주세요." }
}
[V0_FILE]typescript:file="app/login/social-auth.ts" isMerged="true"
"use client"

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export async function signInWithGoogle() {
  const supabase = createClientComponentClient()

const { error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  })

if (error) {
    console.error("Google 로그인 오류:", error)
  }
}

export async function signInWithKakao() {
  const supabase = createClientComponentClient()

const { error } = await supabase.auth.signInWithOAuth({
    provider: "kakao",
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  })

if (error) {
    console.error("Kakao 로그인 오류:", error)
  }
}
[V0_FILE]typescript:file="app/auth/callback/route.ts" isMerged="true"
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

return NextResponse.redirect(new URL("/", request.url))
}
[V0_FILE]typescriptreact:file="app/signup/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Eye, EyeOff, ArrowLeft } from "lucide-react"
import { signUp } from "./actions"

export default function SignUp() {
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
  }

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)
    setSuccess(null)

const formData = new FormData(e.currentTarget)
    const result = await signUp(formData)

setIsLoading(false)

if (result?.error) {
      setError(result.error)
    } else if (result?.success) {
      setSuccess(result.message)
      // 폼 초기화 방식 변경
      setName("")
      setEmail("")
      setPassword("")
    }
  }

return (
    <div className="min-h-screen py-12 flex items-center justify-center baby-pattern">
      <div className="w-full max-w-md mx-auto">
        <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-baby-lavender/20 relative">
          {/* Decorative elements */}
          <div className="absolute -top-6 -left-6 w-12 h-12 bg-baby-pink rounded-full opacity-70"></div>
          <div className="absolute -bottom-6 -right-6 w-12 h-12 bg-baby-blue rounded-full opacity-70"></div>

<div className="mb-6">
            <Link href="/login" className="inline-flex items-center text-baby-pink hover:underline">
              <ArrowLeft className="w-4 h-4 mr-1" />
              로그인으로 돌아가기
            </Link>
          </div>

<div className="text-center mb-8">
            <Link href="/" className="inline-block">
              <div className="relative w-16 h-16 mx-auto">
                <Image
                  src="/images/baby-logo.png"
                  alt="육시끝 로고"
                  width={64}
                  height={64}
                  className="rounded-full border-4 border-baby-pink"
                />
                <div className="absolute -top-2 -right-2 w-6 h-6 bg-baby-yellow rounded-full border-2 border-white"></div>
              </div>
            </Link>
            <h1 className="font-jua text-2xl text-text-primary mt-4">회원가입</h1>
            <p className="text-text-secondary text-sm mt-2">육시끝에 오신 것을 환영합니다</p>
          </div>

{error && <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-6 text-sm">{error}</div>}
          {success && <div className="bg-green-50 text-green-600 p-3 rounded-lg mb-6 text-sm">{success}</div>}

<form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="name" className="block font-jua text-text-primary mb-2">
                이름
              </label>
              <input
                type="text"
                id="name"
                name="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="input w-full"
                placeholder="이름을 입력하세요"
                required
              />
            </div>

<div>
              <label htmlFor="email" className="block font-jua text-text-primary mb-2">
                이메일
              </label>
              <input
                type="email"
                id="email"
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="input w-full"
                placeholder="이메일 주소를 입력하세요"
                required
              />
            </div>

<div>
              <label htmlFor="password" className="block font-jua text-text-primary mb-2">
                비밀번호
              </label>
              <div className="relative">
                <input
                  type={showPassword ? "text" : "password"}
                  id="password"
                  name="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="input w-full pr-10"
                  placeholder="비밀번호를 입력하세요"
                  minLength={6}
                  required
                />
                <button
                  type="button"
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-light hover:text-text-secondary"
                  onClick={togglePasswordVisibility}
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
              <p className="text-text-light text-xs mt-1">비밀번호는 최소 6자 이상이어야 합니다</p>
            </div>

<button
              type="submit"
              className="btn btn-primary w-full flex items-center justify-center"
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <svg
                    className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  가입 중...
                </>
              ) : (
                "회원가입"
              )}
            </button>
          </form>

<div className="text-center mt-8">
            <p className="text-text-secondary text-sm">
              이미 계정이 있으신가요?{" "}
              <Link href="/login" className="text-baby-pink font-medium hover:underline">
                로그인
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/loading.tsx" isMerged="true"
export default function ProfileLoading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-pink border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/actions.ts" isQuickEdit="true" isMerged="true"
"use server"

import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export async function signIn(formData: FormData) {
  const supabase = createServerActionClient({ cookies })

const email = formData.get("email") as string
  const password = formData.get("password") as string

const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

if (error) {
    return { error: error.message }
  }

// 리디렉션을 제거하고 성공 상태만 반환
  return { success: true }
}
[V0_FILE]typescriptreact:file="app/diary/daily/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/diary/weekly/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, Calendar, Plus, ChevronLeft, ChevronRight, Camera } from "lucide-react"

export default function WeeklyDiaryPage() {
  const [currentWeek, setCurrentWeek] = useState(new Date())
  const fileInputRef = useRef<HTMLInputElement>(null)
  const router = useRouter()

// 주의 시작일과 종료일 계산
  const getWeekDates = (date: Date) => {
    const day = date.getDay() // 0: 일요일, 1: 월요일, ...
    const diff = date.getDate() - day + (day === 0 ? -6 : 1) // 월요일을 주의 시작으로 설정
    const monday = new Date(date)
    monday.setDate(diff)

const sunday = new Date(monday)
    sunday.setDate(monday.getDate() + 6)

return { monday, sunday }
  }

// 주 포맷팅 함수
  const formatWeek = (date: Date) => {
    const { monday, sunday } = getWeekDates(date)
    return `${monday.toLocaleDateString("ko-KR", { month: "long", day: "numeric" })} - ${sunday.toLocaleDateString("ko-KR", { month: "long", day: "numeric" })}`
  }

// 이전 주로 이동
  const goToPreviousWeek = () => {
    const prevWeek = new Date(currentWeek)
    prevWeek.setDate(prevWeek.getDate() - 7)
    setCurrentWeek(prevWeek)
  }

// 다음 주로 이동
  const goToNextWeek = () => {
    const nextWeek = new Date(currentWeek)
    nextWeek.setDate(nextWeek.getDate() + 7)
    setCurrentWeek(nextWeek)
  }

// 파일 선택 창 열기
  const handleAddPhoto = () => {
    fileInputRef.current?.click()
  }

// 파일 선택 시 처리
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      // 실제 구현에서는 여기서 파일 업로드 처리
      alert(`"${file.name}" 파일이 선택되었습니다. 실제 구현에서는 이 파일을 서버에 업로드합니다.`)
    }
  }

// 새 성장 기록 작성 페이지로 이동
  const handleAddGrowthRecord = () => {
    // 실제 페이지로 이동
    router.push("/diary/weekly/new")
  }

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const weeklyGrowth = {
    weight: "8.5kg",
    height: "72cm",
    milestones: ["첫 걸음마", "새로운 단어 5개 습득"],
    notes:
      "이번 주에는 걷기 연습을 많이 했어요. 처음에는 불안정했지만 점점 자신감이 생기는 것 같아요. 또한 '엄마', '아빠', '맘마', '물', '까까' 등의 단어를 말하기 시작했어요.",
    images: [
      "https://cdn.pixabay.com/photo/2016/11/19/14/28/bed-1839564_1280.jpg",
      "https://cdn.pixabay.com/photo/2017/06/18/18/39/baby-2416718_1280.jpg",
    ],
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/diary" className="inline-flex items-center text-baby-blue hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            육아일기로 돌아가기
          </Link>
        </div>

{/* 주 네비게이션 */}
          <div className="flex items-center justify-between mb-8">
            <button
              onClick={goToPreviousWeek}
              className="p-2 rounded-full hover:bg-baby-blue/10 text-baby-blue"
              aria-label="이전 주"
            >
              <ChevronLeft size={24} />
            </button>
            <div className="text-center">
              <h2 className="font-jua text-xl text-text-primary flex items-center justify-center">
                <Calendar className="mr-2 text-baby-blue" size={20} />
                {formatWeek(currentWeek)}
              </h2>
            </div>
            <button
              onClick={goToNextWeek}
              className="p-2 rounded-full hover:bg-baby-blue/10 text-baby-blue"
              aria-label="다음 주"
            >
              <ChevronRight size={24} />
            </button>
          </div>

{/* 주간 성장 기록 */}
          {weeklyGrowth ? (
            <div className="space-y-8">
              {/* 신체 측정 */}
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-baby-blue/10 rounded-xl p-4 text-center">
                  <h3 className="font-jua text-lg text-text-primary mb-2">몸무게</h3>
                  <p className="text-2xl font-bold text-baby-blue">{weeklyGrowth.weight}</p>
                </div>
                <div className="bg-baby-blue/10 rounded-xl p-4 text-center">
                  <h3 className="font-jua text-lg text-text-primary mb-2">키</h3>
                  <p className="text-2xl font-bold text-baby-blue">{weeklyGrowth.height}</p>
                </div>
              </div>

{/* 주요 발달 사항 */}
              <div className="bg-white rounded-xl border border-baby-blue/20 p-6">
                <h3 className="font-jua text-xl text-text-primary mb-4">이번 주 주요 발달 사항</h3>
                <ul className="list-disc pl-5 mb-4 space-y-2">
                  {weeklyGrowth.milestones.map((milestone, index) => (
                    <li key={index} className="text-text-secondary">
                      {milestone}
                    </li>
                  ))}
                </ul>
                <p className="text-text-secondary whitespace-pre-line">{weeklyGrowth.notes}</p>
              </div>

{/* 주간 사진 */}
              <div>
                <h3 className="font-jua text-xl text-text-primary mb-4">주간 사진</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {weeklyGrowth.images.map((image, index) => (
                    <div key={index} className="rounded-lg overflow-hidden shadow-md">
                      <Image
                        src={image || "/placeholder.svg"}
                        alt={`주간 성장 사진 ${index + 1}`}
                        width={400}
                        height={300}
                        className="w-full h-64 object-cover"
                        unoptimized
                        onError={(e) => {
                          const target = e.target as HTMLImageElement
                          target.src = `/placeholder.svg?height=300&width=400&text=성장사진${index + 1}`
                        }}
                      />
                    </div>
                  ))}
                  <input
                    type="file"
                    ref={fileInputRef}
                    className="hidden"
                    accept="image/*"
                    onChange={handleFileChange}
                  />
                  <button
                    onClick={handleAddPhoto}
                    className="border-2 border-dashed border-baby-blue/30 rounded-lg p-8 flex flex-col items-center justify-center text-baby-blue hover:bg-baby-blue/5 transition-colors"
                  >
                    <Camera size={32} className="mb-2" />
                    <span className="font-jua">사진 추가하기</span>
                  </button>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-12 bg-gray-50 rounded-lg">
              <p className="font-jua text-text-secondary mb-2">이 주의 성장 기록이 없습니다</p>
              <p className="text-text-light text-sm mb-4">새로운 성장 기록을 작성해보세요</p>
              <button className="inline-flex items-center bg-baby-blue text-white px-4 py-2 rounded-lg hover:bg-baby-blue/90 transition-colors">
                <Plus size={16} className="mr-1" />
                성장 기록 작성하기
              </button>
            </div>
          )}
        </div>

{/* 하단 버튼 */}
        <div className="flex justify-center">
          <button
            onClick={handleAddGrowthRecord}
            className="bg-baby-blue text-white px-6 py-3 rounded-full hover:bg-baby-blue/90 transition-colors flex items-center shadow-md"
          >
            <Plus size={18} className="mr-2" />
            이번 주 성장 기록하기
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/weekly/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function NewWeeklyGrowthPage() {
  const router = useRouter()
  const [weight, setWeight] = useState("")
  const [height, setHeight] = useState("")
  const [milestones, setMilestones] = useState("")
  const [notes, setNotes] = useState("")
  const [date, setDate] = useState(new Date().toISOString().split("T")[0])
  const [selectedImages, setSelectedImages] = useState<string[]>([])
  const [saving, setSaving] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const sunday = new Date(monday)
    sunday.setDate(monday.getDate() + 6)

return { monday, sunday }
  }

// 주 포맷팅 함수
  const formatWeek = (date: Date) => {
    const { monday, sunday } = getWeekDates(new Date(date))
    return `${monday.toLocaleDateString("ko-KR", { month: "long", day: "numeric" })} - ${sunday.toLocaleDateString("ko-KR", { month: "long", day: "numeric" })}`
  }

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      const newImages: string[] = [...selectedImages]

Array.from(files).forEach((file) => {
        const reader = new FileReader()
        reader.onload = () => {
          if (reader.result) {
            newImages.push(reader.result as string)
            setSelectedImages([...newImages])
          }
        }
        reader.readAsDataURL(file)
      })
    }
  }

const removeImage = (index: number) => {
    const newImages = [...selectedImages]
    newImages.splice(index, 1)
    setSelectedImages(newImages)
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)

// 실제 구현에서는 여기서 API 호출을 통해 데이터를 저장합니다.
    // 현재는 저장 시뮬레이션만 구현합니다.
    setTimeout(() => {
      setSaving(false)
      alert("성장 기록이 성공적으로 저장되었습니다!")
      router.push("/diary/weekly")
    }, 1500)
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/diary/weekly" className="inline-flex items-center text-baby-blue hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            주간 성장 기록으로 돌아가기
          </Link>
        </div>

<div className="mb-6 text-center">
            <h2 className="font-jua text-xl text-baby-blue flex items-center justify-center">
              <Calendar className="mr-2" size={20} />
              {formatWeek(new Date(date))}
            </h2>
          </div>

<form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="date" className="block font-jua text-text-primary mb-2">
                날짜 선택
              </label>
              <div className="relative">
                <input
                  type="date"
                  id="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  className="input w-full pl-10"
                  required
                />
                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-blue w-5 h-5" />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="weight" className="block font-jua text-text-primary mb-2">
                  몸무게 (kg)
                </label>
                <input
                  type="text"
                  id="weight"
                  value={weight}
                  onChange={(e) => setWeight(e.target.value)}
                  className="input w-full"
                  placeholder="예: 8.5"
                  required
                />
              </div>

<div>
                <label htmlFor="height" className="block font-jua text-text-primary mb-2">
                  키 (cm)
                </label>
                <input
                  type="text"
                  id="height"
                  value={height}
                  onChange={(e) => setHeight(e.target.value)}
                  className="input w-full"
                  placeholder="예: 72"
                  required
                />
              </div>
            </div>

<div>
              <label htmlFor="milestones" className="block font-jua text-text-primary mb-2">
                주요 발달 사항
              </label>
              <textarea
                id="milestones"
                value={milestones}
                onChange={(e) => setMilestones(e.target.value)}
                className="input w-full min-h-[100px] resize-y"
                placeholder="이번 주 아이의 주요 발달 사항을 입력하세요. 쉼표(,)로 구분하여 여러 항목을 입력할 수 있습니다."
                required
              />
              <p className="text-text-light text-xs mt-1">예: 첫 걸음마, 새로운 단어 습득, 이유식 시작</p>
            </div>

<div>
              <label htmlFor="notes" className="block font-jua text-text-primary mb-2">
                상세 내용
              </label>
              <textarea
                id="notes"
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                className="input w-full min-h-[150px] resize-y"
                placeholder="이번 주 아이의 성장과 발달에 대한 상세한 내용을 기록하세요..."
                required
              />
            </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                {selectedImages.map((image, index) => (
                  <div key={index} className="relative">
                    <Image
                      src={image || "/placeholder.svg"}
                      alt={`선택한 이미지 ${index + 1}`}
                      width={400}
                      height={300}
                      className="w-full h-48 object-cover rounded-lg border border-gray-200"
                    />
                    <button
                      type="button"
                      onClick={() => removeImage(index)}
                      className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
                    >
                      <X size={16} className="text-text-secondary" />
                    </button>
                  </div>
                ))}
              </div>

<button
                type="button"
                onClick={triggerFileInput}
                className="w-full border-2 border-dashed border-baby-blue/30 rounded-lg p-8 text-center hover:border-baby-blue hover:bg-baby-blue/5 transition-colors"
              >
                <ImageIcon className="mx-auto h-12 w-12 text-baby-blue mb-2" />
                <p className="font-jua text-text-primary">클릭하여 이미지 선택</p>
                <p className="text-text-secondary text-sm mt-1">아이의 성장 사진을 추가하세요</p>
              </button>
            </div>

<div className="pt-4">
              <button
                type="submit"
                disabled={saving}
                className="btn w-full bg-baby-blue text-white hover:bg-baby-blue/90 flex items-center justify-center"
              >
                {saving ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    저장 중...
                  </>
                ) : (
                  <>
                    <Save size={16} className="mr-2" /> 성장 기록 저장하기
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/weekly/new/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-blue border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/monthly/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function MonthlyDiaryPage() {
  const [currentMonth, setCurrentMonth] = useState(new Date())
  const fileInputRef = useRef<HTMLInputElement>(null)
  const router = useRouter()

// 월 포맷팅 함수
  const formatMonth = (date: Date) => {
    return date.toLocaleDateString("ko-KR", { year: "numeric", month: "long" })
  }

// 이전 월로 이동
  const goToPreviousMonth = () => {
    const prevMonth = new Date(currentMonth)
    prevMonth.setMonth(prevMonth.getMonth() - 1)
    setCurrentMonth(prevMonth)
  }

// 다음 월로 이동
  const goToNextMonth = () => {
    const nextMonth = new Date(currentMonth)
    nextMonth.setMonth(nextMonth.getMonth() + 1)
    setCurrentMonth(nextMonth)
  }

// 파일 선택 창 열기
  const handleAddPhoto = () => {
    fileInputRef.current?.click()
  }

// 새 앨범 만들기 페이지로 이동
  const handleCreateAlbum = () => {
    router.push("/diary/monthly/new")
  }

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const monthlyAlbum = {
    title: "우리 아이의 7월 성장 앨범",
    description:
      "7월에는 첫 걸음마와 첫 단어 등 많은 발전이 있었어요. 특히 걷기 시작하면서 집안 곳곳을 탐험하는 모습이 너무 귀여웠답니다.",
    photos: [
      {
        id: 1,
        url: "https://picsum.photos/id/237/400/300",
        caption: "첫 걸음마를 뗐어요",
        date: "2023-07-05",
      },
      {
        id: 2,
        url: "https://picsum.photos/id/177/400/300",
        caption: "장난감과 놀아요",
        date: "2023-07-12",
      },
      {
        id: 3,
        url: "https://picsum.photos/id/180/400/300",
        caption: "낮잠 자는 모습",
        date: "2023-07-18",
      },
      {
        id: 4,
        url: "https://picsum.photos/id/65/400/300",
        caption: "웃는 모습이 너무 예뻐요",
        date: "2023-07-25",
      },
    ],
    milestones: ["첫 걸음마", "첫 단어: 엄마", "이유식 시작"],
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/diary" className="inline-flex items-center text-baby-mint hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            육아일기로 돌아가기
          </Link>
        </div>

{/* 월 네비게이션 */}
          <div className="flex items-center justify-between mb-8">
            <button
              onClick={goToPreviousMonth}
              className="p-2 rounded-full hover:bg-baby-mint/10 text-baby-mint"
              aria-label="이전 월"
            >
              <ChevronLeft size={24} />
            </button>
            <div className="text-center">
              <h2 className="font-jua text-xl text-text-primary flex items-center justify-center">
                <Calendar className="mr-2 text-baby-mint" size={20} />
                {formatMonth(currentMonth)}
              </h2>
            </div>
            <button
              onClick={goToNextMonth}
              className="p-2 rounded-full hover:bg-baby-mint/10 text-baby-mint"
              aria-label="다음 월"
            >
              <ChevronRight size={24} />
            </button>
          </div>

{/* 월별 앨범 */}
          {monthlyAlbum ? (
            <div className="space-y-8">
              {/* 앨범 헤더 */}
              <div className="text-center">
                <h3 className="font-jua text-2xl text-text-primary mb-2">{monthlyAlbum.title}</h3>
                <p className="text-text-secondary">{monthlyAlbum.description}</p>
              </div>

{/* 주요 발달 사항 */}
              <div className="bg-baby-mint/10 rounded-xl p-6">
                <h3 className="font-jua text-xl text-text-primary mb-4">이번 달 주요 발달 사항</h3>
                <ul className="list-disc pl-5 space-y-2">
                  {monthlyAlbum.milestones.map((milestone, index) => (
                    <li key={index} className="text-text-secondary">
                      {milestone}
                    </li>
                  ))}
                </ul>
              </div>

{/* 사진 갤러리 */}
              <div>
                <div className="flex justify-between items-center mb-4">
                  <h3 className="font-jua text-xl text-text-primary">사진 갤러리</h3>
                  <div className="flex space-x-2">
                    <button className="text-baby-mint hover:text-baby-mint/80 transition-colors flex items-center">
                      <Download size={16} className="mr-1" />
                      <span className="text-sm">앨범 다운로드</span>
                    </button>
                    <button className="text-baby-mint hover:text-baby-mint/80 transition-colors flex items-center">
                      <Share2 size={16} className="mr-1" />
                      <span className="text-sm">공유하기</span>
                    </button>
                  </div>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                  {monthlyAlbum.photos.map((photo) => (
                    <div key={photo.id} className="rounded-lg overflow-hidden shadow-md group relative">
                      <Image
                        src={photo.url || "/placeholder.svg"}
                        alt={photo.caption}
                        width={400}
                        height={300}
                        className="w-full h-64 object-cover transition-transform group-hover:scale-105"
                        unoptimized
                        onError={(e) => {
                          // 이미지 로드 실패 시 placeholder로 대체
                          const target = e.target as HTMLImageElement
                          target.src = `/placeholder.svg?height=300&width=400&text=${encodeURIComponent(photo.caption)}`
                        }}
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
                        <p className="text-white font-medium">{photo.caption}</p>
                        <p className="text-white/80 text-sm">{new Date(photo.date).toLocaleDateString("ko-KR")}</p>
                      </div>
                    </div>
                  ))}
                  <input
                    type="file"
                    ref={fileInputRef}
                    className="hidden"
                    accept="image/*"
                    onChange={handleFileChange}
                  />
                  <button
                    onClick={handleAddPhoto}
                    className="border-2 border-dashed border-baby-mint/30 rounded-lg p-8 flex flex-col items-center justify-center text-baby-mint hover:bg-baby-mint/5 transition-colors h-64"
                  >
                    <Plus size={32} className="mb-2" />
                    <span className="font-jua">사진 추가하기</span>
                  </button>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-12 bg-gray-50 rounded-lg">
              <p className="font-jua text-text-secondary mb-2">이 달의 앨범이 없습니다</p>
              <p className="text-text-light text-sm mb-4">새로운 월별 앨범을 만들어보세요</p>
              <button
                onClick={handleCreateAlbum}
                className="inline-flex items-center bg-baby-mint text-white px-4 py-2 rounded-lg hover:bg-baby-mint/90 transition-colors"
              >
                <Plus size={16} className="mr-1" />
                월별 앨범 만들기
              </button>
            </div>
          )}
        </div>

{/* 하단 버튼 */}
        <div className="flex justify-center">
          <button
            onClick={handleCreateAlbum}
            className="bg-baby-mint text-white px-6 py-3 rounded-full hover:bg-baby-mint/90 transition-colors flex items-center shadow-md"
          >
            <Plus size={18} className="mr-2" />
            이번 달 앨범 만들기
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/monthly/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function NewMonthlyAlbumPage() {
  const router = useRouter()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [milestones, setMilestones] = useState("")
  const [date, setDate] = useState(new Date().toISOString().split("T")[0])
  const [photos, setPhotos] = useState<
    {
      id: number
      file: string
      caption: string
      date: string
    }[]
  >([])
  const [saving, setSaving] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

// 월 포맷팅 함수
  const formatMonth = (date: Date) => {
    return date.toLocaleDateString("ko-KR", { year: "numeric", month: "long" })
  }

const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      Array.from(files).forEach((file) => {
        const reader = new FileReader()
        reader.onload = () => {
          if (reader.result) {
            const newPhoto = {
              id: Date.now() + Math.floor(Math.random() * 1000),
              file: reader.result as string,
              caption: "",
              date: new Date().toISOString().split("T")[0],
            }
            setPhotos((prev) => [...prev, newPhoto])
          }
        }
        reader.readAsDataURL(file)
      })
    }
  }

const removePhoto = (id: number) => {
    setPhotos(photos.filter((photo) => photo.id !== id))
  }

const updatePhotoCaption = (id: number, caption: string) => {
    setPhotos(photos.map((photo) => (photo.id === id ? { ...photo, caption } : photo)))
  }

const updatePhotoDate = (id: number, date: string) => {
    setPhotos(photos.map((photo) => (photo.id === id ? { ...photo, date } : photo)))
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)

// 실제 구현에서는 여기서 API 호출을 통해 데이터를 저장합니다.
    // 현재는 저장 시뮬레이션만 구현합니다.
    setTimeout(() => {
      setSaving(false)
      alert("월별 앨범이 성공적으로 저장되었습니다!")
      router.push("/diary/monthly")
    }, 1500)
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/diary/monthly" className="inline-flex items-center text-baby-mint hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            월별 앨범으로 돌아가기
          </Link>
        </div>

<div className="mb-6 text-center">
            <h2 className="font-jua text-xl text-baby-mint flex items-center justify-center">
              <Calendar className="mr-2" size={20} />
              {formatMonth(new Date(date))}
            </h2>
          </div>

<form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="date" className="block font-jua text-text-primary mb-2">
                월 선택
              </label>
              <div className="relative">
                <input
                  type="month"
                  id="date"
                  value={date.substring(0, 7)}
                  onChange={(e) => setDate(`${e.target.value}-01`)}
                  className="input w-full pl-10"
                  required
                />
                <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-mint w-5 h-5" />
              </div>
            </div>

<div>
              <label htmlFor="title" className="block font-jua text-text-primary mb-2">
                앨범 제목
              </label>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="input w-full"
                placeholder="예: 우리 아이의 7월 성장 앨범"
                required
              />
            </div>

<div>
              <label htmlFor="description" className="block font-jua text-text-primary mb-2">
                앨범 설명
              </label>
              <textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="input w-full min-h-[100px] resize-y"
                placeholder="이번 달 아이의 성장에 대한 전반적인 설명을 입력하세요..."
                required
              />
            </div>

<div>
              <label htmlFor="milestones" className="block font-jua text-text-primary mb-2">
                주요 발달 사항
              </label>
              <textarea
                id="milestones"
                value={milestones}
                onChange={(e) => setMilestones(e.target.value)}
                className="input w-full min-h-[100px] resize-y"
                placeholder="이번 달 아이의 주요 발달 사항을 입력하세요. 쉼표(,)로 구분하여 여러 항목을 입력할 수 있습니다."
                required
              />
              <p className="text-text-light text-xs mt-1">예: 첫 걸음마, 첫 단어: 엄마, 이유식 시작</p>
            </div>

{photos.length > 0 && (
                <div className="space-y-6 mb-6">
                  <h3 className="font-jua text-lg text-text-primary">추가된 사진</h3>
                  {photos.map((photo) => (
                    <div key={photo.id} className="border border-gray-200 rounded-lg p-4">
                      <div className="flex flex-col md:flex-row gap-4">
                        <div className="md:w-1/3">
                          <div className="relative rounded-lg overflow-hidden">
                            <Image
                              src={photo.file || "/placeholder.svg"}
                              alt="앨범 사진"
                              width={300}
                              height={200}
                              className="w-full h-48 object-cover"
                            />
                            <button
                              type="button"
                              onClick={() => removePhoto(photo.id)}
                              className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
                            >
                              <X size={16} className="text-text-secondary" />
                            </button>
                          </div>
                        </div>
                        <div className="md:w-2/3 space-y-4">
                          <div>
                            <label className="block text-sm font-medium text-text-secondary mb-1">사진 설명</label>
                            <input
                              type="text"
                              value={photo.caption}
                              onChange={(e) => updatePhotoCaption(photo.id, e.target.value)}
                              className="input w-full"
                              placeholder="사진에 대한 설명을 입력하세요"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-text-secondary mb-1">촬영 날짜</label>
                            <input
                              type="date"
                              value={photo.date}
                              onChange={(e) => updatePhotoDate(photo.id, e.target.value)}
                              className="input w-full"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}

<button
                type="button"
                onClick={triggerFileInput}
                className="w-full border-2 border-dashed border-baby-mint/30 rounded-lg p-8 text-center hover:border-baby-mint hover:bg-baby-mint/5 transition-colors"
              >
                <ImageIcon className="mx-auto h-12 w-12 text-baby-mint mb-2" />
                <p className="font-jua text-text-primary">클릭하여 사진 추가</p>
                <p className="text-text-secondary text-sm mt-1">아이의 성장 사진을 추가하세요</p>
              </button>
            </div>

<div className="pt-4">
              <button
                type="submit"
                disabled={saving}
                className="btn w-full bg-baby-mint text-white hover:bg-baby-mint/90 flex items-center justify-center"
              >
                {saving ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    저장 중...
                  </>
                ) : (
                  <>
                    <Save size={16} className="mr-2" /> 앨범 저장하기
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/monthly/new/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-mint border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/yearly/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function NewYearlyEventPage() {
  const router = useRouter()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [month, setMonth] = useState("1")
  const [date, setDate] = useState(new Date().toISOString().split("T")[0])
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const months = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]

const removeImage = () => {
    setSelectedImage(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)

// 실제 구현에서는 여기서 API 호출을 통해 데이터를 저장합니다.
    // 현재는 저장 시뮬레이션만 구현합니다.
    setTimeout(() => {
      setSaving(false)
      alert("성장 이벤트가 성공적으로 저장되었습니다!")
      router.push("/diary/yearly")
    }, 1500)
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/diary/yearly" className="inline-flex items-center text-baby-lavender hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            연도별 타임라인으로 돌아가기
          </Link>
        </div>

<form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="date" className="block font-jua text-text-primary mb-2">
                  날짜
                </label>
                <div className="relative">
                  <input
                    type="date"
                    id="date"
                    value={date}
                    onChange={(e) => setDate(e.target.value)}
                    className="input w-full pl-10"
                    required
                  />
                  <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-lavender w-5 h-5" />
                </div>
              </div>

<div>
                <label htmlFor="month" className="block font-jua text-text-primary mb-2">
                  표시할 월
                </label>
                <select
                  id="month"
                  value={month}
                  onChange={(e) => setMonth(e.target.value)}
                  className="input w-full"
                  required
                >
                  {months.map((m) => (
                    <option key={m} value={m}>
                      {m}월
                    </option>
                  ))}
                </select>
                <p className="text-text-light text-xs mt-1">타임라인에 표시될 월을 선택하세요</p>
              </div>
            </div>

<div>
              <label htmlFor="title" className="block font-jua text-text-primary mb-2">
                이벤트 제목
              </label>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="input w-full"
                placeholder="예: 첫 번째 단어, 첫 걸음마, 첫 생일 등"
                required
              />
            </div>

<div>
              <label htmlFor="description" className="block font-jua text-text-primary mb-2">
                이벤트 설명
              </label>
              <textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="input w-full min-h-[150px] resize-y"
                placeholder="이 성장 이벤트에 대한 자세한 설명을 입력하세요..."
                required
              />
            </div>

{selectedImage ? (
                <div className="relative mt-2">
                  <Image
                    src={selectedImage || "/placeholder.svg"}
                    alt="선택한 이미지"
                    width={400}
                    height={300}
                    className="w-full h-auto max-h-[300px] object-contain rounded-lg border border-gray-200"
                  />
                  <button
                    type="button"
                    onClick={removeImage}
                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
                  >
                    <X size={16} className="text-text-secondary" />
                  </button>
                </div>
              ) : (
                <button
                  type="button"
                  onClick={triggerFileInput}
                  className="w-full border-2 border-dashed border-baby-lavender/30 rounded-lg p-8 text-center hover:border-baby-lavender hover:bg-baby-lavender/5 transition-colors"
                >
                  <ImageIcon className="mx-auto h-12 w-12 text-baby-lavender mb-2" />
                  <p className="font-jua text-text-primary">클릭하여 이미지 선택</p>
                  <p className="text-text-secondary text-sm mt-1">아이의 성장 순간을 사진으로 남겨보세요</p>
                </button>
              )}
            </div>

<div className="pt-4">
              <button
                type="submit"
                disabled={saving}
                className="btn w-full bg-baby-lavender text-white hover:bg-baby-lavender/90 flex items-center justify-center"
              >
                {saving ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    저장 중...
                  </>
                ) : (
                  <>
                    <Save size={16} className="mr-2" /> 이벤트 저장하기
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/yearly/new/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-lavender border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/yearly/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

export default function YearlyDiaryPage() {
  const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
  const router = useRouter()
  const printRef = useRef<HTMLDivElement>(null)

// 이전 연도로 이동
  const goToPreviousYear = () => {
    setCurrentYear(currentYear - 1)
  }

// 다음 연도로 이동
  const goToNextYear = () => {
    setCurrentYear(currentYear + 1)
  }

// 타임라인 다운로드 함수
  const handleDownloadTimeline = () => {
    if (!printRef.current) return

// HTML 내용을 문자열로 변환
    const content = printRef.current.innerHTML

// HTML 문서 생성
    const html = `
      <html>
        <head>
          <title>${currentYear}년 성장 타임라인</title>
          <style>
            body { font-family: Arial, sans-serif; padding: 20px; }
            .timeline-item { margin-bottom: 30px; border-left: 2px solid #e0d6ff; padding-left: 20px; position: relative; }
            .timeline-item::before { content: ''; width: 12px; height: 12px; background-color: #e0d6ff; border-radius: 50%; position: absolute; left: -7px; }
            .event-card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; }
            .event-header { background-color: #e0d6ff; color: white; padding: 8px 12px; font-weight: bold; }
            .event-body { padding: 12px; }
            .event-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
            .event-desc { font-size: 14px; color: #666; margin-bottom: 8px; }
            .event-date { font-size: 12px; color: #999; }
          </style>
        </head>
        <body>
          <h1>${currentYear}년 성장 타임라인</h1>
          <div class="timeline">
            ${content}
          </div>
        </body>
      </html>
    `

// Blob 생성
    const blob = new Blob([html], { type: "text/html" })

// 다운로드 링크 생성 및 클릭
    const a = document.createElement("a")
    a.href = URL.createObjectURL(blob)
    a.download = `${currentYear}년_성장_타임라인.html`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }

// 타임라인 인쇄 함수
  const handlePrintTimeline = () => {
    window.print()
  }

// 새 이벤트 추가 페이지로 이동
  const handleAddEvent = () => {
    router.push("/diary/yearly/new")
  }

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const yearlyTimeline = [
    {
      id: 1,
      month: "1월",
      title: "첫 번째 이유식",
      description: "쌀미음으로 첫 이유식을 시작했어요. 처음에는 낯설어했지만 금방 적응했답니다.",
      image: "https://cdn.pixabay.com/photo/2017/06/18/18/39/baby-2416718_1280.jpg",
      date: "2023-01-15",
    },
    {
      id: 2,
      month: "3월",
      title: "첫 번째 단어: 엄마",
      description: "드디어 첫 단어를 말했어요! '엄마'라고 부르는 순간 너무 감동적이었습니다.",
      image: "https://cdn.pixabay.com/photo/2016/01/20/11/11/baby-1151351_1280.jpg",
      date: "2023-03-10",
    },
    {
      id: 3,
      month: "6월",
      title: "첫 번째 생일",
      description: "첫 번째 생일을 맞이했어요. 가족들과 함께 특별한 시간을 보냈습니다.",
      image: "https://cdn.pixabay.com/photo/2016/11/19/14/28/bed-1839564_1280.jpg",
      date: "2023-06-20",
    },
  ]

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/diary" className="inline-flex items-center text-baby-lavender hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            육아일기로 돌아가기
          </Link>
        </div>

{/* 연도 네비게이션 */}
          <div className="flex items-center justify-between mb-8">
            <button
              onClick={goToPreviousYear}
              className="p-2 rounded-full hover:bg-baby-lavender/10 text-baby-lavender"
              aria-label="이전 연도"
            >
              <ChevronLeft size={24} />
            </button>
            <div className="text-center">
              <h2 className="font-jua text-xl text-text-primary flex items-center justify-center">
                <Calendar className="mr-2 text-baby-lavender" size={20} />
                {currentYear}년
              </h2>
            </div>
            <button
              onClick={goToNextYear}
              className="p-2 rounded-full hover:bg-baby-lavender/10 text-baby-lavender"
              aria-label="다음 연도"
            >
              <ChevronRight size={24} />
            </button>
          </div>

{/* 연도별 타임라인 */}
          {yearlyTimeline.length > 0 ? (
            <div className="space-y-4">
              <div className="flex justify-end space-x-2 mb-6">
                <button
                  onClick={handleDownloadTimeline}
                  className="text-baby-lavender hover:text-baby-lavender/80 transition-colors flex items-center"
                >
                  <Download size={16} className="mr-1" />
                  <span className="text-sm">타임라인 다운로드</span>
                </button>
                <button
                  onClick={handlePrintTimeline}
                  className="text-baby-lavender hover:text-baby-lavender/80 transition-colors flex items-center"
                >
                  <Printer size={16} className="mr-1" />
                  <span className="text-sm">인쇄하기</span>
                </button>
              </div>

<div ref={printRef} className="relative border-l-2 border-baby-lavender/30 pl-8 ml-4">
                {yearlyTimeline.map((event, index) => (
                  <div key={event.id} className="mb-12 relative">
                    <div className="absolute -left-10 w-6 h-6 bg-baby-lavender rounded-full flex items-center justify-center">
                      <div className="w-3 h-3 bg-white rounded-full"></div>
                    </div>
                    <div className="bg-white rounded-xl shadow-md overflow-hidden">
                      <div className="relative h-48">
                        <Image
                          src={event.image || "/placeholder.svg"}
                          alt={event.title}
                          fill
                          className="object-cover"
                          unoptimized
                          onError={(e) => {
                            // 이미지 로드 실패 시 placeholder로 대체
                            const target = e.target as HTMLImageElement
                            target.src = `/placeholder.svg?height=300&width=400&text=${encodeURIComponent(event.title)}`
                          }}
                        />
                        <div className="absolute top-2 left-2 bg-baby-lavender text-white px-3 py-1 rounded-full text-sm">
                          {event.month}
                        </div>
                      </div>
                      <div className="p-4">
                        <h3 className="font-jua text-lg text-text-primary mb-2">{event.title}</h3>
                        <p className="text-text-secondary text-sm mb-2">{event.description}</p>
                        <p className="text-text-light text-xs">{new Date(event.date).toLocaleDateString("ko-KR")}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="text-center py-12 bg-gray-50 rounded-lg">
              <p className="font-jua text-text-secondary mb-2">이 연도의 타임라인이 없습니다</p>
              <p className="text-text-light text-sm mb-4">새로운 연도별 타임라인을 만들어보세요</p>
              <button
                onClick={handleAddEvent}
                className="inline-flex items-center bg-baby-lavender text-white px-4 py-2 rounded-lg hover:bg-baby-lavender/90 transition-colors"
              >
                <Plus size={16} className="mr-1" />
                연도별 타임라인 만들기
              </button>
            </div>
          )}
        </div>

{/* 하단 버튼 */}
        <div className="flex justify-center">
          <button
            onClick={handleAddEvent}
            className="bg-baby-lavender text-white px-6 py-3 rounded-full hover:bg-baby-lavender/90 transition-colors flex items-center shadow-md"
          >
            <Plus size={18} className="mr-2" />
            새로운 성장 이벤트 추가하기
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.js" isQuickEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontSize: {
        xs: ["0.85rem", { lineHeight: "1.4" }],
        sm: ["0.95rem", { lineHeight: "1.5" }],
        base: ["1rem", { lineHeight: "1.6" }],
        lg: ["1.125rem", { lineHeight: "1.6" }],
        xl: ["1.25rem", { lineHeight: "1.5" }],
        "2xl": ["1.5rem", { lineHeight: "1.4" }],
        "3xl": ["1.875rem", { lineHeight: "1.3" }],
        "4xl": ["2.25rem", { lineHeight: "1.2" }],
        "5xl": ["3rem", { lineHeight: "1.1" }],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        "baby-pink": "var(--baby-pink)",
        "baby-blue": "var(--baby-blue)",
        "baby-mint": "var(--baby-mint)",
        "baby-lavender": "var(--baby-lavender)",
        "baby-yellow": "var(--baby-yellow)",
        "baby-bg": "var(--baby-bg)",
        "text-primary": "var(--text-primary)",
        "text-secondary": "var(--text-secondary)",
        "text-light": "var(--text-light)",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        sm: "var(--radius-sm)",
        md: "var(--radius-md)",
        lg: "var(--radius-lg)",
        full: "var(--radius-full)",
      },
      boxShadow: {
        sm: "var(--shadow-sm)",
        md: "var(--shadow-md)",
        lg: "var(--shadow-lg)",
      },
      fontFamily: {
        jua: ["var(--font-jua)"],
        gaegu: ["var(--font-gaegu)"],
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"
import type { User } from "@supabase/auth-helpers-nextjs"
import { ArrowLeft, UserIcon, Mail, Key, Save, Edit, Camera, LogOut } from "lucide-react"
import Image from "next/image"

export default function ProfilePage() {
  const router = useRouter()
  const supabase = createClientComponentClient()
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [editMode, setEditMode] = useState(false)
  const [name, setName] = useState("")
  const [saving, setSaving] = useState(false)
  const [activeTab, setActiveTab] = useState<"profile" | "security" | "preferences">("profile")
  const [theme, setTheme] = useState<"pink" | "blue" | "mint">("pink")
  const [profileImage, setProfileImage] = useState<string | null>(null)
  const [imageFile, setImageFile] = useState<File | null>(null)

useEffect(() => {
    const checkUser = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession()

if (!session) {
        router.push("/login")
        return
      }

setUser(session.user)

// 사용자 프로필 정보 가져오기
      const { data: profile } = await supabase.from("profiles").select("*").eq("id", session.user.id).single()

if (profile) {
        setName(profile.name || session.user.email?.split("@")[0] || "")
        // 프로필 이미지 가져오기
        if (profile?.avatar_url) {
          setProfileImage(profile.avatar_url)
        }
      } else {
        setName(session.user.email?.split("@")[0] || "")
      }

console.log("사용자 정보:", session.user)
      setLoading(false)
    }

checkUser()
  }, [router, supabase])

const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        if (event.target?.result) {
          setProfileImage(event.target.result as string)
          setImageFile(file)
        }
      }
      reader.readAsDataURL(file)
    }
  }

const saveProfileImage = async () => {
    if (!user || !imageFile) return

setSaving(true)

try {
      // 파일 이름 생성 (고유 ID + 원래 확장자)
      const fileExt = imageFile.name.split(".").pop()
      const fileName = `${user.id}.${fileExt}`
      const filePath = `avatars/${fileName}`

// Storage에 이미지 업로드
      const { error: uploadError } = await supabase.storage.from("profiles").upload(filePath, imageFile, {
        upsert: true,
      })

if (uploadError) {
        throw uploadError
      }

// 이미지 URL 가져오기
      const { data } = supabase.storage.from("profiles").getPublicUrl(filePath)

const avatarUrl = data.publicUrl

// 프로필 정보 업데이트
      const { error: updateError } = await supabase.from("profiles").upsert({
        id: user.id,
        avatar_url: avatarUrl,
        updated_at: new Date().toISOString(),
      })

if (updateError) {
        throw updateError
      }
    } catch (error) {
      console.error("프로필 이미지 업로드 오류:", error)
      alert("이미지 업로드 중 오류가 발생했습니다.")
    } finally {
      setSaving(false)
    }
  }

const handleSaveProfile = async () => {
    if (!user) return

setSaving(true)

// 프로필 정보 업데이트
    const { error } = await supabase.from("profiles").upsert({
      id: user.id,
      name,
      updated_at: new Date().toISOString(),
    })

if (error) {
      console.error("프로필 업데이트 오류:", error)
      alert("프로필 저장 중 오류가 발생했습니다.")
    } else {
      // 이미지가 변경되었다면 이미지도 저장
      if (imageFile) {
        await saveProfileImage()
      }
      setEditMode(false)
    }

setSaving(false)
  }

const handleLogout = async () => {
    await supabase.auth.signOut()
    router.push("/")
  }

// 테마 변경 효과
  useEffect(() => {
    // 실제 테마 적용 로직
    document.documentElement.setAttribute("data-theme", theme)

// 테마 색상 변수 적용
    const root = document.documentElement
    if (theme === "pink") {
      root.style.setProperty("--primary-theme-color", "var(--baby-pink)")
    } else if (theme === "blue") {
      root.style.setProperty("--primary-theme-color", "var(--baby-blue)")
    } else if (theme === "mint") {
      root.style.setProperty("--primary-theme-color", "var(--baby-mint)")
    }

// localStorage에 테마 저장
    localStorage.setItem("userTheme", theme)
  }, [theme])

// 페이지 로드 시 저장된 테마 불러오기
  useEffect(() => {
    const savedTheme = localStorage.getItem("userTheme")
    if (savedTheme && ["pink", "blue", "mint"].includes(savedTheme)) {
      setTheme(savedTheme as "pink" | "blue" | "mint")
    }
  }, [])

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin w-10 h-10 border-4 border-baby-pink border-t-transparent rounded-full"></div>
      </div>
    )
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            홈으로 돌아가기
          </Link>
        </div>

<div className="bg-white rounded-2xl shadow-md overflow-hidden">
          {/* 프로필 헤더 */}
          <div className="bg-gradient-to-r from-baby-pink to-baby-lavender p-8 text-white relative">
            <div className="flex flex-col md:flex-row items-center">
              <div className="relative mb-4 md:mb-0 md:mr-6">
                <div className="w-24 h-24 rounded-full bg-white flex items-center justify-center overflow-hidden border-4 border-white">
                  {profileImage ? (
                    <Image
                      src={profileImage || "/placeholder.svg"}
                      alt="프로필 이미지"
                      width={96}
                      height={96}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <UserIcon size={48} className="text-baby-pink" />
                  )}
                </div>
                <input
                  type="file"
                  id="profile-image"
                  accept="image/*"
                  className="hidden"
                  onChange={handleImageUpload}
                />
                <button
                  className="absolute bottom-0 right-0 bg-white rounded-full p-2 shadow-md text-baby-pink"
                  onClick={() => document.getElementById("profile-image")?.click()}
                >
                  <Camera size={16} />
                </button>
              </div>
              <div>
                <h1 className="font-jua text-3xl">{name || "사용자"}</h1>
                <p className="opacity-90">{user?.email}</p>
              </div>
              <button
                onClick={handleLogout}
                className="md:ml-auto mt-4 md:mt-0 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg flex items-center transition-colors"
              >
                <LogOut size={16} className="mr-2" />
                로그아웃
              </button>
            </div>
          </div>

{/* 탭 메뉴 */}
          <div className="border-b border-gray-200">
            <div className="flex overflow-x-auto">
              <button
                className={`px-6 py-3 font-jua ${
                  activeTab === "profile"
                    ? "text-baby-pink border-b-2 border-baby-pink"
                    : "text-text-secondary hover:text-baby-pink"
                }`}
                onClick={() => setActiveTab("profile")}
              >
                프로필 정보
              </button>
              <button
                className={`px-6 py-3 font-jua ${
                  activeTab === "security"
                    ? "text-baby-pink border-b-2 border-baby-pink"
                    : "text-text-secondary hover:text-baby-pink"
                }`}
                onClick={() => setActiveTab("security")}
              >
                보안 설정
              </button>
              <button
                className={`px-6 py-3 font-jua ${
                  activeTab === "preferences"
                    ? "text-baby-pink border-b-2 border-baby-pink"
                    : "text-text-secondary hover:text-baby-pink"
                }`}
                onClick={() => setActiveTab("preferences")}
              >
                환경설정
              </button>
            </div>
          </div>

{/* 탭 컨텐츠 */}
          <div className="p-6">
            {activeTab === "profile" && (
              <div>
                <div className="flex items-center justify-between mb-6">
                  <h2 className="font-jua text-2xl text-text-primary">프로필 정보</h2>
                  {!editMode ? (
                    <button
                      onClick={() => setEditMode(true)}
                      className="flex items-center text-baby-pink hover:text-baby-pink/80 transition-colors"
                    >
                      <Edit size={16} className="mr-1" />
                      수정하기
                    </button>
                  ) : (
                    <button
                      onClick={handleSaveProfile}
                      disabled={saving}
                      className="flex items-center bg-baby-pink text-white px-4 py-2 rounded-lg hover:bg-baby-pink/90 transition-colors"
                    >
                      {saving ? (
                        <>
                          <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></div>
                          저장 중...
                        </>
                      ) : (
                        <>
                          <Save size={16} className="mr-1" />
                          저장하기
                        </>
                      )}
                    </button>
                  )}
                </div>

<div className="space-y-6">
                  <div>
                    <label className="block font-jua text-text-primary mb-2">이름</label>
                    {editMode ? (
                      <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        className="input w-full"
                        placeholder="이름을 입력하세요"
                      />
                    ) : (
                      <div className="flex items-center p-3 bg-gray-50 rounded-lg">
                        <UserIcon size={18} className="text-baby-pink mr-3" />
                        <span>{name || "설정된 이름이 없습니다"}</span>
                      </div>
                    )}
                  </div>

<div>
                    <label className="block font-jua text-text-primary mb-2">이메일</label>
                    <div className="flex items-center p-3 bg-gray-50 rounded-lg">
                      <Mail size={18} className="text-baby-pink mr-3" />
                      <span>{user?.email}</span>
                    </div>
                    <p className="text-text-light text-sm mt-1">이메일은 변경할 수 없습니다</p>
                  </div>

<div>
                    <label className="block font-jua text-text-primary mb-2">가입일</label>
                    <div className="flex items-center p-3 bg-gray-50 rounded-lg">
                      <span>
                        {user
                          ? user.created_at
                            ? new Date(user.created_at).toLocaleDateString("ko-KR", {
                                year: "numeric",
                                month: "long",
                                day: "numeric",
                              })
                            : user.app_metadata?.created_at
                              ? new Date(user.app_metadata.created_at).toLocaleDateString("ko-KR", {
                                  year: "numeric",
                                  month: "long",
                                  day: "numeric",
                                })
                              : user.user_metadata?.created_at
                                ? new Date(user.user_metadata.created_at).toLocaleDateString("ko-KR", {
                                    year: "numeric",
                                    month: "long",
                                    day: "numeric",
                                  })
                                : "알 수 없음"
                          : "알 수 없음"}
                      </span>
                    </div>
                    <p className="text-text-light text-sm mt-1">
                      {user &&
                        !user.created_at &&
                        !user.app_metadata?.created_at &&
                        !user.user_metadata?.created_at &&
                        "가입일 정보를 가져올 수 없습니다. 소셜 로그인을 사용한 경우 이 정보가 제공되지 않을 수 있습니다."}
                    </p>
                  </div>
                </div>
              </div>
            )}

{activeTab === "security" && (
              <div>
                <h2 className="font-jua text-2xl text-text-primary mb-6">보안 설정</h2>

<div>
                    <label className="block font-jua text-text-primary mb-2">로그인 기록</label>
                    <div className="border border-gray-200 rounded-lg overflow-hidden">
                      <div className="p-4 bg-gray-50 text-text-secondary text-center">로그인 기록이 없습니다</div>
                    </div>
                  </div>
                </div>
              </div>
            )}

{activeTab === "preferences" && (
              <div>
                <h2 className="font-jua text-2xl text-text-primary mb-6">환경설정</h2>

<div>
                    <label className="block font-jua text-text-primary mb-2">테마 설정</label>
                    <div className="grid grid-cols-3 gap-3">
                      <div
                        className={`${theme === "pink" ? "border-2 border-baby-pink shadow-md" : "border border-gray-200"} rounded-lg p-3 text-center cursor-pointer transition-all hover:shadow-md`}
                        onClick={() => setTheme("pink")}
                      >
                        <div className="w-full h-10 bg-baby-pink rounded-md mb-2"></div>
                        <span className="text-sm font-medium">핑크</span>
                      </div>
                      <div
                        className={`${theme === "blue" ? "border-2 border-baby-blue shadow-md" : "border border-gray-200"} rounded-lg p-3 text-center cursor-pointer transition-all hover:shadow-md`}
                        onClick={() => setTheme("blue")}
                      >
                        <div className="w-full h-10 bg-baby-blue rounded-md mb-2"></div>
                        <span className="text-sm font-medium">블루</span>
                      </div>
                      <div
                        className={`${theme === "mint" ? "border-2 border-baby-mint shadow-md" : "border border-gray-200"} rounded-lg p-3 text-center cursor-pointer transition-all hover:shadow-md`}
                        onClick={() => setTheme("mint")}
                      >
                        <div className="w-full h-10 bg-baby-mint rounded-md mb-2"></div>
                        <span className="text-sm font-medium">민트</span>
                      </div>
                    </div>
                    <p className="text-text-light text-sm mt-2">
                      선택한 테마:{" "}
                      <span className="font-medium">
                        {theme === "pink" ? "핑크" : theme === "blue" ? "블루" : "민트"}
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --baby-pink: #ffd6e0;
  --baby-blue: #c5e8ff;
  --baby-mint: #c3f0d9;
  --baby-lavender: #e0d6ff;
  --baby-yellow: #fff3c3;

/* 테마 색상 변수 - 기본값은 핑크 */
  --primary-theme-color: var(--baby-pink);

/* Background */
  --baby-bg: #fffbf8;

/* Text Colors */
  --text-primary: #4a4a4a;
  --text-secondary: #6e6e6e;
  --text-light: #9e9e9e;

/* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

/* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius-xl: 24px;
}

/* 테마별 스타일 */
[data-theme="pink"] {
  --primary-theme-color: var(--baby-pink);
}

[data-theme="blue"] {
  --primary-theme-color: var(--baby-blue);
}

[data-theme="mint"] {
  --primary-theme-color: var(--baby-mint);
}

/* 기본 폰트 크기 및 줄 간격 조정 */
body {
  color: var(--text-primary);
  background-color: var(--baby-bg);
  font-family: var(--font-gaegu), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* 제목 폰트 크기 조정 */
h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.text-4xl,
.text-5xl,
.text-6xl {
  font-family: var(--font-jua), system-ui, sans-serif;
  line-height: 1.2;
}

/* 작은 텍스트 크기 조정 */
.text-xs {
  font-size: 0.85rem !important;
}

.text-sm {
  font-size: 0.95rem !important;
}

/* 입력 필드 폰트 크기 조정 */
.input,
input,
textarea,
select {
  font-size: 1rem;
}

/* 버튼 텍스트 크기 조정 */
.btn {
  @apply rounded-full py-2 px-6 font-medium transition-all duration-200 shadow-md;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--baby-pink);
  color: white;
}
.btn-primary:hover {
  background-color: rgba(255, 214, 224, 0.9); /* --baby-pink with 90% opacity */
}
.btn-primary:active {
  @apply scale-95;
}

.btn-secondary {
  background-color: var(--baby-blue);
  color: white;
}
.btn-secondary:hover {
  background-color: rgba(197, 232, 255, 0.9); /* --baby-blue with 90% opacity */
}
.btn-secondary:active {
  @apply scale-95;
}

.btn-outline {
  border: 2px solid var(--baby-lavender);
  color: var(--baby-lavender);
  background-color: white;
}
.btn-outline:hover {
  background-color: rgba(224, 214, 255, 0.1); /* --baby-lavender with 10% opacity */
}
.btn-outline:active {
  @apply scale-95;
}

/* Card Styles */
.card {
  background-color: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 2px solid rgba(255, 214, 224, 0.2); /* --baby-pink with 20% opacity */
}

/* Input Styles */
.input {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(224, 214, 255, 0.3); /* --baby-lavender with 30% opacity */
  transition: all 0.2s;
}

.input:focus {
  border-color: var(--baby-lavender);
  outline: none;
}

/* Animation Classes */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Decorative Elements */
.baby-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFD6E0' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cloud-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='28' viewBox='0 0 56 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 26c-2.813 0-5.456.726-7.752 2H56v-2zm-26 2h4.087C38.707 20.783 46.795 16 56 16v-2c-.672 0-1.339.024-1.999.07L54 14a2 2 0 0 1 2-2v-2a4 4 0 0 0-3.98 3.602 28.087 28.087 0 0 0-2.793-3.862A7.994 7.994 0 0 1 56 6V4a9.988 9.988 0 0 0-8.17 4.232 28.156 28.156 0 0 0-3.636-2.05A16.078 16.078 0 0 1 56 0v-2a18.07 18.07 0 0 0-13.324 5.79A28.32 28.32 0 0 0 39 2.224 21.978 21.978 0 0 1 56-2v-2a23.97 23.97 0 0 0-19.327 9.508C34.349 4.173 31.891 3.188 29.3 2.547 32.813-1.01 39.126-4 48-4v-2c-9.58 0-16.452 3.25-20.458 7.274-1.235-.394-2.503-.708-3.8-.938C28.696-5.393 37.96-10 50-10v-2c-12.693 0-22.262 4.82-26.982 11.217-1.17-.12-2.356-.187-3.56-.187a28.026 28.026 0 0 0-3.6.187C11.142-7.18 21.31-12 34-12v-2c-13.087 0-23.43 5.162-27.939 12.46C3.578-1.9.584-.6 0-.6v2c.584 0 1.153.008 1.72.024l.47.031c-.245.62-.47 1.25-.681 1.887C.87 2.182 0 2.58 0 3v2c1.375 0 2.72-.257 4.014-.75-.134.486-.265.983-.39 1.484C2.662 6.48 1.37 7.1 0 7.1v2c1.543 0 3.064-.358 4.465-1.077a28.06 28.06 0 0 0-.706 3.483A6.026 6.026 0 0 0 0 17.1v2c1.877 0 3.61-.64 5-1.71v2.187c-1.651.908-3.257 1.728-4.838 2.442A12.023 12.023 0 0 1 0 24.1v2c1.794 0 3.494-.471 4.955-1.295.057.3.116.598.178.897C3.692 26.53 1.892 27.1 0 27.1v2h30z' fill='%23C5E8FF' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--baby-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--baby-lavender);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--baby-pink);
}

/* 모바일에서 더 큰 폰트 크기 적용 */
@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

.text-xs {
    font-size: 0.9rem !important;
  }

.text-sm {
    font-size: 1rem !important;
  }
}

/* 테마 적용 요소들 */
.btn-theme {
  background-color: var(--primary-theme-color);
  color: white;
}

.btn-theme:hover {
  opacity: 0.9;
}

.text-theme {
  color: var(--primary-theme-color);
}

.border-theme {
  border-color: var(--primary-theme-color);
}

.bg-theme {
  background-color: var(--primary-theme-color);
}

.bg-theme-light {
  background-color: var(--primary-theme-color);
  opacity: 0.2;
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "육시끝 - 육아의 시작과 끝",
  description:
    "육아의 시작과 끝을 함께하는 반응형 웹 애플리케이션으로, 부모님들에게 필요한 육아 정보와 기능을 제공합니다.",
}

import ClientLayout from "./client-layout"

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return <ClientLayout>{children}</ClientLayout>
}
[V0_FILE]typescriptreact:file="app/client-layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { Jua, Gaegu } from "next/font/google"
import { useEffect } from "react"
import "./globals.css"
import Header from "@/components/header"
import Footer from "@/components/footer"
import FloatingButtons from "./diary/floating-buttons"
import Chatbot from "@/components/chatbot/chatbot"

const jua = Jua({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-jua",
  display: "swap",
})

const gaegu = Gaegu({
  weight: ["300", "400", "700"],
  subsets: ["latin"],
  variable: "--font-gaegu",
  display: "swap",
})

export default function ClientLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  // 페이지 로드 시 저장된 테마 불러오기
  useEffect(() => {
    const savedTheme = localStorage.getItem("userTheme")
    if (savedTheme && ["pink", "blue", "mint"].includes(savedTheme)) {
      document.documentElement.setAttribute("data-theme", savedTheme)

// 테마 색상 변수 적용
      const root = document.documentElement
      if (savedTheme === "pink") {
        root.style.setProperty("--primary-theme-color", "var(--baby-pink)")
      } else if (savedTheme === "blue") {
        root.style.setProperty("--primary-theme-color", "var(--baby-blue)")
      } else if (savedTheme === "mint") {
        root.style.setProperty("--primary-theme-color", "var(--baby-mint)")
      }
    }
  }, [])

return (
    <html lang="ko" className={`${jua.variable} ${gaegu.variable}`}>
      <body className="min-h-screen flex flex-col bg-baby-bg">
        <Header />
        <main className="flex-grow">{children}</main>
        <Footer />
        <FloatingButtons />
        <Chatbot />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/diary/daily/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Calendar, Plus, Search, ChevronLeft, ChevronRight } from "lucide-react"

export default function DailyDiaryPage() {
  const [currentDate, setCurrentDate] = useState(new Date())
  const [searchDate, setSearchDate] = useState("")

// 날짜 포맷팅 함수
  const formatDate = (date: Date) => {
    return date.toLocaleDateString("ko-KR", {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
    })
  }

// 이전 날짜로 이동
  const goToPreviousDay = () => {
    const prevDay = new Date(currentDate)
    prevDay.setDate(prevDay.getDate() - 1)
    setCurrentDate(prevDay)
  }

// 다음 날짜로 이동
  const goToNextDay = () => {
    const nextDay = new Date(currentDate)
    nextDay.setDate(nextDay.getDate() + 1)
    setCurrentDate(nextDay)
  }

// 날짜 검색 처리
  const handleDateSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchDate) {
      setCurrentDate(new Date(searchDate))
    }
  }

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const diaryEntry = {
    title: "첫 걸음마를 뗐어요!",
    content:
      "오늘 우리 아이가 드디어 첫 걸음마를 떼었어요! 소파에서 일어나 세 걸음을 걸었답니다. 너무 감동적인 순간이었어요. 아이가 넘어지지 않으려고 팔을 벌리고 조심스럽게 걷는 모습이 너무 귀여웠습니다. 이 순간을 영원히 기억하고 싶어요.",
    mood: "excited",
    images: [
      "https://cdn.pixabay.com/photo/2017/12/10/14/47/baby-3010753_1280.jpg",
      "https://cdn.pixabay.com/photo/2018/05/03/22/34/baby-3372553_1280.jpg",
      "https://cdn.pixabay.com/photo/2016/11/18/14/05/baby-1834844_1280.jpg",
    ],
    createdAt: new Date().toISOString(),
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/diary" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            육아일기로 돌아가기
          </Link>
        </div>

{/* 날짜 네비게이션 */}
          <div className="flex items-center justify-between mb-8">
            <button
              onClick={goToPreviousDay}
              className="p-2 rounded-full hover:bg-baby-pink/10 text-baby-pink"
              aria-label="이전 날짜"
            >
              <ChevronLeft size={24} />
            </button>
            <div className="text-center">
              <h2 className="font-jua text-xl text-text-primary flex items-center justify-center">
                <Calendar className="mr-2 text-baby-pink" size={20} />
                {formatDate(currentDate)}
              </h2>
            </div>
            <button
              onClick={goToNextDay}
              className="p-2 rounded-full hover:bg-baby-pink/10 text-baby-pink"
              aria-label="다음 날짜"
            >
              <ChevronRight size={24} />
            </button>
          </div>

{/* 날짜 검색 */}
          <form onSubmit={handleDateSearch} className="mb-8">
            <div className="flex gap-2">
              <input
                type="date"
                value={searchDate}
                onChange={(e) => setSearchDate(e.target.value)}
                className="input flex-grow"
              />
              <button
                type="submit"
                className="bg-baby-pink text-white px-4 py-2 rounded-lg hover:bg-baby-pink/90 transition-colors flex items-center"
              >
                <Search size={16} className="mr-1" />
                검색
              </button>
            </div>
          </form>

{/* 일기 내용 */}
          {diaryEntry ? (
            <div className="bg-white rounded-xl border border-baby-pink/20 p-6">
              <div className="flex justify-between items-start mb-4">
                <h3 className="font-jua text-2xl text-text-primary">{diaryEntry.title}</h3>
                <span className="text-sm text-text-light">
                  {new Date(diaryEntry.createdAt).toLocaleTimeString("ko-KR", {
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </span>
              </div>
              <p className="text-text-secondary mb-6 whitespace-pre-line">{diaryEntry.content}</p>
              {diaryEntry.images && diaryEntry.images.length > 0 && (
                <div className="mb-4">
                  <div className="grid grid-cols-1 gap-4">
                    {diaryEntry.images.map((image, index) => (
                      <div key={index} className="rounded-lg overflow-hidden shadow-md">
                        <img
                          src={image || "/placeholder.svg"}
                          alt={`일기 이미지 ${index + 1}`}
                          className="w-full h-auto object-cover"
                          onError={(e) => {
                            const target = e.target as HTMLImageElement
                            target.src = `/placeholder.svg?height=500&width=800&text=이미지 로드 실패`
                          }}
                        />
                      </div>
                    ))}
                  </div>
                </div>
              )}
              <div className="flex justify-end">
                <span
                  className={`inline-flex items-center px-3 py-1 rounded-full text-sm ${
                    diaryEntry.mood === "happy"
                      ? "bg-baby-yellow/20 text-yellow-600"
                      : diaryEntry.mood === "sad"
                        ? "bg-baby-blue/20 text-blue-600"
                        : diaryEntry.mood === "excited"
                          ? "bg-baby-pink/20 text-pink-600"
                          : diaryEntry.mood === "tired"
                            ? "bg-gray-200 text-gray-600"
                            : "bg-baby-lavender/20 text-purple-600"
                  }`}
                >
                  {diaryEntry.mood === "happy"
                    ? "행복"
                    : diaryEntry.mood === "sad"
                      ? "슬픔"
                      : diaryEntry.mood === "excited"
                        ? "신남"
                        : diaryEntry.mood === "tired"
                          ? "피곤"
                          : "화남"}
                </span>
              </div>
            </div>
          ) : (
            <div className="text-center py-12 bg-gray-50 rounded-lg">
              <p className="font-jua text-text-secondary mb-2">이 날의 기록이 없습니다</p>
              <p className="text-text-light text-sm mb-4">새로운 일기를 작성해보세요</p>
              <Link
                href="/diary/new"
                className="inline-flex items-center bg-baby-pink text-white px-4 py-2 rounded-lg hover:bg-baby-pink/90 transition-colors"
              >
                <Plus size={16} className="mr-1" />새 일기 작성하기
              </Link>
            </div>
          )}
        </div>

{/* 하단 버튼 */}
        <div className="flex justify-center">
          <Link
            href="/diary/new"
            className="bg-baby-pink text-white px-6 py-3 rounded-full hover:bg-baby-pink/90 transition-colors flex items-center shadow-md"
          >
            <Plus size={18} className="mr-2" />
            오늘의 일기 작성하기
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/floating-buttons.tsx" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Droplet, Calendar } from "lucide-react"
import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"

export default function FloatingButtons() {
  const [isVisible, setIsVisible] = useState(false)
  const pathname = usePathname()

// 특정 페이지에서만 버튼을 표시하려면 여기에 경로를 추가
  const visiblePaths = ["/specific-path-1", "/specific-path-2"]

useEffect(() => {
    // 현재 경로가 visiblePaths 배열에 있는 경우에만 버튼 표시
    // 빈 배열로 두면 모든 페이지에서 버튼이 숨겨짐
    setIsVisible(visiblePaths.includes(pathname))
  }, [pathname])

if (!isVisible) return null

return (
    <>
      {/* 분유체크 버튼 - 좌측 상단 */}
      <Link
        href="/formula"
        className="fixed top-20 left-4 z-50 bg-white rounded-xl shadow-md p-3 flex flex-col items-center justify-center w-16 h-16 border border-baby-pink/20"
      >
        <Droplet className="w-6 h-6 text-baby-pink mb-1" />
        <span className="text-xs text-text-secondary font-jua">분유체크</span>
      </Link>

{/* 육아일기 버튼 - 우측 하단 */}
      <Link
        href="/diary"
        className="fixed bottom-20 right-4 z-50 bg-white rounded-xl shadow-md p-3 flex flex-col items-center justify-center w-16 h-16 border border-baby-pink/20"
      >
        <Calendar className="w-6 h-6 text-baby-blue mb-1" />
        <span className="text-xs text-text-secondary font-jua">육아일기</span>
      </Link>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/formula/formula-chart.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Calendar, ArrowLeft, ArrowRight } from "lucide-react"
import type { FormulaRecord } from "./page"

interface FormulaChartProps {
  records: FormulaRecord[]
}

export default function FormulaChart({ records }: FormulaChartProps) {
  const [selectedMonth, setSelectedMonth] = useState(() => {
    const now = new Date()
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`
  })

// 월별 데이터 필터링
  const filteredRecords = records.filter((record) => {
    return record.date.startsWith(selectedMonth)
  })

// 일별 데이터 집계
  const dailyData: Record<string, { total: number; count: number }> = {}
  filteredRecords.forEach((record) => {
    const day = record.date.split("-")[2]
    if (!dailyData[day]) {
      dailyData[day] = { total: 0, count: 0 }
    }
    dailyData[day].total += record.amount
    dailyData[day].count += 1
  })

// 차트 데이터 준비
  const days = Object.keys(dailyData).sort((a, b) => Number(a) - Number(b))
  const maxAmount = Math.max(...Object.values(dailyData).map((data) => data.total), 500)

// 이전/다음 월 이동
  const handlePrevMonth = () => {
    const [year, month] = selectedMonth.split("-").map(Number)
    const prevMonth = month === 1 ? 12 : month - 1
    const prevYear = month === 1 ? year - 1 : year
    setSelectedMonth(`${prevYear}-${String(prevMonth).padStart(2, "0")}`)
  }

const handleNextMonth = () => {
    const [year, month] = selectedMonth.split("-").map(Number)
    const nextMonth = month === 12 ? 1 : month + 1
    const nextYear = month === 12 ? year + 1 : year
    setSelectedMonth(`${nextYear}-${String(nextMonth).padStart(2, "0")}`)
  }

// 월 이름 포맷팅
  const formatMonth = (monthStr: string) => {
    const [year, month] = monthStr.split("-")
    return `${year}년 ${month}월`
  }

return (
    <div>
      <h2 className="font-jua text-2xl text-text-primary mb-6">분유량 통계</h2>

{/* 월 선택 */}
      <div className="flex items-center justify-between mb-6">
        <button onClick={handlePrevMonth} className="p-2 rounded-full hover:bg-gray-100" aria-label="이전 월">
          <ArrowLeft size={20} />
        </button>
        <div className="flex items-center font-jua text-lg">
          <Calendar className="mr-2 text-baby-blue" size={20} />
          {formatMonth(selectedMonth)}
        </div>
        <button onClick={handleNextMonth} className="p-2 rounded-full hover:bg-gray-100" aria-label="다음 월">
          <ArrowRight size={20} />
        </button>
      </div>

{/* 차트 */}
      {days.length === 0 ? (
        <div className="text-center py-12 bg-gray-50 rounded-lg">
          <p className="font-jua text-text-secondary">선택한 월에 기록된 데이터가 없습니다.</p>
          <p className="text-text-light text-sm mt-1">다른 월을 선택하거나 분유 기록을 추가해보세요.</p>
        </div>
      ) : (
        <div>
          {/* 일별 총량 차트 */}
          <div className="mb-8">
            <h3 className="font-jua text-lg text-text-primary mb-4">일별 총 분유량</h3>
            <div className="bg-white border border-gray-100 rounded-lg p-4 shadow-md">
              <div className="h-60 flex items-end space-x-1">
                {days.map((day) => {
                  const height = (dailyData[day].total / maxAmount) * 100
                  return (
                    <div key={day} className="flex-1 flex flex-col items-center">
                      <div className="w-full flex justify-center mb-1">
                        <div
                          className="w-full max-w-[30px] bg-baby-blue rounded-t-lg relative group"
                          style={{ height: `${height}%` }}
                        >
                          {/* 툴팁 추가 */}
                          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                            {dailyData[day].total}ml
                          </div>
                        </div>
                      </div>
                      <div className="text-xs text-text-secondary">{day}일</div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>

{/* 일별 평균량 차트 */}
          <div>
            <h3 className="font-jua text-lg text-text-primary mb-4">일별 평균 분유량 (1회당)</h3>
            <div className="bg-white border border-gray-100 rounded-lg p-4 shadow-md">
              <div className="h-60 flex items-end space-x-1">
                {days.map((day) => {
                  const average = Math.round(dailyData[day].total / dailyData[day].count)
                  const height = (average / 300) * 100 // 최대 300ml 기준
                  return (
                    <div key={day} className="flex-1 flex flex-col items-center">
                      <div className="w-full flex justify-center mb-1">
                        <div
                          className="w-full max-w-[30px] bg-baby-pink rounded-t-lg relative group"
                          style={{ height: `${height}%` }}
                        >
                          {/* 툴팁 추가 */}
                          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                            {average}ml
                          </div>
                        </div>
                      </div>
                      <div className="text-xs text-text-secondary">{day}일</div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>

{/* 요약 통계 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
            <div className="bg-baby-blue/10 rounded-lg p-4 text-center">
              <p className="text-text-secondary text-sm">총 수유 횟수</p>
              <p className="font-jua text-2xl text-baby-blue mt-1">{filteredRecords.length}회</p>
            </div>
            <div className="bg-baby-pink/10 rounded-lg p-4 text-center">
              <p className="text-text-secondary text-sm">총 분유량</p>
              <p className="font-jua text-2xl text-baby-pink mt-1">
                {filteredRecords.reduce((sum, record) => sum + record.amount, 0)}ml
              </p>
            </div>
            <div className="bg-baby-mint/10 rounded-lg p-4 text-center">
              <p className="text-text-secondary text-sm">평균 분유량 (1회당)</p>
              <p className="font-jua text-2xl text-baby-mint mt-1">
                {filteredRecords.length > 0
                  ? Math.round(filteredRecords.reduce((sum, record) => sum + record.amount, 0) / filteredRecords.length)
                  : 0}
                ml
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/formula/formula-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Droplet, Clock, Calendar, Check } from "lucide-react"
import type { FormulaRecord } from "./page"

interface FormulaFormProps {
  onSubmit: (record: Omit<FormulaRecord, "id">) => void
}

export default function FormulaForm({ onSubmit }: FormulaFormProps) {
  const [date, setDate] = useState(new Date().toISOString().split("T")[0])
  const [time, setTime] = useState(new Date().toTimeString().split(" ")[0].substring(0, 5))
  const [amount, setAmount] = useState(100)
  const [note, setNote] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// 새 기록 생성
    const newRecord = {
      date,
      time,
      amount,
      note,
    }

// 부모 컴포넌트로 데이터 전달
    onSubmit(newRecord)

// 성공 메시지 표시
    setShowSuccess(true)
    setTimeout(() => {
      setShowSuccess(false)
    }, 3000)

// 노트 필드 초기화 (다른 필드는 유지)
    setNote("")
    setIsSubmitting(false)
  }

return (
    <div>
      <h2 className="font-jua text-2xl text-text-primary mb-6">분유 기록하기</h2>

{showSuccess && (
        <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 flex items-center">
          <Check className="mr-2" size={18} />
          분유 기록이 성공적으로 저장되었습니다!
        </div>
      )}

<form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label htmlFor="date" className="block font-jua text-text-primary mb-2">
              날짜
            </label>
            <div className="relative">
              <input
                type="date"
                id="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                className="input w-full pl-10"
                required
              />
              <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-blue w-5 h-5" />
            </div>
          </div>

<div>
            <label htmlFor="time" className="block font-jua text-text-primary mb-2">
              시간
            </label>
            <div className="relative">
              <input
                type="time"
                id="time"
                value={time}
                onChange={(e) => setTime(e.target.value)}
                className="input w-full pl-10"
                required
              />
              <Clock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-blue w-5 h-5" />
            </div>
          </div>
        </div>

<div>
          <label htmlFor="amount" className="block font-jua text-text-primary mb-2">
            분유량 (ml)
          </label>
          <div className="relative">
            <input
              type="number"
              id="amount"
              min="10"
              max="500"
              step="10"
              value={amount}
              onChange={(e) => setAmount(Number(e.target.value))}
              className="input w-full pl-10"
              required
            />
            <Droplet className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-blue w-5 h-5" />
          </div>
          <div className="mt-2">
            <input
              type="range"
              min="10"
              max="300"
              step="10"
              value={amount}
              onChange={(e) => setAmount(Number(e.target.value))}
              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-baby-blue"
            />
            <div className="flex justify-between text-xs text-text-light mt-1">
              <span>10ml</span>
              <span>150ml</span>
              <span>300ml</span>
            </div>
          </div>
        </div>

<div>
          <label htmlFor="note" className="block font-jua text-text-primary mb-2">
            메모 (선택사항)
          </label>
          <textarea
            id="note"
            value={note}
            onChange={(e) => setNote(e.target.value)}
            className="input w-full h-24 resize-none"
            placeholder="특이사항이나 아기의 반응 등을 기록하세요..."
          />
        </div>

<button
          type="submit"
          disabled={isSubmitting}
          className="btn w-full bg-baby-blue text-white hover:bg-baby-blue/90 flex items-center justify-center"
        >
          {isSubmitting ? (
            <>
              <svg
                className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              저장 중...
            </>
          ) : (
            "분유 기록 저장하기"
          )}
        </button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/formula/formula-history.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Trash2, Search, Calendar, Clock, Droplet } from "lucide-react"
import type { FormulaRecord } from "./page"

interface FormulaHistoryProps {
  records: FormulaRecord[]
  onDelete: (id: string) => void
}

export default function FormulaHistory({ records, onDelete }: FormulaHistoryProps) {
  const [searchDate, setSearchDate] = useState("")

// 날짜로 필터링
  const filteredRecords = searchDate ? records.filter((record) => record.date === searchDate) : records

// 날짜별로 그룹화
  const groupedRecords: Record<string, FormulaRecord[]> = {}
  filteredRecords.forEach((record) => {
    if (!groupedRecords[record.date]) {
      groupedRecords[record.date] = []
    }
    groupedRecords[record.date].push(record)
  })

// 날짜 그룹 정렬 (최신순)
  const sortedDates = Object.keys(groupedRecords).sort((a, b) => {
    return new Date(b).getTime() - new Date(a).getTime()
  })

return (
    <div>
      <h2 className="font-jua text-2xl text-text-primary mb-6">분유 기록 목록</h2>

{/* 검색 필터 */}
      <div className="mb-6">
        <div className="flex items-center">
          <div className="relative flex-grow">
            <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-baby-blue w-5 h-5" />
            <input
              type="date"
              value={searchDate}
              onChange={(e) => setSearchDate(e.target.value)}
              className="input w-full pl-10"
              placeholder="날짜로 검색"
            />
          </div>
          {searchDate && (
            <button
              onClick={() => setSearchDate("")}
              className="ml-2 px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 text-text-secondary text-sm"
            >
              필터 초기화
            </button>
          )}
        </div>
      </div>

{/* 기록 목록 */}
      {sortedDates.length === 0 ? (
        <div className="text-center py-12 bg-gray-50 rounded-lg">
          <Search className="mx-auto h-12 w-12 text-gray-300 mb-2" />
          <p className="font-jua text-text-secondary">
            {searchDate ? "해당 날짜에 기록이 없습니다." : "아직 기록된 분유 데이터가 없습니다."}
          </p>
          <p className="text-text-light text-sm mt-1">
            {searchDate ? "다른 날짜를 선택하거나 필터를 초기화해보세요." : "분유 기록 탭에서 첫 기록을 시작해보세요!"}
          </p>
        </div>
      ) : (
        <div className="space-y-6">
          {sortedDates.map((date) => (
            <div key={date} className="border border-gray-100 rounded-lg overflow-hidden">
              <div className="bg-baby-blue/10 px-4 py-2 font-jua text-text-primary flex items-center">
                <Calendar className="mr-2 text-baby-blue" size={16} />
                {new Date(date).toLocaleDateString("ko-KR", {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                  weekday: "long",
                })}
                <span className="ml-auto text-sm text-baby-blue">
                  총 {groupedRecords[date].length}회,{" "}
                  {groupedRecords[date].reduce((sum, record) => sum + record.amount, 0)}ml
                </span>
              </div>
              <div className="divide-y divide-gray-100">
                {groupedRecords[date].map((record) => (
                  <div key={record.id} className="p-4 hover:bg-gray-50">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <Clock className="text-baby-blue mr-2" size={16} />
                        <span className="font-medium">{record.time}</span>
                      </div>
                      <div className="flex items-center">
                        <Droplet className="text-baby-blue mr-1" size={16} />
                        <span className="font-medium">{record.amount}ml</span>
                      </div>
                      <button
                        onClick={() => onDelete(record.id)}
                        className="text-red-400 hover:text-red-600 p-1"
                        aria-label="삭제"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                    {record.note && (
                      <div className="mt-2 text-sm text-text-secondary bg-gray-50 p-2 rounded">{record.note}</div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/formula/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { PlusCircle, BarChart2, List, Info } from "lucide-react"
import FormulaForm from "./formula-form"
import FormulaHistory from "./formula-history"
import FormulaChart from "./formula-chart"

// 분유 기록 타입 정의
export type FormulaRecord = {
  id: string
  date: string
  time: string
  amount: number
  note: string
}

export default function FormulaPage() {
  // 탭 상태 관리
  const [activeTab, setActiveTab] = useState<"add" | "history" | "chart">("add")

// 분유 기록 상태 관리
  const [formulaRecords, setFormulaRecords] = useState<FormulaRecord[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

// 데이터 가져오기
  const fetchRecords = async () => {
    try {
      setLoading(true)
      // 실제 API 호출 대신 임시 데이터 사용
      const mockData: FormulaRecord[] = [
        {
          id: "1",
          date: "2023-05-01",
          time: "08:30",
          amount: 120,
          note: "잘 먹었어요",
        },
        {
          id: "2",
          date: "2023-05-01",
          time: "12:30",
          amount: 150,
          note: "조금 토했어요",
        },
        {
          id: "3",
          date: "2023-05-02",
          time: "08:00",
          amount: 130,
          note: "",
        },
        {
          id: "4",
          date: "2023-05-03",
          time: "09:00",
          amount: 140,
          note: "잘 먹었어요",
        },
        {
          id: "5",
          date: "2023-05-03",
          time: "14:00",
          amount: 160,
          note: "배고파했어요",
        },
      ]

// 실제 구현에서는 아래 주석을 해제하고 API 호출을 사용
      /*
      const response = await fetch("/api/formula")
      if (!response.ok) {
        throw new Error("데이터를 가져오는데 실패했습니다")
      }
      const data = await response.json()
      setFormulaRecords(data)
      */

// 임시 데이터 사용
      setFormulaRecords(mockData)
    } catch (err) {
      setError(err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다")
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchRecords()
  }, [])

// 새 분유 기록 추가 함수
  const addFormulaRecord = async (record: Omit<FormulaRecord, "id">) => {
    try {
      // 실제 API 호출 대신 임시 처리
      const newRecord: FormulaRecord = {
        ...record,
        id: Date.now().toString(),
      }

setFormulaRecords([newRecord, ...formulaRecords])

// 실제 구현에서는 아래 주석을 해제하고 API 호출을 사용
      /*
      const response = await fetch("/api/formula", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(record),
      })

if (!response.ok) {
        throw new Error("기록 추가에 실패했습니다")
      }

// 데이터 다시 가져오기
      fetchRecords()
      */
    } catch (err) {
      setError(err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다")
      console.error(err)
    }
  }

// 분유 기록 삭제 함수
  const deleteFormulaRecord = async (id: string) => {
    try {
      // 실제 API 호출 대신 임시 처리
      setFormulaRecords(formulaRecords.filter((record) => record.id !== id))

// 실제 구현에서는 아래 주석을 해제하고 API 호출을 사용
      /*
      const response = await fetch(`/api/formula/${id}`, {
        method: "DELETE",
      })

if (!response.ok) {
        throw new Error("기록 삭제에 실패했습니다")
      }

return (
    <div className="min-h-screen py-8 px-4">
      <div className="container mx-auto max-w-4xl">
        {/* 헤더 섹션 */}
        <div className="text-center mb-10">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-blue">분유체크</span> 서비스
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            아기의 분유 섭취량을 간편하게 기록하고 관리하세요. 날짜별, 시간별 분유량을 그래프로 확인하여 아기의 수유
            패턴을 파악할 수 있습니다.
          </p>
        </div>

{error && <div className="bg-red-50 text-red-600 p-4 rounded-lg mb-6">{error}</div>}

{/* 정보 카드 */}
        <div className="bg-baby-blue/10 rounded-xl p-4 mb-8 flex items-start">
          <Info className="text-baby-blue mr-3 mt-1 flex-shrink-0" size={20} />
          <div>
            <h3 className="font-jua text-text-primary text-lg mb-1">분유체크 서비스 이용 방법</h3>
            <p className="text-text-secondary text-sm">
              1. 분유 기록 탭에서 날짜, 시간, 수유량을 입력하세요.
              <br />
              2. 기록 목록 탭에서 지금까지의 수유 기록을 확인하세요.
              <br />
              3. 통계 탭에서 아기의 수유 패턴을 그래프로 확인하세요.
            </p>
          </div>
        </div>

{/* 탭 메뉴 */}
        <div className="flex border-b border-gray-200 mb-6">
          <button
            className={`flex items-center py-3 px-4 font-jua ${
              activeTab === "add"
                ? "text-baby-blue border-b-2 border-baby-blue"
                : "text-text-secondary hover:text-baby-blue"
            }`}
            onClick={() => setActiveTab("add")}
          >
            <PlusCircle size={18} className="mr-2" />
            분유 기록
          </button>
          <button
            className={`flex items-center py-3 px-4 font-jua ${
              activeTab === "history"
                ? "text-baby-blue border-b-2 border-baby-blue"
                : "text-text-secondary hover:text-baby-blue"
            }`}
            onClick={() => setActiveTab("history")}
          >
            <List size={18} className="mr-2" />
            기록 목록
          </button>
          <button
            className={`flex items-center py-3 px-4 font-jua ${
              activeTab === "chart"
                ? "text-baby-blue border-b-2 border-baby-blue"
                : "text-text-secondary hover:text-baby-blue"
            }`}
            onClick={() => setActiveTab("chart")}
          >
            <BarChart2 size={18} className="mr-2" />
            통계
          </button>
        </div>

{/* 탭 컨텐츠 */}
        <div className="bg-white rounded-xl shadow-md p-6">
          {loading ? (
            <div className="flex justify-center items-center py-12">
              <svg
                className="animate-spin h-8 w-8 text-baby-blue"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              <span className="ml-2 text-text-secondary">데이터를 불러오는 중...</span>
            </div>
          ) : (
            <>
              {activeTab === "add" && <FormulaForm onSubmit={addFormulaRecord} />}
              {activeTab === "history" && <FormulaHistory records={formulaRecords} onDelete={deleteFormulaRecord} />}
              {activeTab === "chart" && <FormulaChart records={formulaRecords} />}
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/coupang/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import crypto from "crypto"

// Coupang API credentials - in production, these should be environment variables
const ACCESS_KEY = "7d19e13e-b804-4133-9f70-af9100ef2435"
const SECRET_KEY = "5c97b2e874f6473344268505f3f683b046799cf2"
const DOMAIN = "https://api-gateway.coupang.com"

// Update the HMAC generation function to match Coupang's expected format exactly
function generateHmac(method: string, uri: string) {
  const parts = uri.split("?")
  const path = parts[0]
  const query = parts.length === 2 ? parts[1] : ""

// Format date according to Coupang's requirements (yyMMddTHHmmssZ)
  const now = new Date()
  now.setUTCHours(now.getUTCHours())

const year = now.getUTCFullYear().toString().substring(2)
  const month = (now.getUTCMonth() + 1).toString().padStart(2, "0")
  const day = now.getUTCDate().toString().padStart(2, "0")
  const hours = now.getUTCHours().toString().padStart(2, "0")
  const minutes = now.getUTCMinutes().toString().padStart(2, "0")
  const seconds = now.getUTCSeconds().toString().padStart(2, "0")

const datetime = `${year}${month}${day}T${hours}${minutes}${seconds}Z`
  const message = datetime + method + path + query

// Create HMAC signature
  const signingKey = crypto.createHmac("sha256", SECRET_KEY)
  const signature = signingKey.update(message).digest("hex")

return `CEA algorithm=HmacSHA256, access-key=${ACCESS_KEY}, signed-date=${datetime}, signature=${signature}`
}

// Update the GET function to properly handle the Coupang API response
export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const keyword = searchParams.get("keyword") || "유아용품"
    const categoryId = searchParams.get("categoryId") || "221934" // Default to baby products category
    const limit = searchParams.get("limit") || "10" // API limit parameter
    const page = searchParams.get("page") || "1"

// Add this validation to ensure limit doesn't exceed 10
    // 쿠팡 API는 최대 10개까지만 허용하므로 항상 10으로 고정합니다
    const validLimit = "10"

// Ensure page is a valid number
    const pageNum = Number.parseInt(page, 10)
    const validPage = isNaN(pageNum) || pageNum < 1 ? "1" : pageNum.toString()

// Calculate offset for pagination (Coupang API might use this instead of page)
    const offset = (Number.parseInt(validPage) - 1) * Number.parseInt(validLimit)

// Construct the API URL with both page and offset parameters
    const apiPath = `/v2/providers/affiliate_open_api/apis/openapi/products/search`
    const queryString = `?keyword=${encodeURIComponent(keyword)}&categoryId=${categoryId}&limit=${validLimit}&page=${validPage}&subId=yugsikkeut&sortType=scoreDesc`
    const uri = apiPath + queryString

// Generate authorization header
    const authorization = generateHmac("GET", uri)

console.log(`[SERVER]\nFetching from Coupang API: ${DOMAIN}${uri}`)
    console.log(`Page: ${validPage}, Limit: ${validLimit}, Offset: ${offset}`)

// Make request to Coupang API with explicit no-cache headers
    const response = await fetch(`${DOMAIN}${uri}`, {
      method: "GET",
      headers: {
        Authorization: authorization,
        "Content-Type": "application/json",
        "Cache-Control": "no-cache, no-store, must-revalidate",
        Pragma: "no-cache",
        Expires: "0",
      },
      cache: "no-store",
    })

const responseText = await response.text()
    console.log(`API response received: ${responseText.substring(0, 200)}${responseText.length > 200 ? "..." : ""}`)

let data
    try {
      data = JSON.parse(responseText)
    } catch (parseError) {
      console.error("Error parsing API response:", parseError)
      return NextResponse.json({ error: "Failed to parse API response", details: responseText }, { status: 500 })
    }

if (!response.ok) {
      console.error("Coupang API error:", data)
      return NextResponse.json(
        { error: "Failed to fetch products from Coupang", details: data },
        { status: response.status },
      )
    }

// Add debug information to the response
    if (data && data.data) {
      data.debug = {
        requestedPage: validPage,
        requestedLimit: validLimit,
        calculatedOffset: offset,
        timestamp: new Date().toISOString(),
      }
    }

// Process the data to ensure rating information is correctly formatted
    if (data && data.data && data.data.productData) {
      console.log(`Received ${data.data.productData.length} products for page ${validPage}`)

// Log the first few product IDs to check for duplicates
      const productIds = data.data.productData.slice(0, 3).map((p: any) => p.productId)
      console.log(`First few product IDs: ${productIds.join(", ")}`)

data.data.productData = data.data.productData.map((product: any) => {
        // Extract and normalize rating information
        const rating = Number.parseFloat(product.rating) || 0

// Try to find review count from various possible fields
        let reviewCount = 0
        if (product.reviewCount !== undefined) {
          reviewCount = Number.parseInt(product.reviewCount)
        } else if (product.ratingCount !== undefined) {
          reviewCount = Number.parseInt(product.ratingCount)
        } else if (product.evaluationCount !== undefined) {
          reviewCount = Number.parseInt(product.evaluationCount)
        }

return {
          ...product,
          rating: rating,
          reviewCount: reviewCount,
        }
      })
    }

// Add cache control headers to prevent caching
    return new NextResponse(JSON.stringify(data), {
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
        Pragma: "no-cache",
        Expires: "0",
        "Surrogate-Control": "no-store",
      },
    })
  } catch (error) {
    console.error("Error fetching products:", error)
    return NextResponse.json(
      { error: "Internal server error", details: error instanceof Error ? error.message : String(error) },
      { status: 500 },
    )
  }
}

// Update the POST function to properly handle deeplink generation
export async function POST(request: NextRequest) {
  try {
    const { urls } = await request.json()

if (!urls || !Array.isArray(urls)) {
      return NextResponse.json({ error: "Invalid request. 'urls' array is required." }, { status: 400 })
    }

// Construct the API URL for deeplink generation
    const apiPath = `/v2/providers/affiliate_open_api/apis/openapi/v1/deeplink`

// Generate authorization header
    const authorization = generateHmac("POST", apiPath)

console.log("Generating deeplinks for URLs:", urls)

// Make request to Coupang API
    const response = await fetch(`${DOMAIN}${apiPath}`, {
      method: "POST",
      headers: {
        Authorization: authorization,
        "Content-Type": "application/json",
        "Cache-Control": "no-cache, no-store, must-revalidate",
        Pragma: "no-cache",
        Expires: "0",
      },
      body: JSON.stringify({ coupangUrls: urls }),
      cache: "no-store",
    })

if (!response.ok) {
      const errorText = await response.text()
      console.error("Coupang API error:", errorText)
      return NextResponse.json(
        { error: "Failed to generate deeplinks", details: errorText },
        { status: response.status },
      )
    }

const data = await response.json()
    console.log("Deeplink response:", JSON.stringify(data).substring(0, 200) + "...")

// Add cache control headers to prevent caching
    return new NextResponse(JSON.stringify(data), {
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
        Pragma: "no-cache",
        Expires: "0",
        "Surrogate-Control": "no-store",
      },
    })
  } catch (error) {
    console.error("Error generating deeplinks:", error)
    return NextResponse.json(
      { error: "Internal server error", details: error instanceof Error ? error.message : String(error) },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/map/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/community/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, MessageSquare, ThumbsUp, Eye, Search, Plus } from "lucide-react"

// 게시글 타입 정의
interface Post {
  id: string
  title: string
  content: string
  author: {
    id: string
    name: string
    avatar?: string
  }
  category: string
  createdAt: string
  views: number
  likes: number
  comments: number
}

// 카테고리 타입 정의
interface Category {
  id: string
  name: string
  icon: string
}

export default function CommunityPage() {
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)

// 카테고리 목록
  const categories: Category[] = [
    { id: "all", name: "전체", icon: "🔍" },
    { id: "question", name: "질문", icon: "❓" },
    { id: "tip", name: "육아팁", icon: "💡" },
    { id: "story", name: "육아일기", icon: "📝" },
    { id: "product", name: "육아용품", icon: "🛒" },
    { id: "health", name: "건강/의료", icon: "🏥" },
    { id: "education", name: "교육", icon: "📚" },
  ]

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const dummyPosts: Post[] = [
    {
      id: "1",
      title: "아기가 밤에 자주 깨는데 어떻게 해야 할까요?",
      content: "6개월 된 아기가 밤에 2시간마다 깨서 힘들어요. 다른 부모님들은 어떻게 대처하시나요?",
      author: {
        id: "user1",
        name: "행복맘",
        avatar: "https://i.pravatar.cc/150?img=1",
      },
      category: "question",
      createdAt: "2023-05-15T09:30:00Z",
      views: 120,
      likes: 15,
      comments: 8,
    },
    {
      id: "2",
      title: "이유식 시작 시기와 방법 공유합니다",
      content: "우리 아이 이유식 시작했을 때 경험과 팁을 공유합니다. 처음에는 쌀미음부터 시작했어요.",
      author: {
        id: "user2",
        name: "요리하는아빠",
        avatar: "https://i.pravatar.cc/150?img=2",
      },
      category: "tip",
      createdAt: "2023-05-14T15:45:00Z",
      views: 230,
      likes: 42,
      comments: 12,
    },
    {
      id: "3",
      title: "첫 돌 준비, 어떻게 하셨나요?",
      content: "곧 아이 첫 돌인데 어떻게 준비해야 할지 막막해요. 경험 있으신 분들 조언 부탁드려요.",
      author: {
        id: "user3",
        name: "초보맘",
        avatar: "https://i.pravatar.cc/150?img=3",
      },
      category: "question",
      createdAt: "2023-05-13T11:20:00Z",
      views: 185,
      likes: 23,
      comments: 15,
    },
    {
      id: "4",
      title: "유아 영어교육, 언제부터 시작하는 게 좋을까요?",
      content: "아이 영어교육 시작 시기에 대해 고민이에요. 너무 일찍 시작하면 부담될까요?",
      author: {
        id: "user4",
        name: "교육맘",
        avatar: "https://i.pravatar.cc/150?img=4",
      },
      category: "education",
      createdAt: "2023-05-12T14:10:00Z",
      views: 210,
      likes: 18,
      comments: 22,
    },
    {
      id: "5",
      title: "추천하는 유모차 있으신가요?",
      content: "첫 아이 유모차 구매 예정인데 가성비 좋은 제품 추천해주세요.",
      author: {
        id: "user5",
        name: "예비맘",
        avatar: "https://i.pravatar.cc/150?img=5",
      },
      category: "product",
      createdAt: "2023-05-11T10:05:00Z",
      views: 320,
      likes: 27,
      comments: 31,
    },
    {
      id: "6",
      title: "소아과 추천해주세요 (서울 강남)",
      content: "강남 지역에 친절하고 실력 있는 소아과 추천 부탁드립니다.",
      author: {
        id: "user6",
        name: "걱정많은맘",
        avatar: "https://i.pravatar.cc/150?img=6",
      },
      category: "health",
      createdAt: "2023-05-10T16:30:00Z",
      views: 175,
      likes: 12,
      comments: 18,
    },
    {
      id: "7",
      title: "아이와 함께한 첫 가족여행 후기",
      content: "2살 아이와 함께 다녀온 제주도 여행 경험을 공유합니다. 준비물부터 주의사항까지!",
      author: {
        id: "user7",
        name: "여행하는엄마",
        avatar: "https://i.pravatar.cc/150?img=7",
      },
      category: "story",
      createdAt: "2023-05-09T13:15:00Z",
      views: 290,
      likes: 35,
      comments: 14,
    },
    {
      id: "8",
      title: "아이 감기, 병원 가야 할까요?",
      content: "18개월 아이가 콧물, 기침이 있는데 병원에 가야 할지 고민이에요. 비슷한 경험 있으신가요?",
      author: {
        id: "user8",
        name: "걱정맘",
        avatar: "https://i.pravatar.cc/150?img=8",
      },
      category: "health",
      createdAt: "2023-05-08T09:45:00Z",
      views: 215,
      likes: 19,
      comments: 23,
    },
  ]

// 데이터 로드 (실제 구현에서는 API 호출)
  useEffect(() => {
    // 실제 구현에서는 API 호출
    // const fetchPosts = async () => {
    //   try {
    //     const response = await fetch('/api/community/posts');
    //     const data = await response.json();
    //     setPosts(data);
    //   } catch (error) {
    //     console.error('게시글을 불러오는데 실패했습니다:', error);
    //   } finally {
    //     setLoading(false);
    //   }
    // };
    // fetchPosts();

// 더미 데이터 사용
    setTimeout(() => {
      setPosts(dummyPosts)
      setLoading(false)
    }, 500)
  }, [])

// 게시글 필터링
  const filteredPosts = posts.filter((post) => {
    // 카테고리 필터링
    if (selectedCategory && selectedCategory !== "all" && post.category !== selectedCategory) {
      return false
    }
    // 검색어 필터링
    if (searchTerm && !post.title.toLowerCase().includes(searchTerm.toLowerCase())) {
      return false
    }
    return true
  })

// 카테고리 선택 처리
  const handleCategorySelect = (categoryId: string) => {
    setSelectedCategory(categoryId === "all" ? null : categoryId)
  }

// 날짜 포맷팅
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffTime = Math.abs(now.getTime() - date.getTime())
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

if (diffDays === 0) {
      return "오늘"
    } else if (diffDays === 1) {
      return "어제"
    } else if (diffDays < 7) {
      return `${diffDays}일 전`
    } else {
      return date.toLocaleDateString("ko-KR", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    }
  }

// 카테고리 아이콘 및 이름 가져오기
  const getCategoryInfo = (categoryId: string) => {
    const category = categories.find((c) => c.id === categoryId)
    return category || { id: categoryId, name: categoryId, icon: "📄" }
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-5xl">
        <div className="mb-6">
          <Link href="/" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            홈으로 돌아가기
          </Link>
        </div>

<div className="text-center mb-10">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">육아 커뮤니티</span>
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            다른 부모님들과 육아 경험과 정보를 공유하고 소통하는 공간입니다.
            <br />
            궁금한 점을 질문하고 유용한 팁을 나눠보세요!
          </p>
        </div>

{/* 검색 및 필터 섹션 */}
        <div className="bg-white rounded-xl shadow-md p-4 mb-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-grow">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="게시글 검색..."
                className="input w-full pl-10"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-light w-5 h-5" />
            </div>
            <Link href="/community/new" className="btn btn-primary flex items-center justify-center whitespace-nowrap">
              <Plus size={16} className="mr-1" />새 글 작성하기
            </Link>
          </div>

<div className="mt-4 flex flex-wrap gap-2">
            {categories.map((category) => (
              <button
                key={category.id}
                onClick={() => handleCategorySelect(category.id)}
                className={`px-3 py-2 rounded-full flex items-center ${
                  (selectedCategory === category.id) || (category.id === "all" && !selectedCategory)
                    ? "bg-baby-pink text-white"
                    : "bg-gray-100 text-text-secondary hover:bg-baby-pink/10"
                }`}
              >
                <span className="mr-1">{category.icon}</span>
                {category.name}
              </button>
            ))}
          </div>
        </div>

{/* 게시글 목록 */}
        {loading ? (
          <div className="flex justify-center items-center py-12">
            <div className="animate-spin w-8 h-8 border-4 border-baby-pink border-t-transparent rounded-full"></div>
            <span className="ml-2 text-text-secondary">게시글을 불러오는 중...</span>
          </div>
        ) : filteredPosts.length === 0 ? (
          <div className="text-center py-12 bg-white rounded-xl shadow-md">
            <p className="font-jua text-text-secondary mb-2">검색 결과가 없습니다</p>
            <p className="text-text-light text-sm">다른 검색어나 카테고리를 선택해보세요</p>
          </div>
        ) : (
          <div className="space-y-4">
            {filteredPosts.map((post) => {
              const categoryInfo = getCategoryInfo(post.category)
              return (
                <Link
                  key={post.id}
                  href={`/community/${post.id}`}
                  className="block bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
                >
                  <div className="flex justify-between items-start mb-2">
                    <h2 className="font-jua text-xl text-text-primary">{post.title}</h2>
                    <span className="bg-baby-pink/10 text-baby-pink text-xs px-2 py-1 rounded-full flex items-center">
                      <span className="mr-1">{categoryInfo.icon}</span>
                      {categoryInfo.name}
                    </span>
                  </div>
                  <p className="text-text-secondary text-sm line-clamp-2 mb-4">{post.content}</p>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <div className="w-8 h-8 rounded-full overflow-hidden mr-2">
                        <Image
                          src={post.author.avatar || "/placeholder.svg?height=32&width=32"}
                          alt={post.author.name}
                          width={32}
                          height={32}
                          className="object-cover"
                          unoptimized
                        />
                      </div>
                      <span className="text-text-primary text-sm font-medium">{post.author.name}</span>
                      <span className="text-text-light text-xs ml-2">{formatDate(post.createdAt)}</span>
                    </div>
                    <div className="flex items-center space-x-3 text-text-secondary text-xs">
                      <span className="flex items-center">
                        <Eye size={14} className="mr-1" />
                        {post.views}
                      </span>
                      <span className="flex items-center">
                        <ThumbsUp size={14} className="mr-1" />
                        {post.likes}
                      </span>
                      <span className="flex items-center">
                        <MessageSquare size={14} className="mr-1" />
                        {post.comments}
                      </span>
                    </div>
                  </div>
                </Link>
              )
            })}
          </div>
        )}

{/* 페이지네이션 (실제 구현 시 추가) */}
        <div className="mt-8 flex justify-center">{/* 페이지네이션 컴포넌트 */}</div>

{/* 커뮤니티 가이드라인 */}
        <div className="mt-12 bg-baby-pink/10 rounded-xl p-6">
          <h3 className="font-jua text-xl text-text-primary mb-4">커뮤니티 가이드라인</h3>
          <ul className="space-y-2 text-text-secondary">
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>서로 존중하고 배려하는 마음으로 소통해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>개인정보 보호를 위해 민감한 정보는 공유하지 말아주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>광고성 콘텐츠나 스팸은 자제해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>다른 부모님들의 다양한 의견을 존중해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>유용한 정보와 경험을 나누어 모두에게 도움이 되는 커뮤니티를 만들어요!</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/community/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, ThumbsUp, MessageSquare, Share2, Flag, Send } from "lucide-react"

// 댓글 타입 정의
interface Comment {
  id: string
  content: string
  author: {
    id: string
    name: string
    avatar?: string
  }
  createdAt: string
  likes: number
}

// 카테고리 타입 정의
interface Category {
  id: string
  name: string
  icon: string
}

export default function PostDetailPage() {
  const params = useParams()
  const router = useRouter()
  const postId = params.id as string

const [post, setPost] = useState<Post | null>(null)
  const [loading, setLoading] = useState(true)
  const [commentText, setCommentText] = useState("")
  const [submitting, setSubmitting] = useState(false)

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const dummyPost: Post = {
    id: "1",
    title: "아기가 밤에 자주 깨는데 어떻게 해야 할까요?",
    content: `6개월 된 아기가 밤에 2시간마다 깨서 힘들어요. 다른 부모님들은 어떻게 대처하시나요?

저희 아기는 낮에는 잘 놀고 밥도 잘 먹는데, 밤만 되면 자주 깨서 울어요. 수면 교육을 시도해볼까 하는데, 너무 어린 나이에 하는 것이 좋을지 고민이에요.

백색소음이나 수면등도 사용해봤는데 큰 효과가 없었어요. 혹시 비슷한 경험이 있으신 부모님들 조언 부탁드립니다.`,
    author: {
      id: "user1",
      name: "행복맘",
      avatar: "https://i.pravatar.cc/150?img=1",
    },
    category: "question",
    createdAt: "2023-05-15T09:30:00Z",
    views: 120,
    likes: 15,
    comments: [
      {
        id: "comment1",
        content:
          "저희 아이도 비슷했어요. 수면 습관을 들이는 데 시간이 좀 걸렸지만, 일정한 취침 시간과 루틴을 만들어주니 점점 나아졌어요.",
        author: {
          id: "user2",
          name: "경험맘",
          avatar: "https://i.pravatar.cc/150?img=2",
        },
        createdAt: "2023-05-15T10:15:00Z",
        likes: 5,
      },
      {
        id: "comment2",
        content:
          "백색소음보다 저는 자장가 음악이 더 효과적이었어요. 그리고 낮잠 시간을 조절해보세요. 낮에 너무 많이 자면 밤에 잠을 설칠 수 있어요.",
        author: {
          id: "user3",
          name: "수면전문가",
          avatar: "https://i.pravatar.cc/150?img=3",
        },
        createdAt: "2023-05-15T11:30:00Z",
        likes: 8,
      },
      {
        id: "comment3",
        content:
          "아기마다 다르겠지만, 저희 아이는 따뜻한 목욕 후 가벼운 마사지가 도움이 됐어요. 잠들기 전 차분한 환경을 만들어주는 것도 중요해요.",
        author: {
          id: "user4",
          name: "마사지맘",
          avatar: "https://i.pravatar.cc/150?img=4",
        },
        createdAt: "2023-05-15T14:20:00Z",
        likes: 3,
      },
    ],
  }

// 데이터 로드 (실제 구현에서는 API 호출)
  useEffect(() => {
    // 실제 구현에서는 API 호출
    // const fetchPost = async () => {
    //   try {
    //     const response = await fetch(`/api/community/posts/${postId}`);
    //     const data = await response.json();
    //     setPost(data);
    //   } catch (error) {
    //     console.error('게시글을 불러오는데 실패했습니다:', error);
    //     router.push('/community');
    //   } finally {
    //     setLoading(false);
    //   }
    // };
    // fetchPost();

// 더미 데이터 사용
    setTimeout(() => {
      setPost(dummyPost)
      setLoading(false)
    }, 500)
  }, [postId, router])

// 댓글 작성 처리
  const handleSubmitComment = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!commentText.trim()) return

setSubmitting(true)

// 실제 구현에서는 API 호출
    // try {
    //   const response = await fetch(`/api/community/posts/${postId}/comments`, {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({ content: commentText }),
    //   });
    //   const newComment = await response.json();
    //   setPost(prev => prev ? { ...prev, comments: [...prev.comments, newComment] } : null);
    //   setCommentText('');
    // } catch (error) {
    //   console.error('댓글 작성에 실패했습니다:', error);
    //   alert('댓글 작성에 실패했습니다. 다시 시도해주세요.');
    // }

// 더미 데이터 사용
    setTimeout(() => {
      if (post) {
        const newComment: Comment = {
          id: `comment${post.comments.length + 1}`,
          content: commentText,
          author: {
            id: "currentUser",
            name: "현재사용자",
            avatar: "https://i.pravatar.cc/150?img=9",
          },
          createdAt: new Date().toISOString(),
          likes: 0,
        }
        setPost({ ...post, comments: [...post.comments, newComment] })
        setCommentText("")
      }
      setSubmitting(false)
    }, 500)
  }

// 좋아요 처리
  const handleLike = async () => {
    if (!post) return

// 실제 구현에서는 API 호출
    // try {
    //   await fetch(`/api/community/posts/${postId}/like`, {
    //     method: 'POST',
    //   });
    //   setPost(prev => prev ? { ...prev, likes: prev.likes + 1 } : null);
    // } catch (error) {
    //   console.error('좋아요 처리에 실패했습니다:', error);
    // }

// 더미 데이터 사용
    setPost({ ...post, likes: post.likes + 1 })
  }

// 댓글 좋아요 처리
  const handleCommentLike = async (commentId: string) => {
    if (!post) return

// 실제 구현에서는 API 호출
    // try {
    //   await fetch(`/api/community/comments/${commentId}/like`, {
    //     method: 'POST',
    //   });
    //   setPost(prev => {
    //     if (!prev) return null;
    //     const updatedComments = prev.comments.map(comment =>
    //       comment.id === commentId ? { ...comment, likes: comment.likes + 1 } : comment
    //     );
    //     return { ...prev, comments: updatedComments };
    //   });
    // } catch (error) {
    //   console.error('댓글 좋아요 처리에 실패했습니다:', error);
    // }

// 더미 데이터 사용
    const updatedComments = post.comments.map((comment) =>
      comment.id === commentId ? { ...comment, likes: comment.likes + 1 } : comment,
    )
    setPost({ ...post, comments: updatedComments })
  }

// 날짜 포맷팅
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("ko-KR", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

// 카테고리 정보 가져오기
  const getCategoryInfo = (categoryId: string) => {
    const category = categories.find((c) => c.id === categoryId)
    return category || { id: categoryId, name: categoryId, icon: "📄" }
  }

if (loading) {
    return (
      <div className="min-h-screen py-8 px-4 bg-baby-bg flex justify-center items-center">
        <div className="animate-spin w-8 h-8 border-4 border-baby-pink border-t-transparent rounded-full"></div>
        <span className="ml-2 text-text-secondary">게시글을 불러오는 중...</span>
      </div>
    )
  }

if (!post) {
    return (
      <div className="min-h-screen py-8 px-4 bg-baby-bg">
        <div className="container mx-auto max-w-3xl text-center">
          <p className="text-text-secondary mb-4">게시글을 찾을 수 없습니다.</p>
          <Link href="/community" className="btn btn-primary">
            커뮤니티로 돌아가기
          </Link>
        </div>
      </div>
    )
  }

const categoryInfo = getCategoryInfo(post.category)

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/community" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            커뮤니티로 돌아가기
          </Link>
        </div>

<div className="bg-white rounded-xl shadow-md overflow-hidden">
          {/* 게시글 헤더 */}
          <div className="p-6 border-b border-gray-100">
            <div className="flex justify-between items-start mb-4">
              <h1 className="font-jua text-2xl text-text-primary">{post.title}</h1>
              <span className="bg-baby-pink/10 text-baby-pink text-xs px-2 py-1 rounded-full flex items-center">
                <span className="mr-1">{categoryInfo.icon}</span>
                {categoryInfo.name}
              </span>
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full overflow-hidden mr-3">
                  <Image
                    src={post.author.avatar || "/placeholder.svg?height=40&width=40"}
                    alt={post.author.name}
                    width={40}
                    height={40}
                    className="object-cover"
                    unoptimized
                  />
                </div>
                <div>
                  <p className="font-medium text-text-primary">{post.author.name}</p>
                  <p className="text-text-light text-xs">{formatDate(post.createdAt)}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2 text-text-secondary text-sm">
                <span className="flex items-center">
                  <MessageSquare size={16} className="mr-1" />
                  {post.comments.length}
                </span>
                <span className="flex items-center">
                  <ThumbsUp size={16} className="mr-1" />
                  {post.likes}
                </span>
              </div>
            </div>
          </div>

{/* 게시글 내용 */}
          <div className="p-6">
            <div className="prose max-w-none text-text-primary whitespace-pre-line">{post.content}</div>

{/* 게시글 액션 버튼 */}
            <div className="flex justify-between items-center mt-8 pt-4 border-t border-gray-100">
              <div className="flex space-x-4">
                <button
                  onClick={handleLike}
                  className="flex items-center text-text-secondary hover:text-baby-pink transition-colors"
                >
                  <ThumbsUp size={18} className="mr-1" />
                  좋아요
                </button>
                <button className="flex items-center text-text-secondary hover:text-baby-pink transition-colors">
                  <Share2 size={18} className="mr-1" />
                  공유하기
                </button>
              </div>
              <button className="flex items-center text-text-secondary hover:text-baby-pink transition-colors">
                <Flag size={18} className="mr-1" />
                신고하기
              </button>
            </div>
          </div>

{/* 댓글 섹션 */}
          <div className="p-6 bg-gray-50">
            <h2 className="font-jua text-xl text-text-primary mb-4">
              댓글 <span className="text-baby-pink">{post.comments.length}</span>
            </h2>

{/* 댓글 목록 */}
            <div className="space-y-4 mb-6">
              {post.comments.map((comment) => (
                <div key={comment.id} className="bg-white p-4 rounded-lg shadow-sm">
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex items-center">
                      <div className="w-8 h-8 rounded-full overflow-hidden mr-2">
                        <Image
                          src={comment.author.avatar || "/placeholder.svg?height=32&width=32"}
                          alt={comment.author.name}
                          width={32}
                          height={32}
                          className="object-cover"
                          unoptimized
                        />
                      </div>
                      <div>
                        <p className="font-medium text-text-primary text-sm">{comment.author.name}</p>
                        <p className="text-text-light text-xs">{formatDate(comment.createdAt)}</p>
                      </div>
                    </div>
                    <button
                      onClick={() => handleCommentLike(comment.id)}
                      className="flex items-center text-text-secondary hover:text-baby-pink transition-colors"
                    >
                      <ThumbsUp size={14} className="mr-1" />
                      <span className="text-xs">{comment.likes}</span>
                    </button>
                  </div>
                  <p className="text-text-secondary text-sm">{comment.content}</p>
                </div>
              ))}
            </div>

{/* 댓글 작성 폼 */}
            <form onSubmit={handleSubmitComment} className="mt-4">
              <div className="flex items-start gap-2">
                <div className="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
                  <Image
                    src="https://i.pravatar.cc/150?img=9"
                    alt="사용자"
                    width={32}
                    height={32}
                    className="object-cover"
                    unoptimized
                  />
                </div>
                <div className="flex-grow relative">
                  <textarea
                    value={commentText}
                    onChange={(e) => setCommentText(e.target.value)}
                    placeholder="댓글을 작성해주세요..."
                    className="input w-full min-h-[80px] resize-none pr-10"
                    required
                  >

) } [V0_FILE]typescriptreact:file="app/community/new/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { ArrowLeft, Send, ImageIcon } from "lucide-react" // 카테고리 타입 정의 interface Category { id: string name: string icon: string } export default function NewPostPage() { const router = useRouter() const [title, setTitle] = useState("") const [content, setContent] = useState("") const [category, setCategory] = useState("question") const [submitting, setSubmitting] = useState(false) // 카테고리 목록 const categories: Category[] = [ { id: "question", name: "질문", icon: "❓" }, { id: "tip", name: "육아팁", icon: "💡" }, { id: "story", name: "육아일기", icon: "📝" }, { id: "product", name: "육아용품", icon: "🛒" }, { id: "health", name: "건강/의료", icon: "🏥" }, { id: "education", name: "교육", icon: "📚" }, ] // 게시글 작성 처리 const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!title.trim() || !content.trim() || !category) return setSubmitting(true) // 실제 구현에서는 API 호출 // try { // const response = await fetch('/api/community/posts', { // method: 'POST', // headers: { // 'Content-Type': 'application/json', // }, // body: JSON.stringify({ title, content, category }), // }); // const data = await response.json(); // router.push(`/community/${data.id}`); // } catch (error) { // console.error('게시글 작성에 실패했습니다:', error); // alert('게시글 작성에 실패했습니다. 다시 시도해주세요.'); // setSubmitting(false); // } // 더미 데이터 사용 setTimeout(() => { router.push("/community") }, 1000) } return (

커뮤니티로 돌아가기

새 게시글 작성

카테고리

제목 setTitle(e.target.value)} className="input w-full" placeholder="제목을 입력하세요" required />

내용

(실제 구현 시 이미지 업로드 기능이 추가될 예정입니다)

게시글 작성 가이드

• 질문은 구체적으로 작성하면 더 정확한 답변을 받을 수 있어요.
• 개인정보가 포함되지 않도록 주의해주세요.
• 다른 부모님들에게 도움이 될 수 있는 정보와 경험을 공유해주세요.
• 존중과 배려가 담긴 언어를 사용해주세요.

) } [V0_FILE]typescriptreact:file="app/community/loading.tsx" isMerged="true" export default function Loading() { return (

커뮤니티 로딩 중...

) } [V0_FILE]typescriptreact:file="app/community/[id]/loading.tsx" isMerged="true" export default function Loading() { return (

게시글 로딩 중...

) } [V0_FILE]typescriptreact:file="app/community/new/loading.tsx" isMerged="true" export default function Loading() { return (

페이지 로딩 중...

) } [V0_FILE]typescriptreact:file="components/chatbot/baby-face-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" interface BabyFaceButtonProps { onClick: () => void isOpen: boolean } export default function BabyFaceButton({ onClick, isOpen }: BabyFaceButtonProps) { return (

{!isOpen && (

)} {!isOpen && ( 육아 도움이 필요하세요? )}

) } [V0_FILE]typescriptreact:file="app/about/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/recipe/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/recipe/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { ArrowLeft, Search, Clock, Utensils, ChevronDown, ChevronUp, Info } from "lucide-react" // 레시피 타입 정의 interface Recipe { id: string title: string description: string ageGroup: "4-6" | "7-9" | "10-12" | "12+" prepTime: number difficulty: "쉬움" | "보통" | "어려움" ingredients: string[] steps: string[] tips?: string image: string tags: string[] } export default function RecipePage() { const [searchTerm, setSearchTerm] = useState("") const [selectedAgeGroup, setSelectedAgeGroup] = useState(null) const [expandedRecipe, setExpandedRecipe] = useState(null) // 연령대 필터 옵션 const ageGroups = [ { id: "4-6", label: "4-6개월" }, { id: "7-9", label: "7-9개월" }, { id: "10-12", label: "10-12개월" }, { id: "12+", label: "12개월 이상" }, ] // 샘플 레시피 데이터 const recipes: Recipe[] = [ { id: "1", title: "쌀미음", description: "아기의 첫 이유식으로 적합한 부드러운 쌀미음입니다.", ageGroup: "4-6", prepTime: 20, difficulty: "쉬움", ingredients: ["쌀 2큰술", "물 1컵"], steps: [ "쌀을 깨끗이 씻어 30분간 불려주세요.", "불린 쌀과 물을 냄비에 넣고 끓여주세요.", "쌀이 퍼지면 믹서기로 곱게 갈아주세요.", "체에 걸러 부드러운 미음을 만들어주세요.", ], tips: "처음에는 묽은 상태로 시작하여 점차 농도를 높여가세요.", image: "https://images.unsplash.com/photo-1516684732162-798a0062be99?q=80&w=774&auto=format&fit=crop", tags: ["첫 이유식", "곡류", "기본"], }, { id: "2", title: "당근 퓨레", description: "비타민이 풍부한 달콤한 당근 퓨레입니다.", ageGroup: "4-6", prepTime: 15, difficulty: "쉬움", ingredients: ["당근 1/2개", "물 1/4컵"], steps: [ "당근을 깨끗이 씻고 껍질을 벗겨 작게 잘라주세요.", "냄비에 물을 넣고 당근이 부드러워질 때까지 삶아주세요.", "삶은 당근을 믹서기로 곱게 갈아주세요.", "필요에 따라 물을 조금 더 넣어 농도를 조절하세요.", ], image: "https://images.unsplash.com/photo-1590165482129-1b8b27698780?q=80&w=774&auto=format&fit=crop", tags: ["채소", "비타민A", "첫 이유식"], }, { id: "3", title: "사과 퓨레", description: "자연의 단맛을 느낄 수 있는 사과 퓨레입니다.", ageGroup: "4-6", prepTime: 15, difficulty: "쉬움", ingredients: ["사과 1/2개", "물 약간"], steps: [ "사과를 깨끗이 씻고 껍질을 벗겨 작게 잘라주세요.", "냄비에 물을 조금 넣고 사과가 부드러워질 때까지 삶아주세요.", "삶은 사과를 믹서기로 곱게 갈아주세요.", ], tips: "처음에는 사과 알레르기 반응을 확인하기 위해 소량만 시도해보세요.", image: "https://images.unsplash.com/photo-1568909344668-6f14a07b56a0?q=80&w=775&auto=format&fit=crop", tags: ["과일", "첫 이유식", "자연당"], }, { id: "4", title: "고구마 퓨레", description: "달콤하고 영양가 높은 고구마 퓨레입니다.", ageGroup: "4-6", prepTime: 20, difficulty: "쉬움", ingredients: ["고구마 1/4개", "물 약간"], steps: [ "고구마를 깨끗이 씻고 껍질을 벗겨 작게 잘라주세요.", "냄비에 물을 넣고 고구마가 부드러워질 때까지 삶아주세요.", "삶은 고구마를 믹서기로 곱게 갈아주세요.", "필요에 따라 물을 조금 더 넣어 농도를 조절하세요.", ], image: "https://images.pexels.com/photos/89247/pexels-photo-89247.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", tags: ["채소", "첫 이유식", "자연당"], }, { id: "5", title: "단호박 퓨레", description: "달콤하고 영양가 높은 단호박 퓨레입니다.", ageGroup: "4-6", prepTime: 25, difficulty: "쉬움", ingredients: ["단호박 1/8개", "물 약간"], steps: [ "단호박을 깨끗이 씻고 껍질을 벗겨 작게 잘라주세요.", "냄비에 물을 넣고 단호박이 부드러워질 때까지 삶아주세요.", "삶은 단호박을 믹서기로 곱게 갈아주세요.", "필요에 따라 물을 조금 더 넣어 농도를 조절하세요.", ], image: "https://images.unsplash.com/photo-1570586437263-ab629fccc818?q=80&w=870&auto=format&fit=crop", tags: ["채소", "첫 이유식", "자연당", "비타민A"], }, { id: "6", title: "쇠고기 미음", description: "철분이 풍부한 쇠고기 미음입니다.", ageGroup: "7-9", prepTime: 30, difficulty: "보통", ingredients: ["쌀 2큰술", "물 1컵", "쇠고기 다진 것 1큰술"], steps: [ "쌀을 깨끗이 씻어 30분간 불려주세요.", "쇠고기는 핏물을 제거하고 곱게 다져주세요.", "냄비에 불린 쌀, 물, 다진 쇠고기를 넣고 끓여주세요.", "쌀이 퍼지면 믹서기로 곱게 갈아주세요.", "체에 걸러 부드러운 미음을 만들어주세요.", ], tips: "처음 고기를 접할 때는 소량으로 시작하여 알레르기 반응을 확인하세요.", image: "https://images.unsplash.com/photo-1588168333986-5078d3ae3976?q=80&w=870&auto=format&fit=crop", tags: ["고기", "철분", "단백질"], }, { id: "7", title: "닭고기 채소 죽", description: "단백질과 비타민이 풍부한 닭고기 채소 죽입니다.", ageGroup: "7-9", prepTime: 35, difficulty: "보통", ingredients: ["쌀 3큰술", "물 1.5컵", "닭가슴살 다진 것 1큰술", "당근 다진 것 1작은술", "애호박 다진 것 1작은술"], steps: [ "쌀을 깨끗이 씻어 30분간 불려주세요.", "닭가슴살은 삶아서 곱게 다져주세요.", "당근과 애호박도 곱게 다져주세요.", "냄비에 불린 쌀, 물을 넣고 끓이다가 쌀이 반쯤 익으면 다진 닭가슴살과 채소를 넣어주세요.", "모든 재료가 부드럽게 익을 때까지 저어가며 끓여주세요.", ], image: "https://images.pexels.com/photos/6210959/pexels-photo-6210959.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", tags: ["고기", "채소", "단백질", "종합영양"], }, { id: "8", title: "참치 야채 죽", description: "오메가3가 풍부한 참치와 다양한 채소가 들어간 영양죽입니다.", ageGroup: "10-12", prepTime: 30, difficulty: "보통", ingredients: [ "쌀 4큰술", "물 2컵", "참치(기름 뺀 것) 2큰술", "당근 다진 것 1큰술", "애호박 다진 것 1큰술", "시금치 다진 것 1큰술", ], steps: [ "쌀을 깨끗이 씻어 30분간 불려주세요.", "참치는 기름을 빼고 곱게 으깨주세요.", "당근, 애호박, 시금치는 곱게 다져주세요.", "냄비에 불린 쌀, 물을 넣고 끓이다가 쌀이 반쯤 익으면 참치와 채소를 넣어주세요.", "모든 재료가 부드럽게 익을 때까지 저어가며 끓여주세요.", ], tips: "참치는 수은 함량이 있으므로 일주일에 1-2회 정도만 제공하세요.", image: "https://images.unsplash.com/photo-1565557623262-b51c2513a641?q=80&w=1671&auto=format&fit=crop", tags: ["생선", "채소", "오메가3", "종합영양"], }, { id: "9", title: "소고기 브로콜리 볶음", description: "철분과 비타민이 풍부한 소고기 브로콜리 볶음입니다.", ageGroup: "12+", prepTime: 20, difficulty: "보통", ingredients: [ "소고기 다진 것 3큰술", "브로콜리 작은 송이 3개", "당근 다진 것 1큰술", "간장 1/4작은술", "물 2큰술", ], steps: [ "브로콜리는 작은 송이로 나누어 살짝 데쳐주세요.", "당근은 곱게 다져주세요.", "팬에 소고기를 넣고 볶다가 당근을 넣고 함께 볶아주세요.", "브로콜리를 넣고 간장, 물을 넣어 살짝 더 볶아주세요.", "모든 재료가 익으면 불을 꺼주세요.", ], image: "https://images.pexels.com/photos/8297365/pexels-photo-8297365.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", tags: ["고기", "채소", "철분", "비타민"], }, { id: "10", title: "두부 야채 스크램블", description: "부드러운 두부와 채소를 섞은 영양 만점 스크램블입니다.", ageGroup: "12+", prepTime: 15, difficulty: "쉬움", ingredients: ["두부 1/4모", "당근 다진 것 1큰술", "애호박 다진 것 1큰술", "시금치 다진 것 1큰술", "물 1큰술"], steps: [ "두부는 으깨주세요.", "당근, 애호박, 시금치는 곱게 다져주세요.", "팬에 물을 조금 두르고 다진 채소를 볶아주세요.", "채소가 익으면 으깬 두부를 넣고 함께 볶아주세요.", "모든 재료가 익으면 불을 꺼주세요.", ], image: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=1180&auto=format&fit=crop", tags: ["두부", "채소", "단백질", "비타민"], }, ] // 레시피 필터링 const filteredRecipes = recipes.filter((recipe) => { // 연령대 필터링 if (selectedAgeGroup && recipe.ageGroup !== selectedAgeGroup) { return false } // 검색어 필터링 if ( searchTerm && !recipe.title.toLowerCase().includes(searchTerm.toLowerCase()) && !recipe.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ) { return false } return true }) // 레시피 확장/축소 토글 const toggleRecipe = (id: string) => { if (expandedRecipe === id) { setExpandedRecipe(null) } else { setExpandedRecipe(id) } } // 난이도에 따른 색상 반환 const getDifficultyColor = (difficulty: string) => { switch (difficulty) { case "쉬움": return "text-green-500" case "보통": return "text-yellow-500" case "어려움": return "text-red-500" default: return "text-gray-500" } } // 연령대에 따른 색상 반환 const getAgeGroupColor = (ageGroup: string) => { switch (ageGroup) { case "4-6": return "bg-baby-pink/10 text-baby-pink" case "7-9": return "bg-baby-blue/10 text-baby-blue" case "10-12": return "bg-baby-mint/10 text-baby-mint" case "12+": return "bg-baby-lavender/10 text-baby-lavender" default: return "bg-gray-100 text-gray-500" } } return (

홈으로 돌아가기

이유식 레시피

아이의 월령에 맞는 영양 가득한 이유식 레시피를 찾아보세요.
건강하고 맛있는 이유식으로 아이의 첫 식사 경험을 특별하게 만들어주세요.

{/* 검색 및 필터 섹션 */}

setSearchTerm(e.target.value)} placeholder="레시피 검색..." className="input w-full pl-10" />

{ageGroups.map((age) => ( ))}

{/* 이유식 가이드 */}

이유식 시작 가이드

이유식은 아기의 성장 단계에 맞게 단계적으로 진행하는 것이 중요합니다. 처음에는 한 가지 재료로 시작하여 알레르기 반응을 확인하고, 점차 다양한 재료를 조합해보세요.

4-6개월

첫 이유식 단계로 미음, 퓨레 형태의 부드러운 음식

7-9개월

으깬 음식, 부드러운 죽 형태로 질감 경험 시작

10-12개월

잘게 썬 음식, 손가락으로 집어먹는 음식 도입

12개월 이상

가족 음식에 가까운 형태, 다양한 식감과 맛 경험

{/* 레시피 목록 */}

{filteredRecipes.length === 0 ? (

검색 결과가 없습니다

다른 검색어나 필터를 선택해보세요

) : ( filteredRecipes.map((recipe) => (

toggleRecipe(recipe.id)}>

{ const target = e.target as HTMLImageElement target.src = `/placeholder.svg?height=300&width=400&text=${encodeURIComponent(recipe.title)}` }} />

{ageGroups.find((age) => age.id === recipe.ageGroup)?.label}

{recipe.title}

{expandedRecipe === recipe.id ? ( ) : ( )}

{recipe.description}

{recipe.tags.map((tag, index) => ( {tag} ))}

{recipe.prepTime}분

{recipe.difficulty}

{/* 확장된 레시피 상세 정보 */} {expandedRecipe === recipe.id && (

재료

{ingredient}

만드는 방법

{index + 1} {step}

{recipe.tips && (

팁

{recipe.tips}

)}

)) )}

{/* 이유식 주의사항 */}

이유식 주의사항

• 새로운 음식은 한 번에 하나씩 도입하고, 3-5일간 알레르기 반응을 관찰하세요.
• 꿀은 1세 미만의 아기에게 절대 주지 마세요. 유아 보툴리즘의 위험이 있습니다.
• 소금, 설탕은 가능한 첨가하지 마세요. 아기의 신장에 부담을 줄 수 있습니다.
• 견과류, 포도, 방울토마토 등 질식 위험이 있는 음식은 적절히 가공하여 제공하세요.
• 이유식은 신선하게 제공하고, 남은 음식은 냉장 보관 후 24시간 내에 사용하세요.

) } [V0_FILE]typescriptreact:file="app/sleep/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/sleep/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, Moon, Sun, Plus, Calendar, Clock, Trash2, Edit, Save, X } from "lucide-react" // 수면 기록 타입 정의 interface SleepRecord { id: string date: string startTime: string endTime: string duration: number // 분 단위 quality: 1 | 2 | 3 | 4 | 5 note?: string } export default function SleepTrackerPage() { const [sleepRecords, setSleepRecords] = useState([]) const [isAddingRecord, setIsAddingRecord] = useState(false) const [editingRecordId, setEditingRecordId] = useState(null) const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0]) const [startTime, setStartTime] = useState("20:00") const [endTime, setEndTime] = useState("07:00") const [quality, setQuality] = useState<1 | 2 | 3 | 4 | 5>(3) const [note, setNote] = useState("") const [activeTab, setActiveTab] = useState<"records" | "stats">("records") const [weeklyStats, setWeeklyStats] = useState<{ day: string; hours: number }[]>([]) const [averageSleep, setAverageSleep] = useState(0) // 더미 데이터 로드 useEffect(() => { const dummyData: SleepRecord[] = [ { id: "1", date: "2023-05-01", startTime: "20:30", endTime: "06:45", duration: 615, // 10시간 15분 quality: 4, note: "잘 잤어요. 중간에 한 번 깼지만 바로 다시 잠들었습니다.", }, { id: "2", date: "2023-05-02", startTime: "21:00", endTime: "07:00", duration: 600, // 10시간 quality: 5, note: "매우 잘 잤어요. 한 번도 안 깨고 푹 잤습니다.", }, { id: "3", date: "2023-05-03", startTime: "20:45", endTime: "05:30", duration: 525, // 8시간 45분 quality: 3, note: "중간에 두 번 깨서 수유했어요.", }, { id: "4", date: "2023-05-04", startTime: "21:15", endTime: "06:15", duration: 540, // 9시간 quality: 4, note: "잘 잤지만 아침에 일찍 깼어요.", }, { id: "5", date: "2023-05-05", startTime: "20:00", endTime: "06:30", duration: 630, // 10시간 30분 quality: 5, note: "오늘은 정말 잘 잤어요!", }, { id: "6", date: "2023-05-06", startTime: "21:30", endTime: "05:45", duration: 495, // 8시간 15분 quality: 2, note: "밤에 자주 깨서 힘들었어요.", }, { id: "7", date: "2023-05-07", startTime: "20:15", endTime: "07:15", duration: 660, // 11시간 quality: 4, note: "오랜만에 푹 잤어요.", }, ] setSleepRecords(dummyData) // 주간 통계 계산 calculateWeeklyStats(dummyData) }, []) // 주간 통계 계산 const calculateWeeklyStats = (records: SleepRecord[]) => { const days = ["일", "월", "화", "수", "목", "금", "토"] // 초기 통계 데이터 설정 - 각 요일에 기본값 할당 const stats = days.map((day) => ({ day, hours: 0 })) let totalHours = 0 let count = 0 // 각 기록에 대해 처리 records.forEach((record) => { const date = new Date(record.date) const dayIndex = date.getDay() // 0: 일요일, 1: 월요일, ... const hours = record.duration / 60 // 분을 시간으로 변환 // 해당 요일의 시간 업데이트 stats[dayIndex].hours = hours totalHours += hours count++ }) // 데이터가 없거나 부족한 경우를 위한 샘플 데이터 if (count < 3) { // 최소 3일 이상의 데이터가 없으면 샘플 데이터로 채움 stats[0].hours = stats[0].hours || 10 // 일요일 stats[1].hours = stats[1].hours || 9.5 // 월요일 stats[2].hours = stats[2].hours || 9 // 화요일 stats[3].hours = stats[3].hours || 10.2 // 수요일 stats[4].hours = stats[4].hours || 9.8 // 목요일 stats[5].hours = stats[5].hours || 8.5 // 금요일 stats[6].hours = stats[6].hours || 11 // 토요일 // 평균 계산을 위해 데이터 업데이트 totalHours = stats.reduce((sum, day) => sum + day.hours, 0) count = 7 } setWeeklyStats(stats) setAverageSleep(count > 0 ? totalHours / count : 0) } // 수면 시간 계산 (시작 시간과 종료 시간으로부터) const calculateDuration = (start: string, end: string): number => { const [startHour, startMinute] = start.split(":").map(Number) const [endHour, endMinute] = end.split(":").map(Number) let hours = endHour - startHour let minutes = endMinute - startMinute if (hours < 0) hours += 24 // 다음 날로 넘어간 경우 if (minutes < 0) { minutes += 60 hours -= 1 } return hours * 60 + minutes // 총 분 수 반환 } // 분을 시간:분 형식으로 변환 const formatDuration = (minutes: number): string => { const hours = Math.floor(minutes / 60) const mins = minutes % 60 return `${hours}시간 ${mins}분` } // 수면 기록 추가 const handleAddRecord = () => { const duration = calculateDuration(startTime, endTime) const newRecord: SleepRecord = { id: Date.now().toString(), date: selectedDate, startTime, endTime, duration, quality, note, } const updatedRecords = [...sleepRecords, newRecord] setSleepRecords(updatedRecords) calculateWeeklyStats(updatedRecords) // 폼 초기화 resetForm() } // 수면 기록 수정 const handleEditRecord = () => { if (!editingRecordId) return const duration = calculateDuration(startTime, endTime) const updatedRecords = sleepRecords.map((record) => record.id === editingRecordId ? { ...record, date: selectedDate, startTime, endTime, duration, quality, note } : record, ) setSleepRecords(updatedRecords) calculateWeeklyStats(updatedRecords) // 폼 초기화 resetForm() } // 수면 기록 삭제 const handleDeleteRecord = (id: string) => { const updatedRecords = sleepRecords.filter((record) => record.id !== id) setSleepRecords(updatedRecords) calculateWeeklyStats(updatedRecords) } // 수정 모드 시작 const startEditing = (record: SleepRecord) => { setEditingRecordId(record.id) setSelectedDate(record.date) setStartTime(record.startTime) setEndTime(record.endTime) setQuality(record.quality) setNote(record.note || "") setIsAddingRecord(true) } // 폼 초기화 const resetForm = () => { setIsAddingRecord(false) setEditingRecordId(null) setSelectedDate(new Date().toISOString().split("T")[0]) setStartTime("20:00") setEndTime("07:00") setQuality(3) setNote("") } // 수면 품질에 따른 이모지 반환 const getQualityEmoji = (quality: number) => { switch (quality) { case 1: return "😫" case 2: return "😔" case 3: return "😐" case 4: return "😊" case 5: return "😴" default: return "😐" } } // 날짜 포맷팅 const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long", }) } return (

홈으로 돌아가기

수면 패턴 트래커

아이의 수면 시간을 기록하고 패턴을 분석하여 건강한 수면 습관을 만들어보세요.

{/* 탭 메뉴 */}

{/* 수면 기록 탭 */} {activeTab === "records" && ( <> {/* 수면 기록 추가 버튼 */} {!isAddingRecord && (

)} {/* 수면 기록 폼 */} {isAddingRecord && (

{editingRecordId ? "수면 기록 수정" : "새 수면 기록 추가"}

날짜

setSelectedDate(e.target.value)} className="input w-full pl-10" required />

취침 시간

setStartTime(e.target.value)} className="input w-full pl-10" required />

기상 시간

setEndTime(e.target.value)} className="input w-full pl-10" required />

수면 품질

{[1, 2, 3, 4, 5].map((value) => ( ))}

매우 나쁨 나쁨 보통 좋음 매우 좋음

메모

setNote(e.target.value)}
                    className="input w-full h-24 resize-none"
                    placeholder="수면 중 특이사항이나 메모할 내용을 입력하세요..."
                  />
                </div>

<div className="flex justify-end space-x-2">
                  <button
                    type="button"
                    onClick={resetForm}
                    className="px-4 py-2 border border-gray-300 rounded-lg text-text-secondary hover:bg-gray-50 transition-colors"
                  >
                    취소
                  </button>
                  <button
                    type="button"
                    onClick={editingRecordId ? handleEditRecord : handleAddRecord}
                    className="px-4 py-2 bg-baby-blue text-white rounded-lg hover:bg-baby-blue/90 transition-colors flex items-center"
                  >
                    <Save size={18} className="mr-1" />
                    {editingRecordId ? "수정하기" : "저장하기"}
                  </button>
                </div>
              </div>
            )}

{/* 수면 기록 목록 */}
            <div className="space-y-4">
              {sleepRecords.length === 0 ? (
                <div className="bg-white rounded-xl shadow-md p-6 text-center">
                  <p className="text-text-secondary mb-2">아직 기록된 수면 데이터가 없습니다.</p>
                  <p className="text-text-light text-sm">위 버튼을 눌러 첫 수면 기록을 추가해보세요!</p>
                </div>
              ) : (
                sleepRecords
                  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
                  .map((record) => (
                    <div key={record.id} className="bg-white rounded-xl shadow-md p-6">
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-jua text-lg text-text-primary">{formatDate(record.date)}</h3>
                          <div className="flex items-center mt-1">
                            <Moon className="text-baby-blue mr-1" size={16} />
                            <span className="text-text-secondary">{record.startTime}</span>
                            <span className="mx-2 text-text-light">~</span>
                            <Sun className="text-baby-blue mr-1" size={16} />
                            <span className="text-text-secondary">{record.endTime}</span>
                            <span className="ml-2 text-baby-blue font-medium">{formatDuration(record.duration)}</span>
                          </div>
                        </div>
                        <div className="flex items-center">
                          <span className="text-2xl mr-2">{getQualityEmoji(record.quality)}</span>
                          <div className="flex space-x-1">
                            <button
                              onClick={() => startEditing(record)}
                              className="p-1 text-text-secondary hover:text-baby-blue transition-colors"
                            >
                              <Edit size={18} />
                            </button>
                            <button
                              onClick={() => handleDeleteRecord(record.id)}
                              className="p-1 text-text-secondary hover:text-red-500 transition-colors"
                            >
                              <Trash2 size={18} />
                            </button>
                          </div>
                        </div>
                      </div>
                      {record.note && (
                        <div className="mt-3 bg-gray-50 p-3 rounded-lg">
                          <p className="text-text-secondary text-sm">{record.note}</p>
                        </div>
                      )}
                    </div>
                  ))
              )}
            </div>
          </>
        )}

{/* 수면 통계 탭 */}
        {activeTab === "stats" && (
          <div className="bg-white rounded-xl shadow-md p-6">
            <h2 className="font-jua text-xl text-text-primary mb-6">주간 수면 통계</h2>

{/* 평균 수면 시간 */}
            <div className="bg-baby-blue/10 rounded-lg p-4 mb-6">
              <h3 className="font-jua text-lg text-text-primary mb-2">평균 수면 시간</h3>
              <div className="flex items-center justify-center">
                <Clock className="text-baby-blue mr-2" size={24} />
                <span className="text-3xl font-bold text-baby-blue">{averageSleep.toFixed(1)}</span>
                <span className="text-text-primary font-medium ml-1">시간</span>
              </div>
            </div>

{/* 주간 수면 차트 */}
            <div className="mb-6">
              <h3 className="font-jua text-lg text-text-primary mb-4">요일별 수면 시간</h3>
              <div className="h-80 bg-white p-4 rounded-lg relative border border-gray-200">
                {/* 그래프 영역 */}
                <div className="flex items-end justify-between h-full pt-4 pb-8">
                  {weeklyStats.map((day, index) => {
                    // 최대 12시간 기준으로 높이 계산 (0시간이면 0%, 12시간이면 100%)
                    const heightPercent = Math.min(Math.max((day.hours / 12) * 100, 5), 100)
                    return (
                      <div key={index} className="flex flex-col items-center w-full">
                        <div className="w-full flex justify-center h-full relative">
                          {/* 막대 그래프 - 점선 테두리 스타일 */}
                          <div
                            className="w-16 border-2 border-dashed border-red-500 rounded-sm flex items-end justify-center"
                            style={{ height: `${heightPercent}%` }}
                          >
                            {/* 시간 표시 - 막대 안에 표시 */}
                            <div className="text-sm font-bold text-red-500 absolute bottom-2">
                              {day.hours > 0 ? day.hours.toFixed(1) : "-"}
                            </div>
                          </div>
                        </div>
                        <div className="text-sm font-medium text-text-primary mt-2">{day.day}</div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>

{/* 수면 패턴 분석 */}
            <div className="bg-gray-50 rounded-lg p-4">
              <h3 className="font-jua text-lg text-text-primary mb-2">수면 패턴 분석</h3>
              <p className="text-text-secondary mb-4">최근 7일간의 수면 데이터를 기반으로 분석한 결과입니다.</p>
              <ul className="space-y-2">
                <li className="flex items-start">
                  <div className="w-2 h-2 rounded-full bg-baby-blue mt-2 mr-2"></div>
                  <span className="text-text-secondary">평균 취침 시간: 20:30</span>
                </li>
                <li className="flex items-start">
                  <div className="w-2 h-2 rounded-full bg-baby-blue mt-2 mr-2"></div>
                  <span className="text-text-secondary">평균 기상 시간: 06:30</span>
                </li>
                <li className="flex items-start">
                  <div className="w-2 h-2 rounded-full bg-baby-blue mt-2 mr-2"></div>
                  <span className="text-text-secondary">가장 긴 수면: 11시간 (일요일)</span>
                </li>
                <li className="flex items-start">
                  <div className="w-2 h-2 rounded-full bg-baby-blue mt-2 mr-2"></div>
                  <span className="text-text-secondary">가장 짧은 수면: 8시간 15분 (토요일)</span>
                </li>
              </ul>
            </div>
          </div>
        )}

{/* 수면 팁 */}
        <div className="mt-10 bg-baby-blue/10 rounded-xl p-6">
          <h3 className="font-jua text-xl text-text-primary mb-4">건강한 수면 습관 팁</h3>
          <ul className="space-y-2 text-text-secondary">
            <li className="flex items-start">
              <span className="text-baby-blue mr-2">•</span>
              <span>일정한 취침 시간과 기상 시간을 유지하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-blue mr-2">•</span>
              <span>취침 전 조용하고 편안한 환경을 만들어주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-blue mr-2">•</span>
              <span>적절한 실내 온도(18-21°C)를 유지하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-blue mr-2">•</span>
              <span>취침 전 목욕은 아이의 긴장을 풀어주고 수면의 질을 높여줍니다.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-blue mr-2">•</span>
              <span>백색 소음이나 자장가가 도움이 될 수 있습니다.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/page.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, MapPin, Search, Plus, Filter } from "lucide-react"

// 상품 타입 정의
interface Product {
  id: string
  title: string
  description: string
  price: number
  images: string[]
  category: string
  condition: "새상품" | "거의새것" | "사용감있음" | "많이사용함"
  location: {
    address: string
    lat: number
    lng: number
    distance?: number // km 단위
  }
  seller: {
    id: string
    name: string
    avatar?: string
    rating: number
  }
  createdAt: string
  views: number
  likes: number
  status: "판매중" | "예약중" | "판매완료"
}

// 카테고리 타입 정의
interface Category {
  id: string
  name: string
  icon: string
}

export default function MarketplacePage() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
  const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null)
  const [mapView, setMapView] = useState(false) // false: 목록 보기, true: 지도 보기
  const mapRef = useRef<HTMLDivElement>(null)
  const [mapLoaded, setMapLoaded] = useState(false)
  const kakaoMapRef = useRef<any>(null)
  const markersRef = useRef<any[]>([])

// 카테고리 목록
  const categories: Category[] = [
    { id: "all", name: "전체", icon: "🔍" },
    { id: "stroller", name: "유모차", icon: "🛒" },
    { id: "clothes", name: "의류", icon: "👕" },
    { id: "toys", name: "장난감", icon: "🧸" },
    { id: "books", name: "도서", icon: "📚" },
    { id: "furniture", name: "가구", icon: "🪑" },
    { id: "feeding", name: "수유용품", icon: "🍼" },
    { id: "diaper", name: "기저귀", icon: "👶" },
  ]

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const dummyProducts: Product[] = [
    {
      id: "1",
      title: "맘스터치 유모차 (6개월 사용)",
      description: "6개월 정도 사용한 맘스터치 유모차입니다. 상태 좋고 세탁 완료했습니다.",
      price: 150000,
      images: ["https://images.unsplash.com/photo-1591818320659-8c37c15d8c61?q=80&w=1974&auto=format&fit=crop"],
      category: "stroller",
      condition: "사용감있음",
      location: {
        address: "서울시 강남구 역삼동",
        lat: 37.5012,
        lng: 127.0396,
      },
      seller: {
        id: "user1",
        name: "역삼맘",
        avatar: "https://i.pravatar.cc/150?img=1",
        rating: 4.8,
      },
      createdAt: "2023-05-15T09:30:00Z",
      views: 45,
      likes: 5,
      status: "판매중",
    },
    {
      id: "2",
      title: "아기 옷 세트 (6-12개월)",
      description: "6-12개월 아기 옷 세트입니다. 10벌 정도 있고 상태 좋습니다.",
      price: 30000,
      images: ["https://images.unsplash.com/photo-1522771930-78848d9293e8?q=80&w=1971&auto=format&fit=crop"],
      category: "clothes",
      condition: "거의새것",
      location: {
        address: "서울시 강남구 삼성동",
        lat: 37.5088,
        lng: 127.0631,
      },
      seller: {
        id: "user2",
        name: "삼성맘",
        avatar: "https://i.pravatar.cc/150?img=2",
        rating: 4.5,
      },
      createdAt: "2023-05-14T15:45:00Z",
      views: 32,
      likes: 3,
      status: "판매중",
    },
    {
      id: "3",
      title: "피셔프라이스 아기체육관",
      description: "3개월 사용한 피셔프라이스 아기체육관입니다. 소리, 불빛 모두 정상 작동합니다.",
      price: 45000,
      images: ["https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?q=80&w=1975&auto=format&fit=crop"],
      category: "toys",
      condition: "거의새것",
      location: {
        address: "서울시 강남구 청담동",
        lat: 37.5244,
        lng: 127.0503,
      },
      seller: {
        id: "user3",
        name: "청담맘",
        avatar: "https://i.pravatar.cc/150?img=3",
        rating: 4.9,
      },
      createdAt: "2023-05-13T11:20:00Z",
      views: 67,
      likes: 8,
      status: "판매중",
    },
    {
      id: "4",
      title: "젤리캣 토끼인형 (새상품)",
      description: "선물 받았는데 중복이라 판매합니다. 새상품, 택 그대로 있어요.",
      price: 25000,
      images: ["https://images.unsplash.com/photo-1555448248-2571daf6344b?q=80&w=1974&auto=format&fit=crop"],
      category: "toys",
      condition: "새상품",
      location: {
        address: "서울시 강남구 대치동",
        lat: 37.5012,
        lng: 127.0537,
      },
      seller: {
        id: "user4",
        name: "대치맘",
        avatar: "https://i.pravatar.cc/150?img=4",
        rating: 4.7,
      },
      createdAt: "2023-05-12T14:10:00Z",
      views: 28,
      likes: 4,
      status: "판매중",
    },
    {
      id: "5",
      title: "아기 침대 (IKEA)",
      description: "1년 사용한 IKEA 아기 침대입니다. 매트리스 포함, 세탁 완료했습니다.",
      price: 80000,
      images: ["https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?q=80&w=2070&auto=format&fit=crop"],
      category: "furniture",
      condition: "사용감있음",
      location: {
        address: "서울시 강남구 논현동",
        lat: 37.5118,
        lng: 127.0216,
      },
      seller: {
        id: "user5",
        name: "논현맘",
        avatar: "https://i.pravatar.cc/150?img=5",
        rating: 4.6,
      },
      createdAt: "2023-05-11T10:05:00Z",
      views: 52,
      likes: 7,
      status: "판매중",
    },
  ]

// 사용자 위치 가져오기
  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setUserLocation({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          })
        },
        (error) => {
          console.error("위치 정보를 가져오는데 실패했습니다:", error)
          // 기본 위치 설정 (서울 시청)
          setUserLocation({ lat: 37.5665, lng: 126.978 })
        },
      )
    } else {
      console.error("이 브라우저에서는 위치 정보를 지원하지 않습니다.")
      // 기본 위치 설정 (서울 시청)
      setUserLocation({ lat: 37.5665, lng: 126.978 })
    }
  }, [])

// 상품 데이터 로드 및 거리 계산
  useEffect(() => {
    if (!userLocation) return

// 실제 구현에서는 API 호출
    // const fetchProducts = async () => {
    //   try {
    //     const response = await fetch(`/api/marketplace/products?lat=${userLocation.lat}&lng=${userLocation.lng}`);
    //     const data = await response.json();
    //     setProducts(data);
    //   } catch (error) {
    //     console.error('상품을 불러오는데 실패했습니다:', error);
    //   } finally {
    //     setLoading(false);
    //   }
    // };
    // fetchProducts();

// 더미 데이터 사용 및 거리 계산
    setTimeout(() => {
      const productsWithDistance = dummyProducts.map((product) => {
        const distance = calculateDistance(
          userLocation.lat,
          userLocation.lng,
          product.location.lat,
          product.location.lng,
        )
        return {
          ...product,
          location: {
            ...product.location,
            distance,
          },
        }
      })

// 3km 이내의 상품만 필터링
      const nearbyProducts = productsWithDistance.filter(
        (product) => product.location.distance !== undefined && product.location.distance <= 3,
      )

setProducts(nearbyProducts)
      setLoading(false)
    }, 1000)
  }, [userLocation])

// 지도 초기화 (Kakao Maps API 사용)
  useEffect(() => {
    if (!userLocation || !mapRef.current || mapLoaded || !mapView) return

// 이미 스크립트가 로드되어 있는지 확인
    if (window.kakao && window.kakao.maps) {
      initializeMap()
      return
    }

// Kakao Maps API 스크립트 로드
    const script = document.createElement("script")
    script.async = true
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=edc1ed236d8932d04e52fe2dfdb0c8d6&libraries=services&autoload=false`

script.onload = () => {
      window.kakao.maps.load(() => {
        initializeMap()
      })
    }

script.onerror = () => {
      console.error("Kakao Maps API 로드 실패")
      setLoading(false)
    }

document.head.appendChild(script)

function initializeMap() {
      try {
        // 지도 생성
        const map = new window.kakao.maps.Map(mapRef.current, {
          center: new window.kakao.maps.LatLng(userLocation.lat, userLocation.lng),
          level: 5,
        })

// 지도 객체를 ref에 저장
        kakaoMapRef.current = map

// 현재 위치 마커 생성
        const userMarker = new window.kakao.maps.Marker({
          position: new window.kakao.maps.LatLng(userLocation.lat, userLocation.lng),
          map: map,
        })

// 인포윈도우 생성
        const infowindow = new window.kakao.maps.InfoWindow({
          content: '<div style="padding:5px;font-size:12px;">내 위치</div>',
        })
        infowindow.open(map, userMarker)

// 상품 마커 생성
        products.forEach((product) => {
          const marker = new window.kakao.maps.Marker({
            position: new window.kakao.maps.LatLng(product.location.lat, product.location.lng),
            map: map,
          })

// 마커 클릭 이벤트
          window.kakao.maps.event.addListener(marker, "click", () => {
            const content = `
              <div style="padding:5px;width:200px;text-align:center;">
                <div style="font-weight:bold;font-size:14px;margin-bottom:5px;">${product.title}</div>
                <div style="font-size:12px;">${product.price.toLocaleString()}원</div>
              </div>
            `
            const infoWindow = new window.kakao.maps.InfoWindow({
              content: content,
              removable: true,
            })
            infoWindow.open(map, marker)
          })

markersRef.current.push(marker)
        })

setMapLoaded(true)
      } catch (error) {
        console.error("지도 초기화 중 오류:", error)
        setLoading(false)
      }
    }

return () => {
      if (script.parentNode) {
        document.head.removeChild(script)
      }
    }
  }, [userLocation, mapLoaded, mapView, products])

// 두 지점 간의 거리 계산 함수 (Haversine formula)
  const calculateDistance = (lat1: number, lon1: number, lat2: number, lon2: number) => {
    const R = 6371 // 지구 반경 (km)
    const dLat = ((lat2 - lat1) * Math.PI) / 180
    const dLon = ((lon2 - lon1) * Math.PI) / 180
    const a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
    const distance = R * c // 킬로미터 단위 거리
    return Number.parseFloat(distance.toFixed(1))
  }

// 상품 필터링
  const filteredProducts = products.filter((product) => {
    // 카테고리 필터링
    if (selectedCategory && selectedCategory !== "all" && product.category !== selectedCategory) {
      return false
    }
    // 검색어 필터링
    if (searchTerm && !product.title.toLowerCase().includes(searchTerm.toLowerCase())) {
      return false
    }
    return true
  })

// 카테고리 선택 처리
  const handleCategorySelect = (categoryId: string) => {
    setSelectedCategory(categoryId === "all" ? null : categoryId)
  }

<div className="text-center mb-10">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">육아용품</span> 중고거래
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            내 주변 3km 이내의 육아용품을 찾아보세요.
            <br />더 이상 사용하지 않는 물건은 판매하고, 필요한 물건은 합리적인 가격에 구매하세요.
          </p>
        </div>

{/* 검색 및 필터 섹션 */}
        <div className="bg-white rounded-xl shadow-md p-4 mb-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-grow">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="상품명 검색..."
                className="input w-full pl-10"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-light w-5 h-5" />
            </div>
            <Link
              href="/marketplace/new"
              className="btn btn-primary flex items-center justify-center whitespace-nowrap"
            >
              <Plus size={16} className="mr-1" />
              상품 등록하기
            </Link>
          </div>

{/* 뷰 전환 버튼 */}
        <div className="flex justify-center mb-6">
          <div className="bg-white rounded-full shadow-md p-1 flex">
            <button
              onClick={() => setMapView(false)}
              className={`px-4 py-2 rounded-full flex items-center ${
                !mapView ? "bg-baby-pink text-white" : "text-text-secondary"
              }`}
            >
              <Filter size={16} className="mr-1" />
              목록 보기
            </button>
            <button
              onClick={() => setMapView(true)}
              className={`px-4 py-2 rounded-full flex items-center ${
                mapView ? "bg-baby-pink text-white" : "text-text-secondary"
              }`}
            >
              <MapPin size={16} className="mr-1" />
              지도 보기
            </button>
          </div>
        </div>

{/* 로딩 상태 */}
        {loading ? (
          <div className="flex justify-center items-center py-12">
            <div className="animate-spin w-8 h-8 border-4 border-baby-pink border-t-transparent rounded-full"></div>
            <span className="ml-2 text-text-secondary">상품을 불러오는 중...</span>
          </div>
        ) : (
          <div className="flex flex-col lg:flex-row gap-6">
            {/* 지도 뷰 */}
            {mapView && (
              <div className="w-full">
                <div className="bg-white rounded-xl shadow-md overflow-hidden">
                  <div ref={mapRef} className="w-full h-[600px] bg-gray-100"></div>
                </div>
              </div>
            )}

{/* 목록 뷰 */}
            {!mapView && (
              <div className="w-full">
                {filteredProducts.length === 0 ? (
                  <div className="text-center py-12 bg-white rounded-xl shadow-md">
                    <p className="font-jua text-text-secondary mb-2">검색 결과가 없습니다</p>
                    <p className="text-text-light text-sm">다른 검색어나 카테고리를 선택해보세요</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {filteredProducts.map((product) => (
                      <Link
                        key={product.id}
                        href={`/marketplace/${product.id}`}
                        className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"
                      >
                        <div className="relative h-48">
                          <Image
                            src={product.images[0] || "/placeholder.svg?height=200&width=200"}
                            alt={product.title}
                            fill
                            className="object-cover"
                            unoptimized
                            onError={(e) => {
                              const target = e.target as HTMLImageElement
                              target.src = "/placeholder.svg?height=200&width=200&text=이미지 없음"
                            }}
                          />
                          <div className="absolute top-2 left-2 bg-baby-pink text-white px-2 py-1 rounded-full text-xs font-bold">
                            {product.status}
                          </div>
                          <div className="absolute bottom-2 right-2 bg-white/80 backdrop-blur-sm text-text-primary px-2 py-1 rounded-full text-xs font-bold flex items-center">
                            <MapPin size={12} className="mr-1" />
                            {product.location.distance}km
                          </div>
                        </div>
                        <div className="p-4">
                          <h3 className="font-medium text-text-primary line-clamp-1 mb-1">{product.title}</h3>
                          <p className="text-baby-pink font-bold text-lg mb-2">{product.price.toLocaleString()}원</p>
                          <p className="text-text-secondary text-sm line-clamp-2 mb-3">{product.description}</p>
                          <div className="flex justify-between items-center text-text-light text-xs">
                            <span>{product.location.address}</span>
                            <span>{formatDate(product.createdAt)}</span>
                          </div>
                        </div>
                      </Link>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        )}

{/* 정보 섹션 */}
        <div className="mt-12 bg-baby-pink/10 rounded-xl p-6">
          <h3 className="font-jua text-xl text-text-primary mb-4">중고거래 이용 안내</h3>
          <ul className="space-y-2 text-text-secondary">
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>내 위치 기준 3km 이내의 상품만 표시됩니다.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>직거래를 권장하며, 안전한 장소에서 거래하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>상품 상태를 정확히 확인하고 거래하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>판매자와 구매자 모두 예의를 지켜주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>거래 완료 후 상품 상태를 변경해주세요.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, Camera, X, MapPin, Save } from "lucide-react"

// 카테고리 타입 정의
interface Category {
  id: string
  name: string
  icon: string
}

export default function NewProductPage() {
  const router = useRouter()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [price, setPrice] = useState("")
  const [category, setCategory] = useState("")
  const [condition, setCondition] = useState<"새상품" | "거의새것" | "사용감있음" | "많이사용함">("새상품")
  const [images, setImages] = useState<string[]>([])
  const [userLocation, setUserLocation] = useState<{ lat: number; lng: number; address: string } | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const mapRef = useRef<HTMLDivElement>(null)
  const [mapLoaded, setMapLoaded] = useState(false)
  const kakaoMapRef = useRef<any>(null)

// 카테고리 목록
  const categories: Category[] = [
    { id: "stroller", name: "유모차", icon: "🛒" },
    { id: "clothes", name: "의류", icon: "👕" },
    { id: "toys", name: "장난감", icon: "🧸" },
    { id: "books", name: "도서", icon: "📚" },
    { id: "furniture", name: "가구", icon: "🪑" },
    { id: "feeding", name: "수유용품", icon: "🍼" },
    { id: "diaper", name: "기저귀", icon: "👶" },
  ]

// 사용자 위치 가져오기
  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude
          const lng = position.coords.longitude

// 좌표를 주소로 변환 (실제 구현에서는 Kakao Maps API 사용)
          setUserLocation({
            lat,
            lng,
            address: "서울시 강남구 역삼동", // 실제 구현에서는 API로 주소 가져오기
          })
        },
        (error) => {
          console.error("위치 정보를 가져오는데 실패했습니다:", error)
          // 기본 위치 설정 (서울 시청)
          setUserLocation({
            lat: 37.5665,
            lng: 126.978,
            address: "서울시 중구 세종대로",
          })
        },
      )
    } else {
      console.error("이 브라우저에서는 위치 정보를 지원하지 않습니다.")
      // 기본 위치 설정 (서울 시청)
      setUserLocation({
        lat: 37.5665,
        lng: 126.978,
        address: "서울시 중구 세종대로",
      })
    }
  }, [])

// 지도 초기화 (Kakao Maps API 사용)
  useEffect(() => {
    if (!userLocation || !mapRef.current || mapLoaded) return

// 이미 스크립트가 로드되어 있는지 확인
    if (window.kakao && window.kakao.maps) {
      initializeMap()
      return
    }

script.onload = () => {
      window.kakao.maps.load(() => {
        initializeMap()
      })
    }

document.head.appendChild(script)

// 지도 객체를 ref에 저장
        kakaoMapRef.current = map

// 현재 위치 마커 생성
        const marker = new window.kakao.maps.Marker({
          position: new window.kakao.maps.LatLng(userLocation.lat, userLocation.lng),
          map: map,
        })

// 인포윈도우 생성
        const infowindow = new window.kakao.maps.InfoWindow({
          content: '<div style="padding:5px;font-size:12px;">내 위치</div>',
        })
        infowindow.open(map, marker)

setMapLoaded(true)
      } catch (error) {
        console.error("지도 초기화 중 오류:", error)
      }
    }

return () => {
      if (script.parentNode) {
        document.head.removeChild(script)
      }
    }
  }, [userLocation, mapLoaded])

// 이미지 추가 처리
  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files) return

const newImages: string[] = [...images]

Array.from(files).forEach((file) => {
      const reader = new FileReader()
      reader.onload = (event) => {
        if (event.target?.result && typeof event.target.result === "string") {
          newImages.push(event.target.result)
          setImages([...newImages])
        }
      }
      reader.readAsDataURL(file)
    })
  }

// 이미지 삭제 처리
  const removeImage = (index: number) => {
    const newImages = [...images]
    newImages.splice(index, 1)
    setImages(newImages)
  }

// 폼 제출 처리
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!title || !description || !price || !category || !condition || images.length === 0) {
      alert("모든 필드를 입력해주세요.")
      return
    }

setSubmitting(true)

// 실제 구현에서는 API 호출
    // try {
    //   const response = await fetch('/api/marketplace/products', {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({
    //       title,
    //       description,
    //       price: parseInt(price),
    //       category,
    //       condition,
    //       images,
    //       location: userLocation,
    //     }),
    //   });
    //
    //   if (response.ok) {
    //     router.push('/marketplace');
    //   } else {
    //     throw new Error('상품 등록에 실패했습니다.');
    //   }
    // } catch (error) {
    //   console.error('상품 등록 오류:', error);
    //   alert('상품 등록에 실패했습니다. 다시 시도해주세요.');
    // } finally {
    //   setSubmitting(false);
    // }

// 더미 구현 (실제 API 호출 대신)
    setTimeout(() => {
      setSubmitting(false)
      alert("상품이 등록되었습니다!")
      router.push("/marketplace")
    }, 1500)
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-3xl">
        <div className="mb-6">
          <Link href="/marketplace" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            중고거래로 돌아가기
          </Link>
        </div>

<form onSubmit={handleSubmit} className="space-y-6">
            {/* 이미지 업로드 */}
            <div>
              <label className="block font-jua text-text-primary mb-2">상품 이미지</label>
              <div className="grid grid-cols-3 gap-2 mb-2">
                {images.map((image, index) => (
                  <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-gray-200">
                    <Image
                      src={image || "/placeholder.svg"}
                      alt={`상품 이미지 ${index + 1}`}
                      fill
                      className="object-cover"
                    />
                    <button
                      type="button"
                      onClick={() => removeImage(index)}
                      className="absolute top-1 right-1 bg-white rounded-full p-1 shadow-md"
                    >
                      <X size={14} className="text-text-secondary" />
                    </button>
                  </div>
                ))}
                {images.length < 5 && (
                  <button
                    type="button"
                    onClick={() => fileInputRef.current?.click()}
                    className="aspect-square rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center hover:border-baby-pink hover:bg-baby-pink/5 transition-colors"
                  >
                    <Camera size={24} className="text-text-secondary mb-1" />
                    <span className="text-text-secondary text-xs">사진 추가</span>
                  </button>
                )}
              </div>
              <input
                type="file"
                ref={fileInputRef}
                onChange={handleImageUpload}
                accept="image/*"
                multiple
                className="hidden"
              />
              <p className="text-text-light text-xs">최대 5장까지 등록 가능합니다.</p>
            </div>

{/* 제목 */}
            <div>
              <label htmlFor="title" className="block font-jua text-text-primary mb-2">
                제목
              </label>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="input w-full"
                placeholder="상품 제목을 입력하세요"
                required
              />
            </div>

{/* 카테고리 */}
            <div>
              <label htmlFor="category" className="block font-jua text-text-primary mb-2">
                카테고리
              </label>
              <select
                id="category"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                className="input w-full"
                required
              >
                <option value="">카테고리 선택</option>
                {categories.map((cat) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.icon} {cat.name}
                  </option>
                ))}
              </select>
            </div>

{/* 가격 */}
            <div>
              <label htmlFor="price" className="block font-jua text-text-primary mb-2">
                가격
              </label>
              <div className="relative">
                <input
                  type="number"
                  id="price"
                  value={price}
                  onChange={(e) => setPrice(e.target.value)}
                  className="input w-full pr-12"
                  placeholder="가격을 입력하세요"
                  min="0"
                  required
                />
                <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-secondary">원</div>
              </div>
            </div>

{/* 상품 상태 */}
            <div>
              <label className="block font-jua text-text-primary mb-2">상품 상태</label>
              <div className="grid grid-cols-2 gap-2">
                {(["새상품", "거의새것", "사용감있음", "많이사용함"] as const).map((state) => (
                  <button
                    key={state}
                    type="button"
                    onClick={() => setCondition(state)}
                    className={`py-2 px-4 rounded-lg border ${
                      condition === state
                        ? "border-baby-pink bg-baby-pink/10 text-baby-pink"
                        : "border-gray-200 text-text-secondary hover:border-baby-pink/50"
                    } transition-colors`}
                  >
                    {state}
                  </button>
                ))}
              </div>
            </div>

{/* 설명 */}
            <div>
              <label htmlFor="description" className="block font-jua text-text-primary mb-2">
                설명
              </label>
              <textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="input w-full min-h-[150px] resize-y"
                placeholder="상품에 대한 자세한 설명을 입력하세요..."
                required
              />
            </div>

{/* 거래 위치 */}
            <div>
              <label className="block font-jua text-text-primary mb-2">거래 위치</label>
              <div className="bg-gray-50 p-3 rounded-lg mb-2 flex items-center">
                <MapPin size={18} className="text-baby-pink mr-2" />
                <span className="text-text-secondary">{userLocation?.address || "위치 정보를 불러오는 중..."}</span>
              </div>
              <div ref={mapRef} className="w-full h-[200px] bg-gray-100 rounded-lg"></div>
            </div>

{/* 제출 버튼 */}
            <div className="pt-4">
              <button
                type="submit"
                disabled={submitting}
                className="btn btn-primary w-full flex items-center justify-center"
              >
                {submitting ? (
                  <>
                    <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></div>
                    등록 중...
                  </>
                ) : (
                  <>
                    <Save size={16} className="mr-2" />
                    상품 등록하기
                  </>
                )}
              </button>
            </div>
          </form>
        </div>

{/* 이용 안내 */}
        <div className="mt-8 bg-baby-pink/10 rounded-xl p-6">
          <h3 className="font-jua text-lg text-text-primary mb-4">상품 등록 안내</h3>
          <ul className="space-y-2 text-text-secondary text-sm">
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>상품 상태를 정확하게 기재해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>가격은 협의 가능한 경우 설명에 명시해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>상품 이미지는 실제 상품의 상태를 잘 보여주는 사진으로 등록해주세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>거래 위치는 실제 거래를 원하는 장소로 설정해주세요.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import {
  ArrowLeft,
  MapPin,
  Tag,
  Clock,
  MessageSquare,
  Heart,
  Share2,
  Flag,
  ChevronLeft,
  ChevronRight,
  Eye,
} from "lucide-react"

export default function ProductDetailPage() {
  const params = useParams()
  const router = useRouter()
  const productId = params.id as string

const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const [liked, setLiked] = useState(false)

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const dummyProduct: Product = {
    id: "1",
    title: "맘스터치 유모차 (6개월 사용)",
    description:
      "6개월 정도 사용한 맘스터치 유모차입니다. 상태 좋고 세탁 완료했습니다. 접이식이라 보관이 용이하고, 무게도 가벼워서 들고 다니기 편합니다. 바퀴 상태도 좋고, 브레이크도 정상 작동합니다. 직거래 우선이며, 강남역 근처에서 거래 가능합니다. 궁금한 점 있으시면 채팅 주세요!",
    price: 150000,
    images: [
      "https://images.unsplash.com/photo-1591818320659-8c37c15d8c61?q=80&w=1974&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1519689680058-324335c77eba?q=80&w=1770&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1519340241574-2cec6aef0c01?q=80&w=1932&auto=format&fit=crop",
    ],
    category: "stroller",
    condition: "사용감있음",
    location: {
      address: "서울시 강남구 역삼동",
      lat: 37.5012,
      lng: 127.0396,
      distance: 1.2,
    },
    seller: {
      id: "user1",
      name: "역삼맘",
      avatar: "https://i.pravatar.cc/150?img=1",
      rating: 4.8,
    },
    createdAt: "2023-05-15T09:30:00Z",
    views: 45,
    likes: 5,
    status: "판매중",
  }

// 상품 데이터 로드
  useEffect(() => {
    // 실제 구현에서는 API 호출
    // const fetchProduct = async () => {
    //   try {
    //     const response = await fetch(`/api/marketplace/products/${productId}`);
    //     const data = await response.json();
    //     setProduct(data);
    //   } catch (error) {
    //     console.error('상품을 불러오는데 실패했습니다:', error);
    //     router.push('/marketplace');
    //   } finally {
    //     setLoading(false);
    //   }
    // };
    // fetchProduct();

// 더미 데이터 사용
    setTimeout(() => {
      setProduct(dummyProduct)
      setLoading(false)
    }, 500)
  }, [productId, router])

// 이미지 이동 처리
  const handlePrevImage = () => {
    if (!product) return
    setCurrentImageIndex((prev) => (prev === 0 ? product.images.length - 1 : prev - 1))
  }

const handleNextImage = () => {
    if (!product) return
    setCurrentImageIndex((prev) => (prev === product.images.length - 1 ? 0 : prev + 1))
  }

// 좋아요 처리
  const handleLike = () => {
    setLiked(!liked)
    if (product) {
      setProduct({
        ...product,
        likes: liked ? product.likes - 1 : product.likes + 1,
      })
    }
  }

// 카테고리 이름 가져오기
  const getCategoryName = (categoryId: string) => {
    const categories: Record<string, string> = {
      stroller: "유모차",
      clothes: "의류",
      toys: "장난감",
      books: "도서",
      furniture: "가구",
      feeding: "수유용품",
      diaper: "기저귀",
    }
    return categories[categoryId] || categoryId
  }

if (loading) {
    return (
      <div className="min-h-screen py-8 px-4 bg-baby-bg flex justify-center items-center">
        <div className="animate-spin w-8 h-8 border-4 border-baby-pink border-t-transparent rounded-full"></div>
        <span className="ml-2 text-text-secondary">상품 정보를 불러오는 중...</span>
      </div>
    )
  }

if (!product) {
    return (
      <div className="min-h-screen py-8 px-4 bg-baby-bg">
        <div className="container mx-auto max-w-4xl text-center">
          <p className="text-text-secondary mb-4">상품을 찾을 수 없습니다.</p>
          <Link href="/marketplace" className="btn btn-primary">
            중고거래로 돌아가기
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-4xl">
        <div className="mb-6">
          <Link href="/marketplace" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            중고거래로 돌아가기
          </Link>
        </div>

<div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
          {/* 상품 이미지 슬라이더 */}
          <div className="relative h-96">
            <Image
              src={product.images[currentImageIndex] || "/placeholder.svg?height=400&width=800"}
              alt={product.title}
              fill
              className="object-contain"
              unoptimized
              onError={(e) => {
                const target = e.target as HTMLImageElement
                target.src = "/placeholder.svg?height=400&width=800&text=이미지 없음"
              }}
            />
            {product.images.length > 1 && (
              <>
                <button
                  onClick={handlePrevImage}
                  className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 rounded-full p-2 shadow-md"
                >
                  <ChevronLeft size={20} className="text-text-primary" />
                </button>
                <button
                  onClick={handleNextImage}
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 rounded-full p-2 shadow-md"
                >
                  <ChevronRight size={20} className="text-text-primary" />
                </button>
                <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 bg-white/80 rounded-full px-3 py-1 text-xs">
                  {currentImageIndex + 1} / {product.images.length}
                </div>
              </>
            )}
            <div className="absolute top-2 left-2 bg-baby-pink text-white px-3 py-1 rounded-full text-sm font-bold">
              {product.status}
            </div>
          </div>

{/* 상품 정보 */}
          <div className="p-6">
            <div className="flex items-center mb-2">
              <Tag size={16} className="text-baby-pink mr-2" />
              <span className="text-text-secondary text-sm">{getCategoryName(product.category)}</span>
              <span className="mx-2 text-text-light">•</span>
              <span className="text-text-secondary text-sm">{product.condition}</span>
            </div>

<h1 className="font-jua text-2xl text-text-primary mb-2">{product.title}</h1>
            <p className="text-baby-pink font-bold text-2xl mb-4">{product.price.toLocaleString()}원</p>

<div className="flex items-center justify-between mb-6">
              <div className="flex items-center">
                <Clock size={16} className="text-text-light mr-1" />
                <span className="text-text-light text-sm">{formatDate(product.createdAt)}</span>
              </div>
              <div className="flex items-center space-x-4">
                <span className="flex items-center text-text-light text-sm">
                  <MessageSquare size={16} className="mr-1" />
                  문의 {0}
                </span>
                <span className="flex items-center text-text-light text-sm">
                  <Heart size={16} className="mr-1" fill={liked ? "#FFD6E0" : "none"} />
                  관심 {product.likes}
                </span>
                <span className="flex items-center text-text-light text-sm">
                  <Eye size={16} className="mr-1" />
                  조회 {product.views}
                </span>
              </div>
            </div>

<div className="border-t border-gray-100 pt-4 mb-6">
              <p className="text-text-secondary whitespace-pre-line">{product.description}</p>
            </div>

<div className="bg-gray-50 p-4 rounded-lg mb-6">
              <div className="flex items-center mb-2">
                <MapPin size={16} className="text-baby-pink mr-2" />
                <span className="text-text-primary font-medium">거래 희망 장소</span>
              </div>
              <p className="text-text-secondary mb-1">{product.location.address}</p>
              <p className="text-text-light text-sm">내 위치에서 약 {product.location.distance}km</p>
            </div>

<div className="flex items-center justify-between mb-4">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full overflow-hidden mr-2">
                  <Image
                    src={product.seller.avatar || "/placeholder.svg?height=40&width=40"}
                    alt={product.seller.name}
                    width={40}
                    height={40}
                    className="object-cover"
                    unoptimized
                  />
                </div>
                <div>
                  <p className="font-medium text-text-primary">{product.seller.name}</p>
                  <div className="flex items-center">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        size={12}
                        className={i < Math.floor(product.seller.rating) ? "text-yellow-400" : "text-gray-300"}
                        fill={i < Math.floor(product.seller.rating) ? "currentColor" : "none"}
                      />
                    ))}
                    <span className="text-text-light text-xs ml-1">{product.seller.rating.toFixed(1)}</span>
                  </div>
                </div>
              </div>
              <Link href={`/marketplace/chat/${product.seller.id}`} className="btn btn-primary">
                채팅하기
              </Link>
            </div>
          </div>
        </div>

{/* 액션 버튼 */}
        <div className="flex justify-between mb-10">
          <button
            onClick={handleLike}
            className={`flex items-center px-4 py-2 rounded-lg ${
              liked ? "bg-baby-pink/10 text-baby-pink" : "bg-gray-100 text-text-secondary"
            } transition-colors`}
          >
            <Heart size={18} className="mr-1" fill={liked ? "#FFD6E0" : "none"} />
            관심 {product.likes}
          </button>
          <div className="flex space-x-2">
            <button className="flex items-center px-4 py-2 rounded-lg bg-gray-100 text-text-secondary hover:bg-gray-200 transition-colors">
              <Share2 size={18} className="mr-1" />
              공유
            </button>
            <button className="flex items-center px-4 py-2 rounded-lg bg-gray-100 text-text-secondary hover:bg-gray-200 transition-colors">
              <Flag size={18} className="mr-1" />
              신고
            </button>
          </div>
        </div>

{/* 비슷한 상품 추천 */}
        <div className="bg-white rounded-xl shadow-md p-6 mb-10">
          <h2 className="font-jua text-xl text-text-primary mb-4">비슷한 상품</h2>
          <p className="text-text-secondary mb-4">이 상품과 비슷한 다른 상품을 확인해보세요.</p>
          <div className="text-center py-8">
            <p className="text-text-light">실제 구현 시 비슷한 상품이 표시됩니다.</p>
          </div>
        </div>

{/* 안전 거래 안내 */}
        <div className="bg-baby-pink/10 rounded-xl p-6">
          <h3 className="font-jua text-xl text-text-primary mb-4">안전 거래 안내</h3>
          <ul className="space-y-2 text-text-secondary">
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>직거래 시 밝고 안전한 공공장소에서 거래하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>상품을 직접 확인한 후 결제하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>계좌이체 시 판매자의 신원을 확인하세요.</span>
            </li>
            <li className="flex items-start">
              <span className="text-baby-pink mr-2">•</span>
              <span>거래 내용은 채팅으로 기록해두세요.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  )
}

// Star 컴포넌트 (Lucide-React에 없는 경우를 대비)
function Star(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-pink border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-pink border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/marketplace/new/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin w-10 h-10 border-4 border-baby-pink border-t-transparent rounded-full"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, Heart, Calendar, Droplet, ShoppingBag, Video, MapPin, Users, Bot, Check } from "lucide-react"

export default function AboutPage() {
  return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto max-w-5xl">
        <div className="mb-6">
          <Link href="/" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            홈으로 돌아가기
          </Link>
        </div>

{/* Hero Section */}
        <section className="bg-white rounded-2xl shadow-md p-8 mb-10 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-baby-pink rounded-full opacity-10 -z-10 transform translate-x-1/3 -translate-y-1/3"></div>
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-baby-blue rounded-full opacity-10 -z-10 transform -translate-x-1/3 translate-y-1/3"></div>

<div className="flex flex-col md:flex-row items-center gap-8">
            <div className="md:w-1/2">
              <h1 className="font-jua text-4xl text-text-primary mb-6">
                <span className="text-baby-pink">육시끝</span>이란?
              </h1>
              <p className="text-text-secondary mb-4">
                <strong className="font-jua">육시끝</strong>은 <span className="text-baby-pink font-medium">육</span>
                아의 <span className="text-baby-pink font-medium">시</span>작과{" "}
                <span className="text-baby-pink font-medium">끝</span>을 함께하는 종합 육아 서비스입니다.
              </p>
              <p className="text-text-secondary mb-6">
                아이를 키우는 부모님들의 일상을 더 편리하고 즐겁게 만들기 위해 다양한 기능을 제공합니다. 육아일기,
                분유체크, 육아용품 추천, 주변 시설 찾기 등 육아에 필요한 모든 것을 한 곳에서 만나보세요.
              </p>
              <div className="flex items-center text-baby-pink">
                <Heart className="mr-2" size={20} />
                <p className="font-jua">사랑하는 아이와 함께하는 모든 순간을 더 특별하게</p>
              </div>
            </div>
            <div className="md:w-1/2">
              <div className="relative">
                <div className="bg-white p-2 rounded-2xl shadow-md overflow-hidden">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/baby.jpg-Z0CWsdkItednmZxbTe5mUn6RlCFwED.jpeg"
                    alt="행복한 아이"
                    width={500}
                    height={400}
                    className="rounded-xl w-full h-auto object-cover"
                  />
                </div>
                <div className="absolute -bottom-4 -right-4 w-20 h-20 bg-baby-yellow rounded-full flex items-center justify-center text-white font-jua text-xl rotate-12 border-4 border-white shadow-md">
                  NEW
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Our Mission */}
        <section className="bg-white rounded-2xl shadow-md p-8 mb-10">
          <h2 className="font-jua text-3xl text-text-primary mb-6 text-center">
            우리의 <span className="text-baby-blue">미션</span>
          </h2>
          <div className="max-w-3xl mx-auto">
            <p className="text-text-secondary text-center mb-8">
              육시끝은 부모님들이 아이와 함께하는 소중한 순간을 더 편리하게 기록하고, 필요한 정보를 쉽게 찾을 수 있도록
              돕는 것을 목표로 합니다. 육아의 모든 과정에서 부모님들의 든든한 동반자가 되어 행복한 육아 경험을 만들어
              나가겠습니다.
            </p>

<div className="bg-baby-blue/10 rounded-xl p-6 text-center">
                <div className="w-16 h-16 rounded-full bg-baby-blue/20 flex items-center justify-center mx-auto mb-4">
                  <Users className="w-8 h-8 text-baby-blue" />
                </div>
                <h3 className="font-jua text-xl text-text-primary mb-2">소통과 공유</h3>
                <p className="text-text-secondary text-sm">
                  다른 부모님들과 육아 경험을 나누고 유용한 정보를 공유할 수 있습니다.
                </p>
              </div>

{/* Main Features */}
        <section className="bg-white rounded-2xl shadow-md p-8 mb-10">
          <h2 className="font-jua text-3xl text-text-primary mb-8 text-center">
            주요 <span className="text-baby-pink">기능</span>
          </h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* 육아 다이어리 */}
            <div className="bg-gradient-to-br from-white to-baby-pink/10 rounded-xl p-6 shadow-sm border border-baby-pink/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-pink/20 rounded-full p-3">
                  <Calendar className="w-8 h-8 text-baby-pink" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">육아 다이어리</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">아이의 소중한 순간을 기록하세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                날짜별, 주기별, 월별, 연도별로 아이의 성장 사진과 일상을 간편하게 기록하고 추억을 간직할 수 있습니다. 첫
                걸음마, 첫 단어 등 특별한 순간을 놓치지 마세요.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-pink mr-2" />
                  <span className="text-text-secondary text-sm">일별 기록</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-pink mr-2" />
                  <span className="text-text-secondary text-sm">주별 성장</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-pink mr-2" />
                  <span className="text-text-secondary text-sm">월별 앨범</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-pink mr-2" />
                  <span className="text-text-secondary text-sm">연도별 타임라인</span>
                </div>
              </div>
            </div>

{/* 분유체크 */}
            <div className="bg-gradient-to-br from-white to-baby-blue/10 rounded-xl p-6 shadow-sm border border-baby-blue/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-blue/20 rounded-full p-3">
                  <Droplet className="w-8 h-8 text-baby-blue" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">분유체크</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">아이의 분유 섭취량을 관리하세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                아이의 분유 섭취량을 간편하게 기록하고 통계를 확인할 수 있습니다. 일별, 주별, 월별 분유량 변화를
                그래프로 확인하여 아이의 수유 패턴을 파악해보세요.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-blue mr-2" />
                  <span className="text-text-secondary text-sm">간편한 기록</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-blue mr-2" />
                  <span className="text-text-secondary text-sm">통계 그래프</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-blue mr-2" />
                  <span className="text-text-secondary text-sm">수유 패턴 분석</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-blue mr-2" />
                  <span className="text-text-secondary text-sm">알림 설정</span>
                </div>
              </div>
            </div>

{/* 육아 필수템 */}
            <div className="bg-gradient-to-br from-white to-baby-lavender/10 rounded-xl p-6 shadow-sm border border-baby-lavender/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-lavender/20 rounded-full p-3">
                  <ShoppingBag className="w-8 h-8 text-baby-lavender" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">육아 필수템</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">최적의 육아용품을 추천받으세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                아이의 월령에 맞는 육아 필수 아이템을 추천받고, 다른 부모님들의 리뷰를 확인할 수 있습니다. 쿠팡 최저가
                정보로 합리적인 가격에 구매하세요.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-lavender mr-2" />
                  <span className="text-text-secondary text-sm">월령별 추천</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-lavender mr-2" />
                  <span className="text-text-secondary text-sm">사용자 리뷰</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-lavender mr-2" />
                  <span className="text-text-secondary text-sm">최저가 정보</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-lavender mr-2" />
                  <span className="text-text-secondary text-sm">카테고리별 검색</span>
                </div>
              </div>
            </div>

{/* 육아정보 영상 */}
            <div className="bg-gradient-to-br from-white to-baby-mint/10 rounded-xl p-6 shadow-sm border border-baby-mint/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-mint/20 rounded-full p-3">
                  <Video className="w-8 h-8 text-baby-mint" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">육아정보 영상</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">유용한 육아 정보를 영상으로 확인하세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                육아 전문가들의 유용한 정보와 팁을 담은 영상을 카테고리별로 확인할 수 있습니다. 영유아 발달, 육아 팁,
                놀이 활동 등 다양한 주제의 영상을 제공합니다.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-mint mr-2" />
                  <span className="text-text-secondary text-sm">전문가 영상</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-mint mr-2" />
                  <span className="text-text-secondary text-sm">카테고리별 분류</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-mint mr-2" />
                  <span className="text-text-secondary text-sm">월령별 추천</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-mint mr-2" />
                  <span className="text-text-secondary text-sm">즐겨찾기 기능</span>
                </div>
              </div>
            </div>

{/* 주변시설 찾기 */}
            <div className="bg-gradient-to-br from-white to-baby-yellow/10 rounded-xl p-6 shadow-sm border border-baby-yellow/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-yellow/20 rounded-full p-3">
                  <MapPin className="w-8 h-8 text-baby-yellow" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">주변시설 찾기</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">내 주변의 육아 관련 시설을 찾아보세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                내 위치 주변의 소아과, 어린이집, 놀이터 등 육아 관련 시설을 쉽게 찾을 수 있습니다. 시설 정보와 리뷰를
                확인하고 길찾기 기능으로 편리하게 방문하세요.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-yellow mr-2" />
                  <span className="text-text-secondary text-sm">위치 기반 검색</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-yellow mr-2" />
                  <span className="text-text-secondary text-sm">시설 정보 제공</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-yellow mr-2" />
                  <span className="text-text-secondary text-sm">사용자 리뷰</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-yellow mr-2" />
                  <span className="text-text-secondary text-sm">길찾기 기능</span>
                </div>
              </div>
            </div>

{/* 육아용품 중고거래 - 새로 추가된 기능 */}
            <div className="bg-gradient-to-br from-white to-baby-orange/10 rounded-xl p-6 shadow-sm border border-baby-orange/20">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-baby-orange/20 rounded-full p-3">
                  <ShoppingBag className="w-8 h-8 text-baby-orange" />
                </div>
                <h3 className="font-jua text-xl text-text-primary">육아용품 중고거래</h3>
              </div>
              <h4 className="font-jua text-lg text-text-primary mb-2">주변 3km 이내 중고 육아용품을 거래하세요</h4>
              <p className="text-text-secondary mb-4 text-sm">
                위치 기반으로 주변 3km 이내의 중고 육아용품을 찾고 거래할 수 있습니다. 더 이상 사용하지 않는 육아용품을
                판매하거나, 필요한 물품을 합리적인 가격에 구매해보세요.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="flex items-center">
                  <Check size={16} className="text-baby-orange mr-2" />
                  <span className="text-text-secondary text-sm">위치 기반 검색</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-orange mr-2" />
                  <span className="text-text-secondary text-sm">상품 등록/판매</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-orange mr-2" />
                  <span className="text-text-secondary text-sm">채팅 거래</span>
                </div>
                <div className="flex items-center">
                  <Check size={16} className="text-baby-orange mr-2" />
                  <span className="text-text-secondary text-sm">지도 보기</span>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* Testimonials */}
        <section className="bg-white rounded-2xl shadow-md p-8 mb-10">
          <h2 className="font-jua text-3xl text-text-primary mb-8 text-center">
            사용자 <span className="text-baby-blue">후기</span>
          </h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-baby-bg rounded-xl p-6 relative">
              <div className="absolute -top-3 -left-3 text-4xl">❝</div>
              <div className="pt-4">
                <p className="text-text-secondary mb-4">
                  육시끝 덕분에 아이의 성장 과정을 체계적으로 기록할 수 있게 되었어요. 특히 육아일기 기능이 정말
                  편리해요. 나중에 아이가 크면 함께 보며 추억을 나눌 수 있을 것 같아 기대돼요!
                </p>
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-baby-pink/20 flex items-center justify-center mr-3">
                    <span className="font-jua text-baby-pink">김</span>
                  </div>
                  <div>
                    <p className="font-jua text-text-primary">김서연 님</p>
                    <p className="text-text-light text-xs">8개월 아기 엄마</p>
                  </div>
                </div>
              </div>
            </div>

<div className="bg-baby-bg rounded-xl p-6 relative">
              <div className="absolute -top-3 -left-3 text-4xl">❝</div>
              <div className="pt-4">
                <p className="text-text-secondary mb-4">
                  육아 필수템 추천이 정말 도움이 됐어요. 첫 아이라 뭘 사야 할지 몰랐는데, 월령별 추천과 다른 부모님들의
                  리뷰를 보고 현명하게 구매할 수 있었습니다.
                </p>
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-baby-lavender/20 flex items-center justify-center mr-3">
                    <span className="font-jua text-baby-lavender">박</span>
                  </div>
                  <div>
                    <p className="font-jua text-text-primary">박지민 님</p>
                    <p className="text-text-light text-xs">4개월 아기 엄마</p>
                  </div>
                </div>
              </div>
            </div>

<div className="bg-baby-bg rounded-xl p-6 relative">
              <div className="absolute -top-3 -left-3 text-4xl">❝</div>
              <div className="pt-4">
                <p className="text-text-secondary mb-4">
                  육아 커뮤니티에서 다른 부모님들과 정보를 공유하는 게 큰 위로가 돼요. 육아 챗봇도 언제든지 질문할 수
                  있어서 든든한 육아 도우미 같아요!
                </p>
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full bg-baby-mint/20 flex items-center justify-center mr-3">
                    <span className="font-jua text-baby-mint">최</span>
                  </div>
                  <div>
                    <p className="font-jua text-text-primary">최유진 님</p>
                    <p className="text-text-light text-xs">18개월 아기 엄마</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="bg-gradient-to-r from-baby-pink/20 to-baby-blue/20 rounded-2xl shadow-md p-8 text-center">
          <h2 className="font-jua text-3xl text-text-primary mb-6">
            지금 바로 <span className="text-baby-pink">육시끝</span>과 함께하세요
          </h2>
          <p className="text-text-secondary mb-8 max-w-2xl mx-auto">
            육시끝과 함께 더 편리하고 즐거운 육아 생활을 시작해보세요. 소중한 아이와의 모든 순간을 더 특별하게 만들어
            드립니다.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/signup" className="btn btn-primary">
              무료로 시작하기
            </Link>
            <Link href="/" className="btn btn-outline">
              홈으로 돌아가기
            </Link>
          </div>
        </section>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true"
import type { Metadata } from "next"
import Link from "next/link"
import { ChevronDown } from "lucide-react"

export const metadata: Metadata = {
  title: "자주 묻는 질문 | 육시끝",
  description: "육시끝 서비스에 대한 자주 묻는 질문과 답변을 확인하세요.",
}

const FAQPage = () => {
  return (
    <main className="container mx-auto px-4 py-12">
      <div className="max-w-4xl mx-auto">
        <h1 className="font-jua text-4xl text-center text-text-primary mb-8">
          자주 <span className="text-baby-pink">묻는 질문</span>
        </h1>

<p className="text-text-secondary text-center mb-12">
          육시끝 서비스 이용 중 궁금한 점이 있으신가요? 자주 묻는 질문과 답변을 확인해보세요.
        </p>

<div className="space-y-6">
          {faqData.map((category, index) => (
            <div key={index} className="mb-10">
              <h2 className="font-jua text-2xl text-baby-blue mb-6">{category.category}</h2>

<div className="space-y-4">
                {category.items.map((item, itemIndex) => (
                  <details
                    key={itemIndex}
                    className="group bg-white rounded-xl shadow-sm overflow-hidden border border-baby-lavender/20"
                  >
                    <summary className="flex items-center justify-between gap-2 p-6 cursor-pointer list-none">
                      <h3 className="text-lg font-medium text-text-primary">{item.question}</h3>
                      <ChevronDown className="h-5 w-5 text-baby-lavender transition-transform group-open:rotate-180" />
                    </summary>
                    <div className="px-6 pb-6 pt-0">
                      <div className="text-text-secondary prose max-w-none">{item.answer}</div>
                    </div>
                  </details>
                ))}
              </div>
            </div>
          ))}
        </div>

<div className="mt-12 text-center">
          <p className="text-text-secondary mb-4">원하는 답변을 찾지 못하셨나요?</p>
          <Link
            href="/about"
            className="inline-block bg-baby-pink hover:bg-baby-pink/90 text-white font-medium py-2 px-6 rounded-full transition-colors"
          >
            서비스 소개 보기
          </Link>
        </div>
      </div>
    </main>
  )
}

const faqData = [
  {
    category: "계정 관리",
    items: [
      {
        question: "회원가입은 어떻게 하나요?",
        answer:
          "상단 메뉴에서 '회원가입' 버튼을 클릭하여 이메일 또는 소셜 계정으로 간편하게 가입할 수 있습니다. 이메일, 비밀번호, 닉네임을 입력하고 약관에 동의하면 가입이 완료됩니다.",
      },
      {
        question: "비밀번호를 잊어버렸어요. 어떻게 해야 하나요?",
        answer:
          "로그인 페이지에서 '비밀번호 찾기' 링크를 클릭하고 가입 시 사용한 이메일을 입력하세요. 비밀번호 재설정 링크가 이메일로 발송됩니다.",
      },
      {
        question: "프로필 정보는 어떻게 변경하나요?",
        answer:
          "로그인 후 상단 메뉴에서 프로필 아이콘을 클릭한 다음 '프로필 설정'에서 닉네임, 프로필 이미지, 아이 정보 등을 변경할 수 있습니다.",
      },
      {
        question: "회원 탈퇴는 어떻게 하나요?",
        answer:
          "프로필 설정 페이지 하단의 '계정 관리'에서 '회원 탈퇴' 버튼을 클릭하여 진행할 수 있습니다. 탈퇴 시 모든 데이터는 삭제되며 복구가 불가능하니 신중하게 결정해 주세요.",
      },
    ],
  },
  {
    category: "육아일기",
    items: [
      {
        question: "육아일기는 어떻게 작성하나요?",
        answer:
          "메인 메뉴에서 '육아일기'를 선택한 후 우측 하단의 '+' 버튼을 클릭하여 새 일기를 작성할 수 있습니다. 일기 유형(일간, 주간, 월간, 연간)을 선택하고 내용을 입력하세요.",
      },
      {
        question: "작성한 일기는 어디서 볼 수 있나요?",
        answer:
          "'육아일기' 메뉴에서 작성한 모든 일기를 확인할 수 있습니다. 상단 탭에서 일간, 주간, 월간, 연간 일기를 선택하여 볼 수 있습니다.",
      },
      {
        question: "일기에 사진을 추가할 수 있나요?",
        answer:
          "네, 일기 작성 시 '사진 추가' 버튼을 클릭하여 최대 5장의 사진을 추가할 수 있습니다. 추가된 사진은 일기와 함께 저장됩니다.",
      },
      {
        question: "작성한 일기를 수정하거나 삭제할 수 있나요?",
        answer:
          "네, 각 일기 상세 페이지에서 우측 상단의 메뉴 아이콘을 클릭하면 수정 또는 삭제 옵션을 선택할 수 있습니다.",
      },
    ],
  },
  {
    category: "분유체크",
    items: [
      {
        question: "분유체크 기능은 어떻게 사용하나요?",
        answer:
          "메인 메뉴에서 '분유체크'를 선택한 후, 분유 수유 시간과 양을 입력하고 '저장' 버튼을 클릭하면 기록이 저장됩니다.",
      },
      {
        question: "분유 수유 기록을 확인하는 방법은 무엇인가요?",
        answer:
          "'분유체크' 페이지에서 하단의 '기록 보기' 탭을 선택하면 일별, 주별로 분유 수유 기록을 확인할 수 있습니다. 그래프를 통해 수유 패턴도 확인 가능합니다.",
      },
      {
        question: "여러 아이의 분유 기록을 따로 관리할 수 있나요?",
        answer:
          "네, 프로필 설정에서 여러 아이 정보를 등록한 경우, 분유체크 페이지 상단에서 아이를 선택하여 각각의 기록을 따로 관리할 수 있습니다.",
      },
    ],
  },
  {
    category: "수면 패턴 트래커",
    items: [
      {
        question: "수면 패턴 트래커는 어떻게 사용하나요?",
        answer:
          "메인 메뉴에서 '수면 패턴 트래커'를 선택한 후, 아이의 취침 시간과 기상 시간을 입력하고 저장하면 됩니다. 낮잠 시간도 별도로 기록할 수 있습니다.",
      },
      {
        question: "수면 통계는 어떻게 확인하나요?",
        answer:
          "'수면 패턴 트래커' 페이지에서 '통계' 탭을 선택하면 일별, 주별, 월별 수면 시간과 패턴을 그래프로 확인할 수 있습니다.",
      },
      {
        question: "수면 알림 기능이 있나요?",
        answer:
          "네, 설정 메뉴에서 '수면 알림'을 활성화하면 일정한 수면 시간에 알림을 받을 수 있습니다. 아이의 수면 루틴 형성에 도움이 됩니다.",
      },
    ],
  },
  {
    category: "육아용품 중고거래",
    items: [
      {
        question: "중고 육아용품은 어떻게 등록하나요?",
        answer:
          "'육아용품 중고거래' 페이지에서 우측 하단의 '+' 버튼을 클릭하여 상품을 등록할 수 있습니다. 사진, 제목, 가격, 상태, 설명을 입력하고 현재 위치를 확인한 후 등록하세요.",
      },
      {
        question: "내 주변의 중고 육아용품은 어떻게 찾나요?",
        answer:
          "'육아용품 중고거래' 페이지에서 지도 보기를 선택하면 현재 위치 기준 3km 이내의 모든 중고 육아용품을 확인할 수 있습니다. 목록 보기에서는 카테고리별로 필터링도 가능합니다.",
      },
      {
        question: "판매자와 어떻게 연락할 수 있나요?",
        answer:
          "관심 있는 상품의 상세 페이지에서 '채팅하기' 버튼을 클릭하면 판매자와 1:1 채팅을 시작할 수 있습니다. 채팅을 통해 거래 장소와 시간을 조율하세요.",
      },
      {
        question: "거래 완료 후 평가는 어떻게 하나요?",
        answer:
          "거래가 완료된 후 '내 거래 내역'에서 해당 거래를 선택하고 '거래 완료' 버튼을 클릭하면 상대방에 대한 평가를 남길 수 있습니다. 이는 다른 사용자들의 안전한 거래에 도움이 됩니다.",
      },
    ],
  },
  {
    category: "기타",
    items: [
      {
        question: "육시끝 서비스는 무료인가요?",
        answer:
          "네, 육시끝의 기본 서비스는 모두 무료로 이용 가능합니다. 추후 일부 프리미엄 기능이 추가될 수 있으나, 현재는 모든 기능을 무료로 제공하고 있습니다.",
      },
      {
        question: "개인정보는 안전하게 보호되나요?",
        answer:
          "네, 육시끝은 사용자의 개인정보 보호를 최우선으로 생각합니다. 모든 데이터는 암호화되어 저장되며, 개인정보처리방침에 따라 엄격하게 관리됩니다.",
      },
      {
        question: "모바일 앱도 있나요?",
        answer:
          "현재는 웹 서비스만 제공하고 있으나, 모바일 앱은 개발 중입니다. 출시 소식은 메인 페이지와 이메일을 통해 안내해 드릴 예정입니다.",
      },
      {
        question: "서비스 이용 중 오류가 발생했어요. 어떻게 해야 하나요?",
        answer:
          "서비스 이용 중 오류가 발생한 경우, 페이지를 새로고침하거나 브라우저를 재시작해 보세요. 문제가 지속되면 화면 하단의 이메일로 문의해 주시기 바랍니다.",
      },
    ],
  },
]

export default FAQPage
[V0_FILE]typescriptreact:file="app/faq/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="max-w-4xl mx-auto">
        <Skeleton className="h-12 w-64 mx-auto mb-8" />
        <Skeleton className="h-6 w-full max-w-2xl mx-auto mb-12" />

{[1, 2, 3].map((category) => (
          <div key={category} className="mb-10">
            <Skeleton className="h-8 w-48 mb-6" />

<div className="space-y-4">
              {[1, 2, 3, 4].map((item) => (
                <Skeleton key={item} className="h-24 w-full rounded-xl" />
              ))}
            </div>
          </div>
        ))}

<div className="mt-12 text-center">
          <Skeleton className="h-6 w-64 mx-auto mb-4" />
          <Skeleton className="h-10 w-40 mx-auto rounded-full" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Heart } from "lucide-react"

const Footer = () => {
  return (
    <footer className="bg-white pt-10 pb-6 border-t-2 border-baby-lavender/20 cloud-pattern">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 className="font-jua text-xl text-baby-pink mb-4">육시끝</h3>
            <p className="text-text-secondary text-base mb-4">
              육아의 시작과 끝을 함께하는 반응형 웹 애플리케이션으로, 부모님들에게 필요한 육아 정보와 기능을 제공합니다.
            </p>
            <div className="flex space-x-4">
              <Link href="#" className="text-baby-lavender hover:text-baby-pink transition-colors">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="w-5 h-5"
                >
                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                </svg>
              </Link>
              <Link href="#" className="text-baby-lavender hover:text-baby-pink transition-colors">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="w-5 h-5"
                >
                  <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
                </svg>
              </Link>
              <Link href="#" className="text-baby-lavender hover:text-baby-pink transition-colors">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="w-5 h-5"
                >
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
                </svg>
              </Link>
              <Link href="#" className="text-baby-lavender hover:text-baby-pink transition-colors">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="w-5 h-5"
                >
                  <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
                </svg>
              </Link>
            </div>
          </div>

<div>
            <h3 className="font-jua text-xl text-baby-blue mb-4">서비스</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/diary" className="text-text-secondary hover:text-baby-pink transition-colors text-base">
                  육아일기
                </Link>
              </li>
              <li>
                <Link href="/formula" className="text-text-secondary hover:text-baby-pink transition-colors">
                  분유체크
                </Link>
              </li>
              <li>
                <Link href="/products" className="text-text-secondary hover:text-baby-pink transition-colors">
                  육아필수템
                </Link>
              </li>
              <li>
                <Link href="/videos" className="text-text-secondary hover:text-baby-pink transition-colors">
                  육아영상
                </Link>
              </li>
              <li>
                <Link href="/map" className="text-text-secondary hover:text-baby-pink transition-colors">
                  주변시설
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-jua text-xl text-baby-mint mb-4">커뮤니티</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/community" className="text-text-secondary hover:text-baby-pink transition-colors">
                  자유게시판
                </Link>
              </li>
              <li>
                <Link href="/community/tips" className="text-text-secondary hover:text-baby-pink transition-colors">
                  육아팁
                </Link>
              </li>
              {/* 임시 숨김 처리
              <li>
                <Link href="/community/qna" className="text-text-secondary hover:text-baby-pink transition-colors">
                  질문과 답변
                </Link>
              </li>
              */}
              <li>
                <Link href="/marketplace" className="text-text-secondary hover:text-baby-pink transition-colors">
                  중고장터
                </Link>
              </li>
              {/* 임시 숨김 처리
              <li>
                <Link href="/events" className="text-text-secondary hover:text-baby-pink transition-colors">
                  이벤트
                </Link>
              </li>
              */}
            </ul>
          </div>

<ul className="space-y-2">
              <li>
                <Link href="/about" className="text-text-secondary hover:text-baby-pink transition-colors">
                  서비스 소개
                </Link>
              </li>
              <li>
                <Link href="/faq" className="text-text-secondary hover:text-baby-pink transition-colors">
                  자주 묻는 질문
                </Link>
              </li>
              {/* 임시 숨김 처리
              <li>
                <Link href="/contact" className="text-text-secondary hover:text-baby-pink transition-colors">
                  문의하기
                </Link>
              </li>
              <li>
                <Link href="/terms" className="text-text-secondary hover:text-baby-pink transition-colors">
                  이용약관
                </Link>
              </li>
              */}
              <li>
                <Link href="/privacy" className="text-text-secondary hover:text-baby-pink transition-colors">
                  개인정보처리방침
                </Link>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-baby-lavender/20 mt-8 pt-6 text-center">
          <p className="text-text-light text-sm flex items-center justify-center">
            Made with <Heart size={14} className="mx-1 text-baby-pink" /> for Parents
          </p>
          <p className="text-text-light text-sm mt-2 font-medium">
            © {new Date().getFullYear()}by.사랑하는 딸 제이를 키우면서 만든 제이아빠의 "육시끝". All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}

export default Footer
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { Calendar, Droplet, ShoppingBag, Video, MapPin, Users, MessageSquare, BarChart3, Baby, Bot } from "lucide-react"
import FeaturedProducts from "@/components/featured-products"
import { useEffect } from "react"

export default function Home() {
  // 페이지 로드 시 스크롤을 상단으로 이동
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [])

return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative py-12 md:py-20 overflow-hidden">
        {/* Decorative Background Elements */}
        <div className="absolute inset-0 baby-pattern opacity-50 -z-10"></div>
        <div className="absolute top-0 right-0 w-64 h-64 bg-baby-blue rounded-full opacity-20 -z-10 transform translate-x-1/3 -translate-y-1/3"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-baby-pink rounded-full opacity-20 -z-10 transform translate-x-1/3 translate-y-1/3"></div>
        <div className="absolute top-1/2 left-1/2 w-96 h-96 bg-baby-lavender rounded-full opacity-10 -z-10 transform -translate-x-1/2 -translate-y-1/2"></div>

<div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="md:w-1/2 text-center md:text-left">
              <div className="inline-block px-4 py-1 bg-white rounded-full border-2 border-baby-pink text-baby-pink font-jua text-sm mb-4">
                육아의 시작과 끝을 함께해요
              </div>
              <h1 className="font-jua text-4xl md:text-5xl lg:text-6xl text-text-primary mb-6 leading-tight">
                아이와 함께하는 <br />
                <span className="text-baby-pink">행복한 순간</span>을 <br />
                기록해보세요
              </h1>
              <p className="text-text-secondary text-lg mb-8">
                육시끝은 부모님들에게 필요한 육아 정보와 기능을 제공하는 <br className="hidden md:block" />
                귀엽고 사랑스러운
                <br />
                육아 도우미 서비스입니다.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                <Link href="/signup" className="btn btn-primary">
                  무료로 시작하기
                </Link>
                <Link href="/about" className="btn btn-outline">
                  서비스 소개
                </Link>
              </div>
            </div>

{/* Floating Elements */}
              <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-lg shadow-md p-2 flex items-center justify-center border-2 border-baby-blue float z-20">
                <div className="text-center">
                  <Calendar className="w-8 h-8 text-baby-blue mx-auto" />
                  <span className="font-jua text-xs text-text-secondary mt-1 block">육아일기</span>
                </div>
              </div>

{/* Featured Products Section */}
      <FeaturedProducts />

{/* Features Section */}
      <section className="py-16 bg-baby-bg">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="font-jua text-3xl md:text-4xl text-text-primary mb-4">
              <span className="text-baby-blue">육시끝</span>과 함께하는
              <br />
              육아생활
            </h2>
            <p className="text-text-secondary max-w-2xl mx-auto">
              아이와 함께하는 소중한 순간을 더 편리하고 즐겁게 만들어주는 다양한 기능을 제공합니다
            </p>
          </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: <Calendar className="w-10 h-10 text-baby-pink" />,
                title: "육아 다이어리",
                description:
                  "날짜별, 주기별, 월별, 연도별로 아이의 성장 사진과 일상을 간편하게 기록하고 추억을 간직하세요",
                color: "var(--baby-pink)",
                link: "/diary",
              },
              {
                icon: <Droplet className="w-10 h-10 text-baby-blue" />,
                title: "분유량 체크",
                description: "아이의 분유 섭취량을 기록하고 통계를 확인하세요",
                color: "var(--baby-blue)",
                link: "/formula",
              },
              {
                icon: <ShoppingBag className="w-10 h-10 text-baby-lavender" />,
                title: "육아 필수템",
                description: "월령별 필수 아이템 추천과 사용자 리뷰를 확인하세요",
                color: "var(--baby-lavender)",
                link: "/products",
              },
              {
                icon: <Video className="w-10 h-10 text-baby-mint" />,
                title: "육아정보 영상",
                description: "유용한 육아 정보를 담은 영상을 카테고리별로 확인하세요",
                color: "var(--baby-mint)",
                link: "/videos",
              },
              {
                icon: <MapPin className="w-10 h-10 text-baby-yellow" />,
                title: "주변시설 찾기",
                description: "내 위치 주변의 소아과, 어린이집 등 육아 관련 시설을 찾아보세요",
                color: "var(--baby-yellow)",
                link: "/map",
              },
              {
                icon: <Users className="w-10 h-10 text-baby-pink" />,
                title: "육아 커뮤니티",
                description: "다른 부모님들과 육아 경험과 정보를 공유하세요",
                color: "var(--baby-pink)",
                link: "/community",
              },
            ].map((feature, index) => (
              <Link
                href={feature.link}
                key={index}
                className="card p-6 hover:shadow-lg transition-all duration-300 group relative overflow-hidden"
                style={{ borderColor: feature.color }}
                prefetch={true}
                onClick={(e) => {
                  // 페이지 이동 시 스크롤을 상단으로 이동
                  window.scrollTo(0, 0)
                }}
              >
                <div
                  className="w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto transition-colors"
                  style={{
                    backgroundColor: `${feature.color}20`,
                  }}
                >
                  {feature.icon}
                </div>
                <h3 className="font-jua text-xl text-text-primary mb-2 text-center">{feature.title}</h3>
                <p className="text-text-secondary text-center">{feature.description}</p>

{feature.title === "육아 필수템" && (
                  <div className="absolute inset-0 bg-baby-lavender/90 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center p-4 text-center">
                    <h4 className="font-jua text-lg mb-2">쿠팡 최저가 상품</h4>
                    <ul className="text-sm space-y-1">
                      <li>• 기저귀/물티슈</li>
                      <li>• 분유/이유식</li>
                      <li>• 수유용품</li>
                      <li>• 유아동의류</li>
                      <li>• 유모차/카시트</li>
                    </ul>
                    <p className="mt-2 text-sm font-bold">지금 바로 확인하세요 →</p>
                  </div>
                )}
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Additional Features */}
      <section className="py-16 bg-gradient-to-b from-baby-bg to-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="font-jua text-3xl md:text-4xl text-text-primary mb-4">
              더 많은 <span className="text-baby-lavender">특별한 기능</span>
            </h2>
            <p className="text-text-secondary max-w-2xl mx-auto">
              육아의 모든 순간을 더 편리하게 관리할 수 있는 다양한 기능을 제공합니다
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                icon: <MessageSquare className="w-6 h-6" />,
                title: "육아용품 중고거래",
                description: "더 이상 사용하지 않는 육아용품을 판매하거나 필요한 물품을 저렴하게 구매하세요",
                color: "var(--baby-pink)",
                link: "/marketplace",
              },
              {
                icon: <BarChart3 className="w-6 h-6" />,
                title: "수면 패턴 트래커",
                description: "아이의 수면 시간을 기록하고 수면 패턴을 분석하여 건강한 수면 습관을 만들어보세요",
                color: "var(--baby-blue)",
                link: "/sleep",
              },
              {
                icon: <Baby className="w-6 h-6" />,
                title: "이유식 레시피",
                description: "월령별 맞춤 이유식 레시피와 아이의 반응을 기록하고 알레르기를 체크하세요",
                color: "var(--baby-mint)",
                link: "/recipe",
              },
              {
                icon: <Bot className="w-6 h-6" />,
                title: "육아 챗봇",
                description: "육아 관련 질문에 빠르게 답변해주는 AI 챗봇으로 언제든지 도움을 받으세요",
                color: "var(--baby-lavender)",
                link: "#",
                action: () => {
                  // Find the chatbot component and toggle it
                  const chatbotButton = document.querySelector("[data-chatbot-trigger]")
                  if (chatbotButton) {
                    ;(chatbotButton as HTMLElement).click()
                  }
                },
              },
            ].map((feature, index) => (
              <Link
                href={feature.link}
                key={index}
                className="bg-white rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow border-l-4 cursor-pointer"
                style={{ borderLeftColor: feature.color }}
                onClick={(e) => {
                  // 챗봇 기능은 특별 처리
                  if (feature.title === "육아 챗봇") {
                    e.preventDefault()
                    feature.action && feature.action()
                  } else {
                    // 페이지 이동 시 스크롤을 상단으로 이동
                    window.scrollTo(0, 0)
                  }
                }}
              >
                <div className="flex items-start">
                  <div
                    className="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                    style={{ backgroundColor: `${feature.color}20` }}
                  >
                    <div className="text-text-primary">{feature.icon}</div>
                  </div>
                  <div>
                    <h3 className="font-jua text-lg text-text-primary mb-1">{feature.title}</h3>
                    <p className="text-text-secondary text-sm">{feature.description}</p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 bg-baby-lavender/10 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full cloud-pattern opacity-50 -z-10"></div>
        <div className="absolute -top-20 -right-20 w-64 h-64 bg-baby-pink rounded-full opacity-20 -z-10"></div>
        <div className="absolute -bottom-20 -left-20 w-64 h-64 bg-baby-blue rounded-full opacity-20 -z-10"></div>

<div className="container mx-auto px-4 text-center">
          <div className="max-w-3xl mx-auto">
            <h2 className="font-jua text-3xl md:text-4xl text-text-primary mb-6">
              지금 바로 <span className="text-baby-pink">육시끝</span>과 함께 <br />
              행복한 육아를 시작하세요
            </h2>
            <p className="text-text-secondary text-lg mb-8">
              무료 회원가입 후 다양한 육아 기능을 <br />
              이용해보세요. <br />
              소중한 아이와의 모든 순간을 더 특별하게 <br />
              만들어 드립니다.
            </p>

<div className="mt-8 p-4 bg-white rounded-lg shadow-sm inline-block">
              <p className="text-text-secondary text-sm">
                이미 회원이신가요?{" "}
                <Link href="/login" className="text-baby-pink font-medium">
                  로그인하기
                </Link>
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/albums/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="min-h-screen bg-baby-bg">
      {/* 헤더 스켈레톤 */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Skeleton className="h-6 w-24" />
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-6 w-6" />
          </div>
        </div>
      </header>

{/* 필터 및 검색 스켈레톤 */}
      <section className="bg-white shadow-sm mb-4">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row gap-4">
            <Skeleton className="h-10 w-full md:w-1/3" />
            <Skeleton className="h-10 w-full md:w-2/3" />
          </div>

{/* 앨범 목록 스켈레톤 */}
      <main className="container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} className="bg-white rounded-xl overflow-hidden shadow-md">
              <Skeleton className="h-48 w-full" />
              <div className="p-4">
                <Skeleton className="h-6 w-3/4 mb-2" />
                <Skeleton className="h-4 w-1/2 mb-2" />
                <Skeleton className="h-4 w-1/4" />
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/albums/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { ChevronLeft, Heart, Share2, Download, Play, Pause, Info, X } from "lucide-react"

// 임시 데이터 (실제로는 API에서 가져올 것입니다)
const mockAlbumDetails = {
  id: "1",
  title: "첫 번째 달",
  period: "2023.01.01 - 2023.01.31",
  description:
    "우리 아이의 첫 번째 달을 기록한 소중한 순간들입니다. 매일매일 새로운 모습을 보여주는 아이의 성장이 담겨있습니다.",
  photos: [
    {
      id: "1",
      src: "https://cdn.pixabay.com/photo/2016/01/20/11/11/baby-1151351_1280.jpg",
      caption: "첫 번째 웃음",
      date: "2023.01.05",
    },
    {
      id: "2",
      src: "https://cdn.pixabay.com/photo/2017/06/18/18/39/baby-2416718_1280.jpg",
      caption: "아빠와 함께",
      date: "2023.01.10",
    },
    {
      id: "3",
      src: "https://cdn.pixabay.com/photo/2016/11/19/14/28/bed-1839564_1280.jpg",
      caption: "낮잠 시간",
      date: "2023.01.15",
    },
    {
      id: "4",
      src: "https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_1280.jpg",
      caption: "호기심 가득",
      date: "2023.01.20",
    },
    {
      id: "5",
      src: "https://cdn.pixabay.com/photo/2017/08/07/01/33/baby-2598005_1280.jpg",
      caption: "첫 장난감",
      date: "2023.01.25",
    },
    {
      id: "6",
      src: "https://cdn.pixabay.com/photo/2016/03/26/22/13/baby-1281720_1280.jpg",
      caption: "엄마와 함께",
      date: "2023.01.30",
    },
  ],
}

export default function AlbumDetailPage({ params }: { params: { id: string } }) {
  const [album, setAlbum] = useState(mockAlbumDetails)
  const [isLoading, setIsLoading] = useState(true)
  const [selectedPhoto, setSelectedPhoto] = useState<string | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isFavorite, setIsFavorite] = useState(false)
  const [showInfo, setShowInfo] = useState(false)

// 로딩 시뮬레이션
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)
    return () => clearTimeout(timer)
  }, [])

// 슬라이드쇼 기능
  useEffect(() => {
    if (!isPlaying || !album.photos.length) return

const interval = setInterval(() => {
      if (selectedPhoto) {
        const currentIndex = album.photos.findIndex((photo) => photo.id === selectedPhoto)
        const nextIndex = (currentIndex + 1) % album.photos.length
        setSelectedPhoto(album.photos[nextIndex].id)
      } else {
        setSelectedPhoto(album.photos[0].id)
      }
    }, 3000)

return () => clearInterval(interval)
  }, [isPlaying, selectedPhoto, album.photos])

// 선택된 사진 정보
  const currentPhoto = selectedPhoto ? album.photos.find((photo) => photo.id === selectedPhoto) : null

return (
    <div className="min-h-screen bg-baby-bg">
      {/* 헤더 */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/diary/albums" className="flex items-center text-text-primary">
              <ChevronLeft className="w-5 h-5 mr-1" />
              <span className="font-jua">앨범 목록</span>
            </Link>
            <h1 className="font-jua text-2xl text-text-primary">{album.title}</h1>
            <button
              className={`w-8 h-8 flex items-center justify-center rounded-full ${isFavorite ? "text-red-500" : "text-gray-400"}`}
              onClick={() => setIsFavorite(!isFavorite)}
              aria-label={isFavorite ? "즐겨찾기 해제" : "즐겨찾기 추가"}
            >
              <Heart className="w-5 h-5" fill={isFavorite ? "currentColor" : "none"} />
            </button>
          </div>
        </div>
      </header>

{/* 앨범 정보 */}
      <section className="bg-white shadow-sm mb-4">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
              <p className="text-sm text-text-secondary">{album.period}</p>
              <p className="text-sm text-baby-blue mt-1">사진 {album.photos.length}장</p>
            </div>

<div className="flex items-center gap-3">
              <button
                className="p-2 rounded-lg bg-baby-pink/10 text-baby-pink"
                onClick={() => {
                  setSelectedPhoto(album.photos[0].id)
                  setIsPlaying(!isPlaying)
                }}
                aria-label={isPlaying ? "슬라이드쇼 정지" : "슬라이드쇼 시작"}
              >
                {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
              </button>
              <button
                className="p-2 rounded-lg bg-baby-blue/10 text-baby-blue"
                onClick={() => setShowInfo(!showInfo)}
                aria-label={showInfo ? "정보 숨기기" : "정보 보기"}
              >
                <Info className="w-5 h-5" />
              </button>
              <button className="p-2 rounded-lg bg-gray-100 text-gray-600" aria-label="공유하기">
                <Share2 className="w-5 h-5" />
              </button>
            </div>
          </div>

{showInfo && (
            <div className="mt-4 p-4 bg-baby-bg rounded-lg">
              <p className="text-text-secondary">{album.description}</p>
            </div>
          )}
        </div>
      </section>

{/* 사진 갤러리 */}
      <main className="container mx-auto px-4 py-6">
        {isLoading ? (
          // 로딩 스켈레톤
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
              <div key={i} className="aspect-square bg-gray-200 rounded-lg animate-pulse"></div>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            {album.photos.map((photo) => (
              <div
                key={photo.id}
                className="aspect-square relative rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity"
                onClick={() => setSelectedPhoto(photo.id)}
              >
                <Image src={photo.src || "/placeholder.svg"} alt={photo.caption} fill className="object-cover" />
              </div>
            ))}
          </div>
        )}
      </main>

{/* 사진 확대 모달 */}
      {selectedPhoto && (
        <div className="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col">
          <div className="flex items-center justify-between p-4 text-white">
            <button
              onClick={() => setIsPlaying(!isPlaying)}
              className="p-2 rounded-full bg-white/10 hover:bg-white/20"
              aria-label={isPlaying ? "슬라이드쇼 정지" : "슬라이드쇼 시작"}
            >
              {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
            </button>

<div className="text-center">
              <h3 className="font-jua">{currentPhoto?.caption}</h3>
              <p className="text-sm text-gray-300">{currentPhoto?.date}</p>
            </div>

<button
              onClick={() => setSelectedPhoto(null)}
              className="p-2 rounded-full bg-white/10 hover:bg-white/20"
              aria-label="닫기"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

<div className="p-4 flex justify-center gap-2">
            <button className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white" aria-label="다운로드">
              <Download className="w-5 h-5" />
            </button>
            <button className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white" aria-label="공유하기">
              <Share2 className="w-5 h-5" />
            </button>
            <button
              className={`p-2 rounded-full bg-white/10 hover:bg-white/20 text-white ${isFavorite ? "text-red-500" : ""}`}
              onClick={() => setIsFavorite(!isFavorite)}
              aria-label={isFavorite ? "즐겨찾기 해제" : "즐겨찾기 추가"}
            >
              <Heart className="w-5 h-5" fill={isFavorite ? "currentColor" : "none"} />
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/albums/[id]/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="min-h-screen bg-baby-bg">
      {/* 헤더 스켈레톤 */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Skeleton className="h-6 w-24" />
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-8 w-8 rounded-full" />
          </div>
        </div>
      </header>

{/* 앨범 정보 스켈레톤 */}
      <section className="bg-white shadow-sm mb-4">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
              <Skeleton className="h-4 w-40 mb-2" />
              <Skeleton className="h-4 w-24" />
            </div>

{/* 사진 갤러리 스켈레톤 */}
      <main className="container mx-auto px-4 py-6">
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <Skeleton key={i} className="aspect-square rounded-lg" />
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/albums/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import { ChevronLeft, Filter, Calendar, Search, Grid3X3, List, SlidersHorizontal } from "lucide-react"

// 임시 데이터 (실제로는 API에서 가져올 것입니다)
const mockAlbums = [
  {
    id: "1",
    title: "첫 번째 달",
    period: "2023.01.01 - 2023.01.31",
    photoCount: 24,
    thumbnail: "https://cdn.pixabay.com/photo/2016/01/20/11/11/baby-1151351_1280.jpg",
    category: "월별",
  },
  {
    id: "2",
    title: "첫 돌",
    period: "2023.02.15",
    photoCount: 36,
    thumbnail: "https://cdn.pixabay.com/photo/2017/06/18/18/39/baby-2416718_1280.jpg",
    category: "특별한 순간",
  },
  {
    id: "3",
    title: "100일",
    period: "2022.11.10",
    photoCount: 18,
    thumbnail: "https://cdn.pixabay.com/photo/2016/11/19/14/28/bed-1839564_1280.jpg",
    category: "특별한 순간",
  },
  {
    id: "4",
    title: "2023년 2월",
    period: "2023.02.01 - 2023.02.28",
    photoCount: 42,
    thumbnail: "https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_1280.jpg",
    category: "월별",
  },
  {
    id: "5",
    title: "첫 걸음마",
    period: "2023.03.15",
    photoCount: 12,
    thumbnail: "https://cdn.pixabay.com/photo/2017/08/07/01/33/baby-2598005_1280.jpg",
    category: "마일스톤",
  },
  {
    id: "6",
    title: "2023년 3월",
    period: "2023.03.01 - 2023.03.31",
    photoCount: 31,
    thumbnail: "https://cdn.pixabay.com/photo/2016/03/26/22/13/baby-1281720_1280.jpg",
    category: "월별",
  },
]

export default function AlbumsPage() {
  const [albums, setAlbums] = useState(mockAlbums)
  const [view, setView] = useState<"grid" | "list">("grid")
  const [filter, setFilter] = useState<string>("all")
  const [searchTerm, setSearchTerm] = useState("")
  const [isLoading, setIsLoading] = useState(true)

// 로딩 시뮬레이션
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)
    return () => clearTimeout(timer)
  }, [])

// 필터링된 앨범 목록
  const filteredAlbums = albums.filter((album) => {
    const matchesFilter = filter === "all" || album.category === filter
    const matchesSearch = album.title.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesFilter && matchesSearch
  })

{/* 필터 및 검색 */}
      <section className="bg-white shadow-sm mb-4">
        <div className="container mx-auto px-4 py-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex items-center gap-2 md:w-1/3">
              <Filter className="w-5 h-5 text-baby-pink" />
              <select
                className="border-none bg-baby-pink/10 rounded-lg px-3 py-2 text-sm flex-grow focus:ring-baby-pink"
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
              >
                <option value="all">모든 앨범</option>
                <option value="월별">월별 앨범</option>
                <option value="특별한 순간">특별한 순간</option>
                <option value="마일스톤">마일스톤</option>
              </select>
            </div>

<div className="relative md:w-2/3">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                type="text"
                placeholder="앨범 검색..."
                className="w-full pl-10 pr-4 py-2 border-none bg-gray-100 rounded-lg focus:ring-baby-pink"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>

<div className="flex items-center gap-2">
              <button
                className={`p-2 rounded-lg ${view === "grid" ? "bg-baby-pink/20 text-baby-pink" : "bg-transparent text-gray-400"}`}
                onClick={() => setView("grid")}
                aria-label="그리드 보기"
              >
                <Grid3X3 className="w-4 h-4" />
              </button>
              <button
                className={`p-2 rounded-lg ${view === "list" ? "bg-baby-pink/20 text-baby-pink" : "bg-transparent text-gray-400"}`}
                onClick={() => setView("list")}
                aria-label="리스트 보기"
              >
                <List className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </section>

{/* 앨범 목록 */}
      <main className="container mx-auto px-4 py-6">
        {isLoading ? (
          // 로딩 스켈레톤
          <div
            className={`grid ${view === "grid" ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"} gap-6`}
          >
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="bg-white rounded-xl overflow-hidden shadow-md animate-pulse">
                <div className="h-48 bg-gray-200"></div>
                <div className="p-4">
                  <div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
                  <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
                  <div className="h-4 bg-gray-200 rounded w-1/4"></div>
                </div>
              </div>
            ))}
          </div>
        ) : filteredAlbums.length > 0 ? (
          <div
            className={`grid ${view === "grid" ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"} gap-6`}
          >
            {filteredAlbums.map((album) => (
              <Link href={`/diary/albums/${album.id}`} key={album.id}>
                <div className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                  <div className="relative h-48">
                    <Image
                      src={album.thumbnail || "/placeholder.svg"}
                      alt={album.title}
                      fill
                      className="object-cover"
                    />
                    <div className="absolute top-2 right-2 bg-baby-pink/80 text-white text-xs px-2 py-1 rounded-full">
                      {album.category}
                    </div>
                  </div>
                  <div className="p-4">
                    <h3 className="font-jua text-lg text-text-primary">{album.title}</h3>
                    <p className="text-sm text-text-secondary mt-1">{album.period}</p>
                    <div className="flex items-center justify-between mt-2">
                      <span className="text-xs text-baby-blue">사진 {album.photoCount}장</span>
                      <span className="text-xs text-baby-pink">자세히 보기</span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <div className="w-16 h-16 bg-baby-pink/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <Search className="w-8 h-8 text-baby-pink" />
            </div>
            <h3 className="font-jua text-xl text-text-primary mb-2">앨범을 찾을 수 없습니다</h3>
            <p className="text-text-secondary">검색어나 필터를 변경해보세요.</p>
          </div>
        )}
      </main>

{/* 플로팅 버튼 */}
      <div className="fixed bottom-6 right-6">
        <Link
          href="/diary/albums/new"
          className="bg-baby-pink text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-baby-pink/90 transition-colors"
        >
          <SlidersHorizontal className="w-6 h-6" />
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/diary/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Calendar, Clock, Camera, BookOpen, ChevronRight, Plus, CalendarIcon as CalIcon } from "lucide-react"

export default function DiaryPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative py-12 md:py-16 overflow-hidden">
        {/* Decorative Background Elements */}
        <div className="absolute inset-0 baby-pattern opacity-50 -z-10"></div>
        <div className="absolute top-0 right-0 w-64 h-64 bg-baby-pink rounded-full opacity-20 -z-10 transform translate-x-1/3 -translate-y-1/3"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-baby-blue rounded-full opacity-20 -z-10 transform translate-x-1/3 translate-y-1/3"></div>

<div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="font-jua text-4xl md:text-5xl text-text-primary mb-6">
              우리 아이의 <span className="text-baby-pink">소중한 순간</span>을 기록하세요
            </h1>
            <p className="text-text-secondary text-lg mb-8">
              날짜별, 주기별, 월별, 연도별로 아이의 성장 사진과 일상을 간편하게 기록하고 언제든지 돌아보며 추억을 간직할
              수 있습니다.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/diary/new" className="btn btn-primary inline-flex items-center justify-center">
                <Plus size={16} className="mr-2" /> 새 일기 작성하기
              </Link>
              <Link href="/diary/albums" className="btn btn-outline inline-flex items-center justify-center">
                <Camera size={16} className="mr-2" /> 성장 앨범 보기
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Recording Options */}
      <section className="py-12 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="font-jua text-3xl text-center text-text-primary mb-12">
            <span className="text-baby-pink">다양한 방식</span>으로 기록하세요
          </h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                icon: <Clock className="w-8 h-8" />,
                title: "일별 기록",
                description:
                  "매일의 소중한 순간을 사진과 함께 기록하세요. 아이의 일상, 첫 경험, 특별한 순간을 놓치지 마세요.",
                color: "var(--baby-pink)",
                link: "/diary/daily",
              },
              {
                icon: <Calendar className="w-8 h-8" />,
                title: "주별 성장",
                description:
                  "일주일 단위로 아이의 성장 변화를 비교해보세요. 주간 성장 차트로 변화를 한눈에 확인할 수 있습니다.",
                color: "var(--baby-blue)",
                link: "/diary/weekly",
              },
              {
                icon: <BookOpen className="w-8 h-8" />,
                title: "월별 앨범",
                description: "한 달 동안의 특별한 순간들을 자동으로 모아 월간 앨범으로 만들어 드립니다.",
                color: "var(--baby-mint)",
                link: "/diary/monthly",
              },
              {
                icon: <CalIcon className="w-8 h-8" />,
                title: "연도별 타임라인",
                description: "1년 동안의 성장 과정을 타임라인으로 확인하세요. 아이의 성장을 한눈에 볼 수 있습니다.",
                color: "var(--baby-lavender)",
                link: "/diary/yearly",
              },
            ].map((option, index) => (
              <Link
                key={index}
                href={option.link}
                className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all border-t-4"
                style={{ borderColor: option.color }}
              >
                <div
                  className="w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto"
                  style={{ backgroundColor: `${option.color}20` }}
                >
                  <div className="text-text-primary">{option.icon}</div>
                </div>
                <h3 className="font-jua text-xl text-text-primary mb-2 text-center">{option.title}</h3>
                <p className="text-text-secondary text-sm text-center">{option.description}</p>
                <div className="mt-4 text-center">
                  <span className="inline-flex items-center text-baby-pink font-jua text-sm">
                    바로가기 <ChevronRight className="w-4 h-4 ml-1" />
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Preview Section */}
      <section className="py-12 bg-baby-bg">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center gap-8">
            <div className="md:w-1/2">
              <h2 className="font-jua text-3xl text-text-primary mb-4">
                간편하게 <span className="text-baby-pink">기록</span>하고
                <br />
                소중하게 <span className="text-baby-blue">보관</span>하세요
              </h2>
              <p className="text-text-secondary mb-6">
                육시끝의 육아 다이어리는 바쁜 부모님들을 위해 최대한 간편하게 설계되었습니다. 몇 번의 클릭만으로 아이의
                소중한 순간을 기록하고, 자동으로 정리된 앨범을 언제든지 확인할 수 있습니다.
              </p>
              <ul className="space-y-3">
                {[
                  "간편한 사진 업로드와 메모 기능",
                  "자동 날짜 정렬 및 카테고리 분류",
                  "성장 단계별 마일스톤 자동 체크",
                  "가족 구성원과 공유 기능",
                  "클라우드 백업으로 안전하게 보관",
                ].map((feature, index) => (
                  <li key={index} className="flex items-start">
                    <div className="w-5 h-5 rounded-full bg-baby-pink/20 flex items-center justify-center mt-1 mr-2">
                      <div className="w-2 h-2 rounded-full bg-baby-pink"></div>
                    </div>
                    <span className="text-text-secondary">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="md:w-1/2">
              <div className="relative">
                <div className="bg-white p-4 rounded-2xl shadow-lg">
                  <Image
                    src="https://cdn.pixabay.com/photo/2016/01/20/11/11/baby-1151351_1280.jpg"
                    alt="육아 다이어리 미리보기"
                    width={500}
                    height={400}
                    className="rounded-xl object-cover w-full h-auto"
                  />
                </div>
                <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-white rounded-xl shadow-md p-2 rotate-6">
                  <Image
                    src="https://cdn.pixabay.com/photo/2017/06/18/18/39/baby-2416718_1280.jpg"
                    alt="아기 사진"
                    width={120}
                    height={120}
                    className="rounded-lg object-cover w-full h-full"
                  />
                </div>
                <div className="absolute -top-4 -left-4 w-24 h-24 bg-white rounded-xl shadow-md p-2 -rotate-6">
                  <Image
                    src="https://cdn.pixabay.com/photo/2016/11/19/14/28/bed-1839564_1280.jpg"
                    alt="아기 사진"
                    width={80}
                    height={80}
                    className="rounded-lg object-cover w-full h-full"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-12 bg-baby-pink/10">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-2xl mx-auto">
            <h2 className="font-jua text-3xl text-text-primary mb-4">
              지금 바로 <span className="text-baby-pink">육아 다이어리</span>를 시작하세요
            </h2>
            <p className="text-text-secondary mb-8">
              아이의 소중한 순간들이 기다리고 있습니다. 지금 바로 기록을 시작하고 평생 간직할 추억을 만들어보세요.
            </p>
            <Link href="/diary/new" className="btn btn-primary inline-flex items-center justify-center">
              <Plus size={16} className="mr-2" /> 첫 번째 일기 작성하기
            </Link>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useCallback } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowLeft, Search, Filter, ShoppingBag, ChevronDown, ChevronUp, Loader2, RefreshCw } from "lucide-react"

// Product type definition
interface Product {
  productId: number
  productName: string
  productPrice: number
  productImage: string
  productUrl: string
  rating?: number
  ratingCount?: number
  reviewCount?: number
  evaluationCount?: number
  isRocket?: boolean
  isFreeShipping?: boolean
  originalPrice?: number
  discountRate?: number
  affiliateUrl?: string
}

// Category type definition
interface Category {
  id: string
  name: string
  subCategories?: Category[]
}

// Debug information from API
interface DebugInfo {
  requestedPage: string
  requestedLimit: string
  calculatedOffset: number
  timestamp: string
}

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("221934") // Default to baby products
  const [expandedCategories, setExpandedCategories] = useState<Record<string, boolean>>({})
  const [sortBy, setSortBy] = useState<"price_asc" | "price_desc" | "rating" | "newest">("rating")
  const [debugInfo, setDebugInfo] = useState<DebugInfo | null>(null)
  // Add a key to force re-fetch when page changes
  const [fetchKey, setFetchKey] = useState(0)

// Baby product categories
  const categories: Category[] = [
    {
      id: "221934",
      name: "전체 유아용품",
    },
    {
      id: "221935",
      name: "기저귀/물티슈",
      subCategories: [
        { id: "221936", name: "기저귀" },
        { id: "221937", name: "물티슈" },
      ],
    },
    {
      id: "221938",
      name: "분유/이유식",
      subCategories: [
        { id: "221939", name: "분유" },
        { id: "221940", name: "이유식" },
        { id: "221941", name: "유아간식" },
      ],
    },
    {
      id: "221942",
      name: "수유용품",
      subCategories: [
        { id: "221943", name: "젖병/젖꼭지" },
        { id: "221944", name: "이유식기" },
        { id: "221945", name: "유축기" },
      ],
    },
    {
      id: "221946",
      name: "유아동의류",
      subCategories: [
        { id: "221947", name: "신생아의류" },
        { id: "221948", name: "유아의류" },
        { id: "221949", name: "아동의류" },
      ],
    },
    {
      id: "221950",
      name: "유아동잡화",
      subCategories: [
        { id: "221951", name: "신발" },
        { id: "221952", name: "가방" },
        { id: "221953", name: "모자/양말" },
      ],
    },
    {
      id: "221954",
      name: "유아침구/가구",
      subCategories: [
        { id: "221955", name: "침대/매트" },
        { id: "221956", name: "이불/베개" },
        { id: "221957", name: "가구" },
      ],
    },
    {
      id: "221958",
      name: "유아안전/실내용품",
      subCategories: [
        { id: "221959", name: "안전용품" },
        { id: "221960", name: "욕실용품" },
        { id: "221961", name: "겨울용품" },
      ],
    },
    {
      id: "221962",
      name: "유모차/외출용품",
      subCategories: [
        { id: "221963", name: "유모차" },
        { id: "221964", name: "카시트" },
        { id: "221965", name: "아기띠/힙시트" },
      ],
    },
    {
      id: "221966",
      name: "완구/교구",
      subCategories: [
        { id: "221967", name: "신생아완구" },
        { id: "221968", name: "교육완구" },
        { id: "221969", name: "블록완구" },
      ],
    },
  ]

// Toggle category expansion
  const toggleCategory = (categoryId: string) => {
    setExpandedCategories((prev) => ({
      ...prev,
      [categoryId]: !prev[categoryId],
    }))
  }

// Fetch products from API
  const fetchProducts = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)

// Determine search keyword based on category and search term
      const categoryObj = findCategoryById(categories, selectedCategory)
      // 카테고리별로 다른 검색어를 사용하여 다양한 상품이 나오도록 함
      let keyword = searchTerm || categoryObj?.name || "유아용품"

// 카테고리별로 검색어에 추가 키워드를 붙여 다양한 상품이 나오도록 함
      if (!searchTerm && categoryObj) {
        const additionalKeywords = ["인기", "추천", "신상", "할인", "베스트"]
        const randomKeyword = additionalKeywords[Math.floor(Math.random() * additionalKeywords.length)]
        keyword = `${categoryObj.name} ${randomKeyword}`
      }

// Add timestamp to prevent caching
      const timestamp = new Date().getTime()
      // 랜덤 값을 추가하여 매번 다른 결과가 나오도록 함
      const randomValue = Math.floor(Math.random() * 1000)

console.log(
        `Fetching products with keyword: ${keyword}, category: ${selectedCategory}, timestamp: ${timestamp}, random: ${randomValue}`,
      )

const response = await fetch(
        `/api/coupang?keyword=${encodeURIComponent(keyword)}&categoryId=${selectedCategory}&page=1&limit=10&_t=${timestamp}&_r=${randomValue}`,
        {
          // Ensure we're not using cached responses
          cache: "no-store",
          headers: {
            "Cache-Control": "no-cache, no-store, must-revalidate",
            Pragma: "no-cache",
            Expires: "0",
          },
        },
      )

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to fetch products")
      }

const data = await response.json()
      console.log("API response received:", data)

// Store debug info if available
      if (data.debug) {
        setDebugInfo(data.debug)
        console.log("Debug info:", data.debug)
      }

// Handle the different response format
      if (data.rCode === "0" && data.data) {
        let transformedProducts: Product[] = []

// Check if we have productData array
        if (data.data.productData && data.data.productData.length > 0) {
          transformedProducts = data.data.productData.map((product: any) => {
            // Get review count from the most reliable field
            let reviewCount = 0
            if (product.reviewCount !== undefined) {
              reviewCount = Number.parseInt(product.reviewCount)
            } else if (product.ratingCount !== undefined) {
              reviewCount = Number.parseInt(product.ratingCount)
            } else if (product.evaluationCount !== undefined) {
              reviewCount = Number.parseInt(product.evaluationCount)
            }

return {
              productId: product.productId,
              productName: product.productName,
              productPrice: product.productPrice,
              productImage: product.productImage,
              productUrl: product.productUrl,
              rating: Number.parseFloat(product.rating) || 0,
              reviewCount: reviewCount,
              isRocket: product.isRocket || false,
              isFreeShipping: product.isFreeShipping || false,
              originalPrice: product.originalPrice,
              discountRate: product.discountRate,
            }
          })

// Log the first product to debug
          if (transformedProducts.length > 0) {
            console.log("First transformed product:", transformedProducts[0])
          }
        }

console.log(`Transformed ${transformedProducts.length} products`)

// Sort products
        const sortedProducts = sortProducts(transformedProducts, sortBy)
        setProducts(sortedProducts)
      } else {
        console.warn("API returned no products or invalid format")
        setProducts([])
      }
    } catch (err) {
      console.error("Error fetching products:", err)
      setError("상품을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.")
      setProducts([])
    } finally {
      setLoading(false)
    }
  }, [categories, searchTerm, selectedCategory, sortBy])

// Helper function to find category by ID
  const findCategoryById = (categories: Category[], id: string): Category | null => {
    for (const category of categories) {
      if (category.id === id) {
        return category
      }
      if (category.subCategories) {
        const found = findCategoryById(category.subCategories, id)
        if (found) return found
      }
    }
    return null
  }

// Sort products based on selected sort option
  const sortProducts = (products: Product[], sortOption: string) => {
    const productsCopy = [...products]

switch (sortOption) {
      case "price_asc":
        return productsCopy.sort((a, b) => a.productPrice - b.productPrice)
      case "price_desc":
        return productsCopy.sort((a, b) => b.productPrice - a.productPrice)
      case "rating":
        return productsCopy.sort((a, b) => (b.rating || 0) - (a.rating || 0))
      case "newest":
        // Since we don't have a date field, we'll just return the original order
        return productsCopy
      default:
        return productsCopy
    }
  }

// Handle search form submission
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    setFetchKey((prev) => prev + 1) // Force re-fetch
  }

// Handle category selection
  const handleCategorySelect = (categoryId: string) => {
    setSelectedCategory(categoryId)
    setFetchKey((prev) => prev + 1) // Force re-fetch
  }

// Handle manual refresh
  const handleRefresh = () => {
    setFetchKey((prev) => prev + 1) // Force re-fetch
  }

// Handle sort change
  const handleSortChange = (sortOption: "price_asc" | "price_desc" | "rating" | "newest") => {
    setSortBy(sortOption)
    const sortedProducts = sortProducts(products, sortOption)
    setProducts(sortedProducts)
  }

// Format price with commas
  const formatPrice = (price: number) => {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }

// Get review count display
  const getReviewCountDisplay = (product: Product) => {
    // Use reviewCount as the primary source
    if (product.reviewCount !== undefined && product.reviewCount > 0) {
      return product.reviewCount.toLocaleString()
    }
    // Fall back to ratingCount if available
    if (product.ratingCount !== undefined && product.ratingCount > 0) {
      return product.ratingCount.toLocaleString()
    }
    // Fall back to evaluationCount if available
    if (product.evaluationCount !== undefined && product.evaluationCount > 0) {
      return product.evaluationCount.toLocaleString()
    }
    // Default to 0
    return "0"
  }

// Load products on initial render and when dependencies change
  useEffect(() => {
    fetchProducts()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedCategory, searchTerm, fetchKey])

return (
    <div className="min-h-screen py-8 px-4 bg-baby-bg">
      <div className="container mx-auto">
        <div className="mb-6">
          <Link href="/" className="inline-flex items-center text-baby-pink hover:underline">
            <ArrowLeft className="w-4 h-4 mr-1" />
            홈으로 돌아가기
          </Link>
        </div>

<div className="text-center mb-10">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">육아 필수템</span> 추천
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            아이의 성장 단계별로 필요한 육아 필수템을 쿠팡 최저가로 만나보세요.
            <br />
            <span className="font-semibold text-base">
              모든 제품은 쿠팡파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다.
            </span>
          </p>
        </div>

<div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar - Categories */}
          <div className="lg:w-1/4">
            <div className="bg-white rounded-xl shadow-md p-4 mb-6">
              <h2 className="font-jua text-xl text-text-primary mb-4">카테고리</h2>
              <ul className="space-y-2">
                {categories.map((category) => (
                  <li key={category.id}>
                    <div className="flex items-center justify-between">
                      <button
                        onClick={() => handleCategorySelect(category.id)}
                        className={`text-left py-2 ${
                          selectedCategory === category.id
                            ? "font-bold text-baby-pink"
                            : "text-text-secondary hover:text-baby-pink"
                        }`}
                      >
                        {category.name}
                      </button>
                      {category.subCategories && category.subCategories.length > 0 && (
                        <button
                          onClick={() => toggleCategory(category.id)}
                          className="p-1 text-text-secondary hover:text-baby-pink"
                        >
                          {expandedCategories[category.id] ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                        </button>
                      )}
                    </div>
                    {category.subCategories && expandedCategories[category.id] && (
                      <ul className="pl-4 space-y-1 mt-1">
                        {category.subCategories.map((subCategory) => (
                          <li key={subCategory.id}>
                            <button
                              onClick={() => handleCategorySelect(subCategory.id)}
                              className={`text-left py-1 ${
                                selectedCategory === subCategory.id
                                  ? "font-bold text-baby-pink"
                                  : "text-text-secondary hover:text-baby-pink"
                              }`}
                            >
                              {subCategory.name}
                            </button>
                          </li>
                        ))}
                      </ul>
                    )}
                  </li>
                ))}
              </ul>
            </div>

{/* Search Box */}
            <div className="bg-white rounded-xl shadow-md p-4 mb-6">
              <h2 className="font-jua text-xl text-text-primary mb-4">검색</h2>
              <form onSubmit={handleSearch}>
                <div className="relative">
                  <input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="상품명 검색..."
                    className="input w-full pl-10"
                  />
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-light w-5 h-5" />
                </div>
                <button type="submit" className="btn btn-primary w-full mt-2">
                  검색하기
                </button>
              </form>
            </div>
          </div>

{/* Main Content - Products */}
          <div className="lg:w-3/4">
            {/* Sort Options */}
            <div className="bg-white rounded-xl shadow-md p-4 mb-6">
              <div className="flex flex-wrap items-center justify-between">
                <h2 className="font-jua text-xl text-text-primary">
                  {findCategoryById(categories, selectedCategory)?.name || "전체 유아용품"}
                </h2>
                <div className="flex items-center space-x-2 mt-2 sm:mt-0">
                  <Filter size={16} className="text-text-secondary" />
                  <span className="text-text-secondary">정렬:</span>
                  <select
                    value={sortBy}
                    onChange={(e) => handleSortChange(e.target.value as any)}
                    className="input py-1 px-2 text-sm"
                  >
                    <option value="rating">인기순</option>
                    <option value="price_asc">가격 낮은순</option>
                    <option value="price_desc">가격 높은순</option>
                    <option value="newest">최신순</option>
                  </select>
                </div>
              </div>
            </div>

{/* Refresh Button */}
            <div className="bg-white rounded-xl shadow-md p-4 mb-6 flex justify-end items-center">
              <button onClick={handleRefresh} className="flex items-center text-baby-pink hover:text-baby-pink/80">
                <RefreshCw size={16} className="mr-1" />
                새로운 상품 보기
              </button>
            </div>

{/* Debug Info */}
            {debugInfo && (
              <div className="bg-gray-50 rounded-xl shadow-md p-4 mb-6 text-xs text-gray-500">
                <p>
                  요청 페이지: {debugInfo.requestedPage}, 요청 한도: {debugInfo.requestedLimit}
                </p>
                <p>타임스탬프: {debugInfo.timestamp}</p>
              </div>
            )}

{/* Error Message */}
            {error && <div className="bg-red-50 text-red-600 p-4 rounded-lg mb-6">{error}</div>}

{/* Loading State */}
            {loading ? (
              <div className="flex justify-center items-center py-12">
                <Loader2 className="w-8 h-8 text-baby-pink animate-spin" />
                <span className="ml-2 text-text-secondary">상품을 불러오는 중...</span>
              </div>
            ) : (
              <>
                {/* Products Grid */}
                {products.length === 0 ? (
                  <div className="text-center py-12 bg-white rounded-xl shadow-md">
                    <p className="font-jua text-text-secondary mb-2">검색 결과가 없습니다</p>
                    <p className="text-text-light text-sm">다른 검색어나 카테고리를 선택해보세요</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    {products.map((product, index) => (
                      <a
                        key={`${product.productId}-${index}`}
                        href={product.productUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"
                      >
                        <div className="relative h-48">
                          <Image
                            src={product.productImage || "/placeholder.svg?height=200&width=200"}
                            alt={product.productName}
                            fill
                            className="object-contain p-2"
                            unoptimized
                            onError={(e) => {
                              const target = e.target as HTMLImageElement
                              target.src = "/placeholder.svg?height=200&width=200&text=이미지 없음"
                            }}
                          />
                          {product.discountRate && product.discountRate > 0 && (
                            <div className="absolute top-2 left-2 bg-baby-pink text-white px-2 py-1 rounded-full text-xs font-bold">
                              {product.discountRate}% 할인
                            </div>
                          )}
                          {product.isRocket && (
                            <div className="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                              로켓배송
                            </div>
                          )}
                        </div>
                        <div className="p-4">
                          <h3 className="font-medium text-text-primary line-clamp-2 h-12 mb-2 group-hover:text-baby-pink transition-colors">
                            {product.productName}
                          </h3>
                          <div className="flex flex-col">
                            {product.originalPrice && product.originalPrice > product.productPrice && (
                              <span className="text-text-light text-sm line-through">
                                {formatPrice(product.originalPrice)}원
                              </span>
                            )}
                            <span className="text-text-primary font-bold text-lg">
                              {formatPrice(product.productPrice)}원
                            </span>
                          </div>
                          <div className="mt-3 flex items-center text-baby-pink">
                            <ShoppingBag size={16} className="mr-1" />
                            <span className="text-sm font-medium">구매하기</span>
                          </div>
                        </div>
                      </a>
                    ))}
                  </div>
                )}
              </>
            )}
          </div>
        </div>

{/* Disclaimer */}
        <div className="mt-12 bg-gray-50 rounded-lg p-4 text-center">
          <p className="text-text-light text-sm">
            이 페이지의 상품은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/featured-products.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, Loader2 } from "lucide-react"

interface Product {
  productId: number
  productName: string
  productPrice: number
  productImage: string
  productUrl: string
  rating?: number
  ratingCount?: number
  reviewCount?: number
  evaluationCount?: number
  isRocket?: boolean
  isFreeShipping?: boolean
  affiliateUrl?: string
}

export default function FeaturedProducts() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

const fetchFeaturedProducts = async () => {
    try {
      setLoading(true)
      // Fetch popular baby products
      console.log("Fetching featured products")
      const response = await fetch("/api/coupang?keyword=인기유아용품&categoryId=221934&limit=4")

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Failed to fetch featured products")
      }

const data = await response.json()
      console.log("Featured products API response:", data)

// Check if we have valid data - handle the productData array format
      if (data.rCode === "0" && data.data && data.data.productData && data.data.productData.length > 0) {
        // Transform API response using the productData array
        const transformedProducts: Product[] = data.data.productData.map((product: any) => {
          // Get review count from the most reliable field
          let reviewCount = 0
          if (product.reviewCount !== undefined) {
            reviewCount = Number.parseInt(product.reviewCount)
          } else if (product.ratingCount !== undefined) {
            reviewCount = Number.parseInt(product.ratingCount)
          } else if (product.evaluationCount !== undefined) {
            reviewCount = Number.parseInt(product.evaluationCount)
          }

return {
            productId: product.productId,
            productName: product.productName,
            productPrice: product.productPrice,
            productImage: product.productImage,
            productUrl: product.productUrl,
            rating: Number.parseFloat(product.rating) || 0,
            reviewCount: reviewCount,
            isRocket: product.isRocket || false,
            isFreeShipping: product.isFreeShipping || false,
          }
        })

console.log(`Transformed ${transformedProducts.length} featured products`)

// Generate affiliate links
        if (transformedProducts.length > 0) {
          // For featured products, we can use the direct URLs since they already have affiliate info
          setProducts(transformedProducts)
        }
      } else {
        console.warn("API returned no featured products or invalid format")
        setProducts([])
      }
    } catch (error) {
      console.error("Error fetching featured products:", error)
      setProducts([])
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchFeaturedProducts()
  }, [])

// Format price with commas
  const formatPrice = (price: number) => {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }

return (
    <section className="py-12 bg-white">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center mb-8">
          <h2 className="font-jua text-2xl md:text-3xl text-text-primary">
            <span className="text-baby-pink">인기</span> 육아 필수템
          </h2>
          <Link href="/products" className="text-baby-pink hover:underline flex items-center">
            더 많은 상품 보기 <ArrowRight size={16} className="ml-1" />
          </Link>
        </div>

{loading ? (
          <div className="flex justify-center items-center py-12">
            <Loader2 className="w-8 h-8 text-baby-pink animate-spin" />
            <span className="ml-2 text-text-secondary">상품을 불러오는 중...</span>
          </div>
        ) : products.length === 0 ? (
          <div className="text-center py-12">
            <p className="font-jua text-text-secondary mb-2">상품을 불러올 수 없습니다</p>
            <p className="text-text-light text-sm">잠시 후 다시 시도해주세요</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {products.map((product) => (
              <a
                key={product.productId}
                href={product.productUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"
              >
                <div className="relative h-48">
                  <Image
                    src={product.productImage || "/placeholder.svg?height=200&width=200"}
                    alt={product.productName}
                    fill
                    className="object-contain p-2"
                    unoptimized
                    onError={(e) => {
                      const target = e.target as HTMLImageElement
                      target.src = "/placeholder.svg?height=200&width=200&text=이미지 없음"
                    }}
                  />
                  {product.isRocket && (
                    <div className="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-bold">
                      로켓배송
                    </div>
                  )}
                </div>
                <div className="p-4">
                  <h3 className="font-medium text-text-primary line-clamp-2 h-12 mb-2 group-hover:text-baby-pink transition-colors">
                    {product.productName}
                  </h3>
                  <div className="flex flex-col mt-2">
                    <span className="text-text-primary font-bold text-lg">{formatPrice(product.productPrice)}원</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Eye, EyeOff } from "lucide-react"
import { signIn } from "./actions"
import { useRouter } from "next/navigation"

export default function Login() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
  }

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const formData = new FormData(e.currentTarget)
    const result = await signIn(formData)

if (result?.error) {
      setError(result.error)
      setIsLoading(false)
    } else if (result?.success) {
      // 성공 시 클라이언트 측에서 리디렉션
      router.push("/")
    }
  }

<div className="text-center mb-8">
            <Link href="/" className="inline-block">
              <div className="relative w-16 h-16 mx-auto">
                <Image
                  src="/images/baby-logo.png"
                  alt="육시끝 로고"
                  width={64}
                  height={64}
                  className="rounded-full border-4 border-baby-pink"
                />
                <div className="absolute -top-2 -right-2 w-6 h-6 bg-baby-yellow rounded-full border-2 border-white"></div>
              </div>
            </Link>
            <h1 className="font-jua text-2xl text-text-primary mt-4">로그인</h1>
            <p className="text-text-secondary text-sm mt-2">육시끝에 오신 것을 환영합니다</p>
          </div>

{error && <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-6 text-sm">{error}</div>}

<div>
              <label htmlFor="password" className="block font-jua text-text-primary mb-2">
                비밀번호
              </label>
              <div className="relative">
                <input
                  type={showPassword ? "text" : "password"}
                  id="password"
                  name="password"
                  className="input w-full pr-10"
                  placeholder="비밀번호를 입력하세요"
                  required
                />
                <button
                  type="button"
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-light hover:text-text-secondary"
                  onClick={togglePasswordVisibility}
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
              <div className="flex justify-end mt-2">
                <Link
                  href="/forgot-password"
                  className="text-sm text-baby-lavender hover:text-baby-pink transition-colors"
                >
                  비밀번호를 잊으셨나요?
                </Link>
              </div>
            </div>

<button
              type="submit"
              className="btn btn-primary w-full flex items-center justify-center"
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <svg
                    className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  로그인 중...
                </>
              ) : (
                "로그인"
              )}
            </button>

<div className="text-center mt-8">
            <p className="text-text-secondary text-sm">
              아직 계정이 없으신가요?{" "}
              <Link href="/signup" className="text-baby-pink font-medium hover:underline">
                회원가입
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/map/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import Link from "next/link"
import { ArrowLeft, MapPin, Search, Compass, List, MapIcon, Info } from "lucide-react"

// 시설 타입 정의
interface Facility {
  id: string
  name: string
  type: "hospital" | "daycare" | "playground" | "pharmacy" | "store"
  address: string
  distance: number
  rating: number
  phone?: string
  openHours?: string
  description?: string
  image?: string
  position?: {
    lat: number
    lng: number
  }
}

export default function MapPage() {
  const [facilities, setFacilities] = useState<Facility[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedType, setSelectedType] = useState<string | null>(null)
  const [selectedFacility, setSelectedFacility] = useState<Facility | null>(null)
  const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null)
  const [mapView, setMapView] = useState(true) // true: 지도 보기, false: 목록 보기
  const mapRef = useRef<HTMLDivElement>(null)
  const [mapLoaded, setMapLoaded] = useState(false)
  const [filteredFacilities, setFilteredFacilities] = useState<Facility[]>([])
  const [mapError, setMapError] = useState(false)

// 시설 타입 목록
  const facilityTypes = [
    { id: "hospital", name: "소아과", icon: "🏥" },
    { id: "daycare", name: "어린이집", icon: "🏫" },
    { id: "playground", name: "놀이터", icon: "🎡" },
    { id: "pharmacy", name: "약국", icon: "💊" },
    { id: "store", name: "유아용품점", icon: "🛒" },
  ]

// 더미 데이터 - 실제 구현에서는 API 호출로 대체
  const dummyFacilities: Facility[] = [
    {
      id: "1",
      name: "행복한 소아과",
      type: "hospital",
      address: "서울시 강남구 테헤란로 123",
      distance: 0.5,
      rating: 4.8,
      phone: "02-1234-5678",
      openHours: "평일 09:00-18:00, 토요일 09:00-13:00",
      description: "친절한 의료진과 함께하는 소아과입니다. 예방접종, 건강검진 등 다양한 서비스를 제공합니다.",
      image: "/placeholder.svg?height=200&width=300&text=소아과",
      position: { lat: 37.5665, lng: 126.978 },
    },
    {
      id: "2",
      name: "꿈나무 어린이집",
      type: "daycare",
      address: "서울시 강남구 역삼로 45",
      distance: 0.8,
      rating: 4.5,
      phone: "02-2345-6789",
      openHours: "평일 08:00-19:00",
      description: "아이들의 창의력과 사회성 발달을 중요시하는 어린이집입니다.",
      image: "/placeholder.svg?height=200&width=300&text=어린이집",
      position: { lat: 37.5655, lng: 126.977 },
    },
    {
      id: "3",
      name: "무지개 놀이터",
      type: "playground",
      address: "서울시 강남구 선릉로 67",
      distance: 0.3,
      rating: 4.2,
      description: "다양한 놀이기구가 있는 실내 놀이터입니다. 안전하고 깨끗한 환경을 제공합니다.",
      image: "/placeholder.svg?height=200&width=300&text=놀이터",
      position: { lat: 37.5675, lng: 126.979 },
    },
    {
      id: "4",
      name: "건강약국",
      type: "pharmacy",
      address: "서울시 강남구 테헤란로 78",
      distance: 0.6,
      rating: 4.0,
      phone: "02-3456-7890",
      openHours: "평일 09:00-21:00, 주말 10:00-18:00",
      description: "유아용 의약품과 건강보조식품을 다양하게 구비하고 있습니다.",
      image: "/placeholder.svg?height=200&width=300&text=약국",
      position: { lat: 37.5645, lng: 126.976 },
    },
    {
      id: "5",
      name: "베이비랜드",
      type: "store",
      address: "서울시 강남구 강남대로 100",
      distance: 1.2,
      rating: 4.7,
      phone: "02-4567-8901",
      openHours: "매일 10:30-21:00",
      description: "다양한 유아용품을 판매하는 매장입니다. 의류, 장난감, 유모차 등을 구매할 수 있습니다.",
      image: "/placeholder.svg?height=200&width=300&text=유아용품점",
      position: { lat: 37.5685, lng: 126.98 },
    },
    {
      id: "6",
      name: "미소 소아과",
      type: "hospital",
      address: "서울시 강남구 도산대로 45",
      distance: 1.5,
      rating: 4.6,
      phone: "02-5678-9012",
      openHours: "평일 08:30-17:30, 토요일 09:00-13:00",
      description: "20년 경력의 소아과 전문의가 진료하는 병원입니다.",
      image: "/placeholder.svg?height=200&width=300&text=소아과",
      position: { lat: 37.5635, lng: 126.975 },
    },
    {
      id: "7",
      name: "푸른숲 어린이집",
      type: "daycare",
      address: "서울시 강남구 언주로 123",
      distance: 1.8,
      rating: 4.3,
      phone: "02-6789-0123",
      openHours: "평일 07:30-19:30",
      description: "자연친화적인 환경에서 아이들의 전인적 발달을 돕는 어린이집입니다.",
      image: "/placeholder.svg?height=200&width=300&text=어린이집",
      position: { lat: 37.5625, lng: 126.974 },
    },
    {
      id: "8",
      name: "키즈파크",
      type: "playground",
      address: "서울시 강남구 삼성로 78",
      distance: 0.9,
      rating: 4.4,
      openHours: "매일 10:00-20:00",
      description: "다양한 테마존으로 구성된 대형 실내 놀이터입니다.",
      image: "/placeholder.svg?height=200&width=300&text=놀이터",
      position: { lat: 37.5695, lng: 126.981 },
    },
  ]

// 별점 표시 컴포넌트
  const RatingStars = ({ rating }: { rating: number }) => {
    return (
      <div className="flex items-center">
        {[1, 2, 3, 4, 5].map((star) => (
          <span key={star} className={`text-sm ${star <= rating ? "text-yellow-400" : "text-gray-300"}`}>
            ★
          </span>
        ))}
        <span className="ml-1 text-xs text-text-secondary">{rating.toFixed(1)}</span>
      </div>
    )
  }
  RatingStars.displayName = "RatingStars"

// 시설 선택 처리
  const handleFacilitySelect = useCallback((facility: Facility) => {
    setSelectedFacility(facility)
  }, [])

// 필터링된 시설 목록 업데이트
  useEffect(() => {
    setFilteredFacilities(
      facilities
        .filter((facility) => {
          // 시설명 필터링
          if (searchTerm && !facility.name.toLowerCase().includes(searchTerm.toLowerCase())) {
            return false
          }
          // 타입 필터링
          if (selectedType && facility.type !== selectedType) {
            return false
          }
          return true
        })
        .sort((a, b) => a.distance - b.distance),
    )
  }, [facilities, searchTerm, selectedType])

// 더미 데이터 로드
  useEffect(() => {
    if (userLocation) {
      setLoading(true)
      // 더미 데이터를 사용하여 시설 목록 설정
      setTimeout(() => {
        setFacilities(dummyFacilities)
        setLoading(false)
      }, 1000)
    }
  }, [userLocation])

// 시설 타입 선택 처리
  const handleTypeSelect = (type: string) => {
    setSelectedType(type === selectedType ? null : type)
  }

<div className="text-center mb-10">
          <h1 className="font-jua text-4xl text-text-primary mb-4">
            <span className="text-baby-pink">주변 시설</span> 찾기
          </h1>
          <p className="text-text-secondary max-w-2xl mx-auto">
            내 위치 주변의 소아과, 어린이집, 놀이터 등 육아에 필요한 시설을 찾아보세요.
          </p>
        </div>

{/* 검색 및 필터 섹션 */}
        <div className="bg-white rounded-xl shadow-md p-4 mb-6">
          <form onSubmit={(e) => e.preventDefault()} className="mb-4">
            <div className="relative flex">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="시설 이름으로 검색"
                className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-baby-pink focus:border-transparent"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-light w-5 h-5" />
            </div>
          </form>

<div className="flex flex-wrap gap-2">
            {facilityTypes.map((type) => (
              <button
                key={type.id}
                onClick={() => handleTypeSelect(type.id)}
                className={`px-3 py-2 rounded-full flex items-center ${
                  selectedType === type.id
                    ? "bg-baby-pink text-white"
                    : "bg-gray-100 text-text-secondary hover:bg-baby-pink/10"
                }`}
              >
                <span className="mr-1">{type.icon}</span>
                {type.name}
              </button>
            ))}
          </div>
        </div>

{/* 뷰 전환 버튼 */}
        <div className="flex justify-center mb-6">
          <div className="bg-white rounded-full shadow-md p-1 flex">
            <button
              onClick={() => setMapView(true)}
              className={`px-4 py-2 rounded-full flex items-center ${
                mapView ? "bg-baby-pink text-white" : "text-text-secondary"
              }`}
            >
              <MapIcon size={16} className="mr-1" />
              지도 보기
            </button>
            <button
              onClick={() => setMapView(false)}
              className={`px-4 py-2 rounded-full flex items-center ${
                !mapView ? "bg-baby-pink text-white" : "text-text-secondary"
              }`}
            >
              <List size={16} className="mr-1" />
              목록 보기
            </button>
          </div>
        </div>

<div className="flex flex-col lg:flex-row gap-6">
          {/* 지도 또는 목록 */}
          <div className={`lg:w-2/3 ${mapView ? "block" : "hidden lg:block"}`}>
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <div className="w-full h-[500px] bg-gray-100 flex items-center justify-center">
                <div className="text-center">
                  <MapPin className="w-16 h-16 text-baby-pink mx-auto mb-4" />
                  <h3 className="font-jua text-xl text-text-primary mb-2">지도 서비스 준비 중</h3>
                  <p className="text-text-secondary">
                    현재 지도 서비스를 준비 중입니다.
                    <br />
                    시설 목록에서 원하는 시설을 확인해보세요.
                  </p>
                </div>
              </div>
            </div>
          </div>

{/* 시설 목록 */}
          <div className={`lg:w-1/3 ${!mapView ? "block" : "hidden lg:block"}`}>
            <div className="bg-white rounded-xl shadow-md p-4">
              <h2 className="font-jua text-xl text-text-primary mb-4 flex items-center">
                <MapPin className="mr-2 text-baby-pink" />
                주변 시설 목록
              </h2>

{loading ? (
                <div className="flex justify-center items-center py-12">
                  <div className="animate-spin w-8 h-8 border-4 border-baby-pink border-t-transparent rounded-full"></div>
                  <span className="ml-2 text-text-secondary">시설 정보를 불러오는 중...</span>
                </div>
              ) : filteredFacilities.length === 0 ? (
                <div className="text-center py-12">
                  <p className="font-jua text-text-secondary mb-2">검색 결과가 없습니다</p>
                  <p className="text-text-light text-sm">다른 검색어나 필터를 선택해보세요</p>
                </div>
              ) : (
                <div className="space-y-4 max-h-[500px] overflow-y-auto pr-2">
                  {filteredFacilities.map((facility) => (
                    <div
                      key={facility.id}
                      className={`p-4 rounded-lg border transition-colors cursor-pointer ${
                        selectedFacility?.id === facility.id
                          ? "border-baby-pink bg-baby-pink/5"
                          : "border-gray-200 hover:border-baby-pink/50"
                      }`}
                      onClick={() => handleFacilitySelect(facility)}
                    >
                      <div className="flex justify-between items-start">
                        <div>
                          <h3 className="font-jua text-text-primary">{facility.name}</h3>
                          <p className="text-text-secondary text-sm">{facility.address}</p>
                        </div>
                        <span className="bg-baby-pink/10 text-baby-pink text-xs px-2 py-1 rounded-full">
                          {facilityTypes.find((t) => t.id === facility.type)?.name}
                        </span>
                      </div>
                      <div className="flex justify-between items-center mt-2">
                        <RatingStars rating={facility.rating} />
                        <span className="text-text-secondary text-sm flex items-center">
                          <Compass size={14} className="mr-1" />
                          {facility.distance}km
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

{/* 선택된 시설 상세 정보 */}
        {selectedFacility && (
          <div className="mt-6 bg-white rounded-xl shadow-md p-6">
            <div className="flex flex-col md:flex-row gap-6">
              {selectedFacility.image && (
                <div className="md:w-1/3">
                  <div className="rounded-lg overflow-hidden h-48 md:h-full">
                    <img
                      src={selectedFacility.image || "/placeholder.svg"}
                      alt={selectedFacility.name}
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
              )}
              <div className={selectedFacility.image ? "md:w-2/3" : "w-full"}>
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h2 className="font-jua text-2xl text-text-primary">{selectedFacility.name}</h2>
                    <p className="text-text-secondary">{selectedFacility.address}</p>
                  </div>
                  <span className="bg-baby-pink text-white px-3 py-1 rounded-full text-sm">
                    {facilityTypes.find((t) => t.id === selectedFacility.type)?.name}
                  </span>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-baby-pink/10 flex items-center justify-center mr-2">
                      <Compass className="w-4 h-4 text-baby-pink" />
                    </div>
                    <div>
                      <p className="text-text-light text-xs">거리</p>
                      <p className="text-text-primary">{selectedFacility.distance}km</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-baby-pink/10 flex items-center justify-center mr-2">
                      <span className="text-baby-pink">★</span>
                    </div>
                    <div>
                      <p className="text-text-light text-xs">평점</p>
                      <p className="text-text-primary">{selectedFacility.rating.toFixed(1)}</p>
                    </div>
                  </div>

{selectedFacility.phone && (
                    <div className="flex items-center">
                      <div className="w-8 h-8 rounded-full bg-baby-pink/10 flex items-center justify-center mr-2">
                        <span className="text-baby-pink">📞</span>
                      </div>
                      <div>
                        <p className="text-text-light text-xs">전화번호</p>
                        <p className="text-text-primary">{selectedFacility.phone}</p>
                      </div>
                    </div>
                  )}

{selectedFacility.openHours && (
                    <div className="flex items-center">
                      <div className="w-8 h-8 rounded-full bg-baby-pink/10 flex items-center justify-center mr-2">
                        <span className="text-baby-pink">🕒</span>
                      </div>
                      <div>
                        <p className="text-text-light text-xs">영업시간</p>
                        <p className="text-text-primary">{selectedFacility.openHours}</p>
                      </div>
                    </div>
                  )}
                </div>

{selectedFacility.description && (
                  <div className="bg-gray-50 p-4 rounded-lg">
                    <p className="text-text-secondary">{selectedFacility.description}</p>
                  </div>
                )}

<div className="mt-4 flex justify-end">
                  <button className="px-6 py-2 bg-baby-pink text-white rounded-lg hover:bg-baby-pink/90 transition-colors">
                    길찾기
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

{/* 정보 섹션 */}
        <div className="mt-12 bg-baby-pink/10 rounded-xl p-6">
          <div className="flex items-start">
            <Info className="text-baby-pink mr-3 mt-1 flex-shrink-0" size={24} />
            <div>
              <h3 className="font-jua text-xl text-text-primary mb-2">주변 시설 찾기 서비스 안내</h3>
              <p className="text-text-secondary mb-4">
                이 서비스는 사용자의 현재 위치를 기반으로 주변의 육아 관련 시설을 찾아주는 서비스입니다. 현재는 샘플
                데이터를 표시하고 있으며, 실제 서비스 구현 시에는 다음과 같은 기능이 추가될 예정입니다:
              </p>
              <ul className="space-y-2 text-text-secondary">
                <li className="flex items-start">
                  <span className="text-baby-pink mr-2">•</span>
                  <span>Google Maps 또는 Kakao Maps API를 활용한 실제 지도 표시</span>
                </li>
                <li className="flex items-start">
                  <span className="text-baby-pink mr-2">•</span>
                  <span>사용자 위치 기반 실시간 주변 시설 검색</span>
                </li>
                <li className="flex items-start">
                  <span className="text-baby-pink mr-2">•</span>
                  <span>시설별 상세 정보 및 리뷰 제공</span>
                </li>
                <li className="flex items-start">
                  <span className="text-baby-pink mr-2">•</span>
                  <span>길찾기 및 네비게이션 연동</span>
                </li>
                <li className="flex items-start">
                  <span className="text-baby-pink mr-2">•</span>
                  <span>자주 가는 시설 즐겨찾기 기능</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase.ts" isEdit="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "https://placeholder.supabase.co"
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "placeholder-key"

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// 환경 변수가 제대로 설정되었는지 확인하는 함수
export const isSupabaseConfigured = () => {
  return (
    process.env.NEXT_PUBLIC_SUPABASE_URL &&
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY &&
    process.env.NEXT_PUBLIC_SUPABASE_URL !== "https://placeholder.supabase.co" &&
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY !== "placeholder-key"
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { LogOut, UserIcon, Search, Menu, X } from "lucide-react"

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [user, setUser] = useState<any>(null)
  const [showProfileMenu, setShowProfileMenu] = useState(false)
  const [isSupabaseAvailable, setIsSupabaseAvailable] = useState(false)

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

useEffect(() => {
    // Supabase 환경 변수 확인
    const checkSupabase = () => {
      const hasUrl =
        process.env.NEXT_PUBLIC_SUPABASE_URL &&
        process.env.NEXT_PUBLIC_SUPABASE_URL !== "https://placeholder.supabase.co"
      const hasKey =
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY !== "placeholder-key"

return hasUrl && hasKey
    }

const supabaseConfigured = checkSupabase()
    setIsSupabaseAvailable(supabaseConfigured)

if (supabaseConfigured) {
      // Supabase가 설정된 경우에만 인증 로직 실행
      import("@supabase/auth-helpers-nextjs")
        .then(({ createClientComponentClient }) => {
          const supabase = createClientComponentClient()

const getUser = async () => {
            try {
              const {
                data: { session },
              } = await supabase.auth.getSession()
              setUser(session?.user || null)
            } catch (error) {
              console.error("Auth error:", error)
              setUser(null)
            }
          }

getUser()

const {
            data: { subscription },
          } = supabase.auth.onAuthStateChange((_event, session) => {
            setUser(session?.user || null)
          })

return () => subscription.unsubscribe()
        })
        .catch((error) => {
          console.error("Supabase initialization error:", error)
          setUser(null)
        })
    }
  }, [])

const handleLogout = async () => {
    if (isSupabaseAvailable) {
      try {
        const { createClientComponentClient } = await import("@supabase/auth-helpers-nextjs")
        const supabase = createClientComponentClient()
        await supabase.auth.signOut()
        window.location.href = "/"
      } catch (error) {
        console.error("Logout error:", error)
        window.location.href = "/"
      }
    } else {
      window.location.href = "/"
    }
  }

return (
    <header className="sticky top-0 z-50 bg-white shadow-sm">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center">
            <div className="relative w-10 h-10 mr-2">
              <Image
                src="/images/baby-logo.png"
                alt="육시끝 로고"
                width={40}
                height={40}
                className="rounded-full border-2 border-baby-pink"
              />
              <div className="absolute -top-1 -right-1 w-4 h-4 bg-baby-yellow rounded-full border-2 border-white"></div>
            </div>
            <span className="font-jua text-2xl text-baby-pink">육시끝</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-6">
            <Link
              href="/diary"
              className="font-jua text-base text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              육아일기
            </Link>
            <Link
              href="/formula"
              className="font-jua text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              분유체크
            </Link>
            <Link
              href="/products"
              className="font-jua text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              육아필수템
            </Link>
            <Link
              href="/videos"
              className="font-jua text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              육아영상
            </Link>
            <Link
              href="/map"
              className="font-jua text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              주변시설
            </Link>
            <Link
              href="/community"
              className="font-jua text-text-secondary hover:text-baby-pink transition-colors"
              onClick={() => setIsMenuOpen(false)}
            >
              커뮤니티
            </Link>
          </nav>

{/* User Actions */}
          <div className="flex items-center space-x-4">
            <button className="text-text-secondary hover:text-baby-pink transition-colors">
              <Search size={20} />
            </button>
            {isSupabaseAvailable && user ? (
              <div className="relative">
                <button
                  className="hidden md:flex items-center text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={() => setShowProfileMenu(!showProfileMenu)}
                >
                  <div className="w-8 h-8 rounded-full bg-baby-pink/20 flex items-center justify-center mr-2">
                    <UserIcon size={16} />
                  </div>
                  <span className="font-jua">{user.email?.split("@")[0] || "사용자"}</span>
                </button>

{showProfileMenu && (
                  <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50">
                    <Link
                      href="/profile"
                      className="block px-4 py-2 text-text-secondary hover:bg-baby-pink/10 hover:text-baby-pink"
                      onClick={() => setShowProfileMenu(false)}
                    >
                      마이페이지
                    </Link>
                    <button
                      onClick={handleLogout}
                      className="block w-full text-left px-4 py-2 text-text-secondary hover:bg-baby-pink/10 hover:text-baby-pink"
                    >
                      <div className="flex items-center">
                        <LogOut size={16} className="mr-2" />
                        로그아웃
                      </div>
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <Link
                href="/login"
                className="hidden md:flex items-center text-text-secondary hover:text-baby-pink transition-colors"
              >
                <UserIcon size={20} className="mr-1" />
                <span className="font-jua">로그인</span>
              </Link>
            )}
            <button
              className="md:hidden text-text-secondary hover:text-baby-pink transition-colors"
              onClick={toggleMenu}
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

{/* Mobile Navigation */}
        {isMenuOpen && (
          <nav className="md:hidden pt-4 pb-2 border-t mt-3 baby-pattern">
            <ul className="space-y-3">
              {isSupabaseAvailable && user ? (
                <>
                  <li>
                    <Link
                      href="/profile"
                      className="flex items-center font-jua text-text-secondary hover:text-baby-pink transition-colors"
                      onClick={toggleMenu}
                    >
                      <UserIcon size={18} className="mr-2" />
                      마이페이지
                    </Link>
                  </li>
                  <li>
                    <button
                      onClick={handleLogout}
                      className="flex items-center font-jua text-text-secondary hover:text-baby-pink transition-colors"
                    >
                      <LogOut size={18} className="mr-2" />
                      로그아웃
                    </button>
                  </li>
                </>
              ) : (
                <li>
                  <Link
                    href="/login"
                    className="flex items-center font-jua text-text-secondary hover:text-baby-pink transition-colors"
                    onClick={toggleMenu}
                  >
                    <UserIcon size={18} className="mr-2" />
                    로그인/회원가입
                  </Link>
                </li>
              )}
              <li>
                <Link
                  href="/diary"
                  className="block font-jua text-base text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  육아일기
                </Link>
              </li>
              <li>
                <Link
                  href="/formula"
                  className="block font-jua text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  분유체크
                </Link>
              </li>
              <li>
                <Link
                  href="/products"
                  className="block font-jua text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  육아필수템
                </Link>
              </li>
              <li>
                <Link
                  href="/videos"
                  className="block font-jua text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  육아영상
                </Link>
              </li>
              <li>
                <Link
                  href="/map"
                  className="block font-jua text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  주변시설
                </Link>
              </li>
              <li>
                <Link
                  href="/community"
                  className="block font-jua text-text-secondary hover:text-baby-pink transition-colors"
                  onClick={toggleMenu}
                >
                  커뮤니티
                </Link>
              </li>
            </ul>
          </nav>
        )}
      </div>
    </header>
  )
}

export default Headerbc:T79162,[V0_FILE]typescriptreact:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  experimental: {
    webpackBuildWorker: true,
    parallelServerBuildTraces: true,
    parallelServerCompiles: true,
  },
  images: {
    domains: ['v0.blob.com'],
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]typescriptreact:file="app/upload/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { Upload, X, Check } from "lucide-react"

export default function ImageUpload() {
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const [uploading, setUploading] = useState(false)
  const [uploadSuccess, setUploadSuccess] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      // 파일을 읽어서 미리보기 이미지 생성
      const reader = new FileReader()
      reader.onload = () => {
        setSelectedImage(reader.result as string)
        setUploadSuccess(false)
      }
      reader.readAsDataURL(file)
    }
  }

const handleUpload = async () => {
    if (!selectedImage) return

setUploading(true)

// 여기서는 실제 업로드 대신 타이머로 시뮬레이션
    // 실제 구현에서는 API 호출이 필요합니다
    setTimeout(() => {
      setUploading(false)
      setUploadSuccess(true)
    }, 1500)

// 실제 업로드 구현 예시 (주석 처리됨)
    /*
    try {
      const formData = new FormData()
      const file = fileInputRef.current?.files?.[0]
      if (!file) return

formData.append('image', file)
      
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      })
      
      if (response.ok) {
        setUploadSuccess(true)
      } else {
        // 에러 처리
        console.error('업로드 실패')
      }
    } catch (error) {
      console.error('업로드 중 오류 발생:', error)
    } finally {
      setUploading(false)
    }
    */
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

<div className="text-center mb-8">
            <Link href="/" className="inline-block">
              <div className="relative w-16 h-16 mx-auto">
                <Image
                  src="/placeholder.svg?height=64&width=64"
                  alt="육시끝 로고"
                  width={64}
                  height={64}
                  className="rounded-full border-4 border-baby-pink"
                />
                <div className="absolute -top-2 -right-2 w-6 h-6 bg-baby-yellow rounded-full border-2 border-white"></div>
              </div>
            </Link>
            <h1 className="font-jua text-2xl text-text-primary mt-4">이미지 업로드</h1>
            <p className="text-text-secondary text-sm mt-2">소중한 아이의 사진을 업로드하세요</p>
          </div>

{selectedImage ? (
                <div className="relative">
                  <Image
                    src={selectedImage || "/placeholder.svg"}
                    alt="선택한 이미지"
                    width={300}
                    height={300}
                    className="mx-auto rounded-lg max-h-[300px] w-auto object-contain"
                  />
                  <button
                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
                    onClick={(e) => {
                      e.stopPropagation()
                      setSelectedImage(null)
                      if (fileInputRef.current) fileInputRef.current.value = ""
                    }}
                  >
                    <X size={16} className="text-text-secondary" />
                  </button>
                </div>
              ) : (
                <div className="py-8">
                  <Upload className="mx-auto h-12 w-12 text-baby-lavender mb-2" />
                  <p className="font-jua text-text-primary">클릭하여 이미지 선택</p>
                  <p className="text-text-secondary text-sm mt-1">또는 파일을 여기에 끌어다 놓으세요</p>
                </div>
              )}
            </div>

{selectedImage && (
              <button
                className={`btn w-full ${uploading ? "bg-gray-300" : uploadSuccess ? "bg-baby-mint" : "btn-primary"}`}
                onClick={handleUpload}
                disabled={uploading || uploadSuccess}
              >
                {uploading ? (
                  <span className="flex items-center justify-center">
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    업로드 중...
                  </span>
                ) : uploadSuccess ? (
                  <span className="flex items-center justify-center">
                    <Check className="mr-2 h-4 w-4" />
                    업로드 완료!
                  </span>
                ) : (
                  "이미지 업로드"
                )}
              </button>
            )}

{uploadSuccess && (
              <div className="text-center mt-4">
                <p className="text-baby-mint font-jua">이미지가 성공적으로 업로드되었습니다!</p>
                <p className="text-text-secondary text-sm mt-1">이제 이 이미지를 사이트에서 사용할 수 있습니다.</p>
              </div>
            )}

<div className="text-center mt-4">
              <Link href="/" className="text-baby-lavender hover:text-baby-pink transition-colors">
                홈으로 돌아가기
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/upload/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { writeFile } from "fs/promises"
import { join } from "path"
import { v4 as uuidv4 } from "uuid"

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    const file = formData.get("image") as File

if (!file) {
      return NextResponse.json({ error: "이미지 파일이 필요합니다" }, { status: 400 })
    }

// 파일 확장자 확인
    const fileType = file.type
    if (!fileType.startsWith("image/")) {
      return NextResponse.json({ error: "이미지 파일만 업로드 가능합니다" }, { status: 400 })
    }

// 파일 크기 제한 (5MB)
    const maxSize = 5 * 1024 * 1024 // 5MB
    if (file.size > maxSize) {
      return NextResponse.json({ error: "파일 크기는 5MB 이하여야 합니다" }, { status: 400 })
    }

// 파일 이름 생성 (고유 ID + 원래 확장자)
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)

const ext = file.name.split(".").pop()
    const fileName = `${uuidv4()}.${ext}`

// 파일 저장 경로
    const imagesDir = join(process.cwd(), "public", "images")
    const filePath = join(imagesDir, fileName)

// 파일 저장
    await writeFile(filePath, buffer)

// 성공 응답
    return NextResponse.json({
      success: true,
      fileName: fileName,
      path: `/images/${fileName}`,
    })
  } catch (error) {
    console.error("파일 업로드 오류:", error)
    return NextResponse.json({ error: "파일 업로드 중 오류가 발생했습니다" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

const GEMINI_API_KEY = "AIzaSyDV6nReg51vwG0LFvyHc0dPA5nagJYQPG8"
const GEMINI_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent"

export async function POST(request: NextRequest) {
  try {
    const { message } = await request.json()

// 시스템 프롬프트 설정 (대한민국 육아 정보에 특화된 챗봇)
    const systemPrompt = `당신은 "제이파파"라는 이름의 대한민국 육아 전문 챗봇입니다. 
    대한민국의 육아 관련 정보, 팁, 조언에 대해서만 답변해 주세요.
    아기의 발달 단계, 육아 방법, 수면, 식이, 건강, 교육 등 육아와 관련된 질문에 친절하고 정확하게 답변해 주세요.
    육아와 관련 없는 질문에는 "죄송합니다. 저는 육아 관련 질문에만 답변할 수 있습니다."라고 답변해 주세요.
    답변은 한국어로 제공하며, 친근하고 따뜻한 어조를 유지해 주세요.`

// Gemini API 요청 본문 구성
    const requestBody = {
      contents: [
        {
          parts: [{ text: systemPrompt }, { text: message }],
        },
      ],
    }

// Gemini API 호출
    const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    })

if (!response.ok) {
      const errorData = await response.json()
      console.error("Gemini API 오류:", errorData)
      return NextResponse.json({ error: "챗봇 응답을 가져오는 중 오류가 발생했습니다." }, { status: response.status })
    }

const data = await response.json()
    const reply = data.candidates?.[0]?.content?.parts?.[0]?.text || "죄송합니다. 응답을 생성할 수 없습니다."

return NextResponse.json({ reply })
  } catch (error) {
    console.error("서버 오류:", error)
    return NextResponse.json({ error: "서버 오류가 발생했습니다." }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/chatbot/chatbot.tsx" isMerged="true"
"use client"

import { useState } from "react"
import BabyFaceButton from "./baby-face-button"
import ChatWindow from "./chat-window"

export default function Chatbot() {
  const [isOpen, setIsOpen] = useState(false)

const toggleChat = () => {
    setIsOpen(!isOpen)
  }

return (
    <>
      <BabyFaceButton onClick={toggleChat} isOpen={isOpen} />
      <ChatWindow isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </>
  )
}
[V0_FILE]plaintext:file="public/images/baby-face.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/baby-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/baby-tyBmR5C7q0Sp50D77Wa780vvg1QgtA.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/chatbot/chat-window.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Send, X, Loader2 } from "lucide-react"
import Image from "next/image"

interface ChatWindowProps {
  isOpen: boolean
  onClose: () => void
}

interface Message {
  id: string
  text: string
  sender: "user" | "bot"
}

export default function ChatWindow({ isOpen, onClose }: ChatWindowProps) {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      text: "안녕하세요! 저는 육아 전문 챗봇 제이파파입니다. 육아에 관한 질문이 있으시면 언제든지 물어보세요!",
      sender: "bot",
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// 메시지가 추가될 때마다 스크롤을 아래로 이동
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleSendMessage = async () => {
    if (!input.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      text: input,
      sender: "user",
    }

setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ message: input }),
      })

const data = await response.json()

if (response.ok) {
        const botMessage: Message = {
          id: (Date.now() + 1).toString(),
          text: data.reply,
          sender: "bot",
        }
        setMessages((prev) => [...prev, botMessage])
      } else {
        const errorMessage: Message = {
          id: (Date.now() + 1).toString(),
          text: "죄송합니다. 응답을 생성하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
          sender: "bot",
        }
        setMessages((prev) => [...prev, errorMessage])
      }
    } catch (error) {
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        text: "네트워크 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.",
        sender: "bot",
      }
      setMessages((prev) => [...prev, errorMessage])
    } finally {
      setIsLoading(false)
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, y: 20, scale: 0.9 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 20, scale: 0.9 }}
          className="fixed bottom-24 right-6 z-50 w-80 sm:w-96 h-96 bg-white rounded-2xl shadow-xl overflow-hidden border-2 border-baby-pink/20"
        >
          {/* 헤더 */}
          <div className="bg-baby-pink/20 p-3 flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-8 h-8 bg-white rounded-full mr-2 flex items-center justify-center overflow-hidden border border-baby-pink">
                <Image src="/images/baby-logo.png" alt="제이파파" width={24} height={24} className="rounded-full" />
              </div>
              <h3 className="font-jua text-text-primary">육아 도우미 챗봇</h3>
            </div>
            <button onClick={onClose} className="text-text-secondary hover:text-text-primary transition-colors">
              <X size={18} />
            </button>
          </div>

{/* 메시지 영역 */}
          <div className="h-[calc(100%-96px)] overflow-y-auto p-3 bg-baby-bg/30">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`mb-3 flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
              >
                <div
                  className={`max-w-[80%] p-3 rounded-lg ${
                    message.sender === "user"
                      ? "bg-baby-pink/20 text-text-primary"
                      : "bg-white text-text-primary border border-baby-blue/20"
                  }`}
                >
                  <p className="text-sm whitespace-pre-wrap">{message.text}</p>
                </div>
              </div>
            ))}
            {isLoading && (
              <div className="mb-3 flex justify-start">
                <div className="max-w-[80%] p-3 rounded-lg bg-white text-text-primary border border-baby-blue/20">
                  <div className="flex items-center">
                    <Loader2 size={16} className="animate-spin mr-2" />
                    <p className="text-sm">답변 생성 중...</p>
                  </div>
                </div>
              </div>
            )}
            <div ref={messagesEndRef} />
          </div>

{/* 입력 영역 */}
          <div className="h-16 border-t border-gray-200 p-2 flex items-center">
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="육아 관련 질문을 입력하세요..."
              className="flex-1 h-full resize-none border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-baby-pink"
              disabled={isLoading}
            />
            <button
              onClick={handleSendMessage}
              disabled={!input.trim() || isLoading}
              className={`ml-2 w-10 h-10 rounded-full flex items-center justify-center ${
                !input.trim() || isLoading
                  ? "bg-gray-200 text-gray-400"
                  : "bg-baby-pink text-white hover:bg-baby-pink/90"
              } transition-colors`}
            >
              <Send size={18} />
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescript:file="components/youtube/youtube-section.tsx" isMerged="true"
import YouTubeVideos from "./youtube-videos"