import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Search, MapPin, ArrowRight, Home, Building2, DoorOpen, Store, Phone, X, Check } from 'lucide-react'; type PropertyType = '전체' | '아파트' | '오피스텔' | '원룸' | '상가'; type Region = '전체' | '서울' | '경기' | '인천' | '부산'; interface Property { id: number; name: string; type: Exclude; region: Exclude; area: string; price: string; size: string; floor: string; direction: string; year: string; color: string; address: string; } const properties: Property[] = [ { id: 1, name: '강남 래미안 아파트', type: '아파트', region: '서울', area: '강남구', price: '매매 12억', size: '84평', floor: '12층/21층', direction: '남향', year: '2020', color: 'bg-orange-500', address: '서울 강남구 테헤란로 123' }, { id: 2, name: '홍대 신축 오피스텔', type: '오피스텔', region: '서울', area: '마포구', price: '전세 3억', size: '32평', floor: '8층/15층', direction: '동향', year: '2023', color: 'bg-slate-700', address: '서울 마포구 와우산로 45' }, { id: 3, name: '성수동 감성 원룸', type: '원룸', region: '서울', area: '성동구', price: '월세 500/50', size: '12평', floor: '3층/5층', direction: '남서향', year: '2019', color: 'bg-amber-600', address: '서울 성동구 연무장길 88' }, { id: 4, name: '잠실 리센츠 아파트', type: '아파트', region: '서울', area: '송파구', price: '매매 15억', size: '96평', floor: '18층/30층', direction: '남향', year: '2018', color: 'bg-red-700', address: '서울 송파구 올림픽로 300' }, { id: 5, name: '분당 정자동 아파트', type: '아파트', region: '경기', area: '성남시', price: '전세 4억', size: '74평', floor: '10층/17층', direction: '동향', year: '2015', color: 'bg-emerald-700', address: '경기 성남시 분당구 정자일로 56' }, { id: 6, name: '일산 마두동 오피스텔', type: '오피스텔', region: '경기', area: '고양시', price: '월세 300/45', size: '28평', floor: '5층/12층', direction: '서향', year: '2021', color: 'bg-teal-700', address: '경기 고양시 일산동구 마두동 777' }, { id: 7, name: '송도 국제도시 원룸', type: '원룸', region: '인천', area: '연수구', price: '월세 400/40', size: '15평', floor: '11층/20층', direction: '남향', year: '2022', color: 'bg-cyan-700', address: '인천 연수구 송도동 123' }, { id: 8, name: '부산 해운대 상가', type: '상가', region: '부산', area: '해운대구', price: '매매 8억', size: '45평', floor: '1층/5층', direction: '남동향', year: '2017', color: 'bg-sky-700', address: '부산 해운대구 해운대해변로 333' }, { id: 9, name: '판교 테크노밸리 오피스텔', type: '오피스텔', region: '경기', area: '성남시', price: '전세 2.5억', size: '25평', floor: '7층/14층', direction: '남향', year: '2020', color: 'bg-indigo-700', address: '경기 성남시 분당구 판교역로 235' }, { id: 10, name: '여의도 한강 아파트', type: '아파트', region: '서울', area: '영등포구', price: '매매 18억', size: '110평', floor: '22층/35층', direction: '남향', year: '2016', color: 'bg-rose-700', address: '서울 영등포구 여의동로 100' }, { id: 11, name: '강서구 화곡동 원룸', type: '원룸', region: '서울', area: '강서구', price: '월세 600/55', size: '14평', floor: '2층/4층', direction: '동향', year: '2018', color: 'bg-lime-700', address: '서울 강서구 화곡로 245' }, { id: 12, name: '수원 인계동 상가', type: '상가', region: '경기', area: '수원시', price: '전세 1.5억', size: '30평', floor: '지상1층', direction: '남향', year: '2014', color: 'bg-orange-700', address: '경기 수원시 팔달구 인계로 456' } ]; const popularAreas = [ { name: '강남구', region: '서울' as const, color: 'bg-orange-500' }, { name: '마포구', region: '서울' as const, color: 'bg-slate-700' }, { name: '성동구', region: '서울' as const, color: 'bg-amber-600' }, { name: '송파구', region: '서울' as const, color: 'bg-red-700' }, { name: '해운대구', region: '부산' as const, color: 'bg-sky-700' } ]; const filterChips: PropertyType[] = ['전체', '아파트', '오피스텔', '원룸', '상가']; const App = () => { const [activeType, setActiveType] = useState('전체'); const [selectedRegion, setSelectedRegion] = useState('전체'); const [selectedArea, setSelectedArea] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [selectedProperty, setSelectedProperty] = useState(null); const [showForm, setShowForm] = useState(false); const [formSubmitted, setFormSubmitted] = useState(false); const [formData, setFormData] = useState({ name: '', phone: '', message: '' }); const filteredProperties = properties.filter(p => { const typeMatch = activeType === '전체' || p.type === activeType; const regionMatch = selectedRegion === '전체' || p.region === selectedRegion; const areaMatch = !selectedArea || p.area === selectedArea; const searchMatch = !searchQuery || p.name.includes(searchQuery) || p.address.includes(searchQuery); return typeMatch && regionMatch && areaMatch && searchMatch; }); const handleSearch = () => { setSelectedArea(null); }; const handleAreaClick = (area: string) => { setSelectedArea(area); const areaProp = properties.find(p => p.area === area); if (areaProp) { setSelectedRegion(areaProp.region); } }; const handleFormSubmit = (e: React.FormEvent) => { e.preventDefault(); setFormSubmitted(true); }; const resetForm = () => { setFormData({ name: '', phone: '', message: '' }); setFormSubmitted(false); setShowForm(false); }; return (

당신에게 꼭 맞는
집을 찾아드립니다

전국의 검증된 매물을 한곳에서. 믿을 수 있는 중개, 정확한 정보.

setSearchQuery(e.target.value)} className="flex-1 px-4 py-3 bg-gray-50 border-2 border-gray-200 font-medium focus:outline-none focus:border-slate-900" />

{filterChips.map((chip) => ( ))} {selectedArea && ( )}

{filteredProperties.map((prop) => ( { setSelectedProperty(prop); setShowForm(false); setFormSubmitted(false); }} className="text-left bg-white border-2 border-slate-900 hover:shadow-[4px_4px_0px_0px_rgba(15,23,42,1)] transition-shadow" >

{prop.type}

{prop.name}

{prop.area}

{prop.price}

{prop.size} · {prop.address}

))}

