[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'IKEA 룸 디자이너 | 나만의 공간 만들기', description: '평면도를 입력하고 취향을 선택하면 이케아 가구로 구성된 나만의 방을 AR로 체험하고 SNS에 공유하세요', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/floor-plan-input.tsx" isMerged="true" 'use client' import { useState, useRef } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Upload, Pencil } from 'lucide-react' interface FloorPlanInputProps { onComplete: (data: any) => void } export default function FloorPlanInput({ onComplete }: FloorPlanInputProps) { const [width, setWidth] = useState('4') const [length, setLength] = useState('5') const [uploadedFile, setUploadedFile] = useState(null) const canvasRef = useRef(null) const [isDrawing, setIsDrawing] = useState(false) const handleManualSubmit = () => { onComplete({ type: 'manual', width: parseFloat(width), length: parseFloat(length), }) } const handleFileUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { setUploadedFile(file) } } const handleUploadSubmit = () => { if (uploadedFile) { onComplete({ type: 'upload', file: uploadedFile, }) } } const startDrawing = (e: React.MouseEvent) => { setIsDrawing(true) const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return const rect = canvas.getBoundingClientRect() ctx.beginPath() ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top) } const draw = (e: React.MouseEvent) => { if (!isDrawing) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return const rect = canvas.getBoundingClientRect() ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top) ctx.strokeStyle = '#0071e3' ctx.lineWidth = 3 ctx.stroke() } const stopDrawing = () => { setIsDrawing(false) } const handleDrawingSubmit = () => { const canvas = canvasRef.current if (canvas) { onComplete({ type: 'drawing', imageData: canvas.toDataURL(), }) } } return ( 직접 입력 이미지 업로드 직접 그리기

가로 길이 (m) setWidth(e.target.value)} min="1" max="20" step="0.5" />

세로 길이 (m) setLength(e.target.value)} min="1" max="20" step="0.5" />

{width}m × {length}m

평면도 미리보기

평면도 이미지를 업로드하세요

PNG, JPG 형식 (최대 10MB)

{uploadedFile && (

✓ {uploadedFile.name}

)}

마우스로 방의 형태를 그려주세요

) } [V0_FILE]typescriptreact:file="components/style-selector.tsx" isEdit="true" isMerged="true" 'use client' import { Card } from '@/components/ui/card' import { cn } from '@/lib/utils' import { Check } from 'lucide-react' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Label } from '@/components/ui/label' import { Slider } from '@/components/ui/slider' interface StylePreferences { styles: string[] colors: string[] mood: string[] materials: string[] brightness: number } const styleOptions = [ { id: 'scandinavian', name: '스칸디나비안', description: '심플하고 밝은 북유럽 스타일', image: '/scandinavian-minimalist-living-room-white-wood-cle.jpg', }, { id: 'modern', name: '모던', description: '세련되고 깔끔한 현대적 스타일', image: '/modern-sleek-living-room-contemporary-furniture.jpg', }, { id: 'cozy', name: '코지', description: '따뜻하고 아늑한 분위기', image: '/cozy-warm-living-room-soft-textiles-comfortable.jpg', }, { id: 'industrial', name: '인더스트리얼', description: '빈티지하고 개성있는 스타일', image: '/industrial-loft-exposed-brick-metal-vintage.jpg', }, { id: 'minimalist', name: '미니멀', description: '꼭 필요한 것만 담은 간결함', image: '/minimalist-clean-empty-space-simple-room.jpg', }, { id: 'bohemian', name: '보헤미안', description: '자유롭고 다채로운 감성', image: '/bohemian-colorful-patterns-plants-eclectic.jpg', }, { id: 'japandi', name: '자판디', description: '일본과 북유럽의 조화', image: '/japandi-zen-minimalist-natural-wood.jpg', }, { id: 'midcentury', name: '미드센추리', description: '1950년대 레트로 감성', image: '/mid-century-modern-retro-furniture-60s.jpg', }, ] const colorOptions = [ { id: 'white', name: '화이트', color: '#FFFFFF' }, { id: 'beige', name: '베이지', color: '#E8D5C4' }, { id: 'gray', name: '그레이', color: '#9CA3AF' }, { id: 'blue', name: '블루', color: '#3B82F6' }, { id: 'green', name: '그린', color: '#10B981' }, { id: 'pink', name: '핑크', color: '#EC4899' }, { id: 'yellow', name: '옐로우', color: '#FCD34D' }, { id: 'black', name: '블랙', color: '#1F2937' }, { id: 'wood', name: '우드톤', color: '#92400E' }, { id: 'navy', name: '네이비', color: '#1E3A8A' }, ] const moodOptions = [ { id: 'calm', name: '차분한', emoji: '🧘' }, { id: 'energetic', name: '활기찬', emoji: '⚡' }, { id: 'warm', name: '따뜻한', emoji: '☀️' }, { id: 'cool', name: '시원한', emoji: '❄️' }, { id: 'natural', name: '자연적인', emoji: '🌿' }, { id: 'luxurious', name: '고급스러운', emoji: '✨' }, ] const materialOptions = [ { id: 'wood', name: '나무', emoji: '🪵' }, { id: 'metal', name: '금속', emoji: '⚙️' }, { id: 'fabric', name: '패브릭', emoji: '🧵' }, { id: 'glass', name: '유리', emoji: '💎' }, { id: 'rattan', name: '라탄', emoji: '🌾' }, { id: 'leather', name: '가죽', emoji: '👜' }, ] interface StyleSelectorProps { preferences: StylePreferences onChange: (preferences: StylePreferences) => void } export default function StyleSelector({ preferences, onChange }: StyleSelectorProps) { const toggleItem = (category: keyof Omit, id: string) => { const current = preferences[category] as string[] if (current.includes(id)) { onChange({ ...preferences, [category]: current.filter((s) => s !== id), }) } else { onChange({ ...preferences, [category]: [...current, id], }) } } return ( 스타일 색상 분위기 소재 밝기

{styleOptions.map((style) => { const isSelected = preferences.styles.includes(style.id) return ( toggleItem('styles', style.id)} >

{isSelected && (

)}

{style.name}

{style.description}

) })}

{colorOptions.map((color) => { const isSelected = preferences.colors.includes(color.id) return ( toggleItem('colors', color.id)} >

{isSelected && (

)}

{color.name}

) })}

