[V0_FILE]typescriptreact:file="components/bubble-wrap.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { cn } from "@/lib/utils" interface BubbleWrapProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" isSoundOn: boolean onAchievement: (id: string, name: string) => void } export default function BubbleWrap({ themeMode, themeColor, isSoundOn, onAchievement }: BubbleWrapProps) { const [poppedBubbles, setPoppedBubbles] = useState>({}) const [totalPopped, setTotalPopped] = useState(0) const [streak, setStreak] = useState(0) const [lastPoppedTime, setLastPoppedTime] = useState(0) const [showConfetti, setShowConfetti] = useState(false) const [touchEnabled, setTouchEnabled] = useState(false) const containerRef = useRef(null) // 터치 디바이스 감지 useEffect(() => { setTouchEnabled("ontouchstart" in window) }, []) // 업적 체크 useEffect(() => { if (totalPopped >= 100) { onAchievement("bubbles-100", "버블 마스터") } if (streak >= 10) { onAchievement("bubbles-streak", "연속 터뜨리기") setShowConfetti(true) setTimeout(() => setShowConfetti(false), 3000) } }, [totalPopped, streak, onAchievement]) const popBubble = (id: string) => { if (!poppedBubbles[id]) { setPoppedBubbles((prev) => ({ ...prev, [id]: true })) setTotalPopped((prev) => prev + 1) // 연속 터뜨리기 체크 const now = Date.now() if (now - lastPoppedTime < 500) { setStreak((prev) => prev + 1) } else { setStreak(1) } setLastPoppedTime(now) // 햅틱 피드백 추가 if (window.navigator.vibrate) { window.navigator.vibrate(5) } // 소리 재생 if (isSoundOn) { const audio = new Audio("/pop.mp3") audio.volume = 0.3 audio.play().catch((e) => console.error("오디오 재생 실패:", e)) } } } const resetBubbles = () => { setPoppedBubbles({}) setTotalPopped(0) setStreak(0) // 햅틱 피드백 추가 if (window.navigator.vibrate) { window.navigator.vibrate([10, 30, 10]) } } const bubbles = Array.from({ length: 36 }, (_, i) => `bubble-${i}`) return (

터뜨린 버블: {totalPopped}

연속: {streak}

{bubbles.map((id) => (

popBubble(id)} onTouchStart={() => touchEnabled && popBubble(id)} className={cn( "aspect-square cursor-pointer rounded-full transition-all duration-150", poppedBubbles[id] ? "bg-primary/10 scale-90 opacity-60" : "bg-primary/30 hover:bg-primary/40 shadow-inner scale-100 hover:scale-105 active:scale-90", )} style={{ transform: poppedBubbles[id] ? "scale(0.8)" : "scale(1)", }} /> ))}

버블을 터뜨려 스트레스를 해소하세요

{/* 모바일 사용자를 위한 팁 */} {touchEnabled && (

💡 팁: 여러 손가락으로 동시에 여러 버블을 터뜨려보세요!

)} {showConfetti && (

{Array.from({ length: 100 }).map((_, i) => (

0.5 ? "50%" : "0", transform: `rotate(${Math.random() * 360}deg)`, animation: `confetti ${Math.random() * 3 + 2}s linear forwards`, animationDelay: `${Math.random() * 2}s`, }} /> ))}

)}

) } [V0_FILE]typescriptreact:file="components/breathing-exercise.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { cn } from "@/lib/utils" interface BreathingExerciseProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" onAchievement: (id: string, name: string) => void } export default function BreathingExercise({ themeMode, themeColor, onAchievement }: BreathingExerciseProps) { const [phase, setPhase] = useState<"inhale" | "hold" | "exhale" | "rest">("inhale") const [counter, setCounter] = useState(4) const [isActive, setIsActive] = useState(false) const [totalTime, setTotalTime] = useState(0) const [breathCount, setBreathCount] = useState(0) const timerRef = useRef(null) const circleRef = useRef(null) useEffect(() => { if (!isActive) return timerRef.current = setInterval(() => { setCounter((prev) => { if (prev <= 1) { // Move to next phase switch (phase) { case "inhale": setPhase("hold") return 7 // Hold for 7 seconds case "hold": setPhase("exhale") return 8 // Exhale for 8 seconds case "exhale": setPhase("rest") return 4 // Rest for 4 seconds case "rest": setPhase("inhale") setBreathCount((prev) => prev + 1) return 4 // Inhale for 4 seconds } } return prev - 1 }) setTotalTime((prev) => prev + 1) }, 1000) return () => { if (timerRef.current) clearInterval(timerRef.current) } }, [isActive, phase]) // 업적 체크 useEffect(() => { if (totalTime >= 300) { // 5분 (300초) onAchievement("breathing-5min", "호흡 달인") } if (breathCount >= 10) { onAchievement("breathing-10", "깊은 호흡") } }, [totalTime, breathCount, onAchievement]) // 애니메이션 개선 useEffect(() => { if (!circleRef.current) return // 각 단계별 애니메이션 적용 if (phase === "inhale") { circleRef.current.style.transform = "scale(1)" circleRef.current.style.boxShadow = "0 0 30px rgba(var(--primary), 0.3)" } else if (phase === "hold") { circleRef.current.style.transform = "scale(1)" circleRef.current.style.boxShadow = "0 0 20px rgba(var(--primary), 0.2)" } else if (phase === "exhale") { circleRef.current.style.transform = "scale(0.75)" circleRef.current.style.boxShadow = "0 0 10px rgba(var(--primary), 0.1)" } else { circleRef.current.style.transform = "scale(0.75)" circleRef.current.style.boxShadow = "0 0 5px rgba(var(--primary), 0.05)" } }, [phase]) const toggleExercise = () => { // 햅틱 피드백 추가 if (window.navigator.vibrate) { window.navigator.vibrate(10) } if (isActive) { setIsActive(false) if (timerRef.current) clearInterval(timerRef.current) } else { setIsActive(true) setPhase("inhale") setCounter(4) } } const getInstructions = () => { switch (phase) { case "inhale": return "들이마시기..." case "hold": return "숨 참기..." case "exhale": return "내쉬기..." case "rest": return "휴식..." } } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs < 10 ? "0" : ""}${secs}` } return (

총 시간: {formatTime(totalTime)} | 호흡 횟수: {breathCount}

{getInstructions()}

{counter}

4-7-8 호흡법은 불안감을 줄이고 마음의 안정을 찾는데 도움이 됩니다

{/* 모바일 사용자를 위한 추가 지침 */}

모바일 팁: 편안한 자세로 앉아 화면을 보며 호흡에 집중하세요. 알림을 끄고 방해받지 않는 환경에서 진행하는 것이 좋습니다.

) } [V0_FILE]typescriptreact:file="components/drawing-pad.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" interface DrawingPadProps { isDarkMode: boolean onAchievement: (id: string, name: string) => void } export default function DrawingPad({ isDarkMode, onAchievement }: DrawingPadProps) { const canvasRef = useRef(null) const [isDrawing, setIsDrawing] = useState(false) const [color, setColor] = useState("#4299e1") // Default blue color const [drawings, setDrawings] = useState(0) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight // Fill with background ctx.fillStyle = isDarkMode ? "#1a202c" : "white" ctx.fillRect(0, 0, canvas.width, canvas.height) }, [isDarkMode]) // 업적 체크 useEffect(() => { if (drawings >= 5) { onAchievement("drawing-5", "예술가") } }, [drawings, onAchievement]) const startDrawing = (e: React.MouseEvent | React.TouchEvent) => { setIsDrawing(true) draw(e) } const stopDrawing = () => { setIsDrawing(false) const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.beginPath() } const draw = (e: React.MouseEvent | React.TouchEvent) => { if (!isDrawing) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const rect = canvas.getBoundingClientRect() let x, y if ("touches" in e) { // Touch event x = e.touches[0].clientX - rect.left y = e.touches[0].clientY - rect.top } else { // Mouse event x = e.clientX - rect.left y = e.clientY - rect.top } ctx.lineWidth = 5 ctx.lineCap = "round" ctx.strokeStyle = color ctx.lineTo(x, y) ctx.stroke() ctx.beginPath() ctx.moveTo(x, y) } const clearCanvas = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return ctx.fillStyle = isDarkMode ? "#1a202c" : "white" ctx.fillRect(0, 0, canvas.width, canvas.height) // 그림 카운트 증가 setDrawings((prev) => prev + 1) } const saveDrawing = () => { const canvas = canvasRef.current if (!canvas) return // 그림 저장 로직 try { const dataUrl = canvas.toDataURL("image/png") const link = document.createElement("a") link.download = `안티스트레스_그림_${new Date().toISOString().slice(0, 10)}.png` link.href = dataUrl link.click() // 그림 카운트 증가 setDrawings((prev) => prev + 1) onAchievement("drawing-save", "그림 저장") } catch (e) { console.error("그림 저장 실패:", e) } } const colors = [ "#4299e1", // blue "#48bb78", // green "#ed8936", // orange "#9f7aea", // purple "#f56565", // red "#ecc94b", // yellow "#ffffff", // white "#000000", // black ] return (

{colors.map((c) => (

자유롭게 그림을 그려 감정을 표현하고 스트레스를 해소하세요

) } [V0_FILE]typescriptreact:file="components/water-ripple.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" interface WaterRippleProps { isDarkMode: boolean isSoundOn: boolean onAchievement: (id: string, name: string) => void } export default function WaterRipple({ isDarkMode, isSoundOn, onAchievement }: WaterRippleProps) { const canvasRef = useRef(null) const [rippleCount, setRippleCount] = useState(0) const ripples = useRef< Array<{ x: number y: number radius: number maxRadius: number opacity: number speed: number }> >([]) // 캔버스 초기화 useEffect(() => { const canvas = canvasRef.current if (!canvas) return canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight // 애니메이션 시작 let animationId: number const animate = () => { const ctx = canvas.getContext("2d") if (!ctx) return // 배경 지우기 ctx.fillStyle = isDarkMode ? "#1a202c" : "#f0f9ff" ctx.fillRect(0, 0, canvas.width, canvas.height) // 물결 그리기 ripples.current.forEach((ripple, index) => { ripple.radius += ripple.speed ripple.opacity -= 0.01 if (ripple.opacity <= 0 || ripple.radius >= ripple.maxRadius) { ripples.current.splice(index, 1) return } ctx.beginPath() ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2) ctx.strokeStyle = isDarkMode ? `rgba(56, 178, 255, ${ripple.opacity})` : `rgba(66, 153, 225, ${ripple.opacity})` ctx.lineWidth = 2 ctx.stroke() }) animationId = requestAnimationFrame(animate) } animate() return () => { cancelAnimationFrame(animationId) } }, [isDarkMode]) // 업적 체크 useEffect(() => { if (rippleCount >= 100) { onAchievement("water-100", "물결 명상가") } }, [rippleCount, onAchievement]) const createRipple = (x: number, y: number) => { ripples.current.push({ x, y, radius: 0, maxRadius: Math.random() * 50 + 50, opacity: 1, speed: Math.random() * 2 + 1, }) setRippleCount((prev) => prev + 1) // 소리 재생 if (isSoundOn) { const audio = new Audio("/water-drop.mp3") audio.volume = 0.2 audio.play().catch((e) => console.error("오디오 재생 실패:", e)) } } const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() let x, y if ("touches" in e) { // Touch event x = e.touches[0].clientX - rect.left y = e.touches[0].clientY - rect.top } else { // Mouse event x = e.clientX - rect.left y = e.clientY - rect.top } createRipple(x, y) } return (

만든 물결: {rippleCount}

화면을 터치하여 평온한 물결을 만들고 마음을 진정시키세요

) } [V0_FILE]typescriptreact:file="components/fidget-spinner.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" interface FidgetSpinnerProps { isDarkMode: boolean isSoundOn: boolean onAchievement: (id: string, name: string) => void } export default function FidgetSpinner({ isDarkMode, isSoundOn, onAchievement }: FidgetSpinnerProps) { const canvasRef = useRef(null) const [rotation, setRotation] = useState(0) const [speed, setSpeed] = useState(0) const [spinCount, setSpinCount] = useState(0) const [maxSpeed, setMaxSpeed] = useState(0) const [isSpinning, setIsSpinning] = useState(false) const lastPos = useRef({ x: 0, y: 0 }) const animationRef = useRef(0) // 캔버스 초기화 및 애니메이션 useEffect(() => { const canvas = canvasRef.current if (!canvas) return canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight const drawSpinner = () => { const ctx = canvas.getContext("2d") if (!ctx) return const centerX = canvas.width / 2 const centerY = canvas.height / 2 const radius = Math.min(centerX, centerY) * 0.7 // 배경 지우기 ctx.clearRect(0, 0, canvas.width, canvas.height) // 회전 적용 ctx.save() ctx.translate(centerX, centerY) ctx.rotate(rotation) // 스피너 그리기 for (let i = 0; i < 3; i++) { const angle = ((Math.PI * 2) / 3) * i // 원형 부분 ctx.beginPath() ctx.arc(Math.cos(angle) * radius * 0.7, Math.sin(angle) * radius * 0.7, radius * 0.25, 0, Math.PI * 2) ctx.fillStyle = isDarkMode ? i === 0 ? "#3182ce" : i === 1 ? "#805ad5" : "#38a169" : i === 0 ? "#4299e1" : i === 1 ? "#9f7aea" : "#48bb78" ctx.fill() // 중앙으로 연결하는 부분 ctx.beginPath() ctx.moveTo(0, 0) ctx.lineTo(Math.cos(angle) * radius * 0.7, Math.sin(angle) * radius * 0.7) ctx.lineWidth = radius * 0.15 ctx.strokeStyle = isDarkMode ? "#2d3748" : "#e2e8f0" ctx.stroke() } // 중앙 원 ctx.beginPath() ctx.arc(0, 0, radius * 0.2, 0, Math.PI * 2) ctx.fillStyle = isDarkMode ? "#4a5568" : "#cbd5e0" ctx.fill() ctx.restore() } const animate = () => { // 회전 업데이트 if (speed > 0) { setRotation((prev) => prev + speed) setSpeed((prev) => { const newSpeed = prev * 0.99 // 마찰 적용 if (newSpeed < 0.001) { setIsSpinning(false) return 0 } return newSpeed }) } drawSpinner() animationRef.current = requestAnimationFrame(animate) } animate() return () => { cancelAnimationFrame(animationRef.current) } }, [isDarkMode, rotation, speed]) // 업적 체크 useEffect(() => { if (spinCount >= 10) { onAchievement("spinner-10", "스피너 마스터") } if (maxSpeed >= 0.3) { onAchievement("spinner-speed", "초고속 회전") } }, [spinCount, maxSpeed, onAchievement]) const handleStart = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() let x, y if ("touches" in e) { // Touch event x = e.touches[0].clientX - rect.left y = e.touches[0].clientY - rect.top } else { // Mouse event x = e.clientX - rect.left y = e.clientY - rect.top } lastPos.current = { x, y } } const handleMove = (e: React.MouseEvent | React.TouchEvent) => { if ("buttons" in e && e.buttons !== 1) return const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() let x, y if ("touches" in e) { // Touch event x = e.touches[0].clientX - rect.left y = e.touches[0].clientY - rect.top } else { // Mouse event x = e.clientX - rect.left y = e.clientY - rect.top } const centerX = canvas.width / 2 const centerY = canvas.height / 2 // 중심점에서의 각도 계산 const lastAngle = Math.atan2(lastPos.current.y - centerY, lastPos.current.x - centerX) const newAngle = Math.atan2(y - centerY, x - centerX) let angleDiff = newAngle - lastAngle // 각도 차이가 PI를 넘어가면 보정 if (angleDiff > Math.PI) angleDiff -= Math.PI * 2 if (angleDiff < -Math.PI) angleDiff += Math.PI * 2 // 속도 업데이트 const newSpeed = Math.abs(angleDiff) * 0.5 setSpeed((prev) => prev + newSpeed) // 최대 속도 업데이트 if (newSpeed > maxSpeed) { setMaxSpeed(newSpeed) } lastPos.current = { x, y } if (!isSpinning && newSpeed > 0) { setIsSpinning(true) setSpinCount((prev) => prev + 1) // 소리 재생 if (isSoundOn) { const audio = new Audio("/spin.mp3") audio.volume = 0.2 audio.play().catch((e) => console.error("오디오 재생 실패:", e)) } } } return (

회전 횟수: {spinCount}

스피너를 드래그하여 회전시키고 집중력을 높이세요

) } [V0_FILE]typescriptreact:file="components/achievement-popup.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Award } from "lucide-react" import { cn } from "@/lib/utils" interface AchievementPopupProps { name: string themeMode: "light" | "dark" | "black" } export default function AchievementPopup({ name, themeMode }: AchievementPopupProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setIsVisible(true) const timer = setTimeout(() => { setIsVisible(false) }, 2500) return () => clearTimeout(timer) }, [name]) return (

업적 달성!

{name}

) } [V0_FILE]plaintext:file="public/pop.mp3" url="https://v0.blob.com/sound-effects/bubble-pop.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/water-drop.mp3" url="https://v0.blob.com/sound-effects/water-drop.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/spin.mp3" url="https://v0.blob.com/sound-effects/spin-sound.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/achievement.mp3" url="https://v0.blob.com/sound-effects/achievement.mp3" isMerged="true" isEdit="true" [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, } from "@/components/ui/dropdown-menu" interface ThemeSwitcherProps { themeMode: "light" | "dark" | "black" setThemeMode: (mode: "light" | "dark" | "black") => void themeColor: "blue" | "purple" | "green" | "amber" setThemeColor: (color: "blue" | "purple" | "green" | "amber") => void } export default function ThemeSwitcher({ themeMode, setThemeMode, themeColor, setThemeColor }: ThemeSwitcherProps) { const [open, setOpen] = useState(false) const handleModeChange = (mode: "light" | "dark" | "black") => { setThemeMode(mode) localStorage.setItem("theme-mode", mode) // 모든 테마 사용 업적 체크 const usedModes = JSON.parse(localStorage.getItem("used-modes") || "[]") if (!usedModes.includes(mode)) { const newUsedModes = [...usedModes, mode] localStorage.setItem("used-modes", JSON.stringify(newUsedModes)) // 모든 테마 사용 확인 const allThemes = ["light", "dark", "black"] const allColors = ["blue", "purple", "green", "amber"] const usedColors = JSON.parse(localStorage.getItem("used-colors") || "[]") if ( allThemes.every((theme) => newUsedModes.includes(theme)) && allColors.every((color) => usedColors.includes(color)) ) { // 업적 달성 const achievements = JSON.parse(localStorage.getItem("achievements") || "{}") achievements["theme-explorer"] = true localStorage.setItem("achievements", JSON.stringify(achievements)) } } } const handleColorChange = (color: "blue" | "purple" | "green" | "amber") => { setThemeColor(color) localStorage.setItem("theme-color", color) // 모든 색상 사용 업적 체크 const usedColors = JSON.parse(localStorage.getItem("used-colors") || "[]") if (!usedColors.includes(color)) { const newUsedColors = [...usedColors, color] localStorage.setItem("used-colors", JSON.stringify(newUsedColors)) // 모든 테마 사용 확인 const allThemes = ["light", "dark", "black"] const allColors = ["blue", "purple", "green", "amber"] const usedModes = JSON.parse(localStorage.getItem("used-modes") || "[]") if ( allThemes.every((theme) => usedModes.includes(theme)) && allColors.every((color) => newUsedColors.includes(color)) ) { // 업적 달성 const achievements = JSON.parse(localStorage.getItem("achievements") || "{}") achievements["theme-explorer"] = true localStorage.setItem("achievements", JSON.stringify(achievements)) } } } return ( 테마 모드 라이트 모드 다크 모드 트루 블랙 테마 색상

블루

퍼플

그린

앰버 ) } [V0_FILE]typescriptreact:file="components/sound-scape.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Play, Pause, Volume2, VolumeX } from "lucide-react" import { Slider } from "@/components/ui/slider" import { cn } from "@/lib/utils" interface SoundScapeProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" onAchievement: (id: string, name: string) => void } export default function SoundScape({ themeMode, themeColor, onAchievement }: SoundScapeProps) { const [activeSound, setActiveSound] = useState(null) const [volume, setVolume] = useState(0.5) const [isMuted, setIsMuted] = useState(false) const [playedSounds, setPlayedSounds] = useState([]) const audioRef = useRef(null) const sounds = [ { id: "rain", name: "빗소리", icon: "🌧️" }, { id: "forest", name: "숲속", icon: "🌳" }, { id: "waves", name: "파도", icon: "🌊" }, { id: "fire", name: "모닥불", icon: "🔥" }, { id: "birds", name: "새소리", icon: "🐦" }, { id: "white-noise", name: "화이트 노이즈", icon: "📻" }, ] useEffect(() => { // 오디오 객체 생성 audioRef.current = new Audio() audioRef.current.loop = true return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } }, []) // 볼륨 변경 useEffect(() => { if (audioRef.current) { audioRef.current.volume = isMuted ? 0 : volume } }, [volume, isMuted]) // 업적 체크 useEffect(() => { if (playedSounds.length === sounds.length) { onAchievement("sound-all", "사운드 여행자") } }, [playedSounds, sounds.length, onAchievement]) const playSound = (soundId: string) => { if (audioRef.current) { // 현재 재생 중인 소리 중지 audioRef.current.pause() if (activeSound === soundId) { // 같은 소리면 중지 setActiveSound(null) } else { // 다른 소리면 재생 audioRef.current.src = `/sounds/${soundId}.mp3` audioRef.current.volume = isMuted ? 0 : volume audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e)) setActiveSound(soundId) // 재생한 소리 기록 if (!playedSounds.includes(soundId)) { setPlayedSounds((prev) => [...prev, soundId]) } } } } const toggleMute = () => { setIsMuted(!isMuted) } return (

재생 중: {activeSound ? sounds.find((s) => s.id === activeSound)?.name : "없음"}

setVolume(value[0] / 100)} />

{sounds.map((sound) => ( ))}

자연의 소리를 들으며 마음의 안정을 찾으세요

) } [V0_FILE]typescriptreact:file="components/guided-meditation.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Play, Pause, SkipBack, SkipForward } from "lucide-react" import { Progress } from "@/components/ui/progress" import { cn } from "@/lib/utils" interface GuidedMeditationProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" isSoundOn: boolean onAchievement: (id: string, name: string) => void } export default function GuidedMeditation({ themeMode, themeColor, isSoundOn, onAchievement }: GuidedMeditationProps) { const [isPlaying, setIsPlaying] = useState(false) const [currentMeditation, setCurrentMeditation] = useState(0) const [progress, setProgress] = useState(0) const [duration, setDuration] = useState(0) const [currentTime, setCurrentTime] = useState(0) const [totalMeditationTime, setTotalMeditationTime] = useState(0) const audioRef = useRef(null) const timerRef = useRef(null) const meditations = [ { id: "breathing", name: "호흡 명상", duration: 180, description: "호흡에 집중하는 짧은 명상" }, { id: "body-scan", name: "바디 스캔", duration: 300, description: "몸의 감각에 집중하는 명상" }, { id: "gratitude", name: "감사 명상", duration: 240, description: "감사함을 느끼는 명상" }, { id: "stress-relief", name: "스트레스 해소", duration: 360, description: "스트레스를 완화하는 명상" }, ] useEffect(() => { // 오디오 객체 생성 audioRef.current = new Audio() // 오디오 이벤트 리스너 const handleTimeUpdate = () => { if (audioRef.current) { setCurrentTime(audioRef.current.currentTime) setProgress((audioRef.current.currentTime / audioRef.current.duration) * 100) } } const handleEnded = () => { setIsPlaying(false) setProgress(0) setCurrentTime(0) } if (audioRef.current) { audioRef.current.addEventListener("timeupdate", handleTimeUpdate) audioRef.current.addEventListener("ended", handleEnded) audioRef.current.addEventListener("loadedmetadata", () => { if (audioRef.current) { setDuration(audioRef.current.duration) } }) } return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current.removeEventListener("timeupdate", handleTimeUpdate) audioRef.current.removeEventListener("ended", handleEnded) audioRef.current = null } if (timerRef.current) { clearInterval(timerRef.current) } } }, []) // 명상 시간 추적 useEffect(() => { if (isPlaying) { timerRef.current = setInterval(() => { setTotalMeditationTime((prev) => prev + 1) }, 1000) } else if (timerRef.current) { clearInterval(timerRef.current) } return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, [isPlaying]) // 업적 체크 useEffect(() => { if (totalMeditationTime >= 600) { // 10분 (600초) onAchievement("meditation-10min", "명상 마스터") } }, [totalMeditationTime, onAchievement]) const togglePlay = () => { if (audioRef.current) { if (isPlaying) { audioRef.current.pause() } else { audioRef.current.src = `/meditations/${meditations[currentMeditation].id}.mp3` audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e)) } setIsPlaying(!isPlaying) } } const changeMeditation = (direction: "prev" | "next") => { if (audioRef.current) { audioRef.current.pause() setIsPlaying(false) setProgress(0) setCurrentTime(0) if (direction === "prev") { setCurrentMeditation((prev) => (prev === 0 ? meditations.length - 1 : prev - 1)) } else { setCurrentMeditation((prev) => (prev === meditations.length - 1 ? 0 : prev + 1)) } } } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = Math.floor(seconds % 60) return `${mins}:${secs < 10 ? "0" : ""}${secs}` } return (

{meditations[currentMeditation].name}

{meditations[currentMeditation].description}

{formatTime(currentTime)} {formatTime(meditations[currentMeditation].duration)}

{meditations.map((meditation, index) => ( ))}

총 명상 시간: {formatTime(totalMeditationTime)}

) } [V0_FILE]typescriptreact:file="components/mood-tracker.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { Calendar } from "@/components/ui/calendar" import { cn } from "@/lib/utils" interface MoodTrackerProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" onAchievement: (id: string, name: string) => void } export default function MoodTracker({ themeMode, themeColor, onAchievement }: MoodTrackerProps) { const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedMood, setSelectedMood] = useState(null) const [moodHistory, setMoodHistory] = useState>({}) const [consecutiveDays, setConsecutiveDays] = useState(0) // 로컬 스토리지에서 기분 기록 불러오기 useEffect(() => { const savedMoods = localStorage.getItem("mood-history") if (savedMoods) { setMoodHistory(JSON.parse(savedMoods)) } // 연속 기록 일수 계산 const today = new Date().toISOString().split("T")[0] let consecutive = 0 const currentDate = new Date() while (true) { const dateString = currentDate.toISOString().split("T")[0] const savedMoodsObj = savedMoods ? JSON.parse(savedMoods) : {} if (savedMoodsObj[dateString] !== undefined) { consecutive++ currentDate.setDate(currentDate.getDate() - 1) } else { break } } setConsecutiveDays(consecutive) // 업적 체크 if (consecutive >= 7) { onAchievement("mood-7days", "기분 추적기") } }, [onAchievement]) // 선택한 날짜의 기분 불러오기 useEffect(() => { if (selectedDate) { const dateString = selectedDate.toISOString().split("T")[0] setSelectedMood(moodHistory[dateString] || null) } }, [selectedDate, moodHistory]) const moods = [ { value: 1, emoji: "😢", label: "매우 나쁨" }, { value: 2, emoji: "😔", label: "나쁨" }, { value: 3, emoji: "😐", label: "보통" }, { value: 4, emoji: "🙂", label: "좋음" }, { value: 5, emoji: "😄", label: "매우 좋음" }, ] const saveMood = (mood: number) => { if (selectedDate) { const dateString = selectedDate.toISOString().split("T")[0] const newMoodHistory = { ...moodHistory, [dateString]: mood } setMoodHistory(newMoodHistory) setSelectedMood(mood) // 로컬 스토리지에 저장 localStorage.setItem("mood-history", JSON.stringify(newMoodHistory)) // 오늘 날짜인 경우 연속 일수 업데이트 const today = new Date().toISOString().split("T")[0] if (dateString === today) { const yesterday = new Date() yesterday.setDate(yesterday.getDate() - 1) const yesterdayString = yesterday.toISOString().split("T")[0] if (moodHistory[yesterdayString] !== undefined) { setConsecutiveDays((prev) => prev + 1) // 업적 체크 if (consecutiveDays + 1 >= 7) { onAchievement("mood-7days", "기분 추적기") } } else { setConsecutiveDays(1) } } } } // 날짜에 기분 표시 const dayClassName = (date: Date) => { const dateString = date.toISOString().split("T")[0] const mood = moodHistory[dateString] if (mood !== undefined) { return cn( "relative", "after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:rounded-full", mood === 1 && "after:bg-red-500", mood === 2 && "after:bg-orange-500", mood === 3 && "after:bg-yellow-500", mood === 4 && "after:bg-green-500", mood === 5 && "after:bg-blue-500", ) } return "" } return (

기분 추적

{consecutiveDays}일 연속 기록

new Date(date)), }} modifiersClassNames={{ booked: "font-medium", }} components={{ DayContent: ({ date }) =>

{date.getDate()}

, }} />

