[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Create users table for gym members CREATE TABLE IF NOT EXISTS public.users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id TEXT UNIQUE NOT NULL, name TEXT NOT NULL, rf_chip_id TEXT UNIQUE NOT NULL, current_status TEXT DEFAULT 'out_gym' CHECK (current_status IN ('in_gym', 'out_gym')), wearable_device TEXT, created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Create workout_sessions table for IoT sensor data CREATE TABLE IF NOT EXISTS public.workout_sessions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), session_id TEXT UNIQUE NOT NULL, user_id TEXT NOT NULL, equipment_id TEXT NOT NULL, timestamp TIMESTAMPTZ DEFAULT NOW(), weight NUMERIC, reps INTEGER, avg_velocity NUMERIC, peak_power NUMERIC, ai_feedback TEXT, created_at TIMESTAMPTZ DEFAULT NOW(), FOREIGN KEY (user_id) REFERENCES public.users(user_id) ON DELETE CASCADE ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_users_rf_chip_id ON public.users(rf_chip_id); CREATE INDEX IF NOT EXISTS idx_users_user_id ON public.users(user_id); CREATE INDEX IF NOT EXISTS idx_workout_sessions_user_id ON public.workout_sessions(user_id); CREATE INDEX IF NOT EXISTS idx_workout_sessions_timestamp ON public.workout_sessions(timestamp); -- Enable Row Level Security ALTER TABLE public.users ENABLE ROW LEVEL SECURITY; ALTER TABLE public.workout_sessions ENABLE ROW LEVEL SECURITY; -- RLS Policies for users table (allow public read for gym staff dashboard) CREATE POLICY "Allow public to view all users" ON public.users FOR SELECT USING (true); CREATE POLICY "Allow public to insert users" ON public.users FOR INSERT WITH CHECK (true); CREATE POLICY "Allow public to update users" ON public.users FOR UPDATE USING (true); CREATE POLICY "Allow public to delete users" ON public.users FOR DELETE USING (true); -- RLS Policies for workout_sessions table (allow public read for gym staff dashboard) CREATE POLICY "Allow public to view all sessions" ON public.workout_sessions FOR SELECT USING (true); CREATE POLICY "Allow public to insert sessions" ON public.workout_sessions FOR INSERT WITH CHECK (true); CREATE POLICY "Allow public to update sessions" ON public.workout_sessions FOR UPDATE USING (true); CREATE POLICY "Allow public to delete sessions" ON public.workout_sessions FOR DELETE USING (true); -- Insert sample data INSERT INTO public.users (user_id, name, rf_chip_id, current_status, wearable_device) VALUES ('KR-9981', '박상원', 'TAG-X8821', 'in_gym', 'Galaxy Watch 6'), ('KR-9982', '김지훈', 'TAG-X8822', 'out_gym', 'Apple Watch 9'), ('KR-9983', '이수진', 'TAG-X8823', 'in_gym', 'Galaxy Watch 6') ON CONFLICT (user_id) DO NOTHING; -- Insert sample workout sessions INSERT INTO public.workout_sessions (session_id, user_id, equipment_id, timestamp, weight, reps, avg_velocity, peak_power, ai_feedback) VALUES ('SESS-20251227-001', 'KR-9981', 'LEG-PRESS-03', '2025-12-27T14:30:00Z', 80, 12, 0.45, 320, '속도가 아주 좋습니다. 다음 세트는 5kg 증량해보세요.'), ('SESS-20251227-002', 'KR-9981', 'CHEST-PRESS-01', '2025-12-27T14:45:00Z', 60, 10, 0.52, 280, '완벽한 폼입니다. 현재 중량을 유지하세요.'), ('SESS-20251227-003', 'KR-9983', 'LAT-PULLDOWN-02', '2025-12-27T15:00:00Z', 45, 15, 0.38, 240, '동작 범위를 더 넓혀보세요.') ON CONFLICT (session_id) DO NOTHING; [V0_FILE]typescript:file="lib/supabase/server.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" import { cookies } from "next/headers" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export async function createSupabaseClient() { const cookieStore = await cookies() return createClient(supabaseUrl, supabaseKey, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Ignore errors from Server Components } }, }, }) } export function createServerClient() { return createClient(supabaseUrl, supabaseKey) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0", "@supabase/supabase-js": "2.89.0", "ai": "6.0.3" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/rf-chip-scanner.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { supabase } from "@/lib/supabase/client" import { Scan, UserPlus } from "lucide-react" import { useRouter } from "next/navigation" export function RFChipScanner() { const [rfChipId, setRfChipId] = useState("") const [isScanning, setIsScanning] = useState(false) const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null) const router = useRouter() const handleScan = async () => { if (!rfChipId.trim()) { setMessage({ type: "error", text: "RF 칩 ID를 입력해주세요." }) return } setIsScanning(true) setMessage(null) try { // Find user by RF chip ID const { data: user, error } = await supabase.from("users").select("*").eq("rf_chip_id", rfChipId).single() if (error || !user) { setMessage({ type: "error", text: "등록되지 않은 RF 칩입니다." }) return } // Toggle status const newStatus = user.current_status === "in_gym" ? "out_gym" : "in_gym" const { error: updateError } = await supabase .from("users") .update({ current_status: newStatus, updated_at: new Date().toISOString(), }) .eq("id", user.id) if (updateError) throw updateError setMessage({ type: "success", text: `${user.name}님이 ${newStatus === "in_gym" ? "입장" : "퇴장"}하셨습니다.`, }) setRfChipId("") router.refresh() } catch (error) { console.error("RF chip scan error:", error) setMessage({ type: "error", text: "오류가 발생했습니다." }) } finally { setIsScanning(false) } } return ( RF 칩 스캐너 회원의 RF 칩을 스캔하여 입장/퇴장을 처리합니다

RF 칩 ID setRfChipId(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleScan()} />

{message && (

{message.text}

)} ) } [V0_FILE]typescriptreact:file="components/view-toggle.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { User, Building2, Activity } from "lucide-react" import { CenterView } from "@/components/center-view" import { MemberView } from "@/components/member-view" import type { User as UserType, WorkoutSession } from "@/types/gym" interface ViewToggleProps { users: UserType[] sessions: WorkoutSession[] } export function ViewToggle({ users, sessions }: ViewToggleProps) { const [viewMode, setViewMode] = useState<"center" | "member">("center") return ( <> {/* Header with Toggle */}

{/* View Toggle Button */}

헬스장 IoT 관리 시스템

{viewMode === "center" ? "실시간 회원 입장 및 운동 데이터 추적" : "나의 운동 기록 및 AI 피드백"}

실시간 모니터링