{moodOptions.map((mood) => { const isSelected = preferences.mood.includes(mood.id) return ( toggleItem('mood', mood.id)} >

{mood.emoji}

{mood.name}

{isSelected && ( )}

) })}

{materialOptions.map((material) => { const isSelected = preferences.materials.includes(material.id) return ( toggleItem('materials', material.id)} >

{material.emoji}

{material.name}

{isSelected && ( )}

) })}

밝기 조절

공간의 전체적인 밝기를 조절하세요

onChange({ ...preferences, brightness: value[0] }) } min={0} max={100} step={10} className="w-full" />

어두운 💡 {preferences.brightness}% 밝은 ☀️

어두운 분위기

중간 밝기

밝은 분위기

) } [V0_FILE]jpg:file="public/isometric-3d-room-with-ikea-furniture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/isometric-3d-room-with-ikea-furniture-2JXtM3DLOxsCiL6tcfLvjMNeG2KJB9.jpg" isMerged="true" [V0_FILE]jpg:file="public/scandinavian-minimalist-room-white-wood.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scandinavian-minimalist-room-white-wood-pT7ZoIesvy7wUJF75D7HveOjZKPL0X.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-minimalist-room-sleek-furniture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-minimalist-room-sleek-furniture-Z3bThqrmmLx4ILtAJxtxnxUgkqBbUD.jpg" isMerged="true" [V0_FILE]jpg:file="public/cozy-warm-room-soft-textures.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cozy-warm-room-soft-textures-MKGLcGdiLvcLsKev6JKTTas7mEFvjg.jpg" isMerged="true" [V0_FILE]jpg:file="public/industrial-loft-exposed-brick-metal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/industrial-loft-exposed-brick-metal-Ju0EXbtiS6Duh0rr1M8t5dJ0BFd4Z4.jpg" isMerged="true" [V0_FILE]jpg:file="public/minimalist-room-empty-space-clean.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-room-empty-space-clean-e2Gs1u8M3sbfOJpwQFjX5L8ujrd7Aq.jpg" isMerged="true" [V0_FILE]jpg:file="public/bohemian-colorful-patterns-plants.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bohemian-colorful-patterns-plants-Ow9WYTm1P5WtrR8o0eezCORC2LVrPT.jpg" isMerged="true" [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": "^0.9.9", "zod": "3.25.76" }, "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]jpg:file="public/scandinavian-minimalist-living-room-white-wood-cle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scandinavian-minimalist-living-room-white-wood-cle-8SSTqrHiicAFTjwcb5dWhWSiYirxIS.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-sleek-living-room-contemporary-furniture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-sleek-living-room-contemporary-furniture-feSxRHqbXlLe2bWBDUESdYp76wXDKp.jpg" isMerged="true" [V0_FILE]jpg:file="public/cozy-warm-living-room-soft-textiles-comfortable.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cozy-warm-living-room-soft-textiles-comfortable-it3YmEmbWrpkfg0xZm7maVCHCgxXiX.jpg" isMerged="true" [V0_FILE]jpg:file="public/industrial-loft-exposed-brick-metal-vintage.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/industrial-loft-exposed-brick-metal-vintage-x4A7ZW0i5qc7PCWPWWcAUo4B72cYKO.jpg" isMerged="true" [V0_FILE]jpg:file="public/minimalist-clean-empty-space-simple-room.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-clean-empty-space-simple-room-tZk9Fr8Q938eThSXt3ciJzo67zyz2l.jpg" isMerged="true" [V0_FILE]jpg:file="public/bohemian-colorful-patterns-plants-eclectic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bohemian-colorful-patterns-plants-eclectic-BIp3gxlyihNAzQOtYMMQT0eu2SxgwJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/japandi-zen-minimalist-natural-wood.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/japandi-zen-minimalist-natural-wood-eeJLzn4QzFyOMat6HWlOiv9rvzsw00.jpg" isMerged="true" [V0_FILE]jpg:file="public/mid-century-modern-retro-furniture-60s.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mid-century-modern-retro-furniture-60s-vx4sK3zKErYJh7reSK0UJF7MpOCVGf.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-kallax-white-shelf-unit-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-kallax-white-shelf-unit-product-7aUamFBPVM8E4n7B2VSzvKbMgCIdpf.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-poang-armchair-birch-veneer-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-poang-armchair-birch-veneer-product-G3NmU9UcwOM90Wm08OTXHRcEZA5TgD.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-lack-coffee-table-white-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-lack-coffee-table-white-product-lku8i8UtEpTY3UIbzXTMLWgFdY5YKU.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-hemnes-bed-frame-white-stain-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-hemnes-bed-frame-white-stain-product-0kMyyomr3Ey9jkPn114W79kFMUoxG2.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-billy-bookcase-white-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-billy-bookcase-white-product-C3wchsbA4mI0aKMETDls3DJfIE1aTI.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-ektorp-three-seat-sofa-beige-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-ektorp-three-seat-sofa-beige-product-mw1lXoCji9Sd62wsCQBBOhuuxUqDWU.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-lerberg-shelf-unit-gray-metal-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-lerberg-shelf-unit-gray-metal-product-qXersQ381vPSML32VFZ0hKYlmf32Se.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/designer/page.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' import { ArrowLeft, ArrowRight } from 'lucide-react' import Link from 'next/link' import FloorPlanInput from '@/components/floor-plan-input' import StyleSelector from '@/components/style-selector' import RoomVisualizer from '@/components/room-visualizer' interface StylePreferences { styles: string[] colors: string[] mood: string[] materials: string[] brightness: number } export default function DesignerPage() { const [step, setStep] = useState(1) const [floorPlan, setFloorPlan] = useState(null) const [preferences, setPreferences] = useState({ styles: [], colors: [], mood: [], materials: [], brightness: 50, }) const progress = (step / 3) * 100 const hasPreferences = preferences.styles.length > 0 || preferences.colors.length > 0 || preferences.mood.length > 0 || preferences.materials.length > 0 return (

