[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import MeditationAppClient from "@/components/meditation-app-client" export default function Home() { return } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="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]typescriptreact:file="components/app-header.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Calendar, ArrowLeft, Settings } from "lucide-react" import type { MeditationState } from "@/types/meditation" interface AppHeaderProps { meditationState: MeditationState goToMainScreen: () => void openCalendar: () => void openSettings: () => void } export default function AppHeader({ meditationState, goToMainScreen, openCalendar, openSettings }: AppHeaderProps) { return (

{meditationState !== "idle" && meditationState !== "active" && ( )}

마음숨

{meditationState === "idle" && (

)}

) } [V0_FILE]typescriptreact:file="components/idle-screen.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { useQuote } from "@/hooks/use-quote" interface IdleScreenProps { startMeditation: () => void } export default function IdleScreen({ startMeditation }: IdleScreenProps) { const { quote } = useQuote() return (

5분 호흡 명상

잠시 눈을 감고 호흡에 집중하세요. 스트레스가 사라지는 것을 느껴보세요.

{/* Quote of the day */}

오늘의 명언

"{quote}"

) } [V0_FILE]typescriptreact:file="components/meditation-screen.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Card } from "@/components/ui/card" import { formatTime } from "@/utils/format-time" interface MeditationScreenProps { breatheIn: boolean timeRemaining: number } export default function MeditationScreen({ breatheIn, timeRemaining }: MeditationScreenProps) { return ( {breatheIn ? "숨을 들이쉬세요" : "숨을 내쉬세요"}

{formatTime(timeRemaining)}

) } [V0_FILE]typescriptreact:file="components/completion-screen.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Share } from "lucide-react" interface CompletionScreenProps { startMeditation: () => void recordMood: () => void shareCompletion: () => void } export default function CompletionScreen({ startMeditation, recordMood, shareCompletion }: CompletionScreenProps) { return (

수고했어요!

5분의 명상이 끝났습니다. 마음이 조금 더 편안해지셨나요?

다시 할까요?

) } [V0_FILE]typescriptreact:file="components/mood-record-screen.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { MOOD_EMOJIS } from "@/constants/moods" interface MoodRecordScreenProps { selectedMood: string setSelectedMood: (mood: string) => void moodNote: string setMoodNote: (note: string) => void saveMood: () => void } export default function MoodRecordScreen({ selectedMood, setSelectedMood, moodNote, setMoodNote, saveMood, }: MoodRecordScreenProps) { return (

오늘의 기분은 어떤가요?

{MOOD_EMOJIS.map((emoji) => ( ))}

짧은 메모를 남겨보세요

setMoodNote(e.target.value)} placeholder="오늘 하루는 어땠나요?" className="bg-white/90" />

) } [V0_FILE]typescriptreact:file="components/calendar-dialog.tsx" isMerged="true" "use client" import { format } from "date-fns" import { ko } from "date-fns/locale" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import type { MoodRecord } from "@/types/meditation" interface CalendarDialogProps { open: boolean onOpenChange: (open: boolean) => void moodRecords: MoodRecord[] } export default function CalendarDialog({ open, onOpenChange, moodRecords }: CalendarDialogProps) { return ( ) } [V0_FILE]typescriptreact:file="hooks/use-meditation-state.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import type { MeditationState, MeditationDuration, BreathPattern, MeditationPurpose } from "@/types/meditation" import { getBreathingCycleDuration } from "@/utils/breathing-patterns" export function useMeditationState() { const [meditationState, setMeditationState] = useState("idle") const [meditationDuration, setMeditationDuration] = useState(5) const [breathePattern, setBreathPattern] = useState("normal") const [meditationPurpose, setMeditationPurpose] = useState("stress") const [timeRemaining, setTimeRemaining] = useState(300) // Default 5 minutes in seconds const [breatheIn, setBreatheIn] = useState(true) const [breathePhase, setBreathePhase] = useState("in") useEffect(() => { let timer: NodeJS.Timeout let breatheTimer: NodeJS.Timeout if (meditationState === "active") { // Timer for countdown timer = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { clearInterval(timer) setMeditationState("completed") return 0 } return prev - 1 }) }, 1000) // Get breathing cycle duration based on pattern const { inDuration, outDuration, holdDuration } = getBreathingCycleDuration(breathePattern) // Timer for breathing cycle if (breathePattern === "normal" || breathePattern === "coherent") { // Simple in-out pattern breatheTimer = setInterval( () => { setBreatheIn((prev) => !prev) }, breatheIn ? inDuration * 1000 : outDuration * 1000, ) } else if (breathePattern === "478") { // 4-7-8 pattern (in-hold-out) breatheTimer = setInterval( () => { setBreathePhase((prev) => { if (prev === "in") { setBreatheIn(false) return "hold" } else if (prev === "hold") { return "out" } else { setBreatheIn(true) return "in" } }) }, breathePhase === "in" ? 4000 : breathePhase === "hold" ? 7000 : 8000, ) } else if (breathePattern === "box") { // Box pattern (in-hold-out-hold) breatheTimer = setInterval(() => { setBreathePhase((prev) => { if (prev === "in") { setBreatheIn(true) return "in-hold" } else if (prev === "in-hold") { setBreatheIn(false) return "out" } else if (prev === "out") { return "out-hold" } else { setBreatheIn(true) return "in" } }) }, 4000) // Each phase is 4 seconds in box breathing } } return () => { clearInterval(timer) clearInterval(breatheTimer) } }, [meditationState, breatheIn, breathePhase, breathePattern]) const startMeditation = () => { setMeditationState("active") setTimeRemaining(meditationDuration * 60) // Convert minutes to seconds setBreatheIn(true) setBreathePhase("in") } return { meditationState, setMeditationState, timeRemaining, breatheIn, breathePattern, meditationDuration, meditationPurpose, startMeditation, setMeditationDuration, setBreathPattern, setMeditationPurpose, } } [V0_FILE]typescriptreact:file="hooks/use-mood-records.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { format } from "date-fns" import type { MoodRecord, MeditationState } from "@/types/meditation" import { saveMoodRecord } from "@/lib/actions" export function useMoodRecords(setMeditationState: (state: MeditationState) => void) { const [moodRecords, setMoodRecords] = useState([]) const [selectedMood, setSelectedMood] = useState("") const [moodNote, setMoodNote] = useState("") // Load mood records on initial render useEffect(() => { const fetchMoodRecords = async () => { try { const response = await fetch("/api/mood") const data = await response.json() if (data.moodRecords) { setMoodRecords(data.moodRecords) } } catch (error) { console.error("Failed to fetch mood records:", error) // Fallback to local storage if API fails const savedRecords = localStorage.getItem("moodRecords") if (savedRecords) { setMoodRecords(JSON.parse(savedRecords)) } } } fetchMoodRecords() }, []) // Save mood records to localStorage when they change useEffect(() => { localStorage.setItem("moodRecords", JSON.stringify(moodRecords)) }, [moodRecords]) const saveMood = async () => { if (selectedMood) { const today = new Date() const newRecord: MoodRecord = { date: format(today, "yyyy-MM-dd"), mood: selectedMood, note: moodNote, } try { // Try to save to API first await saveMoodRecord(newRecord) } catch (error) { console.error("Failed to save mood record to API:", error) // If API fails, just update local state } // Update local state regardless of API success setMoodRecords([...moodRecords, newRecord]) setSelectedMood("") setMoodNote("") setMeditationState("idle") } } return { moodRecords, selectedMood, setSelectedMood, moodNote, setMoodNote, saveMood, } } [V0_FILE]typescriptreact:file="hooks/use-quote.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { QUOTES } from "@/constants/quotes" export function useQuote() { const [quote, setQuote] = useState("") useEffect(() => { const randomIndex = Math.floor(Math.random() * QUOTES.length) setQuote(QUOTES[randomIndex]) }, []) return { quote } } [V0_FILE]typescriptreact:file="constants/quotes.ts" isEdit="true" isMerged="true" export const QUOTES = [ "당신이 가진 것에 감사하면, 더 많은 것을 갖게 될 것입니다.", "오늘 하루는 다시 오지 않는 선물입니다.", "지금 이 순간에 집중하세요. 모든 행복은 여기에 있습니다.", "깊은 호흡은 마음의 평화를 가져옵니다.", "당신의 생각이 당신의 세계를 만듭니다.", "작은 변화가 큰 차이를 만듭니다.", "자신을 사랑하는 것부터 시작하세요.", "마음의 평화가 가장 큰 부입니다.", "오늘 웃으면 내일도 웃을 수 있습니다.", "당신의 한계는 당신의 생각에서 시작됩니다.", ] [V0_FILE]typescriptreact:file="constants/moods.ts" isEdit="true" isMerged="true" export const MOOD_EMOJIS = ["😀", "🙂", "😔", "😠"] [V0_FILE]typescriptreact:file="utils/format-time.ts" isEdit="true" isMerged="true" export function formatTime(seconds: number) { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs < 10 ? "0" : ""}${secs}` } [V0_FILE]typescriptreact:file="components/pages/main-page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { useQuote } from "@/hooks/use-quote" interface MainPageProps { startMeditation: () => void openCalendar: () => void openSettings: () => void } export default function MainPage({ startMeditation, openCalendar, openSettings }: MainPageProps) { const { quote } = useQuote() return (

호흡 명상

잠시 눈을 감고 호흡에 집중하세요. 스트레스가 사라지는 것을 느껴보세요.

{/* Quote of the day */}

오늘의 명언

"{quote}"

) } [V0_FILE]typescriptreact:file="components/pages/meditation-page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Card } from "@/components/ui/card" import { formatTime } from "@/utils/format-time" import { useEffect, useRef } from "react" import type { BreathPattern, MeditationPurpose } from "@/types/meditation" import { getBreathingInstructions } from "@/utils/breathing-patterns" interface MeditationPageProps { breatheIn: boolean timeRemaining: number breathePattern: BreathPattern meditationPurpose: MeditationPurpose backgroundSound: string } export default function MeditationPage({ breatheIn, timeRemaining, breathePattern, meditationPurpose, backgroundSound, }: MeditationPageProps) { const audioRef = useRef(null) // Get breathing instructions based on the selected pattern const breathingInstructions = getBreathingInstructions(breathePattern, breatheIn) // Get purpose-specific message const getPurposeMessage = () => { switch (meditationPurpose) { case "stress": return "스트레스를 내려놓고 평온함을 느껴보세요." case "focus": return "호흡에 집중하며 마음을 맑게 정리해보세요." case "sleep": return "긴장을 풀고 편안한 상태로 이완해보세요." case "energy": return "깊은 호흡으로 에너지를 채워보세요." default: return "호흡에 집중하며 현재에 머물러보세요." } } // Play background sound useEffect(() => { if (backgroundSound !== "none") { audioRef.current = new Audio(`/sounds/${backgroundSound}.mp3`) audioRef.current.loop = true audioRef.current.volume = 0.5 audioRef.current.play().catch((e) => console.log("Audio play failed:", e)) return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } } }, [backgroundSound]) // Animation variants based on breathing pattern const getAnimationScale = () => { switch (breathePattern) { case "478": return breatheIn ? 1.5 : 1 case "box": return breatheIn ? 1.4 : 1 case "coherent": return breatheIn ? 1.6 : 1 default: return breatheIn ? 1.5 : 1 } } return (

{getPurposeMessage()}

{breathingInstructions}

{formatTime(timeRemaining)}

) } [V0_FILE]typescriptreact:file="components/pages/finish-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Share } from "lucide-react" interface FinishPageProps { startMeditation: () => void goToMoodCheck: () => void shareCompletion: () => void } export default function FinishPage({ startMeditation, goToMoodCheck, shareCompletion }: FinishPageProps) { return (

수고했어요!

5분의 명상이 끝났습니다. 마음이 조금 더 편안해지셨나요?

다시 할까요?

) } [V0_FILE]typescriptreact:file="components/pages/mood-check-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { MOOD_EMOJIS } from "@/constants/moods" interface MoodCheckPageProps { selectedMood: string setSelectedMood: (mood: string) => void moodNote: string setMoodNote: (note: string) => void saveMood: () => void } export default function MoodCheckPage({ selectedMood, setSelectedMood, moodNote, setMoodNote, saveMood, }: MoodCheckPageProps) { return (

오늘의 기분은 어떤가요?

{MOOD_EMOJIS.map((emoji) => ( ))}

짧은 메모를 남겨보세요

setMoodNote(e.target.value)} placeholder="오늘 하루는 어땠나요?" className="bg-white/90" />

) } [V0_FILE]typescriptreact:file="components/pages/calendar-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { format } from "date-fns" import { ko } from "date-fns/locale" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { MoodRecord } from "@/types/meditation" interface CalendarPageProps { moodRecords: MoodRecord[] goBack: () => void } export default function CalendarPage({ moodRecords, goBack }: CalendarPageProps) { // Group records by month const groupedRecords = moodRecords.reduce( (acc, record) => { const date = new Date(record.date) const monthYear = format(date, "yyyy년 MM월", { locale: ko }) if (!acc[monthYear]) { acc[monthYear] = [] } acc[monthYear].push(record) return acc }, {} as Record, ) return ( 명상 기록 달력 {moodRecords.length > 0 ? (

{Object.entries(groupedRecords).map(([monthYear, records]) => (

{monthYear}

{records.map((record, index) => (

{record.mood}

{format(new Date(record.date), "MM월 dd일 (eee)", { locale: ko })}

{record.note || "메모 없음"}

))}

) : (

아직 기록된 명상이 없습니다.

명상을 완료하고 기분을 기록해보세요.

)} ) } [V0_FILE]typescriptreact:file="components/pages/meditation-select-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { MEDITATION_DURATIONS, BREATHE_PATTERNS, MEDITATION_PURPOSES } from "@/constants/meditation" import type { BreathPattern, MeditationDuration, MeditationPurpose } from "@/types/meditation" import { Clock, Wind, Target } from "lucide-react" interface MeditationSelectPageProps { meditationDuration: MeditationDuration breathePattern: BreathPattern meditationPurpose: MeditationPurpose setMeditationDuration: (duration: MeditationDuration) => void setBreathPattern: (pattern: BreathPattern) => void setMeditationPurpose: (purpose: MeditationPurpose) => void startMeditation: () => void } export default function MeditationSelectPage({ meditationDuration, breathePattern, meditationPurpose, setMeditationDuration, setBreathPattern, setMeditationPurpose, startMeditation, }: MeditationSelectPageProps) { return (

명상 설정