{/* View Content */} {viewMode === "center" ? : } ) } [V0_FILE]typescript:file="types/gym.ts" isEdit="true" isMerged="true" export interface User { id: string user_id: string name: string rf_chip_id: string current_status: "in_gym" | "out_gym" wearable_device: string | null created_at: string updated_at: string } export interface WorkoutSession { id: string session_id: string user_id: string equipment_id: string timestamp: string weight: number | null reps: number | null avg_velocity: number | null peak_power: number | null ai_feedback: string | null created_at: string // User information from join users?: { name: string user_id: string } } [V0_FILE]typescriptreact:file="components/workout-sessions.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type { WorkoutSession, User } from "@/types/gym" import { ScrollArea } from "@/components/ui/scroll-area" import { Badge } from "@/components/ui/badge" import { supabase } from "@/lib/supabase/client" import { useEffect, useState } from "react" import { Activity, Weight, Zap, UserIcon } from "lucide-react" interface WorkoutSessionsProps { initialSessions: WorkoutSession[] users: User[] } export function WorkoutSessions({ initialSessions, users }: WorkoutSessionsProps) { const [sessions, setSessions] = useState(initialSessions) const getMemberName = (userId: string) => { if (!users || users.length === 0) return userId const user = users.find((u) => u.user_id === userId) return user?.name || userId } useEffect(() => { // Subscribe to real-time changes const channel = supabase .channel("sessions-changes") .on("postgres_changes", { event: "*", schema: "public", table: "workout_sessions" }, (payload) => { if (payload.eventType === "INSERT") { setSessions((prev) => [payload.new as WorkoutSession, ...prev].slice(0, 10)) } }) .subscribe() return () => { supabase.removeChannel(channel) } }, []) return (

{sessions.map((session) => (

{getMemberName(session.user_id)}

회원번호: {session.user_id}

{session.equipment_id}

{new Date(session.timestamp).toLocaleString("ko-KR")}

{session.session_id}

{/* Sensor Data */}

{session.weight && (

{session.weight}kg

)} {session.reps && (

{session.reps}회

)} {session.peak_power && (

{session.peak_power}W

)}

{/* VBT Data */} {session.avg_velocity && (

평균 속도:{" "} {session.avg_velocity} m/s

)} {/* AI Feedback */} {session.ai_feedback && (

AI 피드백

{session.ai_feedback}

)}

))}

) } [V0_FILE]sql:file="scripts/002_insert_sample_data.sql" isMerged="true" -- Insert more sample users (30명의 회원) INSERT INTO public.users (user_id, name, rf_chip_id, current_status, wearable_device) VALUES ('KR-1001', '김민수', 'TAG-A1001', 'in_gym', 'Galaxy Watch 6'), ('KR-1002', '이영희', 'TAG-A1002', 'out_gym', 'Apple Watch 9'), ('KR-1003', '박준영', 'TAG-A1003', 'in_gym', 'Galaxy Watch 5'), ('KR-1004', '최서연', 'TAG-A1004', 'in_gym', 'Apple Watch Ultra'), ('KR-1005', '정민호', 'TAG-A1005', 'out_gym', 'Galaxy Watch 6'), ('KR-1006', '강지은', 'TAG-A1006', 'in_gym', 'Xiaomi Band 7'), ('KR-1007', '윤성민', 'TAG-A1007', 'out_gym', 'Apple Watch 9'), ('KR-1008', '임하나', 'TAG-A1008', 'in_gym', 'Galaxy Watch 6'), ('KR-1009', '한동훈', 'TAG-A1009', 'out_gym', 'Garmin Forerunner'), ('KR-1010', '신유진', 'TAG-A1010', 'in_gym', 'Apple Watch 9'), ('KR-1011', '조현우', 'TAG-A1011', 'in_gym', 'Galaxy Watch 5'), ('KR-1012', '배수지', 'TAG-A1012', 'out_gym', 'Apple Watch Ultra'), ('KR-1013', '서준혁', 'TAG-A1013', 'in_gym', 'Galaxy Watch 6'), ('KR-1014', '문채원', 'TAG-A1014', 'out_gym', 'Xiaomi Band 7'), ('KR-1015', '황인범', 'TAG-A1015', 'in_gym', 'Apple Watch 9'), ('KR-1016', '안소희', 'TAG-A1016', 'out_gym', 'Galaxy Watch 6'), ('KR-1017', '오민석', 'TAG-A1017', 'in_gym', 'Garmin Forerunner'), ('KR-1018', '송혜교', 'TAG-A1018', 'in_gym', 'Apple Watch 9'), ('KR-1019', '장우영', 'TAG-A1019', 'out_gym', 'Galaxy Watch 5'), ('KR-1020', '홍지민', 'TAG-A1020', 'in_gym', 'Apple Watch Ultra'), ('KR-1021', '노태우', 'TAG-A1021', 'out_gym', 'Galaxy Watch 6'), ('KR-1022', '유재석', 'TAG-A1022', 'in_gym', 'Xiaomi Band 7'), ('KR-1023', '강호동', 'TAG-A1023', 'out_gym', 'Apple Watch 9'), ('KR-1024', '이효리', 'TAG-A1024', 'in_gym', 'Galaxy Watch 6'), ('KR-1025', '박나래', 'TAG-A1025', 'in_gym', 'Garmin Forerunner'), ('KR-1026', '김종국', 'TAG-A1026', 'out_gym', 'Apple Watch 9'), ('KR-1027', '송지효', 'TAG-A1027', 'in_gym', 'Galaxy Watch 5'), ('KR-1028', '하하', 'TAG-A1028', 'out_gym', 'Apple Watch Ultra'), ('KR-1029', '지석진', 'TAG-A1029', 'in_gym', 'Galaxy Watch 6'), ('KR-1030', '양세찬', 'TAG-A1030', 'in_gym', 'Xiaomi Band 7') ON CONFLICT (user_id) DO NOTHING; -- Insert more workout sessions (60개의 운동 세션) INSERT INTO public.workout_sessions (session_id, user_id, equipment_id, timestamp, weight, reps, avg_velocity, peak_power, ai_feedback) VALUES ('SESS-20251227-101', 'KR-1001', 'LEG-PRESS-03', '2025-12-27T09:00:00Z', 100, 10, 0.48, 350, '완벽한 속도입니다. 다음 세트 5kg 증량 추천.'), ('SESS-20251227-102', 'KR-1001', 'SQUAT-RACK-01', '2025-12-27T09:15:00Z', 80, 8, 0.55, 380, '폼이 우수합니다. 현재 중량 유지.'), ('SESS-20251227-103', 'KR-1003', 'BENCH-PRESS-02', '2025-12-27T09:30:00Z', 70, 12, 0.42, 290, '속도가 약간 느립니다. 중량 10% 감소 추천.'), ('SESS-20251227-104', 'KR-1004', 'LAT-PULLDOWN-02', '2025-12-27T09:45:00Z', 50, 15, 0.40, 250, '동작 범위를 더 넓혀보세요.'), ('SESS-20251227-105', 'KR-1006', 'LEG-EXTENSION-01', '2025-12-27T10:00:00Z', 45, 12, 0.38, 220, '정확한 폼입니다. 반복 횟수 증가 추천.'), ('SESS-20251227-106', 'KR-1008', 'CHEST-FLY-03', '2025-12-27T10:15:00Z', 25, 15, 0.35, 180, '천천히 수행하고 있습니다. 속도 향상 필요.'), ('SESS-20251227-107', 'KR-1010', 'SHOULDER-PRESS-01', '2025-12-27T10:30:00Z', 40, 10, 0.50, 280, '우수한 파워 출력입니다.'), ('SESS-20251227-108', 'KR-1011', 'DEADLIFT-PLATFORM', '2025-12-27T10:45:00Z', 120, 5, 0.60, 450, '최고의 파워! 안전에 유의하세요.'), ('SESS-20251227-109', 'KR-1013', 'LEG-CURL-02', '2025-12-27T11:00:00Z', 40, 12, 0.42, 240, '좋은 페이스입니다.'), ('SESS-20251227-110', 'KR-1015', 'CABLE-CROSSOVER-01', '2025-12-27T11:15:00Z', 30, 15, 0.38, 200, '지속적인 긴장감 유지 잘하고 있습니다.'), ('SESS-20251227-111', 'KR-1017', 'LEG-PRESS-03', '2025-12-27T11:30:00Z', 90, 10, 0.45, 330, '표준 속도입니다. 다음 세트 증량 가능.'), ('SESS-20251227-112', 'KR-1018', 'SMITH-MACHINE-01', '2025-12-27T11:45:00Z', 60, 10, 0.48, 300, '안정적인 움직임입니다.'), ('SESS-20251227-113', 'KR-1020', 'HACK-SQUAT-01', '2025-12-27T12:00:00Z', 110, 8, 0.52, 400, '파워가 뛰어납니다!'), ('SESS-20251227-114', 'KR-1022', 'INCLINE-BENCH-01', '2025-12-27T12:15:00Z', 55, 12, 0.44, 270, '상체 각도가 완벽합니다.'), ('SESS-20251227-115', 'KR-1024', 'PEC-DECK-01', '2025-12-27T12:30:00Z', 35, 15, 0.36, 190, '수축 시간을 늘려보세요.'), ('SESS-20251227-116', 'KR-1025', 'ROWING-MACHINE-02', '2025-12-27T12:45:00Z', 50, 12, 0.58, 340, '훌륭한 당김 속도입니다.'), ('SESS-20251227-117', 'KR-1027', 'LEG-PRESS-03', '2025-12-27T13:00:00Z', 85, 12, 0.46, 320, '균형잡힌 운동입니다.'), ('SESS-20251227-118', 'KR-1029', 'BICEP-CURL-MACHINE', '2025-12-27T13:15:00Z', 30, 15, 0.40, 210, '팔 각도를 일정하게 유지하세요.'), ('SESS-20251227-119', 'KR-1030', 'TRICEP-EXTENSION-01', '2025-12-27T13:30:00Z', 35, 12, 0.42, 230, '완전한 신전이 잘 되고 있습니다.'), ('SESS-20251227-120', 'KR-1001', 'CALF-RAISE-01', '2025-12-27T13:45:00Z', 60, 20, 0.35, 200, '반복 횟수가 매우 좋습니다.'), -- 오후 세션들 ('SESS-20251227-121', 'KR-1003', 'LEG-PRESS-03', '2025-12-27T14:00:00Z', 95, 10, 0.47, 340, '아침보다 파워가 향상되었습니다.'), ('SESS-20251227-122', 'KR-1004', 'SQUAT-RACK-01', '2025-12-27T14:15:00Z', 75, 8, 0.53, 370, '깊이가 완벽합니다.'), ('SESS-20251227-123', 'KR-1006', 'BENCH-PRESS-02', '2025-12-27T14:30:00Z', 65, 10, 0.45, 285, '가슴에 바를 완전히 내리고 있습니다.'), ('SESS-20251227-124', 'KR-1008', 'DEADLIFT-PLATFORM', '2025-12-27T14:45:00Z', 100, 6, 0.58, 420, '등 자세가 훌륭합니다.'), ('SESS-20251227-125', 'KR-1010', 'LAT-PULLDOWN-02', '2025-12-27T15:00:00Z', 55, 12, 0.43, 260, '광배근 활성화가 잘 되고 있습니다.'), ('SESS-20251227-126', 'KR-1011', 'SHOULDER-PRESS-01', '2025-12-27T15:15:00Z', 45, 10, 0.51, 290, '어깨 안정성이 좋습니다.'), ('SESS-20251227-127', 'KR-1013', 'LEG-CURL-02', '2025-12-27T15:30:00Z', 45, 12, 0.44, 250, '햄스트링 수축이 우수합니다.'), ('SESS-20251227-128', 'KR-1015', 'CHEST-FLY-03', '2025-12-27T15:45:00Z', 28, 15, 0.37, 185, '동작 범위가 넓어졌습니다.'), ('SESS-20251227-129', 'KR-1017', 'CABLE-CROSSOVER-01', '2025-12-27T16:00:00Z', 32, 15, 0.39, 205, '긴장감 유지가 완벽합니다.'), ('SESS-20251227-130', 'KR-1018', 'LEG-EXTENSION-01', '2025-12-27T16:15:00Z', 50, 12, 0.40, 230, '무릎 각도가 정확합니다.'), ('SESS-20251227-131', 'KR-1020', 'SMITH-MACHINE-01', '2025-12-27T16:30:00Z', 65, 10, 0.49, 310, '레일을 따라 완벽하게 움직입니다.'), ('SESS-20251227-132', 'KR-1022', 'HACK-SQUAT-01', '2025-12-27T16:45:00Z', 105, 8, 0.50, 390, '하체 파워가 강력합니다.'), ('SESS-20251227-133', 'KR-1024', 'INCLINE-BENCH-01', '2025-12-27T17:00:00Z', 50, 12, 0.43, 265, '상부 가슴에 집중되고 있습니다.'), ('SESS-20251227-134', 'KR-1025', 'ROWING-MACHINE-02', '2025-12-27T17:15:00Z', 55, 12, 0.60, 350, '등 두께 운동에 최적입니다.'), ('SESS-20251227-135', 'KR-1027', 'PEC-DECK-01', '2025-12-27T17:30:00Z', 38, 15, 0.38, 195, '가슴 중앙부 자극이 좋습니다.'), ('SESS-20251227-136', 'KR-1029', 'TRICEP-EXTENSION-01', '2025-12-27T17:45:00Z', 38, 12, 0.44, 235, '팔꿈치 고정이 완벽합니다.'), ('SESS-20251227-137', 'KR-1030', 'BICEP-CURL-MACHINE', '2025-12-27T18:00:00Z', 32, 15, 0.41, 215, '이두근 피크가 잘 나타납니다.'), ('SESS-20251227-138', 'KR-1001', 'CALF-RAISE-01', '2025-12-27T18:15:00Z', 65, 20, 0.36, 205, '종아리 지구력이 향상되었습니다.'), ('SESS-20251227-139', 'KR-1003', 'AB-CRUNCH-MACHINE', '2025-12-27T18:30:00Z', 40, 20, 0.32, 160, '복부 수축이 완전합니다.'), ('SESS-20251227-140', 'KR-1004', 'BACK-EXTENSION-01', '2025-12-27T18:45:00Z', 15, 15, 0.30, 140, '척추 기립근이 잘 활성화됩니다.'), -- 저녁 세션들 ('SESS-20251227-141', 'KR-1006', 'LEG-PRESS-03', '2025-12-27T19:00:00Z', 88, 10, 0.46, 325, '하루 중 세 번째 세션, 꾸준합니다!'), ('SESS-20251227-142', 'KR-1008', 'BENCH-PRESS-02', '2025-12-27T19:15:00Z', 72, 10, 0.46, 295, '저녁에도 파워가 유지됩니다.'), ('SESS-20251227-143', 'KR-1010', 'SQUAT-RACK-01', '2025-12-27T19:30:00Z', 82, 8, 0.54, 375, '하루 마무리 스쿼트가 완벽합니다.'), ('SESS-20251227-144', 'KR-1011', 'DEADLIFT-PLATFORM', '2025-12-27T19:45:00Z', 115, 5, 0.59, 440, '고중량 데드리프트 성공!'), ('SESS-20251227-145', 'KR-1013', 'LAT-PULLDOWN-02', '2025-12-27T20:00:00Z', 52, 12, 0.42, 255, '등 너비 운동이 좋습니다.'), ('SESS-20251227-146', 'KR-1015', 'SHOULDER-PRESS-01', '2025-12-27T20:15:00Z', 42, 10, 0.50, 285, '어깨 발달에 도움됩니다.'), ('SESS-20251227-147', 'KR-1017', 'CHEST-FLY-03', '2025-12-27T20:30:00Z', 27, 15, 0.36, 183, '마무리 운동으로 적합합니다.'), ('SESS-20251227-148', 'KR-1018', 'CABLE-CROSSOVER-01', '2025-12-27T20:45:00Z', 31, 15, 0.38, 203, '가슴 펌핑이 잘 됩니다.'), ('SESS-20251227-149', 'KR-1020', 'LEG-CURL-02', '2025-12-27T21:00:00Z', 43, 12, 0.43, 245, '햄스트링 마무리가 좋습니다.'), ('SESS-20251227-150', 'KR-1022', 'TRICEP-EXTENSION-01', '2025-12-27T21:15:00Z', 36, 12, 0.43, 232, '삼두 펌핑이 완벽합니다.'), ('SESS-20251227-151', 'KR-1024', 'BICEP-CURL-MACHINE', '2025-12-27T21:30:00Z', 31, 15, 0.40, 212, '이두 마무리 운동 완료!'), ('SESS-20251227-152', 'KR-1025', 'CALF-RAISE-01', '2025-12-27T21:45:00Z', 62, 20, 0.35, 202, '종아리 운동으로 마무리합니다.'), ('SESS-20251227-153', 'KR-1027', 'AB-CRUNCH-MACHINE', '2025-12-27T22:00:00Z', 42, 20, 0.33, 165, '복근 자극이 충분합니다.'), ('SESS-20251227-154', 'KR-1029', 'BACK-EXTENSION-01', '2025-12-27T22:15:00Z', 18, 15, 0.31, 145, '허리 강화 운동 완료.'), ('SESS-20251227-155', 'KR-1030', 'LEG-PRESS-03', '2025-12-27T22:30:00Z', 92, 10, 0.47, 335, '하루 운동을 훌륭하게 마무리했습니다!'), -- 다른 날짜 데이터 ('SESS-20251226-201', 'KR-1001', 'BENCH-PRESS-02', '2025-12-26T14:00:00Z', 68, 10, 0.44, 288, '어제보다 2kg 증량 성공!'), ('SESS-20251226-202', 'KR-1003', 'SQUAT-RACK-01', '2025-12-26T15:00:00Z', 78, 8, 0.52, 365, '스쿼트 폼이 개선되었습니다.'), ('SESS-20251226-203', 'KR-1010', 'DEADLIFT-PLATFORM', '2025-12-26T16:00:00Z', 95, 6, 0.56, 410, '데드리프트 꾸준히 발전 중.'), ('SESS-20251226-204', 'KR-1015', 'LAT-PULLDOWN-02', '2025-12-26T17:00:00Z', 48, 12, 0.41, 248, '등 운동 좋습니다.'), ('SESS-20251226-205', 'KR-1020', 'LEG-PRESS-03', '2025-12-26T18:00:00Z', 108, 8, 0.51, 395, '하체 파워가 강해졌습니다!') ON CONFLICT (session_id) DO NOTHING; [V0_FILE]sql:file="scripts/003_palantir_ontology_schema.sql" isMerged="true" -- ============================================================================ -- Palantir Ontology Based Database Schema -- ============================================================================ -- This schema follows Palantir Foundry's ontology concept: -- - Objects: Real-world entities (Members) -- - Events: Actions or occurrences (Workout Logs) -- ============================================================================ -- ============================================================================ -- 1. PROFILES TABLE (Member Object) -- ============================================================================ -- Represents real-world gym members with 1:1 relationship to auth.users -- This is the "Object" in Palantir's ontology model CREATE TABLE IF NOT EXISTS public.profiles ( -- Primary key linked to Supabase Auth id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, -- Member identification full_name TEXT NOT NULL, rf_card_id TEXT UNIQUE NOT NULL, -- RF chip for gym entry -- Physical attributes height NUMERIC(5, 2), -- in cm (e.g., 175.50) weight NUMERIC(5, 2), -- in kg (e.g., 70.50) -- Goal tracking target_goal TEXT, -- Free text field for member's fitness goals -- Metadata created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- ============================================================================ -- 2. WORKOUT_LOGS TABLE (Event Object) -- ============================================================================ -- Represents workout events performed by members -- This is the "Event" in Palantir's ontology model CREATE TABLE IF NOT EXISTS public.workout_logs ( -- Primary key id UUID PRIMARY KEY DEFAULT gen_random_uuid(), -- Foreign key to profiles (Member who performed the workout) user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, -- Workout details exercise_name TEXT NOT NULL, -- e.g., "벤치프레스", "스쿼트" weight NUMERIC(6, 2), -- in kg reps INTEGER NOT NULL, -- number of repetitions sets INTEGER NOT NULL DEFAULT 1, -- number of sets -- IoT integration iot_device_id TEXT, -- Sensor/device identifier -- VBT (Velocity Based Training) data avg_velocity NUMERIC(5, 3), -- Average velocity in m/s peak_power NUMERIC(8, 2), -- Peak power in watts -- AI feedback ai_feedback TEXT, -- Timestamp created_at TIMESTAMPTZ DEFAULT NOW() ); -- ============================================================================ -- 3. INDEXES FOR PERFORMANCE -- ============================================================================ -- Profiles table indexes CREATE INDEX IF NOT EXISTS idx_profiles_rf_card_id ON public.profiles(rf_card_id); CREATE INDEX IF NOT EXISTS idx_profiles_full_name ON public.profiles(full_name); -- Workout logs table indexes CREATE INDEX IF NOT EXISTS idx_workout_logs_user_id ON public.workout_logs(user_id); CREATE INDEX IF NOT EXISTS idx_workout_logs_created_at ON public.workout_logs(created_at DESC); CREATE INDEX IF NOT EXISTS idx_workout_logs_exercise_name ON public.workout_logs(exercise_name); -- ============================================================================ -- 4. ROW LEVEL SECURITY (RLS) POLICIES -- ============================================================================ -- Enable RLS on both tables ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE public.workout_logs ENABLE ROW LEVEL SECURITY; -- ============================================================================ -- PROFILES TABLE RLS POLICIES -- ============================================================================ -- Users can view their own profile CREATE POLICY "Users can view own profile" ON public.profiles FOR SELECT USING (auth.uid() = id); -- Users can update their own profile CREATE POLICY "Users can update own profile" ON public.profiles FOR UPDATE USING (auth.uid() = id) WITH CHECK (auth.uid() = id); -- Users can insert their own profile (during signup) CREATE POLICY "Users can insert own profile" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id); -- Admin/staff can view all profiles (add service role bypass) CREATE POLICY "Service role can view all profiles" ON public.profiles FOR SELECT USING (true); -- ============================================================================ -- WORKOUT_LOGS TABLE RLS POLICIES -- ============================================================================ -- Users can view their own workout logs CREATE POLICY "Users can view own workout logs" ON public.workout_logs FOR SELECT USING (auth.uid() = user_id); -- Users can create their own workout logs CREATE POLICY "Users can insert own workout logs" ON public.workout_logs FOR INSERT WITH CHECK (auth.uid() = user_id); -- Users can update their own workout logs CREATE POLICY "Users can update own workout logs" ON public.workout_logs FOR UPDATE USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id); -- Users can delete their own workout logs CREATE POLICY "Users can delete own workout logs" ON public.workout_logs FOR DELETE USING (auth.uid() = user_id); -- Admin/staff can view all workout logs (add service role bypass) CREATE POLICY "Service role can view all workout logs" ON public.workout_logs FOR SELECT USING (true); -- ============================================================================ -- 5. TRIGGERS FOR AUTOMATIC TIMESTAMP UPDATES -- ============================================================================ -- Function to update updated_at timestamp CREATE OR REPLACE FUNCTION public.handle_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ LANGUAGE plpgsql; -- Trigger for profiles table DROP TRIGGER IF EXISTS set_updated_at ON public.profiles; CREATE TRIGGER set_updated_at BEFORE UPDATE ON public.profiles FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); -- ============================================================================ -- 6. SAMPLE DATA (FOR TESTING) -- ============================================================================ -- Note: In production, profiles should be created through auth signup flow -- This is just for testing the schema structure COMMENT ON TABLE public.profiles IS 'Member Object - Represents gym members with 1:1 relationship to auth.users'; COMMENT ON TABLE public.workout_logs IS 'Event Object - Represents workout events performed by members'; COMMENT ON COLUMN public.profiles.rf_card_id IS 'Unique RF chip ID for gym entry system'; COMMENT ON COLUMN public.workout_logs.iot_device_id IS 'IoT sensor device identifier for workout tracking'; [V0_FILE]typescriptreact:file="components/data-export.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" import { useState } from "react" import { supabase } from "@/lib/supabase/client" export function DataExport() { const [isExporting, setIsExporting] = useState(false) const exportToExcel = async () => { try { setIsExporting(true) const { data: users, error: usersError } = await supabase .from("users") .select("*") .order("created_at", { ascending: false }) const { data: sessions, error: sessionsError } = await supabase .from("workout_sessions") .select("*") .order("timestamp", { ascending: false }) if (usersError) throw usersError if (sessionsError) throw sessionsError if (!users || !sessions) { alert("데이터를 가져올 수 없습니다.") return } // Users sheet const userHeaders = ["회원번호", "이름", "RF칩ID", "현재상태", "웨어러블기기", "등록일"] const userRows = users.map((user) => [ user.user_id || "-", user.name || "-", user.rf_chip_id || "-", user.current_status === "in_gym" ? "입장" : "퇴장", user.wearable_device || "-", user.created_at ? new Date(user.created_at).toLocaleString("ko-KR") : "-", ]) // Workout sessions sheet const sessionHeaders = [ "세션ID", "회원번호", "회원명", "운동기구", "일시", "무게(kg)", "반복횟수", "평균속도(m/s)", "최고파워(W)", "AI피드백", ] const sessionRows = sessions.map((session) => { const user = users.find((u) => u.user_id === session.user_id) return [ session.session_id || "-", session.user_id || "-", user?.name || "-", session.equipment_id || "-", session.timestamp ? new Date(session.timestamp).toLocaleString("ko-KR") : "-", session.sensor_data?.weight || "-", session.sensor_data?.reps || "-", session.sensor_data?.avg_velocity || "-", session.sensor_data?.peak_power || "-", session.ai_feedback || "-", ] }) // Create CSV content with proper escaping const escapeCsvField = (field: any) => { const str = String(field) if (str.includes(",") || str.includes('"') || str.includes("\n")) { return `"${str.replace(/"/g, '""')}"` } return str } const userCsv = [userHeaders, ...userRows].map((row) => row.map(escapeCsvField).join(",")).join("\n") const sessionCsv = [sessionHeaders, ...sessionRows].map((row) => row.map(escapeCsvField).join(",")).join("\n") // Combine both sheets with separator const csvContent = `회원 데이터 (총 ${users.length}명)\n${userCsv}\n\n\n운동 세션 데이터 (총 ${sessions.length}회)\n${sessionCsv}` // Create blob and download const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" }) const link = document.createElement("a") const url = URL.createObjectURL(blob) link.setAttribute("href", url) link.setAttribute("download", `헬스장_데이터_${new Date().toISOString().split("T")[0]}.csv`) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) console.log(`[v0] 엑셀 다운로드 완료: ${users.length}명 회원, ${sessions.length}개 세션`) } catch (error) { console.error("[v0] 엑셀 다운로드 에러:", error) alert("데이터 다운로드 중 오류가 발생했습니다.") } finally { setIsExporting(false) } } return ( ) } [V0_FILE]sql:file="scripts/004_health_metrics_schema.sql" isMerged="true" -- ============================================================================ -- Health Metrics (InBody Measurements) Schema -- ============================================================================ -- 건강 지표 테이블 생성 CREATE TABLE IF NOT EXISTS public.health_metrics ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, -- 측정 날짜 및 구분 measured_at TIMESTAMPTZ NOT NULL DEFAULT now(), measurement_type TEXT NOT NULL DEFAULT 'regular', -- 'initial', 'regular', 'final' -- 기본 체성분 weight DECIMAL(5,2), -- 체중 (kg) body_fat_percentage DECIMAL(4,2), -- 체지방률 (%) muscle_mass DECIMAL(5,2), -- 근육량 (kg) lean_body_mass DECIMAL(5,2), -- 제지방량 (kg) skeletal_muscle_mass DECIMAL(5,2), -- 골격근량 (kg) -- 비만 지표 bmi DECIMAL(4,2), -- BMI 지수 waist_hip_ratio DECIMAL(3,2), -- 복부비만도 visceral_fat_level INTEGER, -- 내장지방 레벨 -- 신체 수분 및 미네랄 body_water_percentage DECIMAL(4,2), -- 체수분률 (%) protein_mass DECIMAL(5,2), -- 단백질량 (kg) mineral_mass DECIMAL(4,2), -- 무기질량 (kg) -- 건강 바이탈 blood_pressure_systolic INTEGER, -- 수축기 혈압 blood_pressure_diastolic INTEGER, -- 이완기 혈압 blood_sugar DECIMAL(5,2), -- 혈당 (mg/dL) resting_heart_rate INTEGER, -- 안정시 심박수 -- 대사 지표 basal_metabolic_rate INTEGER, -- 기초대사량 (kcal) -- 메모 notes TEXT, created_at TIMESTAMPTZ DEFAULT now(), updated_at TIMESTAMPTZ DEFAULT now() ); -- 인덱스 생성 CREATE INDEX idx_health_metrics_user_id ON public.health_metrics(user_id); CREATE INDEX idx_health_metrics_measured_at ON public.health_metrics(measured_at DESC); CREATE INDEX idx_health_metrics_user_measured ON public.health_metrics(user_id, measured_at DESC); -- RLS 활성화 ALTER TABLE public.health_metrics ENABLE ROW LEVEL SECURITY; -- RLS 정책: 사용자는 자신의 건강 지표만 조회 CREATE POLICY "Users can view their own health metrics" ON public.health_metrics FOR SELECT TO authenticated USING (auth.uid() = user_id); -- RLS 정책: 사용자는 자신의 건강 지표만 생성 CREATE POLICY "Users can insert their own health metrics" ON public.health_metrics FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id); -- RLS 정책: 사용자는 자신의 건강 지표만 수정 CREATE POLICY "Users can update their own health metrics" ON public.health_metrics FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id); -- RLS 정책: 사용자는 자신의 건강 지표만 삭제 CREATE POLICY "Users can delete their own health metrics" ON public.health_metrics FOR DELETE TO authenticated USING (auth.uid() = user_id); -- RLS 정책: 서비스 역할은 모든 접근 가능 CREATE POLICY "Service role has full access to health metrics" ON public.health_metrics FOR ALL TO service_role USING (true) WITH CHECK (true); -- 업데이트 시간 자동 갱신 트리거 CREATE OR REPLACE FUNCTION update_health_metrics_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = now(); RETURN NEW; END; $$ LANGUAGE plpgsql; CREATE TRIGGER trigger_update_health_metrics_updated_at BEFORE UPDATE ON public.health_metrics FOR EACH ROW EXECUTE FUNCTION update_health_metrics_updated_at(); -- ============================================================================ -- 샘플 데이터 삽입 (기존 profiles와 연동) -- ============================================================================ -- 박상원 회원의 건강 지표 (초기 측정 - 3개월 전) INSERT INTO public.health_metrics ( user_id, measured_at, measurement_type, weight, body_fat_percentage, muscle_mass, lean_body_mass, skeletal_muscle_mass, bmi, waist_hip_ratio, visceral_fat_level, body_water_percentage, blood_pressure_systolic, blood_pressure_diastolic, blood_sugar, basal_metabolic_rate, notes ) SELECT id, now() - interval '90 days', 'initial', 78.5, 22.5, 31.2, 60.8, 28.5, 24.8, 0.89, 8, 58.5, 128, 82, 105.0, 1680, '운동 시작 전 초기 측정' FROM public.profiles WHERE rf_card_id = 'TAG-X8821'; -- 박상원 회원의 건강 지표 (1개월 전) INSERT INTO public.health_metrics ( user_id, measured_at, measurement_type, weight, body_fat_percentage, muscle_mass, lean_body_mass, skeletal_muscle_mass, bmi, waist_hip_ratio, visceral_fat_level, body_water_percentage, blood_pressure_systolic, blood_pressure_diastolic, blood_sugar, basal_metabolic_rate, notes ) SELECT id, now() - interval '30 days', 'regular', 76.8, 20.8, 32.5, 60.8, 29.8, 24.2, 0.86, 7, 59.2, 125, 80, 98.0, 1720, '1개월 차 정기 측정' FROM public.profiles WHERE rf_card_id = 'TAG-X8821'; -- 박상원 회원의 건강 지표 (현재) INSERT INTO public.health_metrics ( user_id, measured_at, measurement_type, weight, body_fat_percentage, muscle_mass, lean_body_mass, skeletal_muscle_mass, bmi, waist_hip_ratio, visceral_fat_level, body_water_percentage, blood_pressure_systolic, blood_pressure_diastolic, blood_sugar, basal_metabolic_rate, notes ) SELECT id, now(), 'regular', 75.2, 18.5, 34.8, 61.3, 31.2, 23.7, 0.83, 6, 60.5, 120, 78, 92.0, 1780, '3개월 차 측정 - 목표 달성 중' FROM public.profiles WHERE rf_card_id = 'TAG-X8821'; COMMENT ON TABLE public.health_metrics IS '회원 건강 지표 (인바디 측정 데이터)'; COMMENT ON COLUMN public.health_metrics.measurement_type IS '측정 구분: initial(초기), regular(정기), final(최종)'; [V0_FILE]typescriptreact:file="components/member-view.tsx" isEdit="true" isMerged="true" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { HealthKPIDashboard } from "@/components/health-kpi-dashboard" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Activity, Dumbbell, Timer, Zap, TrendingUp, Heart } from "lucide-react" import { useEffect, useState } from "react" import { supabase } from "@/lib/supabase/client" import type { WorkoutSession } from "@/types/gym" export function MemberView({ userId = "KR-9981" }: { userId?: string }) { const [sessions, setSessions] = useState([]) const [stats, setStats] = useState({ totalSessions: 0, todaySessions: 0, avgPower: 0, avgVelocity: 0, }) useEffect(() => { async function loadData() { const { data } = await supabase .from("workout_sessions") .select("*") .eq("user_id", userId) .order("timestamp", { ascending: false }) .limit(5) if (data) { setSessions(data) const today = new Date().toDateString() const todayData = data.filter((s) => new Date(s.timestamp).toDateString() === today) const avgPower = data.reduce((acc, s) => acc + (s.sensor_data?.peak_power || 0), 0) / (data.length || 1) const avgVelocity = data.reduce((acc, s) => acc + (s.sensor_data?.avg_velocity || 0), 0) / (data.length || 1) setStats({ totalSessions: data.length, todaySessions: todayData.length, avgPower: Math.round(avgPower), avgVelocity: Number.parseFloat(avgVelocity.toFixed(2)), }) } } loadData() const channel = supabase .channel("member_sessions") .on( "postgres_changes", { event: "*", schema: "public", table: "workout_sessions", filter: `user_id=eq.${userId}`, }, () => { loadData() }, ) .subscribe() return () => { supabase.removeChannel(channel) } }, [userId]) return ( 건강 지표 운동 기록 {/* Stats Grid */}

오늘 세션

{stats.todaySessions}회

총 {stats.totalSessions}회

평균 파워

{stats.avgPower}W

Peak Power

평균 속도

{stats.avgVelocity}m/s

VBT 분석

운동 상태

활동중

IN GYM

{/* Recent Sessions */} 최근 운동 기록 AI 피드백 및 센서 데이터

{sessions.length === 0 ? (

운동 기록이 없습니다

) : ( sessions.map((session) => (

{session.equipment_id}

{new Date(session.timestamp).toLocaleString("ko-KR")}

무게

{session.sensor_data?.weight}kg

반복

{session.sensor_data?.reps}회

속도

{session.sensor_data?.avg_velocity}m/s

파워

{session.sensor_data?.peak_power}W

{session.ai_feedback && (

{session.ai_feedback}

)}

)) )}

) } [V0_FILE]typescriptreact:file="components/health-kpi-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Activity, TrendingUp, TrendingDown, Heart, Droplet, Weight, Zap, Minus, Calendar, Filter } from "lucide-react" import { useEffect, useState } from "react" import { supabase } from "@/lib/supabase/client" import type { HealthMetric } from "@/types/supabase" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, BarChart, Bar, Area, AreaChart, } from "recharts" interface HealthKPIDashboardProps { userId: string } type DateRangeFilter = "7d" | "30d" | "90d" | "6m" | "1y" | "all" export function HealthKPIDashboard({ userId }: HealthKPIDashboardProps) { const [metrics, setMetrics] = useState([]) const [filteredMetrics, setFilteredMetrics] = useState([]) const [loading, setLoading] = useState(true) const [dateRange, setDateRange] = useState("all") const [comparison, setComparison] = useState<{ weight: number bodyFat: number muscleMass: number bmi: number bloodPressure: number bloodSugar: number leanBodyMass: number skeletalMuscleMass: number } | null>(null) const filterByDateRange = (data: HealthMetric[], range: DateRangeFilter): HealthMetric[] => { if (range === "all") return data const now = new Date() const cutoffDate = new Date() switch (range) { case "7d": cutoffDate.setDate(now.getDate() - 7) break case "30d": cutoffDate.setDate(now.getDate() - 30) break case "90d": cutoffDate.setDate(now.getDate() - 90) break case "6m": cutoffDate.setMonth(now.getMonth() - 6) break case "1y": cutoffDate.setFullYear(now.getFullYear() - 1) break } return data.filter((m) => new Date(m.measured_at) >= cutoffDate) } useEffect(() => { async function loadHealthMetrics() { setLoading(true) const { data, error } = await supabase .from("health_metrics") .select("*") .eq("user_id", userId) .order("measured_at", { ascending: true }) if (data && data.length > 0) { setMetrics(data) const filtered = filterByDateRange(data, dateRange) setFilteredMetrics(filtered) const first = filtered[0] const latest = filtered[filtered.length - 1] setComparison({ weight: (latest.weight || 0) - (first.weight || 0), bodyFat: (latest.body_fat_percentage || 0) - (first.body_fat_percentage || 0), muscleMass: (latest.muscle_mass || 0) - (first.muscle_mass || 0), bmi: (latest.bmi || 0) - (first.bmi || 0), bloodPressure: (latest.blood_pressure_systolic || 0) - (first.blood_pressure_systolic || 0), bloodSugar: (latest.blood_sugar || 0) - (first.blood_sugar || 0), leanBodyMass: (latest.lean_body_mass || 0) - (first.lean_body_mass || 0), skeletalMuscleMass: (latest.skeletal_muscle_mass || 0) - (first.skeletal_muscle_mass || 0), }) } setLoading(false) } loadHealthMetrics() const channel = supabase .channel("health_metrics_changes") .on( "postgres_changes", { event: "*", schema: "public", table: "health_metrics", filter: `user_id=eq.${userId}`, }, () => { loadHealthMetrics() }, ) .subscribe() return () => { supabase.removeChannel(channel) } }, [userId, dateRange]) useEffect(() => { if (metrics.length > 0) { const filtered = filterByDateRange(metrics, dateRange) setFilteredMetrics(filtered) if (filtered.length > 0) { const first = filtered[0] const latest = filtered[filtered.length - 1] setComparison({ weight: (latest.weight || 0) - (first.weight || 0), bodyFat: (latest.body_fat_percentage || 0) - (first.body_fat_percentage || 0), muscleMass: (latest.muscle_mass || 0) - (first.muscle_mass || 0), bmi: (latest.bmi || 0) - (first.bmi || 0), bloodPressure: (latest.blood_pressure_systolic || 0) - (first.blood_pressure_systolic || 0), bloodSugar: (latest.blood_sugar || 0) - (first.blood_sugar || 0), leanBodyMass: (latest.lean_body_mass || 0) - (first.lean_body_mass || 0), skeletalMuscleMass: (latest.skeletal_muscle_mass || 0) - (first.skeletal_muscle_mass || 0), }) } } }, [dateRange, metrics]) const latestMetric = filteredMetrics.length > 0 ? filteredMetrics[filteredMetrics.length - 1] : null const firstMetric = filteredMetrics.length > 0 ? filteredMetrics[0] : null const getTrendIcon = (value: number) => { if (value > 0) return if (value < 0) return return } const getTrendBadge = (value: number, reverse = false) => { const isPositive = reverse ? value < 0 : value > 0 if (Math.abs(value) < 0.1) return 변화없음 return ( {isPositive ? "개선" : "주의"} {value > 0 ? "+" : ""} {value.toFixed(1)} ) } const chartData = filteredMetrics.map((m) => ({ date: new Date(m.measured_at).toLocaleDateString("ko-KR", { month: "short", day: "numeric" }), fullDate: new Date(m.measured_at).toLocaleDateString("ko-KR"), 체중: m.weight, 체지방률: m.body_fat_percentage, 근육량: m.muscle_mass, 제지방량: m.lean_body_mass, 골격근량: m.skeletal_muscle_mass, BMI: m.bmi, 수축기혈압: m.blood_pressure_systolic, 이완기혈압: m.blood_pressure_diastolic, 혈당: m.blood_sugar, 복부비만도: m.waist_hip_ratio, 내장지방: m.visceral_fat_level, })) if (loading) { return (

건강 지표를 불러오는 중...

) } if (!latestMetric) { return (

측정된 건강 지표가 없습니다

인바디 측정을 진행해주세요

) } return (

건강 지표 대시보드 {firstMetric && latestMetric && ( {new Date(firstMetric.measured_at).toLocaleDateString("ko-KR")} →{" "} {new Date(latestMetric.measured_at).toLocaleDateString("ko-KR")} )}

체중

{latestMetric.weight}kg

{comparison && firstMetric && (

{getTrendIcon(comparison.weight)} {getTrendBadge(comparison.weight, true)}

시작: {firstMetric.weight}kg

)} 체지방률

{latestMetric.body_fat_percentage}%

{comparison && firstMetric && (

{getTrendIcon(comparison.bodyFat)} {getTrendBadge(comparison.bodyFat, true)}

시작: {firstMetric.body_fat_percentage}%

)} 근육량

{latestMetric.muscle_mass}kg

{comparison && firstMetric && (

{getTrendIcon(comparison.muscleMass)} {getTrendBadge(comparison.muscleMass)}

시작: {firstMetric.muscle_mass}kg

)} 골격근량

{latestMetric.skeletal_muscle_mass}kg

{comparison && firstMetric && (

{getTrendIcon(comparison.skeletalMuscleMass)} {getTrendBadge(comparison.skeletalMuscleMass)}

시작: {firstMetric.skeletal_muscle_mass}kg

)}

{/* 상세 지표 탭 */} 체성분 바이탈 추이 분석

체성분 분석 인바디 측정 결과

제지방량

{latestMetric.lean_body_mass}kg {comparison && comparison.leanBodyMass !== 0 && (

{comparison.leanBodyMass > 0 ? "+" : ""} {comparison.leanBodyMass.toFixed(1)}kg

)}

골격근량

{latestMetric.skeletal_muscle_mass}kg {comparison && comparison.skeletalMuscleMass !== 0 && (

{comparison.skeletalMuscleMass > 0 ? "+" : ""} {comparison.skeletalMuscleMass.toFixed(1)}kg

)}

체수분률 {latestMetric.body_water_percentage}%

단백질량 {latestMetric.protein_mass}kg

비만 지표 건강 위험도 평가

BMI

{latestMetric.bmi} {comparison && comparison.bmi !== 0 && (

{comparison.bmi > 0 ? "+" : ""} {comparison.bmi.toFixed(1)}

)}

복부비만도 {latestMetric.waist_hip_ratio}

내장지방 레벨 {latestMetric.visceral_fat_level}

기초대사량 {latestMetric.basal_metabolic_rate}kcal

체성분 변화 추이 근육량과 제지방량의 변화 건강 바이탈 혈압, 혈당 등 건강 지표

혈압 {latestMetric.blood_pressure_systolic}/{latestMetric.blood_pressure_diastolic} mmHg

{comparison && firstMetric && comparison.bloodPressure !== 0 && (

변화량

{getTrendIcon(comparison.bloodPressure)} {Math.abs(comparison.bloodPressure).toFixed(0)}mmHg{" "} {comparison.bloodPressure > 0 ? "상승" : "하락"}

)}

혈당 {latestMetric.blood_sugar} mg/dL

{comparison && firstMetric && comparison.bloodSugar !== 0 && (

변화량

{getTrendIcon(comparison.bloodSugar)} {Math.abs(comparison.bloodSugar).toFixed(1)}mg/dL{" "} {comparison.bloodSugar > 0 ? "상승" : "하락"}

)}

안정시 심박수 {latestMetric.resting_heart_rate} bpm

바이탈 사인 추이 혈압과 혈당의 변화 체중 & 체지방률 추이 운동 전후 체중과 체지방률 변화 근육 발달 추이 근육량과 골격근량의 성장 그래프 비만 지표 추이 BMI, 복부비만도, 내장지방 레벨 {filteredMetrics.length > 1 && ( 측정 이력 총 {filteredMetrics.length}회 측정

{filteredMetrics .slice() .reverse() .slice(0, 5) .map((metric, idx) => (

{new Date(metric.measured_at).toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", })}

체중: {metric.weight}kg 체지방: {metric.body_fat_percentage}% 근육: {metric.muscle_mass}kg

{metric.measurement_type === "initial" ? "초기" : metric.measurement_type === "final" ? "최종" : "정기"}

))}

)} {latestMetric.notes && ( 측정 메모

{latestMetric.notes}

)}

) } [V0_FILE]sql:file="scripts/005_center_management_schema.sql" isMerged="true" -- ============================================================================ -- 센터 관리 스키마 -- Equipment, Maintenance, Staff, Payments, Announcements -- ============================================================================ -- 1. 운동 기기 테이블 CREATE TABLE IF NOT EXISTS equipment ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), equipment_name TEXT NOT NULL, equipment_type TEXT NOT NULL, -- 예: '유산소', '근력', '프리웨이트' manufacturer TEXT, model_number TEXT, serial_number TEXT UNIQUE, purchase_date DATE, last_maintenance_date DATE, iot_sensor_id TEXT UNIQUE, -- IoT 센서 ID location_zone TEXT, -- 배치 위치 status TEXT DEFAULT 'active', -- 'active', 'maintenance', 'retired' created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- 2. 기기 사용 로그 (활용도 측정) CREATE TABLE IF NOT EXISTS equipment_usage ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), equipment_id UUID NOT NULL REFERENCES equipment(id) ON DELETE CASCADE, user_id TEXT, -- 사용자 (optional) started_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), ended_at TIMESTAMPTZ, duration_minutes INTEGER, -- 사용 시간 created_at TIMESTAMPTZ DEFAULT NOW() ); -- 3. 예지보전 데이터 (IoT 센서 기반) CREATE TABLE IF NOT EXISTS equipment_maintenance ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), equipment_id UUID NOT NULL REFERENCES equipment(id) ON DELETE CASCADE, check_date TIMESTAMPTZ DEFAULT NOW(), -- 센서 데이터 vibration_level NUMERIC, -- 진동 수치 temperature NUMERIC, -- 온도 noise_level NUMERIC, -- 소음 수치 usage_count INTEGER, -- 누적 사용 횟수 -- 상태 평가 wear_status TEXT, -- 'good', 'warning', 'critical' predicted_failure_date DATE, -- AI 예측 고장일 maintenance_needed BOOLEAN DEFAULT FALSE, parts_to_replace TEXT[], -- 교체 필요 부품 리스트 notes TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- 4. 회원 등급/요금제 CREATE TABLE IF NOT EXISTS membership_plans ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), plan_name TEXT NOT NULL UNIQUE, -- '일반', '프리미엄', 'VIP' 등 monthly_fee INTEGER NOT NULL, -- 월 회비 duration_months INTEGER NOT NULL, -- 기간 (개월) benefits TEXT[], -- 혜택 목록 created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- 5. 회원 회비 납부 내역 CREATE TABLE IF NOT EXISTS payments ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES profiles(id) ON DELETE CASCADE, plan_id UUID REFERENCES membership_plans(id), payment_date DATE NOT NULL DEFAULT CURRENT_DATE, amount INTEGER NOT NULL, payment_method TEXT, -- '카드', '현금', '계좌이체' 등 status TEXT DEFAULT 'completed', -- 'completed', 'pending', 'failed' start_date DATE NOT NULL, -- 회원권 시작일 end_date DATE NOT NULL, -- 회원권 종료일 notes TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- 6. 직원 정보 CREATE TABLE IF NOT EXISTS staff ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), staff_id TEXT NOT NULL UNIQUE, -- 직원 번호 full_name TEXT NOT NULL, position TEXT NOT NULL, -- '트레이너', '매니저', '청소' 등 rf_card_id TEXT UNIQUE, -- RF 칩 ID (근태 관리용) phone TEXT, email TEXT, hire_date DATE NOT NULL, status TEXT DEFAULT 'active', -- 'active', 'on_leave', 'resigned' created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- 7. 직원 근태 기록 CREATE TABLE IF NOT EXISTS staff_attendance ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), staff_id UUID NOT NULL REFERENCES staff(id) ON DELETE CASCADE, check_in_time TIMESTAMPTZ, check_out_time TIMESTAMPTZ, work_date DATE NOT NULL DEFAULT CURRENT_DATE, status TEXT, -- 'present', 'late', 'absent', 'half_day' notes TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- 8. 센터 공지사항 CREATE TABLE IF NOT EXISTS announcements ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), title TEXT NOT NULL, content TEXT NOT NULL, target_audience TEXT DEFAULT 'all', -- 'all', 'members', 'staff' priority TEXT DEFAULT 'normal', -- 'low', 'normal', 'high', 'urgent' send_sms BOOLEAN DEFAULT FALSE, send_push BOOLEAN DEFAULT FALSE, scheduled_at TIMESTAMPTZ, sent_at TIMESTAMPTZ, created_by UUID, -- 작성자 (staff id) created_at TIMESTAMPTZ DEFAULT NOW() ); -- 인덱스 생성 CREATE INDEX IF NOT EXISTS idx_equipment_status ON equipment(status); CREATE INDEX IF NOT EXISTS idx_equipment_usage_equipment ON equipment_usage(equipment_id); CREATE INDEX IF NOT EXISTS idx_equipment_usage_started ON equipment_usage(started_at); CREATE INDEX IF NOT EXISTS idx_maintenance_equipment ON equipment_maintenance(equipment_id); CREATE INDEX IF NOT EXISTS idx_maintenance_check_date ON equipment_maintenance(check_date); CREATE INDEX IF NOT EXISTS idx_payments_user ON payments(user_id); CREATE INDEX IF NOT EXISTS idx_payments_date ON payments(payment_date); CREATE INDEX IF NOT EXISTS idx_staff_attendance_staff ON staff_attendance(staff_id); CREATE INDEX IF NOT EXISTS idx_staff_attendance_date ON staff_attendance(work_date); CREATE INDEX IF NOT EXISTS idx_announcements_created ON announcements(created_at); -- RLS 정책 활성화 ALTER TABLE equipment ENABLE ROW LEVEL SECURITY; ALTER TABLE equipment_usage ENABLE ROW LEVEL SECURITY; ALTER TABLE equipment_maintenance ENABLE ROW LEVEL SECURITY; ALTER TABLE membership_plans ENABLE ROW LEVEL SECURITY; ALTER TABLE payments ENABLE ROW LEVEL SECURITY; ALTER TABLE staff ENABLE ROW LEVEL SECURITY; ALTER TABLE staff_attendance ENABLE ROW LEVEL SECURITY; ALTER TABLE announcements ENABLE ROW LEVEL SECURITY; -- 관리자(서비스 역할)는 모든 데이터 접근 가능 CREATE POLICY "Service role can manage equipment" ON equipment FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage equipment_usage" ON equipment_usage FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage maintenance" ON equipment_maintenance FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage membership_plans" ON membership_plans FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage payments" ON payments FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage staff" ON staff FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage staff_attendance" ON staff_attendance FOR ALL USING (auth.role() = 'service_role'); CREATE POLICY "Service role can manage announcements" ON announcements FOR ALL USING (auth.role() = 'service_role'); -- 회원은 자신의 결제 내역만 조회 가능 CREATE POLICY "Users can view their own payments" ON payments FOR SELECT USING (auth.uid() = user_id); -- 회원은 공지사항 조회 가능 CREATE POLICY "Users can view announcements" ON announcements FOR SELECT USING (target_audience IN ('all', 'members')); -- 트리거: updated_at 자동 업데이트 CREATE OR REPLACE FUNCTION update_updated_at_column() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ LANGUAGE plpgsql; CREATE TRIGGER update_equipment_updated_at BEFORE UPDATE ON equipment FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); CREATE TRIGGER update_membership_plans_updated_at BEFORE UPDATE ON membership_plans FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); CREATE TRIGGER update_staff_updated_at BEFORE UPDATE ON staff FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); [V0_FILE]sql:file="scripts/006_insert_center_sample_data.sql" isMerged="true" -- ============================================================================ -- 센터 관리 샘플 데이터 -- ============================================================================ -- 1. 운동 기기 데이터 INSERT INTO equipment (equipment_name, equipment_type, manufacturer, model_number, serial_number, iot_sensor_id, location_zone, status) VALUES ('트레드밀 #1', '유산소', 'Life Fitness', 'T5-GO', 'TM-001', 'IOT-TM-001', 'A구역', 'active'), ('트레드밀 #2', '유산소', 'Life Fitness', 'T5-GO', 'TM-002', 'IOT-TM-002', 'A구역', 'active'), ('일립티컬 #1', '유산소', 'Precor', 'EFX-885', 'EL-001', 'IOT-EL-001', 'A구역', 'active'), ('로잉머신 #1', '유산소', 'Concept2', 'Model D', 'RW-001', 'IOT-RW-001', 'A구역', 'active'), ('레그프레스 #1', '근력', 'Hammer Strength', 'LP-450', 'LP-001', 'IOT-LP-001', 'B구역', 'active'), ('레그프레스 #2', '근력', 'Hammer Strength', 'LP-450', 'LP-002', 'IOT-LP-002', 'B구역', 'active'), ('체스트프레스 #1', '근력', 'Hammer Strength', 'CP-300', 'CP-001', 'IOT-CP-001', 'B구역', 'active'), ('숄더프레스 #1', '근력', 'Hammer Strength', 'SP-250', 'SP-001', 'IOT-SP-001', 'B구역', 'maintenance'), ('랫풀다운 #1', '근력', 'Life Fitness', 'LP-200', 'LD-001', 'IOT-LD-001', 'C구역', 'active'), ('케이블크로스 #1', '근력', 'Life Fitness', 'CC-500', 'CC-001', 'IOT-CC-001', 'C구역', 'active'), ('스쿼트랙 #1', '프리웨이트', 'Rogue Fitness', 'R3-SQ', 'SR-001', 'IOT-SR-001', 'D구역', 'active'), ('벤치프레스 #1', '프리웨이트', 'Rogue Fitness', 'BP-FLAT', 'BP-001', 'IOT-BP-001', 'D구역', 'active'), ('덤벨랙', '프리웨이트', 'York Barbell', 'DB-RACK-3T', 'DR-001', 'IOT-DR-001', 'D구역', 'active'); -- 2. 예지보전 데이터 INSERT INTO equipment_maintenance (equipment_id, vibration_level, temperature, noise_level, usage_count, wear_status, maintenance_needed, parts_to_replace, notes) SELECT id, CASE WHEN random() < 0.3 THEN 0.5 + random() * 0.3 WHEN random() < 0.6 THEN 0.8 + random() * 0.5 ELSE 1.3 + random() * 0.7 END as vibration_level, 20 + random() * 15 as temperature, 40 + random() * 30 as noise_level, FLOOR(random() * 5000 + 1000)::INTEGER as usage_count, CASE WHEN random() < 0.7 THEN 'good' WHEN random() < 0.9 THEN 'warning' ELSE 'critical' END as wear_status, random() < 0.2 as maintenance_needed, CASE WHEN random() < 0.2 THEN ARRAY['벨트 교체', '윤활유'] WHEN random() < 0.4 THEN ARRAY['케이블 점검'] ELSE NULL END as parts_to_replace, '정기 점검 완료' as notes FROM equipment; -- 3. 회원 등급/요금제 INSERT INTO membership_plans (plan_name, monthly_fee, duration_months, benefits) VALUES ('기본', 50000, 1, ARRAY['기본 시설 이용', '샤워실 이용']), ('프리미엄', 80000, 3, ARRAY['기본 시설 이용', '샤워실 이용', 'GX 수업 무제한', '사물함 제공']), ('VIP', 120000, 6, ARRAY['기본 시설 이용', '샤워실 이용', 'GX 수업 무제한', '사물함 제공', 'PT 2회/월', '인바디 측정 무제한']), ('연간', 500000, 12, ARRAY['기본 시설 이용', '샤워실 이용', 'GX 수업 무제한', '사물함 제공', 'PT 4회/월', '인바디 측정 무제한', '게스트 동반 2회/월']); -- 4. 직원 정보 INSERT INTO staff (staff_id, full_name, position, rf_card_id, phone, email, hire_date, status) VALUES ('STAFF-001', '김트레이너', '트레이너', 'RF-STAFF-001', '010-1111-2222', 'trainer.kim@gym.com', '2023-01-15', 'active'), ('STAFF-002', '이코치', '트레이너', 'RF-STAFF-002', '010-3333-4444', 'coach.lee@gym.com', '2023-03-01', 'active'), ('STAFF-003', '박매니저', '매니저', 'RF-STAFF-003', '010-5555-6666', 'manager.park@gym.com', '2022-06-01', 'active'), ('STAFF-004', '최청소', '청소', 'RF-STAFF-004', '010-7777-8888', 'cleaning.choi@gym.com', '2023-09-01', 'active'); -- 5. 직원 근태 기록 (최근 7일) INSERT INTO staff_attendance (staff_id, check_in_time, check_out_time, work_date, status) SELECT s.id, (CURRENT_DATE - i + INTERVAL '9 hours')::TIMESTAMPTZ, (CURRENT_DATE - i + INTERVAL '18 hours')::TIMESTAMPTZ, CURRENT_DATE - i, CASE WHEN random() < 0.9 THEN 'present' WHEN random() < 0.95 THEN 'late' ELSE 'absent' END FROM staff s CROSS JOIN generate_series(0, 6) as i; -- 6. 공지사항 INSERT INTO announcements (title, content, target_audience, priority, created_at) VALUES ('신규 GX 프로그램 오픈', '7월부터 요가, 필라테스, 스피닝 클래스가 새롭게 오픈됩니다.', 'members', 'high', NOW() - INTERVAL '2 days'), ('여름 휴가 안내', '8월 15일은 광복절로 휴관합니다.', 'all', 'normal', NOW() - INTERVAL '5 days'), ('직원 회의 공지', '매주 월요일 오전 9시 정기 회의가 있습니다.', 'staff', 'normal', NOW() - INTERVAL '1 week'); [V0_FILE]typescript:file="types/supabase.ts" isEdit="true" isQuickEdit="true" isMerged="true" // ============================================================================ // Supabase Type Definitions // Based on Palantir Ontology Concept // ============================================================================ // ============================================================================ // 1. DATABASE TABLES (Raw table structure) // ============================================================================ export interface Database { public: { Tables: { profiles: { Row: Profile Insert: ProfileInsert Update: ProfileUpdate } workout_logs: { Row: WorkoutLog Insert: WorkoutLogInsert Update: WorkoutLogUpdate } health_metrics: { Row: HealthMetric Insert: HealthMetricInsert Update: never // Assuming health metrics are not updatable } equipment: { Row: Equipment Insert: Equipment Update: Equipment } equipment_usage: { Row: EquipmentUsage Insert: EquipmentUsage Update: EquipmentUsage } equipment_maintenance: { Row: EquipmentMaintenance Insert: EquipmentMaintenance Update: EquipmentMaintenance } membership_plans: { Row: MembershipPlan Insert: MembershipPlan Update: MembershipPlan } payments: { Row: Payment Insert: Payment Update: Payment } staff: { Row: Staff Insert: Staff Update: Staff } staff_attendance: { Row: StaffAttendance Insert: StaffAttendance Update: StaffAttendance } announcements: { Row: Announcement Insert: Announcement Update: Announcement } } Views: { [_ in never]: never } Functions: { [_ in never]: never } Enums: { [_ in never]: never } } } // ============================================================================ // 2. PROFILES (Member Object) // ============================================================================ /** * Profile represents a gym member * 1:1 relationship with auth.users */ export interface Profile { id: string // UUID, FK to auth.users(id) full_name: string rf_card_id: string // Unique RF chip ID height: number | null // in cm weight: number | null // in kg target_goal: string | null created_at: string updated_at: string } /** * Type for inserting a new profile */ export interface ProfileInsert { id: string // Must match auth.users.id full_name: string rf_card_id: string height?: number | null weight?: number | null target_goal?: string | null } /** * Type for updating a profile */ export interface ProfileUpdate { full_name?: string rf_card_id?: string height?: number | null weight?: number | null target_goal?: string | null } // ============================================================================ // 3. WORKOUT_LOGS (Event Object) // ============================================================================ /** * WorkoutLog represents a single workout event * Links to profiles via user_id (FK) */ export interface WorkoutLog { id: string // UUID user_id: string // FK to profiles(id) exercise_name: string // e.g., "벤치프레스", "스쿼트" weight: number | null // in kg reps: number sets: number iot_device_id: string | null avg_velocity: number | null // VBT data (m/s) peak_power: number | null // Power data (watts) ai_feedback: string | null created_at: string } /** * Type for inserting a new workout log */ export interface WorkoutLogInsert { user_id: string // FK to profiles(id) exercise_name: string weight?: number | null reps: number sets?: number iot_device_id?: string | null avg_velocity?: number | null peak_power?: number | null ai_feedback?: string | null } /** * Type for updating a workout log */ export interface WorkoutLogUpdate { exercise_name?: string weight?: number | null reps?: number sets?: number iot_device_id?: string | null avg_velocity?: number | null peak_power?: number | null ai_feedback?: string | null } // ============================================================================ // 4. JOINED DATA TYPES (For queries with relationships) // ============================================================================ /** * WorkoutLog with member information * Used when querying workout logs with profile data */ export interface WorkoutLogWithProfile extends WorkoutLog { profiles?: { full_name: string rf_card_id: string height: number | null weight: number | null } } /** * Profile with workout statistics * Used for dashboard views */ export interface ProfileWithStats extends Profile { total_workouts?: number last_workout_date?: string | null favorite_exercise?: string | null } /** * Equipment with latest maintenance data */ export interface EquipmentWithMaintenance extends Equipment { latest_maintenance?: EquipmentMaintenance usage_today?: number usage_this_week?: number } /** * Staff with attendance record */ export interface StaffWithAttendance extends Staff { today_attendance?: StaffAttendance attendance_rate?: number } /** * Payment with member info */ export interface PaymentWithMember extends Payment { member_name?: string plan_name?: string } // ============================================================================ // 5. HELPER TYPES // ============================================================================ /** * RF Card scanning result */ export interface RFCardScanResult { rf_card_id: string profile: Profile | null status: "found" | "not_found" } /** * Workout summary for analytics */ export interface WorkoutSummary { user_id: string full_name: string total_sessions: number total_reps: number total_weight_lifted: number // in kg most_common_exercise: string last_workout_date: string } // ============================================================================ // 6. FORM TYPES (For UI components) // ============================================================================ /** * Form data for creating a new profile */ export interface ProfileFormData { full_name: string rf_card_id: string height: number | null weight: number | null target_goal: string } /** * Form data for logging a workout */ export interface WorkoutLogFormData { exercise_name: string weight: number reps: number sets: number iot_device_id?: string } // ============================================================================ // 7. HEALTH METRICS (InBody Measurements) // ============================================================================ /** * HealthMetric represents InBody measurement data * Tracks member's health indicators over time */ export interface HealthMetric { id: string // UUID user_id: string // FK to profiles(id) measured_at: string // Measurement timestamp measurement_type: "initial" | "regular" | "final" // Body Composition weight: number | null // 체중 (kg) body_fat_percentage: number | null // 체지방률 (%) muscle_mass: number | null // 근육량 (kg) lean_body_mass: number | null // 제지방량 (kg) skeletal_muscle_mass: number | null // 골격근량 (kg) // Obesity Indicators bmi: number | null // BMI waist_hip_ratio: number | null // 복부비만도 visceral_fat_level: number | null // 내장지방 레벨 // Body Water & Minerals body_water_percentage: number | null // 체수분률 (%) protein_mass: number | null // 단백질량 (kg) mineral_mass: number | null // 무기질량 (kg) // Vital Signs blood_pressure_systolic: number | null // 수축기 혈압 blood_pressure_diastolic: number | null // 이완기 혈압 blood_sugar: number | null // 혈당 (mg/dL) resting_heart_rate: number | null // 안정시 심박수 // Metabolic Rate basal_metabolic_rate: number | null // 기초대사량 (kcal) notes: string | null created_at: string updated_at: string } /** * Type for inserting a new health metric */ export interface HealthMetricInsert { user_id: string measured_at?: string measurement_type?: "initial" | "regular" | "final" weight?: number | null body_fat_percentage?: number | null muscle_mass?: number | null lean_body_mass?: number | null skeletal_muscle_mass?: number | null bmi?: number | null waist_hip_ratio?: number | null visceral_fat_level?: number | null body_water_percentage?: number | null protein_mass?: number | null mineral_mass?: number | null blood_pressure_systolic?: number | null blood_pressure_diastolic?: number | null blood_sugar?: number | null resting_heart_rate?: number | null basal_metabolic_rate?: number | null notes?: string | null } /** * Health metrics comparison (before/after) */ export interface HealthMetricComparison { before: HealthMetric after: HealthMetric changes: { weight: number body_fat_percentage: number muscle_mass: number lean_body_mass: number skeletal_muscle_mass: number bmi: number waist_hip_ratio: number visceral_fat_level: number } } // ============================================================================ // 8. CENTER MANAGEMENT TYPES // ============================================================================ /** * Equipment (운동 기기) */ export interface Equipment { id: string equipment_name: string equipment_type: string manufacturer: string | null model_number: string | null serial_number: string | null purchase_date: string | null last_maintenance_date: string | null iot_sensor_id: string | null location_zone: string | null status: "active" | "maintenance" | "retired" created_at: string updated_at: string } /** * Equipment Usage (기기 사용 로그) */ export interface EquipmentUsage { id: string equipment_id: string user_id: string | null started_at: string ended_at: string | null duration_minutes: number | null created_at: string } /** * Equipment Maintenance (예지보전) */ export interface EquipmentMaintenance { id: string equipment_id: string check_date: string vibration_level: number | null temperature: number | null noise_level: number | null usage_count: number | null wear_status: "good" | "warning" | "critical" | null predicted_failure_date: string | null maintenance_needed: boolean parts_to_replace: string[] | null notes: string | null created_at: string } /** * Membership Plan (회원 등급/요금제) */ export interface MembershipPlan { id: string plan_name: string monthly_fee: number duration_months: number benefits: string[] created_at: string updated_at: string } /** * Payment (회비 납부) */ export interface Payment { id: string user_id: string plan_id: string | null payment_date: string amount: number payment_method: string | null status: "completed" | "pending" | "failed" start_date: string end_date: string notes: string | null created_at: string } /** * Staff (직원) */ export interface Staff { id: string staff_id: string full_name: string position: string rf_card_id: string | null phone: string | null email: string | null hire_date: string status: "active" | "on_leave" | "resigned" created_at: string updated_at: string } /** * Staff Attendance (직원 근태) */ export interface StaffAttendance { id: string staff_id: string check_in_time: string | null check_out_time: string | null work_date: string status: "present" | "late" | "absent" | "half_day" | null notes: string | null created_at: string } /** * Announcement (공지사항) */ export interface Announcement { id: string title: string content: string target_audience: "all" | "members" | "staff" priority: "low" | "normal" | "high" | "urgent" send_sms: boolean send_push: boolean scheduled_at: string | null sent_at: string | null created_by: string | null created_at: string } [V0_FILE]typescriptreact:file="components/equipment-dashboard.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { AlertTriangle, Activity, MapPin } from "lucide-react" import { supabase } from "@/lib/supabase/client" import type { Equipment, EquipmentMaintenance } from "@/types/supabase" interface EquipmentWithStatus extends Equipment { latest_maintenance?: EquipmentMaintenance } export function EquipmentDashboard() { const [equipment, setEquipment] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchEquipmentData() }, []) async function fetchEquipmentData() { const { data: equipmentData } = await supabase .from("equipment") .select("*") .order("location_zone", { ascending: true }) if (equipmentData) { // Fetch latest maintenance for each equipment const equipmentWithMaintenance = await Promise.all( equipmentData.map(async (eq) => { const { data: maintenance } = await supabase .from("equipment_maintenance") .select("*") .eq("equipment_id", eq.id) .order("check_date", { ascending: false }) .limit(1) .single() return { ...eq, latest_maintenance: maintenance || undefined, } }), ) setEquipment(equipmentWithMaintenance) } setLoading(false) } const getStatusBadge = (status: string) => { switch (status) { case "active": return 정상 case "maintenance": return 점검중 case "retired": return 사용중지 default: return {status} } } const getWearStatusBadge = (status: string | null | undefined) => { switch (status) { case "good": return ( 양호 ) case "warning": return ( 주의 ) case "critical": return 긴급 default: return 미측정 } } // 구역별로 그룹화 const groupedEquipment = equipment.reduce( (acc, eq) => { const zone = eq.location_zone || "미배치" if (!acc[zone]) acc[zone] = [] acc[zone].push(eq) return acc }, {} as Record, ) return ( 기기별 활용상황 기기 상태 및 배치 현황 {loading ? (