{/* Header */}

나만의 방 디자인하기

{/* Progress Bar */}

= 1 ? 'text-primary' : 'text-muted-foreground'}> 평면도 입력 = 2 ? 'text-primary' : 'text-muted-foreground'}> 취향 선택 = 3 ? 'text-primary' : 'text-muted-foreground'}> 룸 완성

{/* Main Content */}

{step === 1 && (

방의 평면도를 입력해주세요

방의 크기와 형태를 그리거나 이미지를 업로드하세요

{ setFloorPlan(data) setStep(2) }} /> )} {step === 2 && (

인테리어 취향을 선택하세요

스타일, 색상, 분위기, 소재를 자유롭게 선택하여 나만의 공간을 만들어보세요

{hasPreferences && (

선택된 취향

{preferences.styles.length > 0 && (

스타일: {preferences.styles.length}개

)} {preferences.colors.length > 0 && (

색상: {preferences.colors.length}개

)} {preferences.mood.length > 0 && (

분위기: {preferences.mood.length}개

)} {preferences.materials.length > 0 && (

소재: {preferences.materials.length}개

)}

)} )} {step === 3 && ( setStep(2)} /> )}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); /* Updated yellow accent to brighter, more vibrant shade */ :root { --background: oklch(0.98 0.01 240); --foreground: oklch(0.2 0.02 240); --card: oklch(1 0 0); --card-foreground: oklch(0.2 0.02 240); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2 0.02 240); --primary: oklch(0.5 0.2 240); --primary-foreground: oklch(0.98 0.01 240); --secondary: oklch(0.85 0.18 90); --secondary-foreground: oklch(0.15 0.02 90); --muted: oklch(0.94 0.01 240); --muted-foreground: oklch(0.5 0.02 240); --accent: oklch(0.85 0.18 90); --accent-foreground: oklch(0.15 0.02 90); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.88 0.01 240); --input: oklch(0.88 0.01 240); --ring: oklch(0.5 0.2 240); --chart-1: oklch(0.5 0.2 240); --chart-2: oklch(0.85 0.18 90); --chart-3: oklch(0.55 0.15 180); --chart-4: oklch(0.45 0.15 250); --chart-5: oklch(0.70 0.16 60); --radius: 0.75rem; --sidebar: oklch(0.98 0.01 240); --sidebar-foreground: oklch(0.2 0.02 240); --sidebar-primary: oklch(0.5 0.2 240); --sidebar-primary-foreground: oklch(0.98 0.01 240); --sidebar-accent: oklch(0.95 0.01 240); --sidebar-accent-foreground: oklch(0.2 0.02 240); --sidebar-border: oklch(0.88 0.01 240); --sidebar-ring: oklch(0.5 0.2 240); } .dark { --background: oklch(0.15 0.02 240); --foreground: oklch(0.95 0.01 240); --card: oklch(0.18 0.02 240); --card-foreground: oklch(0.95 0.01 240); --popover: oklch(0.18 0.02 240); --popover-foreground: oklch(0.95 0.01 240); --primary: oklch(0.5 0.2 240); --primary-foreground: oklch(0.98 0.01 240); --secondary: oklch(0.85 0.18 90); --secondary-foreground: oklch(0.15 0.02 90); --muted: oklch(0.25 0.02 240); --muted-foreground: oklch(0.65 0.02 240); --accent: oklch(0.85 0.18 90); --accent-foreground: oklch(0.15 0.02 90); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.25 0.02 240); --input: oklch(0.25 0.02 240); --ring: oklch(0.5 0.2 240); --chart-1: oklch(0.5 0.2 240); --chart-2: oklch(0.85 0.18 90); --chart-3: oklch(0.55 0.15 180); --chart-4: oklch(0.45 0.15 250); --chart-5: oklch(0.70 0.16 60); --sidebar: oklch(0.18 0.02 240); --sidebar-foreground: oklch(0.95 0.01 240); --sidebar-primary: oklch(0.5 0.2 240); --sidebar-primary-foreground: oklch(0.98 0.01 240); --sidebar-accent: oklch(0.25 0.02 240); --sidebar-accent-foreground: oklch(0.95 0.01 240); --sidebar-border: oklch(0.25 0.02 240); --sidebar-ring: oklch(0.5 0.2 240); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]jpg:file="public/realistic-3d-isometric-ikea-showroom.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/realistic-3d-isometric-ikea-showroom-oNgquHchHsDUYjQg0jz6dvdJrmFjfM.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-kallax-white-bookshelf-unit-with-storage-cube.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-kallax-white-bookshelf-unit-with-storage-cube-N6pbewnF5zu2laEfnZtOVbPYAQgWcX.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-poang-beige-armchair-birch-wood-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-poang-beige-armchair-birch-wood-product-photo-pFjRzwsnLXllHj2ZV1Wj2Vr3PozUGp.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-lack-wooden-coffee-table-light-wood-product-p.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-lack-wooden-coffee-table-light-wood-product-p-K40e7u3T7isVgzaAwih3dKsPCjcNU0.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-hemnes-white-wooden-bed-frame-with-mattress-p.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-hemnes-white-wooden-bed-frame-with-mattress-p-0IvYPjFdDAaM3EqiJs2GzBRhBM0tB1.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-billy-white-tall-bookcase-with-books-product-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-billy-white-tall-bookcase-with-books-product--AvGpBaIZIu4WamusnIuWba3Us7BfUx.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-ektorp-blue-3-seat-sofa-with-cushions-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-ektorp-blue-3-seat-sofa-with-cushions-product-vNTuBtdtd7yX20DorvkZRPbqyOatK8.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-lisabo-wooden-dining-table-ash-veneer-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-lisabo-wooden-dining-table-ash-veneer-product-ztYDDeLbcqY9z8xyqQ57upKHyqrNsI.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-malm-wooden-bedside-table-nightstand-product-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-malm-wooden-bedside-table-nightstand-product--XJqXd1b7cMnd2yaSU88guIB5iCpXBE.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-fejka-artificial-green-plant-in-pot-product-p.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-fejka-artificial-green-plant-in-pot-product-p-f7ymYhaicBUbMmX8c7VV7QFUqbwwUN.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-ranarp-cream-floor-lamp-reading-light-product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-ranarp-cream-floor-lamp-reading-light-product-qYvB1XwLaOMwIgBVYYSluCuTvKUtf1.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-beige-woven-area-rug-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-beige-woven-area-rug-product-photo-RiCFJhr2X6yhvAuaXTdXM7e8Wt7mhh.jpg" isMerged="true" [V0_FILE]jpg:file="public/ikea-ottmar-ottoman-footstool-grey-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ikea-ottmar-ottoman-footstool-grey-product-photo-cLCnQhfcZ5PtZcFYaEGKVtFDb7Kvb5.jpg" isMerged="true" [V0_FILE]jpg:file="public/realistic-isometric-3d-room-ikea-furniture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/realistic-isometric-3d-room-ikea-furniture-g0Bi54brwPQszzv4CsyOuJ305NXabV.jpg" isMerged="true" [V0_FILE]jpg:file="public/bright-high-quality-photorealistic-3d-isometric-ro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bright-high-quality-photorealistic-3d-isometric-ro-QbBLXHN5aLnvrW62QVzsYlmEuREPPu.jpg" isMerged="true" [V0_FILE]jpg:file="public/high-quality-3d-ikea-room-with-visible-furniture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/high-quality-3d-ikea-room-with-visible-furniture-5oV3i7FPsRahTi4kbjMGAst6u7i5jl.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import Link from 'next/link' export default function HomePage() { return (