{selectedDate?.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}의 기분

{moods.map((mood) => ( ))}

매일 기분을 기록하고 패턴을 파악하세요

) } [V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false) useEffect(() => { if (typeof window === "undefined") return const media = window.matchMedia(query) if (media.matches !== matches) { setMatches(media.matches) } const listener = () => setMatches(media.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [matches, query]) return matches } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { 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))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/sounds/rain.mp3" url="https://v0.blob.com/sound-effects/rain.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/sounds/forest.mp3" url="https://v0.blob.com/sound-effects/forest.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/sounds/waves.mp3" url="https://v0.blob.com/sound-effects/waves.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/sounds/fire.mp3" url="https://v0.blob.com/sound-effects/fire.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/sounds/birds.mp3" url="https://v0.blob.com/sound-effects/birds.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/sounds/white-noise.mp3" url="https://v0.blob.com/sound-effects/white-noise.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/meditations/breathing.mp3" url="https://v0.blob.com/sound-effects/meditation-breathing.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/meditations/body-scan.mp3" url="https://v0.blob.com/sound-effects/meditation-body-scan.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/meditations/gratitude.mp3" url="https://v0.blob.com/sound-effects/meditation-gratitude.mp3" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/meditations/stress-relief.mp3" url="https://v0.blob.com/sound-effects/meditation-stress-relief.mp3" isMerged="true" isEdit="true" [V0_FILE]typescriptreact:file="components/focus-mode.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Play, Pause, RotateCcw, Check, X } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface FocusModeProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" isSoundOn: boolean onAchievement: (id: string, name: string) => void } export default function FocusMode({ themeMode, themeColor, isSoundOn, onAchievement }: FocusModeProps) { const [isActive, setIsActive] = useState(false) const [isPaused, setIsPaused] = useState(false) const [timeLeft, setTimeLeft] = useState(25 * 60) // 25 minutes in seconds const [currentPhase, setCurrentPhase] = useState<"focus" | "break">("focus") const [focusLength, setFocusLength] = useState(25) // minutes const [breakLength, setBreakLength] = useState(5) // minutes const [completedSessions, setCompletedSessions] = useState(0) const [showSettings, setShowSettings] = useState(false) const [totalFocusTime, setTotalFocusTime] = useState(0) const timerRef = useRef(null) const audioRef = useRef(null) // 타이머 초기화 useEffect(() => { // 로컬 스토리지에서 설정 불러오기 const savedFocusLength = localStorage.getItem("focus-length") const savedBreakLength = localStorage.getItem("break-length") const savedCompletedSessions = localStorage.getItem("completed-focus-sessions") const savedTotalFocusTime = localStorage.getItem("total-focus-time") if (savedFocusLength) setFocusLength(Number.parseInt(savedFocusLength)) if (savedBreakLength) setBreakLength(Number.parseInt(savedBreakLength)) if (savedCompletedSessions) setCompletedSessions(Number.parseInt(savedCompletedSessions)) if (savedTotalFocusTime) setTotalFocusTime(Number.parseInt(savedTotalFocusTime)) // 오디오 객체 생성 audioRef.current = new Audio("/sounds/bell.mp3") return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, []) // 타이머 업데이트 useEffect(() => { if (isActive && !isPaused) { timerRef.current = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { // 타이머 종료 if (isSoundOn && audioRef.current) { audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e)) } // 진동 피드백 if (window.navigator.vibrate) { window.navigator.vibrate([100, 50, 100]) } // 다음 단계로 전환 if (currentPhase === "focus") { // 집중 시간 완료 const newCompletedSessions = completedSessions + 1 setCompletedSessions(newCompletedSessions) localStorage.setItem("completed-focus-sessions", newCompletedSessions.toString()) // 총 집중 시간 업데이트 const newTotalFocusTime = totalFocusTime + focusLength setTotalFocusTime(newTotalFocusTime) localStorage.setItem("total-focus-time", newTotalFocusTime.toString()) // 업적 체크 if (newCompletedSessions >= 5) { onAchievement("focus-5", "집중의 달인") } if (newTotalFocusTime >= 60) { onAchievement("focus-1hour", "집중력 마스터") } // 휴식 모드로 전환 setCurrentPhase("break") return breakLength * 60 } else { // 휴식 시간 완료, 다시 집중 모드로 setCurrentPhase("focus") return focusLength * 60 } } return prev - 1 }) }, 1000) } return () => { if (timerRef.current) { clearInterval(timerRef.current) } } }, [ isActive, isPaused, currentPhase, focusLength, breakLength, completedSessions, totalFocusTime, isSoundOn, onAchievement, ]) // 타이머 시작 const startTimer = () => { if (!isActive) { setIsActive(true) setIsPaused(false) setTimeLeft(currentPhase === "focus" ? focusLength * 60 : breakLength * 60) } else if (isPaused) { setIsPaused(false) } } // 타이머 일시정지 const pauseTimer = () => { setIsPaused(true) } // 타이머 리셋 const resetTimer = () => { setIsActive(false) setIsPaused(false) setTimeLeft(currentPhase === "focus" ? focusLength * 60 : breakLength * 60) } // 설정 저장 const saveSettings = () => { localStorage.setItem("focus-length", focusLength.toString()) localStorage.setItem("break-length", breakLength.toString()) setTimeLeft(currentPhase === "focus" ? focusLength * 60 : breakLength * 60) setShowSettings(false) } // 시간 포맷팅 const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs < 10 ? "0" : ""}${secs}` } // 진행률 계산 const calculateProgress = () => { const totalSeconds = currentPhase === "focus" ? focusLength * 60 : breakLength * 60 return ((totalSeconds - timeLeft) / totalSeconds) * 100 } return (

{showSettings ? (

타이머 설정

집중 시간 (분)

{focusLength}

휴식 시간 (분)

{breakLength}

) : ( <>

{currentPhase === "focus" ? "집중 시간" : "휴식 시간"}

완료한 세션: {completedSessions}

{formatTime(timeLeft)}

{currentPhase === "focus" ? "집중" : "휴식"}

{!isActive || isPaused ? ( ) : ( )}

포모도로 기법

포모도로 기법은 25분 집중 후 5분 휴식을 반복하는 시간 관리 방법입니다. 이 방법은 집중력을 높이고 효율적으로 작업할 수 있도록 도와줍니다.

총 집중 시간: {Math.floor(totalFocusTime / 60)}시간 {totalFocusTime % 60}분

)}

) } [V0_FILE]typescriptreact:file="components/journaling.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { Save, Trash2, Calendar, Edit, List } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" interface JournalingProps { themeMode: "light" | "dark" | "black" themeColor: "blue" | "purple" | "green" | "amber" onAchievement: (id: string, name: string) => void } export default function Journaling({ themeMode, themeColor, onAchievement }: JournalingProps) { const [entries, setEntries] = useState< Array<{ id: string date: string content: string mood?: number }> >([]) const [currentEntry, setCurrentEntry] = useState("") const [selectedEntryId, setSelectedEntryId] = useState(null) const [view, setView] = useState<"write" | "list">("write") const [consecutiveDays, setConsecutiveDays] = useState(0) // 로컬 스토리지에서 저널 불러오기 useEffect(() => { const savedEntries = localStorage.getItem("journal-entries") if (savedEntries) { setEntries(JSON.parse(savedEntries)) } // 연속 작성 일수 계산 const today = new Date().toISOString().split("T")[0] let consecutive = 0 const currentDate = new Date() if (savedEntries) { const entriesArray = JSON.parse(savedEntries) as Array<{ id: string date: string content: string }> while (true) { const dateString = currentDate.toISOString().split("T")[0] const hasEntryForDate = entriesArray.some((entry) => entry.date === dateString) if (hasEntryForDate) { consecutive++ currentDate.setDate(currentDate.getDate() - 1) } else { break } } } setConsecutiveDays(consecutive) // 업적 체크 if (consecutive >= 7) { onAchievement("journal-7days", "저널 작가") } }, [onAchievement]) // 선택된 엔트리 불러오기 useEffect(() => { if (selectedEntryId) { const entry = entries.find((e) => e.id === selectedEntryId) if (entry) { setCurrentEntry(entry.content) } } else { setCurrentEntry("") } }, [selectedEntryId, entries]) // 저널 저장 const saveEntry = () => { if (!currentEntry.trim()) return const today = new Date().toISOString().split("T")[0] if (selectedEntryId) { // 기존 엔트리 업데이트 const updatedEntries = entries.map((entry) => entry.id === selectedEntryId ? { ...entry, content: currentEntry, date: today } : entry, ) setEntries(updatedEntries) localStorage.setItem("journal-entries", JSON.stringify(updatedEntries)) setSelectedEntryId(null) } else { // 새 엔트리 추가 const newEntry = { id: Date.now().toString(), date: today, content: currentEntry, } const newEntries = [newEntry, ...entries] setEntries(newEntries) localStorage.setItem("journal-entries", JSON.stringify(newEntries)) // 오늘 첫 작성인지 확인 const hasEntryForToday = entries.some((entry) => entry.date === today) if (!hasEntryForToday) { // 연속 일수 업데이트 const newConsecutiveDays = consecutiveDays + 1 setConsecutiveDays(newConsecutiveDays) // 업적 체크 if (newConsecutiveDays >= 7) { onAchievement("journal-7days", "저널 작가") } } } setCurrentEntry("") // 엔트리 개수 업적 체크 if (entries.length + 1 >= 10) { onAchievement("journal-10", "생각 기록자") } } // 엔트리 삭제 const deleteEntry = (id: string) => { const updatedEntries = entries.filter((entry) => entry.id !== id) setEntries(updatedEntries) localStorage.setItem("journal-entries", JSON.stringify(updatedEntries)) if (selectedEntryId === id) { setSelectedEntryId(null) setCurrentEntry("") } } // 날짜 포맷팅 const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "short", }) } return (

마음 일기

{consecutiveDays > 0 ? `${consecutiveDays}일 연속 작성 중` : "오늘의 생각을 기록하세요"}

{view === "write" ? ( <>

{selectedEntryId ? formatDate( entries.find((e) => e.id === selectedEntryId)?.date || new Date().toISOString().split("T")[0], ) : formatDate(new Date().toISOString().split("T")[0])}

setCurrentEntry(e.target.value)}
              placeholder="오늘 어떤 생각이 들었나요? 마음을 비우고 자유롭게 작성해보세요."
              className="min-h-[200px] resize-none border-none bg-transparent focus-visible:ring-0"
            />
          </div>

<div className="flex justify-end gap-2">
            {selectedEntryId && (
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedEntryId(null)
                  setCurrentEntry("")
                }}
              >
                취소
              </Button>
            )}
            <Button onClick={saveEntry} disabled={!currentEntry.trim()}>
              <Save className="mr-2 h-4 w-4" />
              저장하기
            </Button>
          </div>

{entries.length > 0 && (
            <div className="mt-6">
              <h4 className="mb-2 text-sm font-medium text-primary">최근 일기</h4>
              <div className="space-y-2">
                {entries.slice(0, 3).map((entry) => (
                  <div
                    key={entry.id}
                    className="rounded-lg bg-muted/50 p-3 hover:bg-muted/70 transition-colors cursor-pointer"
                    onClick={() => {
                      setSelectedEntryId(entry.id)
                      setView("write")
                    }}
                  >
                    <div className="mb-1 flex items-center justify-between">
                      <div className="text-xs text-muted-foreground">{formatDate(entry.date)}</div>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation()
                          deleteEntry(entry.id)
                        }}
                        className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                    <div className="line-clamp-2 text-sm">{entry.content}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      ) : (
        <div className="space-y-3">
          {entries.length > 0 ? (
            entries.map((entry) => (
              <div key={entry.id} className="rounded-lg bg-card p-4 shadow-sm hover:shadow-md transition-shadow">
                <div className="mb-2 flex items-center justify-between">
                  <div className="font-medium text-primary">{formatDate(entry.date)}</div>
                  <div className="flex gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setSelectedEntryId(entry.id)
                        setView("write")
                      }}
                      className="h-7 w-7 p-0"
                    >
                      <Edit className="h-3.5 w-3.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => deleteEntry(entry.id)}
                      className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
                <div className="whitespace-pre-wrap text-sm">{entry.content}</div>
              </div>
            ))
          ) : (
            <div className="flex flex-col items-center justify-center rounded-lg bg-muted/30 p-8 text-center">
              <div className="mb-2 rounded-full bg-primary/10 p-3">
                <Edit className="h-6 w-6 text-primary" />
              </div>
              <h4 className="mb-1 text-base font-medium">아직 작성된 일기가 없습니다</h4>
              <p className="text-sm text-muted-foreground">첫 번째 일기를 작성해보세요</p>
              <Button className="mt-4" onClick={() => setView("write")}>
                일기 작성하기
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/settings-sheet.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Settings, X, Moon, Sun, Volume2, VolumeX, Trash2, Download, Upload, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { cn } from "@/lib/utils"

interface SettingsSheetProps {
  themeMode: "light" | "dark" | "black"
  setThemeMode: (mode: "light" | "dark" | "black") => void
  themeColor: "blue" | "purple" | "green" | "amber"
  setThemeColor: (color: "blue" | "purple" | "green" | "amber") => void
  isSoundOn: boolean
  setIsSoundOn: (on: boolean) => void
  isOpen: boolean
  onClose: () => void
}

export default function SettingsSheet({
  themeMode,
  setThemeMode,
  themeColor,
  setThemeColor,
  isSoundOn,
  setIsSoundOn,
  isOpen,
  onClose,
}: SettingsSheetProps) {
  const [soundVolume, setSoundVolume] = useState(50)
  const [hapticFeedback, setHapticFeedback] = useState(true)
  const [autoTheme, setAutoTheme] = useState(false)
  const [notificationsEnabled, setNotificationsEnabled] = useState(false)
  const [currentTab, setCurrentTab] = useState("appearance")

// 로컬 스토리지에서 설정 불러오기
  useEffect(() => {
    const savedVolume = localStorage.getItem("sound-volume")
    const savedHaptic = localStorage.getItem("haptic-feedback")
    const savedAutoTheme = localStorage.getItem("auto-theme")
    const savedNotifications = localStorage.getItem("notifications-enabled")

if (savedVolume) setSoundVolume(Number.parseInt(savedVolume))
    if (savedHaptic) setHapticFeedback(savedHaptic === "true")
    if (savedAutoTheme) setAutoTheme(savedAutoTheme === "true")
    if (savedNotifications) setNotificationsEnabled(savedNotifications === "true")
  }, [])

// 설정 변경 시 저장
  useEffect(() => {
    localStorage.setItem("sound-volume", soundVolume.toString())
    localStorage.setItem("haptic-feedback", hapticFeedback.toString())
    localStorage.setItem("auto-theme", autoTheme.toString())
    localStorage.setItem("notifications-enabled", notificationsEnabled.toString())
  }, [soundVolume, hapticFeedback, autoTheme, notificationsEnabled])

// 자동 테마 설정
  useEffect(() => {
    if (autoTheme) {
      const handleThemeChange = () => {
        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
        setThemeMode(prefersDark ? "dark" : "light")
      }

const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
      mediaQuery.addEventListener("change", handleThemeChange)

// 초기 설정
      handleThemeChange()

return () => mediaQuery.removeEventListener("change", handleThemeChange)
    }
  }, [autoTheme, setThemeMode])

// 데이터 내보내기
  const exportData = () => {
    const data = {
      settings: {
        themeMode,
        themeColor,
        soundVolume,
        isSoundOn,
        hapticFeedback,
        autoTheme,
        notificationsEnabled,
      },
      achievements: JSON.parse(localStorage.getItem("achievements") || "{}"),
      journalEntries: JSON.parse(localStorage.getItem("journal-entries") || "[]"),
      moodHistory: JSON.parse(localStorage.getItem("mood-history") || "{}"),
      focusStats: {
        completedSessions: localStorage.getItem("completed-focus-sessions"),
        totalFocusTime: localStorage.getItem("total-focus-time"),
      },
    }

const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `antistress-data-${new Date().toISOString().split("T")[0]}.json`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

// 데이터 가져오기
  const importData = () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = ".json"
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (!file) return

const reader = new FileReader()
      reader.onload = (event) => {
        try {
          const data = JSON.parse(event.target?.result as string)

// 설정 적용
          if (data.settings) {
            if (data.settings.themeMode) setThemeMode(data.settings.themeMode)
            if (data.settings.themeColor) setThemeColor(data.settings.themeColor)
            if (data.settings.soundVolume) setSoundVolume(data.settings.soundVolume)
            if (data.settings.isSoundOn !== undefined) setIsSoundOn(data.settings.isSoundOn)
            if (data.settings.hapticFeedback !== undefined) setHapticFeedback(data.settings.hapticFeedback)
            if (data.settings.autoTheme !== undefined) setAutoTheme(data.settings.autoTheme)
            if (data.settings.notificationsEnabled !== undefined)
              setNotificationsEnabled(data.settings.notificationsEnabled)
          }

// 데이터 저장
          if (data.achievements) localStorage.setItem("achievements", JSON.stringify(data.achievements))
          if (data.journalEntries) localStorage.setItem("journal-entries", JSON.stringify(data.journalEntries))
          if (data.moodHistory) localStorage.setItem("mood-history", JSON.stringify(data.moodHistory))
          if (data.focusStats) {
            if (data.focusStats.completedSessions)
              localStorage.setItem("completed-focus-sessions", data.focusStats.completedSessions)
            if (data.focusStats.totalFocusTime) localStorage.setItem("total-focus-time", data.focusStats.totalFocusTime)
          }

alert("데이터를 성공적으로 가져왔습니다. 페이지를 새로고침하세요.")
        } catch (error) {
          console.error("데이터 가져오기 실패:", error)
          alert("데이터 가져오기에 실패했습니다. 파일 형식을 확인하세요.")
        }
      }
      reader.readAsText(file)
    }
    input.click()
  }

// 모든 데이터 초기화
  const resetAllData = () => {
    if (confirm("정말로 모든 데이터를 초기화하시겠습니까? 이 작업은 되돌릴 수 없습니다.")) {
      // 설정 유지를 위한 임시 저장
      const savedThemeMode = themeMode
      const savedThemeColor = themeColor

// 로컬 스토리지 초기화
      localStorage.clear()

// 설정 복원
      setThemeMode(savedThemeMode)
      setThemeColor(savedThemeColor)
      localStorage.setItem("theme-mode", savedThemeMode)
      localStorage.setItem("theme-color", savedThemeColor)

alert("모든 데이터가 초기화되었습니다.")
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
      <div className="fixed inset-0 bg-background/80 backdrop-blur-sm" onClick={onClose} />
      <div className="fixed inset-x-0 bottom-0 z-50 mt-12 rounded-t-xl bg-card p-6 shadow-lg sm:relative sm:bottom-auto sm:max-w-lg sm:rounded-xl">
        <div className="mb-5 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Settings className="h-5 w-5 text-primary" />
            <h2 className="text-xl font-semibold text-primary">설정</h2>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose} className="rounded-full hover:bg-muted">
            <X className="h-5 w-5" />
          </Button>
        </div>

<TabsContent value="appearance" className="space-y-4">
            <div>
              <h3 className="mb-3 text-sm font-medium text-muted-foreground">테마 모드</h3>
              <div className="grid grid-cols-3 gap-2">
                <Button
                  variant={themeMode === "light" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeMode === "light" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeMode("light")
                    localStorage.setItem("theme-mode", "light")
                  }}
                >
                  <Sun className="h-5 w-5" />
                  <span className="text-xs">라이트</span>
                </Button>
                <Button
                  variant={themeMode === "dark" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeMode === "dark" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeMode("dark")
                    localStorage.setItem("theme-mode", "dark")
                  }}
                >
                  <Moon className="h-5 w-5" />
                  <span className="text-xs">다크</span>
                </Button>
                <Button
                  variant={themeMode === "black" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeMode === "black" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeMode("black")
                    localStorage.setItem("theme-mode", "black")
                  }}
                >
                  <Moon className="h-5 w-5 fill-current" />
                  <span className="text-xs">트루 블랙</span>
                </Button>
              </div>
            </div>

<div>
              <h3 className="mb-3 text-sm font-medium text-muted-foreground">테마 색상</h3>
              <div className="grid grid-cols-4 gap-2">
                <Button
                  variant={themeColor === "blue" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeColor === "blue" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeColor("blue")
                    localStorage.setItem("theme-color", "blue")
                  }}
                >
                  <div className="h-5 w-5 rounded-full bg-blue-500" />
                  <span className="text-xs">블루</span>
                </Button>
                <Button
                  variant={themeColor === "purple" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeColor === "purple" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeColor("purple")
                    localStorage.setItem("theme-color", "purple")
                  }}
                >
                  <div className="h-5 w-5 rounded-full bg-purple-500" />
                  <span className="text-xs">퍼플</span>
                </Button>
                <Button
                  variant={themeColor === "green" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeColor === "green" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeColor("green")
                    localStorage.setItem("theme-color", "green")
                  }}
                >
                  <div className="h-5 w-5 rounded-full bg-green-500" />
                  <span className="text-xs">그린</span>
                </Button>
                <Button
                  variant={themeColor === "amber" ? "default" : "outline"}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 py-4",
                    themeColor === "amber" ? "border-primary" : "",
                  )}
                  onClick={() => {
                    setThemeColor("amber")
                    localStorage.setItem("theme-color", "amber")
                  }}
                >
                  <div className="h-5 w-5 rounded-full bg-amber-500" />
                  <span className="text-xs">앰버</span>
                </Button>
              </div>
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="sound-volume">볼륨</Label>
                <span className="text-xs text-muted-foreground">{soundVolume}%</span>
              </div>
              <div className="flex items-center gap-2">
                <VolumeX className="h-4 w-4 text-muted-foreground" />
                <Slider
                  id="sound-volume"
                  value={[soundVolume]}
                  min={0}
                  max={100}
                  step={1}
                  onValueChange={(value) => setSoundVolume(value[0])}
                  disabled={!isSoundOn}
                  className="flex-1"
                />
                <Volume2 className="h-4 w-4 text-muted-foreground" />
              </div>
            </div>

<TabsContent value="data" className="space-y-4">
            <div className="rounded-lg bg-muted/50 p-4">
              <div className="mb-2 flex items-center gap-2">
                <Info className="h-4 w-4 text-muted-foreground" />
                <h3 className="text-sm font-medium">데이터 관리</h3>
              </div>
              <p className="text-xs text-muted-foreground">
                앱 데이터를 내보내거나 가져올 수 있습니다. 데이터 초기화는 모든 설정과 진행 상황을 삭제합니다.
              </p>
            </div>

<Button variant="destructive" onClick={resetAllData} className="w-full">
              <Trash2 className="mr-2 h-4 w-4" />
              모든 데이터 초기화
            </Button>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

[V0_FILE]plaintext:file="public/sounds/bell.mp3" url="https://v0.blob.com/sound-effects/bell.mp3" isMerged="true" isEdit="true"

[V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" isEdit="true"
// 활동 통계 타입
export interface ActivityStat {
  count: number
  totalTime: number
  lastUsed: string | null
}

export interface ActivityStats {
  [key: string]: ActivityStat
}

// 사용자 통계 타입
export interface UserStats {
  totalTimeSpent: number
  streakDays: number
  lastUsedDate: string | null
  topActivity: string | null
  completedActivities: {
    [key: string]: number
  }
}

// 기분 데이터 타입
export interface MoodEntry {
  date: string
  value: number
  note?: string
}

export type MoodTrend = "up" | "down" | "stable"

[V0_FILE]typescriptreact:file="hooks/use-local-storage.ts" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect } from "react"

export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {
  // 상태 초기화
  const [storedValue, setStoredValue] = useState<T>(initialValue)

// localStorage에서 값 불러오기
  useEffect(() => {
    // localStorage는 클라이언트에서만 사용 가능
    if (typeof window === "undefined") {
      return
    }

try {
      const item = window.localStorage.getItem(key)
      const value = item ? JSON.parse(item) : initialValue
      setStoredValue(value)
    } catch (error) {
      console.error("Error reading from localStorage:", error)
      setStoredValue(initialValue)
    }
  }, [key, initialValue])

// setValue 함수 정의
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      // 새 값이 함수인 경우 처리
      const valueToStore = value instanceof Function ? value(storedValue) : value

// 상태 업데이트
      setStoredValue(valueToStore)

// localStorage 업데이트 (클라이언트에서만)
      if (typeof window !== "undefined") {
        window.localStorage.setItem(key, JSON.stringify(valueToStore))
      }
    } catch (error) {
      console.error("Error writing to localStorage:", error)
    }
  }

return [storedValue, setValue]
}

[V0_FILE]typescriptreact:file="hooks/use-mood-data.ts" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect, useMemo } from "react"
import type { MoodEntry, MoodTrend } from "@/lib/types"

export function useMoodData() {
  // 기분 데이터 상태
  const [moodData, setMoodData] = useState<MoodEntry[]>([])

// localStorage에서 기분 데이터 로드
  useEffect(() => {
    const loadMoodData = () => {
      try {
        const storedMoodHistory = localStorage.getItem("mood-history")
        if (storedMoodHistory) {
          const moodHistory = JSON.parse(storedMoodHistory)

// 객체 형태의 기분 기록을 배열로 변환
          const entries: MoodEntry[] = Object.entries(moodHistory)
            .map(([date, value]) => ({
              date,
              value: value as number,
            }))
            .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())

// 최근 7일 데이터만 유지
          const recentEntries = entries.slice(-7)
          setMoodData(recentEntries)
        }
      } catch (error) {
        console.error("기분 데이터 로드 중 오류:", error)
        setMoodData([])
      }
    }

loadMoodData()

// 기분 데이터 변경 감지를 위한 이벤트 리스너
    window.addEventListener("storage", loadMoodData)

return () => {
      window.removeEventListener("storage", loadMoodData)
    }
  }, [])

// 평균 기분 점수 계산
  const moodAverage = useMemo(() => {
    if (moodData.length === 0) return 0
    return moodData.reduce((sum, entry) => sum + entry.value, 0) / moodData.length
  }, [moodData])

// 기분 추세 계산
  const moodTrend = useMemo<MoodTrend>(() => {
    if (moodData.length < 3) return "stable"

const recentMoods = moodData.slice(-3)
    const firstMood = recentMoods[0].value
    const lastMood = recentMoods[recentMoods.length - 1].value

if (lastMood > firstMood) return "up"
    if (lastMood < firstMood) return "down"
    return "stable"
  }, [moodData])

return { moodData, moodAverage, moodTrend }
}

[V0_FILE]typescriptreact:file="components/guided-imagery.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, ChevronLeft, ChevronRight, Volume2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface GuidedImageryProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

export default function GuidedImagery({ themeMode, themeColor, isSoundOn, onAchievement }: GuidedImageryProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentSceneIndex, setCurrentSceneIndex] = useState(0)
  const [progress, setProgress] = useState(0)
  const [volume, setVolume] = useState(70)
  const [totalTime, setTotalTime] = useState(0)
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const audioRef = useRef<HTMLAudioElement | null>(null)