명상 시간 호흡 패턴 명상 목적 ) } [V0_FILE]typescriptreact:file="components/pages/settings-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { THEMES, BACKGROUND_SOUNDS } from "@/constants/settings" import { Moon, Palette, Music } from "lucide-react" interface SettingsPageProps { theme: string isDarkMode: boolean backgroundSound: string setTheme: (theme: string) => void setIsDarkMode: (isDarkMode: boolean) => void setBackgroundSound: (sound: string) => void goBack: () => void } export default function SettingsPage({ theme, isDarkMode, backgroundSound, setTheme, setIsDarkMode, setBackgroundSound, goBack, }: SettingsPageProps) { return (

설정

다크 모드

다크 모드 사용

테마 색상

{THEMES.map((t) => (

setTheme(t.value)} /> ))}

배경 소리 ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, type ReactNode } from "react" import { THEMES } from "@/constants/settings" interface ThemeContextType { theme: string darkMode: boolean } const ThemeContext = createContext({ theme: "blue", darkMode: false, }) export const useTheme = () => useContext(ThemeContext) interface ThemeProviderProps { children: ReactNode theme: string darkMode: boolean } export function ThemeProvider({ children, theme, darkMode }: ThemeProviderProps) { // Find the selected theme const selectedTheme = THEMES.find((t) => t.value === theme) || THEMES[0] // Apply CSS variables for the theme const style = { "--primary": selectedTheme.hsl, "--primary-foreground": selectedTheme.foreground, } as React.CSSProperties return (

{children}

) } [V0_FILE]typescriptreact:file="constants/meditation.ts" isMerged="true" import type { MeditationDuration, BreathPattern, MeditationPurpose } from "@/types/meditation" export const MEDITATION_DURATIONS: MeditationDuration[] = [1, 3, 5, 10, 15, 20] export const BREATHE_PATTERNS: BreathPattern[] = [ "normal", // 4-4 breathing "478", // 4-7-8 breathing "box", // 4-4-4-4 box breathing "coherent", // 5-5 coherent breathing ] export const MEDITATION_PURPOSES: MeditationPurpose[] = [ "stress", // Stress reduction "focus", // Focus improvement "sleep", // Better sleep "energy", // Energy boost ] [V0_FILE]typescriptreact:file="constants/settings.ts" isMerged="true" export const THEMES = [ { value: "blue", label: "블루", color: "#0ea5e9", hsl: "200 100% 50%", foreground: "0 0% 100%", }, { value: "purple", label: "퍼플", color: "#a855f7", hsl: "270 95% 65%", foreground: "0 0% 100%", }, { value: "pink", label: "핑크", color: "#ec4899", hsl: "330 90% 60%", foreground: "0 0% 100%", }, { value: "green", label: "그린", color: "#22c55e", hsl: "140 70% 45%", foreground: "0 0% 100%", }, { value: "orange", label: "오렌지", color: "#f97316", hsl: "25 95% 53%", foreground: "0 0% 100%", }, ] export const BACKGROUND_SOUNDS = [ { value: "none", label: "없음" }, { value: "rain", label: "빗소리" }, { value: "waves", label: "파도소리" }, { value: "forest", label: "숲소리" }, { value: "whitenoise", label: "화이트 노이즈" }, ] [V0_FILE]typescriptreact:file="utils/breathing-patterns.ts" isMerged="true" import type { BreathPattern } from "@/types/meditation" export function getBreathingCycleDuration(pattern: BreathPattern) { switch (pattern) { case "normal": return { inDuration: 4, outDuration: 4, holdDuration: 0 } case "478": return { inDuration: 4, outDuration: 8, holdDuration: 7 } case "box": return { inDuration: 4, outDuration: 4, holdDuration: 4 } case "coherent": return { inDuration: 5, outDuration: 5, holdDuration: 0 } default: return { inDuration: 4, outDuration: 4, holdDuration: 0 } } } export function getBreathingInstructions(pattern: BreathPattern, breatheIn: boolean) { switch (pattern) { case "normal": return breatheIn ? "숨을 들이쉬세요" : "숨을 내쉬세요" case "478": return breatheIn ? "4초간 숨을 들이쉬세요" : "8초간 숨을 내쉬세요" case "box": return breatheIn ? "4초간 숨을 들이쉬세요" : "4초간 숨을 내쉬세요" case "coherent": return breatheIn ? "5초간 숨을 들이쉬세요" : "5초간 숨을 내쉬세요" default: return breatheIn ? "숨을 들이쉬세요" : "숨을 내쉬세요" } } [V0_FILE]typescriptreact:file="components/pages/meditation-select/meditation-select-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { MEDITATION_DURATIONS, BREATHE_PATTERNS, MEDITATION_PURPOSES } from "@/constants/meditation" import type { BreathPattern, MeditationDuration, MeditationPurpose } from "@/types/meditation" import { Clock, Wind, Target } from "lucide-react" interface MeditationSelectPageProps { meditationDuration: MeditationDuration breathePattern: BreathPattern meditationPurpose: MeditationPurpose setMeditationDuration: (duration: MeditationDuration) => void setBreathPattern: (pattern: BreathPattern) => void setMeditationPurpose: (purpose: MeditationPurpose) => void startMeditation: () => void } export default function MeditationSelectPage({ meditationDuration, breathePattern, meditationPurpose, setMeditationDuration, setBreathPattern, setMeditationPurpose, startMeditation, }: MeditationSelectPageProps) { return (

명상 설정

명상 시간 호흡 패턴 명상 목적 ) } [V0_FILE]typescriptreact:file="components/pages/meditation/meditation-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Card } from "@/components/ui/card" import { formatTime } from "@/utils/format-time" import { useEffect, useRef } from "react" import type { BreathPattern, MeditationPurpose } from "@/types/meditation" import { getBreathingInstructions } from "@/utils/breathing-patterns" import { BreathingAnimation } from "@/components/pages/meditation/breathing-animation" interface MeditationPageProps { breatheIn: boolean timeRemaining: number breathePattern: BreathPattern meditationPurpose: MeditationPurpose backgroundSound: string } export default function MeditationPage({ breatheIn, timeRemaining, breathePattern, meditationPurpose, backgroundSound, }: MeditationPageProps) { const audioRef = useRef(null) // Get breathing instructions based on the selected pattern const breathingInstructions = getBreathingInstructions(breathePattern, breatheIn) // Get purpose-specific message const getPurposeMessage = () => { switch (meditationPurpose) { case "stress": return "스트레스를 내려놓고 평온함을 느껴보세요." case "focus": return "호흡에 집중하며 마음을 맑게 정리해보세요." case "sleep": return "긴장을 풀고 편안한 상태로 이완해보세요." case "energy": return "깊은 호흡으로 에너지를 채워보세요." default: return "호흡에 집중하며 현재에 머물러보세요." } } // Play background sound useEffect(() => { if (backgroundSound !== "none") { audioRef.current = new Audio(`/sounds/${backgroundSound}.mp3`) audioRef.current.loop = true audioRef.current.volume = 0.5 audioRef.current.play().catch((e) => console.log("Audio play failed:", e)) return () => { if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } } }, [backgroundSound]) return (

{getPurposeMessage()}

{breathingInstructions}

{formatTime(timeRemaining)}

) } [V0_FILE]typescriptreact:file="components/pages/meditation/breathing-animation.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { BreathPattern } from "@/types/meditation" interface BreathingAnimationProps { breatheIn: boolean breathePattern: BreathPattern } export function BreathingAnimation({ breatheIn, breathePattern }: BreathingAnimationProps) { // Animation variants based on breathing pattern const getAnimationScale = () => { switch (breathePattern) { case "478": return breatheIn ? 1.5 : 1 case "box": return breatheIn ? 1.4 : 1 case "coherent": return breatheIn ? 1.6 : 1 default: return breatheIn ? 1.5 : 1 } } const animationDuration = breathePattern === "478" ? 4 : breathePattern === "coherent" ? 5 : 4 return ( ) } [V0_FILE]typescriptreact:file="components/pages/finish/finish-page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Share } from "lucide-react" interface FinishPageProps { startMeditation: () => void goToMoodCheck: () => void shareCompletion: () => void } export default function FinishPage({ startMeditation, goToMoodCheck, shareCompletion }: FinishPageProps) { return (

수고했어요!

명상이 끝났습니다. 마음이 조금 더 편안해지셨나요?

다시 할까요?

) } [V0_FILE]typescriptreact:file="components/pages/mood/mood-check-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { MOOD_EMOJIS } from "@/constants/moods" import { MoodSelector } from "@/components/pages/mood/mood-selector" interface MoodCheckPageProps { selectedMood: string setSelectedMood: (mood: string) => void moodNote: string setMoodNote: (note: string) => void saveMood: () => void } export default function MoodCheckPage({ selectedMood, setSelectedMood, moodNote, setMoodNote, saveMood, }: MoodCheckPageProps) { return (

오늘의 기분은 어떤가요?

짧은 메모를 남겨보세요

setMoodNote(e.target.value)} placeholder="오늘 하루는 어땠나요?" className="bg-card/90" />

) } [V0_FILE]typescriptreact:file="components/pages/mood/mood-selector.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" interface MoodSelectorProps { selectedMood: string setSelectedMood: (mood: string) => void moods: string[] } export function MoodSelector({ selectedMood, setSelectedMood, moods }: MoodSelectorProps) { return (

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

) } [V0_FILE]typescriptreact:file="components/pages/calendar/calendar-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { MoodRecord } from "@/types/meditation" import { MoodRecordList } from "@/components/pages/calendar/mood-record-list" interface CalendarPageProps { moodRecords: MoodRecord[] goBack: () => void } export default function CalendarPage({ moodRecords, goBack }: CalendarPageProps) { return ( 명상 기록 달력 ) } [V0_FILE]typescriptreact:file="components/pages/calendar/mood-record-list.tsx" isMerged="true" "use client" import { format } from "date-fns" import { ko } from "date-fns/locale" import type { MoodRecord } from "@/types/meditation" interface MoodRecordListProps { moodRecords: MoodRecord[] } export function MoodRecordList({ moodRecords }: MoodRecordListProps) { // Group records by month const groupedRecords = moodRecords.reduce( (acc, record) => { const date = new Date(record.date) const monthYear = format(date, "yyyy년 MM월", { locale: ko }) if (!acc[monthYear]) { acc[monthYear] = [] } acc[monthYear].push(record) return acc }, {} as Record, ) if (moodRecords.length === 0) { return (

아직 기록된 명상이 없습니다.

명상을 완료하고 기분을 기록해보세요.

) } return (

{Object.entries(groupedRecords).map(([monthYear, records]) => (

{monthYear}

{records.map((record, index) => (

{record.mood}

{format(new Date(record.date), "MM월 dd일 (eee)", { locale: ko })}

{record.note || "메모 없음"}

))}

) } [V0_FILE]typescriptreact:file="components/pages/settings/settings-page.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { THEMES, BACKGROUND_SOUNDS } from "@/constants/settings" import { Moon, Palette, Music } from "lucide-react" import { ThemeSelector } from "@/components/pages/settings/theme-selector" import { SoundSelector } from "@/components/pages/settings/sound-selector" interface SettingsPageProps { theme: string isDarkMode: boolean backgroundSound: string setTheme: (theme: string) => void setIsDarkMode: (isDarkMode: boolean) => void setBackgroundSound: (sound: string) => void goBack: () => void } export default function SettingsPage({ theme, isDarkMode, backgroundSound, setTheme, setIsDarkMode, setBackgroundSound, goBack, }: SettingsPageProps) { return (

설정

다크 모드

다크 모드 사용

테마 색상 배경 소리 ) } [V0_FILE]typescriptreact:file="components/pages/settings/theme-selector.tsx" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ThemeSelectorProps { theme: string setTheme: (theme: string) => void themes: Array<{ value: string label: string color: string }> } export function ThemeSelector({ theme, setTheme, themes }: ThemeSelectorProps) { return ( <>

{themes.map((t) => (

setTheme(t.value)} /> ))}

) } [V0_FILE]typescriptreact:file="components/pages/settings/sound-selector.tsx" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface SoundSelectorProps { backgroundSound: string setBackgroundSound: (sound: string) => void sounds: Array<{ value: string label: string }> } export function SoundSelector({ backgroundSound, setBackgroundSound, sounds }: SoundSelectorProps) { return ( ) } [V0_FILE]typescriptreact:file="app/api/mood/route.ts" isMerged="true" import { NextResponse } from "next/server" import type { MoodRecord } from "@/types/meditation" // This would typically connect to a database in a real application const moodRecords: MoodRecord[] = [] export async function GET() { return NextResponse.json({ moodRecords }) } export async function POST(request: Request) { const data = await request.json() if (!data.mood) { return NextResponse.json({ error: "Mood is required" }, { status: 400 }) } const newRecord: MoodRecord = { date: data.date || new Date().toISOString().split("T")[0], mood: data.mood, note: data.note || "", } moodRecords.push(newRecord) return NextResponse.json({ success: true, record: newRecord }) } [V0_FILE]typescriptreact:file="lib/actions.ts" isMerged="true" "use server" import type { MoodRecord } from "@/types/meditation" export async function saveMoodRecord(record: MoodRecord) { try { const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || ""}/api/mood`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(record), }) if (!response.ok) { throw new Error("Failed to save mood record") } return await response.json() } catch (error) { console.error("Error saving mood record:", error) throw error } } [V0_FILE]typescriptreact:file="components/pages/mood/emotion-slider.tsx" isEdit="true" isMerged="true" "use client" import { Slider } from "@/components/ui/slider" interface EmotionSliderProps { value: number onChange: (value: number) => void min: number max: number step: number emotionCategory: string } export function EmotionSlider({ value, onChange, min, max, step, emotionCategory }: EmotionSliderProps) { // Get color based on emotion category const getTrackColor = () => { switch (emotionCategory) { case "happy": return "bg-yellow-400 dark:bg-yellow-500" case "calm": return "bg-teal-400 dark:bg-teal-500" case "anxious": return "bg-orange-400 dark:bg-orange-500" case "sad": return "bg-blue-400 dark:bg-blue-500" default: return "bg-gray-400 dark:bg-gray-500" } } return (

약함 강함

onChange(values[0])} className={`${getTrackColor()}`} />