{/* Header */}

IKEA 룸 디자이너

{/* Hero Section */}

당신만의 공간을
이케아와 함께 디자인하세요

평면도를 업로드하고 취향을 선택하면 AI가 이케아 가구로 꾸민 당신만의 방을 3D로 만들어드립니다

{/* Features */}

간편한 3단계로 완성하는 나만의 방

} title="평면도 입력" description="방의 크기와 형태를 간단히 입력하거나 이미지를 업로드하세요" step="STEP 1" /> } title="취향 선택" description="좋아하는 스타일, 색상, 분위기를 선택하면 AI가 맞춤 제안을 드립니다" step="STEP 2" /> } title="공유하기" description="완성된 3D 룸을 SNS에 바로 공유하고 친구들과 나누세요" step="STEP 3" />

{/* CTA Section */}

이케아와 함께
나만의 스타일을 찾아보세요

수천 가지 이케아 제품으로 무한한 조합을 만들어보세요

{/* Footer */}

) } function FeatureCard({ icon, title, description, step, }: { icon: React.ReactNode title: string description: string step: string }) { return (

{icon}

{step}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/room-visualizer.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { ArrowLeft, Share2, Download, ShoppingCart, ExternalLink, Move, RotateCw } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" interface RoomVisualizerProps { floorPlan: any preferences: any onBack: () => void } const defaultFurniture = [ { id: 1, name: "KALLAX 선반 유닛", category: "수납", price: "₩89,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/kallax-shelf-unit-white-00275848/", imageUrl: "/ikea-kallax-white-bookshelf-unit-with-storage-cube.jpg", defaultX: 75, defaultY: 38, }, { id: 2, name: "POÄNG 안락의자", category: "의자", price: "₩99,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/poaeng-armchair-birch-veneer-knisa-light-beige-s49196472/", imageUrl: "/ikea-poang-beige-armchair-birch-wood-product-photo.jpg", defaultX: 35, defaultY: 70, }, { id: 3, name: "LACK 커피 테이블", category: "테이블", price: "₩19,900", purchaseUrl: "https://www.ikea.com/kr/ko/p/lack-coffee-table-white-20011413/", imageUrl: "/ikea-lack-wooden-coffee-table-light-wood-product-p.jpg", defaultX: 50, defaultY: 62, }, { id: 4, name: "HEMNES 침대 프레임", category: "침대", price: "₩349,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/hemnes-bed-frame-white-stain-luroey-s09128620/", imageUrl: "/ikea-hemnes-white-wooden-bed-frame-with-mattress-p.jpg", defaultX: 22, defaultY: 50, }, { id: 5, name: "BILLY 책장", category: "수납", price: "₩59,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/billy-bookcase-white-00263850/", imageUrl: "/ikea-billy-white-tall-bookcase-with-books-product-.jpg", defaultX: 25, defaultY: 35, }, { id: 6, name: "EKTORP 3인용 소파", category: "소파", price: "₩699,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/ektorp-3-seat-sofa-lofallet-beige-s79415453/", imageUrl: "/ikea-ektorp-blue-3-seat-sofa-with-cushions-product.jpg", defaultX: 58, defaultY: 58, }, { id: 7, name: "LISABO 테이블", category: "테이블", price: "₩199,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/lisabo-table-ash-veneer-70294339/", imageUrl: "/ikea-lisabo-wooden-dining-table-ash-veneer-product.jpg", defaultX: 45, defaultY: 48, }, { id: 8, name: "MALM 서랍장", category: "수납", price: "₩129,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/malm-chest-of-6-drawers-white-00360468/", imageUrl: "/ikea-malm-wooden-bedside-table-nightstand-product-.jpg", defaultX: 18, defaultY: 45, }, { id: 9, name: "FEJKA 인조 식물", category: "장식", price: "₩12,900", purchaseUrl: "https://www.ikea.com/kr/ko/p/fejka-artificial-potted-plant-indoor-outdoor-monstera-70461537/", imageUrl: "/ikea-fejka-artificial-green-plant-in-pot-product-p.jpg", defaultX: 78, defaultY: 52, }, { id: 10, name: "RANARP 플로어 스탠드", category: "조명", price: "₩89,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/ranarp-floor-reading-lamp-off-white-00275091/", imageUrl: "/ikea-ranarp-cream-floor-lamp-reading-light-product.jpg", defaultX: 15, defaultY: 48, }, { id: 11, name: "Stockholm 러그", category: "장식", price: "₩149,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/stockholm-rug-flatwoven-net-pattern-beige-00315505/", imageUrl: "/ikea-beige-woven-area-rug-product-photo.jpg", defaultX: 48, defaultY: 68, }, { id: 12, name: "OTTMAR 의자", category: "의자", price: "₩129,000", purchaseUrl: "https://www.ikea.com/kr/ko/p/ottmar-chair-white-chrome-plated-00450588/", imageUrl: "/ikea-ottmar-ottoman-footstool-grey-product-photo.jpg", defaultX: 55, defaultY: 70, }, ] export default function RoomVisualizer({ floorPlan, preferences, onBack }: RoomVisualizerProps) { const [furniturePositions, setFurniturePositions] = useState( defaultFurniture.map((f) => ({ id: f.id, x: f.defaultX, y: f.defaultY })), ) const [draggingId, setDraggingId] = useState(null) const [selectedProduct, setSelectedProduct] = useState<(typeof defaultFurniture)[0] | null>(null) const [hoveredProduct, setHoveredProduct] = useState(null) const [isEditMode, setIsEditMode] = useState(true) const containerRef = useRef(null) useEffect(() => { if (draggingId === null) return const handleGlobalMove = (e: MouseEvent | TouchEvent) => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const clientX = "touches" in e ? e.touches[0].clientX : e.clientX const clientY = "touches" in e ? e.touches[0].clientY : e.clientY const x = ((clientX - rect.left) / rect.width) * 100 const y = ((clientY - rect.top) / rect.height) * 100 const clampedX = Math.max(5, Math.min(95, x)) const clampedY = Math.max(5, Math.min(95, y)) setFurniturePositions((prev) => prev.map((pos) => (pos.id === draggingId ? { ...pos, x: clampedX, y: clampedY } : pos)), ) } const handleGlobalEnd = () => { setDraggingId(null) } document.addEventListener("mousemove", handleGlobalMove) document.addEventListener("mouseup", handleGlobalEnd) document.addEventListener("touchmove", handleGlobalMove) document.addEventListener("touchend", handleGlobalEnd) return () => { document.removeEventListener("mousemove", handleGlobalMove) document.removeEventListener("mouseup", handleGlobalEnd) document.removeEventListener("touchmove", handleGlobalMove) document.removeEventListener("touchend", handleGlobalEnd) } }, [draggingId]) const handleDragStart = (id: number, e: React.MouseEvent | React.TouchEvent) => { e.preventDefault() e.stopPropagation() setDraggingId(id) setHoveredProduct(null) setSelectedProduct(null) } const handleReset = () => { setFurniturePositions(defaultFurniture.map((f) => ({ id: f.id, x: f.defaultX, y: f.defaultY }))) } const handleShare = async (platform: string) => { const styleDesc = preferences.styles?.join(", ") || "맞춤형" const message = `이케아 AR 룸 디자이너로 만든 나만의 방! 스타일: ${styleDesc}` if (platform === "twitter") { window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}`, "_blank") } else if (platform === "facebook") { window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`, "_blank") } else if (platform === "kakao") { alert("카카오톡 공유 기능이 곧 추가됩니다!") } } const getRoomImageUrl = () => { return "/high-quality-3d-ikea-room-with-visible-furniture.jpg" } const getPosition = (id: number) => { return furniturePositions.find((pos) => pos.id === id) || { x: 50, y: 50 } } return (

당신만의 이케아 3D 쇼룸

가구를 드래그해서 원하는 위치로 자유롭게 배치하세요

{ e.currentTarget.src = "/bright-high-quality-photorealistic-3d-isometric-ro.jpg" }} /> {defaultFurniture.map((item) => { const position = getPosition(item.id) const isDragging = draggingId === item.id return (

handleDragStart(item.id, e)} onTouchStart={(e) => handleDragStart(item.id, e)} onClick={(e) => { if (!isDragging) { e.stopPropagation() setSelectedProduct(item) } }} onMouseEnter={() => !isDragging && setHoveredProduct(item.id)} onMouseLeave={() => setHoveredProduct(null)} >

{!isDragging && (

)}

{isDragging && }

{hoveredProduct === item.id && !isDragging && (

{item.name}

{item.category}

{item.price}

)} {isDragging && (

드래그 중... 🎯

)}

) })}

🎮 가구를 드래그해서 배치하고, 클릭하면 제품 정보를 확인할 수 있어요

배치된 이케아 가구 ({defaultFurniture.length}개)

{defaultFurniture.map((item) => ( ))}

총 예상 금액

₩ {defaultFurniture .reduce((sum, item) => { const price = Number.parseInt(item.price.replace(/[₩,]/g, "")) return sum + price }, 0) .toLocaleString()}

제품 개수

{defaultFurniture.length}개

* 실제 가격은 이케아 매장 또는 웹사이트에서 확인하세요

) }

{style.name}

방의 평면도를 입력해주세요

인테리어 취향을 선택하세요

선택된 취향

당신만의 공간을 이케아와 함께 디자인하세요

간편한 3단계로 완성하는 나만의 방

이케아와 함께 나만의 스타일을 찾아보세요

{title}

당신만의 이케아 3D 쇼룸

배치된 이케아 가구 ({defaultFurniture.length}개)

{item.name}

당신만의 공간을
이케아와 함께 디자인하세요

이케아와 함께
나만의 스타일을 찾아보세요