const scenes = [
    {
      title: "해변 풍경",
      description: "따뜻한 모래사장과 부드러운 파도 소리에 집중하세요. 푸른 하늘과 맑은 바다를 상상해보세요.",
      audio: "/soundscapes/beach.mp3",
      duration: 120, // 초 단위
      backgroundGradient: "from-blue-50 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30",
      textColor: "text-blue-800 dark:text-blue-200",
    },
    {
      title: "평화로운 숲",
      description:
        "울창한 나무들과 부드러운 바람 소리를 느껴보세요. 숲 속의 작은 시냇물과 새들의 지저귐을 상상해보세요.",
      audio: "/soundscapes/forest.mp3",
      duration: 120,
      backgroundGradient: "from-green-50 to-green-200 dark:from-green-900/30 dark:to-green-800/30",
      textColor: "text-green-800 dark:text-green-200",
    },
    {
      title: "산 정상",
      description: "높은 산 정상에서 바라보는 광활한 풍경을 상상해보세요. 맑은 공기와 자유로움을 느껴보세요.",
      audio: "/soundscapes/mountain.mp3",
      duration: 120,
      backgroundGradient: "from-amber-50 to-amber-200 dark:from-amber-900/30 dark:to-amber-800/30",
      textColor: "text-amber-800 dark:text-amber-200",
    },
  ]

const currentScene = scenes[currentSceneIndex]

// 오디오 설정
  useEffect(() => {
    audioRef.current = new Audio()
    audioRef.current.loop = true

// 사용량 추적
    const savedImageryCount = localStorage.getItem("imagery-count")
    const imageryCount = savedImageryCount ? Number.parseInt(savedImageryCount) : 0

if (imageryCount >= 3) {
      onAchievement("imagery-3", "마음의 여행자")
    }

return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current = null
      }

if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [onAchievement])

// 볼륨 변경
  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = volume / 100
    }
  }, [volume])

// 장면 변경 시 오디오 소스 변경
  useEffect(() => {
    if (audioRef.current) {
      const wasPlaying = !audioRef.current.paused
      audioRef.current.pause()

setProgress(0)
      if (isSoundOn) {
        audioRef.current.src = currentScene.audio
        if (wasPlaying) {
          audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
        }
      }
    }
  }, [currentSceneIndex, currentScene.audio, isSoundOn])

// 타이머 관리
  useEffect(() => {
    if (isPlaying) {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }

// 오디오 재생
      if (audioRef.current && isSoundOn) {
        audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
      }

let elapsed = 0
      timerRef.current = setInterval(() => {
        elapsed += 1
        setProgress((elapsed / currentScene.duration) * 100)
        setTotalTime((prev) => prev + 1)

if (elapsed >= currentScene.duration) {
          // 자동으로 다음 장면으로 이동
          nextScene()
        }
      }, 1000)
    } else {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }

// 오디오 일시정지
      if (audioRef.current) {
        audioRef.current.pause()
      }
    }

return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [isPlaying, currentScene.duration, isSoundOn])

// 다음 장면
  const nextScene = () => {
    const nextIndex = (currentSceneIndex + 1) % scenes.length
    setCurrentSceneIndex(nextIndex)
    setProgress(0)

// 완료한 장면 수 증가
    const savedImageryCount = localStorage.getItem("imagery-count")
    const imageryCount = savedImageryCount ? Number.parseInt(savedImageryCount) : 0
    localStorage.setItem("imagery-count", (imageryCount + 1).toString())

// 업적 체크
    if (imageryCount + 1 >= 3) {
      onAchievement("imagery-3", "마음의 여행자")
    }
  }

// 이전 장면
  const prevScene = () => {
    const prevIndex = (currentSceneIndex - 1 + scenes.length) % scenes.length
    setCurrentSceneIndex(prevIndex)
    setProgress(0)
  }

// 시간 포맷
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs < 10 ? "0" : ""}${secs}`
  }

return (
    <div className="flex flex-col">
      <div className={cn("mb-6 rounded-xl p-6 bg-gradient-to-br", currentScene.backgroundGradient)}>
        <h3 className={cn("mb-2 text-xl font-semibold", currentScene.textColor)}>{currentScene.title}</h3>
        <p className="mb-4 text-muted-foreground">{currentScene.description}</p>

<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
          <span>{formatTime(Math.floor((progress / 100) * currentScene.duration))}</span>
          <Progress value={progress} className="mx-2 h-1 flex-1" />
          <span>{formatTime(currentScene.duration)}</span>
        </div>

<Button
            onClick={() => setIsPlaying(!isPlaying)}
            className="h-12 w-12 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
          >
            {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
          </Button>

<div className="rounded-lg bg-card p-4">
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Volume2 className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">배경 소리 볼륨</span>
          </div>
          <span className="text-xs text-muted-foreground">{volume}%</span>
        </div>
        <Slider
          value={[volume]}
          min={0}
          max={100}
          step={5}
          onValueChange={(value) => setVolume(value[0])}
          disabled={!isSoundOn}
        />
      </div>

<div className="mt-4 space-y-2">
        <h4 className="text-sm font-medium text-primary">가이드 이미지 활용법</h4>
        <ul className="ml-5 list-disc space-y-1 text-sm text-muted-foreground">
          <li>자세를 편안하게 하고 깊은 호흡을 합니다.</li>
          <li>서술되는 장면을 최대한 자세히 상상해 보세요.</li>
          <li>모든 감각(시각, 청각, 촉각, 후각)을 동원하여 상상하세요.</li>
          <li>긴장된 근육을 의식적으로 이완시키세요.</li>
        </ul>
      </div>

<p className="mt-4 text-center text-sm text-muted-foreground">총 이용 시간: {formatTime(totalTime)}</p>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/progressive-muscle-relaxation.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, RotateCcw, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface ProgressiveMuscleRelaxationProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

export default function ProgressiveMuscleRelaxation({
  themeMode,
  themeColor,
  isSoundOn,
  onAchievement,
}: ProgressiveMuscleRelaxationProps) {
  const [isActive, setIsActive] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [timeLeft, setTimeLeft] = useState(0)
  const [completed, setCompleted] = useState<number[]>([])
  const [sessionCount, setSessionCount] = useState(0)
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const audioRef = useRef<HTMLAudioElement | null>(null)

const steps = [
    {
      part: "손과 팔",
      instruction:
        "먼저 양손을 주먹 쥐고 팔의 근육에 힘을 주세요. 5초간 유지한 후 천천히 힘을 빼고 이완됨을 느껴보세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "어깨와 목",
      instruction: "어깨를 귀 쪽으로 들어올리고 목에 힘을 주세요. 5초간 유지한 후 천천히 이완하세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "얼굴",
      instruction:
        "얼굴 근육에 힘을 주세요. 눈을 꽉 감고, 입술을 다물고, 이마에 주름을 만드세요. 5초간 유지한 후 이완하세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "가슴과 복부",
      instruction:
        "깊게 숨을 들이마시고 가슴과 복부 근육을 긴장시키세요. 5초간 유지한 후 천천히 숨을 내쉬며 이완하세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "엉덩이와 허벅지",
      instruction: "엉덩이와 허벅지 근육에 힘을 주세요. 5초간 유지한 후 천천히 이완하세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "종아리와 발",
      instruction: "발가락을 위로 구부리고 종아리 근육에 힘을 주세요. 5초간 유지한 후 천천히 이완하세요.",
      duration: 15,
      tenseDuration: 5,
      relaxDuration: 10,
    },
    {
      part: "전신 이완",
      instruction:
        "이제 모든 근육이 이완된 것을 느껴보세요. 전신을 스캔하면서 여전히 긴장된 부분이 있는지 확인하고 의식적으로 이완시키세요.",
      duration: 30,
      tenseDuration: 0,
      relaxDuration: 30,
    },
  ]

// 초기화
  useEffect(() => {
    audioRef.current = new Audio("/sounds/bell.mp3")

// 이전 세션 수 로드
    const savedSessionCount = localStorage.getItem("muscle-relaxation-count")
    if (savedSessionCount) {
      setSessionCount(Number.parseInt(savedSessionCount))
    }

return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [])

// 완료 세션 수 확인 및 업적 달성
  useEffect(() => {
    if (sessionCount >= 3) {
      onAchievement("relaxation-3", "근육 이완 마스터")
    }
  }, [sessionCount, onAchievement])

// 타이머 시작
  const startExercise = () => {
    setIsActive(true)
    setTimeLeft(steps[currentStep].duration)

// 사운드 체크
    if (isSoundOn && audioRef.current) {
      audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
    }

// 타이머 설정
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }

timerRef.current = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          // 현재 단계 완료
          setCompleted((prev) => [...prev, currentStep])

// 다음 단계로 이동
          const nextStep = currentStep + 1

if (nextStep >= steps.length) {
            // 모든 단계 완료
            clearInterval(timerRef.current!)
            setIsActive(false)

// 세션 완료 카운트 증가
            const newCount = sessionCount + 1
            setSessionCount(newCount)
            localStorage.setItem("muscle-relaxation-count", newCount.toString())

// 업적 체크
            if (newCount >= 3) {
              onAchievement("relaxation-3", "근육 이완 마스터")
            }

return 0
          }

// 다음 단계 시작
          setCurrentStep(nextStep)

// 사운드 체크
          if (isSoundOn && audioRef.current) {
            audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
          }

return steps[nextStep].duration
        }
        return prev - 1
      })
    }, 1000)
  }

// 일시정지
  const pauseExercise = () => {
    setIsActive(false)
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }
  }

// 리셋
  const resetExercise = () => {
    setIsActive(false)
    setCurrentStep(0)
    setTimeLeft(steps[0].duration)
    setCompleted([])

if (timerRef.current) {
      clearInterval(timerRef.current)
    }
  }

// 현재 단계가 긴장 또는 이완 상태인지 확인
  const getCurrentPhase = () => {
    const step = steps[currentStep]
    if (step.tenseDuration === 0) return "relax"

const elapsed = step.duration - timeLeft
    if (elapsed < step.tenseDuration) return "tense"
    return "relax"
  }

// 진행률 계산
  const calculateProgress = () => {
    const totalDuration = steps.reduce((total, step) => total + step.duration, 0)
    const completedDuration = completed.reduce((total, stepIndex) => total + steps[stepIndex].duration, 0)
    const currentProgress = steps[currentStep].duration - timeLeft

return ((completedDuration + currentProgress) / totalDuration) * 100
  }

return (
    <div className="flex flex-col">
      <div className="mb-6 rounded-xl bg-card p-6 shadow-md">
        <h3 className="mb-4 text-center text-lg font-medium text-primary">근육 이완 운동</h3>

<div className="mb-4">
          <div className="flex justify-between text-sm">
            <span>진행률</span>
            <span>{Math.round(calculateProgress())}%</span>
          </div>
          <Progress value={calculateProgress()} className="mt-2" />
        </div>

<div
          className={cn(
            "flex items-center justify-center mb-6 p-6 rounded-xl bg-muted/30",
            getCurrentPhase() === "tense" ? "bg-amber-100 dark:bg-amber-900/20" : "bg-green-100 dark:bg-green-900/20",
          )}
        >
          <div className="text-center">
            <h4 className="mb-2 text-lg font-medium">{steps[currentStep].part}</h4>
            <p className="text-sm text-muted-foreground">{steps[currentStep].instruction}</p>
            <div className="mt-4 text-2xl font-bold text-primary">{timeLeft}</div>
            <div className="mt-1 text-xs text-muted-foreground">
              {getCurrentPhase() === "tense" ? "힘주기" : "이완하기"}
            </div>
          </div>
        </div>

<div className="flex justify-center gap-3">
          {!isActive ? (
            <Button onClick={startExercise}>
              <Play className="mr-2 h-4 w-4" />
              {currentStep === 0 && completed.length === 0 ? "시작하기" : "계속하기"}
            </Button>
          ) : (
            <Button variant="outline" onClick={pauseExercise}>
              <Pause className="mr-2 h-4 w-4" />
              일시정지
            </Button>
          )}

<div className="rounded-xl bg-card p-4 space-y-3">
        <h4 className="text-sm font-medium text-primary">진행 단계</h4>
        <div className="space-y-2">
          {steps.map((step, index) => (
            <div
              key={index}
              className={cn(
                "flex items-center rounded-lg p-2",
                currentStep === index ? "bg-primary/20" : completed.includes(index) ? "bg-muted/30" : "",
              )}
            >
              <div
                className={cn(
                  "flex h-6 w-6 items-center justify-center rounded-full mr-2 text-xs",
                  currentStep === index
                    ? "bg-primary text-primary-foreground"
                    : completed.includes(index)
                      ? "bg-green-500 text-white"
                      : "bg-muted text-muted-foreground",
                )}
              >
                {completed.includes(index) ? <Check className="h-3 w-3" /> : index + 1}
              </div>
              <span
                className={cn(
                  "text-sm",
                  currentStep === index
                    ? "font-medium text-primary"
                    : completed.includes(index)
                      ? "text-muted-foreground line-through"
                      : "text-muted-foreground",
                )}
              >
                {step.part}
              </span>
            </div>
          ))}
        </div>
      </div>

<div className="mt-4 text-center text-sm text-muted-foreground">완료한 세션: {sessionCount}</div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/asmr-experience.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, Volume2, VolumeX, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

interface AsmrExperienceProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

type AsmrSound = {
  id: string
  name: string
  icon: React.ReactNode
  description: string
  audioSrc: string
  color: "blue" | "green" | "amber" | "purple" | "rose" | "indigo"
  type: "nature" | "object" | "ambient"
}

export default function AsmrExperience({ themeMode, themeColor, isSoundOn, onAchievement }: AsmrExperienceProps) {
  const [activeSounds, setActiveSounds] = useState<string[]>([])
  const [volume, setVolume] = useState(50)
  const [filter, setFilter] = useState<string | null>(null)
  const [playedSounds, setPlayedSounds] = useState<string[]>([])
  const [totalPlayTime, setTotalPlayTime] = useState(0)
  const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({})
  const timerRef = useRef<NodeJS.Timeout | null>(null)

// ASMR 사운드 목록
  const asmrSounds: AsmrSound[] = [
    {
      id: "rain",
      name: "빗소리",
      icon: "🌧️",
      description: "부드러운 빗소리가 창문에 부딪히는 소리",
      audioSrc: "/asmr/rain.mp3",
      color: "blue",
      type: "nature",
    },
    {
      id: "fire",
      name: "모닥불",
      icon: "🔥",
      description: "따뜻한 모닥불이 타닥거리는 소리",
      audioSrc: "/asmr/fire.mp3",
      color: "amber",
      type: "nature",
    },
    {
      id: "typing",
      name: "타이핑",
      icon: "⌨️",
      description: "기계식 키보드로 타이핑하는 소리",
      audioSrc: "/asmr/typing.mp3",
      color: "indigo",
      type: "object",
    },
    {
      id: "waves",
      name: "파도",
      icon: "🌊",
      description: "해변에서 들리는 부드러운 파도 소리",
      audioSrc: "/asmr/waves.mp3",
      color: "blue",
      type: "nature",
    },
    {
      id: "pages",
      name: "책장 넘기기",
      icon: "📚",
      description: "종이책의 페이지를 넘기는 소리",
      audioSrc: "/asmr/pages.mp3",
      color: "amber",
      type: "object",
    },
    {
      id: "night",
      name: "밤의 숲",
      icon: "🌙",
      description: "밤의 숲에서 들리는 풀벌레 소리",
      audioSrc: "/asmr/night.mp3",
      color: "indigo",
      type: "nature",
    },
    {
      id: "cafe",
      name: "카페",
      icon: "☕",
      description: "카페의 잔잔한 배경 소리와 대화",
      audioSrc: "/asmr/cafe.mp3",
      color: "amber",
      type: "ambient",
    },
    {
      id: "whitenoise",
      name: "화이트 노이즈",
      icon: "⚪",
      description: "일정한 백색 소음으로 집중력 향상",
      audioSrc: "/asmr/whitenoise.mp3",
      color: "purple",
      type: "ambient",
    },
    {
      id: "tapping",
      name: "두드리기",
      icon: "👆",
      description: "다양한 물체를 두드리는 소리",
      audioSrc: "/asmr/tapping.mp3",
      color: "rose",
      type: "object",
    },
  ]

// 사운드 타입 필터링
  const filteredSounds = filter ? asmrSounds.filter((sound) => sound.type === filter) : asmrSounds

// 오디오 초기화
  useEffect(() => {
    // 로컬 스토리지에서 재생한 사운드 목록 불러오기
    const savedPlayedSounds = localStorage.getItem("asmr-played-sounds")
    if (savedPlayedSounds) {
      setPlayedSounds(JSON.parse(savedPlayedSounds))
    }

// 재생 시간 불러오기
    const savedTotalPlayTime = localStorage.getItem("asmr-play-time")
    if (savedTotalPlayTime) {
      setTotalPlayTime(Number.parseInt(savedTotalPlayTime))
    }

// 활성 사운드 추적 타이머
    if (activeSounds.length > 0) {
      timerRef.current = setInterval(() => {
        setTotalPlayTime((prev) => {
          const newTime = prev + 1
          localStorage.setItem("asmr-play-time", newTime.toString())

// 10분(600초) 이상 들었을 때 업적 달성
          if (newTime >= 600 && prev < 600) {
            onAchievement("asmr-10min", "ASMR 애호가")
          }

return newTime
        })
      }, 1000)
    }

return () => {
      // 오디오 정리
      Object.values(audioRefs.current).forEach((audio) => {
        audio.pause()
        audio.src = ""
      })

// 타이머 정리
      if (timerRef.current) {
        clearInterval(timerRef.current)
      }
    }
  }, [activeSounds.length, onAchievement])

// 볼륨 변경 시 모든 오디오에 적용
  useEffect(() => {
    Object.values(audioRefs.current).forEach((audio) => {
      audio.volume = volume / 100
    })
  }, [volume])

// 사운드 토글
  const toggleSound = (soundId: string) => {
    if (!isSoundOn) return

// 이미 재생 중인 사운드인지 확인
    if (activeSounds.includes(soundId)) {
      // 중지
      if (audioRefs.current[soundId]) {
        audioRefs.current[soundId].pause()
      }
      setActiveSounds((prev) => prev.filter((id) => id !== soundId))

// 타이머 중지
      if (activeSounds.length === 1 && timerRef.current) {
        clearInterval(timerRef.current)
      }
    } else {
      // 재생
      const sound = asmrSounds.find((s) => s.id === soundId)
      if (!sound) return

// 오디오 객체 생성
      if (!audioRefs.current[soundId]) {
        audioRefs.current[soundId] = new Audio(sound.audioSrc)
        audioRefs.current[soundId].loop = true
        audioRefs.current[soundId].volume = volume / 100
      }

// 오디오 재생
      audioRefs.current[soundId].play().catch((e) => console.error("오디오 재생 실패:", e))

// 활성 사운드 추가
      setActiveSounds((prev) => [...prev, soundId])

// 타이머 시작
      if (activeSounds.length === 0 && !timerRef.current) {
        timerRef.current = setInterval(() => {
          setTotalPlayTime((prev) => {
            const newTime = prev + 1
            localStorage.setItem("asmr-play-time", newTime.toString())

// 10분(600초) 이상 들었을 때 업적 달성
            if (newTime >= 600 && prev < 600) {
              onAchievement("asmr-10min", "ASMR 애호가")
            }

return newTime
          })
        }, 1000)
      }

// 재생 기록 추가
      if (!playedSounds.includes(soundId)) {
        const newPlayedSounds = [...playedSounds, soundId]
        setPlayedSounds(newPlayedSounds)
        localStorage.setItem("asmr-played-sounds", JSON.stringify(newPlayedSounds))

// 모든 사운드 들었을 때 업적 달성
        if (newPlayedSounds.length === asmrSounds.length) {
          onAchievement("asmr-all", "ASMR 컬렉터")
        }
      }
    }
  }

// 모든 사운드 중지
  const stopAllSounds = () => {
    activeSounds.forEach((soundId) => {
      if (audioRefs.current[soundId]) {
        audioRefs.current[soundId].pause()
      }
    })
    setActiveSounds([])

// 타이머 중지
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
  }

// 시간 포맷
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs < 10 ? "0" : ""}${secs}`
  }

// 색상 클래스 매핑
  const colorClasses: Record<string, string> = {
    blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
    green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
    amber: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
    purple: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
    rose: "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300",
    indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
  }

return (
    <div className="flex flex-col">
      <div className="mb-4 flex items-center justify-between">
        <div>
          <h3 className="text-lg font-medium text-primary">ASMR 경험</h3>
          <p className="text-sm text-muted-foreground">원하는 소리를 조합하여 들어보세요</p>
        </div>

<div className="flex items-center gap-2">
          {activeSounds.length > 0 && (
            <Button variant="outline" size="sm" onClick={stopAllSounds} className="flex items-center gap-1">
              <X className="h-4 w-4" />
              모두 중지
            </Button>
          )}
        </div>
      </div>

{/* 필터 */}
      <div className="mb-4 flex flex-wrap gap-2">
        <Button
          variant={filter === null ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter(null)}
          className="rounded-full"
        >
          전체
        </Button>
        <Button
          variant={filter === "nature" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("nature")}
          className="rounded-full"
        >
          자연
        </Button>
        <Button
          variant={filter === "object" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("object")}
          className="rounded-full"
        >
          사물
        </Button>
        <Button
          variant={filter === "ambient" ? "default" : "outline"}
          size="sm"
          onClick={() => setFilter("ambient")}
          className="rounded-full"
        >
          환경
        </Button>
      </div>

{/* 사운드 그리드 */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
        {filteredSounds.map((sound) => (
          <button
            key={sound.id}
            onClick={() => toggleSound(sound.id)}
            className={cn(
              "relative flex flex-col items-center justify-center rounded-xl p-4 transition-all duration-200",
              activeSounds.includes(sound.id) ? `${colorClasses[sound.color]} shadow-md` : "bg-card hover:bg-card/80",
              "active:scale-95",
            )}
            disabled={!isSoundOn}
          >
            {playedSounds.includes(sound.id) && !activeSounds.includes(sound.id) && (
              <div className="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
            )}
            <div className="mb-2 text-2xl">{sound.icon}</div>
            <div className="text-sm font-medium">{sound.name}</div>
            <div className="mt-1 text-xs text-muted-foreground line-clamp-1">{sound.description}</div>
            <div className="mt-2">
              {activeSounds.includes(sound.id) ? (
                <Badge variant="secondary">
                  <Pause className="mr-1 h-3 w-3" />
                  재생 중
                </Badge>
              ) : (
                <Badge variant="outline">
                  <Play className="mr-1 h-3 w-3" />
                  재생
                </Badge>
              )}
            </div>
          </button>
        ))}
      </div>

{/* 볼륨 컨트롤 */}
      <div className="mt-6 rounded-lg bg-muted/30 p-4">
        <div className="mb-2 flex items-center justify-between">
          <div className="flex items-center gap-2">
            {isSoundOn ? (
              <Volume2 className="h-4 w-4 text-muted-foreground" />
            ) : (
              <VolumeX className="h-4 w-4 text-muted-foreground" />
            )}
            <span className="text-sm text-muted-foreground">볼륨</span>
          </div>
          <span className="text-xs text-muted-foreground">{volume}%</span>
        </div>
        <Slider
          value={[volume]}
          min={0}
          max={100}
          step={5}
          onValueChange={(value) => setVolume(value[0])}
          disabled={!isSoundOn}
        />
      </div>

{/* 통계 */}
      <div className="mt-4 flex justify-between text-sm text-muted-foreground">
        <div>들은 시간: {formatTime(totalPlayTime)}</div>
        <div>
          발견한 소리: {playedSounds.length}/{asmrSounds.length}
        </div>
      </div>

{/* 팁 */}
      <div className="mt-6 space-y-2 rounded-lg border border-muted p-4">
        <h4 className="text-sm font-medium text-primary">ASMR 효과</h4>
        <ul className="ml-5 list-disc space-y-1 text-xs text-muted-foreground">
          <li>부드러운 소리가 대뇌에 긍정적인 반응을 유발하여 스트레스 감소</li>
          <li>틴글(Tingles) 현상으로 불리는 두피와 목덜미의 편안한 감각 제공</li>
          <li>수면 유도 및 불면증 개선에 도움</li>
          <li>집중력 향상을 위한 백색소음 효과</li>
        </ul>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/mindfulness-exercise.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, ChevronLeft, ChevronRight, Timer } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface MindfulnessExerciseProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

export default function MindfulnessExercise({
  themeMode,
  themeColor,
  isSoundOn,
  onAchievement,
}: MindfulnessExerciseProps) {
  const [isActive, setIsActive] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [timeLeft, setTimeLeft] = useState(0)
  const [totalPracticeTime, setTotalPracticeTime] = useState(0)
  const [practiceCount, setPracticeCount] = useState(0)
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const audioRef = useRef<HTMLAudioElement | null>(null)

// 마음챙김 단계
  const mindfulnessSteps = [
    {
      title: "준비",
      instruction: "편안한 자세로 앉아서 눈을 감고 3번의 깊은 호흡을 해보세요.",
      duration: 20,
      background: "from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20",
    },
    {
      title: "호흡 인식",
      instruction:
        "들숨과 날숨에 집중하세요. 공기가 들어오고 나가는 느낌을 관찰하세요. 생각이 들면 부드럽게 호흡으로 돌아오세요.",
      duration: 60,
      background: "from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20",
    },
    {
      title: "신체 감각",
      instruction: "신체의 감각에 주의를 기울이세요. 손의 촉감, 발의 감각, 자세의 느낌을 알아차리세요.",
      duration: 60,
      background: "from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20",
    },
    {
      title: "소리 듣기",
      instruction: "주변의 소리에 집중하세요. 소리를 판단하지 말고 그저 있는 그대로 관찰하세요.",
      duration: 60,
      background: "from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20",
    },
    {
      title: "생각 관찰",
      instruction: "마음에 떠오르는 생각을 관찰하세요. 생각에 빠져들지 말고 구름이 지나가듯 관찰만 하세요.",
      duration: 60,
      background: "from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20",
    },
    {
      title: "마무리",
      instruction: "천천히 눈을 뜨고 주변을 인식하세요. 현재 순간에 머무르는 느낌을 유지하세요.",
      duration: 20,
      background: "from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20",
    },
  ]

const currentStepData = mindfulnessSteps[currentStep]

// 초기화
  useEffect(() => {
    audioRef.current = new Audio("/sounds/bell.mp3")

// 로컬 스토리지에서 데이터 불러오기
    const savedPracticeTime = localStorage.getItem("mindfulness-time")
    const savedPracticeCount = localStorage.getItem("mindfulness-count")

if (savedPracticeTime) {
      setTotalPracticeTime(Number.parseInt(savedPracticeTime))
    }

if (savedPracticeCount) {
      setPracticeCount(Number.parseInt(savedPracticeCount))
    }

// 업적 체크
    if (practiceCount >= 5) {
      onAchievement("mindfulness-5", "마음챙김 전문가")
    }

return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [practiceCount, onAchievement])

// 타이머 시작
  const startPractice = () => {
    setIsActive(true)
    setTimeLeft(mindfulnessSteps[currentStep].duration)

// 시작 소리
    if (isSoundOn && audioRef.current) {
      audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
    }

// 타이머 설정
    if (timerRef.current) {
      clearTimeout(timerRef.current)
    }

timerRef.current = setTimeout(() => {
      // 현재 단계 종료 소리
      if (isSoundOn && audioRef.current) {
        audioRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
      }

// 다음 단계로 이동
      if (currentStep < mindfulnessSteps.length - 1) {
        setCurrentStep(currentStep + 1)
        setTimeLeft(mindfulnessSteps[currentStep + 1].duration)
      } else {
        // 모든 단계 완료
        setIsActive(false)

// 연습 완료 카운트 증가
        const newCount = practiceCount + 1
        setPracticeCount(newCount)
        localStorage.setItem("mindfulness-count", newCount.toString())

// 업적 체크
        if (newCount >= 5) {
          onAchievement("mindfulness-5", "마음챙김 전문가")
        }
      }
    }, mindfulnessSteps[currentStep].duration * 1000)

// 시간 추적을 위한 인터벌
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }

intervalRef.current = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) return prev
        return prev - 1
      })