{filteredProperties.length === 0 && (

매물이 없습니다

다른 조건으로 검색해보세요

)}

지금 바로 상담받아보세요

전문 중개사가 24시간 내로 연락드립니다

{selectedProperty && ( setSelectedProperty(null)} > e.stopPropagation()} className="bg-white border-2 border-slate-900 w-full max-w-2xl max-h-[90vh] overflow-y-auto" >

{selectedProperty.name}

{selectedProperty.address}

{selectedProperty.type}

{selectedProperty.price}

평수

{selectedProperty.size}

층수

{selectedProperty.floor}

방향

{selectedProperty.direction}

준공년도

{selectedProperty.year}년

{!showForm ? ( ) : formSubmitted ? (

상담 신청이 완료되었습니다

전문 중개사가 빠르게 연락드리겠습니다

) : (

이름 setFormData({ ...formData, name: e.target.value })} className="w-full px-3 py-2 border-2 border-gray-300 focus:outline-none focus:border-slate-900" placeholder="홍길동" />

연락처 setFormData({ ...formData, phone: e.target.value })} className="w-full px-3 py-2 border-2 border-gray-300 focus:outline-none focus:border-slate-900" placeholder="010-0000-0000" />

문의 내용

당신에게 꼭 맞는 집을 찾아드립니다

{prop.name}

인기 지역

지금 바로 상담받아보세요

{selectedProperty.name}

당신에게 꼭 맞는
집을 찾아드립니다

한터부동산