로딩 중...

) : (

{Object.entries(groupedEquipment).map(([zone, equipmentList]) => (

{zone}

{equipmentList.length}대

{equipmentList.map((eq) => (

{eq.equipment_name}

{getStatusBadge(eq.status)}

{eq.equipment_type} • {eq.manufacturer}

{eq.iot_sensor_id && (

센서: {eq.iot_sensor_id}

)}

{eq.latest_maintenance && getWearStatusBadge(eq.latest_maintenance.wear_status)}

{eq.latest_maintenance && (

진동:{" "} {eq.latest_maintenance.vibration_level?.toFixed(2) || "N/A"}

온도:{" "} {eq.latest_maintenance.temperature?.toFixed(1) || "N/A"}°C

사용횟수:{" "} {eq.latest_maintenance.usage_count || 0}회

{eq.latest_maintenance.maintenance_needed && (

정비 필요

{eq.latest_maintenance.parts_to_replace && eq.latest_maintenance.parts_to_replace.length > 0 && (

교체 부품: {eq.latest_maintenance.parts_to_replace.join(", ")}

)}

))}

)} ) } [V0_FILE]typescriptreact:file="components/center-operations.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Users, DollarSign, MessageSquare, Send, TrendingUp } from "lucide-react" import { supabase } from "@/lib/supabase/client" import type { MembershipPlan, Payment, Announcement } from "@/types/supabase" export function CenterOperations() { const [membershipPlans, setMembershipPlans] = useState([]) const [payments, setPayments] = useState([]) const [announcements, setAnnouncements] = useState([]) const [newAnnouncement, setNewAnnouncement] = useState({ title: "", content: "" }) const [sending, setSending] = useState(false) useEffect(() => { fetchOperationsData() }, []) async function fetchOperationsData() { // Fetch membership plans const { data: plans } = await supabase .from("membership_plans") .select("*") .order("monthly_fee", { ascending: true }) // Fetch payments (last 30 days) const thirtyDaysAgo = new Date() thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30) const { data: paymentsData } = await supabase .from("payments") .select("*") .gte("payment_date", thirtyDaysAgo.toISOString()) .order("payment_date", { ascending: false }) // Fetch recent announcements const { data: announcementsData } = await supabase .from("announcements") .select("*") .order("created_at", { ascending: false }) .limit(5) setMembershipPlans(plans || []) setPayments(paymentsData || []) setAnnouncements(announcementsData || []) } const handleSendAnnouncement = async () => { if (!newAnnouncement.title || !newAnnouncement.content) { alert("제목과 내용을 입력해주세요.") return } setSending(true) const { error } = await supabase.from("announcements").insert({ title: newAnnouncement.title, content: newAnnouncement.content, target_audience: "members", priority: "normal", send_push: true, }) if (!error) { alert("공지사항이 전송되었습니다!") setNewAnnouncement({ title: "", content: "" }) fetchOperationsData() } else { alert("전송 실패: " + error.message) } setSending(false) } // 회원수 통계 (회비 납부 기록으로 추정) const activeMembersCount = new Set(payments.map((p) => p.user_id)).size const totalRevenue = payments.reduce((sum, p) => sum + p.amount, 0) // 등급별 회원수 (납부 기록으로 추정) const membersByPlan = payments.reduce( (acc, payment) => { const planId = payment.plan_id || "미정" acc[planId] = (acc[planId] || 0) + 1 return acc }, {} as Record, ) return (

센터 운영 현황 회원 통계 및 수익 관리

활성 회원수

{activeMembersCount}명

최근 30일 수익

{totalRevenue.toLocaleString()}원

회원 등급 수익 현황 공지사항 회원 등급별 현황

{membershipPlans.map((plan) => (

{plan.plan_name}

월 {plan.monthly_fee.toLocaleString()}원 • {plan.duration_months}개월

{membersByPlan[plan.id] || 0}명

))}

최근 회비 납부 내역

{payments.slice(0, 10).map((payment) => (

{payment.amount.toLocaleString()}원

{new Date(payment.payment_date).toLocaleDateString("ko-KR")} • {payment.payment_method}

{payment.status === "completed" ? "완료" : payment.status}

))}

공지사항 작성

제목 setNewAnnouncement({ ...newAnnouncement, title: e.target.value })} />

내용

setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
                  rows={4}
                />
              </div>
              <Button onClick={handleSendAnnouncement} disabled={sending} className="w-full">
                <Send className="h-4 w-4 mr-2" />
                {sending ? "전송 중..." : "회원에게 전송"}
              </Button>

<div className="pt-4 border-t space-y-2">
                <p className="text-sm font-medium">최근 공지사항</p>
                {announcements.map((ann) => (
                  <div key={ann.id} className="p-3 rounded-lg border bg-card">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <p className="font-medium text-sm">{ann.title}</p>
                        <p className="text-xs text-muted-foreground mt-1">{ann.content}</p>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {new Date(ann.created_at).toLocaleDateString("ko-KR")}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/staff-attendance-widget.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Clock, UserCheck } from "lucide-react"
import { supabase } from "@/lib/supabase/client"
import type { Staff, StaffAttendance } from "@/types/supabase"

interface StaffWithTodayAttendance extends Staff {
  today_attendance?: StaffAttendance
}

export function StaffAttendanceWidget() {
  const [staff, setStaff] = useState<StaffWithTodayAttendance[]>([])
  const [loading, setLoading] = useState(true)

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

async function fetchStaffAttendance() {
    const today = new Date().toISOString().split("T")[0]

const { data: staffData } = await supabase
      .from("staff")
      .select("*")
      .eq("status", "active")
      .order("full_name", { ascending: true })

if (staffData) {
      const staffWithAttendance = await Promise.all(
        staffData.map(async (s) => {
          const { data: attendance } = await supabase
            .from("staff_attendance")
            .select("*")
            .eq("staff_id", s.id)
            .eq("work_date", today)
            .single()

return {
            ...s,
            today_attendance: attendance || undefined,
          }
        }),
      )

setStaff(staffWithAttendance)
    }
    setLoading(false)
  }

const getAttendanceStatus = (attendance?: StaffAttendance) => {
    if (!attendance || !attendance.check_in_time) {
      return <Badge variant="secondary">미출근</Badge>
    }
    if (attendance.check_out_time) {
      return (
        <Badge variant="outline" className="text-gray-600">
          퇴근완료
        </Badge>
      )
    }
    if (attendance.status === "late") {
      return <Badge className="bg-yellow-500">지각</Badge>
    }
    return <Badge className="bg-green-500">근무중</Badge>
  }

const formatTime = (timeString?: string | null) => {
    if (!timeString) return "-"
    return new Date(timeString).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <UserCheck className="h-5 w-5" />
          직원 근태 현황
        </CardTitle>
        <CardDescription>RF 칩 기반 출퇴근 관리</CardDescription>
      </CardHeader>
      <CardContent>
        {loading ? (
          <p className="text-sm text-muted-foreground">로딩 중...</p>
        ) : (
          <ScrollArea className="h-[300px]">
            <div className="space-y-3">
              {staff.map((s) => (
                <div key={s.id} className="p-3 rounded-lg border bg-card">
                  <div className="flex items-center justify-between mb-2">
                    <div>
                      <p className="font-medium">{s.full_name}</p>
                      <p className="text-xs text-muted-foreground">{s.position}</p>
                    </div>
                    {getAttendanceStatus(s.today_attendance)}
                  </div>
                  <div className="flex items-center gap-4 text-sm">
                    <div className="flex items-center gap-1">
                      <Clock className="h-3 w-3 text-muted-foreground" />
                      <span className="text-muted-foreground">출근:</span>
                      <span>{formatTime(s.today_attendance?.check_in_time)}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Clock className="h-3 w-3 text-muted-foreground" />
                      <span className="text-muted-foreground">퇴근:</span>
                      <span>{formatTime(s.today_attendance?.check_out_time)}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </ScrollArea>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/members-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { User } from "@/types/gym"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { supabase } from "@/lib/supabase/client"
import { useEffect, useState } from "react"
import { MemberDetailModal } from "./member-detail-modal"

interface MembersListProps {
  initialUsers: User[]
}

export function MembersList({ initialUsers }: MembersListProps) {
  const [users, setUsers] = useState<User[]>(initialUsers)
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null)
  const [selectedUserName, setSelectedUserName] = useState<string>("")
  const [modalOpen, setModalOpen] = useState(false)

useEffect(() => {
    // Subscribe to real-time changes
    const channel = supabase
      .channel("users-changes")
      .on("postgres_changes", { event: "*", schema: "public", table: "users" }, (payload) => {
        if (payload.eventType === "INSERT") {
          setUsers((prev) => [payload.new as User, ...prev])
        } else if (payload.eventType === "UPDATE") {
          setUsers((prev) => prev.map((u) => (u.id === payload.new.id ? (payload.new as User) : u)))
        } else if (payload.eventType === "DELETE") {
          setUsers((prev) => prev.filter((u) => u.id !== payload.old.id))
        }
      })
      .subscribe()

return () => {
      supabase.removeChannel(channel)
    }
  }, [])

const handleMemberClick = (user: User) => {
    setSelectedUserId(user.id)
    setSelectedUserName(user.name)
    setModalOpen(true)
  }

return (
    <>
      <ScrollArea className="h-[400px]">
        <div className="space-y-3">
          {users.map((user) => (
            <div
              key={user.id}
              onClick={() => handleMemberClick(user)}
              className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors cursor-pointer"
            >
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <p className="font-medium">{user.name}</p>
                  <Badge variant={user.current_status === "in_gym" ? "default" : "secondary"}>
                    {user.current_status === "in_gym" ? "운동 중" : "퇴장"}
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground">
                  {user.user_id} • RF: {user.rf_chip_id}
                </p>
                {user.wearable_device && (
                  <p className="text-xs text-muted-foreground">웨어러블: {user.wearable_device}</p>
                )}
              </div>
            </div>
          ))}
        </div>
      </ScrollArea>

<MemberDetailModal
        userId={selectedUserId}
        userName={selectedUserName}
        open={modalOpen}
        onOpenChange={setModalOpen}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/center-view.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { User, WorkoutSession } from "@/types/gym"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, Dumbbell, TrendingUp } from "lucide-react"
import { MembersList } from "@/components/members-list"
import { EquipmentDashboard } from "@/components/equipment-dashboard"
import { CenterOperations } from "@/components/center-operations"
import { StaffAttendanceWidget } from "@/components/staff-attendance-widget"
import { RFChipScanner } from "@/components/rf-chip-scanner"
import { DataExport } from "@/components/data-export"

interface CenterViewProps {
  users: User[]
  sessions: WorkoutSession[]
}

export function CenterView({ users, sessions }: CenterViewProps) {
  const membersInGym = users?.filter((u) => u.current_status === "in_gym").length || 0
  const totalMembers = users?.length || 0
  const todaySessions =
    sessions?.filter((s) => {
      const sessionDate = new Date(s.timestamp)
      const today = new Date()
      return sessionDate.toDateString() === today.toDateString()
    }).length || 0

return (
    <div className="space-y-6">
      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">운동 중인 회원</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{membersInGym}명</div>
            <p className="text-xs text-muted-foreground">전체 {totalMembers}명 중</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">오늘 운동 세션</CardTitle>
            <Dumbbell className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{todaySessions}회</div>
            <p className="text-xs text-muted-foreground">전체 세션 {sessions?.length || 0}회</p>
          </CardContent>
        </Card>

{/* RF Chip Scanner */}
      <RFChipScanner />

{/* Main Content */}
      <div className="grid gap-6 lg:grid-cols-2">
        {/* Members List with clickable details */}
        <Card>
          <CardHeader>
            <CardTitle>회원 현황</CardTitle>
            <CardDescription>회원명을 클릭하여 상세 운동 기록을 확인하세요</CardDescription>
          </CardHeader>
          <CardContent>
            <MembersList initialUsers={users || []} />
          </CardContent>
        </Card>

{/* Staff Attendance */}
        <StaffAttendanceWidget />
      </div>

{/* Equipment Dashboard */}
      <EquipmentDashboard />

{/* Center Operations */}
      <CenterOperations />
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"
import type { SupabaseClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

declare global {
  var _supabase: SupabaseClient | undefined
}

const globalAny: any = typeof globalThis !== "undefined" ? globalThis : typeof global !== "undefined" ? global : {}

const supabaseClient = globalAny._supabase || createClient(supabaseUrl, supabaseKey)

if (typeof window === "undefined") {
  if (!globalAny._supabase) {
    globalAny._supabase = supabaseClient
  }
}

export const supabase = supabaseClient

// Legacy function for backward compatibility
export function getSupabaseClient() {
  return supabase
}
[V0_FILE]sql:file="scripts/007_fix_workout_logs_data.sql" isMerged="true"
-- 운동중인 회원들에게 실제 운동 기록 데이터 추가
-- profiles 테이블에 운동중인 회원 정보 추가 (auth.users와 연동하지 않고 독립적으로)
INSERT INTO profiles (id, full_name, rf_card_id, height, weight, target_goal)
SELECT 
  user_id,
  name,
  rf_chip_id,
  FLOOR(160 + random() * 30)::INTEGER,
  FLOOR(55 + random() * 35)::INTEGER,
  CASE 
    WHEN random() < 0.3 THEN '체중 감량'
    WHEN random() < 0.6 THEN '근육 증가'
    ELSE '체력 향상'
  END
FROM users
WHERE current_status = 'in_gym'
ON CONFLICT (id) DO NOTHING;

-- workout_logs 테이블에 운동중인 회원들의 최근 운동 기록 추가
INSERT INTO workout_logs (user_id, exercise_name, weight, reps, sets, iot_device_id, avg_velocity, peak_power, ai_feedback, created_at)
VALUES
  -- 김민수 (KR-1001)
  ('KR-1001', '레그프레스', 100, 10, 3, 'IOT-LP-001', 0.48, 350, '완벽한 속도입니다. 다음 세트 5kg 증량 추천.', NOW() - INTERVAL '30 minutes'),
  ('KR-1001', '스쿼트', 80, 8, 3, 'IOT-SR-001', 0.55, 380, '폼이 우수합니다. 현재 중량 유지.', NOW() - INTERVAL '45 minutes'),
  ('KR-1001', '카프레이즈', 60, 20, 3, 'IOT-CR-001', 0.35, 200, '종아리 지구력이 향상되었습니다.', NOW() - INTERVAL '15 minutes'),
  
  -- 박준영 (KR-1003)
  ('KR-1003', '벤치프레스', 70, 12, 3, 'IOT-BP-001', 0.42, 290, '속도가 약간 느립니다. 중량 10% 감소 추천.', NOW() - INTERVAL '1 hour'),
  ('KR-1003', '레그프레스', 95, 10, 3, 'IOT-LP-001', 0.47, 340, '아침보다 파워가 향상되었습니다.', NOW() - INTERVAL '25 minutes'),
  ('KR-1003', '복근운동', 40, 20, 3, 'IOT-AB-001', 0.32, 160, '복부 수축이 완전합니다.', NOW() - INTERVAL '10 minutes'),
  
  -- 최서연 (KR-1004)
  ('KR-1004', '랫풀다운', 50, 15, 3, 'IOT-LD-001', 0.40, 250, '동작 범위를 더 넓혀보세요.', NOW() - INTERVAL '50 minutes'),
  ('KR-1004', '스쿼트', 75, 8, 3, 'IOT-SR-001', 0.53, 370, '깊이가 완벽합니다.', NOW() - INTERVAL '30 minutes'),
  ('KR-1004', '백익스텐션', 15, 15, 3, 'IOT-BE-001', 0.30, 140, '척추 기립근이 잘 활성화됩니다.', NOW() - INTERVAL '12 minutes'),
  
  -- 강지은 (KR-1006)
  ('KR-1006', '레그익스텐션', 45, 12, 3, 'IOT-LE-001', 0.38, 220, '정확한 폼입니다. 반복 횟수 증가 추천.', NOW() - INTERVAL '40 minutes'),
  ('KR-1006', '벤치프레스', 65, 10, 3, 'IOT-BP-001', 0.45, 285, '가슴에 바를 완전히 내리고 있습니다.', NOW() - INTERVAL '22 minutes'),
  
  -- 임하나 (KR-1008)
  ('KR-1008', '체스트플라이', 25, 15, 3, 'IOT-CF-001', 0.35, 180, '천천히 수행하고 있습니다. 속도 향상 필요.', NOW() - INTERVAL '55 minutes'),
  ('KR-1008', '데드리프트', 100, 6, 3, 'IOT-DL-001', 0.58, 420, '등 자세가 훌륭합니다.', NOW() - INTERVAL '28 minutes'),
  ('KR-1008', '벤치프레스', 72, 10, 3, 'IOT-BP-001', 0.46, 295, '저녁에도 파워가 유지됩니다.', NOW() - INTERVAL '8 minutes'),
  
  -- 신유진 (KR-1010)
  ('KR-1010', '숄더프레스', 40, 10, 3, 'IOT-SP-001', 0.50, 280, '우수한 파워 출력입니다.', NOW() - INTERVAL '35 minutes'),
  ('KR-1010', '랫풀다운', 55, 12, 3, 'IOT-LD-001', 0.43, 260, '광배근 활성화가 잘 되고 있습니다.', NOW() - INTERVAL '18 minutes'),
  
  -- 조현우 (KR-1011)
  ('KR-1011', '데드리프트', 120, 5, 3, 'IOT-DL-001', 0.60, 450, '최고의 파워! 안전에 유의하세요.', NOW() - INTERVAL '1 hour 10 minutes'),
  ('KR-1011', '숄더프레스', 45, 10, 3, 'IOT-SP-001', 0.51, 290, '어깨 안정성이 좋습니다.', NOW() - INTERVAL '42 minutes'),
  ('KR-1011', '데드리프트', 115, 5, 3, 'IOT-DL-001', 0.59, 440, '고중량 데드리프트 성공!', NOW() - INTERVAL '15 minutes'),
  
  -- 서준혁 (KR-1013)
  ('KR-1013', '레그컬', 40, 12, 3, 'IOT-LC-001', 0.42, 240, '좋은 페이스입니다.', NOW() - INTERVAL '52 minutes'),
  ('KR-1013', '레그컬', 45, 12, 3, 'IOT-LC-001', 0.44, 250, '햄스트링 수축이 우수합니다.', NOW() - INTERVAL '27 minutes'),
  ('KR-1013', '랫풀다운', 52, 12, 3, 'IOT-LD-001', 0.42, 255, '등 너비 운동이 좋습니다.', NOW() - INTERVAL '5 minutes'),
  
  -- 황인범 (KR-1015)
  ('KR-1015', '케이블크로스오버', 30, 15, 3, 'IOT-CC-001', 0.38, 200, '지속적인 긴장감 유지 잘하고 있습니다.', NOW() - INTERVAL '48 minutes'),
  ('KR-1015', '체스트플라이', 28, 15, 3, 'IOT-CF-001', 0.37, 185, '동작 범위가 넓어졌습니다.', NOW() - INTERVAL '31 minutes'),
  ('KR-1015', '숄더프레스', 42, 10, 3, 'IOT-SP-001', 0.50, 285, '어깨 발달에 도움됩니다.', NOW() - INTERVAL '11 minutes'),
  
  -- 오민석 (KR-1017)
  ('KR-1017', '레그프레스', 90, 10, 3, 'IOT-LP-001', 0.45, 330, '표준 속도입니다. 다음 세트 증량 가능.', NOW() - INTERVAL '58 minutes'),
  ('KR-1017', '케이블크로스오버', 32, 15, 3, 'IOT-CC-001', 0.39, 205, '긴장감 유지가 완벽합니다.', NOW() - INTERVAL '33 minutes'),
  ('KR-1017', '체스트플라이', 27, 15, 3, 'IOT-CF-001', 0.36, 183, '마무리 운동으로 적합합니다.', NOW() - INTERVAL '9 minutes'),
  
  -- 송혜교 (KR-1018)
  ('KR-1018', '스미스머신', 60, 10, 3, 'IOT-SM-001', 0.48, 300, '안정적인 움직임입니다.', NOW() - INTERVAL '1 hour 5 minutes'),
  ('KR-1018', '레그익스텐션', 50, 12, 3, 'IOT-LE-001', 0.40, 230, '무릎 각도가 정확합니다.', NOW() - INTERVAL '38 minutes'),
  ('KR-1018', '케이블크로스오버', 31, 15, 3, 'IOT-CC-001', 0.38, 203, '가슴 펌핑이 잘 됩니다.', NOW() - INTERVAL '14 minutes'),
  
  -- 홍지민 (KR-1020)
  ('KR-1020', '핵스쿼트', 110, 8, 3, 'IOT-HS-001', 0.52, 400, '파워가 뛰어납니다!', NOW() - INTERVAL '44 minutes'),
  ('KR-1020', '스미스머신', 65, 10, 3, 'IOT-SM-001', 0.49, 310, '레일을 따라 완벽하게 움직입니다.', NOW() - INTERVAL '24 minutes'),
  ('KR-1020', '레그컬', 43, 12, 3, 'IOT-LC-001', 0.43, 245, '햄스트링 마무리가 좋습니다.', NOW() - INTERVAL '7 minutes'),
  
  -- 유재석 (KR-1022)
  ('KR-1022', '인클라인벤치', 55, 12, 3, 'IOT-IB-001', 0.44, 270, '상체 각도가 완벽합니다.', NOW() - INTERVAL '1 hour'),
  ('KR-1022', '핵스쿼트', 105, 8, 3, 'IOT-HS-001', 0.50, 390, '하체 파워가 강력합니다.', NOW() - INTERVAL '36 minutes'),
  ('KR-1022', '삼두운동', 36, 12, 3, 'IOT-TE-001', 0.43, 232, '삼두 펌핑이 완벽합니다.', NOW() - INTERVAL '13 minutes'),
  
  -- 이효리 (KR-1024)
  ('KR-1024', '펙덱', 35, 15, 3, 'IOT-PD-001', 0.36, 190, '수축 시간을 늘려보세요.', NOW() - INTERVAL '50 minutes'),
  ('KR-1024', '인클라인벤치', 50, 12, 3, 'IOT-IB-001', 0.43, 265, '상부 가슴에 집중되고 있습니다.', NOW() - INTERVAL '29 minutes'),
  ('KR-1024', '이두운동', 31, 15, 3, 'IOT-BC-001', 0.40, 212, '이두 마무리 운동 완료!', NOW() - INTERVAL '6 minutes'),
  
  -- 박나래 (KR-1025)
  ('KR-1025', '로잉머신', 50, 12, 3, 'IOT-RW-001', 0.58, 340, '훌륭한 당김 속도입니다.', NOW() - INTERVAL '1 hour 8 minutes'),
  ('KR-1025', '로잉머신', 55, 12, 3, 'IOT-RW-001', 0.60, 350, '등 두께 운동에 최적입니다.', NOW() - INTERVAL '41 minutes'),
  ('KR-1025', '카프레이즈', 62, 20, 3, 'IOT-CR-001', 0.35, 202, '종아리 운동으로 마무리합니다.', NOW() - INTERVAL '17 minutes'),
  
  -- 송지효 (KR-1027)
  ('KR-1027', '레그프레스', 85, 12, 3, 'IOT-LP-001', 0.46, 320, '균형잡힌 운동입니다.', NOW() - INTERVAL '54 minutes'),
  ('KR-1027', '펙덱', 38, 15, 3, 'IOT-PD-001', 0.38, 195, '가슴 중앙부 자극이 좋습니다.', NOW() - INTERVAL '34 minutes'),
  ('KR-1027', '복근운동', 42, 20, 3, 'IOT-AB-001', 0.33, 165, '복근 자극이 충분합니다.', NOW() - INTERVAL '10 minutes'),
  
  -- 지석진 (KR-1029)
  ('KR-1029', '이두운동', 30, 15, 3, 'IOT-BC-001', 0.40, 210, '팔 각도를 일정하게 유지하세요.', NOW() - INTERVAL '1 hour 2 minutes'),
  ('KR-1029', '삼두운동', 38, 12, 3, 'IOT-TE-001', 0.44, 235, '팔꿈치 고정이 완벽합니다.', NOW() - INTERVAL '39 minutes'),
  ('KR-1029', '백익스텐션', 18, 15, 3, 'IOT-BE-001', 0.31, 145, '허리 강화 운동 완료.', NOW() - INTERVAL '12 minutes'),
  
  -- 양세찬 (KR-1030)
  ('KR-1030', '삼두운동', 35, 12, 3, 'IOT-TE-001', 0.42, 230, '완전한 신전이 잘 되고 있습니다.', NOW() - INTERVAL '56 minutes'),
  ('KR-1030', '이두운동', 32, 15, 3, 'IOT-BC-001', 0.41, 215, '이두근 피크가 잘 나타납니다.', NOW() - INTERVAL '37 minutes'),
  ('KR-1030', '레그프레스', 92, 10, 3, 'IOT-LP-001', 0.47, 335, '하루 운동을 훌륭하게 마무리했습니다!', NOW() - INTERVAL '8 minutes');
[V0_FILE]typescriptreact:file="components/member-detail-modal.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Dumbbell, TrendingUp, Calendar, Activity } from "lucide-react"
import { supabase } from "@/lib/supabase/client"
import type { WorkoutLog, Profile } from "@/types/supabase"

interface MemberDetailModalProps {
  userId: string | null
  userName: string
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function MemberDetailModal({ userId, userName, open, onOpenChange }: MemberDetailModalProps) {
  const [workoutLogs, setWorkoutLogs] = useState<WorkoutLog[]>([])
  const [profile, setProfile] = useState<Profile | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (!userId || !open) return

async function fetchMemberData() {
      setLoading(true)

const { data: logs, error: logsError } = await supabase
        .from("workout_logs")
        .select("*")
        .eq("user_id", userId)
        .order("created_at", { ascending: false })
        .limit(10)

console.log("[v0] Fetched workout logs:", logs, "Error:", logsError)

// Fetch profile
      const { data: profileData, error: profileError } = await supabase
        .from("profiles")
        .select("*")
        .eq("id", userId)
        .single()

console.log("[v0] Fetched profile:", profileData, "Error:", profileError)

setWorkoutLogs(logs || [])
      setProfile(profileData)
      setLoading(false)
    }

fetchMemberData()
  }, [userId, open])

// 운동 권고사항 생성
  const getRecommendations = () => {
    if (!workoutLogs.length) {
      return [
        "첫 운동을 시작해보세요! 가벼운 유산소 운동으로 시작하는 것을 추천합니다.",
        "트레이너와 상담하여 개인 맞춤 운동 계획을 수립하세요.",
      ]
    }

const recommendations: string[] = []
    const recentExercises = workoutLogs.slice(0, 5).map((log) => log.exercise_name)

const logsWithVelocity = workoutLogs.filter((log) => log.avg_velocity != null)
    const avgVelocity =
      logsWithVelocity.length > 0
        ? logsWithVelocity.reduce((sum, log) => sum + (log.avg_velocity || 0), 0) / logsWithVelocity.length
        : 0

// 운동 다양성 체크
    const uniqueExercises = new Set(recentExercises).size
    if (uniqueExercises < 3) {
      recommendations.push("💡 운동 종류를 다양화해보세요. 전신 균형 발달에 도움이 됩니다.")
    } else {
      recommendations.push("✨ 다양한 운동을 하고 계십니다. 훌륭합니다!")
    }

// 속도 기반 권고
    if (avgVelocity > 0) {
      if (avgVelocity < 0.4) {
        recommendations.push("🐢 운동 속도가 느립니다. 중량을 5-10% 낮추고 속도를 높여보세요.")
      } else if (avgVelocity > 0.6) {
        recommendations.push("🚀 훌륭한 운동 속도입니다! 중량을 5kg 증량해보세요.")
      } else {
        recommendations.push("✅ 적절한 운동 속도를 유지하고 있습니다.")
      }
    }

// 최근 운동 빈도
    const lastWorkoutDate = new Date(workoutLogs[0].created_at)
    const daysSinceLastWorkout = Math.floor((Date.now() - lastWorkoutDate.getTime()) / (1000 * 60 * 60 * 24))

if (daysSinceLastWorkout === 0) {
      recommendations.push("🔥 오늘도 열심히 운동 중이시네요! 파이팅!")
    } else if (daysSinceLastWorkout > 3) {
      recommendations.push(`⏰ 마지막 운동 후 ${daysSinceLastWorkout}일이 지났습니다. 규칙적인 운동을 유지하세요.`)
    } else {
      recommendations.push("👍 규칙적인 운동 습관이 잘 유지되고 있습니다.")
    }

// 운동량 분석
    const totalSets = workoutLogs.reduce((sum, log) => sum + (log.sets || 0), 0)
    if (totalSets > 30) {
      recommendations.push("💪 충분한 운동량을 소화하고 계십니다. 휴식도 중요합니다!")
    }

return recommendations
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle className="text-2xl">{userName} 회원 상세</DialogTitle>
          <DialogDescription>최근 운동 기록 및 AI 권고사항</DialogDescription>
        </DialogHeader>

<ScrollArea className="h-[600px] pr-4">
          <div className="space-y-6">
            {/* 회원 정보 */}
            {profile && (
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">회원 정보</CardTitle>
                </CardHeader>
                <CardContent className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-muted-foreground">신장:</span> {profile.height || "N/A"} cm
                  </div>
                  <div>
                    <span className="text-muted-foreground">체중:</span> {profile.weight || "N/A"} kg
                  </div>
                  <div className="col-span-2">
                    <span className="text-muted-foreground">목표:</span> {profile.target_goal || "설정되지 않음"}
                  </div>
                  <div className="col-span-2">
                    <span className="text-muted-foreground">RF 카드:</span> {profile.rf_card_id}
                  </div>
                </CardContent>
              </Card>
            )}

{/* 운동 권고사항 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <TrendingUp className="h-5 w-5" />
                  AI 운동 권고사항
                </CardTitle>
              </CardHeader>
              <CardContent>
                {loading ? (
                  <p className="text-sm text-muted-foreground">로딩 중...</p>
                ) : (
                  <ul className="space-y-2">
                    {getRecommendations().map((rec, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <Activity className="h-4 w-4 mt-0.5 text-primary flex-shrink-0" />
                        <span className="text-sm">{rec}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </CardContent>
            </Card>

{/* 최근 운동 세션 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <Dumbbell className="h-5 w-5" />
                  최근 운동 기록 (최대 10개)
                </CardTitle>
              </CardHeader>
              <CardContent>
                {loading ? (
                  <p className="text-sm text-muted-foreground">로딩 중...</p>
                ) : workoutLogs.length === 0 ? (
                  <div className="text-center py-8">
                    <Dumbbell className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
                    <p className="text-sm text-muted-foreground">아직 운동 기록이 없습니다.</p>
                    <p className="text-xs text-muted-foreground mt-1">첫 운동을 시작해보세요!</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {workoutLogs.map((log) => (
                      <div key={log.id} className="p-3 rounded-lg border bg-card space-y-2">
                        <div className="flex items-center justify-between">
                          <div className="font-medium">{log.exercise_name}</div>
                          <Badge variant="outline" className="text-xs">
                            <Calendar className="h-3 w-3 mr-1" />
                            {new Date(log.created_at).toLocaleString("ko-KR", {
                              month: "short",
                              day: "numeric",
                              hour: "2-digit",
                              minute: "2-digit",
                            })}
                          </Badge>
                        </div>

<div className="grid grid-cols-2 gap-2 text-sm">
                          <div className="flex items-center gap-2">
                            <span className="text-muted-foreground">중량:</span>
                            <span className="font-medium">{log.weight || "N/A"} kg</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-muted-foreground">세트:</span>
                            <span className="font-medium">
                              {log.sets} × {log.reps}
                            </span>
                          </div>
                          {log.avg_velocity && (
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">속도:</span>
                              <span className="font-medium">{log.avg_velocity.toFixed(2)} m/s</span>
                            </div>
                          )}
                          {log.peak_power && (
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">파워:</span>
                              <span className="font-medium">{log.peak_power} W</span>
                            </div>
                          )}
                        </div>

{log.ai_feedback && (
                          <div className="mt-2 p-2 bg-primary/5 rounded text-xs">
                            <span className="font-medium text-primary">AI 피드백:</span> {log.ai_feedback}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/demo/rf-tag-simulator.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Radio, CheckCircle2 } from "lucide-react"
import { mockMember } from "@/data/mockData"
import { toast } from "sonner"

export function RFTagSimulator() {
  const [isScanning, setIsScanning] = useState(false)

const simulateRFScan = () => {
    setIsScanning(true)

// Simulate scanning animation
    setTimeout(() => {
      setIsScanning(false)

// Show toast notification
      toast.success(
        <div className="flex items-center gap-3">
          <CheckCircle2 className="h-5 w-5 text-green-500" />
          <div>
            <div className="font-semibold">RF Tag 인식됨</div>
            <div className="text-sm text-muted-foreground">
              {mockMember.name} 회원님 입장 ({mockMember.membershipLevel})
            </div>
          </div>
        </div>,
        {
          duration: 4000,
        },
      )
    }, 1500)
  }

return (
    <Card className="border-primary/20">
      <CardContent className="pt-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`rounded-full bg-primary/10 p-3 ${isScanning ? "animate-pulse" : ""}`}>
              <Radio className="h-6 w-6 text-primary" />
            </div>
            <div>
              <div className="font-semibold">RF 칩 스캐너</div>
              <div className="text-sm text-muted-foreground">{isScanning ? "스캐닝 중..." : "대기 중"}</div>
            </div>
          </div>
          <Button onClick={simulateRFScan} disabled={isScanning} className="gap-2">
            {isScanning ? "스캐닝..." : "입장 시뮬레이션"}
          </Button>
        </div>

{!isScanning && (
          <div className="mt-4 rounded-lg bg-muted/50 p-3">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">RF Card ID</span>
              <Badge variant="outline">{mockMember.rfCardId}</Badge>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/demo/ai-coaching-panel.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { mockAICoaching } from "@/data/mockData"
import { Brain, TrendingUp, AlertTriangle, Award } from "lucide-react"

export function AICoachingPanel() {
  const getIcon = (type: string) => {
    switch (type) {
      case "advice":
        return <Brain className="h-5 w-5 text-blue-500" />
      case "achievement":
        return <Award className="h-5 w-5 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-orange-500" />
      default:
        return <Brain className="h-5 w-5" />
    }
  }

const getBackgroundColor = (type: string) => {
    switch (type) {
      case "advice":
        return "bg-blue-500/10 border-blue-500/20"
      case "achievement":
        return "bg-green-500/10 border-green-500/20"
      case "warning":
        return "bg-orange-500/10 border-orange-500/20"
      default:
        return "bg-muted"
    }
  }

const formatTime = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(minutes / 60)

if (minutes < 60) return `${minutes}분 전`
    if (hours < 24) return `${hours}시간 전`
    return "1일 전"
  }

return (
    <Card className="border-primary/20">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Brain className="h-5 w-5 text-primary" />
          <CardTitle>AI 코칭 엔진</CardTitle>
          <Badge variant="outline" className="ml-auto">
            <TrendingUp className="mr-1 h-3 w-3" />
            실시간 분석
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {mockAICoaching.map((coaching) => (
          <div key={coaching.id} className={`rounded-lg border p-4 ${getBackgroundColor(coaching.type)}`}>
            <div className="flex items-start gap-3">
              {getIcon(coaching.type)}
              <div className="flex-1 space-y-1">
                <p className="text-sm leading-relaxed">{coaching.message}</p>
                <p className="text-xs text-muted-foreground">{formatTime(coaching.timestamp)}</p>
              </div>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/demo/gamification-panel.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { mockBadges, mockRanking } from "@/data/mockData"
import { Trophy, TrendingUp, Star, Crown } from "lucide-react"

export function GamificationPanel() {
  const earnedBadges = mockBadges.filter((b) => b.earned)

return (
    <Card className="border-primary/20">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Trophy className="h-5 w-5 text-yellow-500" />
          성취 및 랭킹
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Ranking */}
        <div className="rounded-lg bg-gradient-to-br from-yellow-500/10 to-orange-500/10 border border-yellow-500/20 p-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <Crown className="h-5 w-5 text-yellow-500" />
              <span className="font-semibold">현재 랭킹</span>
            </div>
            {mockRanking.weeklyChange > 0 && (
              <Badge className="bg-green-500/10 text-green-500 border-green-500/20">
                <TrendingUp className="mr-1 h-3 w-3" />
                {mockRanking.weeklyChange}위 상승
              </Badge>
            )}
          </div>
          <div className="flex items-baseline gap-2">
            <span className="text-4xl font-bold text-yellow-500">{mockRanking.rank}</span>
            <span className="text-sm text-muted-foreground">/ {mockRanking.totalMembers}명</span>
          </div>
          <div className="mt-2 flex items-center gap-2">
            <Star className="h-4 w-4 text-yellow-500" />
            <span className="text-sm">{mockRanking.points.toLocaleString()} 포인트</span>
          </div>
        </div>

{/* Badges */}
        <div className="space-y-3">
          <div className="font-semibold">
            획득한 뱃지 ({earnedBadges.length}/{mockBadges.length})
          </div>
          <div className="grid grid-cols-2 gap-3">
            {mockBadges.map((badge) => (
              <div
                key={badge.id}
                className={`rounded-lg border p-3 text-center transition-all ${
                  badge.earned ? "bg-card border-primary/20 shadow-sm" : "bg-muted/50 border-muted opacity-50 grayscale"
                }`}
              >
                <div className="text-3xl mb-1">{badge.icon}</div>
                <div className="text-sm font-semibold">{badge.name}</div>
                <div className="text-xs text-muted-foreground">{badge.description}</div>
                {badge.earned && badge.earnedDate && (
                  <div className="text-xs text-primary mt-1">
                    {badge.earnedDate.toLocaleDateString("ko-KR", { month: "short", day: "numeric" })}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]jpg:file="public/korean-man-fitness.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/korean-man-fitness-8N2TN3P9GcFGBo3QpDOqInZ16w4Rsd.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/demo/center-equipment-panel.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Activity, AlertTriangle, MapPin } from "lucide-react"
import { mockEquipment } from "@/data/mockData"

export function CenterEquipmentPanel() {
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-cyan-500">정상</Badge>
      case "maintenance":
        return <Badge className="bg-yellow-500">점검중</Badge>
      case "retired":
        return <Badge variant="secondary">사용중지</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const getWearStatusBadge = (status: string) => {
    switch (status) {
      case "good":
        return <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/20">양호</Badge>
      case "warning":
        return <Badge className="bg-yellow-500/20 text-yellow-400 border-yellow-500/20">주의</Badge>
      case "critical":
        return <Badge className="bg-red-500/20 text-red-400 border-red-500/20">긴급</Badge>
      default:
        return <Badge variant="secondary">미측정</Badge>
    }
  }

const groupedEquipment = mockEquipment.reduce(
    (acc, eq) => {
      const zone = eq.location_zone || "미배치"
      if (!acc[zone]) acc[zone] = []
      acc[zone].push(eq)
      return acc
    },
    {} as Record<string, typeof mockEquipment>,
  )

return (
    <Card className="bg-black/40 border-cyan-500/20">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-white">
          <Activity className="h-5 w-5 text-cyan-400" />
          기기별 활용상황
        </CardTitle>
        <CardDescription className="text-gray-400">기기 상태 및 IoT 센서 예지보전</CardDescription>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[500px]">
          <div className="space-y-6">
            {Object.entries(groupedEquipment).map(([zone, equipmentList]) => (
              <div key={zone} className="space-y-3">
                <div className="flex items-center gap-2 sticky top-0 bg-black py-2">
                  <MapPin className="h-4 w-4 text-cyan-400" />
                  <h3 className="font-semibold text-lg text-white">{zone}</h3>
                  <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/20">{equipmentList.length}대</Badge>
                </div>

<div className="space-y-2">
                  {equipmentList.map((eq) => (
                    <div key={eq.id} className="p-4 rounded-lg border border-cyan-500/20 bg-black/60 space-y-2">
                      <div className="flex items-start justify-between">
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <p className="font-medium text-white">{eq.equipment_name}</p>
                            {getStatusBadge(eq.status)}
                          </div>
                          <p className="text-sm text-gray-400">
                            {eq.equipment_type} • {eq.manufacturer}
                          </p>
                          {eq.iot_sensor_id && <p className="text-xs text-cyan-400">센서: {eq.iot_sensor_id}</p>}
                        </div>
                        {getWearStatusBadge(eq.wear_status)}
                      </div>

<div className="pt-2 border-t border-cyan-500/10 space-y-1">
                        <div className="grid grid-cols-3 gap-2 text-xs">
                          <div>
                            <span className="text-gray-400">진동:</span>{" "}
                            <span className="text-cyan-400">{eq.vibration_level.toFixed(2)}</span>
                          </div>
                          <div>
                            <span className="text-gray-400">온도:</span>{" "}
                            <span className="text-cyan-400">{eq.temperature.toFixed(1)}°C</span>
                          </div>
                          <div>
                            <span className="text-gray-400">사용횟수:</span>{" "}
                            <span className="text-cyan-400">{eq.usage_count}회</span>
                          </div>
                        </div>

{eq.maintenance_needed && (
                          <div className="flex items-start gap-2 mt-2 p-2 bg-yellow-500/10 border border-yellow-500/20 rounded">
                            <AlertTriangle className="h-4 w-4 text-yellow-400 flex-shrink-0 mt-0.5" />
                            <div className="text-xs">
                              <p className="font-medium text-yellow-400">정비 필요</p>
                              {eq.parts_to_replace && eq.parts_to_replace.length > 0 && (
                                <p className="text-yellow-300">교체 부품: {eq.parts_to_replace.join(", ")}</p>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Dumbbell, Trophy, Zap, User, Building2 } from "lucide-react"
import { SmartwatchPanel } from "@/components/demo/smartwatch-panel"
import { RFTagSimulator } from "@/components/demo/rf-tag-simulator"
import { EquipmentStatusBoard } from "@/components/demo/equipment-status-board"
import { AICoachingPanel } from "@/components/demo/ai-coaching-panel"
import { HealthReport } from "@/components/demo/health-report"
import { GamificationPanel } from "@/components/demo/gamification-panel"
import { CenterMembersPanel } from "@/components/demo/center-members-panel"
import { CenterEquipmentPanel } from "@/components/demo/center-equipment-panel"
import { CenterOperationsPanel } from "@/components/demo/center-operations-panel"
import { StaffAttendancePanel } from "@/components/demo/staff-attendance-panel"
import { mockMember, mockHealthReport } from "@/data/mockData"

export default function Page() {
  const [viewMode, setViewMode] = useState<"member" | "center">("member")

return (
    <div className="min-h-screen bg-black">
      <div className="container mx-auto p-3 sm:p-4 md:p-6 space-y-4 sm:space-y-6 md:space-y-8">
        {/* Header with View Toggle */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight bg-gradient-to-r from-cyan-400 to-cyan-600 bg-clip-text text-transparent">
              Smart Fitness IoT Platform
            </h1>
            <p className="text-sm sm:text-base text-gray-400 mt-1 sm:mt-2">AI 기반 실시간 헬스케어 모니터링 시스템</p>
          </div>

<div className="flex items-center gap-2 sm:gap-4 flex-wrap">
            <div className="flex items-center gap-1 sm:gap-2 p-1 rounded-lg bg-black/60 border border-cyan-500/20">
              <Button
                variant={viewMode === "member" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("member")}
                className={`text-xs sm:text-sm ${viewMode === "member" ? "bg-cyan-500 hover:bg-cyan-600" : "text-gray-400 hover:text-white"}`}
              >
                <User className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-2" />
                <span className="hidden sm:inline">회원용</span>
              </Button>
              <Button
                variant={viewMode === "center" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("center")}
                className={`text-xs sm:text-sm ${viewMode === "center" ? "bg-cyan-500 hover:bg-cyan-600" : "text-gray-400 hover:text-white"}`}
              >
                <Building2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-2" />
                <span className="hidden sm:inline">센터용</span>
              </Button>
            </div>

{viewMode === "member" ? (
          <>
            {/* Member View */}
            <Card className="border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-cyan-600/5">
              <CardContent className="pt-4 sm:pt-6">
                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
                  <div className="h-12 w-12 sm:h-16 sm:w-16 rounded-full bg-cyan-500/20 flex items-center justify-center text-xl sm:text-2xl font-bold text-cyan-400">
                    {mockMember.name[0]}
                  </div>
                  <div className="flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <h2 className="text-xl sm:text-2xl font-bold text-white">{mockMember.name}</h2>
                      <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/20 text-xs sm:text-sm">
                        {mockMember.membershipLevel}
                      </Badge>
                    </div>
                    <p className="text-xs sm:text-sm text-gray-400">회원번호: {mockMember.id}</p>
                  </div>
                  <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/20 text-xs sm:text-sm">
                    <Activity className="mr-1 h-3 w-3" />
                    운동 중
                  </Badge>
                </div>
              </CardContent>
            </Card>

{/* Stats Cards */}
            <div className="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-3">
              <Card className="border-cyan-500/20 bg-black/40">
                <CardContent className="pt-4 sm:pt-6">
                  <div className="flex items-center justify-between mb-2">
                    <p className="text-xs sm:text-sm font-medium text-gray-300">주간 운동 일수</p>
                    <Dumbbell className="h-3 w-3 sm:h-4 sm:w-4 text-cyan-400" />
                  </div>
                  <div className="text-xl sm:text-2xl font-bold text-cyan-400">{mockHealthReport.weeklyWorkouts}일</div>
                  <p className="text-xs text-gray-500 mt-1">지난주 대비 +1일</p>
                </CardContent>
              </Card>

<Card className="border-cyan-500/20 bg-black/40">
                <CardContent className="pt-4 sm:pt-6">
                  <div className="flex items-center justify-between mb-2">
                    <p className="text-xs sm:text-sm font-medium text-gray-300">총 소모 칼로리</p>
                    <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-cyan-400" />
                  </div>
                  <div className="text-xl sm:text-2xl font-bold text-cyan-400">
                    {mockHealthReport.totalCalories.toLocaleString()}
                  </div>
                  <p className="text-xs text-gray-500 mt-1">이번 주</p>
                </CardContent>
              </Card>

{/* RF Tag Simulator */}
            <RFTagSimulator />

{/* Main Content - 2 Columns */}
            <div className="grid gap-4 sm:gap-6 grid-cols-1 lg:grid-cols-2">
              {/* Left Column */}
              <div className="space-y-4 sm:space-y-6">
                <SmartwatchPanel />
                <AICoachingPanel />
                <GamificationPanel />
              </div>

{/* Right Column */}
              <div className="space-y-4 sm:space-y-6">
                <EquipmentStatusBoard />
                <HealthReport />
              </div>
            </div>
          </>
        ) : (
          <>
            {/* Center View */}
            <Card className="border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-cyan-600/5">
              <CardContent className="pt-4 sm:pt-6">
                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
                  <div className="h-12 w-12 sm:h-16 sm:w-16 rounded-full bg-cyan-500/20 flex items-center justify-center">
                    <Building2 className="h-6 w-6 sm:h-8 sm:w-8 text-cyan-400" />
                  </div>
                  <div className="flex-1">
                    <h2 className="text-xl sm:text-2xl font-bold text-white">센터 관리자 대시보드</h2>
                    <p className="text-xs sm:text-sm text-gray-400">실시간 회원/기구 모니터링 및 운영 관리</p>
                  </div>
                  <Badge className="bg-cyan-500/20 text-cyan-400 border-cyan-500/20 text-xs sm:text-sm">
                    <Activity className="mr-1 h-3 w-3" />
                    실시간 연동
                  </Badge>
                </div>
              </CardContent>
            </Card>

{/* Center Main Content */}
            <div className="grid gap-4 sm:gap-6 grid-cols-1 lg:grid-cols-2">
              {/* Left Column */}
              <div className="space-y-4 sm:space-y-6">
                <CenterMembersPanel />
                <StaffAttendancePanel />
              </div>

{/* Right Column */}
              <div className="space-y-4 sm:space-y-6">
                <CenterEquipmentPanel />
                <CenterOperationsPanel />
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/demo/smartwatch-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Activity, Heart, Flame } from "lucide-react"
import { mockLiveStatus } from "@/data/mockData"
import { LineChart, Line, ResponsiveContainer, YAxis } from "recharts"

export function SmartwatchPanel() {
  const [heartRate, setHeartRate] = useState(mockLiveStatus.heartRate)
  const [heartRateHistory, setHeartRateHistory] = useState<number[]>([145, 143, 147, 145, 148, 145])

// Simulate real-time heart rate updates every 3 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      const newHeartRate = mockLiveStatus.heartRate + Math.floor(Math.random() * 11) - 5 // ±5 variation
      setHeartRate(newHeartRate)
      setHeartRateHistory((prev) => [...prev.slice(-9), newHeartRate])
    }, 3000)

return () => clearInterval(interval)
  }, [])

return (
    <Card className="border-primary/20 bg-card/50 backdrop-blur">
      <CardHeader>
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
          <CardTitle className="text-base sm:text-lg">스마트워치 연동</CardTitle>
          <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20 text-xs w-fit">
            <Activity className="mr-1 h-3 w-3" />
            Apple Watch 연동됨
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Heart Rate */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Heart className="h-4 w-4 sm:h-5 sm:w-5 text-red-500 animate-pulse" />
              <span className="text-xs sm:text-sm text-muted-foreground">심박수</span>
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-2xl sm:text-3xl font-bold text-red-500">{heartRate}</span>
              <span className="text-xs sm:text-sm text-muted-foreground">bpm</span>
            </div>
          </div>
          <div className="h-16 sm:h-20 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={heartRateHistory.map((hr, i) => ({ value: hr, index: i }))}>
                <YAxis domain={[130, 160]} hide />
                <Line
                  type="monotone"
                  dataKey="value"
                  stroke="rgb(239, 68, 68)"
                  strokeWidth={2}
                  dot={false}
                  isAnimationActive={true}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>

{/* Calories & Exercise */}
        <div className="grid grid-cols-2 gap-3 sm:gap-4">
          <div className="space-y-1">
            <div className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground">
              <Flame className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
              소모 칼로리
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-xl sm:text-2xl font-bold">{mockLiveStatus.caloriesBurned}</span>
              <span className="text-xs sm:text-sm text-muted-foreground">kcal</span>
            </div>
          </div>
          <div className="space-y-1">
            <div className="text-xs sm:text-sm text-muted-foreground">운동 시간</div>
            <div className="flex items-baseline gap-1">
              <span className="text-xl sm:text-2xl font-bold">{mockLiveStatus.duration}</span>
              <span className="text-xs sm:text-sm text-muted-foreground">분</span>
            </div>
          </div>
        </div>

{/* Current Exercise */}
        {mockLiveStatus.currentExercise && (
          <div className="rounded-lg bg-primary/10 p-3 text-center">
            <div className="text-xs sm:text-sm text-muted-foreground">현재 운동</div>
            <div className="text-base sm:text-lg font-semibold text-primary">{mockLiveStatus.currentExercise}</div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/demo/equipment-status-board.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { mockMachines } from "@/data/mockData"
import { Dumbbell, User, Wrench } from "lucide-react"

export function EquipmentStatusBoard() {
  const availableCount = mockMachines.filter((m) => m.status === "available").length
  const occupiedCount = mockMachines.filter((m) => m.status === "occupied").length
  const maintenanceCount = mockMachines.filter((m) => m.status === "maintenance").length

const getStatusBadge = (status: string) => {
    switch (status) {
      case "available":
        return <Badge className="bg-green-500/10 text-green-500 border-green-500/20">대기중</Badge>
      case "occupied":
        return <Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20">사용중</Badge>
      case "maintenance":
        return <Badge className="bg-orange-500/10 text-orange-500 border-orange-500/20">점검중</Badge>
      default:
        return null
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "available":
        return <Dumbbell className="h-4 w-4 text-green-500" />
      case "occupied":
        return <User className="h-4 w-4 text-blue-500" />
      case "maintenance":
        return <Wrench className="h-4 w-4 text-orange-500" />
      default:
        return null
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
          <CardTitle className="text-base sm:text-lg">IoT 기구 현황판</CardTitle>
          <div className="flex gap-2 text-xs sm:text-sm">
            <span className="text-green-500">{availableCount}대</span>
            <span className="text-muted-foreground">/</span>
            <span className="text-blue-500">{occupiedCount}대</span>
            <span className="text-muted-foreground">/</span>
            <span className="text-orange-500">{maintenanceCount}대</span>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid gap-2 sm:gap-3 grid-cols-1 sm:grid-cols-2">
          {mockMachines.map((machine) => (
            <div
              key={machine.id}
              className="flex items-center justify-between rounded-lg border bg-card p-2 sm:p-3 transition-colors hover:bg-muted/50"
            >
              <div className="flex items-center gap-2 sm:gap-3">
                {getStatusIcon(machine.status)}
                <div>
                  <div className="font-medium text-sm sm:text-base">{machine.name}</div>
                  {machine.currentUser && (
                    <div className="text-xs text-muted-foreground">사용자: {machine.currentUser}</div>
                  )}
                </div>
              </div>
              {getStatusBadge(machine.status)}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/demo/health-report.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { mockHealthReport, mockMember } from "@/data/mockData"
import { TrendingUp, TrendingDown } from "lucide-react"
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

export function HealthReport() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base sm:text-lg">주간 건강 리포트</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 sm:space-y-6">
        {/* Summary Stats */}
        <div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
          <div className="space-y-1">
            <div className="text-xs sm:text-sm text-muted-foreground">운동 일수</div>
            <div className="text-xl sm:text-2xl font-bold">{mockHealthReport.weeklyWorkouts}일</div>
          </div>
          <div className="space-y-1">
            <div className="text-xs sm:text-sm text-muted-foreground">총 소모 칼로리</div>
            <div className="text-xl sm:text-2xl font-bold">{mockHealthReport.totalCalories.toLocaleString()}</div>
            <div className="text-xs text-muted-foreground">kcal</div>
          </div>
          <div className="space-y-1">
            <div className="text-xs sm:text-sm text-muted-foreground">근육량 변화</div>
            <div className="flex items-baseline gap-1">
              <div className="text-xl sm:text-2xl font-bold text-green-500">+{mockHealthReport.muscleMassChange}</div>
              <div className="text-xs text-muted-foreground">kg</div>
              <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
            </div>
          </div>
          <div className="space-y-1">
            <div className="text-xs sm:text-sm text-muted-foreground">체지방 변화</div>
            <div className="flex items-baseline gap-1">
              <div className="text-xl sm:text-2xl font-bold text-blue-500">{mockHealthReport.bodyFatChange}</div>
              <div className="text-xs text-muted-foreground">%</div>
              <TrendingDown className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
            </div>
          </div>
        </div>

{/* Current Stats */}
        <div className="rounded-lg border bg-muted/50 p-3 sm:p-4">
          <div className="mb-2 text-xs sm:text-sm font-semibold">현재 신체 지표</div>
          <div className="grid grid-cols-2 gap-3 sm:gap-4">
            <div>
              <div className="text-xs text-muted-foreground">골격근량</div>
              <div className="text-base sm:text-lg font-bold">{mockMember.skeletalMuscleMass} kg</div>
            </div>
            <div>
              <div className="text-xs text-muted-foreground">체지방률</div>
              <div className="text-base sm:text-lg font-bold">{mockMember.bodyFatPercentage}%</div>
            </div>
          </div>
        </div>

{/* Weekly Activity Chart */}
        <div className="space-y-2">
          <div className="text-xs sm:text-sm font-semibold">주간 운동량</div>
          <ResponsiveContainer width="100%" height={160}>
            <BarChart data={mockHealthReport.weeklyData}>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis dataKey="date" className="text-xs" />
              <YAxis className="text-xs" />
              <Tooltip
                contentStyle={{
                  backgroundColor: "hsl(var(--card))",
                  border: "1px solid hsl(var(--border))",
                  borderRadius: "8px",
                }}
              />
              <Bar dataKey="calories" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>

{/* Heart Rate Trend */}
        <div className="space-y-2">
          <div className="text-xs sm:text-sm font-semibold">평균 심박수 추이</div>
          <ResponsiveContainer width="100%" height={120}>
            <LineChart data={mockHealthReport.weeklyData}>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis dataKey="date" className="text-xs" />
              <YAxis className="text-xs" domain={[130, 160]} />
              <Tooltip
                contentStyle={{
                  backgroundColor: "hsl(var(--card))",
                  border: "1px solid hsl(var(--border))",
                  borderRadius: "8px",
                }}
              />
              <Line type="monotone" dataKey="heartRate" stroke="rgb(239, 68, 68)" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="data/mockData.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface Member {
  id: string
  name: string
  rfCardId: string
  membershipLevel: "VIP" | "Premium" | "Standard"
  skeletalMuscleMass: number // kg
  bodyFatPercentage: number // %
  currentStatus: "in_gym" | "out_gym"
  avatar?: string
}

export interface LiveStatus {
  heartRate: number // bpm
  caloriesBurned: number // kcal
  currentExercise?: string
  duration: number // minutes
}

export interface IoTMachine {
  id: string
  name: string
  type: string
  status: "available" | "occupied" | "maintenance"
  currentUser?: string
  location: { x: number; y: number }
}

export interface WorkoutLog {
  id: string
  memberId: string
  date: Date
  exerciseName: string
  sets: number
  reps: number
  weight: number // kg
  duration: number // minutes
  caloriesBurned: number
}

export interface AICoaching {
  id: string
  message: string
  type: "advice" | "warning" | "achievement"
  timestamp: Date
}

export interface Badge {
  id: string
  name: string
  description: string
  icon: string
  earned: boolean
  earnedDate?: Date
}

export interface Ranking {
  rank: number
  points: number
  totalMembers: number
  weeklyChange: number
}

// Center Management Interfaces
export interface CenterMember {
  id: string
  user_id: string
  name: string
  rf_chip_id: string
  current_status: "in_gym" | "out_gym"
  wearable_device?: string
  membershipLevel: "VIP" | "Premium" | "Standard"
  lastCheckIn?: Date
  lastCheckOut?: Date
}

export interface Equipment {
  id: string
  equipment_name: string
  equipment_type: string
  manufacturer: string
  status: "active" | "maintenance" | "retired"
  location_zone: string
  iot_sensor_id?: string
  usage_count: number
  vibration_level: number
  temperature: number
  wear_status: "good" | "warning" | "critical"
  maintenance_needed: boolean
  parts_to_replace?: string[]
}

export interface StaffAttendance {
  id: string
  staff_name: string
  role: string
  check_in_time: Date
  check_out_time?: Date
  status: "on_duty" | "off_duty"
  rf_chip_id: string
}

export interface Payment {
  id: string
  user_id: string
  member_name: string
  amount: number
  payment_date: Date
  payment_method: string
  plan_name: string
  status: "completed" | "pending"
}

export interface Announcement {
  id: string
  title: string
  content: string
  created_at: Date
  priority: "normal" | "high"
}

export interface MemberWorkoutLog {
  id: string
  user_id: string
  exercise_name: string
  weight: number
  reps: number
  sets: number
  avg_velocity?: number
  peak_power?: number
  created_at: Date
  ai_feedback?: string
}

// Trainer Interface
export interface Trainer {
  id: string
  name: string
  role: string
  specialties: string[]
  certifications: string[]
  experience_years: number
  bio: string
  photo: string
  available_hours: string
  rating: number
  total_clients: number
}

// Mock Member Data (Palantir Ontology: Member Object)
export const mockMember: Member = {
  id: "KR-9981",
  name: "박상원",
  rfCardId: "TAG-X8821",
  membershipLevel: "VIP",
  skeletalMuscleMass: 38,
  bodyFatPercentage: 15,
  currentStatus: "in_gym",
  avatar: "/korean-man-fitness.jpg",
}

// Mock Live Status (Smartwatch Data)
export const mockLiveStatus: LiveStatus = {
  heartRate: 145,
  caloriesBurned: 320,
  currentExercise: "벤치프레스",
  duration: 45,
}

// Mock IoT Machines
export const mockMachines: IoTMachine[] = [
  {
    id: "TREAD-01",
    name: "런닝머신 #1",
    type: "cardio",
    status: "occupied",
    currentUser: "박상원",
    location: { x: 1, y: 1 },
  },
  { id: "BENCH-03", name: "벤치프레스 #3", type: "strength", status: "available", location: { x: 2, y: 1 } },
  { id: "LAT-02", name: "랫풀다운 #2", type: "strength", status: "maintenance", location: { x: 3, y: 1 } },
  {
    id: "LEG-PRESS-01",
    name: "레그프레스 #1",
    type: "strength",
    status: "occupied",
    currentUser: "김민수",
    location: { x: 1, y: 2 },
  },
  { id: "BIKE-05", name: "사이클 #5", type: "cardio", status: "available", location: { x: 2, y: 2 } },
  { id: "CABLE-04", name: "케이블 머신 #4", type: "strength", status: "available", location: { x: 3, y: 2 } },
  {
    id: "SMITH-02",
    name: "스미스 머신 #2",
    type: "strength",
    status: "occupied",
    currentUser: "이지영",
    location: { x: 1, y: 3 },
  },
  { id: "TREAD-02", name: "런닝머신 #2", type: "cardio", status: "available", location: { x: 2, y: 3 } },
]

// Mock Workout Logs (Past Week)
export const mockWorkoutLogs: WorkoutLog[] = [
  {
    id: "LOG-001",
    memberId: "KR-9981",
    date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    exerciseName: "벤치프레스",
    sets: 4,
    reps: 10,
    weight: 80,
    duration: 25,
    caloriesBurned: 180,
  },
  {
    id: "LOG-002",
    memberId: "KR-9981",
    date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    exerciseName: "스쿼트",
    sets: 5,
    reps: 8,
    weight: 100,
    duration: 30,
    caloriesBurned: 250,
  },
  {
    id: "LOG-003",
    memberId: "KR-9981",
    date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    exerciseName: "데드리프트",
    sets: 3,
    reps: 6,
    weight: 120,
    duration: 20,
    caloriesBurned: 200,
  },
  {
    id: "LOG-004",
    memberId: "KR-9981",
    date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
    exerciseName: "풀업",
    sets: 4,
    reps: 12,
    weight: 0,
    duration: 15,
    caloriesBurned: 120,
  },
  {
    id: "LOG-005",
    memberId: "KR-9981",
    date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000),
    exerciseName: "런닝",
    sets: 1,
    reps: 1,
    weight: 0,
    duration: 40,
    caloriesBurned: 400,
  },
  {
    id: "LOG-006",
    memberId: "KR-9981",
    date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
    exerciseName: "벤치프레스",
    sets: 4,
    reps: 10,
    weight: 75,
    duration: 25,
    caloriesBurned: 170,
  },
  {
    id: "LOG-007",
    memberId: "KR-9981",
    date: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000),
    exerciseName: "레그프레스",
    sets: 4,
    reps: 12,
    weight: 150,
    duration: 30,
    caloriesBurned: 220,
  },
]

// Mock AI Coaching Messages
export const mockAICoaching: AICoaching[] = [
  {
    id: "AI-001",
    message: "어제 하체 운동 피로도가 높으니 오늘은 상체 위주로 진행하세요",
    type: "advice",
    timestamp: new Date(),
  },
  {
    id: "AI-002",
    message: "벤치프레스 중량이 지난주 대비 5kg 증가했습니다! 계속 유지하세요",
    type: "achievement",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
  },
  {
    id: "AI-003",
    message: "심박수가 목표 구간(140-160bpm)을 벗어났습니다. 잠시 휴식을 권장합니다",
    type: "warning",
    timestamp: new Date(Date.now() - 10 * 60 * 60 * 1000),
  },
]

// Mock Badges (Gamification)
export const mockBadges: Badge[] = [
  {
    id: "BADGE-001",
    name: "오운완",
    description: "오늘 운동 완료",
    icon: "🏆",
    earned: true,
    earnedDate: new Date(),
  },
  {
    id: "BADGE-002",
    name: "7일 연속",
    description: "7일 연속 출석",
    icon: "🔥",
    earned: true,
    earnedDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
  },
  {
    id: "BADGE-003",
    name: "중량 마스터",
    description: "100kg 이상 들기",
    icon: "💪",
    earned: true,
    earnedDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
  },
  {
    id: "BADGE-004",
    name: "칼로리 버너",
    description: "하루 500kcal 소모",
    icon: "🔥",
    earned: false,
  },
]

// Mock Ranking
export const mockRanking: Ranking = {
  rank: 3,
  points: 1250,
  totalMembers: 156,
  weeklyChange: 2, // moved up 2 ranks
}

// Health Report Data (Weekly Trends)
export const mockHealthReport = {
  weeklyWorkouts: 5,
  totalDuration: 165, // minutes
  totalCalories: 1540,
  muscleMassChange: +0.5, // kg
  bodyFatChange: -0.8, // %
  weeklyData: [
    { date: "월", workouts: 1, calories: 430, heartRate: 142 },
    { date: "화", workouts: 1, calories: 250, heartRate: 138 },
    { date: "수", workouts: 1, calories: 200, heartRate: 145 },
    { date: "목", workouts: 0, calories: 0, heartRate: 0 },
    { date: "금", workouts: 1, calories: 270, heartRate: 140 },
    { date: "토", workouts: 1, calories: 390, heartRate: 148 },
    { date: "일", workouts: 0, calories: 0, heartRate: 0 },
  ],
}

// Mock Center Members
export const mockCenterMembers: CenterMember[] = [
  {
    id: "1",
    user_id: "KR-9981",
    name: "박상원",
    rf_chip_id: "TAG-X8821",
    current_status: "in_gym",
    wearable_device: "Galaxy Watch 6",
    membershipLevel: "VIP",
    lastCheckIn: new Date(Date.now() - 46 * 60 * 1000),
  },
  {
    id: "2",
    user_id: "KR-2234",
    name: "김민수",
    rf_chip_id: "TAG-A1245",
    current_status: "in_gym",
    wearable_device: "Apple Watch Series 8",
    membershipLevel: "Premium",
    lastCheckIn: new Date(Date.now() - 35 * 60 * 1000),
  },
  {
    id: "3",
    user_id: "KR-3456",
    name: "이지영",
    rf_chip_id: "TAG-B3399",
    current_status: "in_gym",
    membershipLevel: "Standard",
    lastCheckIn: new Date(Date.now() - 22 * 60 * 1000),
  },
  {
    id: "4",
    user_id: "KR-4567",
    name: "최준호",
    rf_chip_id: "TAG-C4488",
    current_status: "out_gym",
    membershipLevel: "Premium",
    lastCheckIn: new Date(Date.now() - 7 * 60 * 60 * 1000),
    lastCheckOut: new Date(Date.now() - 5 * 60 * 60 * 1000),
  },
  {
    id: "5",
    user_id: "KR-5678",
    name: "정수연",
    rf_chip_id: "TAG-D5577",
    current_status: "out_gym",
    membershipLevel: "VIP",
    lastCheckIn: new Date(Date.now() - 26 * 60 * 60 * 1000),
    lastCheckOut: new Date(Date.now() - 24 * 60 * 60 * 1000),
  },
]

// Mock Equipment
export const mockEquipment: Equipment[] = [
  {
    id: "LEG-PRESS-03",
    equipment_name: "레그프레스 #3",
    equipment_type: "하체",
    manufacturer: "TechnoGym",
    status: "active",
    location_zone: "A구역 - 하체",
    iot_sensor_id: "IOT-LEG-03",
    usage_count: 1240,
    vibration_level: 0.32,
    temperature: 28.5,
    wear_status: "good",
    maintenance_needed: false,
  },
  {
    id: "BENCH-PRESS-02",
    equipment_name: "벤치프레스 #2",
    equipment_type: "상체",
    manufacturer: "Life Fitness",
    status: "active",
    location_zone: "B구역 - 상체",
    iot_sensor_id: "IOT-BENCH-02",
    usage_count: 2150,
    vibration_level: 0.45,
    temperature: 30.2,
    wear_status: "warning",
    maintenance_needed: true,
    parts_to_replace: ["벤치 패드", "안전바"],
  },
  {
    id: "TREADMILL-05",
    equipment_name: "런닝머신 #5",
    equipment_type: "유산소",
    manufacturer: "Matrix",
    status: "maintenance",
    location_zone: "C구역 - 유산소",
    iot_sensor_id: "IOT-TREAD-05",
    usage_count: 3890,
    vibration_level: 0.78,
    temperature: 35.8,
    wear_status: "critical",
    maintenance_needed: true,
    parts_to_replace: ["벨트", "모터 베어링"],
  },
  {
    id: "LAT-PULLDOWN-01",
    equipment_name: "랫풀다운 #1",
    equipment_type: "상체",
    manufacturer: "Hammer Strength",
    status: "active",
    location_zone: "B구역 - 상체",
    iot_sensor_id: "IOT-LAT-01",
    usage_count: 1560,
    vibration_level: 0.28,
    temperature: 27.3,
    wear_status: "good",
    maintenance_needed: false,
  },
  {
    id: "CABLE-MACHINE-04",
    equipment_name: "케이블 머신 #4",
    equipment_type: "복합",
    manufacturer: "Life Fitness",
    status: "active",
    location_zone: "D구역 - 복합",
    iot_sensor_id: "IOT-CABLE-04",
    usage_count: 980,
    vibration_level: 0.35,
    temperature: 29.1,
    wear_status: "good",
    maintenance_needed: false,
  },
]

// Mock Staff Attendance
export const mockStaffAttendance: StaffAttendance[] = [
  {
    id: "STAFF-001",
    staff_name: "김트레이너",
    role: "헤드 트레이너",
    check_in_time: new Date(Date.now() - 4 * 60 * 60 * 1000),
    status: "on_duty",
    rf_chip_id: "STAFF-RF-101",
  },
  {
    id: "STAFF-002",
    staff_name: "박매니저",
    role: "센터 매니저",
    check_in_time: new Date(Date.now() - 5 * 60 * 60 * 1000),
    status: "on_duty",
    rf_chip_id: "STAFF-RF-102",
  },
  {
    id: "STAFF-003",
    staff_name: "이강사",
    role: "필라테스 강사",
    check_in_time: new Date(Date.now() - 8 * 60 * 60 * 1000),
    check_out_time: new Date(Date.now() - 2 * 60 * 60 * 1000),
    status: "off_duty",
    rf_chip_id: "STAFF-RF-103",
  },
  {
    id: "STAFF-004",
    staff_name: "최트레이너",
    role: "퍼스널 트레이너",
    check_in_time: new Date(Date.now() - 3 * 60 * 60 * 1000),
    status: "on_duty",
    rf_chip_id: "STAFF-RF-104",
  },
]

// Mock Payments
export const mockPayments: Payment[] = [
  {
    id: "PAY-001",
    user_id: "KR-9981",
    member_name: "박상원",
    amount: 150000,
    payment_date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
    payment_method: "카드",
    plan_name: "VIP 회원권",
    status: "completed",
  },
  {
    id: "PAY-002",
    user_id: "KR-2234",
    member_name: "김민수",
    amount: 100000,
    payment_date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
    payment_method: "계좌이체",
    plan_name: "Premium 회원권",
    status: "completed",
  },
  {
    id: "PAY-003",
    user_id: "KR-3456",
    member_name: "이지영",
    amount: 70000,
    payment_date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    payment_method: "카드",
    plan_name: "Standard 회원권",
    status: "completed",
  },
  {
    id: "PAY-004",
    user_id: "KR-5678",
    member_name: "정수연",
    amount: 150000,
    payment_date: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
    payment_method: "카드",
    plan_name: "VIP 회원권",
    status: "completed",
  },
  {
    id: "PAY-005",
    user_id: "KR-4567",
    member_name: "최준호",
    amount: 100000,
    payment_date: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000),
    payment_method: "계좌이체",
    plan_name: "Premium 회원권",
    status: "completed",
  },
]

// Mock Announcements
export const mockAnnouncements: Announcement[] = [
  {
    id: "ANN-001",
    title: "설 연휴 운영 안내",
    content: "2025년 2월 9일~11일은 휴관합니다. 즐거운 명절 보내세요!",
    created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
    priority: "high",
  },
  {
    id: "ANN-002",
    title: "신규 기구 입고 안내",
    content: "최신형 스미스머신이 B구역에 설치되었습니다. 많은 이용 부탁드립니다.",
    created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
    priority: "normal",
  },
  {
    id: "ANN-003",
    title: "PT 할인 이벤트",
    content: "1월 말까지 10회 PT 등록 시 2회 추가 증정! 서두르세요.",
    created_at: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
    priority: "high",
  },
]

// Mock Member Workout Logs for detail modal
export const mockMemberWorkoutLogs: Record<string, MemberWorkoutLog[]> = {
  "KR-9981": [
    {
      id: "WLOG-001",
      user_id: "KR-9981",
      exercise_name: "레그프레스",
      weight: 120,
      reps: 12,
      sets: 4,
      avg_velocity: 0.48,
      peak_power: 350,
      created_at: new Date(Date.now() - 10 * 60 * 60 * 1000),
      ai_feedback: "훌륭한 속도입니다! 다음 세트는 5kg 증량해보세요.",
    },
    {
      id: "WLOG-002",
      user_id: "KR-9981",
      exercise_name: "벤치프레스",
      weight: 80,
      reps: 10,
      sets: 4,
      avg_velocity: 0.52,
      peak_power: 320,
      created_at: new Date(Date.now() - 2 * 60 * 60 * 1000),
      ai_feedback: "완벽한 폼입니다. 계속 유지하세요!",
    },
    {
      id: "WLOG-003",
      user_id: "KR-9981",
      exercise_name: "데드리프트",
      weight: 140,
      reps: 8,
      sets: 3,
      avg_velocity: 0.45,
      peak_power: 420,
      created_at: new Date(Date.now() - 24 * 60 * 60 * 1000),
      ai_feedback: "중량이 높습니다. 부상 주의하세요.",
    },
  ],
  "KR-2234": [
    {
      id: "WLOG-004",
      user_id: "KR-2234",
      exercise_name: "스쿼트",
      weight: 100,
      reps: 10,
      sets: 4,
      avg_velocity: 0.42,
      peak_power: 380,
      created_at: new Date(Date.now() - 15 * 60 * 60 * 1000),
      ai_feedback: "속도가 약간 느립니다. 중량을 10kg 줄여보세요.",
    },
    {
      id: "WLOG-005",
      user_id: "KR-2234",
      exercise_name: "런닝",
      weight: 0,
      reps: 1,
      sets: 1,
      created_at: new Date(Date.now() - 3 * 60 * 60 * 1000),
      ai_feedback: "30분 유산소 완료! 심박수 구간이 좋습니다.",
    },
  ],
  "KR-3456": [
    {
      id: "WLOG-006",
      user_id: "KR-3456",
      exercise_name: "랫풀다운",
      weight: 50,
      reps: 12,
      sets: 3,
      avg_velocity: 0.5,
      peak_power: 250,
      created_at: new Date(Date.now() - 5 * 60 * 60 * 1000),
      ai_feedback: "등 근육 활성화가 잘 되고 있습니다!",
    },
  ],
}

// Usage tracking data for members
export interface MemberUsageStats {
  user_id: string
  total_visits: number
  last_visit_date: Date
  avg_visits_per_week: number
  visit_frequency: "high" | "medium" | "low"
  total_gym_hours: number
}

export const mockMemberUsageStats: MemberUsageStats[] = [
  {
    user_id: "KR-9981",
    total_visits: 48,
    last_visit_date: new Date(Date.now() - 45 * 60 * 1000),
    avg_visits_per_week: 4.8,
    visit_frequency: "high",
    total_gym_hours: 72,
  },
  {
    user_id: "KR-2234",
    total_visits: 32,
    last_visit_date: new Date(Date.now() - 30 * 60 * 60 * 1000),
    avg_visits_per_week: 3.2,
    visit_frequency: "medium",
    total_gym_hours: 48,
  },
  {
    user_id: "KR-3456",
    total_visits: 28,
    last_visit_date: new Date(Date.now() - 20 * 60 * 60 * 1000),
    avg_visits_per_week: 2.8,
    visit_frequency: "medium",
    total_gym_hours: 42,
  },
  {
    user_id: "KR-4567",
    total_visits: 8,
    last_visit_date: new Date(Date.now() - 5 * 60 * 60 * 1000),
    avg_visits_per_week: 0.8,
    visit_frequency: "low",
    total_gym_hours: 12,
  },
  {
    user_id: "KR-5678",
    total_visits: 5,
    last_visit_date: new Date(Date.now() - 24 * 60 * 60 * 1000),
    avg_visits_per_week: 0.5,
    visit_frequency: "low",
    total_gym_hours: 7.5,
  },
]

// Mock Trainers
export const mockTrainers: Trainer[] = [
  {
    id: "TRAINER-001",
    name: "김준혁",
    role: "헤드 트레이너",
    specialties: ["보디빌딩", "근력 강화", "VBT 분석"],
    certifications: ["NSCA-CPT", "ACSM-CPT", "스포츠 영양사 2급"],
    experience_years: 8,
    bio: "8년간 300명 이상의 회원을 지도한 경험이 있는 베테랑 트레이너입니다. 특히 근력 강화와 체중 감량 프로그램에 특화되어 있으며, VBT(Velocity Based Training) 분석을 통한 과학적 운동 처방이 강점입니다.",
    photo: "/trainer-male-1.jpg",
    available_hours: "월-금 09:00-18:00",
    rating: 4.9,
    total_clients: 87,
  },
  {
    id: "TRAINER-002",
    name: "박지수",
    role: "퍼스널 트레이너",
    specialties: ["체형 교정", "재활 운동", "필라테스"],
    certifications: ["NASM-CPT", "재활 운동 전문가", "필라테스 지도자 1급"],
    experience_years: 6,
    bio: "물리치료학 전공 후 재활 운동과 체형 교정에 특화된 트레이닝을 제공합니다. 부상 방지와 통증 개선을 위한 맞춤형 운동 프로그램으로 많은 회원들의 만족도가 높습니다.",
    photo: "/trainer-female-1.jpg",
    available_hours: "화-토 10:00-19:00",
    rating: 4.8,
    total_clients: 62,
  },
  {
    id: "TRAINER-003",
    name: "이현우",
    role: "퍼스널 트레이너",
    specialties: ["크로스핏", "기능성 운동", "다이어트"],
    certifications: ["CrossFit Level 2", "ISSA-CPT", "영양 코칭 전문가"],
    experience_years: 5,
    bio: "크로스핏 선수 출신으로 고강도 운동과 기능성 훈련에 전문성을 가지고 있습니다. 단기간 체중 감량과 체력 향상을 원하는 회원들에게 효과적인 프로그램을 제공합니다.",
    photo: "/trainer-male-2.jpg",
    available_hours: "월-금 13:00-22:00",
    rating: 4.7,
    total_clients: 54,
  },
  {
    id: "TRAINER-004",
    name: "최서연",
    role: "요가 & 필라테스 강사",
    specialties: ["요가", "필라테스", "스트레칭", "마인드풀니스"],
    certifications: ["요가 지도자 1급", "필라테스 매트&기구", "명상 지도사"],
    experience_years: 7,
    bio: "10년 이상의 요가 수련 경력을 바탕으로 몸과 마음의 균형을 찾는 수업을 진행합니다. 유연성 향상과 코어 강화, 스트레스 해소를 위한 통합 프로그램을 제공합니다.",
    photo: "/trainer-female-2.jpg",
    available_hours: "월-금 07:00-14:00",
    rating: 4.9,
    total_clients: 93,
  },
]
[V0_FILE]typescriptreact:file="components/demo/center-members-panel.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Users, Clock, Calendar, TrendingDown } from "lucide-react"
import { mockCenterMembers, type CenterMember, mockMemberWorkoutLogs, mockMemberUsageStats } from "@/data/mockData"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { Dumbbell, TrendingUp, Activity } from "lucide-react"

export function CenterMembersPanel() {
  const [members, setMembers] = useState<CenterMember[]>(mockCenterMembers)
  const [selectedMember, setSelectedMember] = useState<CenterMember | null>(null)
  const [modalOpen, setModalOpen] = useState(false)

const inGymCount = members.filter((m) => m.current_status === "in_gym").length

const handleMemberClick = (member: CenterMember) => {
    setSelectedMember(member)
    setModalOpen(true)
  }

const getTimeSinceCheckIn = (member: CenterMember) => {
    if (!member.lastCheckIn) return "N/A"

if (member.current_status === "in_gym") {
      const minutes = Math.floor((Date.now() - member.lastCheckIn.getTime()) / (1000 * 60))
      if (minutes < 60) return `입장 ${minutes}분 경과`
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      return `입장 ${hours}시간 ${mins}분 경과`
    }

return null
  }

const getCheckInOutTimes = (member: CenterMember) => {
    if (member.current_status === "out_gym" && member.lastCheckIn && member.lastCheckOut) {
      const checkInTime = member.lastCheckIn.toLocaleTimeString("ko-KR", {
        hour: "2-digit",
        minute: "2-digit",
      })
      const checkOutTime = member.lastCheckOut.toLocaleTimeString("ko-KR", {
        hour: "2-digit",
        minute: "2-digit",
      })
      const duration = Math.floor((member.lastCheckOut.getTime() - member.lastCheckIn.getTime()) / (1000 * 60))
      return { checkInTime, checkOutTime, duration }
    }
    return null
  }

const getUsageStats = (userId: string) => {
    return mockMemberUsageStats.find((stat) => stat.user_id === userId)
  }

const getMemberLevelBadge = (level: string) => {
    const colors = {
      VIP: "bg-amber-500 text-white",
      Premium: "bg-cyan-500 text-white",
      Standard: "bg-slate-500 text-white",
    }
    return colors[level as keyof typeof colors] || "bg-gray-500"
  }

const getRecommendations = (userId: string) => {
    const logs = mockMemberWorkoutLogs[userId] || []
    if (logs.length === 0) {
      return [
        "첫 운동을 시작해보세요! 가벼운 유산소 운동으로 시작하는 것을 추천합니다.",
        "트레이너와 상담하여 개인 맞춤 운동 계획을 수립하세요.",
      ]
    }

const recommendations: string[] = []
    const avgVelocity =
      logs.filter((l) => l.avg_velocity).reduce((sum, l) => sum + (l.avg_velocity || 0), 0) /
      (logs.filter((l) => l.avg_velocity).length || 1)

if (avgVelocity < 0.4) {
      recommendations.push("운동 속도가 느립니다. 중량을 5-10% 낮추고 속도를 높여보세요.")
    } else if (avgVelocity > 0.5) {
      recommendations.push("훌륭한 운동 속도입니다! 중량을 5kg 증량해보세요.")
    } else {
      recommendations.push("적절한 운동 속도를 유지하고 있습니다.")
    }

recommendations.push("규칙적인 운동 습관이 잘 유지되고 있습니다.")
    recommendations.push("오늘도 열심히 운동 중이시네요! 파이팅!")

return recommendations
  }

return (
    <>
      <Card className="bg-black/40 border-cyan-500/20">
        <CardHeader>
          <CardTitle className="flex flex-col sm:flex-row sm:items-center gap-2 text-white text-base sm:text-lg">
            <div className="flex items-center gap-2">
              <Users className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
              회원 현황
            </div>
            <Badge className="sm:ml-auto bg-cyan-500 w-fit text-xs sm:text-sm">{inGymCount}명 운동중</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-[300px] sm:h-[400px]">
            <div className="space-y-2 sm:space-y-3">
              {members.map((member) => {
                const usageStats = getUsageStats(member.user_id)
                const checkTimes = getCheckInOutTimes(member)
                const timeElapsed = getTimeSinceCheckIn(member)

return (
                  <div
                    key={member.id}
                    onClick={() => handleMemberClick(member)}
                    className="flex items-center justify-between p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/60 hover:bg-cyan-500/10 transition-colors cursor-pointer"
                  >
                    <div className="space-y-1 flex-1">
                      <div className="flex flex-wrap items-center gap-1 sm:gap-2">
                        <p className="font-medium text-white text-sm sm:text-base">{member.name}</p>
                        <Badge
                          variant={member.current_status === "in_gym" ? "default" : "secondary"}
                          className={`text-xs ${member.current_status === "in_gym" ? "bg-cyan-500" : ""}`}
                        >
                          {member.current_status === "in_gym" ? "운동중" : "퇴장"}
                        </Badge>
                        <Badge className={`${getMemberLevelBadge(member.membershipLevel)} text-xs`}>
                          {member.membershipLevel}
                        </Badge>
                        {usageStats?.visit_frequency === "low" && (
                          <Badge variant="outline" className="text-xs border-orange-500/50 text-orange-400">
                            <TrendingDown className="h-3 w-3 mr-1" />
                            저조
                          </Badge>
                        )}
                      </div>
                      <p className="text-xs sm:text-sm text-gray-400">
                        {member.user_id} • RF: {member.rf_chip_id}
                      </p>

{timeElapsed && (
                        <p className="text-xs text-cyan-400 flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {timeElapsed}
                        </p>
                      )}

{checkTimes && (
                        <div className="text-xs text-gray-400 space-y-0.5">
                          <p className="flex items-center gap-1">
                            입장: {checkTimes.checkInTime} • 퇴장: {checkTimes.checkOutTime}
                          </p>
                          <p className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            센터 이용시간: {checkTimes.duration}분
                          </p>
                        </div>
                      )}

{usageStats && (
                        <p className="text-xs text-gray-500 flex items-center gap-1">
                          <Calendar className="h-3 w-3" />
                          주평균 {usageStats.avg_visits_per_week}회 • 총 {usageStats.total_visits}회 방문 • 누적{" "}
                          {usageStats.total_gym_hours}시간
                        </p>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          </ScrollArea>
        </CardContent>
      </Card>

{/* Member Detail Modal */}
      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent className="max-w-full h-full sm:max-w-3xl sm:h-auto sm:max-h-[85vh] bg-black border-cyan-500/20">
          <DialogHeader>
            <DialogTitle className="text-xl sm:text-2xl text-white">{selectedMember?.name} 회원 상세</DialogTitle>
            <DialogDescription className="text-sm sm:text-base text-gray-400">
              최근 운동 기록 및 AI 권고사항
            </DialogDescription>
          </DialogHeader>

<ScrollArea className="h-[calc(100vh-120px)] sm:h-[500px] pr-2 sm:pr-4">
            <div className="space-y-4 sm:space-y-6">
              {/* AI Recommendations */}
              <Card className="bg-black/60 border-cyan-500/20">
                <CardHeader>
                  <CardTitle className="text-base sm:text-lg flex items-center gap-2 text-white">
                    <TrendingUp className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
                    AI 운동 권고사항
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {getRecommendations(selectedMember?.user_id || "").map((rec, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <Activity className="h-3 w-3 sm:h-4 sm:w-4 mt-0.5 text-cyan-400 flex-shrink-0" />
                        <span className="text-xs sm:text-sm text-gray-300">{rec}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>

{/* Recent Workout Logs */}
              <Card className="bg-black/60 border-cyan-500/20">
                <CardHeader>
                  <CardTitle className="text-base sm:text-lg flex items-center gap-2 text-white">
                    <Dumbbell className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
                    최근 운동 기록
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  {mockMemberWorkoutLogs[selectedMember?.user_id || ""]?.length === 0 ? (
                    <div className="text-center py-8">
                      <Dumbbell className="h-10 w-10 sm:h-12 sm:w-12 mx-auto text-gray-600 mb-3" />
                      <p className="text-xs sm:text-sm text-gray-400">아직 운동 기록이 없습니다.</p>
                    </div>
                  ) : (
                    <div className="space-y-2 sm:space-y-3">
                      {mockMemberWorkoutLogs[selectedMember?.user_id || ""]?.map((log) => (
                        <div
                          key={log.id}
                          className="p-2 sm:p-3 rounded-lg border border-cyan-500/20 bg-black/40 space-y-2"
                        >
                          <div className="flex items-center justify-between">
                            <div className="font-medium text-white text-sm sm:text-base">{log.exercise_name}</div>
                            <Badge variant="outline" className="text-xs border-cyan-500/20 text-gray-400">
                              {new Date(log.created_at).toLocaleString("ko-KR", {
                                month: "short",
                                day: "numeric",
                                hour: "2-digit",
                                minute: "2-digit",
                              })}
                            </Badge>
                          </div>

<div className="grid grid-cols-2 gap-2 text-xs sm:text-sm">
                            <div className="flex items-center gap-2">
                              <span className="text-gray-400">중량:</span>
                              <span className="font-medium text-cyan-400">{log.weight || "N/A"} kg</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-gray-400">세트:</span>
                              <span className="font-medium text-cyan-400">
                                {log.sets} × {log.reps}
                              </span>
                            </div>
                            {log.avg_velocity && (
                              <div className="flex items-center gap-2">
                                <span className="text-gray-400">속도:</span>
                                <span className="font-medium text-cyan-400">{log.avg_velocity.toFixed(2)} m/s</span>
                              </div>
                            )}
                            {log.peak_power && (
                              <div className="flex items-center gap-2">
                                <span className="text-gray-400">파워:</span>
                                <span className="font-medium text-cyan-400">{log.peak_power} W</span>
                              </div>
                            )}
                          </div>

{log.ai_feedback && (
                            <div className="mt-2 p-2 bg-cyan-500/10 rounded text-xs border border-cyan-500/20">
                              <span className="font-medium text-cyan-400">AI 피드백:</span>{" "}
                              <span className="text-gray-300">{log.ai_feedback}</span>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/demo/trainer-profile-modal.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Star, Award, Users, Clock, BookOpen } from "lucide-react"
import type { Trainer } from "@/data/mockData"
import Image from "next/image"

interface TrainerProfileModalProps {
  trainer: Trainer | null
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function TrainerProfileModal({ trainer, open, onOpenChange }: TrainerProfileModalProps) {
  if (!trainer) return null

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-black/95 border border-cyan-500/30 text-white max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl sm:text-2xl font-bold text-cyan-400">트레이너 프로필</DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Profile Header */}
          <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
            <div className="relative w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden border-4 border-cyan-500/30 flex-shrink-0">
              <Image
                src={trainer.photo || "/placeholder.svg"}
                alt={trainer.name}
                fill
                className="object-cover"
                sizes="(max-width: 640px) 128px, 160px"
              />
            </div>

<div className="flex-1 text-center sm:text-left space-y-3">
              <div>
                <h2 className="text-2xl sm:text-3xl font-bold text-white">{trainer.name}</h2>
                <p className="text-cyan-400 text-sm sm:text-base mt-1">{trainer.role}</p>
              </div>

<div className="flex flex-wrap gap-2 justify-center sm:justify-start">
                {trainer.specialties.map((specialty) => (
                  <Badge key={specialty} className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30 text-xs">
                    {specialty}
                  </Badge>
                ))}
              </div>

<div className="flex flex-wrap items-center gap-4 justify-center sm:justify-start text-sm">
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                  <span className="text-yellow-400 font-bold">{trainer.rating}</span>
                  <span className="text-gray-400">/5.0</span>
                </div>
                <div className="flex items-center gap-1 text-gray-300">
                  <Users className="h-4 w-4 text-cyan-400" />
                  <span>{trainer.total_clients}명 지도</span>
                </div>
                <div className="flex items-center gap-1 text-gray-300">
                  <BookOpen className="h-4 w-4 text-cyan-400" />
                  <span>{trainer.experience_years}년 경력</span>
                </div>
              </div>
            </div>
          </div>

{/* Bio Section */}
          <div className="p-4 rounded-lg border border-cyan-500/20 bg-black/60">
            <h3 className="text-lg font-semibold text-cyan-400 mb-3 flex items-center gap-2">
              <Award className="h-5 w-5" />
              소개
            </h3>
            <p className="text-gray-300 text-sm sm:text-base leading-relaxed">{trainer.bio}</p>
          </div>

{/* Certifications */}
          <div className="p-4 rounded-lg border border-cyan-500/20 bg-black/60">
            <h3 className="text-lg font-semibold text-cyan-400 mb-3 flex items-center gap-2">
              <Award className="h-5 w-5" />
              자격증 및 전문 분야
            </h3>
            <div className="flex flex-wrap gap-2">
              {trainer.certifications.map((cert) => (
                <Badge
                  key={cert}
                  variant="outline"
                  className="border-cyan-500/30 text-gray-300 bg-cyan-500/5 text-xs sm:text-sm"
                >
                  {cert}
                </Badge>
              ))}
            </div>
          </div>

{/* Availability */}
          <div className="p-4 rounded-lg border border-cyan-500/20 bg-black/60">
            <h3 className="text-lg font-semibold text-cyan-400 mb-3 flex items-center gap-2">
              <Clock className="h-5 w-5" />
              근무 시간
            </h3>
            <p className="text-gray-300 text-sm sm:text-base">{trainer.available_hours}</p>
          </div>

{/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-3">
            <Button className="flex-1 bg-cyan-500 hover:bg-cyan-600 text-white">PT 상담 신청</Button>
            <Button
              variant="outline"
              className="flex-1 border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 bg-transparent"
            >
              스케줄 확인
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/demo/staff-attendance-panel.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Users, Clock, Info } from "lucide-react"
import { mockStaffAttendance, mockTrainers, type Trainer } from "@/data/mockData"
import { TrainerProfileModal } from "./trainer-profile-modal"

export function StaffAttendancePanel() {
  const [selectedTrainer, setSelectedTrainer] = useState<Trainer | null>(null)
  const [modalOpen, setModalOpen] = useState(false)

const onDutyCount = mockStaffAttendance.filter((s) => s.status === "on_duty").length

const getWorkingHours = (checkIn: Date, checkOut?: Date) => {
    const end = checkOut || new Date()
    const hours = Math.floor((end.getTime() - checkIn.getTime()) / (1000 * 60 * 60))
    const minutes = Math.floor(((end.getTime() - checkIn.getTime()) % (1000 * 60 * 60)) / (1000 * 60))
    return `${hours}시간 ${minutes}분`
  }

const findTrainer = (staffName: string) => {
    return mockTrainers.find((trainer) => trainer.name === staffName)
  }

const handleViewProfile = (staffName: string) => {
    const trainer = findTrainer(staffName)
    if (trainer) {
      setSelectedTrainer(trainer)
      setModalOpen(true)
    }
  }

return (
    <>
      <Card className="bg-black/40 border-cyan-500/20">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-white text-base sm:text-lg">
            <Users className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
            직원 근태 현황 (RF 칩)
            <Badge className="ml-auto bg-cyan-500 text-xs sm:text-sm">{onDutyCount}명 근무중</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {mockStaffAttendance.map((staff) => {
              const trainer = findTrainer(staff.staff_name)
              const isTrainer = trainer !== undefined

return (
                <div
                  key={staff.id}
                  className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/60"
                >
                  <div className="space-y-1 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <p className="font-medium text-white text-sm sm:text-base">{staff.staff_name}</p>
                      <Badge variant="outline" className="text-xs border-cyan-500/20 text-gray-400">
                        {staff.role}
                      </Badge>
                      {isTrainer && (
                        <Badge className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30 text-xs">트레이너</Badge>
                      )}
                    </div>
                    <p className="text-xs sm:text-sm text-gray-400">RF: {staff.rf_chip_id}</p>
                    <p className="text-xs text-cyan-400 flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      출근: {staff.check_in_time.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })}
                      {staff.check_out_time &&
                        ` • 퇴근: ${staff.check_out_time.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })}`}
                    </p>
                    <p className="text-xs text-gray-400">
                      근무시간: {getWorkingHours(staff.check_in_time, staff.check_out_time)}
                    </p>
                  </div>

<div className="flex items-center gap-2 w-full sm:w-auto">
                    {isTrainer && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleViewProfile(staff.staff_name)}
                        className="border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 bg-transparent text-xs flex-1 sm:flex-none"
                      >
                        <Info className="h-3 w-3 mr-1" />
                        프로필
                      </Button>
                    )}
                    <Badge
                      className={`${staff.status === "on_duty" ? "bg-cyan-500" : "bg-gray-500"} text-xs sm:text-sm flex-shrink-0`}
                    >
                      {staff.status === "on_duty" ? "근무중" : "퇴근"}
                    </Badge>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

<TrainerProfileModal trainer={selectedTrainer} open={modalOpen} onOpenChange={setModalOpen} />
    </>
  )
}
[V0_FILE]jpg:file="public/trainer-male-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trainer-male-1-mzHtSHwBiMtOw7NfdOfRsTip8Itd66.jpg" isMerged="true"
[V0_FILE]jpg:file="public/trainer-female-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trainer-female-1-raLXbP61HsoGK4HHPpezxYPi8KCrM9.jpg" isMerged="true"
[V0_FILE]jpg:file="public/trainer-male-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trainer-male-2-PKZDMEnMwTG2DtgwkAZ8E3Hq3mwS1r.jpg" isMerged="true"
[V0_FILE]jpg:file="public/trainer-female-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/trainer-female-2-P8mfxnbTJ3OUQsFsIMCEoSUj3Yozcv.jpg" isMerged="true"
[V0_FILE]typescript:file="app/api/generate-announcement/route.ts" isMerged="true"
import { generateText } from "ai"

export async function POST(req: Request) {
  const { topic, targetAudience } = await req.json()

const { text } = await generateText({
    model: "openai/gpt-5",
    prompt: `당신은 헬스장 공지사항 작성 전문가입니다. 다음 정보를 바탕으로 회원들에게 보낼 공지사항을 작성해주세요.

주제: ${topic}
대상: ${targetAudience}

요구사항:
- 친근하고 동기부여가 되는 톤으로 작성
- 구체적이고 실용적인 정보 포함
- 이모지를 적절히 활용하여 시각적 흥미 유발
- 300자 이내로 작성
- 행동을 유도하는 문구 포함

공지사항을 작성해주세요:`,
    maxOutputTokens: 500,
    temperature: 0.7,
  })

return Response.json({ content: text })
}
[V0_FILE]typescriptreact:file="components/demo/announcement-preview-modal.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Send, X, CheckCircle } from "lucide-react"

interface AnnouncementPreviewModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  content: string
  onConfirmSend: () => void
  targetAudience?: string
  estimatedRecipients?: number
}

export function AnnouncementPreviewModal({
  open,
  onOpenChange,
  title,
  content,
  onConfirmSend,
  targetAudience = "전체 회원",
  estimatedRecipients = 0,
}: AnnouncementPreviewModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-black/95 border-cyan-500/30 text-white max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-lg sm:text-xl text-cyan-400 flex items-center gap-2">
            <CheckCircle className="h-5 w-5" />
            공지사항 미리보기
          </DialogTitle>
        </DialogHeader>

<div className="space-y-4 sm:space-y-6">
          {/* 수신 정보 */}
          <div className="p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/60">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
              <div>
                <p className="text-xs sm:text-sm text-gray-400">수신 대상</p>
                <p className="font-medium text-white text-sm sm:text-base">{targetAudience}</p>
              </div>
              <Badge className="bg-cyan-500 text-white text-xs sm:text-sm w-fit">약 {estimatedRecipients}명</Badge>
            </div>
          </div>

{/* 공지사항 내용 미리보기 */}
          <div className="space-y-3 sm:space-y-4">
            <div className="p-4 sm:p-6 rounded-lg border border-cyan-500/30 bg-gradient-to-br from-black/80 to-cyan-950/20">
              <div className="mb-3 sm:mb-4">
                <Badge className="bg-cyan-500 text-white mb-2 text-xs">공지사항</Badge>
                <h3 className="text-base sm:text-xl font-bold text-white leading-relaxed">{title}</h3>
              </div>
              <div className="border-t border-cyan-500/20 pt-3 sm:pt-4">
                <p className="text-xs sm:text-sm text-gray-300 leading-relaxed whitespace-pre-wrap">{content}</p>
              </div>
              <div className="mt-4 pt-3 sm:pt-4 border-t border-cyan-500/20">
                <p className="text-xs text-gray-500">
                  발송 시각:{" "}
                  {new Date().toLocaleString("ko-KR", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </p>
              </div>
            </div>

{/* 회원 앱에서 보이는 모습 시뮬레이션 */}
            <div className="p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/40">
              <p className="text-xs text-gray-400 mb-2">📱 회원 앱에서 보이는 모습</p>
              <div className="bg-gradient-to-br from-gray-900 to-black rounded-lg p-3 sm:p-4 border border-gray-700">
                <div className="flex items-start gap-2 sm:gap-3">
                  <div className="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-cyan-500 flex items-center justify-center">
                    <span className="text-white text-xs sm:text-sm font-bold">센터</span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-bold text-white text-xs sm:text-sm truncate">{title}</p>
                    <p className="text-xs text-gray-400 mt-1 line-clamp-2">{content}</p>
                    <p className="text-xs text-gray-500 mt-1">방금 전</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

<DialogFooter className="flex-col sm:flex-row gap-2">
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="w-full sm:w-auto border-gray-600 hover:bg-gray-800 text-white text-xs sm:text-sm"
          >
            <X className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
            취소
          </Button>
          <Button
            onClick={() => {
              onConfirmSend()
              onOpenChange(false)
            }}
            className="w-full sm:w-auto bg-cyan-500 hover:bg-cyan-600 text-white text-xs sm:text-sm"
          >
            <Send className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
            전송하기
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/demo/center-operations-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Users, DollarSign, MessageSquare, Send, TrendingUp, AlertCircle, Sparkles, Eye } from "lucide-react"
import {
  mockPayments,
  mockAnnouncements,
  mockCenterMembers,
  mockMemberUsageStats,
  type Announcement,
} from "@/data/mockData"
import { useToast } from "@/hooks/use-toast"
import { AnnouncementPreviewModal } from "./announcement-preview-modal"

export function CenterOperationsPanel() {
  const { toast } = useToast()
  const [newAnnouncement, setNewAnnouncement] = useState({ title: "", content: "" })
  const [announcements, setAnnouncements] = useState(mockAnnouncements)
  const [sending, setSending] = useState(false)
  const [generating, setGenerating] = useState(false)
  const [previewOpen, setPreviewOpen] = useState(false)
  const [targetAudience, setTargetAudience] = useState("all")

const totalRevenue = mockPayments.reduce((sum, p) => sum + p.amount, 0)
  const activeMembersCount = mockCenterMembers.filter((m) => m.current_status === "in_gym").length

const lowUsageMembers = mockCenterMembers.filter((member) => {
    const stats = mockMemberUsageStats.find((s) => s.user_id === member.user_id)
    return stats?.visit_frequency === "low"
  })

const membersByLevel = mockCenterMembers.reduce(
    (acc, member) => {
      acc[member.membershipLevel] = (acc[member.membershipLevel] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

const handleGenerateWithAI = async () => {
    if (!newAnnouncement.title) {
      toast({
        title: "입력 오류",
        description: "제목을 입력하면 AI가 내용을 자동으로 생성합니다.",
        variant: "destructive",
      })
      return
    }

setGenerating(true)

try {
      // Demo mode: simulate API call with mock response
      await new Promise((resolve) => setTimeout(resolve, 2000))

const mockGeneratedContent =
        targetAudience === "low-usage"
          ? `안녕하세요 회원님! 🎯

오랜만입니다! 요즘 바쁘신가요? 
건강한 운동 습관을 유지하기 위해 특별한 혜택을 준비했습니다.

🎁 이번 달 프로모션:
- 주 3회 이상 방문 시 PT 1회 무료 제공
- 친구 추천 시 양쪽 모두 1개월 10% 할인
- 새로운 그룹 운동 프로그램 무료 체험

💪 함께 건강한 습관을 만들어가요!
궁금한 점은 언제든 문의해주세요.`
          : `안녕하세요 회원님! 💪

${newAnnouncement.title}에 대한 안내입니다.

저희 센터에서는 여러분의 건강한 라이프스타일을 위해 최선을 다하고 있습니다.

🌟 이번 프로그램의 주요 특징:
- 전문 트레이너의 1:1 맞춤 지도
- 최신 운동 과학 기반 프로그램
- 실시간 성과 모니터링

더 자세한 내용은 센터 데스크에 문의해주세요!

함께 목표를 달성해봐요! 🎯`

setNewAnnouncement({ ...newAnnouncement, content: mockGeneratedContent })

toast({
        title: "AI 생성 완료",
        description: "공지사항 내용이 자동으로 생성되었습니다. 수정 후 전송하세요.",
        className: "bg-cyan-500 text-white",
      })
    } catch (error) {
      toast({
        title: "생성 실패",
        description: "AI 생성 중 오류가 발생했습니다.",
        variant: "destructive",
      })
    } finally {
      setGenerating(false)
    }
  }

const handlePreviewAnnouncement = () => {
    if (!newAnnouncement.title || !newAnnouncement.content) {
      toast({
        title: "입력 오류",
        description: "제목과 내용을 모두 입력해주세요.",
        variant: "destructive",
      })
      return
    }

setPreviewOpen(true)
  }

const handleSendAnnouncement = () => {
    setSending(true)
    setTimeout(() => {
      const newAnn: Announcement = {
        id: `ANN-${Date.now()}`,
        title: newAnnouncement.title,
        content: newAnnouncement.content,
        created_at: new Date(),
        priority: "normal",
      }
      setAnnouncements([newAnn, ...announcements])
      setNewAnnouncement({ title: "", content: "" })
      setSending(false)
      toast({
        title: "전송 완료",
        description: "공지사항이 모든 회원에게 전송되었습니다.",
        className: "bg-cyan-500 text-white",
      })
    }, 1000)
  }

const handleSendEncouragementToLowUsage = () => {
    if (lowUsageMembers.length === 0) {
      toast({
        title: "대상 없음",
        description: "센터 이용이 저조한 회원이 없습니다.",
        variant: "destructive",
      })
      return
    }

setSending(true)
    setTimeout(() => {
      const encouragementMessage: Announcement = {
        id: `ANN-${Date.now()}`,
        title: "🎯 센터 이용 독려 및 특별 프로모션",
        content: `${lowUsageMembers.map((m) => m.name).join(", ")} 회원님께 특별 혜택을 드립니다! 이번 달 4회 이상 방문 시 PT 1회 무료 제공! 건강한 운동 습관을 함께 만들어가요.`,
        created_at: new Date(),
        priority: "high",
      }
      setAnnouncements([encouragementMessage, ...announcements])
      setSending(false)
      toast({
        title: "독려 메시지 전송 완료",
        description: `${lowUsageMembers.length}명의 회원에게 독려 메시지를 전송했습니다.`,
        className: "bg-cyan-500 text-white",
      })
    }, 1000)
  }

const getEstimatedRecipients = () => {
    if (targetAudience === "low-usage") return lowUsageMembers.length
    if (targetAudience === "vip") return membersByLevel["VIP"] || 0
    if (targetAudience === "premium") return membersByLevel["Premium"] || 0
    if (targetAudience === "basic") return membersByLevel["Basic"] || 0
    return mockCenterMembers.length
  }

const getTargetAudienceLabel = () => {
    if (targetAudience === "low-usage") return "센터 이용 저조 회원"
    if (targetAudience === "vip") return "VIP 회원"
    if (targetAudience === "premium") return "Premium 회원"
    if (targetAudience === "basic") return "Basic 회원"
    return "전체 회원"
  }

return (
    <div className="space-y-4 sm:space-y-6">
      <AnnouncementPreviewModal
        open={previewOpen}
        onOpenChange={setPreviewOpen}
        title={newAnnouncement.title}
        content={newAnnouncement.content}
        targetAudience={getTargetAudienceLabel()}
        estimatedRecipients={getEstimatedRecipients()}
        onConfirmSend={handleSendAnnouncement}
      />

<Card className="bg-black/40 border-cyan-500/20">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-white text-base sm:text-lg">
            <Users className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
            센터 운영 현황
          </CardTitle>
          <CardDescription className="text-gray-400 text-xs sm:text-sm">회원 통계 및 수익 관리</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div className="p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/60">
              <div className="flex items-center gap-2 mb-2">
                <Users className="h-4 w-4 text-cyan-400" />
                <span className="text-xs sm:text-sm font-medium text-gray-300">총 회원수</span>
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-cyan-400">{mockCenterMembers.length}명</p>
              <p className="text-xs text-gray-400 mt-1">현재 운동중: {activeMembersCount}명</p>
            </div>

<div className="p-3 sm:p-4 rounded-lg border border-cyan-500/20 bg-black/60">
              <div className="flex items-center gap-2 mb-2">
                <DollarSign className="h-4 w-4 text-cyan-400" />
                <span className="text-xs sm:text-sm font-medium text-gray-300">월 수익</span>
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-cyan-400">{totalRevenue.toLocaleString()}원</p>
              <p className="text-xs text-gray-400 mt-1">최근 30일 기준</p>
            </div>
          </div>
        </CardContent>
      </Card>

<TabsContent value="members" className="space-y-4">
          <Card className="bg-black/40 border-cyan-500/20">
            <CardHeader>
              <CardTitle className="text-base sm:text-lg text-white">회원 등급별 현황</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {Object.entries(membersByLevel).map(([level, count]) => (
                  <div
                    key={level}
                    className="flex items-center justify-between p-3 rounded-lg border border-cyan-500/20 bg-black/60"
                  >
                    <div>
                      <p className="font-medium text-white text-sm sm:text-base">{level}</p>
                      <p className="text-xs sm:text-sm text-gray-400">
                        월 {level === "VIP" ? "150,000" : level === "Premium" ? "100,000" : "70,000"}원
                      </p>
                    </div>
                    <Badge className="bg-cyan-500 text-xs sm:text-sm">{count}명</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{lowUsageMembers.length > 0 && (
            <Card className="bg-orange-500/10 border-orange-500/30">
              <CardHeader>
                <CardTitle className="text-base sm:text-lg flex items-center gap-2 text-orange-400">
                  <AlertCircle className="h-4 w-4 sm:h-5 sm:w-5" />
                  센터 이용 저조 회원
                </CardTitle>
                <CardDescription className="text-orange-300/70 text-xs sm:text-sm">
                  주평균 1회 미만 방문 회원에게 독려 메시지를 보내세요
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex flex-wrap gap-2">
                  {lowUsageMembers.map((member) => (
                    <Badge key={member.id} variant="outline" className="border-orange-500/50 text-orange-300 text-xs">
                      {member.name} (
                      {mockMemberUsageStats.find((s) => s.user_id === member.user_id)?.avg_visits_per_week}
                      회/주)
                    </Badge>
                  ))}
                </div>
                <Button
                  onClick={handleSendEncouragementToLowUsage}
                  disabled={sending}
                  className="w-full bg-orange-500 hover:bg-orange-600 text-white text-xs sm:text-sm"
                >
                  <Send className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
                  {sending ? "전송 중..." : `${lowUsageMembers.length}명에게 독려 메시지 보내기`}
                </Button>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="revenue" className="space-y-4">
          <Card className="bg-black/40 border-cyan-500/20">
            <CardHeader>
              <CardTitle className="text-base sm:text-lg flex items-center gap-2 text-white">
                <TrendingUp className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
                최근 회비 납부 내역
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {mockPayments.slice(0, 10).map((payment) => (
                  <div
                    key={payment.id}
                    className="flex items-center justify-between p-3 rounded-lg border border-cyan-500/20 bg-black/60 text-xs sm:text-sm"
                  >
                    <div>
                      <p className="font-medium text-cyan-400">{payment.amount.toLocaleString()}원</p>
                      <p className="text-xs text-gray-400">
                        {payment.member_name} • {payment.payment_date.toLocaleDateString("ko-KR")} •{" "}
                        {payment.payment_method}
                      </p>
                    </div>
                    <Badge className="bg-cyan-500 text-xs">완료</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="announcements" className="space-y-4">
          <Card className="bg-black/40 border-cyan-500/20">
            <CardHeader>
              <CardTitle className="text-base sm:text-lg flex items-center gap-2 text-white">
                <MessageSquare className="h-4 w-4 sm:h-5 sm:w-5 text-cyan-400" />
                AI 공지사항 작성
              </CardTitle>
              <CardDescription className="text-gray-400 text-xs sm:text-sm">
                AI가 자동으로 공지사항 내용을 생성해드립니다
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="target" className="text-gray-300 text-xs sm:text-sm">
                  수신 대상
                </Label>
                <Select value={targetAudience} onValueChange={setTargetAudience}>
                  <SelectTrigger className="bg-black/60 border-cyan-500/20 text-white text-xs sm:text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-black border-cyan-500/20">
                    <SelectItem value="all" className="text-white text-xs sm:text-sm">
                      전체 회원 ({mockCenterMembers.length}명)
                    </SelectItem>
                    <SelectItem value="vip" className="text-white text-xs sm:text-sm">
                      VIP 회원 ({membersByLevel["VIP"] || 0}명)
                    </SelectItem>
                    <SelectItem value="premium" className="text-white text-xs sm:text-sm">
                      Premium 회원 ({membersByLevel["Premium"] || 0}명)
                    </SelectItem>
                    <SelectItem value="basic" className="text-white text-xs sm:text-sm">
                      Basic 회원 ({membersByLevel["Basic"] || 0}명)
                    </SelectItem>
                    <SelectItem value="low-usage" className="text-white text-xs sm:text-sm">
                      센터 이용 저조 회원 ({lowUsageMembers.length}명)
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="title" className="text-gray-300 text-xs sm:text-sm">
                  제목
                </Label>
                <Input
                  id="title"
                  placeholder="예: 신규 PT 프로그램 안내, 휴관일 공지 등"
                  value={newAnnouncement.title}
                  onChange={(e) => setNewAnnouncement({ ...newAnnouncement, title: e.target.value })}
                  className="bg-black/60 border-cyan-500/20 text-white text-xs sm:text-sm"
                />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="content" className="text-gray-300 text-xs sm:text-sm">
                    내용
                  </Label>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={handleGenerateWithAI}
                    disabled={generating || !newAnnouncement.title}
                    className="border-cyan-500/30 hover:bg-cyan-500/20 text-cyan-400 text-xs bg-transparent"
                  >
                    <Sparkles className="h-3 w-3 mr-1" />
                    {generating ? "생성 중..." : "AI로 작성"}
                  </Button>
                </div>
                <Textarea
                  id="content"
                  placeholder="AI가 자동으로 내용을 생성하거나, 직접 입력하세요"
                  value={newAnnouncement.content}
                  onChange={(e) => setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
                  rows={6}
                  className="bg-black/60 border-cyan-500/20 text-white text-xs sm:text-sm"
                />
              </div>
              <div className="flex flex-col sm:flex-row gap-2">
                <Button
                  onClick={handlePreviewAnnouncement}
                  disabled={sending || !newAnnouncement.title || !newAnnouncement.content}
                  variant="outline"
                  className="flex-1 border-cyan-500/30 hover:bg-cyan-500/20 text-cyan-400 text-xs sm:text-sm bg-transparent"
                >
                  <Eye className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
                  미리보기
                </Button>
                <Button
                  onClick={handleSendAnnouncement}
                  disabled={sending || !newAnnouncement.title || !newAnnouncement.content}
                  className="flex-1 bg-cyan-500 hover:bg-cyan-600 text-xs sm:text-sm"
                >
                  <Send className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
                  {sending ? "전송 중..." : "전송하기"}
                </Button>
              </div>

<div className="pt-4 border-t border-cyan-500/20 space-y-2">
                <p className="text-xs sm:text-sm font-medium text-white">최근 공지사항</p>
                {announcements.map((ann) => (
                  <div key={ann.id} className="p-3 rounded-lg border border-cyan-500/20 bg-black/60">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <p className="font-medium text-xs sm:text-sm text-white">{ann.title}</p>
                        <p className="text-xs text-gray-400 mt-1">{ann.content}</p>
                      </div>
                      <Badge variant="outline" className="text-xs border-cyan-500/20 text-cyan-400 flex-shrink-0">
                        {ann.created_at.toLocaleDateString("ko-KR")}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated to black background with cyan/mint accent theme */
  --background: oklch(0.05 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.08 0.01 210);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.08 0.01 210);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.75 0.15 195);
  --primary-foreground: oklch(0.05 0 0);
  --secondary: oklch(0.2 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.6 0 0);
  --accent: oklch(0.75 0.15 195);
  --accent-foreground: oklch(0.05 0 0);
  --destructive: oklch(0.5 0.2 25);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.25 0.05 195);
  --input: oklch(0.2 0.05 195);
  --ring: oklch(0.75 0.15 195);
  --chart-1: oklch(0.75 0.15 195);
  --chart-2: oklch(0.7 0.15 160);
  --chart-3: oklch(0.65 0.15 280);
  --chart-4: oklch(0.7 0.15 60);
  --chart-5: oklch(0.65 0.15 330);
  --sidebar: oklch(0.08 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.75 0.15 195);
  --sidebar-primary-foreground: oklch(0.05 0 0);
  --sidebar-accent: oklch(0.2 0 0);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0.05 195);
  --sidebar-ring: oklch(0.75 0.15 195);
}

.dark {
  /* Dark mode with black background and cyan/mint accents */
  --background: oklch(0.05 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.08 0.01 210);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.08 0.01 210);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.75 0.15 195);
  --primary-foreground: oklch(0.05 0 0);
  --secondary: oklch(0.2 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.6 0 0);
  --accent: oklch(0.75 0.15 195);
  --accent-foreground: oklch(0.05 0 0);
  --destructive: oklch(0.5 0.2 25);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.25 0.05 195);
  --input: oklch(0.2 0.05 195);
  --ring: oklch(0.75 0.15 195);
  --chart-1: oklch(0.75 0.15 195);
  --chart-2: oklch(0.7 0.15 160);
  --chart-3: oklch(0.65 0.15 280);
  --chart-4: oklch(0.7 0.15 60);
  --chart-5: oklch(0.65 0.15 330);
  --sidebar: oklch(0.08 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.75 0.15 195);
  --sidebar-primary-foreground: oklch(0.05 0 0);
  --sidebar-accent: oklch(0.2 0 0);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0.05 195);
  --sidebar-ring: oklch(0.75 0.15 195);
}

/* Fixed custom property references by using direct values instead of var() in @theme */
@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: oklch(0.05 0 0);
  --color-foreground: oklch(0.95 0 0);
  --color-card: oklch(0.08 0.01 210);
  --color-card-foreground: oklch(0.95 0 0);
  --color-popover: oklch(0.08 0.01 210);
  --color-popover-foreground: oklch(0.95 0 0);
  --color-primary: oklch(0.75 0.15 195);
  --color-primary-foreground: oklch(0.05 0 0);
  --color-secondary: oklch(0.2 0 0);
  --color-secondary-foreground: oklch(0.95 0 0);
  --color-muted: oklch(0.25 0 0);
  --color-muted-foreground: oklch(0.6 0 0);
  --color-accent: oklch(0.75 0.15 195);
  --color-accent-foreground: oklch(0.05 0 0);
  --color-destructive: oklch(0.5 0.2 25);
  --color-destructive-foreground: oklch(0.95 0 0);
  --color-border: oklch(0.25 0.05 195);
  --color-input: oklch(0.2 0.05 195);
  --color-ring: oklch(0.75 0.15 195);
  --color-chart-1: oklch(0.75 0.15 195);
  --color-chart-2: oklch(0.7 0.15 160);
  --color-chart-3: oklch(0.65 0.15 280);
  --color-chart-4: oklch(0.7 0.15 60);
  --color-chart-5: oklch(0.65 0.15 330);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --color-sidebar: oklch(0.08 0 0);
  --color-sidebar-foreground: oklch(0.95 0 0);
  --color-sidebar-primary: oklch(0.75 0.15 195);
  --color-sidebar-primary-foreground: oklch(0.05 0 0);
  --color-sidebar-accent: oklch(0.2 0 0);
  --color-sidebar-accent-foreground: oklch(0.95 0 0);
  --color-sidebar-border: oklch(0.25 0.05 195);
  --color-sidebar-ring: oklch(0.75 0.15 195);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This