setTotalPracticeTime((prev) => {
        const newTime = prev + 1
        localStorage.setItem("mindfulness-time", newTime.toString())
        return newTime
      })
    }, 1000)
  }

// 일시정지
  const pausePractice = () => {
    setIsActive(false)

if (timerRef.current) {
      clearTimeout(timerRef.current)
    }

if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }
  }

// 이전 단계
  const prevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
      setTimeLeft(mindfulnessSteps[currentStep - 1].duration)
      setIsActive(false)

if (timerRef.current) {
        clearTimeout(timerRef.current)
      }

if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }

// 다음 단계
  const nextStep = () => {
    if (currentStep < mindfulnessSteps.length - 1) {
      setCurrentStep(currentStep + 1)
      setTimeLeft(mindfulnessSteps[currentStep + 1].duration)
      setIsActive(false)

if (timerRef.current) {
        clearTimeout(timerRef.current)
      }

if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }

// 진행률 계산
  const calculateProgress = () => {
    const totalDuration = mindfulnessSteps.reduce((total, step) => total + step.duration, 0)
    const elapsedDuration = mindfulnessSteps.slice(0, currentStep).reduce((total, step) => total + step.duration, 0)
    const currentElapsed = mindfulnessSteps[currentStep].duration - timeLeft

return ((elapsedDuration + currentElapsed) / totalDuration) * 100
  }

// 시간 포맷
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs < 10 ? "0" : ""}${secs}`
  }

return (
    <div className="flex flex-col">
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-lg font-medium text-primary">마음챙김 연습</h3>
        <div className="flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">
          <Timer className="mr-1 h-3 w-3" />
          {formatTime(totalPracticeTime)}
        </div>
      </div>

<div className={cn("mb-6 rounded-xl bg-gradient-to-br p-6", currentStepData.background)}>
        <div className="mb-4 flex justify-between">
          <h3 className="text-xl font-semibold text-primary">{currentStepData.title}</h3>
          <div className="text-sm text-muted-foreground">
            {currentStep + 1} / {mindfulnessSteps.length}
          </div>
        </div>

<p className="mb-6 text-muted-foreground">{currentStepData.instruction}</p>

<div className="mb-6 flex items-center justify-between text-xs text-muted-foreground">
          <span>{formatTime(timeLeft)}</span>
          <Progress
            value={isActive ? ((currentStepData.duration - timeLeft) / currentStepData.duration) * 100 : 0}
            className="mx-2 h-1 flex-1"
          />
          <span>{formatTime(currentStepData.duration)}</span>
        </div>

{!isActive ? (
            <Button className="px-6" onClick={startPractice}>
              <Play className="mr-2 h-4 w-4" />
              {currentStep === 0 ? "시작하기" : "계속하기"}
            </Button>
          ) : (
            <Button variant="outline" className="px-6" onClick={pausePractice}>
              <Pause className="mr-2 h-4 w-4" />
              일시정지
            </Button>
          )}

<div className="rounded-lg bg-card p-4">
        <h4 className="mb-2 text-sm font-medium text-primary">전체 진행 상황</h4>
        <div className="mb-2 flex justify-between text-xs text-muted-foreground">
          <span>0%</span>
          <span>진행률: {Math.round(calculateProgress())}%</span>
          <span>100%</span>
        </div>
        <Progress value={calculateProgress()} className="h-2" />
      </div>

<div className="mt-4 space-y-2">
        <h4 className="text-sm font-medium text-primary">마음챙김 연습의 효과</h4>
        <ul className="ml-5 list-disc space-y-1 text-sm text-muted-foreground">
          <li>스트레스와 불안감 감소</li>
          <li>집중력과 주의력 향상</li>
          <li>감정 조절 능력 개선</li>
          <li>신체-정신 연결성 증진</li>
          <li>자기 인식 및 수용 능력 향상</li>
        </ul>
      </div>

<div className="mt-4 text-center text-sm text-muted-foreground">완료한 연습: {practiceCount}회</div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/grounding-technique.tsx" isMerged="true" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Play, Pause, RotateCcw, Eye, Hand, Ear, SnailIcon as Nose, Clock } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface GroundingTechniqueProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  onAchievement: (id: string, name: string) => void
}

export default function GroundingTechnique({ themeMode, themeColor, onAchievement }: GroundingTechniqueProps) {
  const [isActive, setIsActive] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [timeLeft, setTimeLeft] = useState(0)
  const [sessionCount, setSessionCount] = useState(0)
  const timerRef = useRef<NodeJS.Timeout | null>(null)

// 그라운딩 단계 정의
  const groundingSteps = [
    {
      count: 5,
      sense: "sight",
      instruction: "주변에서 볼 수 있는 5가지를 찾아보세요.",
      icon: <Eye className="h-5 w-5" />,
      color: "blue",
      duration: 25,
    },
    {
      count: 4,
      sense: "touch",
      instruction: "만질 수 있는 4가지를 찾아 느껴보세요.",
      icon: <Hand className="h-5 w-5" />,
      color: "amber",
      duration: 20,
    },
    {
      count: 3,
      sense: "hearing",
      instruction: "들을 수 있는 3가지 소리에 집중해보세요.",
      icon: <Ear className="h-5 w-5" />,
      color: "green",
      duration: 15,
    },
    {
      count: 2,
      sense: "smell",
      instruction: "맡을 수 있는 2가지 냄새를 찾아보세요.",
      icon: <Nose className="h-5 w-5" />,
      color: "purple",
      duration: 10,
    },
    {
      count: 1,
      sense: "taste",
      instruction: "맛볼 수 있는 1가지를 찾아보세요.",
      icon: <TasteIcon className="h-5 w-5" />,
      color: "rose",
      duration: 5,
    },
    {
      count: 0,
      sense: "complete",
      instruction: "이제 깊게 호흡하고 현재 순간을 느껴보세요.",
      icon: <Clock className="h-5 w-5" />,
      color: "gray",
      duration: 15,
    },
  ]

const currentStepData = groundingSteps[currentStep]

// 초기화
  useEffect(() => {
    // 로컬 스토리지에서 세션 카운트 불러오기
    const savedSessionCount = localStorage.getItem("grounding-count")
    if (savedSessionCount) {
      setSessionCount(Number.parseInt(savedSessionCount))
    }

return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
    }
  }, [])

// 업적 체크
  useEffect(() => {
    if (sessionCount >= 3) {
      onAchievement("grounding-3", "안정 전문가")
    }
  }, [sessionCount, onAchievement])

// 타이머 시작
  const startExercise = () => {
    setIsActive(true)
    setTimeLeft(groundingSteps[currentStep].duration)

if (timerRef.current) {
      clearTimeout(timerRef.current)
    }

timerRef.current = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          // 단계 완료
          if (currentStep < groundingSteps.length - 1) {
            // 다음 단계로
            setCurrentStep((prev) => prev + 1)
            return groundingSteps[currentStep + 1].duration
          } else {
            // 모든 단계 완료
            clearInterval(timerRef.current!)
            setIsActive(false)

// 세션 카운트 증가
            const newCount = sessionCount + 1
            setSessionCount(newCount)
            localStorage.setItem("grounding-count", newCount.toString())

// 업적 체크
            if (newCount >= 3) {
              onAchievement("grounding-3", "안정 전문가")
            }

return 0
          }
        }
        return prev - 1
      })
    }, 1000)
  }

// 일시정지
  const pauseExercise = () => {
    setIsActive(false)
    if (timerRef.current) {
      clearInterval(timerRef.current)
    }
  }

// 리셋
  const resetExercise = () => {
    setIsActive(false)
    setCurrentStep(0)
    setTimeLeft(groundingSteps[0].duration)

if (timerRef.current) {
      clearInterval(timerRef.current)
    }
  }

// 진행률 계산
  const calculateProgress = () => {
    const totalDuration = groundingSteps.reduce((total, step) => total + step.duration, 0)
    const elapsedDuration = groundingSteps.slice(0, currentStep).reduce((total, step) => total + step.duration, 0)
    const currentElapsed = groundingSteps[currentStep].duration - timeLeft

return ((elapsedDuration + currentElapsed) / totalDuration) * 100
  }

// 색상 매핑
  const colorClasses: Record<string, string> = {
    blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
    green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
    amber: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
    purple: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
    rose: "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300",
    gray: "bg-gray-100 text-gray-800 dark:bg-gray-800/30 dark:text-gray-300",
  }

return (
    <div className="flex flex-col">
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-lg font-medium text-primary">5-4-3-2-1 그라운딩 기법</h3>
        <div className="text-sm text-muted-foreground">완료한 세션: {sessionCount}</div>
      </div>

<div className={cn("mb-6 rounded-xl p-6", colorClasses[currentStepData.color])}>
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-background/70 backdrop-blur-sm">
              {currentStepData.icon}
            </div>
            <h3 className="text-xl font-semibold">
              {currentStepData.count > 0
                ? `${currentStepData.count}개의 ${getSenseLabel(currentStepData.sense)}`
                : "마무리"}
            </h3>
          </div>
          <div className="rounded-full bg-background/60 backdrop-blur-sm px-2 py-1 text-xs">
            {currentStep + 1} / {groundingSteps.length}
          </div>
        </div>

<p className="mb-6">{currentStepData.instruction}</p>

<div className="mb-4 flex justify-between text-xs">
          <span>{timeLeft}초</span>
          <span>남음</span>
        </div>

<div className="flex justify-center gap-3">
          {!isActive ? (
            <Button className="px-6" onClick={startExercise}>
              <Play className="mr-2 h-4 w-4" />
              {currentStep === 0 ? "시작하기" : "계속하기"}
            </Button>
          ) : (
            <Button variant="outline" className="px-6" onClick={pauseExercise}>
              <Pause className="mr-2 h-4 w-4" />
              일시정지
            </Button>
          )}

<div className="mt-4">
        <h4 className="mb-2 text-sm font-medium text-primary">그라운딩 기법이란?</h4>
        <p className="text-sm text-muted-foreground">
          그라운딩 기법은 불안, 스트레스, 패닉 발작 또는 PTSD 증상을 경험할 때 현재 순간에 집중하도록 도와주는
          방법입니다. 5가지 감각에 차례로 집중함으로써 과도한 생각이나 감정에서 벗어나 현실에 집중할 수 있습니다.
        </p>
      </div>

<div className="mt-4 space-y-2">
        <h4 className="text-sm font-medium text-primary">언제 사용하면 좋을까요?</h4>
        <ul className="ml-5 list-disc space-y-1 text-sm text-muted-foreground">
          <li>불안감이나 패닉 상태를 느낄 때</li>
          <li>스트레스가 심할 때</li>
          <li>과거 트라우마의 기억이 떠오를 때</li>
          <li>마음이 불안정하게 느껴질 때</li>
          <li>현재 순간에 집중하기 어려울 때</li>
        </ul>
      </div>
    </div>
  )
}

// 감각 라벨 변환 함수
function getSenseLabel(sense: string): string {
  switch (sense) {
    case "sight":
      return "볼 수 있는 것"
    case "touch":
      return "만질 수 있는 것"
    case "hearing":
      return "들을 수 있는 것"
    case "smell":
      return "냄새 맡을 수 있는 것"
    case "taste":
      return "맛볼 수 있는 것"
    default:
      return ""
  }
}

// 맛 아이콘 컴포넌트
function TasteIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M16.1 11.6L13.2 8.7C12.8 8.3 12.1 8.3 11.7 8.7L8.8 11.6M3 15C3 10.0294 7.02944 6 12 6C16.9706 6 21 10.0294 21 15C21 19.9706 16.9706 24 12 24C7.02944 24 3 19.9706 3 15Z" />
      <path d="M9 13C9 13 10 15 12 15C14 15 15 13 15 13" />
    </svg>
  )
}

[V0_FILE]typescriptreact:file="components/mobile-optimizations.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useEffect, useState, useRef } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"

// 모바일 스와이프 힌트 컴포넌트
export function SwipeHint({ className }: { className?: string }) {
  const [showHint, setShowHint] = useState(true)

useEffect(() => {
    // 사용자가 앱을 사용한 적이 있는지 확인
    const hasUsedApp = localStorage.getItem("has-used-app")
    if (hasUsedApp) {
      setShowHint(false)
      return
    }

// 5초 후 힌트 숨기기
    const timer = setTimeout(() => {
      setShowHint(false)
      localStorage.setItem("has-used-app", "true")
    }, 5000)

return () => clearTimeout(timer)
  }, [])

if (!showHint) return null

return (
    <div
      className={cn(
        "fixed bottom-20 left-1/2 -translate-x-1/2 flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary backdrop-blur-sm z-50",
        className,
      )}
    >
      <ChevronLeft className="h-4 w-4 swipe-hint" />
      <span className="text-xs font-medium">좌우로 스와이프하세요</span>
      <ChevronRight className="h-4 w-4 swipe-hint" />
    </div>
  )
}

// 모바일 터치 최적화 컴포넌트
export function TouchOptimizedButton({
  children,
  onClick,
  className,
  disabled = false,
}: {
  children: React.ReactNode
  onClick: () => void
  className?: string
  disabled?: boolean
}) {
  const buttonRef = useRef<HTMLButtonElement>(null)

const handleTouchStart = () => {
    if (disabled) return

// 터치 시작 시 시각적 피드백
    if (buttonRef.current) {
      buttonRef.current.classList.add("scale-95")
    }
  }

const handleTouchEnd = () => {
    if (disabled) return

// 터치 종료 시 시각적 피드백 제거
    if (buttonRef.current) {
      buttonRef.current.classList.remove("scale-95")
    }
  }

return (
    <button
      ref={buttonRef}
      onClick={onClick}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchEnd}
      disabled={disabled}
      className={cn(
        "transition-transform duration-150 active:scale-95 touch-manipulation no-select",
        disabled && "opacity-50 pointer-events-none",
        className,
      )}
    >
      {children}
    </button>
  )
}

// 모바일 풀다운 새로고침 컴포넌트
export function PullToRefresh({
  onRefresh,
  children,
}: {
  onRefresh: () => Promise<void>
  children: React.ReactNode
}) {
  const [isPulling, setIsPulling] = useState(false)
  const [refreshing, setRefreshing] = useState(false)
  const startY = useRef(0)
  const currentY = useRef(0)
  const containerRef = useRef<HTMLDivElement>(null)

const handleTouchStart = (e: React.TouchEvent) => {
    // 스크롤 위치가 맨 위인 경우에만 풀다운 허용
    if (window.scrollY === 0) {
      startY.current = e.touches[0].clientY
      setIsPulling(true)
    }
  }

const handleTouchMove = (e: React.TouchEvent) => {
    if (!isPulling) return

currentY.current = e.touches[0].clientY
    const pullDistance = currentY.current - startY.current

// 아래로 당기는 경우에만 처리
    if (pullDistance > 0 && pullDistance < 100) {
      if (containerRef.current) {
        containerRef.current.style.transform = `translateY(${pullDistance / 3}px)`
      }
    }
  }

const handleTouchEnd = async () => {
    if (!isPulling) return

const pullDistance = currentY.current - startY.current

// 충분히 당겼을 경우 새로고침 실행
    if (pullDistance > 70) {
      setRefreshing(true)
      if (containerRef.current) {
        containerRef.current.style.transform = "translateY(0)"
      }

try {
        await onRefresh()
      } finally {
        setRefreshing(false)
      }
    } else {
      // 충분히 당기지 않은 경우 원위치
      if (containerRef.current) {
        containerRef.current.style.transform = "translateY(0)"
      }
    }

setIsPulling(false)
  }

return (
    <div
      ref={containerRef}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      className="transition-transform duration-300"
    >
      {refreshing && (
        <div className="flex justify-center items-center h-16 text-primary">
          <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      )}
      {children}
    </div>
  )
}

// 모바일 바텀 시트 컴포넌트
export function BottomSheet({
  isOpen,
  onClose,
  children,
  className,
}: {
  isOpen: boolean
  onClose: () => void
  children: React.ReactNode
  className?: string
}) {
  const sheetRef = useRef<HTMLDivElement>(null)
  const startY = useRef(0)
  const currentY = useRef(0)

useEffect(() => {
    // 바텀 시트 열릴 때 스크롤 방지
    if (isOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }

return () => {
      document.body.style.overflow = ""
    }
  }, [isOpen])

const handleTouchStart = (e: React.TouchEvent) => {
    startY.current = e.touches[0].clientY
  }

const handleTouchMove = (e: React.TouchEvent) => {
    currentY.current = e.touches[0].clientY
    const dragDistance = currentY.current - startY.current

// 위로 스와이프는 무시, 아래로 스와이프만 처리
    if (dragDistance > 0 && sheetRef.current) {
      sheetRef.current.style.transform = `translateY(${dragDistance}px)`
      e.preventDefault()
    }
  }

const handleTouchEnd = () => {
    const dragDistance = currentY.current - startY.current

// 충분히 아래로 스와이프한 경우 닫기
    if (dragDistance > 100) {
      onClose()
    } else {
      // 원위치
      if (sheetRef.current) {
        sheetRef.current.style.transform = "translateY(0)"
      }
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm" onClick={onClose}>
      <div
        ref={sheetRef}
        className={cn(
          "fixed inset-x-0 bottom-0 z-50 rounded-t-xl bg-card p-6 shadow-lg transition-transform duration-300",
          className,
        )}
        onClick={(e) => e.stopPropagation()}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        {/* 드래그 핸들 */}
        <div className="absolute top-2 left-1/2 -translate-x-1/2 w-12 h-1.5 rounded-full bg-muted-foreground/20" />
        {children}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/activity-card.tsx" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { cn } from "@/lib/utils"

interface ActivityCardProps {
  title: string
  description: string
  onClick: () => void
  size: "small" | "medium" | "large"
  color: "primary" | "secondary" | "accent"
  themeMode: string
  icon: React.ReactNode
}

export default function ActivityCard({ title, description, onClick, size, color, themeMode, icon }: ActivityCardProps) {
  const [rippleStyle, setRippleStyle] = useState<React.CSSProperties>({})
  const [showRipple, setShowRipple] = useState(false)
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [isTouchDevice, setIsTouchDevice] = useState(false)

// 터치 디바이스 감지
  useEffect(() => {
    setIsTouchDevice("ontouchstart" in window)
  }, [])

// 벤토 그리드 레이아웃을 위한 크기 설정
  const sizeClasses = {
    small: "col-span-1 row-span-1",
    medium: "col-span-1 row-span-2",
    large: "col-span-2 row-span-2",
  }

// 색상 설정
  const colorClasses = {
    primary: "bg-primary/10 hover:bg-primary/20",
    secondary: "bg-secondary/10 hover:bg-secondary/20",
    accent: "bg-accent/10 hover:bg-accent/20",
  }

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // 햅틱 피드백
    if (window.navigator.vibrate) {
      window.navigator.vibrate(10)
    }

// 리플 효과 생성
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

setRippleStyle({
        left: `${x}px`,
        top: `${y}px`,
      })

setShowRipple(true)
      setTimeout(() => setShowRipple(false), 600)
    }

onClick()
  }

const handleTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
    // 터치 시작 시 시각적 피드백
    if (buttonRef.current) {
      buttonRef.current.classList.add("scale-95")

// 리플 효과 생성
      const rect = buttonRef.current.getBoundingClientRect()
      const x = e.touches[0].clientX - rect.left
      const y = e.touches[0].clientY - rect.top

setRippleStyle({
        left: `${x}px`,
        top: `${y}px`,
      })

setShowRipple(true)
    }
  }

const handleTouchEnd = () => {
    // 터치 종료 시 시각적 피드백 제거
    if (buttonRef.current) {
      buttonRef.current.classList.remove("scale-95")
      setTimeout(() => setShowRipple(false), 600)
    }
  }

return (
    <button
      ref={buttonRef}
      onClick={handleClick}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchEnd}
      className={cn(
        "group relative overflow-hidden rounded-xl p-4 text-left transition-all duration-200",
        sizeClasses[size],
        colorClasses[color],
        size === "large" ? "md:p-6" : "",
        "active:scale-95 transform touch-manipulation no-select",
        "hover:shadow-md focus:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/50",
      )}
    >
      {/* 터치 리플 효과 */}
      {showRipple && (
        <span
          className="absolute rounded-full bg-primary/20 animate-ripple"
          style={{
            ...rippleStyle,
            width: isTouchDevice ? "150px" : "100px",
            height: isTouchDevice ? "150px" : "100px",
            marginLeft: isTouchDevice ? "-75px" : "-50px",
            marginTop: isTouchDevice ? "-75px" : "-50px",
          }}
        />
      )}

<div className="mb-2 flex items-center gap-2">
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 text-primary transition-transform duration-200 group-hover:scale-110 group-active:scale-95">
          {icon}
        </div>
        <h2
          className={cn(
            "font-semibold text-primary transition-transform duration-200",
            size === "large" ? "text-xl" : "text-base",
          )}
        >
          {title}
        </h2>
      </div>
      <p className="text-sm text-muted-foreground">{description}</p>

<div className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary opacity-0 transition-all duration-200 group-hover:opacity-100 group-active:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 translate-x-2 translate-y-2">
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
            fill="currentColor"
            fillRule="evenodd"
            clipRule="evenodd"
          ></path>
        </svg>
      </div>
    </button>
  )
}

// 리플 애니메이션 키프레임 추가
const styleSheet = document.createElement("style")
styleSheet.textContent = `
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.animate-ripple {
  animation: ripple 0.6s linear;
  pointer-events: none;
}
`
document.head.appendChild(styleSheet)

[V0_FILE]typescriptreact:file="components/sand-garden.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Undo2, Redo, Save, Trash2, Hand, RotateCw, Share2, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { cn } from "@/lib/utils"

interface SandGardenProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

type Stone = {
  id: number
  x: number
  y: number
  size: number
  rotation: number
  type: number
}

export default function SandGarden({ themeMode, themeColor, isSoundOn, onAchievement }: SandGardenProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const [tool, setTool] = useState<Tool>("rake")
  const [stones, setStones] = useState<Stone[]>([])
  const [selectedStone, setSelectedStone] = useState<number | null>(null)
  const [stoneType, setStoneType] = useState(0)
  const [rakeWidth, setRakeWidth] = useState(10)
  const [rakePattern, setRakePattern] = useState<RakePattern>("straight")
  const [isDrawing, setIsDrawing] = useState(false)
  const [lastPoint, setLastPoint] = useState<{ x: number; y: number } | null>(null)
  const [history, setHistory] = useState<ImageData[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [redoStack, setRedoStack] = useState<ImageData[]>([])
  const [gardenCount, setGardenCount] = useState(0)
  const [touchEnabled, setTouchEnabled] = useState(false)
  const [showTutorial, setShowTutorial] = useState(false)
  const [showGrid, setShowGrid] = useState(false)
  const [autoSave, setAutoSave] = useState(true)
  const [lastAutoSave, setLastAutoSave] = useState(0)

// 스톤 이미지 로드
  const stoneImagesRef = useRef<HTMLImageElement[]>([])

useEffect(() => {
    // 터치 디바이스 감지
    setTouchEnabled("ontouchstart" in window)

// 스톤 이미지 로드
    const stoneTypes = 5
    stoneImagesRef.current = Array(stoneTypes)
      .fill(null)
      .map(() => new Image())

for (let i = 0; i < stoneTypes; i++) {
      stoneImagesRef.current[i].src = `/stones/stone-${i + 1}.png`
      stoneImagesRef.current[i].crossOrigin = "anonymous"
    }

// 로컬 스토리지에서 정원 카운트 불러오기
    const savedGardenCount = localStorage.getItem("sand-garden-count")
    if (savedGardenCount) {
      setGardenCount(Number.parseInt(savedGardenCount))
    }

// 설정 불러오기
    const savedShowGrid = localStorage.getItem("sand-garden-grid")
    if (savedShowGrid) {
      setShowGrid(savedShowGrid === "true")
    }

const savedAutoSave = localStorage.getItem("sand-garden-autosave")
    if (savedAutoSave) {
      setAutoSave(savedAutoSave === "true")
    }

// 자동 저장된 정원 불러오기
    const savedGarden = localStorage.getItem("sand-garden-autosaved")
    if (savedGarden && autoSave) {
      try {
        const data = JSON.parse(savedGarden)
        if (data.stones) {
          setStones(data.stones)
        }

// 이미지 데이터 복원
        if (data.imageData) {
          const canvas = canvasRef.current
          if (canvas) {
            const ctx = canvas.getContext("2d")
            if (ctx) {
              // 캔버스 크기 설정
              canvas.width = canvas.offsetWidth
              canvas.height = canvas.offsetHeight

// 이미지 데이터 복원
              const imageData = new ImageData(
                new Uint8ClampedArray(data.imageData.data),
                data.imageData.width,
                data.imageData.height,
              )
              ctx.putImageData(imageData, 0, 0)

// 히스토리 초기화
              setHistory([imageData])
              setHistoryIndex(0)
              return
            }
          }
        }
      } catch (e) {
        console.error("자동 저장된 정원 불러오기 실패:", e)
      }
    }

// 캔버스 초기화
    initCanvas()

// 업적 체크
    if (gardenCount >= 5) {
      onAchievement("garden-5", "정원사")
    }

// 튜토리얼 표시 여부
    const hasCompletedTutorial = localStorage.getItem("sand-garden-tutorial-completed")
    if (!hasCompletedTutorial) {
      setShowTutorial(true)
    }
  }, [gardenCount, onAchievement, autoSave])

// 자동 저장
  useEffect(() => {
    if (!autoSave) return

// 10초마다 자동 저장
    const now = Date.now()
    if (now - lastAutoSave > 10000) {
      saveGardenToLocalStorage()
      setLastAutoSave(now)
    }
  }, [stones, history, historyIndex, autoSave, lastAutoSave])

// 자동 저장 함수
  const saveGardenToLocalStorage = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

try {
      // 현재 이미지 데이터 가져오기
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

// 저장할 데이터 구성
      const data = {
        stones,
        imageData: {
          data: Array.from(imageData.data),
          width: imageData.width,
          height: imageData.height,
        },
        timestamp: Date.now(),
      }

// 로컬 스토리지에 저장
      localStorage.setItem("sand-garden-autosaved", JSON.stringify(data))
    } catch (e) {
      console.error("정원 자동 저장 실패:", e)
    }
  }

// 캔버스 초기화
  const initCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// 캔버스 크기 설정
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

// 배경 색상 설정
    const sandColor = themeMode === "dark" ? "#2c2c2c" : themeMode === "black" ? "#1a1a1a" : "#f0e6d2"
    ctx.fillStyle = sandColor
    ctx.fillRect(0, 0, canvas.width, canvas.height)

// 모래 텍스처 추가
    addSandTexture(ctx, canvas.width, canvas.height, sandColor)

// 그리드 그리기
    if (showGrid) {
      drawGrid(ctx, canvas.width, canvas.height)
    }

// 히스토리 초기화
    const initialState = ctx.getImageData(0, 0, canvas.width, canvas.height)
    setHistory([initialState])
    setHistoryIndex(0)
    setRedoStack([])
  }

// 모래 텍스처 추가 (개선)
  const addSandTexture = (ctx: CanvasRenderingContext2D, width: number, height: number, baseColor: string) => {
    const imageData = ctx.getImageData(0, 0, width, height)
    const data = imageData.data

// 모래 입자 효과 추가 (더 자연스러운 텍스처)
    for (let i = 0; i < data.length; i += 4) {
      // 랜덤 노이즈 추가
      const noise = Math.random() * 12 - 6

// 더 자연스러운 모래 질감을 위한 미세한 색상 변화
      data[i] = Math.min(255, Math.max(0, data[i] + noise + Math.random() * 3 - 1.5)) // R
      data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise + Math.random() * 3 - 1.5)) // G
      data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise + Math.random() * 3 - 1.5)) // B
    }

ctx.putImageData(imageData, 0, 0)

// 추가 텍스처 레이어 (미세한 점들)
    ctx.fillStyle =
      themeMode === "dark"
        ? "rgba(60, 60, 60, 0.1)"
        : themeMode === "black"
          ? "rgba(40, 40, 40, 0.1)"
          : "rgba(220, 210, 190, 0.1)"

// 미세한 점들 추가
    for (let i = 0; i < 1000; i++) {
      const x = Math.random() * width
      const y = Math.random() * height
      const size = Math.random() * 0.8 + 0.2

ctx.beginPath()
      ctx.arc(x, y, size, 0, Math.PI * 2)
      ctx.fill()
    }
  }

// 그리드 그리기
  const drawGrid = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
    const gridSize = 30
    ctx.strokeStyle =
      themeMode === "dark"
        ? "rgba(80, 80, 80, 0.2)"
        : themeMode === "black"
          ? "rgba(60, 60, 60, 0.2)"
          : "rgba(160, 140, 120, 0.2)"
    ctx.lineWidth = 0.5

// 수직선
    for (let x = gridSize; x < width; x += gridSize) {
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, height)
      ctx.stroke()
    }

// 수평선
    for (let y = gridSize; y < height; y += gridSize) {
      ctx.beginPath()
      ctx.moveTo(0, y)
      ctx.lineTo(width, y)
      ctx.stroke()
    }
  }

// 캔버스에 스톤 그리기
  const drawStones = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// 현재 캔버스 상태 저장
    const currentState = ctx.getImageData(0, 0, canvas.width, canvas.height)

// 스톤 그리기
    stones.forEach((stone, index) => {
      const img = stoneImagesRef.current[stone.type]
      if (!img.complete) return

ctx.save()
      ctx.translate(stone.x, stone.y)
      ctx.rotate((stone.rotation * Math.PI) / 180)
      ctx.drawImage(img, -stone.size / 2, -stone.size / 2, stone.size, stone.size)

// 선택된 스톤 표시 (개선)
      if (index === selectedStone) {
        ctx.strokeStyle =
          themeColor === "blue"
            ? "#3b82f6"
            : themeColor === "purple"
              ? "#8b5cf6"
              : themeColor === "green"
                ? "#22c55e"
                : "#f59e0b"
        ctx.lineWidth = 2

// 회전 핸들 표시
        ctx.beginPath()
        ctx.arc(0, -stone.size / 2 - 15, 5, 0, Math.PI * 2)
        ctx.stroke()
        ctx.beginPath()
        ctx.moveTo(0, -stone.size / 2)
        ctx.lineTo(0, -stone.size / 2 - 15)
        ctx.stroke()

// 선택 테두리
        ctx.setLineDash([5, 3])
        ctx.strokeRect(-stone.size / 2 - 5, -stone.size / 2 - 5, stone.size + 10, stone.size + 10)
        ctx.setLineDash([])
      }

ctx.restore()
    })

return currentState
  }

// 모래에 선 그리기 (개선)
  const drawLine = (startX: number, startY: number, endX: number, endY: number) => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

ctx.lineWidth = rakeWidth
    ctx.lineCap = "round"
    ctx.strokeStyle = themeMode === "dark" ? "#3a3a3a" : themeMode === "black" ? "#2a2a2a" : "#e6d9c0"

ctx.beginPath()

if (rakePattern === "straight") {
      ctx.moveTo(startX, startY)
      ctx.lineTo(endX, endY)
    } else if (rakePattern === "wavy") {
      // 물결 패턴
      const dx = endX - startX
      const dy = endY - startY
      const distance = Math.sqrt(dx * dx + dy * dy)
      const steps = Math.max(1, Math.floor(distance / 5))

for (let i = 0; i <= steps; i++) {
        const t = i / steps
        const x = startX + dx * t
        const y = startY + dy * t + Math.sin(t * Math.PI * 4) * 5

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
    } else if (rakePattern === "circular") {
      // 원형 패턴
      const dx = endX - startX
      const dy = endY - startY
      const distance = Math.sqrt(dx * dx + dy * dy)
      const steps = Math.max(1, Math.floor(distance / 5))

for (let i = 0; i <= steps; i++) {
        const t = i / steps
        const radius = 5 * Math.sin(t * Math.PI * 2)
        const angle = t * Math.PI * 8

const x = startX + dx * t + Math.cos(angle) * radius
        const y = startY + dy * t + Math.sin(angle) * radius

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
    } else if (rakePattern === "zigzag") {
      // 지그재그 패턴
      const dx = endX - startX
      const dy = endY - startY
      const distance = Math.sqrt(dx * dx + dy * dy)
      const steps = Math.max(1, Math.floor(distance / 10))

ctx.moveTo(startX, startY)

for (let i = 1; i <= steps; i++) {
        const t = i / steps
        const x = startX + dx * t
        const y = startY + dy * t

// 지그재그 효과
        const offset = i % 2 === 0 ? 5 : -5

// 선의 방향에 수직인 방향으로 오프셋 적용
        const angle = Math.atan2(dy, dx) + Math.PI / 2
        const offsetX = Math.cos(angle) * offset
        const offsetY = Math.sin(angle) * offset

ctx.lineTo(x + offsetX, y + offsetY)
      }
    }

ctx.stroke()

// 햅틱 피드백
    if (window.navigator.vibrate) {
      window.navigator.vibrate(5)
    }
  }

// 지우개 도구
  const eraseArea = (x: number, y: number) => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

const eraseSize = rakeWidth * 2

// 모래 색상으로 원형 영역 채우기
    const sandColor = themeMode === "dark" ? "#2c2c2c" : themeMode === "black" ? "#1a1a1a" : "#f0e6d2"
    ctx.fillStyle = sandColor
    ctx.beginPath()
    ctx.arc(x, y, eraseSize, 0, Math.PI * 2)
    ctx.fill()

// 지운 영역에 모래 텍스처 다시 추가
    const imageData = ctx.getImageData(
      Math.max(0, x - eraseSize),
      Math.max(0, y - eraseSize),
      eraseSize * 2,
      eraseSize * 2,
    )

const data = imageData.data

for (let i = 0; i < data.length; i += 4) {
      const noise = Math.random() * 12 - 6

data[i] = Math.min(255, Math.max(0, data[i] + noise)) // R
      data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise)) // G
      data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise)) // B
    }

ctx.putImageData(imageData, Math.max(0, x - eraseSize), Math.max(0, y - eraseSize))

// 그리드 다시 그리기
    if (showGrid) {
      const gridSize = 30
      ctx.strokeStyle =
        themeMode === "dark"
          ? "rgba(80, 80, 80, 0.2)"
          : themeMode === "black"
            ? "rgba(60, 60, 60, 0.2)"
            : "rgba(160, 140, 120, 0.2)"
      ctx.lineWidth = 0.5

// 지운 영역 내의 그리드 다시 그리기
      const startX = Math.floor((x - eraseSize) / gridSize) * gridSize
      const startY = Math.floor((y - eraseSize) / gridSize) * gridSize
      const endX = Math.ceil((x + eraseSize) / gridSize) * gridSize
      const endY = Math.ceil((y + eraseSize) / gridSize) * gridSize

// 수직선
      for (let gx = startX; gx <= endX; gx += gridSize) {
        if (gx >= 0 && gx <= canvas.width) {
          ctx.beginPath()
          ctx.moveTo(gx, Math.max(0, y - eraseSize))
          ctx.lineTo(gx, Math.min(canvas.height, y + eraseSize))
          ctx.stroke()
        }
      }

// 수평선
      for (let gy = startY; gy <= endY; gy += gridSize) {
        if (gy >= 0 && gy <= canvas.height) {
          ctx.beginPath()
          ctx.moveTo(Math.max(0, x - eraseSize), gy)
          ctx.lineTo(Math.min(canvas.width, x + eraseSize), gy)
          ctx.stroke()
        }
      }
    }
  }

// 캔버스 터치/마우스 이벤트 핸들러
  const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current
    if (!canvas) return

const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

if (tool === "rake") {
      setIsDrawing(true)
      setLastPoint({ x, y })
    } else if (tool === "eraser") {
      setIsDrawing(true)
      setLastPoint({ x, y })
      eraseArea(x, y)
    } else if (tool === "stone") {
      // 새 스톤 추가
      const newStone: Stone = {
        id: Date.now(),
        x,
        y,
        size: 40 + Math.random() * 20,
        rotation: Math.random() * 360,
        type: stoneType,
      }

setStones([...stones, newStone])
      setSelectedStone(stones.length)

// 햅틱 피드백
      if (window.navigator.vibrate) {
        window.navigator.vibrate(20)
      }

// 소리 재생
      if (isSoundOn) {
        const audio = new Audio("/sounds/stone-place.mp3")
        audio.volume = 0.3
        audio.play().catch((e) => console.error("오디오 재생 실패:", e))
      }
    } else if (tool === "hand") {
      // 스톤 선택 또는 이동
      const clickedStoneIndex = stones.findIndex((stone) => {
        const dx = stone.x - x
        const dy = stone.y - y
        return Math.sqrt(dx * dx + dy * dy) <= stone.size / 2
      })

if (clickedStoneIndex !== -1) {
        setSelectedStone(clickedStoneIndex)
        setIsDrawing(true)
        setLastPoint({ x, y })

// 햅틱 피드백
        if (window.navigator.vibrate) {
          window.navigator.vibrate(10)
        }
      } else {
        // 회전 핸들 체크
        if (selectedStone !== null) {
          const stone = stones[selectedStone]
          const handleX = stone.x
          const handleY = stone.y - stone.size / 2 - 15
          const dx = handleX - x
          const dy = handleY - y
          const distance = Math.sqrt(dx * dx + dy * dy)

if (distance <= 10) {
            // 회전 모드
            setIsDrawing(true)
            setLastPoint({ x, y })
            return
          }
        }

setSelectedStone(null)
      }
    }

// 포인터 캡처
    e.currentTarget.setPointerCapture(e.pointerId)
  }

const handlePointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
    if (!isDrawing || !lastPoint) return

const canvas = canvasRef.current
    if (!canvas) return

const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

if (tool === "rake") {
      drawLine(lastPoint.x, lastPoint.y, x, y)
      setLastPoint({ x, y })
    } else if (tool === "eraser") {
      eraseArea(x, y)
      setLastPoint({ x, y })
    } else if (tool === "hand" && selectedStone !== null) {
      const stone = stones[selectedStone]

// 회전 핸들 체크
      const handleX = stone.x
      const handleY = stone.y - stone.size / 2 - 15
      const handleDx = handleX - lastPoint.x
      const handleDy = handleY - lastPoint.y
      const handleDistance = Math.sqrt(handleDx * handleDx + handleDy * handleDy)

if (handleDistance <= 10) {
        // 회전 모드
        const centerX = stone.x
        const centerY = stone.y

// 이전 각도
        const prevAngle = Math.atan2(lastPoint.y - centerY, lastPoint.x - centerX)
        // 현재 각도
        const currentAngle = Math.atan2(y - centerY, x - centerX)

// 각도 차이 (라디안)
        let angleDiff = currentAngle - prevAngle

// 각도를 도(degree)로 변환
        angleDiff = (angleDiff * 180) / Math.PI

// 스톤 회전
        setStones(
          stones.map((s, index) => {
            if (index === selectedStone) {
              return { ...s, rotation: (s.rotation + angleDiff) % 360 }
            }
            return s
          }),
        )

setLastPoint({ x, y })
        return
      }

// 스톤 이동
      const dx = x - lastPoint.x
      const dy = y - lastPoint.y

setStones(
        stones.map((stone, index) => {
          if (index === selectedStone) {
            return { ...stone, x: stone.x + dx, y: stone.y + dy }
          }
          return stone
        }),
      )

setLastPoint({ x, y })
    }
  }

const handlePointerUp = () => {
    if (isDrawing) {
      setIsDrawing(false)

// 히스토리에 현재 상태 저장
      const canvas = canvasRef.current
      if (!canvas) return

const ctx = canvas.getContext("2d")
      if (!ctx) return

// 스톤 그리기 전 상태 저장
      const currentState = drawStones()
      if (currentState) {
        // 히스토리 업데이트
        const newHistory = history.slice(0, historyIndex + 1)
        newHistory.push(currentState)

// 히스토리 크기 제한
        if (newHistory.length > 20) {
          newHistory.shift()
        }

setHistory(newHistory)
        setHistoryIndex(newHistory.length - 1)
        setRedoStack([]) // 실행 취소 후 새 작업을 하면 다시 실행 스택 초기화
      }
    }
  }

// 실행 취소
  const undo = () => {
    if (historyIndex > 0) {
      const canvas = canvasRef.current
      if (!canvas) return

const ctx = canvas.getContext("2d")
      if (!ctx) return

const newIndex = historyIndex - 1

// 현재 상태를 다시 실행 스택에 저장
      setRedoStack([...redoStack, history[historyIndex]])

// 이전 상태로 복원
      ctx.putImageData(history[newIndex], 0, 0)
      setHistoryIndex(newIndex)

// 스톤 다시 그리기
      drawStones()

// 햅틱 피드백
      if (window.navigator.vibrate) {
        window.navigator.vibrate([10, 30, 10])
      }
    }
  }

// 다시 실행
  const redo = () => {
    if (redoStack.length > 0) {
      const canvas = canvasRef.current
      if (!canvas) return

const ctx = canvas.getContext("2d")
      if (!ctx) return

// 다시 실행 스택에서 상태 가져오기
      const nextState = redoStack[redoStack.length - 1]
      const newRedoStack = redoStack.slice(0, -1)

// 히스토리 업데이트
      const newHistory = [...history, nextState]
      const newIndex = historyIndex + 1

ctx.putImageData(nextState, 0, 0)

setHistory(newHistory)
      setHistoryIndex(newIndex)
      setRedoStack(newRedoStack)

// 스톤 다시 그리기
      drawStones()

// 햅틱 피드백
      if (window.navigator.vibrate) {
        window.navigator.vibrate([10, 30, 10])
      }
    }
  }

// 정원 저장
  const saveGarden = () => {
    const canvas = canvasRef.current
    if (!canvas) return

try {
      // 스톤 포함해서 최종 이미지 생성
      drawStones()

const dataUrl = canvas.toDataURL("image/png")
      const link = document.createElement("a")
      link.download = `zen_garden_${new Date().toISOString().slice(0, 10)}.png`
      link.href = dataUrl
      link.click()

// 정원 카운트 증가
      const newCount = gardenCount + 1
      setGardenCount(newCount)
      localStorage.setItem("sand-garden-count", newCount.toString())

// 업적 체크
      if (newCount >= 5) {
        onAchievement("garden-5", "정원사")
      }

// 햅틱 피드백
      if (window.navigator.vibrate) {
        window.navigator.vibrate([10, 50, 10])
      }

// 소리 재생
      if (isSoundOn) {
        const audio = new Audio("/sounds/success.mp3")
        audio.volume = 0.3
        audio.play().catch((e) => console.error("오디오 재생 실패:", e))
      }
    } catch (e) {
      console.error("정원 저장 실패:", e)
    }
  }

// 정원 공유
  const shareGarden = async () => {
    const canvas = canvasRef.current
    if (!canvas) return

try {
      // 스톤 포함해서 최종 이미지 생성
      drawStones()

const dataUrl = canvas.toDataURL("image/png")

// 모바일 기기에서 공유 API 사용
      if (navigator.share) {
        const blob = await (await fetch(dataUrl)).blob()
        const file = new File([blob], "zen_garden.png", { type: "image/png" })

await navigator.share({
          title: "내 선 정원",
          text: "안티스트레스 앱에서 만든 선 정원입니다",
          files: [file],
        })

// 햅틱 피드백
        if (window.navigator.vibrate) {
          window.navigator.vibrate([10, 50, 10])
        }
      } else {
        // 공유 API를 지원하지 않는 경우 다운로드
        saveGarden()
      }
    } catch (e) {
      console.error("정원 공유 실패:", e)
      // 실패 시 다운로드로 대체
      saveGarden()
    }
  }

// 정원 초기화
  const resetGarden = () => {
    if (confirm("정원을 초기화하시겠습니까? 모든 변경사항이 사라집니다.")) {
      setStones([])
      initCanvas()

// 햅틱 피드백
      if (window.navigator.vibrate) {
        window.navigator.vibrate([20, 50, 20])
      }
    }
  }

// 스톤 회전
  const rotateSelectedStone = () => {
    if (selectedStone === null) return

setStones(
      stones.map((stone, index) => {
        if (index === selectedStone) {
          return { ...stone, rotation: (stone.rotation + 45) % 360 }
        }
        return stone
      }),
    )

// 햅틱 피드백
    if (window.navigator.vibrate) {
      window.navigator.vibrate(10)
    }
  }

// 선택된 스톤 삭제
  const deleteSelectedStone = () => {
    if (selectedStone === null) return

setStones(stones.filter((_, index) => index !== selectedStone))
    setSelectedStone(null)

// 햅틱 피드백
    if (window.navigator.vibrate) {
      window.navigator.vibrate([10, 30, 10])
    }
  }

// 설정 저장
  const saveSettings = () => {
    localStorage.setItem("sand-garden-grid", showGrid.toString())
    localStorage.setItem("sand-garden-autosave", autoSave.toString())

// 그리드 변경 시 캔버스 다시 그리기
    const canvas = canvasRef.current
    if (canvas) {
      const ctx = canvas.getContext("2d")
      if (ctx) {
        // 현재 이미지 데이터 저장
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

// 캔버스 초기화
        const sandColor = themeMode === "dark" ? "#2c2c2c" : themeMode === "black" ? "#1a1a1a" : "#f0e6d2"
        ctx.fillStyle = sandColor
        ctx.fillRect(0, 0, canvas.width, canvas.height)

// 이미지 데이터 복원
        ctx.putImageData(imageData, 0, 0)

// 그리드 그리기 또는 지우기
        if (showGrid) {
          drawGrid(ctx, canvas.width, canvas.height)
        }

// 스톤 다시 그리기
        drawStones()
      }
    }

// 튜토리얼 완료 표시
    localStorage.setItem("sand-garden-tutorial-completed", "true")
    setShowTutorial(false)
  }

// 렌더링 시 스톤 그리기
  useEffect(() => {
    drawStones()
  }, [stones, selectedStone, themeColor])

return (
    <div className="flex flex-col" ref={containerRef}>
      <div className="mb-4 flex justify-between items-center">
        <h3 className="text-lg font-medium text-primary">모래 정원 꾸미기</h3>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={undo}
            disabled={historyIndex <= 0}
            className="h-8 w-8 p-0 rounded-full"
            title="실행 취소"
          >
            <Undo2 className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={redo}
            disabled={redoStack.length === 0}
            className="h-8 w-8 p-0 rounded-full"
            title="다시 실행"
          >
            <Redo className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={saveGarden} className="h-8 w-8 p-0 rounded-full" title="저장">
            <Save className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={shareGarden} className="h-8 w-8 p-0 rounded-full" title="공유">
            <Share2 className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" onClick={resetGarden} className="h-8 w-8 p-0 rounded-full" title="초기화">
            <Trash2 className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowTutorial(true)}
            className="h-8 w-8 p-0 rounded-full"
            title="도움말"
          >
            <Info className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="mb-4">
        <Tabs defaultValue="tools" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="tools">도구</TabsTrigger>
            <TabsTrigger value="stones">돌</TabsTrigger>
          </TabsList>
          <TabsContent value="tools" className="mt-2">
            <div className="flex flex-wrap gap-2">
              <Button
                variant={tool === "rake" ? "default" : "outline"}
                size="sm"
                onClick={() => setTool("rake")}
                className="flex-1"
              >
                <RakeIcon className="mr-2 h-4 w-4" />
                갈퀴
              </Button>
              <Button
                variant={tool === "stone" ? "default" : "outline"}
                size="sm"
                onClick={() => setTool("stone")}
                className="flex-1"
              >
                <StoneIcon className="mr-2 h-4 w-4" />돌 놓기
              </Button>
              <Button
                variant={tool === "hand" ? "default" : "outline"}
                size="sm"
                onClick={() => setTool("hand")}
                className="flex-1"
              >
                <Hand className="mr-2 h-4 w-4" />
                이동
              </Button>
              <Button
                variant={tool === "eraser" ? "default" : "outline"}
                size="sm"
                onClick={() => setTool("eraser")}
                className="flex-1"
              >
                <EraserIcon className="mr-2 h-4 w-4" />
                지우개
              </Button>
            </div>

{tool === "rake" && (
              <div className="mt-2 space-y-2">
                <div className="flex flex-wrap gap-2">
                  <Button
                    variant={rakePattern === "straight" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setRakePattern("straight")}
                    className="flex-1"
                  >
                    직선
                  </Button>
                  <Button
                    variant={rakePattern === "wavy" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setRakePattern("wavy")}
                    className="flex-1"
                  >
                    물결
                  </Button>
                  <Button
                    variant={rakePattern === "circular" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setRakePattern("circular")}
                    className="flex-1"
                  >
                    원형
                  </Button>
                  <Button
                    variant={rakePattern === "zigzag" ? "default" : "outline"}
                    size="sm"
                    onClick={() => setRakePattern("zigzag")}
                    className="flex-1"
                  >
                    지그재그
                  </Button>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm">굵기:</span>
                  <input
                    type="range"
                    min="5"
                    max="20"
                    value={rakeWidth}
                    onChange={(e) => setRakeWidth(Number.parseInt(e.target.value))}
                    className="flex-1"
                  />
                </div>
              </div>
            )}

{tool === "hand" && selectedStone !== null && (
              <div className="mt-2 flex gap-2">
                <Button variant="outline" size="sm" onClick={rotateSelectedStone} className="flex-1">
                  <RotateCw className="mr-2 h-4 w-4" />
                  회전
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={deleteSelectedStone}
                  className="flex-1 text-destructive hover:text-destructive"
                >
                  <Trash2 className="mr-2 h-4 w-4" />
                  삭제
                </Button>
              </div>
            )}

<div className="mt-3 space-y-2">
              <div className="flex items-center justify-between">
                <label className="text-sm text-muted-foreground">그리드 표시</label>
                <Switch checked={showGrid} onCheckedChange={setShowGrid} />
              </div>
              <div className="flex items-center justify-between">
                <label className="text-sm text-muted-foreground">자동 저장</label>
                <Switch checked={autoSave} onCheckedChange={setAutoSave} />
              </div>
            </div>
          </TabsContent>
          <TabsContent value="stones" className="mt-2">
            <div className="grid grid-cols-5 gap-2">
              {[0, 1, 2, 3, 4].map((type) => (
                <button
                  key={type}
                  onClick={() => {
                    setStoneType(type)
                    setTool("stone")
                  }}
                  className={cn(
                    "aspect-square rounded-md p-1 border",
                    stoneType === type && tool === "stone"
                      ? "border-primary bg-primary/10"
                      : "border-muted bg-background hover:bg-muted/20",
                  )}
                >
                  <div
                    className="h-full w-full bg-contain bg-center bg-no-repeat"
                    style={{ backgroundImage: `url(/stones/stone-${type + 1}.png)` }}
                  />
                </button>
              ))}
            </div>
            <p className="mt-3 text-xs text-muted-foreground">
              돌을 선택한 후 캔버스에 배치하세요. 손 도구로 돌을 이동하거나 회전할 수 있습니다.
            </p>
          </TabsContent>
        </Tabs>
      </div>

{/* 모바일 사용자를 위한 팁 */}
      {touchEnabled && (
        <div className="mt-2 p-3 rounded-lg bg-primary/5 text-xs text-muted-foreground">
          <p>
            💡 팁: 갈퀴로 모래에 패턴을 그리고, 돌을 배치하여 나만의 정원을 만드세요. 손 도구로 돌을 이동하거나 회전할
            수 있습니다.
          </p>
        </div>
      )}

{/* 튜토리얼 */}
      {showTutorial && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-xl">
            <h3 className="mb-4 text-lg font-medium text-primary">모래 정원 사용법</h3>

<div className="space-y-2">
                <h4 className="font-medium text-primary">돌 배치</h4>
                <p className="text-sm text-muted-foreground">
                  돌 탭에서 원하는 돌을 선택한 후 캔버스에 배치하세요. 손 도구로 돌을 이동하거나 회전할 수 있습니다.
                </p>
              </div>

<div className="space-y-2">
                <h4 className="font-medium text-primary">저장 및 공유</h4>
                <p className="text-sm text-muted-foreground">
                  완성된 정원은 저장하거나 공유할 수 있습니다. 자동 저장 기능을 켜두면 작업이 자동으로 저장됩니다.
                </p>
              </div>

<div className="pt-4 flex justify-end">
                <Button onClick={saveSettings}>이해했습니다</Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// 갈퀴 아이콘
function RakeIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M4 20h16" />
      <path d="M4 16h16" />
      <path d="M6 12h12" />
      <path d="M8 8h8" />
      <path d="M12 4v16" />
    </svg>
  )
}

// 돌 아이콘
function StoneIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M6 9v9a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9" />
      <path d="M4 4h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
    </svg>
  )
}

// 지우개 아이콘
function EraserIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" />
      <path d="M22 21H7" />
      <path d="m5 11 9 9" />
    </svg>
  )
}

[V0_FILE]plaintext:file="public/sounds/stone-place.mp3" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/sounds/water-pour.mp3" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/sounds/success.mp3" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/sounds/fail.mp3" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/stones/stone-1.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/stones/stone-2.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/stones/stone-3.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/stones/stone-4.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]plaintext:file="public/stones/stone-5.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true" isEdit="true"

[V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true"
export function BreathingIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
      <path d="M12 6v12" />
      <path d="M16 10H8" />
    </svg>
  )
}

export function MeditationIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 2a5 5 0 0 0-5 5v14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V7a5 5 0 0 0-5-5Z" />
      <path d="M9 21h6" />
      <path d="M12 17v4" />
    </svg>
  )
}

export function Trophy({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
      <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
      <path d="M4 22h16" />
      <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
      <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
      <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
    </svg>
  )
}

export function Check({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  )
}

export function DrawingIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
    </svg>
  )
}

export function WaterIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 22a8 8 0 0 1-8-8c0-3.502 2.71-8.334 8-12 5.29 3.666 8 8.498 8 12a8 8 0 0 1-8 8z" />
    </svg>
  )
}

export function SpinnerIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M12 6v6l4 2" />
    </svg>
  )
}

export function SoundIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M8 2v20M16 2v20M2 8h20M2 16h20" />
    </svg>
  )
}

export function MoodIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M8 14s1.5 2 4 2 4-2 4-2" />
      <line x1="9" y1="9" x2="9.01" y2="9" />
      <line x1="15" y1="9" x2="15.01" y2="9" />
    </svg>
  )
}

export function SandIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M3 16h18" />
      <path d="M3 20h18" />
      <path d="m4 12 4-8 4 8" />
      <path d="m12 12 4-8 4 8" />
      <path d="M2 12h20" />
    </svg>
  )
}

export function WaterGlassIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M8 22h8" />
      <path d="M7 10h10" />
      <path d="M12 10v12" />
      <path d="m17 2-5 8-5-8Z" />
    </svg>
  )
}

[V0_FILE]typescriptreact:file="utils/theme-utils.ts" isMerged="true"
// 테마 색상 가져오기
export function getThemeColor(color: string, mode: string) {
  const colors = {
    blue: {
      light: "rgb(59, 130, 246)",
      dark: "rgb(96, 165, 250)",
      black: "rgb(147, 197, 253)",
    },
    purple: {
      light: "rgb(139, 92, 246)",
      dark: "rgb(167, 139, 250)",
      black: "rgb(196, 181, 253)",
    },
    green: {
      light: "rgb(34, 197, 94)",
      dark: "rgb(74, 222, 128)",
      black: "rgb(134, 239, 172)",
    },
    amber: {
      light: "rgb(245, 158, 11)",
      dark: "rgb(251, 191, 36)",
      black: "rgb(253, 230, 138)",
    },
  }
  return colors[color][mode]
}

// 보조 색상 가져오기
export function getThemeSecondaryColor(color: string, mode: string) {
  const colors = {
    blue: {
      light: "rgb(37, 99, 235)",
      dark: "rgb(59, 130, 246)",
      black: "rgb(96, 165, 250)",
    },
    purple: {
      light: "rgb(124, 58, 237)",
      dark: "rgb(139, 92, 246)",
      black: "rgb(167, 139, 250)",
    },
    green: {
      light: "rgb(22, 163, 74)",
      dark: "rgb(34, 197, 94)",
      black: "rgb(74, 222, 128)",
    },
    amber: {
      light: "rgb(217, 119, 6)",
      dark: "rgb(245, 158, 11)",
      black: "rgb(251, 191, 36)",
    },
  }
  return colors[color][mode]
}

// 햅틱 피드백 함수 추가
export function triggerHapticFeedback(intensity: "light" | "medium" | "heavy") {
  if (typeof window === "undefined") return
  if (!window.navigator.vibrate) return

switch (intensity) {
    case "light":
      window.navigator.vibrate(10)
      break
    case "medium":
      window.navigator.vibrate(20)
      break
    case "heavy":
      window.navigator.vibrate([30, 10, 30])
      break
  }
}

[V0_FILE]typescriptreact:file="data/activities.tsx" isMerged="true"
import type React from "react"
import { Clock, BookOpen, Sparkles } from "lucide-react"
import {
  BreathingIcon,
  DrawingIcon,
  WaterIcon,
  SpinnerIcon,
  SoundIcon,
  MeditationIcon,
  MoodIcon,
  SandIcon,
  WaterGlassIcon,
} from "@/components/icons"

export type ActivitySize = "small" | "medium" | "large"
export type ActivityColor = "primary" | "secondary" | "accent"

export interface Activity {
  id: string
  title: string
  description: string
  size: ActivitySize
  color: ActivityColor
  icon: React.ReactNode
}

export const activities: Activity[] = [
  {
    id: "bubbles",
    title: "버블랩 터뜨리기",
    description: "가상 버블랩을 터뜨려 긴장을 풀어보세요",
    size: "medium",
    color: "primary",
    icon: <Sparkles className="h-5 w-5" />,
  },
  {
    id: "breathing",
    title: "호흡 운동",
    description: "가이드에 따라 호흡하며 마음을 진정시키세요",
    size: "large",
    color: "secondary",
    icon: <BreathingIcon className="h-5 w-5" />,
  },
  {
    id: "drawing",
    title: "그림 그리기",
    description: "자유롭게 그림을 그리며 감정을 표현하세요",
    size: "medium",
    color: "accent",
    icon: <DrawingIcon className="h-5 w-5" />,
  },
  {
    id: "water",
    title: "물결 만들기",
    description: "평온한 물결을 만들어 마음을 진정시키세요",
    size: "small",
    color: "primary",
    icon: <WaterIcon className="h-5 w-5" />,
  },
  {
    id: "spinner",
    title: "피젯 스피너",
    description: "가상 피젯 스피너로 집중력을 높이세요",
    size: "small",
    color: "secondary",
    icon: <SpinnerIcon className="h-5 w-5" />,
  },
  {
    id: "soundscape",
    title: "사운드스케이프",
    description: "편안한 자연 소리로 마음을 진정시키세요",
    size: "medium",
    color: "accent",
    icon: <SoundIcon className="h-5 w-5" />,
  },
  {
    id: "meditation",
    title: "가이드 명상",
    description: "짧은 명상으로 마음의 평화를 찾으세요",
    size: "large",
    color: "primary",
    icon: <MeditationIcon className="h-5 w-5" />,
  },
  {
    id: "mood",
    title: "기분 추적",
    description: "오늘의 기분을 기록하고 패턴을 파악하세요",
    size: "medium",
    color: "secondary",
    icon: <MoodIcon className="h-5 w-5" />,
  },
  {
    id: "focus",
    title: "집중 모드",
    description: "포모도로 기법으로 효율적인 집중력 향상",
    size: "medium",
    color: "primary",
    icon: <Clock className="h-5 w-5" />,
  },
  {
    id: "journal",
    title: "마음 일기",
    description: "생각과 감정을 기록하고 마음을 정리하세요",
    size: "medium",
    color: "accent",
    icon: <BookOpen className="h-5 w-5" />,
  },
  {
    id: "sand-garden",
    title: "모래 정원 꾸미기",
    description: "모래 위에 패턴을 그리고 돌을 배치하세요",
    size: "medium",
    color: "secondary",
    icon: <SandIcon className="h-5 w-5" />,
  },
  {
    id: "water-pouring",
    title: "유리잔에 물 따르기",
    description: "정확한 타이밍으로 물을 따라보세요",
    size: "medium",
    color: "primary",
    icon: <WaterGlassIcon className="h-5 w-5" />,
  },
]

[V0_FILE]typescriptreact:file="components/achievement-item.tsx" isMerged="true"
import { cn } from "@/lib/utils"
import { Trophy, Check } from "@/components/icons"

interface AchievementItemProps {
  name: string
  description: string
  unlocked: boolean
  themeMode: string
}

export function AchievementItem({ name, description, unlocked, themeMode }: AchievementItemProps) {
  return (
    <div
      className={cn(
        "flex items-center gap-3 rounded-lg p-3 transition-colors",
        unlocked ? "bg-primary/10" : "bg-muted/50",
      )}
    >
      <div
        className={cn(
          "flex h-10 w-10 items-center justify-center rounded-full",
          unlocked ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground",
        )}
      >
        <Trophy className="h-5 w-5" />
      </div>
      <div>
        <div className={cn("font-medium", unlocked ? "text-primary" : "text-muted-foreground")}>{name}</div>
        <div className="text-sm text-muted-foreground">{description}</div>
      </div>
      {unlocked && (
        <div className="ml-auto flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
          <Check className="h-3 w-3" />
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-app-state.ts" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { getThemeColor, getThemeSecondaryColor, triggerHapticFeedback } from "@/utils/theme-utils"

export function useAppState() {
  const [currentActivity, setCurrentActivity] = useState<string | null>(null)
  const [themeMode, setThemeMode] = useState<"light" | "dark" | "black">("light")
  const [themeColor, setThemeColor] = useState<"blue" | "purple" | "green" | "amber">("blue")
  const [isSoundOn, setIsSoundOn] = useState(true)
  const [achievements, setAchievements] = useState<Record<string, boolean>>({})
  const [showAchievement, setShowAchievement] = useState<string | null>(null)
  const [currentTab, setCurrentTab] = useState("home")
  const [streakDays, setStreakDays] = useState(1)
  const [lastUsedDate, setLastUsedDate] = useState<string | null>(null)
  const [showSettings, setShowSettings] = useState(false)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const touchStartX = useRef(0)
  const touchEndX = useRef(0)
  const touchStartY = useRef(0)
  const touchEndY = useRef(0)

// 스와이프 제스처 처리
  useEffect(() => {
    if (typeof window === "undefined") return

const handleTouchStart = (e: TouchEvent) => {
      touchStartX.current = e.touches[0].clientX
      touchStartY.current = e.touches[0].clientY
    }

const handleTouchEnd = (e: TouchEvent) => {
      touchEndX.current = e.changedTouches[0].clientX
      touchEndY.current = e.changedTouches[0].clientY
      handleSwipe()
    }

const handleSwipe = () => {
      const swipeDistanceX = touchEndX.current - touchStartX.current
      const swipeDistanceY = touchEndY.current - touchStartY.current
      const minSwipeDistance = 30 // 30px로 감도 향상 (기존 50px)

// 수직 스와이프보다 수평 스와이프가 더 큰 경우에만 처리
      if (Math.abs(swipeDistanceX) > Math.abs(swipeDistanceY)) {
        if (!currentActivity && Math.abs(swipeDistanceX) > minSwipeDistance) {
          if (swipeDistanceX > 0) {
            // 오른쪽으로 스와이프
            setCurrentTab((prev) => {
              if (prev === "home") return "profile"
              if (prev === "stats") return "home"
              if (prev === "profile") return "stats"
              return prev
            })
            triggerHapticFeedback("medium") // 피드백 강화
          } else {
            // 왼쪽으로 스와이프
            setCurrentTab((prev) => {
              if (prev === "home") return "stats"
              if (prev === "stats") return "profile"
              if (prev === "profile") return "home"
              return prev
            })
            triggerHapticFeedback("medium") // 피드백 강화
          }
        }
      }
    }

document.addEventListener("touchstart", handleTouchStart)
    document.addEventListener("touchend", handleTouchEnd)

return () => {
      document.removeEventListener("touchstart", handleTouchStart)
      document.removeEventListener("touchend", handleTouchEnd)
    }
  }, [currentActivity])

// 다크모드 설정
  useEffect(() => {
    if (typeof window === "undefined") return

const root = document.documentElement
    root.classList.remove("light", "dark", "black")
    root.classList.add(themeMode)

// 테마 색상 설정
    root.style.setProperty("--theme-primary", getThemeColor(themeColor, themeMode))
    root.style.setProperty("--theme-secondary", getThemeSecondaryColor(themeColor, themeMode))

// 시스템 다크모드 감지
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    if (!localStorage.getItem("theme-mode")) {
      setThemeMode(prefersDark ? "dark" : "light")
    }

// 로컬 스토리지에서 설정 불러오기
    const savedThemeMode = localStorage.getItem("theme-mode") as "light" | "dark" | "black" | null
    const savedThemeColor = localStorage.getItem("theme-color") as "blue" | "purple" | "green" | "amber" | null
    const savedAchievements = localStorage.getItem("achievements")
    const savedLastUsedDate = localStorage.getItem("last-used-date")

if (savedThemeMode) setThemeMode(savedThemeMode)
    if (savedThemeColor) setThemeColor(savedThemeColor)
    if (savedAchievements) setAchievements(JSON.parse(savedAchievements))
    if (savedLastUsedDate) setLastUsedDate(savedLastUsedDate)

// 연속 사용 일수 계산
    const today = new Date().toISOString().split("T")[0]
    if (savedLastUsedDate) {
      const lastDate = new Date(savedLastUsedDate)
      const todayDate = new Date(today)
      const diffTime = Math.abs(todayDate.getTime() - lastDate.getTime())
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

if (diffDays === 1) {
        // 연속 사용
        const savedStreak = localStorage.getItem("streak-days")
        if (savedStreak) {
          setStreakDays(Number.parseInt(savedStreak) + 1)
          localStorage.setItem("streak-days", (Number.parseInt(savedStreak) + 1).toString())
        }
      } else if (diffDays > 1) {
        // 연속 사용 끊김
        setStreakDays(1)
        localStorage.setItem("streak-days", "1")
      }
    }

// 오늘 날짜 저장
    localStorage.setItem("last-used-date", today)
    setLastUsedDate(today)
  }, [themeMode, themeColor])

// 업적 달성 처리
  const unlockAchievement = (id: string, name: string) => {
    if (!achievements[id]) {
      const newAchievements = { ...achievements, [id]: true }
      setAchievements(newAchievements)
      setShowAchievement(name)
      setTimeout(() => setShowAchievement(null), 3000)

// 로컬 스토리지에 저장
      if (typeof window !== "undefined") {
        localStorage.setItem("achievements", JSON.stringify(newAchievements))

// 소리 재생
        if (isSoundOn) {
          const audio = new Audio("/achievement.mp3")
          audio.play().catch((e) => console.error("오디오 재생 실패:", e))
        }

// 햅틱 피드백
        triggerHapticFeedback("heavy")
      }
    }
  }

// 새로고침 처리
  const handleRefresh = async () => {
    setIsRefreshing(true)

// 실제 데이터 새로고침 로직
    await new Promise((resolve) => setTimeout(resolve, 1000))

// 로컬 스토리지에서 데이터 다시 불러오기
    const savedAchievements = localStorage.getItem("achievements")
    if (savedAchievements) setAchievements(JSON.parse(savedAchievements))

setIsRefreshing(false)

// 햅틱 피드백
    triggerHapticFeedback("medium")
  }

return {
    currentActivity,
    setCurrentActivity,
    themeMode,
    setThemeMode,
    themeColor,
    setThemeColor,
    isSoundOn,
    setIsSoundOn,
    achievements,
    showAchievement,
    currentTab,
    setCurrentTab,
    streakDays,
    showSettings,
    setShowSettings,
    isRefreshing,
    unlockAchievement,
    handleRefresh,
  }
}

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

import { Home, BarChart3, User } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import AchievementPopup from "@/components/achievement-popup"
import SettingsSheet from "@/components/settings-sheet"
import { useMediaQuery } from "@/hooks/use-media-query"
import { SwipeHint, PullToRefresh } from "@/components/mobile-optimizations"
import { useAppState } from "@/hooks/use-app-state"
import { triggerHapticFeedback } from "@/utils/theme-utils"
import { ActivityRenderer } from "@/components/activity-renderer"
import { AppHeader } from "@/components/app-header"
import { HomeTab } from "@/components/tabs/home-tab"
import { StatsTab } from "@/components/tabs/stats-tab"
import { ProfileTab } from "@/components/tabs/profile-tab"

export default function AntiStressApp() {
  const {
    currentActivity,
    setCurrentActivity,
    themeMode,
    setThemeMode,
    themeColor,
    setThemeColor,
    isSoundOn,
    setIsSoundOn,
    achievements,
    showAchievement,
    currentTab,
    setCurrentTab,
    streakDays,
    showSettings,
    setShowSettings,
    unlockAchievement,
    handleRefresh,
  } = useAppState()

const isMobile = useMediaQuery("(max-width: 768px)")

return (
    <div className={`min-h-screen bg-background text-foreground transition-colors duration-300 overscroll-none`}>
      <div className="mx-auto max-w-4xl p-4">
        {currentActivity ? (
          <ActivityRenderer
            currentActivity={currentActivity}
            setCurrentActivity={setCurrentActivity}
            themeMode={themeMode}
            themeColor={themeColor}
            isSoundOn={isSoundOn}
            unlockAchievement={unlockAchievement}
          />
        ) : (
          <PullToRefresh onRefresh={handleRefresh}>
            <div className="flex flex-col">
              <AppHeader
                streakDays={streakDays}
                isSoundOn={isSoundOn}
                setIsSoundOn={setIsSoundOn}
                setShowSettings={setShowSettings}
              />

<Tabs value={currentTab} onValueChange={setCurrentTab} className="w-full">
                <TabsList className="mb-6 grid w-full grid-cols-3 rounded-full bg-muted/50 p-1">
                  <TabsTrigger
                    value="home"
                    className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                    onClick={() => triggerHapticFeedback("light")}
                  >
                    <Home className="mr-2 h-4 w-4" />홈
                  </TabsTrigger>
                  <TabsTrigger
                    value="stats"
                    className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                    onClick={() => triggerHapticFeedback("light")}
                  >
                    <BarChart3 className="mr-2 h-4 w-4" />
                    통계
                  </TabsTrigger>
                  <TabsTrigger
                    value="profile"
                    className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
                    onClick={() => triggerHapticFeedback("light")}
                  >
                    <User className="mr-2 h-4 w-4" />
                    프로필
                  </TabsTrigger>
                </TabsList>

{showAchievement && <AchievementPopup name={showAchievement} themeMode={themeMode} />}

<SettingsSheet
        themeMode={themeMode}
        setThemeMode={setThemeMode}
        themeColor={themeColor}
        setThemeColor={setThemeColor}
        isSoundOn={isSoundOn}
        setIsSoundOn={setIsSoundOn}
        isOpen={showSettings}
        onClose={() => setShowSettings(false)}
      />

{/* 스와이프 힌트 추가 */}
      <SwipeHint />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/tabs/home-tab.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import ActivityCard from "@/components/activity-card"
import { activities } from "@/data/activities"
import { BreathingIcon, MeditationIcon } from "@/components/icons"
import { triggerHapticFeedback } from "@/utils/theme-utils"

interface HomeTabProps {
  streakDays: number
  setCurrentActivity: (id: string | null) => void
  themeMode: string
}

export function HomeTab({ streakDays, setCurrentActivity, themeMode }: HomeTabProps) {
  return (
    <>
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-semibold text-primary">활동</h2>
        <div className="flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">
          <span>{streakDays}일 연속</span>
        </div>
      </div>

{/* 벤토 그리드 레이아웃 */}
      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {activities.map((activity) => (
          <ActivityCard
            key={activity.id}
            title={activity.title}
            description={activity.description}
            onClick={() => {
              setCurrentActivity(activity.id)
              triggerHapticFeedback("medium")
            }}
            size={activity.size}
            color={activity.color}
            themeMode={themeMode}
            icon={activity.icon}
          />
        ))}
      </div>

<div className="mt-8">
        <h3 className="mb-4 text-lg font-semibold text-primary">추천 활동</h3>
        <div className="rounded-xl bg-card p-4 shadow-md">
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
              {new Date().getHours() < 12 ? (
                <BreathingIcon className="h-6 w-6" />
              ) : (
                <MeditationIcon className="h-6 w-6" />
              )}
            </div>
            <div>
              <h4 className="font-medium text-primary">
                {new Date().getHours() < 12 ? "아침 호흡 운동" : "저녁 명상"}
              </h4>
              <p className="text-sm text-muted-foreground">
                {new Date().getHours() < 12 ? "하루를 활기차게 시작하세요" : "하루를 마무리하는 짧은 명상"}
              </p>
            </div>
            <Button
              className="ml-auto active:scale-95 transition-transform duration-150"
              onClick={() => {
                setCurrentActivity(new Date().getHours() < 12 ? "breathing" : "meditation")
                triggerHapticFeedback("medium")
              }}
            >
              시작
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/tabs/stats-tab.tsx" isMerged="true"
"use client"

interface StatsTabProps {
  streakDays: number
  achievementsCount: number
}

export function StatsTab({ streakDays, achievementsCount }: StatsTabProps) {
  return (
    <>
      <div className="rounded-xl bg-card p-6 shadow-md">
        <h3 className="mb-4 text-lg font-semibold text-primary">나의 통계</h3>
        <div className="grid gap-4 md:grid-cols-2">
          <div className="rounded-lg bg-muted/50 p-4">
            <div className="text-sm text-muted-foreground">총 사용 시간</div>
            <div className="text-2xl font-bold text-primary">3시간 45분</div>
          </div>
          <div className="rounded-lg bg-muted/50 p-4">
            <div className="text-sm text-muted-foreground">가장 많이 사용한 활동</div>
            <div className="text-2xl font-bold text-primary">호흡 운동</div>
          </div>
          <div className="rounded-lg bg-muted/50 p-4">
            <div className="text-sm text-muted-foreground">연속 사용</div>
            <div className="text-2xl font-bold text-primary">{streakDays}일</div>
          </div>
          <div className="rounded-lg bg-muted/50 p-4">
            <div className="text-sm text-muted-foreground">달성한 업적</div>
            <div className="text-2xl font-bold text-primary">{achievementsCount}/14</div>
          </div>
        </div>
      </div>

<div className="mt-6 rounded-xl bg-card p-6 shadow-md">
        <h3 className="mb-4 text-lg font-semibold text-primary">기분 변화</h3>
        <div className="h-40 w-full rounded-lg bg-muted/50 p-4">
          <div className="flex h-full items-end justify-between">
            {Array.from({ length: 7 }).map((_, i) => (
              <div key={i} className="flex flex-col items-center">
                <div
                  className="w-8 rounded-t-md bg-primary"
                  style={{
                    height: `${Math.random() * 60 + 20}%`,
                    opacity: 0.6 + i * 0.05,
                  }}
                />
                <div className="mt-2 text-xs text-muted-foreground">
                  {new Date(Date.now() - (6 - i) * 86400000).toLocaleDateString("ko-KR", {
                    weekday: "short",
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/tabs/profile-tab.tsx" isMerged="true"
"use client"

import { AchievementItem } from "@/components/achievement-item"

interface ProfileTabProps {
  achievements: Record<string, boolean>
  streakDays: number
  themeMode: string
}

export function ProfileTab({ achievements, streakDays, themeMode }: ProfileTabProps) {
  return (
    <div className="rounded-xl bg-card p-6 shadow-md">
      <h3 className="mb-4 text-lg font-semibold text-primary">나의 업적</h3>
      <div className="grid gap-3 md:grid-cols-2">
        <AchievementItem
          name="버블 마스터"
          description="버블 100개 터뜨리기"
          unlocked={achievements["bubbles-100"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="호흡 달인"
          description="호흡 운동 5분 완료"
          unlocked={achievements["breathing-5min"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="예술가"
          description="그림 5개 완성하기"
          unlocked={achievements["drawing-5"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="물결 명상가"
          description="물결 100번 만들기"
          unlocked={achievements["water-100"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="스피너 마스터"
          description="스피너 10번 회전시키기"
          unlocked={achievements["spinner-10"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="사운드 여행자"
          description="모든 사운드 듣기"
          unlocked={achievements["sound-all"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="명상 마스터"
          description="명상 10분 완료"
          unlocked={achievements["meditation-10min"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="기분 추적기"
          description="7일 연속 기분 기록"
          unlocked={achievements["mood-7days"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="집중의 달인"
          description="포모도로 5회 완료"
          unlocked={achievements["focus-5"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="저널 작가"
          description="7일 연속 일기 작성"
          unlocked={achievements["journal-7days"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="꾸준함의 달인"
          description="7일 연속 앱 사용"
          unlocked={streakDays >= 7}
          themeMode={themeMode}
        />
        <AchievementItem
          name="테마 탐험가"
          description="모든 테마 사용해보기"
          unlocked={achievements["theme-explorer"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="정원사"
          description="모래 정원 5개 만들기"
          unlocked={achievements["garden-5"]}
          themeMode={themeMode}
        />
        <AchievementItem
          name="물 마술사"
          description="완벽하게 물 따르기 5회 성공"
          unlocked={achievements["water-perfect-5"]}
          themeMode={themeMode}
        />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/activity-renderer.tsx" isMerged="true"
"use client"

import { activities } from "@/data/activities"
import { Home } from "lucide-react"
import { Button } from "@/components/ui/button"
import BubbleWrap from "@/components/bubble-wrap"
import BreathingExercise from "@/components/breathing-exercise"
import DrawingPad from "@/components/drawing-pad"
import WaterRipple from "@/components/water-ripple"
import FidgetSpinner from "@/components/fidget-spinner"
import SoundScape from "@/components/sound-scape"
import GuidedMeditation from "@/components/guided-meditation"
import MoodTracker from "@/components/mood-tracker"
import FocusMode from "@/components/focus-mode"
import Journaling from "@/components/journaling"
import SandGarden from "@/components/sand-garden"
import WaterPouring from "@/components/water-pouring"
import { triggerHapticFeedback } from "@/utils/theme-utils"

interface ActivityRendererProps {
  currentActivity: string | null
  setCurrentActivity: (id: string | null) => void
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  unlockAchievement: (id: string, name: string) => void
}

export function ActivityRenderer({
  currentActivity,
  setCurrentActivity,
  themeMode,
  themeColor,
  isSoundOn,
  unlockAchievement,
}: ActivityRendererProps) {
  if (!currentActivity) return null

return (
    <div className="rounded-xl bg-card p-6 shadow-lg transition-all duration-300">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-xl font-semibold text-primary">
          {activities.find((a) => a.id === currentActivity)?.title}
        </h2>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => {
            setCurrentActivity(null)
            triggerHapticFeedback("medium")
          }}
          className="rounded-full hover:bg-primary/10 active:scale-95 transition-transform duration-150"
        >
          <Home className="h-5 w-5" />
        </Button>
      </div>

{currentActivity === "bubbles" && (
        <BubbleWrap
          themeMode={themeMode}
          themeColor={themeColor}
          isSoundOn={isSoundOn}
          onAchievement={unlockAchievement}
        />
      )}
      {currentActivity === "breathing" && (
        <BreathingExercise themeMode={themeMode} themeColor={themeColor} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "drawing" && (
        <DrawingPad isDarkMode={themeMode !== "light"} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "water" && (
        <WaterRipple isDarkMode={themeMode !== "light"} isSoundOn={isSoundOn} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "spinner" && (
        <FidgetSpinner isDarkMode={themeMode !== "light"} isSoundOn={isSoundOn} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "soundscape" && (
        <SoundScape themeMode={themeMode} themeColor={themeColor} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "meditation" && (
        <GuidedMeditation
          themeMode={themeMode}
          themeColor={themeColor}
          isSoundOn={isSoundOn}
          onAchievement={unlockAchievement}
        />
      )}
      {currentActivity === "mood" && (
        <MoodTracker themeMode={themeMode} themeColor={themeColor} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "focus" && (
        <FocusMode
          themeMode={themeMode}
          themeColor={themeColor}
          isSoundOn={isSoundOn}
          onAchievement={unlockAchievement}
        />
      )}
      {currentActivity === "journal" && (
        <Journaling themeMode={themeMode} themeColor={themeColor} onAchievement={unlockAchievement} />
      )}
      {currentActivity === "sand-garden" && (
        <SandGarden
          themeMode={themeMode}
          themeColor={themeColor}
          isSoundOn={isSoundOn}
          onAchievement={unlockAchievement}
        />
      )}
      {currentActivity === "water-pouring" && (
        <WaterPouring
          themeMode={themeMode}
          themeColor={themeColor}
          isSoundOn={isSoundOn}
          onAchievement={unlockAchievement}
        />
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/app-header.tsx" isMerged="true"
"use client"

import { Award, Volume2, VolumeX, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { triggerHapticFeedback } from "@/utils/theme-utils"

interface AppHeaderProps {
  streakDays: number
  isSoundOn: boolean
  setIsSoundOn: (value: boolean) => void
  setShowSettings: (value: boolean) => void
}

export function AppHeader({ streakDays, isSoundOn, setIsSoundOn, setShowSettings }: AppHeaderProps) {
  return (
    <header className="mb-6 flex items-center justify-between">
      <div className="flex items-center gap-3">
        <div className="relative">
          <div className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
            {streakDays}
          </div>
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
            <Award className="h-6 w-6" />
          </div>
        </div>
        <h1 className="text-2xl font-bold text-primary">안티스트레스</h1>
      </div>
      <div className="flex gap-2">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => {
            setIsSoundOn(!isSoundOn)
            triggerHapticFeedback("light")
          }}
          className="rounded-full hover:bg-primary/10 active:scale-95 transition-transform duration-150"
        >
          {isSoundOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
        </Button>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => {
            setShowSettings(true)
            triggerHapticFeedback("light")
          }}
          className="rounded-full hover:bg-primary/10 active:scale-95 transition-transform duration-150"
        >
          <Settings className="h-5 w-5" />
        </Button>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="utils/water-pouring-types.ts" isMerged="true"
// 유리잔 타입 정의
export type Glass = {
  id: number
  name: string
  capacity: number
  fillRate: number
  overflowThreshold: number
  difficulty: "easy" | "medium" | "hard"
}

// 게임 상태 타입
export type GameState = "ready" | "pouring" | "success" | "failed"

// 물방울 타입
export type WaterDrop = {
  x: number
  y: number
  size: number
  speed: number
  opacity: number
}

// 유리잔 데이터
export const GLASSES: Glass[] = [
  { id: 1, name: "와인 글라스", capacity: 80, fillRate: 0.8, overflowThreshold: 90, difficulty: "easy" },
  { id: 2, name: "칵테일 글라스", capacity: 70, fillRate: 1.0, overflowThreshold: 85, difficulty: "medium" },
  { id: 3, name: "샴페인 글라스", capacity: 60, fillRate: 1.2, overflowThreshold: 80, difficulty: "hard" },
]

[V0_FILE]typescriptreact:file="utils/water-pouring-utils.ts" isMerged="true"
import type React from "react"
import type { Glass, WaterDrop } from "./water-pouring-types"

// 물 높이 계산
export function calculateWaterY(glassId: number, waterPercent: number, bottomY: number, glassHeight: number): number {
  if (glassId === 1) {
    // 와인 글라스
    return bottomY - glassHeight * 0.4 - glassHeight * 0.6 * waterPercent
  } else if (glassId === 2) {
    // 칵테일 글라스
    return bottomY - glassHeight * 0.3 - glassHeight * 0.7 * waterPercent
  } else {
    // 샴페인 글라스
    return bottomY - glassHeight * 0.6 - glassHeight * 0.4 * waterPercent
  }
}

// 물 너비 계산
export function calculateWaterWidth(glassId: number, waterPercent: number, glassWidth: number): number {
  if (glassId === 1) {
    // 와인 글라스
    return glassWidth * Math.sin((Math.PI * waterPercent) / 2)
  } else if (glassId === 2) {
    // 칵테일 글라스
    return glassWidth * waterPercent
  } else {
    // 샴페인 글라스
    const stemWidth = glassWidth * 0.1
    const bowlWidth = glassWidth * 0.35
    return stemWidth + (bowlWidth - stemWidth) * waterPercent
  }
}

// 유리잔 그리기
export function drawGlass(
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  glassId: number,
  showGuide: boolean,
  capacity: number,
  themeMode: string,
  themeColor: string,
): void {
  const centerX = width / 2
  const glassHeight = height * 0.7
  const glassWidth = width * 0.5
  const bottomY = height * 0.85

// 유리잔 종류에 따라 다른 모양 그리기 (간소화)
  ctx.save()

// 그림자
  ctx.fillStyle = "rgba(0, 0, 0, 0.1)"
  ctx.beginPath()
  ctx.ellipse(centerX, bottomY + 5, glassWidth * 0.2, glassWidth * 0.05, 0, 0, Math.PI * 2)
  ctx.fill()

// 받침
  ctx.fillStyle = themeMode === "dark" ? "#444" : themeMode === "black" ? "#333" : "#ddd"
  ctx.beginPath()
  ctx.ellipse(centerX, bottomY, glassWidth * 0.2, glassWidth * 0.05, 0, 0, Math.PI * 2)
  ctx.fill()

// 기둥
  const stemWidth = glassWidth * 0.1
  ctx.beginPath()
  ctx.moveTo(centerX - stemWidth / 2, bottomY)
  ctx.lineTo(centerX - stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.lineTo(centerX + stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.lineTo(centerX + stemWidth / 2, bottomY)
  ctx.fill()

// 유리 부분 (간소화)
  ctx.strokeStyle = themeMode === "dark" ? "#666" : themeMode === "black" ? "#555" : "#ccc"
  ctx.lineWidth = 2

if (glassId === 1) {
    // 와인 글라스
    ctx.beginPath()
    ctx.moveTo(centerX - glassWidth / 2, bottomY - glassHeight * 0.4)
    ctx.quadraticCurveTo(
      centerX,
      bottomY - glassHeight * 0.4 - glassHeight * 0.3,
      centerX + glassWidth / 2,
      bottomY - glassHeight * 0.4,
    )
    ctx.stroke()
  } else if (glassId === 2) {
    // 칵테일 글라스
    ctx.beginPath()
    ctx.moveTo(centerX - stemWidth / 2, bottomY - glassHeight * 0.3)
    ctx.lineTo(centerX - glassWidth / 2, bottomY - glassHeight)
    ctx.lineTo(centerX + glassWidth / 2, bottomY - glassHeight)
    ctx.lineTo(centerX + stemWidth / 2, bottomY - glassHeight * 0.3)
    ctx.stroke()
  } else {
    // 샴페인 글라스
    ctx.beginPath()
    ctx.moveTo(centerX - glassWidth * 0.35, bottomY - glassHeight)
    ctx.lineTo(centerX - stemWidth / 2, bottomY - glassHeight * 0.6)
    ctx.lineTo(centerX + stemWidth / 2, bottomY - glassHeight * 0.6)
    ctx.lineTo(centerX + glassWidth * 0.35, bottomY - glassHeight)
    ctx.stroke()
  }

// 목표 수위 표시
  if (showGuide) {
    const targetY = calculateWaterY(glassId, capacity / 100, bottomY, glassHeight)
    const targetWidth = calculateWaterWidth(glassId, capacity / 100, glassWidth)

ctx.strokeStyle = `rgba(${
      themeColor === "blue"
        ? "59, 130, 246"
        : themeColor === "purple"
          ? "139, 92, 246"
          : themeColor === "green"
            ? "34, 197, 94"
            : "245, 158, 11"
    }, 0.5)`
    ctx.setLineDash([5, 3])
    ctx.beginPath()
    ctx.moveTo(centerX - targetWidth / 2, targetY)
    ctx.lineTo(centerX + targetWidth / 2, targetY)
    ctx.stroke()
    ctx.setLineDash([])
  }

ctx.restore()
}

// 물 그리기
export function drawWater(
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  glassId: number,
  waterLevel: number,
  themeColor: string,
): void {
  if (waterLevel <= 0) return

const centerX = width / 2
  const glassHeight = height * 0.7
  const glassWidth = width * 0.5
  const bottomY = height * 0.85

const waterPercent = waterLevel / 100

ctx.save()

const waterColor = `rgba(${
    themeColor === "blue"
      ? "59, 130, 246"
      : themeColor === "purple"
        ? "139, 92, 246"
        : themeColor === "green"
          ? "34, 197, 94"
          : "245, 158, 11"
  }, 0.6)`

ctx.fillStyle = waterColor
  ctx.beginPath()

const waterY = calculateWaterY(glassId, waterPercent, bottomY, glassHeight)
  const waterWidth = calculateWaterWidth(glassId, waterPercent, glassWidth)
  const stemWidth = glassWidth * 0.1

// 물결 효과
  const time = Date.now() / 500
  const amplitude = Math.min(3, waterLevel / 20)

ctx.moveTo(centerX - waterWidth / 2, waterY)
  for (let i = 0; i <= 10; i++) {
    const x = centerX - waterWidth / 2 + (waterWidth / 10) * i
    const y = waterY + amplitude * Math.sin(time + i * 0.5)
    ctx.lineTo(x, y)
  }

// 물 바닥
  ctx.lineTo(centerX + stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.lineTo(centerX - stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.closePath()

ctx.fill()
  ctx.restore()
}

// 물방울 생성
export function createWaterDrops(
  canvas: HTMLCanvasElement,
  glass: Glass,
  waterDropsRef: React.MutableRefObject<WaterDrop[]>,
): void {
  const centerX = canvas.width / 2
  const glassWidth = canvas.width * 0.5

// 물이 넘치는 위치 계산
  const waterY = calculateWaterY(glass.id, glass.overflowThreshold / 100, canvas.height * 0.85, canvas.height * 0.7)

// 새 물방울 추가
  for (let i = 0; i < 5; i++) {
    const dropX = centerX + (Math.random() - 0.5) * glassWidth

waterDropsRef.current.push({
      x: dropX,
      y: waterY,
      size: 1.5 + Math.random() * 3,
      speed: 1 + Math.random() * 3,
      opacity: 0.7 + Math.random() * 0.3,
    })
  }
}

// 물방울 업데이트
export function updateWaterDrops(waterDropsRef: React.MutableRefObject<WaterDrop[]>): void {
  waterDropsRef.current = waterDropsRef.current.filter((drop) => {
    drop.y += drop.speed
    drop.opacity -= 0.01
    return drop.opacity > 0
  })
}

// 물방울 그리기
export function drawWaterDrops(
  ctx: CanvasRenderingContext2D,
  waterDropsRef: React.MutableRefObject<WaterDrop[]>,
  themeColor: string,
): void {
  const waterColor = `rgba(${
    themeColor === "blue"
      ? "59, 130, 246"
      : themeColor === "purple"
        ? "139, 92, 246"
        : themeColor === "green"
          ? "34, 197, 94"
          : "245, 158, 11"
  }, `

waterDropsRef.current.forEach((drop) => {
    ctx.fillStyle = waterColor + drop.opacity + ")"
    ctx.beginPath()
    ctx.ellipse(drop.x, drop.y, drop.size, drop.size * 1.5, 0, 0, Math.PI * 2)
    ctx.fill()
  })
}

[V0_FILE]typescriptreact:file="hooks/use-water-pouring-state.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import type { GameState } from "@/utils/water-pouring-types"
import { GLASSES } from "@/utils/water-pouring-types"

export function useWaterPouringState(isSoundOn: boolean, onAchievement: (id: string, name: string) => void) {
  const [currentGlass, setCurrentGlass] = useState(0)
  const [waterLevel, setWaterLevel] = useState(0)
  const [isPouring, setIsPouring] = useState(false)
  const [isPerfect, setIsPerfect] = useState(false)
  const [isOverflowed, setIsOverflowed] = useState(false)
  const [score, setScore] = useState(0)
  const [perfectFills, setPerfectFills] = useState(0)
  const [gameState, setGameState] = useState<GameState>("ready")
  const [touchEnabled, setTouchEnabled] = useState(false)
  const [pourSpeed, setPourSpeed] = useState(1.0)
  const [showGuide, setShowGuide] = useState(true)

// 초기화
  useEffect(() => {
    if (typeof window === "undefined") return

setTouchEnabled("ontouchstart" in window)

// 로컬 스토리지에서 데이터 불러오기
    const savedScore = localStorage.getItem("water-pouring-score")
    if (savedScore) setScore(Number.parseInt(savedScore))

const savedPerfectFills = localStorage.getItem("water-pouring-perfect")
    if (savedPerfectFills) setPerfectFills(Number.parseInt(savedPerfectFills))

const savedPourSpeed = localStorage.getItem("water-pouring-speed")
    if (savedPourSpeed) setPourSpeed(Number.parseFloat(savedPourSpeed))

const savedShowGuide = localStorage.getItem("water-pouring-guide")
    if (savedShowGuide) setShowGuide(savedShowGuide === "true")

// 업적 체크
    if (perfectFills >= 5) onAchievement("water-perfect-5", "물 마술사")
  }, [perfectFills, onAchievement])

// 캔버스 초기화
  const initCanvas = () => {
    setWaterLevel(0)
    setIsPouring(false)
    setIsPerfect(false)
    setIsOverflowed(false)
    setGameState("ready")
  }

// 물 따르기 시작
  const startPouring = () => {
    if (gameState !== "ready" && gameState !== "pouring") return

setIsPouring(true)
    setGameState("pouring")

if (window.navigator.vibrate) window.navigator.vibrate(10)
  }

// 물 따르기 중지
  const stopPouring = () => {
    setIsPouring(false)
  }

// 다음 유리잔으로 변경
  const nextGlass = () => {
    setCurrentGlass((prev) => (prev + 1) % GLASSES.length)
    initCanvas()
  }

// 이전 유리잔으로 변경
  const prevGlass = () => {
    setCurrentGlass((prev) => (prev - 1 + GLASSES.length) % GLASSES.length)
    initCanvas()
  }

// 다시 시작
  const restart = () => {
    initCanvas()
  }

return {
    currentGlass,
    waterLevel,
    setWaterLevel,
    isPouring,
    setIsPouring,
    isPerfect,
    setIsPerfect,
    isOverflowed,
    setIsOverflowed,
    score,
    setScore,
    perfectFills,
    setPerfectFills,
    gameState,
    setGameState,
    touchEnabled,
    pourSpeed,
    setPourSpeed,
    showGuide,
    setShowGuide,
    glasses: GLASSES,
    startPouring,
    stopPouring,
    nextGlass,
    prevGlass,
    restart,
    initCanvas,
  }
}

[V0_FILE]typescriptreact:file="hooks/use-water-pouring-audio.ts" isMerged="true"
"use client"

import { useRef, useEffect } from "react"

export function useWaterPouringAudio(isSoundOn: boolean) {
  const pourSoundRef = useRef<HTMLAudioElement | null>(null)
  const successSoundRef = useRef<HTMLAudioElement | null>(null)
  const failSoundRef = useRef<HTMLAudioElement | null>(null)

// 오디오 초기화
  useEffect(() => {
    // 오디오 객체 생성
    pourSoundRef.current = new Audio("/sounds/water-pour.mp3")
    pourSoundRef.current.volume = 0.3
    pourSoundRef.current.loop = true

successSoundRef.current = new Audio("/sounds/success.mp3")
    successSoundRef.current.volume = 0.4

failSoundRef.current = new Audio("/sounds/fail.mp3")
    failSoundRef.current.volume = 0.4

return () => {
      if (pourSoundRef.current) pourSoundRef.current.pause()
    }
  }, [])

// 물 따르기 소리 재생
  const playPourSound = () => {
    if (isSoundOn && pourSoundRef.current) {
      pourSoundRef.current.currentTime = 0
      pourSoundRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

// 물 따르기 소리 중지
  const stopPourSound = () => {
    if (pourSoundRef.current) pourSoundRef.current.pause()
  }

// 성공 소리 재생
  const playSuccessSound = () => {
    if (isSoundOn && successSoundRef.current) {
      pourSoundRef.current?.pause()
      successSoundRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

// 실패 소리 재생
  const playFailSound = () => {
    if (isSoundOn && failSoundRef.current) {
      pourSoundRef.current?.pause()
      failSoundRef.current.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

return {
    playPourSound,
    stopPourSound,
    playSuccessSound,
    playFailSound,
  }
}

[V0_FILE]typescriptreact:file="hooks/use-water-pouring.ts" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useRef, useEffect } from "react"
import { useWaterPouringState } from "./use-water-pouring-state"
import { useWaterPouringAudio } from "./use-water-pouring-audio"
import { drawGlass, drawWater, createWaterDrops, updateWaterDrops, drawWaterDrops } from "@/utils/water-pouring-utils"
import type { WaterDrop } from "@/utils/water-pouring-types"

export function useWaterPouring(
  canvasRef: React.RefObject<HTMLCanvasElement>,
  themeMode: string,
  themeColor: string,
  isSoundOn: boolean,
  onAchievement: (id: string, name: string) => void,
) {
  // 상태 관리 훅 사용
  const state = useWaterPouringState(isSoundOn, onAchievement)

// 오디오 관리 훅 사용
  const audio = useWaterPouringAudio(isSoundOn)

// 애니메이션 및 물방울 참조
  const animationRef = useRef<number>(0)
  const waterDropsRef = useRef<WaterDrop[]>([])

// 캔버스 초기화 및 애니메이션
  useEffect(() => {
    if (typeof window === "undefined") return

const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// 유리잔 그리기
      drawGlass(
        ctx,
        canvas.width,
        canvas.height,
        state.glasses[state.currentGlass].id,
        state.showGuide,
        state.glasses[state.currentGlass].capacity,
        themeMode,
        themeColor,
      )

// 물 그리기
      drawWater(ctx, canvas.width, canvas.height, state.glasses[state.currentGlass].id, state.waterLevel, themeColor)

// 물방울 효과
      if (state.isOverflowed) {
        updateWaterDrops(waterDropsRef)
        drawWaterDrops(ctx, waterDropsRef, themeColor)
      }

// 물 따르기 로직
      if (state.isPouring && state.gameState === "pouring") {
        const glass = state.glasses[state.currentGlass]
        state.setWaterLevel((prev) => {
          const newLevel = prev + glass.fillRate * 0.2 * state.pourSpeed

// 넘침 체크
          if (newLevel >= glass.overflowThreshold && !state.isOverflowed) {
            state.setIsOverflowed(true)
            if (window.navigator.vibrate) window.navigator.vibrate([20, 50, 20])
            audio.playFailSound()
            state.setGameState("failed")
            createWaterDrops(canvas, glass, waterDropsRef)
          }

// 완벽 체크
          const perfectRange = glass.difficulty === "easy" ? 2 : glass.difficulty === "medium" ? 1.5 : 1

if (
            newLevel >= glass.capacity - perfectRange &&
            newLevel <= glass.capacity + perfectRange &&
            !state.isPerfect &&
            !state.isOverflowed
          ) {
            handlePerfectFill(glass)
          }

return newLevel
        })
      }

animationRef.current = requestAnimationFrame(animate)
    }

animate()

return () => cancelAnimationFrame(animationRef.current)
  }, [state.isPouring, state.isOverflowed, state.gameState, state.currentGlass, state.pourSpeed, themeMode, themeColor])

// 물 따르기 시작 시 소리 재생
  useEffect(() => {
    if (state.isPouring) {
      audio.playPourSound()
    } else {
      audio.stopPourSound()
    }
  }, [state.isPouring])

// 완벽한 물 따르기 처리
  const handlePerfectFill = (glass: { difficulty: string }) => {
    state.setIsPerfect(true)
    if (window.navigator.vibrate) window.navigator.vibrate([10, 30, 10, 30, 10])
    audio.playSuccessSound()

const newScore = state.score + (glass.difficulty === "easy" ? 1 : glass.difficulty === "medium" ? 2 : 3)
    state.setScore(newScore)
    localStorage.setItem("water-pouring-score", newScore.toString())

const newPerfectFills = state.perfectFills + 1
    state.setPerfectFills(newPerfectFills)
    localStorage.setItem("water-pouring-perfect", newPerfectFills.toString())

if (newPerfectFills >= 5) onAchievement("water-perfect-5", "물 마술사")

state.setGameState("success")
  }

// 상태와 메서드 반환
  return {
    ...state,
    waterDropsRef,
  }
}

[V0_FILE]typescriptreact:file="components/water-pouring.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef } from "react"
import { Trophy, Settings2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { cn } from "@/lib/utils"
import { useWaterPouring } from "@/hooks/use-water-pouring"
import { Switch } from "@/components/ui/switch"

interface WaterPouringProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

export default function WaterPouring({ themeMode, themeColor, isSoundOn, onAchievement }: WaterPouringProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [showSettings, setShowSettings] = useState(false)
  const [showTutorial, setShowTutorial] = useState(false)
  const [tutorialStep, setTutorialStep] = useState(0)
  const perfectZoneRef = useRef<HTMLDivElement>(null)

const {
    currentGlass,
    waterLevel,
    isPerfect,
    isOverflowed,
    isPouring,
    gameState,
    score,
    pourSpeed,
    setPourSpeed,
    showGuide,
    setShowGuide,
    touchEnabled,
    glasses,
    startPouring,
    stopPouring,
    nextGlass,
    prevGlass,
    restart,
    initCanvas,
  } = useWaterPouring(canvasRef, themeMode, themeColor, isSoundOn, onAchievement)

// 설정 저장
  const saveSettings = () => {
    localStorage.setItem("water-pouring-speed", pourSpeed.toString())
    localStorage.setItem("water-pouring-guide", showGuide.toString())
    setShowSettings(false)
  }

// 튜토리얼 완료
  const completeTutorial = () => {
    localStorage.setItem("water-pouring-tutorial-completed", "true")
    setShowTutorial(false)
  }

// 튜토리얼 단계 진행
  const nextTutorialStep = () => {
    if (tutorialStep < 3) {
      setTutorialStep(tutorialStep + 1)
    } else {
      completeTutorial()
    }
  }

// 튜토리얼 내용
  const tutorialInfo = [
    {
      title: "물 따르기 튜토리얼",
      content:
        "유리잔에 물을 정확하게 따라 채우는 게임입니다. 목표는 유리잔을 넘치지 않게 정확한 수위까지 채우는 것입니다.",
    },
    {
      title: "목표 수위",
      content: "각 유리잔마다 목표 수위가 점선으로 표시됩니다. 이 선까지 정확하게 물을 채워야 성공입니다.",
    },
    {
      title: "물 따르기",
      content:
        "화면 하단의 버튼을 길게 누르면 물이 따라지고, 손을 떼면 멈춥니다. 정확한 타이밍에 손을 떼는 것이 중요합니다.",
    },
    {
      title: "난이도",
      content: "유리잔마다 난이도가 다릅니다. 설정에서 물 따르는 속도를 조절할 수 있습니다. 준비되셨나요?",
    },
  ][tutorialStep]

return (
    <div className="flex flex-col">
      <div className="mb-4 flex justify-between items-center">
        <div>
          <h3 className="text-lg font-medium text-primary">유리잔에 물 따르기</h3>
          <p className="text-sm text-muted-foreground">
            {glasses[currentGlass].name} (
            {glasses[currentGlass].difficulty === "easy"
              ? "쉬움"
              : glasses[currentGlass].difficulty === "medium"
                ? "보통"
                : "어려움"}
            )
          </p>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1">
            <Trophy className="h-4 w-4 text-primary" />
            <span className="text-sm text-primary">{score}</span>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowSettings(true)}
            disabled={gameState === "pouring"}
            className="h-8 w-8 p-0 rounded-full"
          >
            <Settings2 className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="mb-4">
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">0%</span>
          <div className="flex items-center gap-1">
            <span className="text-primary font-medium">{glasses[currentGlass].capacity}%</span>
            {isPerfect && <span className="text-green-500">🎯</span>}
          </div>
          <span className="text-muted-foreground">100%</span>
        </div>
        <div className="relative mt-1 h-3 w-full overflow-hidden rounded-full bg-muted">
          <div
            className={cn(
              "h-full transition-all",
              isPerfect ? "bg-green-500" : isOverflowed ? "bg-red-500" : "bg-primary",
            )}
            style={{ width: `${Math.min(waterLevel, 100)}%` }}
          />
          <div
            ref={perfectZoneRef}
            className="absolute top-0 h-full border-l border-r border-primary/50"
            style={{
              left: `${
                glasses[currentGlass].capacity -
                (glasses[currentGlass].difficulty === "easy"
                  ? 2
                  : glasses[currentGlass].difficulty === "medium"
                    ? 1.5
                    : 1)
              }%`,
              width: `${
                glasses[currentGlass].difficulty === "easy" ? 4 : glasses[currentGlass].difficulty === "medium" ? 3 : 2
              }%`,
            }}
          />
        </div>
      </div>

{isPouring && (
          <div
            className="absolute top-0 left-1/2 -translate-x-1/2 w-1.5 bg-primary/80"
            style={{
              animation: "water-pour 0.5s linear infinite",
            }}
          />
        )}

{gameState === "success" && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm">
            <div className="rounded-lg bg-card p-4 text-center shadow-lg">
              <div className="mb-2 text-3xl">🎉</div>
              <h3 className="mb-1 text-lg font-medium text-green-500">완벽해요!</h3>
              <p className="mb-3 text-sm text-muted-foreground">정확하게 물을 따랐습니다</p>
              <Button onClick={restart}>다시 하기</Button>
            </div>
          </div>
        )}

{gameState === "failed" && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm">
            <div className="rounded-lg bg-card p-4 text-center shadow-lg">
              <div className="mb-2 text-3xl">💦</div>
              <h3 className="mb-1 text-lg font-medium text-destructive">넘쳤어요!</h3>
              <p className="mb-3 text-sm text-muted-foreground">더 조심스럽게 따라보세요</p>
              <Button onClick={restart}>다시 하기</Button>
            </div>
          </div>
        )}
      </div>

<button
        onPointerDown={startPouring}
        onPointerUp={stopPouring}
        onPointerLeave={stopPouring}
        onTouchStart={startPouring}
        onTouchEnd={stopPouring}
        disabled={gameState === "success" || gameState === "failed"}
        className={cn(
          "relative w-full py-4 rounded-xl text-center font-medium transition-all",
          gameState === "success" || gameState === "failed"
            ? "bg-muted text-muted-foreground cursor-not-allowed"
            : "bg-primary text-primary-foreground active:scale-95 cursor-pointer",
        )}
      >
        {gameState === "ready"
          ? "눌러서 물 따르기"
          : gameState === "pouring"
            ? "물 따르는 중..."
            : gameState === "success"
              ? "성공!"
              : "실패!"}

<span className="absolute bottom-1 left-0 right-0 text-xs opacity-70">
          {glasses[currentGlass].capacity}%까지 채우세요
        </span>
      </button>

{touchEnabled && (
        <div className="mt-4 p-3 rounded-lg bg-primary/5 text-xs text-muted-foreground">
          <p>💡 팁: 버튼을 길게 누르면 물이 계속 따라지고, 손을 떼면 멈춥니다. 정확한 타이밍에 손을 떼세요!</p>
        </div>
      )}

{showSettings && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-xl">
            <h3 className="mb-4 text-lg font-medium text-primary">설정</h3>
            <div className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium text-muted-foreground">물 따르는 속도</label>
                <div className="flex items-center gap-2">
                  <span className="text-xs">느리게</span>
                  <Slider
                    value={[pourSpeed * 100]}
                    min={50}
                    max={150}
                    step={10}
                    onValueChange={(value) => setPourSpeed(value[0] / 100)}
                    className="flex-1"
                  />
                  <span className="text-xs">빠르게</span>
                </div>
              </div>

<div className="pt-4 flex justify-end gap-2">
                <Button variant="outline" onClick={() => setShowSettings(false)}>
                  취소
                </Button>
                <Button onClick={saveSettings}>저장</Button>
              </div>
            </div>
          </div>
        </div>
      )}

{showTutorial && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-xl">
            <h3 className="mb-2 text-lg font-medium text-primary">{tutorialInfo.title}</h3>
            <p className="mb-6 text-muted-foreground">{tutorialInfo.content}</p>
            <div className="flex justify-end">
              <Button onClick={nextTutorialStep}>{tutorialStep < 3 ? "다음" : "시작하기"}</Button>
            </div>
          </div>
        </div>
      )}

[V0_FILE]typescriptreact:file="src/features/water-pouring/domain/entities/glass.ts"
// 도메인 엔티티 정의 (비즈니스 규칙)
export type GlassDifficulty = "easy" | "medium" | "hard"

export interface Glass {
  id: number
  name: string
  capacity: number
  fillRate: number
  overflowThreshold: number
  difficulty: GlassDifficulty
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/domain/entities/water-drop.ts"
// 물방울 엔티티 정의
export interface WaterDrop {
  x: number
  y: number
  size: number
  speed: number
  opacity: number
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/domain/value-objects/game-state.ts"
// 값 객체 정의
export type GameState = "ready" | "pouring" | "success" | "failed"

[V0_FILE]typescriptreact:file="src/features/water-pouring/application/use-cases/check-perfect-fill.ts"
import type { Glass } from "../../domain/entities/glass"

// 완벽한 물 따르기 체크 유스케이스
export function checkPerfectFill(waterLevel: number, glass: Glass): boolean {
  const perfectRange = glass.difficulty === "easy" ? 2 : glass.difficulty === "medium" ? 1.5 : 1

return waterLevel >= glass.capacity - perfectRange && waterLevel <= glass.capacity + perfectRange
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/application/use-cases/check-overflow.ts"
import type { Glass } from "../../domain/entities/glass"

// 물 넘침 체크 유스케이스
export function checkOverflow(waterLevel: number, glass: Glass): boolean {
  return waterLevel >= glass.overflowThreshold
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/infrastructure/services/haptic-feedback.ts"
// 햅틱 피드백 서비스
export function triggerHapticFeedback(pattern: number[]): void {
  if (typeof window !== "undefined" && window.navigator.vibrate) {
    window.navigator.vibrate(pattern)
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/infrastructure/services/audio-service.ts"
// 오디오 서비스
export class AudioService {
  private pourSound: HTMLAudioElement | null = null
  private successSound: HTMLAudioElement | null = null
  private failSound: HTMLAudioElement | null = null
  private isSoundEnabled = true

constructor(isSoundEnabled = true) {
    if (typeof window !== "undefined") {
      this.pourSound = new Audio("/sounds/water-pour.mp3")
      this.pourSound.volume = 0.3
      this.pourSound.loop = true

this.successSound = new Audio("/sounds/success.mp3")
      this.successSound.volume = 0.4

this.failSound = new Audio("/sounds/fail.mp3")
      this.failSound.volume = 0.4
    }

this.isSoundEnabled = isSoundEnabled
  }

playPourSound(): void {
    if (this.isSoundEnabled && this.pourSound) {
      this.pourSound.currentTime = 0
      this.pourSound.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

stopPourSound(): void {
    if (this.pourSound) {
      this.pourSound.pause()
    }
  }

playSuccessSound(): void {
    if (this.isSoundEnabled && this.successSound) {
      if (this.pourSound) this.pourSound.pause()
      this.successSound.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

playFailSound(): void {
    if (this.isSoundEnabled && this.failSound) {
      if (this.pourSound) this.pourSound.pause()
      this.failSound.play().catch((e) => console.error("오디오 재생 실패:", e))
    }
  }

setEnabled(enabled: boolean): void {
    this.isSoundEnabled = enabled
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/infrastructure/repositories/settings-repository.ts"
// 설정 저장소
export interface WaterPouringSettings {
  pourSpeed: number
  showGuide: boolean
  tutorialCompleted: boolean
}

export class SettingsRepository {
  private readonly POUR_SPEED_KEY = "water-pouring-speed"
  private readonly SHOW_GUIDE_KEY = "water-pouring-guide"
  private readonly TUTORIAL_KEY = "water-pouring-tutorial-completed"

getSettings(): WaterPouringSettings {
    if (typeof window === "undefined") {
      return {
        pourSpeed: 1.0,
        showGuide: true,
        tutorialCompleted: false,
      }
    }

return {
      pourSpeed: Number.parseFloat(localStorage.getItem(this.POUR_SPEED_KEY) || "1.0"),
      showGuide: localStorage.getItem(this.SHOW_GUIDE_KEY) !== "false",
      tutorialCompleted: localStorage.getItem(this.TUTORIAL_KEY) === "true",
    }
  }

saveSettings(settings: WaterPouringSettings): void {
    if (typeof window === "undefined") return

localStorage.setItem(this.POUR_SPEED_KEY, settings.pourSpeed.toString())
    localStorage.setItem(this.SHOW_GUIDE_KEY, settings.showGuide.toString())

if (settings.tutorialCompleted) {
      localStorage.setItem(this.TUTORIAL_KEY, "true")
    }
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/infrastructure/repositories/stats-repository.ts"
// 통계 저장소
export interface WaterPouringStats {
  score: number
  perfectFills: number
}

export class StatsRepository {
  private readonly SCORE_KEY = "water-pouring-score"
  private readonly PERFECT_FILLS_KEY = "water-pouring-perfect"

getStats(): WaterPouringStats {
    if (typeof window === "undefined") {
      return {
        score: 0,
        perfectFills: 0,
      }
    }

return {
      score: Number.parseInt(localStorage.getItem(this.SCORE_KEY) || "0", 10),
      perfectFills: Number.parseInt(localStorage.getItem(this.PERFECT_FILLS_KEY) || "0", 10),
    }
  }

saveStats(stats: WaterPouringStats): void {
    if (typeof window === "undefined") return

localStorage.setItem(this.SCORE_KEY, stats.score.toString())
    localStorage.setItem(this.PERFECT_FILLS_KEY, stats.perfectFills.toString())
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/hooks/use-water-pouring-state.ts"
"use client"

import { useState, useEffect } from "react"
import type { GameState } from "../../domain/value-objects/game-state"
import { GLASSES } from "../../domain/entities/glass"
import { StatsRepository } from "../../infrastructure/repositories/stats-repository"
import { SettingsRepository } from "../../infrastructure/repositories/settings-repository"

export function useWaterPouringState(onAchievement: (id: string, name: string) => void) {
  const [currentGlassIndex, setCurrentGlassIndex] = useState(0)
  const [waterLevel, setWaterLevel] = useState(0)
  const [isPouring, setIsPouring] = useState(false)
  const [isPerfect, setIsPerfect] = useState(false)
  const [isOverflowed, setIsOverflowed] = useState(false)
  const [gameState, setGameState] = useState<GameState>("ready")
  const [touchEnabled, setTouchEnabled] = useState(false)

// 저장소 인스턴스
  const statsRepository = new StatsRepository()
  const settingsRepository = new SettingsRepository()

// 상태 로드
  const [stats, setStats] = useState(statsRepository.getStats())
  const [settings, setSettings] = useState(settingsRepository.getSettings())

// 터치 디바이스 감지
  useEffect(() => {
    if (typeof window !== "undefined") {
      setTouchEnabled("ontouchstart" in window)
    }
  }, [])

// 업적 체크
  useEffect(() => {
    if (stats.perfectFills >= 5) {
      onAchievement("water-perfect-5", "물 마술사")
    }
  }, [stats.perfectFills, onAchievement])

// 캔버스 초기화
  const initCanvas = () => {
    setWaterLevel(0)
    setIsPouring(false)
    setIsPerfect(false)
    setIsOverflowed(false)
    setGameState("ready")
  }

// 물 따르기 시작
  const startPouring = () => {
    if (gameState !== "ready" && gameState !== "pouring") return

setIsPouring(true)
    setGameState("pouring")
  }

// 물 따르기 중지
  const stopPouring = () => {
    setIsPouring(false)
  }

// 다음 유리잔으로 변경
  const nextGlass = () => {
    setCurrentGlassIndex((prev) => (prev + 1) % GLASSES.length)
    initCanvas()
  }

// 이전 유리잔으로 변경
  const prevGlass = () => {
    setCurrentGlassIndex((prev) => (prev - 1 + GLASSES.length) % GLASSES.length)
    initCanvas()
  }

// 다시 시작
  const restart = () => {
    initCanvas()
  }

// 설정 업데이트
  const updateSettings = (newSettings: Partial<typeof settings>) => {
    const updatedSettings = { ...settings, ...newSettings }
    setSettings(updatedSettings)
    settingsRepository.saveSettings(updatedSettings)
  }

// 통계 업데이트
  const updateStats = (newStats: Partial<typeof stats>) => {
    const updatedStats = { ...stats, ...newStats }
    setStats(updatedStats)
    statsRepository.saveStats(updatedStats)
  }

return {
    currentGlass: GLASSES[currentGlassIndex],
    waterLevel,
    setWaterLevel,
    isPouring,
    setIsPouring,
    isPerfect,
    setIsPerfect,
    isOverflowed,
    setIsOverflowed,
    score: stats.score,
    perfectFills: stats.perfectFills,
    gameState,
    setGameState,
    touchEnabled,
    pourSpeed: settings.pourSpeed,
    showGuide: settings.showGuide,
    tutorialCompleted: settings.tutorialCompleted,
    glasses: GLASSES,
    startPouring,
    stopPouring,
    nextGlass,
    prevGlass,
    restart,
    initCanvas,
    updateSettings,
    updateStats,
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/hooks/use-water-pouring-canvas.ts"
"use client"

import type React from "react"

import { useRef, useEffect } from "react"
import type { WaterDrop } from "../../domain/entities/water-drop"
import type { Glass } from "../../domain/entities/glass"
import { checkPerfectFill } from "../../application/use-cases/check-perfect-fill"
import { checkOverflow } from "../../application/use-cases/check-overflow"
import { triggerHapticFeedback } from "../../infrastructure/services/haptic-feedback"
import { AudioService } from "../../infrastructure/services/audio-service"

// 물 높이 계산
function calculateWaterY(glassId: number, waterPercent: number, bottomY: number, glassHeight: number): number {
  if (glassId === 1) {
    // 와인 글라스
    return bottomY - glassHeight * 0.4 - glassHeight * 0.6 * waterPercent
  } else if (glassId === 2) {
    // 칵테일 글라스
    return bottomY - glassHeight * 0.3 - glassHeight * 0.7 * waterPercent
  } else {
    // 샴페인 글라스
    return bottomY - glassHeight * 0.6 - glassHeight * 0.4 * waterPercent
  }
}

// 물 너비 계산
function calculateWaterWidth(glassId: number, waterPercent: number, glassWidth: number): number {
  if (glassId === 1) {
    // 와인 글라스
    return glassWidth * Math.sin((Math.PI * waterPercent) / 2)
  } else if (glassId === 2) {
    // 칵테일 글라스
    return glassWidth * waterPercent
  } else {
    // 샴페인 글라스
    const stemWidth = glassWidth * 0.1
    const bowlWidth = glassWidth * 0.35
    return stemWidth + (bowlWidth - stemWidth) * waterPercent
  }
}

// 유리잔 그리기
function drawGlass(
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  glassId: number,
  showGuide: boolean,
  capacity: number,
  themeMode: string,
  themeColor: string,
): void {
  const centerX = width / 2
  const glassHeight = height * 0.7
  const glassWidth = width * 0.5
  const bottomY = height * 0.85

ctx.save()

// 그림자
  ctx.fillStyle = "rgba(0, 0, 0, 0.1)"
  ctx.beginPath()
  ctx.ellipse(centerX, bottomY + 5, glassWidth * 0.2, glassWidth * 0.05, 0, 0, Math.PI * 2)
  ctx.fill()

// 유리 부분 (간소화)
  ctx.strokeStyle = themeMode === "dark" ? "#666" : themeMode === "black" ? "#555" : "#ccc"
  ctx.lineWidth = 2

ctx.restore()
}

// 물 그리기
function drawWater(
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
  glassId: number,
  waterLevel: number,
  themeColor: string,
): void {
  if (waterLevel <= 0) return

const centerX = width / 2
  const glassHeight = height * 0.7
  const glassWidth = width * 0.5
  const bottomY = height * 0.85

const waterPercent = waterLevel / 100

ctx.save()

ctx.fillStyle = waterColor
  ctx.beginPath()

const waterY = calculateWaterY(glassId, waterPercent, bottomY, glassHeight)
  const waterWidth = calculateWaterWidth(glassId, waterPercent, glassWidth)
  const stemWidth = glassWidth * 0.1

// 물결 효과
  const time = Date.now() / 500
  const amplitude = Math.min(3, waterLevel / 20)

// 물 바닥
  ctx.lineTo(centerX + stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.lineTo(centerX - stemWidth / 2, bottomY - glassHeight * 0.4)
  ctx.closePath()

ctx.fill()
  ctx.restore()
}

// 물방울 생성
function createWaterDrops(
  canvas: HTMLCanvasElement,
  glass: Glass,
  waterDropsRef: React.MutableRefObject<WaterDrop[]>,
): void {
  const centerX = canvas.width / 2
  const glassWidth = canvas.width * 0.5

// 물이 넘치는 위치 계산
  const waterY = calculateWaterY(glass.id, glass.overflowThreshold / 100, canvas.height * 0.85, canvas.height * 0.7)

// 새 물방울 추가
  for (let i = 0; i < 5; i++) {
    const dropX = centerX + (Math.random() - 0.5) * glassWidth

waterDropsRef.current.push({
      x: dropX,
      y: waterY,
      size: 1.5 + Math.random() * 3,
      speed: 1 + Math.random() * 3,
      opacity: 0.7 + Math.random() * 0.3,
    })
  }
}

// 물방울 업데이트
function updateWaterDrops(waterDropsRef: React.MutableRefObject<WaterDrop[]>): void {
  waterDropsRef.current = waterDropsRef.current.filter((drop) => {
    drop.y += drop.speed
    drop.opacity -= 0.01
    return drop.opacity > 0
  })
}

// 물방울 그리기
function drawWaterDrops(
  ctx: CanvasRenderingContext2D,
  waterDropsRef: React.MutableRefObject<WaterDrop[]>,
  themeColor: string,
): void {
  const waterColor = `rgba(${
    themeColor === "blue"
      ? "59, 130, 246"
      : themeColor === "purple"
        ? "139, 92, 246"
        : themeColor === "green"
          ? "34, 197, 94"
          : "245, 158, 11"
  }, `

export function useWaterPouringCanvas(
  canvasRef: React.RefObject<HTMLCanvasElement>,
  themeMode: string,
  themeColor: string,
  isSoundOn: boolean,
  onAchievement: (id: string, name: string) => void,
  state: ReturnType<typeof import("./use-water-pouring-state").useWaterPouringState>,
) {
  // 애니메이션 및 물방울 참조
  const animationRef = useRef<number>(0)
  const waterDropsRef = useRef<WaterDrop[]>([])

// 오디오 서비스 인스턴스
  const audioService = useRef(new AudioService(isSoundOn))

// 오디오 설정 업데이트
  useEffect(() => {
    audioService.current.setEnabled(isSoundOn)
  }, [isSoundOn])

// 캔버스 초기화 및 애니메이션
  useEffect(() => {
    if (typeof window === "undefined") return

const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// 유리잔 그리기
      drawGlass(
        ctx,
        canvas.width,
        canvas.height,
        state.currentGlass.id,
        state.showGuide,
        state.currentGlass.capacity,
        themeMode,
        themeColor,
      )

// 물 그리기
      drawWater(ctx, canvas.width, canvas.height, state.currentGlass.id, state.waterLevel, themeColor)

// 물방울 효과
      if (state.isOverflowed) {
        updateWaterDrops(waterDropsRef)
        drawWaterDrops(ctx, waterDropsRef, themeColor)
      }

// 물 따르기 로직
      if (state.isPouring && state.gameState === "pouring") {
        const glass = state.currentGlass
        state.setWaterLevel((prev) => {
          const newLevel = prev + glass.fillRate * 0.2 * state.pourSpeed

// 넘침 체크
          if (checkOverflow(newLevel, glass) && !state.isOverflowed) {
            state.setIsOverflowed(true)
            triggerHapticFeedback([20, 50, 20])
            audioService.current.playFailSound()
            state.setGameState("failed")
            createWaterDrops(canvas, glass, waterDropsRef)
          }

// 완벽 체크
          if (checkPerfectFill(newLevel, glass) && !state.isPerfect && !state.isOverflowed) {
            handlePerfectFill(glass)
          }

return newLevel
        })
      }

animationRef.current = requestAnimationFrame(animate)
    }

animate()

return () => cancelAnimationFrame(animationRef.current)
  }, [state.isPouring, state.isOverflowed, state.gameState, state.currentGlass, state.pourSpeed, themeMode, themeColor])

// 물 따르기 시작 시 소리 재생
  useEffect(() => {
    if (state.isPouring) {
      audioService.current.playPourSound()
    } else {
      audioService.current.stopPourSound()
    }
  }, [state.isPouring])

// 완벽한 물 따르기 처리
  const handlePerfectFill = (glass: Glass) => {
    state.setIsPerfect(true)
    triggerHapticFeedback([10, 30, 10, 30, 10])
    audioService.current.playSuccessSound()

const difficultyScore = glass.difficulty === "easy" ? 1 : glass.difficulty === "medium" ? 2 : 3
    const newScore = state.score + difficultyScore
    const newPerfectFills = state.perfectFills + 1

state.updateStats({
      score: newScore,
      perfectFills: newPerfectFills,
    })

if (newPerfectFills >= 5) {
      onAchievement("water-perfect-5", "물 마술사")
    }

state.setGameState("success")
  }

return {
    waterDropsRef,
  }
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/components/water-pouring-settings.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"

interface WaterPouringSettingsProps {
  pourSpeed: number
  showGuide: boolean
  onUpdateSettings: (settings: { pourSpeed?: number; showGuide?: boolean }) => void
  onClose: () => void
}

export function WaterPouringSettings({ pourSpeed, showGuide, onUpdateSettings, onClose }: WaterPouringSettingsProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-xl">
        <h3 className="mb-4 text-lg font-medium text-primary">설정</h3>
        <div className="space-y-4">
          <div className="space-y-2">
            <label className="text-sm font-medium text-muted-foreground">물 따르는 속도</label>
            <div className="flex items-center gap-2">
              <span className="text-xs">느리게</span>
              <Slider
                value={[pourSpeed * 100]}
                min={50}
                max={150}
                step={10}
                onValueChange={(value) => onUpdateSettings({ pourSpeed: value[0] / 100 })}
                className="flex-1"
              />
              <span className="text-xs">빠르게</span>
            </div>
          </div>

<div className="flex items-center justify-between">
            <label className="text-sm font-medium text-muted-foreground">목표 수위 가이드 표시</label>
            <Switch checked={showGuide} onCheckedChange={(checked) => onUpdateSettings({ showGuide: checked })} />
          </div>

<div className="pt-4 flex justify-end gap-2">
            <Button variant="outline" onClick={onClose}>
              취소
            </Button>
            <Button onClick={onClose}>저장</Button>
          </div>
        </div>
      </div>
    </div>
  )
}

// Switch 컴포넌트 - 재사용 가능한 컴포넌트로 분리
function Switch({ checked, onCheckedChange }: { checked: boolean; onCheckedChange: (checked: boolean) => void }) {
  return (
    <button
      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${checked ? "bg-primary" : "bg-muted"}`}
      onClick={() => onCheckedChange(!checked)}
    >
      <span
        className={`inline-block h-4 w-4 rounded-full bg-white transition-transform ${checked ? "translate-x-6" : "translate-x-1"}`}
      />
    </button>
  )
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/components/water-pouring-tutorial.tsx"
"use client"