{Array.from({ length: max - min + 1 }, (_, i) => (

onChange(i + min)} > {i + min}

))}

) } [V0_FILE]typescriptreact:file="components/pages/mood/emotion-tags.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" interface EmotionTagsProps { selectedTags: string[] onTagSelect: (tag: string) => void } export function EmotionTags({ selectedTags, onTagSelect }: EmotionTagsProps) { const commonTags = ["감사", "성취", "휴식", "스트레스", "기대", "피곤", "활력", "집중", "산만", "평화"] return (

자주 쓰는 태그

{commonTags.map((tag) => ( onTagSelect(tag)} > #{tag} ))}

) } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" "use client" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="components/pages/settings/theme-preview.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

interface ThemePreviewProps {
  themes: Array<{
    value: string
    label: string
    color: string
  }>
  selectedTheme: string
  onSelectTheme: (theme: string) => void
  isDarkMode: boolean
}

export function ThemePreview({ themes, selectedTheme, onSelectTheme, isDarkMode }: ThemePreviewProps) {
  const [previewTheme, setPreviewTheme] = useState<string | null>(null)

// Show preview on hover, use selected theme otherwise
  const displayTheme = previewTheme || selectedTheme
  const currentTheme = themes.find((t) => t.value === displayTheme) || themes[0]

return (
    <div className="space-y-4">
      <div className="grid grid-cols-5 gap-2">
        {themes.map((theme) => (
          <motion.div
            key={theme.value}
            className={`w-full aspect-square rounded-full cursor-pointer border-2 ${selectedTheme === theme.value ? "border-ring" : "border-transparent"}`}
            style={{ backgroundColor: theme.color }}
            onClick={() => onSelectTheme(theme.value)}
            onHoverStart={() => setPreviewTheme(theme.value)}
            onHoverEnd={() => setPreviewTheme(null)}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.95 }}
          />
        ))}
      </div>

<Card className={`p-3 overflow-hidden ${isDarkMode ? "bg-gray-800" : "bg-white"}`}>
        <p className="text-xs text-center mb-2">테마 미리보기</p>
        <div className="flex justify-center space-x-2">
          <div className="w-8 h-8 rounded-full" style={{ backgroundColor: currentTheme.color }} />
          <Button
            className="text-xs py-1 h-8"
            style={{
              backgroundColor: currentTheme.color,
              color: isDarkMode ? "white" : "black",
            }}
          >
            버튼
          </Button>
        </div>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/settings/sound-mixer.tsx" isMerged="true"
"use client"

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

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

interface SoundMixerProps {
  sounds: {
    rain: number
    waves: number
    forest: number
    whitenoise: number
  }
  onChange: (sounds: {
    rain: number
    waves: number
    forest: number
    whitenoise: number
  }) => void
}

export function SoundMixer({ sounds, onChange }: SoundMixerProps) {
  const handleSoundChange = (sound: keyof typeof sounds, value: number) => {
    onChange({
      ...sounds,
      [sound]: value,
    })
  }

return (
    <div className="space-y-3">
      <div className="space-y-1">
        <div className="flex items-center justify-between">
          <span className="text-sm flex items-center">
            <span className="mr-1">🌧️</span> 빗소리
          </span>
          <span className="text-xs">{sounds.rain}%</span>
        </div>
        <Slider
          value={[sounds.rain]}
          min={0}
          max={100}
          step={1}
          onValueChange={(values) => handleSoundChange("rain", values[0])}
        />
      </div>

<div className="space-y-1">
        <div className="flex items-center justify-between">
          <span className="text-sm flex items-center">
            <span className="mr-1">🌊</span> 파도소리
          </span>
          <span className="text-xs">{sounds.waves}%</span>
        </div>
        <Slider
          value={[sounds.waves]}
          min={0}
          max={100}
          step={1}
          onValueChange={(values) => handleSoundChange("waves", values[0])}
        />
      </div>

<div className="space-y-1">
        <div className="flex items-center justify-between">
          <span className="text-sm flex items-center">
            <span className="mr-1">🌲</span> 숲소리
          </span>
          <span className="text-xs">{sounds.forest}%</span>
        </div>
        <Slider
          value={[sounds.forest]}
          min={0}
          max={100}
          step={1}
          onValueChange={(values) => handleSoundChange("forest", values[0])}
        />
      </div>

<div className="space-y-1">
        <div className="flex items-center justify-between">
          <span className="text-sm flex items-center">
            <span className="mr-1">📻</span> 화이트 노이즈
          </span>
          <span className="text-xs">{sounds.whitenoise}%</span>
        </div>
        <Slider
          value={[sounds.whitenoise]}
          min={0}
          max={100}
          step={1}
          onValueChange={(values) => handleSoundChange("whitenoise", values[0])}
        />
      </div>

<div className="mt-2 text-center">
        <Button
          variant="outline"
          size="sm"
          className="text-xs"
          onClick={() => {
            // Play a preview of the mixed sounds
            alert("소리 미리듣기 (실제 앱에서는 혼합된 소리가 재생됩니다)")
          }}
        >
          미리듣기
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescriptreact:file="components/pages/calendar/mood-trends-dashboard.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { format, subDays, eachDayOfInterval } from "date-fns"
import { ko } from "date-fns/locale"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { MoodRecord } from "@/types/meditation"
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend } from "recharts"

interface MoodTrendsDashboardProps {
  moodRecords: MoodRecord[]
}

export function MoodTrendsDashboard({ moodRecords }: MoodTrendsDashboardProps) {
  const [timeRange, setTimeRange] = useState<"week" | "month" | "year">("week")

// Get date range based on selected time range
  const getDateRange = () => {
    const today = new Date()
    switch (timeRange) {
      case "week":
        return eachDayOfInterval({ start: subDays(today, 6), end: today })
      case "month":
        return eachDayOfInterval({ start: subDays(today, 29), end: today })
      case "year":
        // For year, we'll just use the last 12 months
        return Array.from({ length: 12 }, (_, i) => {
          const date = new Date()
          date.setMonth(date.getMonth() - i)
          return date
        }).reverse()
    }
  }

// Map emoji to mood category and color
  const moodMap: Record<string, { category: string; color: string }> = {
    "😊": { category: "행복", color: "#FFD700" },
    "😀": { category: "행복", color: "#FFD700" },
    "🙂": { category: "평온", color: "#4682B4" },
    "😌": { category: "평온", color: "#4682B4" },
    "😔": { category: "슬픔", color: "#6A5ACD" },
    "😢": { category: "슬픔", color: "#6A5ACD" },
    "😠": { category: "화남", color: "#FF6347" },
    "😰": { category: "불안", color: "#FF8C00" },
  }

// Prepare data for charts
  const prepareChartData = () => {
    const dateRange = getDateRange()

// For bar chart - mood frequency over time
    const barData = dateRange.map((date) => {
      const dateStr = format(date, "yyyy-MM-dd")
      const dayMoods = moodRecords.filter((record) => record.date === dateStr)

// Get the dominant mood for the day
      let dominantMood = "😐" // neutral default
      if (dayMoods.length > 0) {
        dominantMood = dayMoods[0].mood
      }

return {
        date:
          timeRange === "year" ? format(date, "yyyy년 MM월", { locale: ko }) : format(date, "MM/dd", { locale: ko }),
        mood: dominantMood,
        category: moodMap[dominantMood]?.category || "중립",
        color: moodMap[dominantMood]?.color || "#A9A9A9",
        count: dayMoods.length,
      }
    })

// For pie chart - mood distribution
    const moodCounts: Record<string, number> = {}
    moodRecords.forEach((record) => {
      const category = moodMap[record.mood]?.category || "기타"
      moodCounts[category] = (moodCounts[category] || 0) + 1
    })

const pieData = Object.entries(moodCounts).map(([category, count]) => {
      const color = Object.values(moodMap).find((m) => m.category === category)?.color || "#A9A9A9"
      return { name: category, value: count, color }
    })

return { barData, pieData }
  }

const { barData, pieData } = prepareChartData()

// Calculate mood stats
  const calculateStats = () => {
    if (moodRecords.length === 0) return { topMood: "없음", moodCount: 0, streakDays: 0 }

// Count occurrences of each mood
    const moodCounts: Record<string, number> = {}
    moodRecords.forEach((record) => {
      const category = moodMap[record.mood]?.category || "기타"
      moodCounts[category] = (moodCounts[category] || 0) + 1
    })

// Find the most frequent mood
    const topMood = Object.entries(moodCounts).sort((a, b) => b[1] - a[1])[0][0]

// Calculate current streak
    const sortedDates = [...moodRecords]
      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
      .map((r) => r.date)

let streakDays = 1
    const today = format(new Date(), "yyyy-MM-dd")

// Check if there's a record for today
    if (sortedDates[0] !== today) {
      streakDays = 0
    } else {
      // Count consecutive days
      for (let i = 1; i < sortedDates.length; i++) {
        const currentDate = new Date(sortedDates[i - 1])
        const prevDate = new Date(sortedDates[i])

// Check if dates are consecutive
        const diffTime = currentDate.getTime() - prevDate.getTime()
        const diffDays = diffTime / (1000 * 60 * 60 * 24)

if (Math.round(diffDays) === 1) {
          streakDays++
        } else {
          break
        }
      }
    }

return {
      topMood,
      moodCount: moodRecords.length,
      streakDays,
    }
  }

const stats = calculateStats()

return (
    <div className="space-y-4">
      <Card className="bg-card/90">
        <CardHeader>
          <CardTitle className="text-lg text-foreground">감정 통계</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-4">
            <div className="text-center">
              <p className="text-sm text-muted-foreground">가장 많은 감정</p>
              <p className="text-xl font-medium mt-1">{stats.topMood}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">기록 횟수</p>
              <p className="text-xl font-medium mt-1">{stats.moodCount}회</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">연속 기록</p>
              <p className="text-xl font-medium mt-1">{stats.streakDays}일</p>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="bg-card/90">
        <CardHeader className="pb-2">
          <CardTitle className="text-lg text-foreground">감정 트렌드</CardTitle>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="week" onValueChange={(value) => setTimeRange(value as any)}>
            <TabsList className="grid grid-cols-3 mb-4">
              <TabsTrigger value="week">주간</TabsTrigger>
              <TabsTrigger value="month">월간</TabsTrigger>
              <TabsTrigger value="year">연간</TabsTrigger>
            </TabsList>

<TabsContent value="week" className="mt-0">
              <ResponsiveContainer width="100%" height={200}>
                <BarChart data={barData}>
                  <XAxis dataKey="date" fontSize={10} />
                  <YAxis fontSize={10} />
                  <Tooltip
                    content={({ active, payload }) => {
                      if (active && payload && payload.length) {
                        return (
                          <div className="bg-background p-2 border rounded shadow-sm">
                            <p className="text-sm">{payload[0].payload.date}</p>
                            <p className="text-sm flex items-center">
                              <span className="mr-1">{payload[0].payload.mood}</span>
                              <span>{payload[0].payload.category}</span>
                            </p>
                            <p className="text-sm">{payload[0].value}회 기록</p>
                          </div>
                        )
                      }
                      return null
                    }}
                  />
                  <Bar dataKey="count" name="기록 횟수">
                    {barData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </TabsContent>

<TabsContent value="month" className="mt-0">
              <ResponsiveContainer width="100%" height={200}>
                <BarChart data={barData}>
                  <XAxis dataKey="date" fontSize={10} />
                  <YAxis fontSize={10} />
                  <Tooltip />
                  <Bar dataKey="count" name="기록 횟수">
                    {barData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </TabsContent>

<TabsContent value="year" className="mt-0">
              <ResponsiveContainer width="100%" height={200}>
                <BarChart data={barData}>
                  <XAxis dataKey="date" fontSize={10} />
                  <YAxis fontSize={10} />
                  <Tooltip />
                  <Bar dataKey="count" name="기록 횟수">
                    {barData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

<Card className="bg-card/90">
        <CardHeader className="pb-2">
          <CardTitle className="text-lg text-foreground">감정 분포</CardTitle>
        </CardHeader>
        <CardContent>
          {pieData.length > 0 ? (
            <ResponsiveContainer width="100%" height={200}>
              <PieChart>
                <Pie
                  data={pieData}
                  cx="50%"
                  cy="50%"
                  outerRadius={60}
                  dataKey="value"
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                >
                  {pieData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Legend />
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          ) : (
            <p className="text-center py-10 text-muted-foreground">아직 충분한 데이터가 없습니다.</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/calendar/mood-calendar-heatmap.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { format, startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay } from "date-fns"
import { ko } from "date-fns/locale"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { MoodRecord } from "@/types/meditation"

interface MoodCalendarHeatmapProps {
  moodRecords: MoodRecord[]
  onSelectDay: (date: string, records: MoodRecord[]) => void
}

export function MoodCalendarHeatmap({ moodRecords, onSelectDay }: MoodCalendarHeatmapProps) {
  const [currentMonth, setCurrentMonth] = useState(new Date())

// Get days in current month
  const monthStart = startOfMonth(currentMonth)
  const monthEnd = endOfMonth(currentMonth)
  const monthDays = eachDayOfInterval({ start: monthStart, end: monthEnd })

// Get day of week for first day of month (0 = Sunday, 1 = Monday, etc.)
  const startDay = getDay(monthStart)

// Map emoji to color intensity
  const getMoodColor = (mood: string) => {
    switch (mood) {
      case "😊":
      case "😀":
        return "bg-yellow-400"
      case "🙂":
      case "😌":
        return "bg-blue-400"
      case "😔":
      case "😢":
        return "bg-indigo-400"
      case "😠":
        return "bg-red-400"
      case "😰":
        return "bg-orange-400"
      default:
        return "bg-gray-200"
    }
  }

// Get records for a specific day
  const getRecordsForDay = (date: Date) => {
    const dateStr = format(date, "yyyy-MM-dd")
    return moodRecords.filter((record) => record.date === dateStr)
  }

// Navigate to previous/next month
  const prevMonth = () => {
    const newMonth = new Date(currentMonth)
    newMonth.setMonth(newMonth.getMonth() - 1)
    setCurrentMonth(newMonth)
  }

const nextMonth = () => {
    const newMonth = new Date(currentMonth)
    newMonth.setMonth(newMonth.getMonth() + 1)
    setCurrentMonth(newMonth)
  }

// Day names
  const dayNames = ["일", "월", "화", "수", "목", "금", "토"]

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Button variant="ghost" size="icon" onClick={prevMonth}>
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <h3 className="font-medium">{format(currentMonth, "yyyy년 MM월", { locale: ko })}</h3>
        <Button variant="ghost" size="icon" onClick={nextMonth}>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

<div className="grid grid-cols-7 gap-1">
        {/* Day names */}
        {dayNames.map((day, i) => (
          <div key={i} className="text-center text-xs font-medium py-1">
            {day}
          </div>
        ))}

{/* Empty cells for days before start of month */}
        {Array.from({ length: startDay }).map((_, i) => (
          <div key={`empty-${i}`} className="aspect-square" />
        ))}

{/* Calendar days */}
        {monthDays.map((day) => {
          const dayRecords = getRecordsForDay(day)
          const hasRecord = dayRecords.length > 0
          const isToday = isSameDay(day, new Date())

return (
            <button
              key={day.toString()}
              className={`aspect-square rounded-md flex flex-col items-center justify-center text-xs relative
                ${isToday ? "ring-2 ring-primary" : ""}
                ${hasRecord ? "" : "hover:bg-gray-100 dark:hover:bg-gray-800"}
              `}
              onClick={() => onSelectDay(format(day, "yyyy-MM-dd"), dayRecords)}
            >
              <span className={`${hasRecord ? "text-white" : ""}`}>{format(day, "d")}</span>

{hasRecord && (
                <div className={`absolute inset-0 -z-10 rounded-md opacity-80 ${getMoodColor(dayRecords[0].mood)}`} />
              )}

{dayRecords.length > 1 && (
                <span className="absolute bottom-1 right-1 text-[0.6rem] bg-white dark:bg-gray-800 rounded-full w-3 h-3 flex items-center justify-center">
                  {dayRecords.length}
                </span>
              )}
            </button>
          )
        })}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/enhanced-meditation-select-page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Clock, Wind, Target, Music, Zap, Star, BookOpen } from "lucide-react"
import { MEDITATION_DURATIONS, BREATHE_PATTERNS, MEDITATION_PURPOSES } from "@/constants/meditation"
import { BACKGROUND_SOUNDS } from "@/constants/settings"
import type { BreathPattern, MeditationDuration, MeditationPurpose } from "@/types/meditation"
import { BreathingPatternPreview } from "@/components/pages/meditation-select/breathing-pattern-preview"
import { DurationSelector } from "@/components/pages/meditation-select/duration-selector"
import { PurposeSelector } from "@/components/pages/meditation-select/purpose-selector"
import { SoundSelector } from "@/components/pages/meditation-select/sound-selector"
import { QuickStartPresets } from "@/components/pages/meditation-select/quick-start-presets"
import { GuidedMeditationSelector } from "@/components/pages/meditation-select/guided-meditation-selector"

interface EnhancedMeditationSelectPageProps {
  meditationDuration: MeditationDuration
  breathePattern: BreathPattern
  meditationPurpose: MeditationPurpose
  backgroundSound: string
  setMeditationDuration: (duration: MeditationDuration) => void
  setBreathPattern: (pattern: BreathPattern) => void
  setMeditationPurpose: (purpose: MeditationPurpose) => void
  setBackgroundSound: (sound: string) => void
  startMeditation: () => void
  goToMeditationPrograms?: () => void
}

export default function EnhancedMeditationSelectPage({
  meditationDuration,
  breathePattern,
  meditationPurpose,
  backgroundSound,
  setMeditationDuration,
  setBreathPattern,
  setMeditationPurpose,
  setBackgroundSound,
  startMeditation,
  goToMeditationPrograms,
}: EnhancedMeditationSelectPageProps) {
  const [activeTab, setActiveTab] = useState("quick")
  const [currentStep, setCurrentStep] = useState(0)
  const [isGuided, setIsGuided] = useState(false)
  const [guideVoice, setGuideVoice] = useState("female1")
  const [guideIntensity, setGuideIntensity] = useState("medium")

// Steps for the wizard flow
  const steps = [
    { id: "duration", icon: <Clock className="h-5 w-5" />, title: "명상 시간" },
    { id: "breathing", icon: <Wind className="h-5 w-5" />, title: "호흡 패턴" },
    { id: "purpose", icon: <Target className="h-5 w-5" />, title: "명상 목적" },
    { id: "sound", icon: <Music className="h-5 w-5" />, title: "배경 소리" },
  ]

// Handle next step in wizard
  const handleNextStep = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      startMeditation()
    }
  }

// Handle previous step in wizard
  const handlePrevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

// Quick start with preset
  const handleQuickStart = (preset: {
    duration: MeditationDuration
    pattern: BreathPattern
    purpose: MeditationPurpose
    sound: string
  }) => {
    setMeditationDuration(preset.duration)
    setBreathPattern(preset.pattern)
    setMeditationPurpose(preset.purpose)
    setBackgroundSound(preset.sound)
    startMeditation()
  }

// Render current step content
  const renderStepContent = () => {
    switch (steps[currentStep].id) {
      case "duration":
        return (
          <DurationSelector
            duration={meditationDuration}
            setDuration={setMeditationDuration}
            durations={MEDITATION_DURATIONS}
          />
        )
      case "breathing":
        return (
          <div className="space-y-4">
            <BreathingPatternPreview
              selectedPattern={breathePattern}
              setSelectedPattern={setBreathPattern}
              patterns={BREATHE_PATTERNS}
            />
          </div>
        )
      case "purpose":
        return (
          <PurposeSelector
            selectedPurpose={meditationPurpose}
            setSelectedPurpose={setMeditationPurpose}
            purposes={MEDITATION_PURPOSES}
          />
        )
      case "sound":
        return (
          <SoundSelector
            selectedSound={backgroundSound}
            setSelectedSound={setBackgroundSound}
            sounds={BACKGROUND_SOUNDS}
          />
        )
      default:
        return null
    }
  }

return (
    <motion.div
      key="enhanced-meditation-select"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex flex-col items-center justify-center gap-6 mt-4 w-full max-w-md"
    >
      <h1 className="text-2xl font-bold text-foreground text-center">명상 설정</h1>

{/* 빠른 시작 탭 */}
        <TabsContent value="quick" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              <QuickStartPresets onSelectPreset={handleQuickStart} />

<div className="mt-6 border-t pt-4">
                <h3 className="text-sm font-medium mb-3">현재 설정으로 시작</h3>
                <div className="grid grid-cols-2 gap-2 text-sm mb-4">
                  <div className="flex items-center">
                    <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{meditationDuration}분</span>
                  </div>
                  <div className="flex items-center">
                    <Wind className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>
                      {breathePattern === "normal"
                        ? "기본 호흡"
                        : breathePattern === "478"
                          ? "4-7-8 호흡"
                          : breathePattern === "box"
                            ? "박스 호흡"
                            : "코히어런트 호흡"}
                    </span>
                  </div>
                  <div className="flex items-center">
                    <Target className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>
                      {meditationPurpose === "stress"
                        ? "스트레스 감소"
                        : meditationPurpose === "focus"
                          ? "집중력 향상"
                          : meditationPurpose === "sleep"
                            ? "수면 개선"
                            : "에너지 충전"}
                    </span>
                  </div>
                  <div className="flex items-center">
                    <Music className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{BACKGROUND_SOUNDS.find((s) => s.value === backgroundSound)?.label || "없음"}</span>
                  </div>
                </div>

{goToMeditationPrograms && (
                  <Button
                    variant="outline"
                    onClick={goToMeditationPrograms}
                    className="w-full mt-3 flex items-center justify-center"
                  >
                    <BookOpen className="h-4 w-4 mr-2" />
                    명상 프로그램 보기
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* 단계별 설정 탭 */}
        <TabsContent value="wizard" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              {/* Step indicator */}
              <div className="flex justify-between mb-6 relative">
                {steps.map((step, index) => (
                  <div
                    key={step.id}
                    className={`flex flex-col items-center ${index <= currentStep ? "text-primary" : "text-muted-foreground"}`}
                    style={{ width: `${100 / steps.length}%` }}
                  >
                    <div
                      className={`rounded-full w-10 h-10 flex items-center justify-center mb-1
                        ${
                          index < currentStep
                            ? "bg-primary text-primary-foreground"
                            : index === currentStep
                              ? "border-2 border-primary"
                              : "border-2 border-muted"
                        }`}
                    >
                      {step.icon}
                    </div>
                    <span className="text-xs text-center">{step.title}</span>
                  </div>
                ))}

{/* Progress line */}
                <div className="absolute top-5 left-0 w-full h-0.5 bg-muted -z-10"></div>
                <div
                  className="absolute top-5 left-0 h-0.5 bg-primary -z-10 transition-all duration-300"
                  style={{ width: `${(currentStep / (steps.length - 1)) * 100}%` }}
                ></div>
              </div>

{/* Step content */}
              <AnimatePresence mode="wait">
                <motion.div
                  key={steps[currentStep].id}
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: -20 }}
                  transition={{ duration: 0.2 }}
                >
                  {renderStepContent()}
                </motion.div>
              </AnimatePresence>

{/* Navigation buttons */}
              <div className="flex justify-between mt-6">
                <Button variant="outline" onClick={handlePrevStep} disabled={currentStep === 0}>
                  이전
                </Button>
                <Button onClick={handleNextStep}>{currentStep === steps.length - 1 ? "시작하기" : "다음"}</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* 가이드 명상 탭 */}
        <TabsContent value="guided" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              <GuidedMeditationSelector
                isGuided={isGuided}
                setIsGuided={setIsGuided}
                guideVoice={guideVoice}
                setGuideVoice={setGuideVoice}
                guideIntensity={guideIntensity}
                setGuideIntensity={setGuideIntensity}
                duration={meditationDuration}
                setDuration={setMeditationDuration}
                purpose={meditationPurpose}
                setPurpose={setMeditationPurpose}
                startMeditation={startMeditation}
              />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/breathing-pattern-preview.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import type { BreathPattern } from "@/types/meditation"

interface BreathingPatternPreviewProps {
  selectedPattern: BreathPattern
  setSelectedPattern: (pattern: BreathPattern) => void
  patterns: BreathPattern[]
}

export function BreathingPatternPreview({
  selectedPattern,
  setSelectedPattern,
  patterns,
}: BreathingPatternPreviewProps) {
  const [breatheIn, setBreatheIn] = useState(true)
  const [breathePhase, setBreathePhase] = useState<string>("in")

// Get pattern details
  const getPatternDetails = (pattern: BreathPattern) => {
    switch (pattern) {
      case "normal":
        return {
          name: "기본 호흡",
          description: "4초 들이쉬고 4초 내쉬는 균형잡힌 호흡법",
          benefits: "초보자에게 적합하며, 마음을 안정시키는데 도움을 줍니다.",
          inDuration: 4,
          outDuration: 4,
          holdDuration: 0,
          diagram: [
            { phase: "들숨", duration: 4 },
            { phase: "날숨", duration: 4 },
          ],
        }
      case "478":
        return {
          name: "4-7-8 호흡법",
          description: "4초 들이쉬고, 7초 참고, 8초 내쉬는 호흡법",
          benefits: "스트레스 감소와 수면 개선에 효과적입니다.",
          inDuration: 4,
          outDuration: 8,
          holdDuration: 7,
          diagram: [
            { phase: "들숨", duration: 4 },
            { phase: "참숨", duration: 7 },
            { phase: "날숨", duration: 8 },
          ],
        }
      case "box":
        return {
          name: "박스 호흡법",
          description: "4초 들이쉬고, 4초 참고, 4초 내쉬고, 4초 참는 호흡법",
          benefits: "집중력 향상과 불안 감소에 효과적입니다.",
          inDuration: 4,
          outDuration: 4,
          holdDuration: 4,
          diagram: [
            { phase: "들숨", duration: 4 },
            { phase: "참숨", duration: 4 },
            { phase: "날숨", duration: 4 },
            { phase: "참숨", duration: 4 },
          ],
        }
      case "coherent":
        return {
          name: "코히어런트 호흡",
          description: "5초 들이쉬고 5초 내쉬는 균형잡힌 호흡법",
          benefits: "심장 변이도를 개선하고 전반적인 웰빙을 증진시킵니다.",
          inDuration: 5,
          outDuration: 5,
          holdDuration: 0,
          diagram: [
            { phase: "들숨", duration: 5 },
            { phase: "날숨", duration: 5 },
          ],
        }
      default:
        return {
          name: "기본 호흡",
          description: "4초 들이쉬고 4초 내쉬는 균형잡힌 호흡법",
          benefits: "초보자에게 적합하며, 마음을 안정시키는데 도움을 줍니다.",
          inDuration: 4,
          outDuration: 4,
          holdDuration: 0,
          diagram: [
            { phase: "들숨", duration: 4 },
            { phase: "날숨", duration: 4 },
          ],
        }
    }
  }

const patternDetails = getPatternDetails(selectedPattern)

// Animate breathing for preview
  useEffect(() => {
    let timer: NodeJS.Timeout

if (selectedPattern === "normal" || selectedPattern === "coherent") {
      // Simple in-out pattern
      timer = setInterval(
        () => {
          setBreatheIn((prev) => !prev)
        },
        breatheIn ? patternDetails.inDuration * 1000 : patternDetails.outDuration * 1000,
      )
    } else if (selectedPattern === "478") {
      // 4-7-8 pattern (in-hold-out)
      timer = setInterval(
        () => {
          setBreathePhase((prev) => {
            if (prev === "in") {
              setBreatheIn(false)
              return "hold"
            } else if (prev === "hold") {
              return "out"
            } else {
              setBreatheIn(true)
              return "in"
            }
          })
        },
        breathePhase === "in" ? 4000 : breathePhase === "hold" ? 7000 : 8000,
      )
    } else if (selectedPattern === "box") {
      // Box pattern (in-hold-out-hold)
      timer = setInterval(() => {
        setBreathePhase((prev) => {
          if (prev === "in") {
            setBreatheIn(true)
            return "in-hold"
          } else if (prev === "in-hold") {
            setBreatheIn(false)
            return "out"
          } else if (prev === "out") {
            return "out-hold"
          } else {
            setBreatheIn(true)
            return "in"
          }
        })
      }, 4000) // Each phase is 4 seconds in box breathing
    }

return () => {
      clearInterval(timer)
    }
  }, [selectedPattern, breatheIn, breathePhase, patternDetails])

// Get current breathing instruction
  const getBreathingInstruction = () => {
    if (selectedPattern === "normal" || selectedPattern === "coherent") {
      return breatheIn ? "들이쉬세요" : "내쉬세요"
    } else if (selectedPattern === "478") {
      if (breathePhase === "in") return "4초간 들이쉬세요"
      if (breathePhase === "hold") return "7초간 참으세요"
      return "8초간 내쉬세요"
    } else if (selectedPattern === "box") {
      if (breathePhase === "in") return "4초간 들이쉬세요"
      if (breathePhase === "in-hold") return "4초간 참으세요"
      if (breathePhase === "out") return "4초간 내쉬세요"
      return "4초간 참으세요"
    }
    return "들이쉬세요"
  }

return (
    <div className="space-y-6">
      <RadioGroup
        value={selectedPattern}
        onValueChange={(value) => setSelectedPattern(value as BreathPattern)}
        className="grid grid-cols-2 gap-2"
      >
        {patterns.map((pattern) => {
          const details = getPatternDetails(pattern)
          return (
            <div key={pattern} className="relative">
              <RadioGroupItem value={pattern} id={pattern} className="peer sr-only" />
              <Label
                htmlFor={pattern}
                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
              >
                <div className="text-center">
                  <h3 className="font-medium">{details.name}</h3>
                  <p className="text-xs text-muted-foreground mt-1">
                    {details.diagram.map((d) => d.duration).join("-")}
                  </p>
                </div>
              </Label>
            </div>
          )
        })}
      </RadioGroup>

<Card className="overflow-hidden">
        <CardContent className="p-4">
          <div className="flex flex-col items-center">
            <h3 className="font-medium text-center mb-2">{patternDetails.name}</h3>
            <p className="text-sm text-muted-foreground text-center mb-4">{patternDetails.description}</p>

{/* Breathing animation preview */}
            <div className="relative flex items-center justify-center my-6">
              <motion.div
                animate={{
                  scale: breatheIn ? 1.5 : 1,
                  opacity: breatheIn ? 0.8 : 0.4,
                }}
                transition={{
                  duration: breatheIn ? patternDetails.inDuration : patternDetails.outDuration,
                  ease: "easeInOut",
                }}
                className="w-24 h-24 rounded-full bg-primary/30"
              />
              <motion.div
                className="absolute text-sm font-medium"
                animate={{ opacity: [0.7, 1, 0.7] }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
              >
                {getBreathingInstruction()}
              </motion.div>
            </div>

{/* Breathing pattern diagram */}
            <div className="w-full mt-4">
              <div className="flex justify-between mb-1">
                {patternDetails.diagram.map((phase, index) => (
                  <div
                    key={index}
                    className="text-xs text-center"
                    style={{ width: `${100 / patternDetails.diagram.length}%` }}
                  >
                    {phase.phase}
                    <br />
                    {phase.duration}초
                  </div>
                ))}
              </div>
              <div className="flex h-4 w-full rounded-full overflow-hidden">
                {patternDetails.diagram.map((phase, index) => {
                  const colors = [
                    "bg-blue-400", // 들숨
                    "bg-purple-400", // 참숨
                    "bg-teal-400", // 날숨
                    "bg-indigo-400", // 참숨 2
                  ]

// Calculate width based on duration proportion
                  const totalDuration = patternDetails.diagram.reduce((sum, p) => sum + p.duration, 0)
                  const width = (phase.duration / totalDuration) * 100

return (
                    <div
                      key={index}
                      className={`${colors[index % colors.length]} h-full`}
                      style={{ width: `${width}%` }}
                    />
                  )
                })}
              </div>
            </div>

<p className="text-xs text-muted-foreground mt-6">
              <strong>효과:</strong> {patternDetails.benefits}
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/duration-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import type { MeditationDuration } from "@/types/meditation"

interface DurationSelectorProps {
  duration: MeditationDuration
  setDuration: (duration: MeditationDuration) => void
  durations: MeditationDuration[]
}

export function DurationSelector({ duration, setDuration, durations }: DurationSelectorProps) {
  const [customDuration, setCustomDuration] = useState<number>(duration)
  const [isCustom, setIsCustom] = useState(false)

// Handle slider change
  const handleSliderChange = (values: number[]) => {
    setCustomDuration(values[0])
    // Only update actual duration if it's a valid option or we're in custom mode
    if (durations.includes(values[0] as MeditationDuration) || isCustom) {
      setDuration(values[0] as MeditationDuration)
    }
  }

// Handle preset button click
  const handlePresetClick = (preset: MeditationDuration) => {
    setDuration(preset)
    setCustomDuration(preset)
    setIsCustom(false)
  }

// Toggle custom duration mode
  const toggleCustomMode = () => {
    setIsCustom(!isCustom)
    if (!isCustom) {
      // If entering custom mode, use current duration as starting point
      setCustomDuration(duration)
    }
  }

return (
    <div className="space-y-6">
      <div className="grid grid-cols-3 gap-2">
        {durations.map((preset) => (
          <Button
            key={preset}
            variant={duration === preset && !isCustom ? "default" : "outline"}
            className="h-auto py-3"
            onClick={() => handlePresetClick(preset)}
          >
            {preset}분
          </Button>
        ))}
        <Button variant={isCustom ? "default" : "outline"} className="h-auto py-3" onClick={toggleCustomMode}>
          커스텀
        </Button>
      </div>

<div className="space-y-4">
        <div className="flex justify-between items-center">
          <span className="text-sm font-medium">명상 시간: {customDuration}분</span>
          <span className="text-xs text-muted-foreground">{customDuration * 60}초</span>
        </div>

<div className="bg-muted/50 p-3 rounded-md">
        <h4 className="text-sm font-medium mb-1">추천 시간</h4>
        <p className="text-xs text-muted-foreground">
          초보자는 5분부터 시작하는 것이 좋습니다. 명상에 익숙해지면 점차 시간을 늘려보세요.
        </p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/purpose-selector.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import type { MeditationPurpose } from "@/types/meditation"

interface PurposeSelectorProps {
  selectedPurpose: MeditationPurpose
  setSelectedPurpose: (purpose: MeditationPurpose) => void
  purposes: MeditationPurpose[]
}

export function PurposeSelector({ selectedPurpose, setSelectedPurpose, purposes }: PurposeSelectorProps) {
  // Get purpose details
  const getPurposeDetails = (purpose: MeditationPurpose) => {
    switch (purpose) {
      case "stress":
        return {
          name: "스트레스 감소",
          description: "긴장을 풀고 마음의 평화를 찾습니다",
          icon: "🧘‍♀️",
          color: "bg-blue-100 dark:bg-blue-900",
          textColor: "text-blue-700 dark:text-blue-300",
        }
      case "focus":
        return {
          name: "집중력 향상",
          description: "주의력을 높이고 명료한 사고를 돕습니다",
          icon: "🎯",
          color: "bg-purple-100 dark:bg-purple-900",
          textColor: "text-purple-700 dark:text-purple-300",
        }
      case "sleep":
        return {
          name: "수면 개선",
          description: "깊고 편안한 수면을 위한 이완을 돕습니다",
          icon: "😴",
          color: "bg-indigo-100 dark:bg-indigo-900",
          textColor: "text-indigo-700 dark:text-indigo-300",
        }
      case "energy":
        return {
          name: "에너지 충전",
          description: "활력을 되찾고 긍정적인 에너지를 채웁니다",
          icon: "⚡",
          color: "bg-amber-100 dark:bg-amber-900",
          textColor: "text-amber-700 dark:text-amber-300",
        }
      default:
        return {
          name: "일반 명상",
          description: "전반적인 웰빙과 마음챙김을 위한 명상",
          icon: "🌿",
          color: "bg-green-100 dark:bg-green-900",
          textColor: "text-green-700 dark:text-green-300",
        }
    }
  }

return (
    <div className="space-y-4">
      <RadioGroup
        value={selectedPurpose}
        onValueChange={(value) => setSelectedPurpose(value as MeditationPurpose)}
        className="grid grid-cols-2 gap-3"
      >
        {purposes.map((purpose) => {
          const details = getPurposeDetails(purpose)
          return (
            <div key={purpose} className="relative">
              <RadioGroupItem value={purpose} id={purpose} className="peer sr-only" />
              <Label
                htmlFor={purpose}
                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
              >
                <div className="text-center">
                  <span className="text-3xl mb-2 block">{details.icon}</span>
                  <h3 className="font-medium">{details.name}</h3>
                </div>
              </Label>
            </div>
          )
        })}
      </RadioGroup>

<Card className={`${getPurposeDetails(selectedPurpose).color} border-none`}>
        <CardContent className="p-4">
          <div className="flex items-center">
            <span className="text-4xl mr-4">{getPurposeDetails(selectedPurpose).icon}</span>
            <div>
              <h3 className={`font-medium ${getPurposeDetails(selectedPurpose).textColor}`}>
                {getPurposeDetails(selectedPurpose).name}
              </h3>
              <p className="text-sm mt-1">{getPurposeDetails(selectedPurpose).description}</p>
            </div>
          </div>

<div className="mt-4 text-sm">
            <h4 className="font-medium mb-1">이런 분들께 추천해요:</h4>
            <ul className="list-disc list-inside space-y-1 text-xs">
              {selectedPurpose === "stress" && (
                <>
                  <li>일상에서 스트레스를 많이 느끼는 분</li>
                  <li>마음의 안정이 필요한 분</li>
                  <li>불안감을 줄이고 싶은 분</li>
                </>
              )}
              {selectedPurpose === "focus" && (
                <>
                  <li>집중력 향상이 필요한 분</li>
                  <li>업무나 학업 효율을 높이고 싶은 분</li>
                  <li>산만함을 줄이고 싶은 분</li>
                </>
              )}
              {selectedPurpose === "sleep" && (
                <>
                  <li>잠들기 어려움을 겪는 분</li>
                  <li>수면의 질을 개선하고 싶은 분</li>
                  <li>밤에 생각이 많아 잠을 설치는 분</li>
                </>
              )}
              {selectedPurpose === "energy" && (
                <>
                  <li>활력이 필요한 분</li>
                  <li>긍정적인 에너지를 채우고 싶은 분</li>
                  <li>피로감을 줄이고 싶은 분</li>
                </>
              )}
            </ul>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/sound-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Volume2, VolumeX } from "lucide-react"
import { Slider } from "@/components/ui/slider"

interface SoundSelectorProps {
  selectedSound: string
  setSelectedSound: (sound: string) => void
  sounds: Array<{
    value: string
    label: string
  }>
}

export function SoundSelector({ selectedSound, setSelectedSound, sounds }: SoundSelectorProps) {
  const [volume, setVolume] = useState(50)
  const [isPlaying, setIsPlaying] = useState<string | null>(null)

// Get sound icon
  const getSoundIcon = (sound: string) => {
    switch (sound) {
      case "rain":
        return "🌧️"
      case "waves":
        return "🌊"
      case "forest":
        return "🌲"
      case "whitenoise":
        return "📻"
      default:
        return "🔇"
    }
  }

// Play sound preview
  const playSound = (sound: string) => {
    // Stop current sound if playing
    if (isPlaying) {
      setIsPlaying(null)
    }

// If clicking the same sound that's playing, just stop it
    if (isPlaying === sound) {
      return
    }

// Otherwise play the new sound
    setIsPlaying(sound)

// In a real app, this would play the actual sound
    // For this example, we'll just simulate it
    setTimeout(() => {
      setIsPlaying(null)
    }, 3000)
  }

return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3">
        {sounds.map((sound) => (
          <Card
            key={sound.value}
            className={`cursor-pointer transition-all ${selectedSound === sound.value ? "ring-2 ring-primary" : ""}`}
            onClick={() => setSelectedSound(sound.value)}
          >
            <div className="p-4 flex items-center justify-between">
              <div className="flex items-center">
                <span className="text-2xl mr-3">{getSoundIcon(sound.value)}</span>
                <span>{sound.label}</span>
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={(e) => {
                  e.stopPropagation()
                  playSound(sound.value)
                }}
              >
                {isPlaying === sound.value ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
              </Button>
            </div>
          </Card>
        ))}
      </div>

<div className="space-y-4">
        <h3 className="text-sm font-medium">볼륨</h3>
        <div className="flex items-center space-x-2">
          <VolumeX className="h-4 w-4 text-muted-foreground" />
          <Slider
            value={[volume]}
            min={0}
            max={100}
            step={1}
            onValueChange={(values) => setVolume(values[0])}
            className="flex-1"
          />
          <Volume2 className="h-4 w-4 text-muted-foreground" />
        </div>
        <div className="text-center text-sm text-muted-foreground">{volume}%</div>
      </div>

<div className="bg-muted/50 p-3 rounded-md">
        <h4 className="text-sm font-medium mb-1">배경음 효과</h4>
        <p className="text-xs text-muted-foreground">
          적절한 배경음은 집중력을 높이고 외부 소음을 차단하는데 도움을 줍니다. 명상 목적에 맞는 소리를 선택해보세요.
        </p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/quick-start-presets.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Clock, Wind, Target, Music } from "lucide-react"
import type { BreathPattern, MeditationDuration, MeditationPurpose } from "@/types/meditation"

interface QuickStartPresetsProps {
  onSelectPreset: (preset: {
    duration: MeditationDuration
    pattern: BreathPattern
    purpose: MeditationPurpose
    sound: string
  }) => void
}

export function QuickStartPresets({ onSelectPreset }: QuickStartPresetsProps) {
  // Predefined presets
  const presets = [
    {
      name: "빠른 휴식",
      description: "짧은 시간에 빠르게 재충전",
      duration: 3 as MeditationDuration,
      pattern: "normal" as BreathPattern,
      purpose: "energy" as MeditationPurpose,
      sound: "forest",
      icon: "⚡",
      color: "bg-amber-100 dark:bg-amber-900",
      textColor: "text-amber-700 dark:text-amber-300",
    },
    {
      name: "스트레스 해소",
      description: "긴장을 풀고 마음의 평화 찾기",
      duration: 5 as MeditationDuration,
      pattern: "478" as BreathPattern,
      purpose: "stress" as MeditationPurpose,
      sound: "waves",
      icon: "🧘‍♀️",
      color: "bg-blue-100 dark:bg-blue-900",
      textColor: "text-blue-700 dark:text-blue-300",
    },
    {
      name: "집중력 향상",
      description: "명료한 사고와 집중력 강화",
      duration: 10 as MeditationDuration,
      pattern: "box" as BreathPattern,
      purpose: "focus" as MeditationPurpose,
      sound: "whitenoise",
      icon: "🎯",
      color: "bg-purple-100 dark:bg-purple-900",
      textColor: "text-purple-700 dark:text-purple-300",
    },
    {
      name: "숙면 준비",
      description: "편안한 수면을 위한 이완",
      duration: 15 as MeditationDuration,
      pattern: "coherent" as BreathPattern,
      purpose: "sleep" as MeditationPurpose,
      sound: "rain",
      icon: "😴",
      color: "bg-indigo-100 dark:bg-indigo-900",
      textColor: "text-indigo-700 dark:text-indigo-300",
    },
  ]

return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium mb-1">빠른 시작 프리셋</h3>
      <div className="grid grid-cols-1 gap-3">
        {presets.map((preset) => (
          <Card
            key={preset.name}
            className={`cursor-pointer transition-all hover:shadow-md ${preset.color} border-none`}
            onClick={() => onSelectPreset(preset)}
          >
            <div className="p-4">
              <div className="flex items-center">
                <span className="text-4xl mr-4">{preset.icon}</span>
                <div>
                  <h3 className={`font-medium ${preset.textColor}`}>{preset.name}</h3>
                  <p className="text-sm">{preset.description}</p>
                </div>
              </div>

<div className="grid grid-cols-2 gap-2 mt-3 text-xs">
                <div className="flex items-center">
                  <Clock className="h-3 w-3 mr-1 text-muted-foreground" />
                  <span>{preset.duration}분</span>
                </div>
                <div className="flex items-center">
                  <Wind className="h-3 w-3 mr-1 text-muted-foreground" />
                  <span>
                    {preset.pattern === "normal"
                      ? "기본 호흡"
                      : preset.pattern === "478"
                        ? "4-7-8 호흡"
                        : preset.pattern === "box"
                          ? "박스 호흡"
                          : "코히어런트 호흡"}
                  </span>
                </div>
                <div className="flex items-center">
                  <Target className="h-3 w-3 mr-1 text-muted-foreground" />
                  <span>
                    {preset.purpose === "stress"
                      ? "스트레스 감소"
                      : preset.purpose === "focus"
                        ? "집중력 향상"
                        : preset.purpose === "sleep"
                          ? "수면 개선"
                          : "에너지 충전"}
                  </span>
                </div>
                <div className="flex items-center">
                  <Music className="h-3 w-3 mr-1 text-muted-foreground" />
                  <span>
                    {preset.sound === "rain"
                      ? "빗소리"
                      : preset.sound === "waves"
                        ? "파도소리"
                        : preset.sound === "forest"
                          ? "숲소리"
                          : "화이트 노이즈"}
                  </span>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/meditation-select/guided-meditation-selector.tsx" isMerged="true"
"use client"

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { MEDITATION_DURATIONS, MEDITATION_PURPOSES } from "@/constants/meditation"
import type { MeditationDuration, MeditationPurpose } from "@/types/meditation"

interface GuidedMeditationSelectorProps {
  isGuided: boolean
  setIsGuided: (isGuided: boolean) => void
  guideVoice: string
  setGuideVoice: (voice: string) => void
  guideIntensity: string
  setGuideIntensity: (intensity: string) => void
  duration: MeditationDuration
  setDuration: (duration: MeditationDuration) => void
  purpose: MeditationPurpose
  setPurpose: (purpose: MeditationPurpose) => void
  startMeditation: () => void
}

export function GuidedMeditationSelector({
  isGuided,
  setIsGuided,
  guideVoice,
  setGuideVoice,
  guideIntensity,
  setGuideIntensity,
  duration,
  setDuration,
  purpose,
  setPurpose,
  startMeditation,
}: GuidedMeditationSelectorProps) {
  // Voice options
  const voices = [
    { id: "female1", name: "여성 목소리 1", description: "차분하고 부드러운 목소리" },
    { id: "female2", name: "여성 목소리 2", description: "밝고 활기찬 목소리" },
    { id: "male1", name: "남성 목소리 1", description: "깊고 안정적인 목소리" },
    { id: "male2", name: "남성 목소리 2", description: "따뜻하고 친근한 목소리" },
  ]

// Intensity options
  const intensities = [
    { id: "minimal", name: "최소", description: "시작과 끝에만 가이드 제공" },
    { id: "light", name: "가벼움", description: "간헐적인 가이드 제공" },
    { id: "medium", name: "중간", description: "적절한 간격으로 가이드 제공" },
    { id: "detailed", name: "상세함", description: "자세한 가이드 지속적 제공" },
  ]

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Label htmlFor="guided-toggle" className="text-base font-medium">
            가이드 명상
          </Label>
          <p className="text-sm text-muted-foreground">음성 안내와 함께 명상하기</p>
        </div>
        <Switch id="guided-toggle" checked={isGuided} onCheckedChange={setIsGuided} />
      </div>

{isGuided && (
        <>
          <div className="space-y-4 mt-4">
            <h3 className="text-sm font-medium">가이드 음성 선택</h3>
            <RadioGroup value={guideVoice} onValueChange={setGuideVoice} className="grid grid-cols-2 gap-2">
              {voices.map((voice) => (
                <div key={voice.id} className="relative">
                  <RadioGroupItem value={voice.id} id={voice.id} className="peer sr-only" />
                  <Label
                    htmlFor={voice.id}
                    className="flex flex-col items-start justify-between rounded-md border-2 border-muted bg-popover p-3 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <div>
                      <h4 className="font-medium">{voice.name}</h4>
                      <p className="text-xs text-muted-foreground mt-1">{voice.description}</p>
                    </div>
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>

<div className="space-y-4">
            <h3 className="text-sm font-medium">가이드 강도</h3>
            <RadioGroup value={guideIntensity} onValueChange={setGuideIntensity} className="grid grid-cols-2 gap-2">
              {intensities.map((intensity) => (
                <div key={intensity.id} className="relative">
                  <RadioGroupItem value={intensity.id} id={intensity.id} className="peer sr-only" />
                  <Label
                    htmlFor={intensity.id}
                    className="flex flex-col items-start justify-between rounded-md border-2 border-muted bg-popover p-3 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <div>
                      <h4 className="font-medium">{intensity.name}</h4>
                      <p className="text-xs text-muted-foreground mt-1">{intensity.description}</p>
                    </div>
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>
        </>
      )}

<div className="space-y-4 pt-4 border-t">
        <div className="flex justify-between items-center">
          <Label htmlFor="guided-duration">명상 시간</Label>
          <Select
            value={duration.toString()}
            onValueChange={(value) => setDuration(Number.parseInt(value) as MeditationDuration)}
          >
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="시간 선택" />
            </SelectTrigger>
            <SelectContent>
              {MEDITATION_DURATIONS.map((d) => (
                <SelectItem key={d} value={d.toString()}>
                  {d}분
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="flex justify-between items-center">
          <Label htmlFor="guided-purpose">명상 목적</Label>
          <Select value={purpose} onValueChange={(value) => setPurpose(value as MeditationPurpose)}>
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="목적 선택" />
            </SelectTrigger>
            <SelectContent>
              {MEDITATION_PURPOSES.map((p) => (
                <SelectItem key={p} value={p}>
                  {p === "stress"
                    ? "스트레스 감소"
                    : p === "focus"
                      ? "집중력 향상"
                      : p === "sleep"
                        ? "수면 개선"
                        : "에너지 충전"}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

<Button onClick={startMeditation} className="w-full bg-primary hover:bg-primary/90 mt-4">
        {isGuided ? "가이드 명상 시작하기" : "자유 명상 시작하기"}
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }

[V0_FILE]typescriptreact:file="components/pages/meditation-select/meditation-programs-page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { ChevronRight, Calendar, Award, Clock, Target } from "lucide-react"
import type { BreathPattern, MeditationDuration, MeditationPurpose } from "@/types/meditation"

interface MeditationProgramsPageProps {
  startProgram: (program: {
    id: string
    name: string
    sessions: Array<{
      day: number
      duration: MeditationDuration
      pattern: BreathPattern
      purpose: MeditationPurpose
      sound: string
    }>
  }) => void
  goBack: () => void
}

export function MeditationProgramsPage({ startProgram, goBack }: MeditationProgramsPageProps) {
  const [selectedProgram, setSelectedProgram] = useState<string | null>(null)

// Predefined programs
  const programs = [
    {
      id: "beginner",
      name: "명상 입문 프로그램",
      description: "명상을 처음 시작하는 분들을 위한 7일 프로그램",
      duration: "7일",
      level: "초보자",
      category: "general",
      progress: 0,
      image: "🧘‍♀️",
      color: "bg-blue-100 dark:bg-blue-900",
      textColor: "text-blue-700 dark:text-blue-300",
      sessions: [
        {
          day: 1,
          duration: 3 as MeditationDuration,
          pattern: "normal" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "forest",
          title: "명상 소개",
        },
        {
          day: 2,
          duration: 3 as MeditationDuration,
          pattern: "normal" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "forest",
          title: "호흡 인식하기",
        },
        {
          day: 3,
          duration: 5 as MeditationDuration,
          pattern: "normal" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "waves",
          title: "호흡 깊이 느끼기",
        },
        {
          day: 4,
          duration: 5 as MeditationDuration,
          pattern: "478" as BreathPattern,
          purpose: "focus" as MeditationPurpose,
          sound: "waves",
          title: "집중력 기르기",
        },
        {
          day: 5,
          duration: 5 as MeditationDuration,
          pattern: "478" as BreathPattern,
          purpose: "focus" as MeditationPurpose,
          sound: "rain",
          title: "생각 관찰하기",
        },
        {
          day: 6,
          duration: 7 as MeditationDuration,
          pattern: "box" as BreathPattern,
          purpose: "energy" as MeditationPurpose,
          sound: "forest",
          title: "몸 스캔하기",
        },
        {
          day: 7,
          duration: 10 as MeditationDuration,
          pattern: "coherent" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "waves",
          title: "마음챙김 완성",
        },
      ],
    },
    {
      id: "stress",
      name: "스트레스 해소 프로그램",
      description: "일상 스트레스를 효과적으로 관리하는 14일 프로그램",
      duration: "14일",
      level: "중급자",
      category: "stress",
      progress: 30,
      image: "😌",
      color: "bg-green-100 dark:bg-green-900",
      textColor: "text-green-700 dark:text-green-300",
      sessions: [
        {
          day: 1,
          duration: 5 as MeditationDuration,
          pattern: "478" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "rain",
          title: "스트레스 인식하기",
        },
        {
          day: 2,
          duration: 7 as MeditationDuration,
          pattern: "478" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "rain",
          title: "긴장 풀어내기",
        },
        // More sessions would be defined here
      ],
    },
    {
      id: "sleep",
      name: "숙면 개선 프로그램",
      description: "편안한 수면을 위한 10일 프로그램",
      duration: "10일",
      level: "모든 레벨",
      category: "sleep",
      progress: 0,
      image: "😴",
      color: "bg-indigo-100 dark:bg-indigo-900",
      textColor: "text-indigo-700 dark:text-indigo-300",
      sessions: [
        {
          day: 1,
          duration: 10 as MeditationDuration,
          pattern: "coherent" as BreathPattern,
          purpose: "sleep" as MeditationPurpose,
          sound: "rain",
          title: "수면 준비하기",
        },
        // More sessions would be defined here
      ],
    },
    {
      id: "focus",
      name: "집중력 향상 프로그램",
      description: "주의력과 집중력을 키우는 21일 프로그램",
      duration: "21일",
      level: "중급자",
      category: "focus",
      progress: 10,
      image: "🎯",
      color: "bg-purple-100 dark:bg-purple-900",
      textColor: "text-purple-700 dark:text-purple-300",
      sessions: [
        {
          day: 1,
          duration: 5 as MeditationDuration,
          pattern: "box" as BreathPattern,
          purpose: "focus" as MeditationPurpose,
          sound: "whitenoise",
          title: "주의력 훈련 시작",
        },
        // More sessions would be defined here
      ],
    },
    {
      id: "challenge",
      name: "30일 명상 챌린지",
      description: "30일 동안 매일 명상하는 습관 만들기",
      duration: "30일",
      level: "모든 레벨",
      category: "challenge",
      progress: 0,
      image: "🏆",
      color: "bg-amber-100 dark:bg-amber-900",
      textColor: "text-amber-700 dark:text-amber-300",
      sessions: [
        {
          day: 1,
          duration: 3 as MeditationDuration,
          pattern: "normal" as BreathPattern,
          purpose: "stress" as MeditationPurpose,
          sound: "forest",
          title: "챌린지 시작",
        },
        // More sessions would be defined here
      ],
    },
  ]

// Get program details
  const getSelectedProgram = () => {
    return programs.find((p) => p.id === selectedProgram) || null
  }

return (
    <motion.div
      key="meditation-programs"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex flex-col items-center justify-center gap-6 mt-4 w-full max-w-md"
    >
      <div className="flex items-center justify-between w-full">
        <Button variant="ghost" onClick={goBack}>
          뒤로
        </Button>
        <h1 className="text-xl font-bold text-foreground">명상 프로그램</h1>
        <div className="w-16"></div> {/* Spacer for centering */}
      </div>

{selectedProgram ? (
        <ProgramDetail program={getSelectedProgram()!} onBack={() => setSelectedProgram(null)} onStart={startProgram} />
      ) : (
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="grid grid-cols-5">
            <TabsTrigger value="all">전체</TabsTrigger>
            <TabsTrigger value="general">기본</TabsTrigger>
            <TabsTrigger value="stress">스트레스</TabsTrigger>
            <TabsTrigger value="sleep">수면</TabsTrigger>
            <TabsTrigger value="focus">집중</TabsTrigger>
          </TabsList>

<TabsContent value="all" className="mt-4 space-y-4">
            {programs.map((program) => (
              <ProgramCard key={program.id} program={program} onClick={() => setSelectedProgram(program.id)} />
            ))}
          </TabsContent>

<TabsContent value="general" className="mt-4 space-y-4">
            {programs
              .filter((p) => p.category === "general")
              .map((program) => (
                <ProgramCard key={program.id} program={program} onClick={() => setSelectedProgram(program.id)} />
              ))}
          </TabsContent>

<TabsContent value="stress" className="mt-4 space-y-4">
            {programs
              .filter((p) => p.category === "stress")
              .map((program) => (
                <ProgramCard key={program.id} program={program} onClick={() => setSelectedProgram(program.id)} />
              ))}
          </TabsContent>

<TabsContent value="sleep" className="mt-4 space-y-4">
            {programs
              .filter((p) => p.category === "sleep")
              .map((program) => (
                <ProgramCard key={program.id} program={program} onClick={() => setSelectedProgram(program.id)} />
              ))}
          </TabsContent>

<TabsContent value="focus" className="mt-4 space-y-4">
            {programs
              .filter((p) => p.category === "focus")
              .map((program) => (
                <ProgramCard key={program.id} program={program} onClick={() => setSelectedProgram(program.id)} />
              ))}
          </TabsContent>
        </Tabs>
      )}
    </motion.div>
  )
}

interface ProgramCardProps {
  program: {
    id: string
    name: string
    description: string
    duration: string
    level: string
    category: string
    progress: number
    image: string
    color: string
    textColor: string
  }
  onClick: () => void
}

function ProgramCard({ program, onClick }: ProgramCardProps) {
  return (
    <Card className={`cursor-pointer transition-all hover:shadow-md ${program.color} border-none`} onClick={onClick}>
      <CardContent className="p-4">
        <div className="flex items-center">
          <span className="text-4xl mr-4">{program.image}</span>
          <div className="flex-1">
            <div className="flex items-center justify-between">
              <h3 className={`font-medium ${program.textColor}`}>{program.name}</h3>
              <ChevronRight className="h-4 w-4" />
            </div>
            <p className="text-sm">{program.description}</p>

<div className="flex items-center justify-between mt-2">
              <div className="flex items-center text-xs">
                <Calendar className="h-3 w-3 mr-1" />
                <span>{program.duration}</span>
              </div>
              <Badge variant="outline" className="text-xs">
                {program.level}
              </Badge>
            </div>

{program.progress > 0 && (
              <div className="mt-2">
                <div className="flex items-center justify-between text-xs mb-1">
                  <span>진행률</span>
                  <span>{program.progress}%</span>
                </div>
                <Progress value={program.progress} className="h-1" />
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

interface ProgramDetailProps {
  program: {
    id: string
    name: string
    description: string
    duration: string
    level: string
    category: string
    progress: number
    image: string
    color: string
    textColor: string
    sessions: Array<{
      day: number
      duration: MeditationDuration
      pattern: BreathPattern
      purpose: MeditationPurpose
      sound: string
      title: string
    }>
  }
  onBack: () => void
  onStart: (program: any) => void
}

function ProgramDetail({ program, onBack, onStart }: ProgramDetailProps) {
  return (
    <div className="w-full space-y-4">
      <Card className={`${program.color} border-none`}>
        <CardHeader>
          <div className="flex items-center">
            <span className="text-4xl mr-4">{program.image}</span>
            <div>
              <CardTitle className={program.textColor}>{program.name}</CardTitle>
              <p className="text-sm mt-1">{program.description}</p>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-3 gap-2 text-sm">
            <div className="flex flex-col items-center p-2 bg-white/20 rounded-md">
              <Calendar className="h-4 w-4 mb-1" />
              <span>{program.duration}</span>
            </div>
            <div className="flex flex-col items-center p-2 bg-white/20 rounded-md">
              <Award className="h-4 w-4 mb-1" />
              <span>{program.level}</span>
            </div>
            <div className="flex flex-col items-center p-2 bg-white/20 rounded-md">
              <Clock className="h-4 w-4 mb-1" />
              <span>매일 5-10분</span>
            </div>
          </div>

<Button className="w-full mt-4 bg-white text-gray-800 hover:bg-white/90" onClick={() => onStart(program)}>
            프로그램 시작하기
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle className="text-lg">프로그램 일정</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="divide-y">
            {program.sessions.map((session) => (
              <div key={session.day} className="p-4 flex items-center">
                <div
                  className={`w-8 h-8 rounded-full ${program.color} flex items-center justify-center mr-4 ${program.textColor} font-medium`}
                >
                  {session.day}
                </div>
                <div className="flex-1">
                  <h4 className="font-medium">{session.title}</h4>
                  <div className="flex items-center text-xs text-muted-foreground mt-1">
                    <Clock className="h-3 w-3 mr-1" />
                    <span>{session.duration}분</span>
                    <Target className="h-3 w-3 ml-3 mr-1" />
                    <span>
                      {session.purpose === "stress"
                        ? "스트레스 감소"
                        : session.purpose === "focus"
                          ? "집중력 향상"
                          : session.purpose === "sleep"
                            ? "수면 개선"
                            : "에너지 충전"}
                    </span>
                  </div>
                </div>
                {session.day === 1 && <Badge className="bg-primary">오늘</Badge>}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

<Button variant="outline" className="w-full" onClick={onBack}>
        목록으로 돌아가기
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

export type MoodRecord = {
  date: string
  mood: string
  note: string
}

export type MeditationDuration = 1 | 3 | 5 | 10 | 15 | 20

export type BreathPattern = "normal" | "478" | "box" | "coherent"

export type MeditationPurpose = "stress" | "focus" | "sleep" | "energy"

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

import type React from "react"

import { createContext, useContext, type ReactNode } from "react"
import { THEMES } from "@/constants/settings"

interface ThemeContextType {
  theme: string
  darkMode: boolean
}

const ThemeContext = createContext<ThemeContextType>({
  theme: "blue",
  darkMode: false,
})

export const useTheme = () => useContext(ThemeContext)

interface ThemeProviderProps {
  children: ReactNode
  theme: string
  darkMode: boolean
}

export function ThemeProvider({ children, theme, darkMode }: ThemeProviderProps) {
  // Find the selected theme
  const selectedTheme = THEMES.find((t) => t.value === theme) || THEMES[0]

// Apply CSS variables for the theme
  const style = {
    "--primary": selectedTheme.hsl,
    "--primary-foreground": selectedTheme.foreground,
  } as React.CSSProperties

return (
    <ThemeContext.Provider value={{ theme, darkMode }}>
      <div className={`${darkMode ? "dark" : ""}`} style={style}>
        {children}
      </div>
    </ThemeContext.Provider>
  )
}

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

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import MainPage from "@/components/pages/main/main-page"
import MeditationPage from "@/components/pages/meditation/meditation-page"
import FinishPage from "@/components/pages/finish/finish-page"
import EnhancedMoodCheckPage from "@/components/pages/mood/enhanced-mood-check-page"
import { MoodTrendsDashboard } from "@/components/pages/calendar/mood-trends-dashboard"
import { MoodCalendarHeatmap } from "@/components/pages/calendar/mood-calendar-heatmap"
import EnhancedSettingsPage from "@/components/pages/settings/enhanced-settings-page"
import EnhancedMeditationSelectPage from "@/components/pages/meditation-select/enhanced-meditation-select-page"
import { MeditationProgramsPage } from "@/components/pages/meditation-select/meditation-programs-page"
import type { MeditationState } from "@/types/meditation"

interface PageRendererProps {
  meditationState: MeditationState
  pageProps: any
}

export function PageRenderer({ meditationState, pageProps }: PageRendererProps) {
  const [selectedDay, setSelectedDay] = useState<string | null>(null)
  const [selectedDayRecords, setSelectedDayRecords] = useState<any[]>([])

const handleDaySelect = (date: string, records: any[]) => {
    setSelectedDay(date)
    setSelectedDayRecords(records)
  }

switch (meditationState) {
    case "idle":
      return (
        <MainPage
          startMeditation={pageProps.goToMeditationSelect}
          openCalendar={pageProps.goToCalendar}
          openSettings={pageProps.goToSettings}
          goToMeditationPrograms={pageProps.goToMeditationPrograms}
        />
      )
    case "meditation-select":
      return (
        <EnhancedMeditationSelectPage
          meditationDuration={pageProps.meditationDuration}
          breathePattern={pageProps.breathePattern}
          meditationPurpose={pageProps.meditationPurpose}
          backgroundSound={pageProps.backgroundSound}
          setMeditationDuration={pageProps.setMeditationDuration}
          setBreathPattern={pageProps.setBreathPattern}
          setMeditationPurpose={pageProps.setMeditationPurpose}
          setBackgroundSound={pageProps.setBackgroundSound}
          startMeditation={pageProps.startMeditation}
          goToMeditationPrograms={pageProps.goToMeditationPrograms}
        />
      )
    case "meditation-programs":
      return (
        <MeditationProgramsPage
          startProgram={(program) => {
            // 프로그램 시작 시 해당 프로그램의 첫 번째 세션 설정을 적용
            if (program && program.sessions && program.sessions.length > 0) {
              const firstSession = program.sessions[0]
              pageProps.setMeditationDuration(firstSession.duration)
              pageProps.setBreathPattern(firstSession.pattern)
              pageProps.setMeditationPurpose(firstSession.purpose)
              pageProps.setBackgroundSound(firstSession.sound || "none")
              pageProps.startMeditation()
            } else {
              // 세션 정보가 없는 경우 기본 설정으로 시작
              pageProps.startMeditation()
            }
          }}
          goBack={pageProps.goToMainScreen}
        />
      )
    case "active":
      return (
        <MeditationPage
          breatheIn={pageProps.breatheIn}
          timeRemaining={pageProps.timeRemaining}
          breathePattern={pageProps.breathePattern}
          meditationPurpose={pageProps.meditationPurpose}
          backgroundSound={pageProps.backgroundSound}
        />
      )
    case "completed":
      return (
        <FinishPage
          startMeditation={pageProps.startMeditation}
          goToMoodCheck={pageProps.goToMoodCheck}
          shareCompletion={pageProps.shareCompletion}
        />
      )
    case "mood-record":
      return (
        <EnhancedMoodCheckPage
          selectedMood={pageProps.selectedMood}
          setSelectedMood={pageProps.setSelectedMood}
          moodNote={pageProps.moodNote}
          setMoodNote={pageProps.setMoodNote}
          saveMood={pageProps.saveMood}
        />
      )
    case "calendar":
      return (
        <div className="w-full max-w-md mt-4 space-y-4">
          <Card className="bg-card/90 dark:bg-gray-800/90">
            <CardContent className="pt-6">
              <h2 className="text-xl font-semibold mb-4 dark:text-white">명상 기록 달력</h2>
              <MoodCalendarHeatmap moodRecords={pageProps.moodRecords} onSelectDay={handleDaySelect} />

{selectedDay && selectedDayRecords.length > 0 && (
                <div className="mt-4 pt-4 border-t dark:border-gray-700">
                  <h3 className="font-medium mb-2 dark:text-white">{selectedDay} 기록</h3>
                  {selectedDayRecords.map((record, idx) => (
                    <div key={idx} className="flex items-center p-3 bg-primary/5 dark:bg-primary/10 rounded-lg mb-2">
                      <div className="text-2xl mr-3">{record.mood}</div>
                      <div className="flex-1">
                        <p className="text-foreground dark:text-gray-200">{record.note || "메모 없음"}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

<Button
            onClick={pageProps.goToMainScreen}
            className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"
          >
            메인으로 돌아가기
          </Button>
        </div>
      )
    case "settings":
      return (
        <EnhancedSettingsPage
          theme={pageProps.theme}
          isDarkMode={pageProps.isDarkMode}
          backgroundSound={pageProps.backgroundSound}
          setTheme={pageProps.setTheme}
          setIsDarkMode={pageProps.setIsDarkMode}
          setBackgroundSound={pageProps.setBackgroundSound}
          goBack={pageProps.goToMainScreen}
        />
      )
    default:
      return (
        <MainPage
          startMeditation={pageProps.goToMeditationSelect}
          openCalendar={pageProps.goToCalendar}
          openSettings={pageProps.goToSettings}
          goToMeditationPrograms={pageProps.goToMeditationPrograms}
        />
      )
  }
}

[V0_FILE]typescriptreact:file="components/pages/settings/enhanced-settings-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Moon, Palette, Music, Clock, Bell, Volume2, Database, Eye, Save } from "lucide-react"
import { ThemePreview } from "@/components/pages/settings/theme-preview"
import { SoundMixer } from "@/components/pages/settings/sound-mixer"
import { THEMES, BACKGROUND_SOUNDS } from "@/constants/settings"

interface EnhancedSettingsPageProps {
  theme: string
  isDarkMode: boolean
  backgroundSound: string
  setTheme: (theme: string) => void
  setIsDarkMode: (isDarkMode: boolean) => void
  setBackgroundSound: (sound: string) => void
  goBack: () => void
}

export default function EnhancedSettingsPage({
  theme,
  isDarkMode,
  backgroundSound,
  setTheme,
  setIsDarkMode,
  setBackgroundSound,
  goBack,
}: EnhancedSettingsPageProps) {
  const [fontScale, setFontScale] = useState(1)
  const [volume, setVolume] = useState(50)
  const [autoTheme, setAutoTheme] = useState(false)
  const [highContrast, setHighContrast] = useState(false)
  const [customSounds, setCustomSounds] = useState({
    rain: 30,
    waves: 0,
    forest: 0,
    whitenoise: 0,
  })

return (
    <motion.div
      key="enhanced-settings"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex flex-col items-center justify-center gap-6 mt-4 w-full max-w-md"
    >
      <h1 className="text-2xl font-bold text-foreground text-center">설정</h1>

{/* 외관 설정 탭 */}
        <TabsContent value="appearance" className="space-y-4">
          <Card className="p-4 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center">
                <Moon className="h-5 w-5 mr-2 text-primary" />
                <Label htmlFor="dark-mode">다크 모드</Label>
              </div>
              <Switch
                id="dark-mode"
                checked={isDarkMode}
                onCheckedChange={(checked) => {
                  setIsDarkMode(checked)
                  // 즉시 적용을 위한 로컬 스토리지 업데이트
                  localStorage.setItem("darkMode", checked.toString())
                }}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="font-scale">텍스트 크기</Label>
              <div className="flex items-center">
                <span className="text-xs mr-2">A</span>
                <Slider
                  id="font-scale"
                  value={[fontScale]}
                  min={0.8}
                  max={1.4}
                  step={0.1}
                  onValueChange={(values) => setFontScale(values[0])}
                  className="flex-1"
                />
                <span className="text-lg ml-2">A</span>
              </div>
              <div className="text-center mt-2">
                <span style={{ fontSize: `${fontScale}rem` }}>텍스트 크기 미리보기</span>
              </div>
            </div>
          </Card>
        </TabsContent>

{/* 명상 설정 탭 */}
        <TabsContent value="meditation" className="space-y-4">
          <Card className="p-4 shadow-sm">
            <div className="space-y-4">
              <div className="flex items-center mb-2">
                <Clock className="h-5 w-5 mr-2 text-primary" />
                <Label>기본 명상 시간</Label>
              </div>

<div className="grid grid-cols-3 gap-2">
                {[1, 3, 5, 10, 15, 20].map((minutes) => (
                  <Button key={minutes} variant="outline" className="h-auto py-2">
                    {minutes}분
                  </Button>
                ))}
              </div>

{/* 소리 설정 탭 */}
        <TabsContent value="sound" className="space-y-4">
          <Card className="p-4 shadow-sm">
            <div className="space-y-4">
              <div className="flex items-center mb-2">
                <Music className="h-5 w-5 mr-2 text-primary" />
                <Label>배경 소리</Label>
              </div>

<div className="grid grid-cols-2 gap-2">
                {BACKGROUND_SOUNDS.map((sound) => (
                  <Button
                    key={sound.value}
                    variant={backgroundSound === sound.value ? "default" : "outline"}
                    className="h-auto py-2 justify-start"
                    onClick={() => setBackgroundSound(sound.value)}
                  >
                    <span className="mr-2">
                      {sound.value === "rain"
                        ? "🌧️"
                        : sound.value === "waves"
                          ? "🌊"
                          : sound.value === "forest"
                            ? "🌲"
                            : sound.value === "whitenoise"
                              ? "📻"
                              : "🔇"}
                    </span>
                    {sound.label}
                  </Button>
                ))}
              </div>

<div className="space-y-2 mt-4">
                <div className="flex items-center">
                  <Volume2 className="h-5 w-5 mr-2 text-primary" />
                  <Label htmlFor="volume">볼륨</Label>
                </div>
                <Slider
                  id="volume"
                  value={[volume]}
                  min={0}
                  max={100}
                  step={1}
                  onValueChange={(values) => setVolume(values[0])}
                />
                <div className="flex justify-between text-xs text-muted-foreground">
                  <span>0%</span>
                  <span>{volume}%</span>
                  <span>100%</span>
                </div>
              </div>

{/* 데이터 설정 탭 */}
        <TabsContent value="data" className="space-y-4">
          <Card className="p-4 shadow-sm">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <Database className="h-5 w-5 mr-2 text-primary" />
                  <Label htmlFor="sync-data">데이터 동기화</Label>
                </div>
                <Switch id="sync-data" defaultChecked />
              </div>

<p className="text-sm text-muted-foreground">
                명상 기록과 설정을 클라우드에 동기화하여 여러 기기에서 사용할 수 있습니다.
              </p>

<Button
        onClick={() => {
          // 설정 저장 후 메인 화면으로 이동
          localStorage.setItem("theme", theme)
          localStorage.setItem("darkMode", isDarkMode.toString())
          localStorage.setItem("backgroundSound", backgroundSound)
          goBack()
        }}
        className="bg-primary hover:bg-primary/90 text-primary-foreground px-8 py-5 rounded-xl mt-6 w-full max-w-xs"
      >
        <Save className="mr-2 h-4 w-4" /> 설정 저장하기
      </Button>
    </motion.div>
  )
}

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

import { useState, useEffect } from "react"

export function useSettings() {
  const [theme, setTheme] = useState("blue")
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [backgroundSound, setBackgroundSound] = useState("none")

// Load settings from localStorage on initial render
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme")
    const savedDarkMode = localStorage.getItem("darkMode")
    const savedSound = localStorage.getItem("backgroundSound")

if (savedTheme) setTheme(savedTheme)
    if (savedDarkMode) setIsDarkMode(savedDarkMode === "true")
    if (savedSound) setBackgroundSound(savedSound)

// 다크모드 설정에 따라 HTML 요소에 클래스 추가
    if (savedDarkMode === "true") {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [])

// Save settings to localStorage when they change
  useEffect(() => {
    localStorage.setItem("theme", theme)
    localStorage.setItem("darkMode", isDarkMode.toString())
    localStorage.setItem("backgroundSound", backgroundSound)

// 다크모드 설정 변경 시 HTML 요소에 클래스 추가/제거
    if (isDarkMode) {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [theme, isDarkMode, backgroundSound])

return {
    theme,
    isDarkMode,
    backgroundSound,
    setTheme,
    setIsDarkMode,
    setBackgroundSound,
  }
}

[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn("inline-flex items-center justify-center text-muted-foreground", className)}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }

[V0_FILE]typescriptreact:file="components/pages/main/main-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useQuote } from "@/hooks/use-quote"
import { ArrowRight, Clock, BookOpen, Calendar } from "lucide-react"

interface MainPageProps {
  startMeditation: () => void
  openCalendar: () => void
  openSettings: () => void
  goToMeditationPrograms?: () => void // 추가
}

export default function MainPage({
  startMeditation,
  openCalendar,
  openSettings,
  goToMeditationPrograms,
}: MainPageProps) {
  const { quote } = useQuote()

return (
    <motion.div
      key="main"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="flex flex-col items-center justify-center gap-8 mt-8 w-full"
    >
      <h1 className="text-3xl font-bold text-foreground dark:text-white text-center">호흡 명상</h1>
      <p className="text-muted-foreground dark:text-gray-300 text-center max-w-xs">
        잠시 눈을 감고 호흡에 집중하세요. 스트레스가 사라지는 것을 느껴보세요.
      </p>

{goToMeditationPrograms && (
          <Button
            variant="outline"
            onClick={goToMeditationPrograms}
            className="flex items-center justify-between py-6 px-4 h-auto dark:text-gray-200 dark:border-gray-700"
          >
            <div className="flex items-center">
              <BookOpen className="h-5 w-5 mr-3 text-primary" />
              <span>명상 프로그램</span>
            </div>
            <ArrowRight className="h-4 w-4" />
          </Button>
        )}
      </div>

{/* Quote of the day */}
      <Card className="max-w-xs w-full p-4 mt-4 bg-card/80 dark:bg-gray-800/90 backdrop-blur-sm border-primary/10">
        <p className="text-sm text-primary/80 dark:text-primary-foreground font-medium mb-1">오늘의 명언</p>
        <p className="text-card-foreground dark:text-gray-200 italic">"{quote}"</p>
      </Card>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="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% 4.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% 75.1%; /* Increased lightness for better contrast */

--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% 58%; /* Increased lightness for better contrast */
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="components/meditation-app-client.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { AnimatePresence } from "framer-motion"
import AppHeader from "@/components/layout/app-header"
import { useMeditationState } from "@/hooks/use-meditation-state"
import { useMoodRecords } from "@/hooks/use-mood-records"
import { useSettings } from "@/hooks/use-settings"
import { ThemeProvider } from "@/components/theme/theme-provider"
import { PageRenderer } from "@/components/page-renderer"

export default function MeditationAppClient() {
  const {
    meditationState,
    setMeditationState,
    timeRemaining,
    breatheIn,
    breathePattern,
    meditationDuration,
    meditationPurpose,
    startMeditation,
    setMeditationDuration,
    setBreathPattern,
    setMeditationPurpose,
  } = useMeditationState()

const { moodRecords, selectedMood, setSelectedMood, moodNote, setMoodNote, saveMood } =
    useMoodRecords(setMeditationState)

const { theme, isDarkMode, backgroundSound, setTheme, setIsDarkMode, setBackgroundSound } = useSettings()

const goToMainScreen = () => setMeditationState("idle")
  const goToMoodCheck = () => setMeditationState("mood-record")
  const goToCalendar = () => setMeditationState("calendar")
  const goToSettings = () => setMeditationState("settings")
  const goToMeditationSelect = () => setMeditationState("meditation-select")
  const goToMeditationPrograms = () => setMeditationState("meditation-programs")

const shareCompletion = () => {
    // In a real app, this would use the Web Share API or a specific sharing library
    alert("명상 완료를 공유합니다! (실제 앱에서는 공유 기능이 작동합니다)")
  }

const pageProps = {
    // Meditation state props
    meditationState,
    timeRemaining,
    breatheIn,
    breathePattern,
    meditationDuration,
    meditationPurpose,

// Mood record props
    moodRecords,
    selectedMood,
    setSelectedMood,
    moodNote,
    setMoodNote,

// Settings props
    theme,
    isDarkMode,
    backgroundSound,
    setTheme,
    setIsDarkMode,
    setBackgroundSound,

// Navigation functions
    startMeditation,
    goToMainScreen,
    goToMoodCheck,
    goToCalendar,
    goToSettings,
    goToMeditationSelect,
    goToMeditationPrograms,
    shareCompletion,
    saveMood,

// Meditation settings functions
    setMeditationDuration,
    setBreathPattern,
    setMeditationPurpose,
    setBackgroundSound,
  }

return (
    <ThemeProvider theme={theme} darkMode={isDarkMode}>
      <div className="flex flex-col items-center min-h-screen">
        <div className="flex flex-col items-center min-h-screen w-full bg-gradient-to-b from-background/50 to-background dark:from-gray-900 dark:to-gray-950 p-4 transition-colors duration-300">
          <AppHeader
            meditationState={meditationState}
            goToMainScreen={goToMainScreen}
            openCalendar={goToCalendar}
            openSettings={goToSettings}
            goToMeditationPrograms={goToMeditationPrograms}
          />

<AnimatePresence mode="wait">
            <PageRenderer meditationState={meditationState} pageProps={pageProps} />
          </AnimatePresence>
        </div>
      </div>
    </ThemeProvider>
  )
}

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

import { Button } from "@/components/ui/button"
import { Calendar, ArrowLeft, Settings, BookOpen } from "lucide-react"
import type { MeditationState } from "@/types/meditation"

interface AppHeaderProps {
  meditationState: MeditationState
  goToMainScreen: () => void
  openCalendar: () => void
  openSettings: () => void
  goToMeditationPrograms?: () => void
}

export default function AppHeader({
  meditationState,
  goToMainScreen,
  openCalendar,
  openSettings,
  goToMeditationPrograms,
}: AppHeaderProps) {
  return (
    <div className="w-full flex justify-between items-center mb-6 mt-2">
      <div className="flex items-center">
        {meditationState !== "idle" && meditationState !== "active" && (
          <Button variant="ghost" size="icon" onClick={goToMainScreen} className="mr-2">
            <ArrowLeft className="h-5 w-5 text-foreground dark:text-gray-200" />
          </Button>
        )}
        <h1 className="text-lg font-semibold text-primary dark:text-primary-foreground tracking-tight">마음숨</h1>
      </div>
      {meditationState === "idle" && (
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" onClick={openCalendar}>
            <Calendar className="h-5 w-5 text-foreground dark:text-gray-200" />
          </Button>
          {goToMeditationPrograms && (
            <Button variant="ghost" size="icon" onClick={goToMeditationPrograms}>
              <BookOpen className="h-5 w-5 text-foreground dark:text-gray-200" />
            </Button>
          )}
          <Button variant="ghost" size="icon" onClick={openSettings}>
            <Settings className="h-5 w-5 text-foreground dark:text-gray-200" />
          </Button>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/pages/mood/enhanced-mood-check-page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Mic, Image, Tag, Save, ArrowRight } from "lucide-react"
import { EmotionSlider } from "@/components/pages/mood/emotion-slider"
import { EmotionTags } from "@/components/pages/mood/emotion-tags"

interface EnhancedMoodCheckPageProps {
  selectedMood: string
  setSelectedMood: (mood: string) => void
  moodNote: string
  setMoodNote: (note: string) => void
  saveMood: () => void
}

export default function EnhancedMoodCheckPage({
  selectedMood,
  setSelectedMood,
  moodNote,
  setMoodNote,
  saveMood,
}: EnhancedMoodCheckPageProps) {
  const [activeTab, setActiveTab] = useState("emotions")
  const [emotionCategory, setEmotionCategory] = useState("happy")
  const [emotionIntensity, setEmotionIntensity] = useState(3)
  const [isRecording, setIsRecording] = useState(false)
  const [selectedTags, setSelectedTags] = useState<string[]>([])

// Emotion categories with their corresponding emojis
  const emotionCategories = [
    { id: "happy", label: "행복", emoji: "😊" },
    { id: "calm", label: "평온", emoji: "😌" },
    { id: "anxious", label: "불안", emoji: "😰" },
    { id: "sad", label: "슬픔", emoji: "😢" },
  ]

// Get background color based on emotion category and intensity
  const getEmotionBackground = () => {
    const intensity = emotionIntensity / 5 // Normalize to 0-1

// For dark mode, use darker background colors with higher opacity
    const darkModePrefix = "dark:bg-gradient-to-b dark:from-"
    const darkModeSuffix = "/30 dark:to-gray-900/80"

switch (emotionCategory) {
      case "happy":
        return `bg-gradient-to-b from-yellow-${Math.round(intensity * 300)} to-orange-${Math.round(intensity * 300)} ${darkModePrefix}yellow-${Math.round(intensity * 400)}${darkModeSuffix}`
      case "calm":
        return `bg-gradient-to-b from-blue-${Math.round(intensity * 300)} to-teal-${Math.round(intensity * 300)} ${darkModePrefix}blue-${Math.round(intensity * 400)}${darkModeSuffix}`
      case "anxious":
        return `bg-gradient-to-b from-orange-${Math.round(intensity * 300)} to-red-${Math.round(intensity * 300)} ${darkModePrefix}orange-${Math.round(intensity * 400)}${darkModeSuffix}`
      case "sad":
        return `bg-gradient-to-b from-blue-${Math.round(intensity * 300)} to-indigo-${Math.round(intensity * 300)} ${darkModePrefix}blue-${Math.round(intensity * 400)}${darkModeSuffix}`
      default:
        return "bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700/30 dark:to-gray-900/80"
    }
  }

// Simulate voice recording
  const toggleRecording = () => {
    setIsRecording(!isRecording)
    if (isRecording) {
      // In a real app, this would process the recording and convert to text
      setMoodNote(moodNote + " (음성 메모가 텍스트로 변환되었습니다.)")
    }
  }

// Handle tag selection
  const handleTagSelect = (tag: string) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter((t) => t !== tag))
    } else {
      setSelectedTags([...selectedTags, tag])
      setMoodNote(moodNote + (moodNote ? " " : "") + "#" + tag)
    }
  }

// 저장 버튼 클릭 핸들러 수정
  const handleSave = () => {
    // Set the selected mood based on category and emoji
    const categoryEmoji = emotionCategories.find((c) => c.id === emotionCategory)?.emoji || "😊"
    setSelectedMood(categoryEmoji)

// Call the original save function
    saveMood()
  }

return (
    <motion.div
      key="enhanced-mood-check"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className={`flex flex-col items-center justify-center gap-6 mt-4 w-full max-w-md rounded-xl p-6 ${getEmotionBackground()}`}
    >
      <motion.h1
        className="text-2xl font-bold text-white dark:text-white text-center"
        animate={{ scale: [1, 1.05, 1] }}
        transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
      >
        오늘의 기분은 어떤가요?
      </motion.h1>

<TabsContent value="emotions" className="mt-4">
          <Card className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border-none">
            <CardContent className="pt-6">
              <div className="grid grid-cols-4 gap-2 mb-6">
                {emotionCategories.map((category) => (
                  <Button
                    key={category.id}
                    variant={emotionCategory === category.id ? "default" : "outline"}
                    className={`flex flex-col h-auto py-2 ${
                      emotionCategory === category.id
                        ? "bg-primary dark:bg-primary text-primary-foreground"
                        : "bg-white dark:bg-gray-700 dark:text-gray-200"
                    }`}
                    onClick={() => setEmotionCategory(category.id)}
                  >
                    <span className="text-2xl mb-1">{category.emoji}</span>
                    <span className="text-xs">{category.label}</span>
                  </Button>
                ))}
              </div>

<Button
                className="w-full mt-2 bg-primary dark:bg-primary hover:bg-primary/90 dark:hover:bg-primary/90 text-primary-foreground"
                onClick={() => setActiveTab("notes")}
              >
                다음 <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notes" className="mt-4">
          <Card className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border-none">
            <CardContent className="pt-6">
              <div className="mb-4">
                <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">오늘 하루는 어땠나요?</p>
                <Textarea
                  value={moodNote}
                  onChange={(e) => setMoodNote(e.target.value)}
                  placeholder="생각이나 느낌을 자유롭게 적어보세요..."
                  className="min-h-[100px] bg-white dark:bg-gray-700 dark:text-gray-200 dark:placeholder:text-gray-400"
                />
              </div>

<AnimatePresence>
        {isRecording && (
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            className="fixed bottom-4 left-0 right-0 mx-auto w-64 bg-white dark:bg-gray-800 rounded-full py-2 px-4 flex items-center justify-center shadow-lg"
          >
            <span className="mr-2">🎙️</span>
            <span className="text-sm dark:text-gray-200">음성 메모 녹음 중...</span>
            <motion.div
              className="ml-2 w-2 h-2 bg-red-500 rounded-full"
              animate={{ opacity: [1, 0.3, 1] }}
              transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY }}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}
</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