import { Button } from "@/components/ui/button"

interface WaterPouringTutorialProps {
  step: number
  onNextStep: () => void
  onComplete: () => void
}

export function WaterPouringTutorial({ step, onNextStep, onComplete }: WaterPouringTutorialProps) {
  const tutorialInfo = [
    {
      title: "물 따르기 튜토리얼",
      content:
        "유리잔에 물을 정확하게 따라 채우는 게임입니다. 목표는 유리잔을 넘치지 않게 정확한 수위까지 채우는 것입니다.",
    },
    {
      title: "목표 수위",
      content: "각 유리잔마다 목표 수위가 점선으로 표시됩니다. 이 선까지 정확하게 물을 채워야 성공입니다.",
    },
    {
      title: "물 따르기",
      content:
        "화면 하단의 버튼을 길게 누르면 물이 따라지고, 손을 떼면 멈춥니다. 정확한 타이밍에 손을 떼는 것이 중요합니다.",
    },
    {
      title: "난이도",
      content: "유리잔마다 난이도가 다릅니다. 설정에서 물 따르는 속도를 조절할 수 있습니다. 준비되셨나요?",
    },
  ][step]

const isLastStep = step === 3

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-xl">
        <h3 className="mb-2 text-lg font-medium text-primary">{tutorialInfo.title}</h3>
        <p className="mb-6 text-muted-foreground">{tutorialInfo.content}</p>
        <div className="flex justify-end">
          <Button onClick={isLastStep ? onComplete : onNextStep}>{isLastStep ? "시작하기" : "다음"}</Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/components/water-pouring-result.tsx"
"use client"

import { Button } from "@/components/ui/button"

interface WaterPouringResultProps {
  isSuccess: boolean
  onRestart: () => void
}

export function WaterPouringResult({ isSuccess, onRestart }: WaterPouringResultProps) {
  return (
    <div className="absolute inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm">
      <div className="rounded-lg bg-card p-4 text-center shadow-lg">
        <div className="mb-2 text-3xl">{isSuccess ? "🎉" : "💦"}</div>
        <h3 className="mb-1 text-lg font-medium">
          {isSuccess ? (
            <span className="text-green-500">완벽해요!</span>
          ) : (
            <span className="text-destructive">넘쳤어요!</span>
          )}
        </h3>
        <p className="mb-3 text-sm text-muted-foreground">
          {isSuccess ? "정확하게 물을 따랐습니다" : "더 조심스럽게 따라보세요"}
        </p>
        <Button onClick={onRestart}>다시 하기</Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/presentation/components/water-pouring.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import { Trophy, Settings2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { useWaterPouringState } from "../hooks/use-water-pouring-state"
import { useWaterPouringCanvas } from "../hooks/use-water-pouring-canvas"
import { WaterPouringSettings } from "./water-pouring-settings"
import { WaterPouringTutorial } from "./water-pouring-tutorial"
import { WaterPouringResult } from "./water-pouring-result"

interface WaterPouringProps {
  themeMode: "light" | "dark" | "black"
  themeColor: "blue" | "purple" | "green" | "amber"
  isSoundOn: boolean
  onAchievement: (id: string, name: string) => void
}

// 상태 관리 훅 사용
  const state = useWaterPouringState(onAchievement)

// 캔버스 관리 훅 사용
  const { waterDropsRef } = useWaterPouringCanvas(canvasRef, themeMode, themeColor, isSoundOn, onAchievement, state)

// 튜토리얼 표시 여부 확인
  useEffect(() => {
    if (!state.tutorialCompleted) {
      setShowTutorial(true)
    }
  }, [state.tutorialCompleted])

// 튜토리얼 완료
  const completeTutorial = () => {
    state.updateSettings({ tutorialCompleted: true })
    setShowTutorial(false)
  }

// 튜토리얼 단계 진행
  const nextTutorialStep = () => {
    if (tutorialStep < 3) {
      setTutorialStep(tutorialStep + 1)
    } else {
      completeTutorial()
    }
  }

return (
    <div className="flex flex-col">
      <div className="mb-4 flex justify-between items-center">
        <div>
          <h3 className="text-lg font-medium text-primary">유리잔에 물 따르기</h3>
          <p className="text-sm text-muted-foreground">
            {state.currentGlass.name} (
            {state.currentGlass.difficulty === "easy"
              ? "쉬움"
              : state.currentGlass.difficulty === "medium"
                ? "보통"
                : "어려움"}
            )
          </p>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1">
            <Trophy className="h-4 w-4 text-primary" />
            <span className="text-sm text-primary">{state.score}</span>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowSettings(true)}
            disabled={state.gameState === "pouring"}
            className="h-8 w-8 p-0 rounded-full"
          >
            <Settings2 className="h-4 w-4" />
          </Button>
        </div>
      </div>

<div className="mb-4">
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">0%</span>
          <div className="flex items-center gap-1">
            <span className="text-primary font-medium">{state.currentGlass.capacity}%</span>
            {state.isPerfect && <span className="text-green-500">🎯</span>}
          </div>
          <span className="text-muted-foreground">100%</span>
        </div>
        <div className="relative mt-1 h-3 w-full overflow-hidden rounded-full bg-muted">
          <div
            className={cn(
              "h-full transition-all",
              state.isPerfect ? "bg-green-500" : state.isOverflowed ? "bg-red-500" : "bg-primary",
            )}
            style={{ width: `${Math.min(state.waterLevel, 100)}%` }}
          />
          <div
            ref={perfectZoneRef}
            className="absolute top-0 h-full border-l border-r border-primary/50"
            style={{
              left: `${
                state.currentGlass.capacity -
                (state.currentGlass.difficulty === "easy" ? 2 : state.currentGlass.difficulty === "medium" ? 1.5 : 1)
              }%`,
              width: `${
                state.currentGlass.difficulty === "easy" ? 4 : state.currentGlass.difficulty === "medium" ? 3 : 2
              }%`,
            }}
          />
        </div>
      </div>

{state.isPouring && (
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1.5 bg-primary/80 animate-water-pour" />
        )}

{(state.gameState === "success" || state.gameState === "failed") && (
          <WaterPouringResult isSuccess={state.gameState === "success"} onRestart={state.restart} />
        )}
      </div>

<button
        onPointerDown={state.startPouring}
        onPointerUp={state.stopPouring}
        onPointerLeave={state.stopPouring}
        onTouchStart={state.startPouring}
        onTouchEnd={state.stopPouring}
        disabled={state.gameState === "success" || state.gameState === "failed"}
        className={cn(
          "relative w-full py-4 rounded-xl text-center font-medium transition-all",
          state.gameState === "success" || state.gameState === "failed"
            ? "bg-muted text-muted-foreground cursor-not-allowed"
            : "bg-primary text-primary-foreground active:scale-95 cursor-pointer",
        )}
      >
        {state.gameState === "ready"
          ? "눌러서 물 따르기"
          : state.gameState === "pouring"
            ? "물 따르는 중..."
            : state.gameState === "success"
              ? "성공!"
              : "실패!"}

<span className="absolute bottom-1 left-0 right-0 text-xs opacity-70">
          {state.currentGlass.capacity}%까지 채우세요
        </span>
      </button>

{state.touchEnabled && (
        <div className="mt-4 p-3 rounded-lg bg-primary/5 text-xs text-muted-foreground">
          <p>💡 팁: 버튼을 길게 누르면 물이 계속 따라지고, 손을 떼면 멈춥니다. 정확한 타이밍에 손을 떼세요!</p>
        </div>
      )}

{showSettings && (
        <WaterPouringSettings
          pourSpeed={state.pourSpeed}
          showGuide={state.showGuide}
          onUpdateSettings={state.updateSettings}
          onClose={() => setShowSettings(false)}
        />
      )}

{showTutorial && (
        <WaterPouringTutorial step={tutorialStep} onNextStep={nextTutorialStep} onComplete={completeTutorial} />
      )}
    </div>
  )
}

[V0_FILE]css:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 9.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }

.black {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 0%;
    --popover-foreground: 0 0% 98%;

--primary: 217.2 91.2% 59.8%;
    --primary-foreground: 0 0% 0%;

--secondary: 0 0% 9%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 9%;
    --input: 0 0% 9%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    -webkit-tap-highlight-color: transparent; /* 모바일 탭 하이라이트 제거 */
    overscroll-behavior: none; /* 오버스크롤 바운스 효과 제거 */
  }

/* 모바일 터치 최적화 */
  button,
  a,
  [role="button"] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
  }

/* 모바일 선택 방지 */
  .no-select {
    -webkit-user-select: none;
    user-select: none;
  }
}

@keyframes confetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.animate-confetti {
  animation: confetti 3s ease-in-out forwards;
}

/* 터치 리플 효과 애니메이션 */
@keyframes touch-ripple {
  0% {
    transform: scale(0);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.touch-ripple {
  position: relative;
  overflow: hidden;
}

.touch-ripple::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.touch-ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* 스와이프 힌트 애니메이션 */
@keyframes swipe-hint {
  0% {
    transform: translateX(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(20px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
}

.swipe-hint {
  animation: swipe-hint 1.5s ease-in-out infinite;
}

@keyframes water-pour {
  0% {
    height: 0;
    opacity: 0;
  }
  10% {
    height: 30%;
    opacity: 0.8;
  }
  100% {
    height: 40%;
    opacity: 0.8;
  }
}
.animate-water-pour {
  animation: water-pour 0.5s linear infinite;
}

[V0_FILE]typescriptreact:file="src/features/water-pouring/__tests__/check-perfect-fill.test.ts" isFixed="true" isQuickEdit="true"
import { checkPerfectFill } from "../application/use-cases/check-perfect-fill"
import type { Glass } from "../domain/entities/glass"

describe("checkPerfectFill", () => {
  test("should return true when water level is within perfect range for easy difficulty", () => {
    const glass: Glass = {
      id: 1,
      name: "Test Glass",
      capacity: 80,
      fillRate: 1.0,
      overflowThreshold: 90,
      difficulty: "easy",
    }

// Perfect range for easy is ±2
    expect(checkPerfectFill(78, glass)).toBe(true)
    expect(checkPerfectFill(80, glass)).toBe(true)
    expect(checkPerfectFill(82, glass)).toBe(true)
  })

test("should return false when water level is outside perfect range for easy difficulty", () => {
    const glass: Glass = {
      id: 1,
      name: "Test Glass",
      capacity: 80,
      fillRate: 1.0,
      overflowThreshold: 90,
      difficulty: "easy",
    }

expect(checkPerfectFill(77.9, glass)).toBe(false)
    expect(checkPerfectFill(82.1, glass)).toBe(false)
  })

test("should return true when water level is within perfect range for medium difficulty", () => {
    const glass: Glass = {
      id: 2,
      name: "Test Glass",
      capacity: 70,
      fillRate: 1.0,
      overflowThreshold: 85,
      difficulty: "medium",
    }

// Perfect range for medium is ±1.5
    expect(checkPerfectFill(68.5, glass)).toBe(true)
    expect(checkPerfectFill(70, glass)).toBe(true)
    expect(checkPerfectFill(71.5, glass)).toBe(true)
  })

test("should return true when water level is within perfect range for hard difficulty", () => {
    const glass: Glass = {
      id: 3,
      name: "Test Glass",
      capacity: 60,
      fillRate: 1.0,
      overflowThreshold: 80,
      difficulty: "hard",
    }

// Perfect range for hard is ±1
    expect(checkPerfectFill(59, glass)).toBe(true)
    expect(checkPerfectFill(60, glass)).toBe(true)
    expect(checkPerfectFill(61, glass)).toBe(true)
  })
})

[V0_FILE]typescriptreact:file="src/features/water-pouring/__tests__/check-overflow.test.ts" isFixed="true" isQuickEdit="true"
import { checkOverflow } from "../application/use-cases/check-overflow"
import type { Glass } from "../domain/entities/glass"

describe("checkOverflow", () => {
  test("should return true when water level exceeds overflow threshold", () => {
    const glass: Glass = {
      id: 1,
      name: "Test Glass",
      capacity: 80,
      fillRate: 1.0,
      overflowThreshold: 90,
      difficulty: "easy",
    }

expect(checkOverflow(90, glass)).toBe(true)
    expect(checkOverflow(91, glass)).toBe(true)
  })

test("should return false when water level is below overflow threshold", () => {
    const glass: Glass = {
      id: 1,
      name: "Test Glass",
      capacity: 80,
      fillRate: 1.0,
      overflowThreshold: 90,
      difficulty: "easy",
    }

expect(checkOverflow(89.9, glass)).toBe(false)
    expect(checkOverflow(80, glass)).toBe(false)
    expect(checkOverflow(0, glass)).toBe(false)
  })
})
</article></body></html>

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bokeumeom

More Templates Like This