diff --git a/src/apis/listing.js b/src/apis/listing.js
index 7d44f78..fe906ad 100644
--- a/src/apis/listing.js
+++ b/src/apis/listing.js
@@ -44,7 +44,6 @@ export async function fetchListingById(id) {
   }
 }
 
-// apis/listing.js 파일의 createListing 함수
 export async function createListing(listingData, images) {
   try {
     const formData = new FormData()
@@ -88,10 +87,13 @@ export async function createListing(listingData, images) {
   }
 }
 
-export async function updateListing(id, updatedData) {
+// 수정된 updateListing 함수: createListing과 유사한 방식으로 FormData를 사용
+export async function updateListing(id, formData) {
   try {
-    const response = await api.put(`${API_BASE_URL}/${id}`, updatedData, {
-      headers: { 'Content-Type': 'application/json' },
+    const response = await api.put(`${API_BASE_URL}/${id}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     })
     return response.data.data
   } catch (error) {
diff --git a/src/assets/icons/PetA.vue b/src/assets/icons/PetA.vue
new file mode 100644
index 0000000..8066c9a
--- /dev/null
+++ b/src/assets/icons/PetA.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg
+    :width="props.width"
+    :height="props.height"
+    viewBox="0 0  24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      d="M12.3281 24.1719C14.5156 24.1406 16.5156 23.6094 18.3281 22.5781C20.1406 21.5156 21.6094 20.0469 22.7344 18.1719C23.7969 16.2656 24.3281 14.2656 24.3281 12.1719C24.3281 10.0781 23.7969 8.07812 22.7344 6.17188C21.6094 4.29688 20.1406 2.82812 18.3281 1.76562C16.5156 0.734375 14.5156 0.203125 12.3281 0.171875C10.1406 0.203125 8.14062 0.734375 6.32812 1.76562C4.51562 2.82812 3.04688 4.29688 1.92188 6.17188C0.859375 8.07812 0.328125 10.0781 0.328125 12.1719C0.328125 14.2656 0.859375 16.2656 1.92188 18.1719C3.04688 20.0469 4.51562 21.5156 6.32812 22.5781C8.14062 23.6094 10.1406 24.1406 12.3281 24.1719ZM17.625 9.96875L11.625 15.9688C11.0938 16.4062 10.5625 16.4062 10.0312 15.9688L7.03125 12.9688C6.59375 12.4375 6.59375 11.9062 7.03125 11.375C7.5625 10.9375 8.09375 10.9375 8.625 11.375L10.8281 13.5781L16.0312 8.375C16.5625 7.9375 17.0938 7.9375 17.625 8.375C18.0625 8.90625 18.0625 9.4375 17.625 9.96875Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  width: {
+    type: [String, Number],
+    default: '24',
+  },
+  height: {
+    type: [String, Number],
+    default: '24',
+  },
+})
+</script>
diff --git a/src/components/homes/homecreate/Step1BasicInfo.vue b/src/components/homes/homecreate/Step1BasicInfo.vue
index d18919c..a445a2e 100644
--- a/src/components/homes/homecreate/Step1BasicInfo.vue
+++ b/src/components/homes/homecreate/Step1BasicInfo.vue
@@ -1,69 +1,3 @@
-<script setup>
-import BaseButton from '@/components/common/BaseButton.vue'
-import BaseModal from '@/components/common/BaseModal.vue'
-import SearchAddress from '@/components/common/SearchAddress.vue'
-import BaseRadio from '@/components/common/BaseRadio.vue'
-import { useModalStore } from '@/stores/modal'
-
-const props = defineProps({
-  form: {
-    type: Object,
-    required: true,
-    validator(value) {
-      return (
-        value &&
-        typeof value === 'object' &&
-        'residenceType' in value &&
-        'leaseType' in value &&
-        'addr1' in value &&
-        'addr2' in value
-      )
-    },
-  },
-})
-
-const emit = defineEmits(['update:form'])
-const modalStore = useModalStore()
-
-const updateForm = (field, value) => {
-  emit('update:form', {
-    ...props.form,
-    [field]: value,
-  })
-}
-
-const onAddressSelect = (selectedAddress) => {
-  // ✨ 추가된 부분: 디버깅을 위해 선택된 주소값을 콘솔에 출력
-  console.log('✅ onAddressSelect 함수 호출됨. 선택된 주소:', selectedAddress)
-
-  if (selectedAddress) {
-    updateForm('addr1', selectedAddress)
-  }
-
-  // ✨ 추가된 부분: 업데이트된 form.addr1 값 확인
-  console.log('업데이트 후 form 객체:', props.form)
-
-  modalStore.close()
-}
-
-// 매물 종류
-const residenceTypeOptions = [
-  { label: '오픈형 원룸', value: 'OPEN_ONE_ROOM' },
-  { label: '분리형 원룸', value: 'SEPARATED_ONE_ROOM' },
-  { label: '투룸', value: 'TWO_ROOM' },
-  { label: '오피스텔', value: 'OFFICETEL' },
-  { label: '아파트', value: 'APARTMENT' },
-  { label: '단독주택', value: 'HOUSE' },
-  { label: '빌라', value: 'VILLA' },
-]
-
-// 거래 유형 (한글 라벨 + 영어 enum 값)
-const leaseTypeOptions = [
-  { label: '월세', value: 'WOLSE' },
-  { label: '전세', value: 'JEONSE' },
-]
-</script>
-
 <template>
   <div class="space-y-6">
     <h2 class="text-lg font-semibold">기본 정보</h2>
@@ -72,7 +6,7 @@ const leaseTypeOptions = [
       <label class="block text-sm font-medium text-gray-700 mb-1">
         매물 종류 <span class="text-red-500">*</span>
       </label>
-      <div class="grid grid-cols-3 gap-2">
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
         <button
           v-for="option in residenceTypeOptions"
           :key="option.value"
@@ -94,7 +28,7 @@ const leaseTypeOptions = [
       <label class="block text-sm font-medium text-gray-700 mb-1">
         거래 유형 <span class="text-red-500">*</span>
       </label>
-      <div class="flex gap-6">
+      <div class="flex flex-col md:flex-row gap-4">
         <BaseRadio
           v-for="option in leaseTypeOptions"
           :key="option.value"
@@ -120,7 +54,7 @@ const leaseTypeOptions = [
           disabled
         />
         <BaseButton
-          class="w-36 flex justify-center items-center"
+          class="w-36 flex justify-center items-center shrink-0"
           variant="primary"
           type="button"
           @click="modalStore.open()"
@@ -146,3 +80,69 @@ const leaseTypeOptions = [
     </BaseModal>
   </div>
 </template>
+
+<script setup>
+import BaseButton from '@/components/common/BaseButton.vue'
+import BaseModal from '@/components/common/BaseModal.vue'
+import SearchAddress from '@/components/common/SearchAddress.vue'
+import BaseRadio from '@/components/common/BaseRadio.vue'
+import { useModalStore } from '@/stores/modal'
+
+const props = defineProps({
+  form: {
+    type: Object,
+    required: true,
+    validator(value) {
+      return (
+        value &&
+        typeof value === 'object' &&
+        'residenceType' in value &&
+        'leaseType' in value &&
+        'addr1' in value &&
+        'addr2' in value
+      )
+    },
+  },
+})
+
+const emit = defineEmits(['update:form'])
+const modalStore = useModalStore()
+
+const updateForm = (field, value) => {
+  emit('update:form', {
+    ...props.form,
+    [field]: value,
+  })
+}
+
+const onAddressSelect = (selectedAddress) => {
+  // ✨ 추가된 부분: 디버깅을 위해 선택된 주소값을 콘솔에 출력
+  console.log('✅ onAddressSelect 함수 호출됨. 선택된 주소:', selectedAddress)
+
+  if (selectedAddress) {
+    updateForm('addr1', selectedAddress)
+  }
+
+  // ✨ 추가된 부분: 업데이트된 form.addr1 값 확인
+  console.log('업데이트 후 form 객체:', props.form)
+
+  modalStore.close()
+}
+
+// 매물 종류
+const residenceTypeOptions = [
+  { label: '오픈형 원룸', value: 'OPEN_ONE_ROOM' },
+  { label: '분리형 원룸', value: 'SEPARATED_ONE_ROOM' },
+  { label: '투룸', value: 'TWO_ROOM' },
+  { label: '오피스텔', value: 'OFFICETEL' },
+  { label: '아파트', value: 'APARTMENT' },
+  { label: '단독주택', value: 'HOUSE' },
+  { label: '빌라', value: 'VILLA' },
+]
+
+// 거래 유형 (한글 라벨 + 영어 enum 값)
+const leaseTypeOptions = [
+  { label: '월세', value: 'WOLSE' },
+  { label: '전세', value: 'JEONSE' },
+]
+</script>
diff --git a/src/components/homes/homecreate/Step2PriceInfo.vue b/src/components/homes/homecreate/Step2PriceInfo.vue
index cd9bf52..a0d4f64 100644
--- a/src/components/homes/homecreate/Step2PriceInfo.vue
+++ b/src/components/homes/homecreate/Step2PriceInfo.vue
@@ -42,7 +42,7 @@
       </div>
       <div>
         <h4 class="font-semibold mt-4 mb-2">관리비 포함 항목</h4>
-        <div class="grid grid-cols-2 gap-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <BaseCheckBox
             v-for="item in maintenanceItems"
             :key="item.maintenanceId"
@@ -104,13 +104,13 @@
             placeholder="0"
           />
           <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
-            >만원</span
+            >원</span
           >
         </div>
       </div>
       <div>
         <h4 class="font-semibold mt-4 mb-2">관리비 포함 항목</h4>
-        <div class="grid grid-cols-2 gap-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <BaseCheckBox
             v-for="item in maintenanceItems"
             :key="item.maintenanceId"
diff --git a/src/components/homes/homecreate/Step3DetailInfo.vue b/src/components/homes/homecreate/Step3DetailInfo.vue
index 7f45158..4bc206f 100644
--- a/src/components/homes/homecreate/Step3DetailInfo.vue
+++ b/src/components/homes/homecreate/Step3DetailInfo.vue
@@ -1,9 +1,9 @@
 <template>
-  <form class="max-w-4xl mx-auto p-6 space-y-6 border rounded-md">
+  <form class="max-w-4xl mx-auto p-4 md:p-6 space-y-6 border rounded-md">
     <h2 class="text-lg font-semibold mb-2">상세 정보</h2>
     <p class="mb-4 text-gray-700">전용면적과 건물 정보를 입력해주세요.</p>
 
-    <div class="grid grid-cols-2 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
         <label class="block mb-1 text-sm font-medium"
           >전용면적 <span class="text-red-500">*</span></label
@@ -18,7 +18,7 @@
             required
             placeholder="0"
           />
-          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">제곱미터</span>
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">㎡</span>
         </div>
       </div>
 
@@ -33,22 +33,25 @@
             @input="handleChange('supplyArea', $event.target.valueAsNumber)"
             placeholder="0"
           />
-          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">제곱미터</span>
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">㎡</span>
         </div>
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
-        <label class="block mb-1 text-sm font-medium">면적 (m2)</label>
-        <input
-          type="number"
-          min="0"
-          class="border rounded p-2 w-full"
-          :value="form.area"
-          @input="handleChange('area', $event.target.valueAsNumber)"
-          placeholder="0"
-        />
+        <label class="block mb-1 text-sm font-medium">면적</label>
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-20 w-full no-spin"
+            :value="form.area"
+            @input="handleChange('area', $event.target.valueAsNumber)"
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">㎡</span>
+        </div>
       </div>
 
       <div>
@@ -63,7 +66,7 @@
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
         <label class="block mb-1 text-sm font-medium"
           >방 개수 <span class="text-red-500">*</span></label
@@ -100,34 +103,40 @@
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div>
         <label class="block mb-1 text-sm font-medium"
           >현재 층 <span class="text-red-500">*</span></label
         >
-        <input
-          type="number"
-          min="0"
-          class="border rounded p-2 w-full"
-          :value="form.homeFloor"
-          @input="handleChange('homeFloor', $event.target.valueAsNumber)"
-          required
-          placeholder="0"
-        />
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-12 w-full no-spin"
+            :value="form.homeFloor"
+            @input="handleChange('homeFloor', $event.target.valueAsNumber)"
+            required
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">층</span>
+        </div>
       </div>
       <div>
         <label class="block mb-1 text-sm font-medium"
           >총 층수 <span class="text-red-500">*</span></label
         >
-        <input
-          type="number"
-          min="0"
-          class="border rounded p-2 w-full"
-          :value="form.buildingTotalFloors"
-          @input="handleChange('buildingTotalFloors', $event.target.valueAsNumber)"
-          required
-          placeholder="0"
-        />
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-12 w-full no-spin"
+            :value="form.buildingTotalFloors"
+            @input="handleChange('buildingTotalFloors', $event.target.valueAsNumber)"
+            required
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">층</span>
+        </div>
       </div>
     </div>
 
@@ -145,7 +154,7 @@
 
     <fieldset>
       <legend class="font-semibold mb-2">방향</legend>
-      <div class="grid grid-cols-4 gap-2 max-w-xl">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-2 max-w-xl">
         <button
           v-for="opt in homeDirectionOptions"
           :key="opt.value"
diff --git a/src/components/homes/homecreate/StepProgressIndicator.vue b/src/components/homes/homecreate/StepProgressIndicator.vue
index 0537276..0b22507 100644
--- a/src/components/homes/homecreate/StepProgressIndicator.vue
+++ b/src/components/homes/homecreate/StepProgressIndicator.vue
@@ -1,11 +1,6 @@
 <template>
-  <div class="w-full flex items-center gap-10 text-sm text-gray-500">
-    <div
-      v-for="(step, index) in steps"
-      :key="index"
-      class="w-fit flex items-center gap-2 basis-0 flex-1"
-    >
-      <!-- 번호 아이콘 -->
+  <div class="w-full flex items-center gap-4 md:gap-10 text-sm text-gray-500">
+    <div v-for="(step, index) in steps" :key="index" class="w-full flex items-center gap-2">
       <div
         class="w-6 h-6 flex items-center justify-center rounded-full border shrink-0"
         :class="{
@@ -16,13 +11,11 @@
         {{ index + 1 }}
       </div>
 
-      <!-- 단계 텍스트 -->
-      <div :class="{ 'w-fit text-black font-medium': index + 1 === currentStep }">
+      <div :class="{ 'text-black font-medium': index + 1 === currentStep }">
         {{ step }}
       </div>
 
-      <!-- 선 -->
-      <div v-if="index < steps.length - 1" class="flex-1 h-px bg-gray-300 ml-2"></div>
+      <div v-if="index < steps.length" class="flex-1 h-px bg-gray-300 ml-2"></div>
     </div>
   </div>
 </template>
diff --git a/src/components/homes/homedetails/ListingBasicInfo.vue b/src/components/homes/homedetails/ListingBasicInfo.vue
index dcfbb2b..922cb52 100644
--- a/src/components/homes/homedetails/ListingBasicInfo.vue
+++ b/src/components/homes/homedetails/ListingBasicInfo.vue
@@ -5,8 +5,13 @@
     <div class="text-2xl font-bold">
       {{
         listing.leaseType === '전세'
-          ? '전세 ' + formatNumber(listing.depositPrice)
-          : '월세 ' + formatNumber(listing.depositPrice) + ' / ' + formatNumber(listing.monthlyRent)
+          ? '전세 ' + formatNumber(listing.depositPrice) + '원'
+          : '월세 ' +
+            formatNumber(listing.depositPrice) +
+            '원' +
+            ' / ' +
+            formatNumber(listing.monthlyRent) +
+            '원'
       }}
     </div>
 
diff --git a/src/components/homes/homedetails/MapLocation.vue b/src/components/homes/homedetails/MapLocation.vue
index c124dac..6af0c9d 100644
--- a/src/components/homes/homedetails/MapLocation.vue
+++ b/src/components/homes/homedetails/MapLocation.vue
@@ -1,6 +1,6 @@
 <script src="../../../apis/listing.js"></script>
 <script setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue' // watch 추가
 import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps'
 
 const props = defineProps({
@@ -16,20 +16,44 @@ const coordinate = reactive({
 const map = ref(null)
 const visibleRef = ref(false)
 
-const onLoadKakaoMap = (mapRef) => {
-  map.value = mapRef
+// 주소 변경을 감지하여 지도 위치를 업데이트
+watch(
+  () => props.address,
+  (newAddress) => {
+    if (newAddress) {
+      updateMapWithAddress(newAddress)
+    }
+  },
+  { immediate: true },
+)
+
+const updateMapWithAddress = (address) => {
+  if (!address) {
+    console.warn('유효한 주소 정보가 없어 지도를 표시할 수 없습니다.')
+    return
+  }
 
   const geocoder = new kakao.maps.services.Geocoder()
-  geocoder.addressSearch(props.address, (result, status) => {
+  geocoder.addressSearch(address, (result, status) => {
     if (status === kakao.maps.services.Status.OK) {
       coordinate.lat = parseFloat(result[0].y)
       coordinate.lng = parseFloat(result[0].x)
+      // 지도가 이미 로드되었으면 중심 위치 변경
+      if (map.value) {
+        map.value.setCenter(new kakao.maps.LatLng(coordinate.lat, coordinate.lng))
+      }
     } else {
       console.warn('주소를 찾을 수 없습니다.')
     }
   })
 }
 
+const onLoadKakaoMap = (mapRef) => {
+  map.value = mapRef
+  // 초기 로딩 시 주소 검색
+  updateMapWithAddress(props.address)
+}
+
 const onClickKakaoMapMarker = () => {
   visibleRef.value = !visibleRef.value
 }
diff --git a/src/components/homes/homedetails/RoomDetails.vue b/src/components/homes/homedetails/RoomDetails.vue
index ac3bd80..eb3fc73 100644
--- a/src/components/homes/homedetails/RoomDetails.vue
+++ b/src/components/homes/homedetails/RoomDetails.vue
@@ -73,7 +73,7 @@
             <span
               v-for="item in listing.maintenanceFees"
               :key="item.maintenanceId"
-              class="bg-gray-100 text-xs px-3 py-1 rounded-full"
+              class="bg-gray-100 text-xs px-3 py-1 rounded-full whitespace-nowrap"
             >
               {{ getMaintenanceNameById(item.maintenanceId) }}
             </span>
@@ -87,10 +87,10 @@
 
       <div class="mb-6">
         <h3 class="font-semibold mb-3 text-sm text-gray-600">건물 시설</h3>
-        <div class="grid grid-cols-5 gap-5 text-center text-xs">
+        <div class="grid grid-cols-3 md:grid-cols-5 gap-3 md:gap-5 text-center text-xs">
           <div
             v-if="listing.isParking"
-            class="flex flex-col items-center bg-gray-100 px-3 py-2 rounded-md shadow-sm text-gray-700"
+            class="flex flex-col items-center bg-gray-100 px-1 py-2 rounded-md shadow-sm text-gray-700"
           >
             <ParkingIcon class="text-yellow-primary w-4 h-4 mb-1" />
             <span class="text-xs font-medium">주차가능</span>
@@ -98,8 +98,9 @@
 
           <div
             v-if="listing.isPet"
-            class="flex flex-col items-center bg-gray-100 px-3 py-2 rounded-md shadow-sm text-gray-700"
+            class="flex flex-col items-center bg-gray-100 px-1 py-2 rounded-md shadow-sm text-gray-700"
           >
+            <component :is="getIcon('반려동물')" class="text-yellow-primary w-4 h-4 mb-1" />
             <span class="text-xs font-medium">반려동물</span>
           </div>
 
@@ -107,7 +108,7 @@
             <div
               v-for="item in categorizedFacilities['건물시설']"
               :key="item.itemId"
-              class="flex flex-col items-center bg-gray-100 px-3 py-2 rounded-md shadow-sm text-gray-700"
+              class="flex flex-col items-center bg-gray-100 px-1 py-2 rounded-md shadow-sm text-gray-700"
             >
               <component :is="getIcon(item.itemName)" class="text-yellow-primary w-4 h-4 mb-1" />
               <span class="text-xs font-medium">{{ item.itemName }}</span>
@@ -118,11 +119,11 @@
 
       <div v-for="(facilities, category) in filteredFacilities" :key="category" class="mb-6">
         <h3 class="font-semibold mb-3 text-sm text-gray-600">{{ category }}</h3>
-        <div class="grid grid-cols-5 gap-5 text-center text-xs">
+        <div class="grid grid-cols-3 md:grid-cols-5 gap-3 md:gap-5 text-center text-xs">
           <div
             v-for="item in facilities"
             :key="item.itemId"
-            class="flex flex-col items-center bg-gray-100 px-3 py-2 rounded-md shadow-sm text-gray-700"
+            class="flex flex-col items-center bg-gray-100 px-1 py-2 rounded-md shadow-sm text-gray-700"
           >
             <component :is="getIcon(item.itemName)" class="text-yellow-primary w-4 h-4 mb-1" />
             <span class="text-xs font-medium">{{ item.itemName }}</span>
@@ -130,6 +131,13 @@
         </div>
       </div>
     </section>
+
+    <section v-if="listing.description">
+      <h2 class="font-bold text-lg mb-4 border-b border-gray-300 pb-2">상세 설명</h2>
+      <div class="prose max-w-none text-gray-700 leading-relaxed">
+        <p>{{ listing.description }}</p>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -170,6 +178,7 @@ import SecurityIcon from '@/assets/icons/SecurityIcon.vue'
 import FirewarningIcon from '@/assets/icons/FirewarningIcon.vue'
 import SohwagiIcon from '@/assets/icons/SohwagiIcon.vue'
 import HyungwansecuIcon from '@/assets/icons/HyungwansecuIcon.vue'
+import PetA from '@/assets/icons/PetA.vue'
 
 const { listing } = defineProps({
   listing: {
@@ -226,6 +235,7 @@ const iconMap = {
   옷장: ClosetIcon,
   붙박이장: BootbacIcon,
   신발장: ShoeseIcon,
+  침대: SofaIcon,
   소파: SofaIcon,
   CCTV: CctvIcon,
   인터폰: InterphoneIcon,
@@ -238,10 +248,10 @@ const iconMap = {
   현관보안: HyungwansecuIcon,
   엘리베이터: ElevatorIcon,
   주차장: ParkingIcon,
-  택배보관함: null,
+  택배보관함: ClosetIcon,
   개별난방: IndividualHeatingIcon,
   전체난방: CenterHeatingIcon,
-  반려동물: null,
+  반려동물: PetA,
 }
 
 const getIcon = (itemName) => {
diff --git a/src/components/homes/homelist/FilterSidebar.vue b/src/components/homes/homelist/FilterSidebar.vue
index 847cf36..cc14555 100644
--- a/src/components/homes/homelist/FilterSidebar.vue
+++ b/src/components/homes/homelist/FilterSidebar.vue
@@ -1,5 +1,25 @@
 <template>
   <aside class="w-full md:w-64 bg-white px-4 py-6 border-r border-gray-200 space-y-6">
+    <button
+      @click="$emit('close')"
+      class="absolute top-4 right-4 md:hidden text-gray-500 hover:text-gray-800"
+    >
+      <svg
+        class="w-6 h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        ></path>
+      </svg>
+    </button>
+
     <div>
       <h3 class="font-bold text-gray-800 mb-2">지역선택</h3>
       <select
@@ -25,16 +45,18 @@
       <h3 class="font-bold text-gray-800 mb-2">매물종류</h3>
       <div class="flex flex-wrap gap-2">
         <button
-          v-for="type in ['전체', '원룸', '투룸', '빌라', '오피스텔']"
-          :key="type"
+          v-for="type in houseTypes"
+          :key="type.value"
           :class="[
             'px-3 py-1 border rounded-full text-sm',
-            filters.houseType === type ? 'bg-yellow-primary text-white' : 'bg-white text-gray-700',
+            filters.houseType === type.value
+              ? 'bg-yellow-primary text-white'
+              : 'bg-white text-gray-700',
           ]"
-          @click="sethouseType(type)"
+          @click="setHouseType(type.value)"
           type="button"
         >
-          {{ type }}
+          {{ type.label }}
         </button>
       </div>
     </div>
@@ -64,9 +86,10 @@
           type="range"
           v-model="filters.depositRange"
           min="0"
-          max="200000"
-          step="100"
-          class="w-full custom-range"
+          max="30000"
+          step="10"
+          class="w-full custom-range-deposit"
+          ref="depositRangeInput"
         />
         <div class="text-xs text-gray-500">최대: {{ filters.depositRange }}만원</div>
 
@@ -75,9 +98,10 @@
           type="range"
           v-model="filters.monthlyRange"
           min="0"
-          max="5000"
-          step="10"
-          class="w-full custom-range"
+          max="500"
+          step="5"
+          class="w-full custom-range-monthly"
+          ref="monthlyRangeInput"
         />
         <div class="text-xs text-gray-500">최대: {{ filters.monthlyRange }}만원</div>
       </div>
@@ -88,9 +112,10 @@
           type="range"
           v-model="filters.leaseRange"
           min="0"
-          max="200000"
-          step="100"
-          class="w-full custom-range"
+          max="80000"
+          step="10"
+          class="w-full custom-range-lease"
+          ref="leaseRangeInput"
         />
         <div class="text-xs text-gray-500">최대: {{ filters.leaseRange }}만원</div>
       </div>
@@ -104,7 +129,8 @@
         min="0"
         max="70"
         step="1"
-        class="w-full custom-range"
+        class="w-full custom-range-area"
+        ref="areaRangeInput"
       />
       <div class="text-xs text-gray-500">최대: {{ filters.area }}평</div>
     </div>
@@ -130,10 +156,13 @@
     <div>
       <h3 class="font-bold text-gray-800 mb-2">매물조건</h3>
       <div class="flex flex-col gap-1">
-        <label v-for="opt in conditions" :key="opt" class="flex items-center gap-2 text-sm">
-          <input type="checkbox" :value="opt" v-model="filters.conditions" />
-          {{ opt }}
-        </label>
+        <BaseCheckbox
+          v-for="opt in conditions"
+          :key="opt"
+          :label="opt"
+          :modelValue="filters.conditions.includes(opt)"
+          @update:modelValue="toggleCondition(opt)"
+        />
       </div>
     </div>
 
@@ -157,10 +186,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { guToDong } from './gu-to-dong'
+import BaseCheckbox from '@/components/common/BaseCheckbox.vue'
 
-const emit = defineEmits(['filter-change'])
+const emit = defineEmits(['filter-change', 'close'])
 
 const filters = ref({
   city: '전체',
@@ -173,12 +203,26 @@ const filters = ref({
   area: 0,
   direction: null,
   floor: null,
-  conditions: [],
+  conditions: [], // 초기값은 빈 배열이어야 합니다.
 })
 
+const depositRangeInput = ref(null)
+const monthlyRangeInput = ref(null)
+const leaseRangeInput = ref(null)
+const areaRangeInput = ref(null)
+
 const guList = Object.keys(guToDong)
 const districtList = ref([])
 
+const houseTypes = [
+  { label: '전체', value: '전체' },
+  { label: '오픈형 원룸', value: 'OPEN_ONE_ROOM' },
+  { label: '분리형 원룸', value: 'SEPARATED_ONE_ROOM' },
+  { label: '투룸', value: 'TWO_ROOM' },
+  { label: '빌라', value: 'VILLA' },
+  { label: '오피스텔', value: 'OFFICETEL' },
+]
+
 function onCityChange() {
   if (filters.value.city === '전체') {
     districtList.value = []
@@ -189,19 +233,8 @@ function onCityChange() {
   }
 }
 
-function sethouseType(type) {
-  // '원룸', '투룸'과 '빌라'를 분리하여 필터링
-  if (type === '원룸') {
-    filters.value.houseType = ['OPEN_ONE_ROOM', 'SEPARATED_ONE_ROOM']
-  } else if (type === '투룸') {
-    filters.value.houseType = 'TWO_ROOM'
-  } else if (type === '빌라') {
-    filters.value.houseType = 'VILLA'
-  } else if (type === '오피스텔') {
-    filters.value.houseType = 'OFFICETEL'
-  } else {
-    filters.value.houseType = '전체'
-  }
+function setHouseType(type) {
+  filters.value.houseType = type
 }
 
 function setDealType(deal) {
@@ -237,9 +270,127 @@ function resetFilters() {
 }
 
 function emitFilterChange() {
-  emit('filter-change', filters.value)
+  const payload = {
+    ...filters.value,
+    conditions: filters.value.conditions,
+  }
+  emit('filter-change', payload)
 }
 
-const floors = ['반지하', '1층', '2~5층', '6~9층', '10층 이상']
+const floors = ['1층', '2~5층', '6~9층', '10층 이상']
 const conditions = ['주차 가능', '반려동물 가능', '엘리베이터']
+
+// 새롭게 추가된 로직: 체크박스 상태를 수동으로 토글
+function toggleCondition(condition) {
+  const index = filters.value.conditions.indexOf(condition)
+  if (index > -1) {
+    filters.value.conditions.splice(index, 1)
+  } else {
+    filters.value.conditions.push(condition)
+  }
+}
+
+function updateRangeProgress(inputElement, value, max) {
+  if (inputElement) {
+    const percentage = (value / max) * 100
+    inputElement.style.setProperty('--range-progress', `${percentage}%`)
+  }
+}
+
+watch(
+  () => filters.value.depositRange,
+  (newValue) => {
+    updateRangeProgress(depositRangeInput.value, newValue, 30000)
+  },
+)
+watch(
+  () => filters.value.monthlyRange,
+  (newValue) => {
+    updateRangeProgress(monthlyRangeInput.value, newValue, 500)
+  },
+)
+watch(
+  () => filters.value.leaseRange,
+  (newValue) => {
+    updateRangeProgress(leaseRangeInput.value, newValue, 80000)
+  },
+)
+watch(
+  () => filters.value.area,
+  (newValue) => {
+    updateRangeProgress(areaRangeInput.value, newValue, 70)
+  },
+)
+
+onMounted(() => {
+  updateRangeProgress(depositRangeInput.value, filters.value.depositRange, 30000)
+  updateRangeProgress(monthlyRangeInput.value, filters.value.monthlyRange, 500)
+  updateRangeProgress(leaseRangeInput.value, filters.value.leaseRange, 80000)
+  updateRangeProgress(areaRangeInput.value, filters.value.area, 70)
+})
 </script>
+
+<style scoped>
+/* 커스텀 CSS는 그대로 유지 */
+input[type='range'] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 8px;
+  background: transparent;
+  border-radius: 4px;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  background: #e5e7eb;
+  border-radius: 4px;
+  height: 8px;
+}
+
+input[type='range']::-moz-range-track {
+  background: #e5e7eb;
+  border-radius: 4px;
+  height: 8px;
+}
+
+input[type='range']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 8px;
+  background-color: #facc15;
+  border-radius: 4px;
+  width: var(--range-progress, 0%);
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #facc15;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -4px;
+}
+
+input[type='range']::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: #facc15;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.custom-range-deposit,
+.custom-range-monthly,
+.custom-range-lease,
+.custom-range-area {
+  position: relative;
+  overflow: hidden;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: #facc15;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/components/homes/homelist/ListingCard.vue b/src/components/homes/homelist/ListingCard.vue
index 7f30087..62f897d 100644
--- a/src/components/homes/homelist/ListingCard.vue
+++ b/src/components/homes/homelist/ListingCard.vue
@@ -22,15 +22,13 @@
           </div>
           <div class="text-lg font-bold">
             <template v-if="listing.leaseType === '전세'">
-              {{ formatNumber(listing.depositPrice) }}
+              {{ formatNumber(listing.depositPrice) }}원
             </template>
             <template v-else-if="listing.leaseType === '월세'">
-              {{ formatNumber(listing.depositPrice) }} /
-              {{ formatNumber(listing.monthlyRent) }}
+              {{ formatNumber(listing.depositPrice) }}원 / {{ formatNumber(listing.monthlyRent) }}원
             </template>
             <template v-else>
-              {{ formatNumber(listing.depositPrice) }} /
-              {{ formatNumber(listing.monthlyRent) }}
+              {{ formatNumber(listing.depositPrice) }}원 / {{ formatNumber(listing.monthlyRent) }}원
             </template>
           </div>
         </div>
diff --git a/src/components/homes/homeupdate/BasicInfoForm.vue b/src/components/homes/homeupdate/BasicInfoForm.vue
index 7db2a9e..16bfade 100644
--- a/src/components/homes/homeupdate/BasicInfoForm.vue
+++ b/src/components/homes/homeupdate/BasicInfoForm.vue
@@ -1,27 +1,129 @@
 <template>
-  <div class="bg-gray-50 p-6 rounded-lg">
-    <h2 class="text-lg font-semibold mb-4">기본 정보 (수정 불가)</h2>
-    <div class="grid grid-cols-2 gap-4">
-      <BaseInput label="건물 종류" :modelValue="basicInfo?.buildingType || ''" disabled />
-      <BaseInput label="등록일" :modelValue="basicInfo?.registrationDate || ''" disabled />
-      <BaseInput label="전체 주소" :modelValue="basicInfo?.fullAddress || ''" disabled />
-      <BaseInput label="전용면적(㎡)" :modelValue="basicInfo?.exclusiveArea || ''" disabled />
-      <BaseInput label="공급면적(㎡)" :modelValue="basicInfo?.supplyArea || ''" disabled />
-      <BaseInput label="현재층/전체층수" :modelValue="basicInfo?.floorInfo || ''" disabled />
-      <BaseInput label="사용승인일" :modelValue="basicInfo?.approvalDate || ''" disabled />
-      <BaseInput label="건축물용도" :modelValue="basicInfo?.buildingUsage || ''" disabled />
-      <BaseInput label="건물형태" :modelValue="basicInfo?.buildingStructure || ''" disabled />
+  <div class="space-y-6">
+    <h2 class="text-lg font-semibold">기본 정보</h2>
+
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">
+        매물 종류 <span class="text-red-500">*</span>
+      </label>
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          v-for="option in residenceTypeOptions"
+          :key="option.value"
+          :class="[
+            'py-2 px-4 border rounded-md text-sm font-medium transition',
+            props.form.residenceType === option.value
+              ? 'bg-yellow-primary text-white border-yellow-primary'
+              : 'bg-white text-gray-700 hover:bg-gray-50',
+          ]"
+          @click="updateForm('residenceType', option.value)"
+          type="button"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">
+        거래 유형 <span class="text-red-500">*</span>
+      </label>
+      <div class="flex gap-6">
+        <BaseRadio
+          v-for="option in leaseTypeOptions"
+          :key="option.value"
+          :value="option.value"
+          :label="option.label"
+          :modelValue="form.leaseType"
+          name="leaseType"
+          @update:modelValue="updateForm('leaseType', $event)"
+        />
+      </div>
+    </div>
+
+    <div>
+      <label class="block mb-1 text-sm font-medium text-gray-600">
+        주소<span class="text-red-500">*</span>
+      </label>
+      <div class="flex gap-2">
+        <input
+          class="w-full rounded-md border border-gray-300 px-4 py-2 text-sm"
+          type="text"
+          :value="props.form.addr1"
+          placeholder="주소 검색"
+          disabled
+        />
+        <BaseButton
+          class="w-36 flex justify-center items-center"
+          variant="primary"
+          type="button"
+          @click="modalStore.open()"
+        >
+          주소 검색
+        </BaseButton>
+      </div>
+    </div>
+
+    <div>
+      <label class="block mb-1 text-sm font-medium text-gray-600">상세 주소</label>
+      <input
+        :value="props.form.addr2"
+        @input="updateForm('addr2', $event.target.value)"
+        class="w-full rounded-md border border-gray-300 px-4 py-2 text-sm"
+        type="text"
+        placeholder="상세 주소를 입력하세요"
+      />
     </div>
+
+    <BaseModal :closable="true" :maskCloseable="true">
+      <SearchAddress @select="onAddressSelect" />
+    </BaseModal>
   </div>
 </template>
 
 <script setup>
-import BaseInput from '@/components/common/BaseInput.vue'
+import { useModalStore } from '@/stores/modal'
+import BaseButton from '@/components/common/BaseButton.vue'
+import BaseRadio from '@/components/common/BaseRadio.vue'
+import BaseModal from '@/components/common/BaseModal.vue'
+import SearchAddress from '@/components/common/SearchAddress.vue'
 
-defineProps({
-  basicInfo: {
+const props = defineProps({
+  form: {
     type: Object,
-    default: () => ({}),
+    required: true,
   },
 })
+
+const emit = defineEmits(['update:form'])
+const modalStore = useModalStore()
+
+const updateForm = (field, value) => {
+  emit('update:form', {
+    ...props.form,
+    [field]: value,
+  })
+}
+
+const onAddressSelect = (selectedAddress) => {
+  if (selectedAddress) {
+    updateForm('addr1', selectedAddress)
+  }
+  modalStore.close()
+}
+
+const residenceTypeOptions = [
+  { label: '오픈형 원룸', value: 'OPEN_ONE_ROOM' },
+  { label: '분리형 원룸', value: 'SEPARATED_ONE_ROOM' },
+  { label: '투룸', value: 'TWO_ROOM' },
+  { label: '오피스텔', value: 'OFFICETEL' },
+  { label: '아파트', value: 'APARTMENT' },
+  { label: '단독주택', value: 'HOUSE' },
+  { label: '빌라', value: 'VILLA' },
+]
+
+const leaseTypeOptions = [
+  { label: '월세', value: 'WOLSE' },
+  { label: '전세', value: 'JEONSE' },
+]
 </script>
diff --git a/src/components/homes/homeupdate/FacilityInfoForm.vue b/src/components/homes/homeupdate/FacilityInfoForm.vue
index 8d2ea21..9b365b9 100644
--- a/src/components/homes/homeupdate/FacilityInfoForm.vue
+++ b/src/components/homes/homeupdate/FacilityInfoForm.vue
@@ -1,182 +1,172 @@
 <template>
-  <div class="bg-white p-6 rounded-lg space-y-6">
-    <h2 class="text-lg font-semibold">시설 정보</h2>
-
-    <!-- 건물 정보 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">건물 정보</label>
-      <div class="flex gap-4">
-        <BaseCheckbox v-model="localListing.buildingFacilities.elevator" label="엘리베이터" />
-      </div>
-    </div>
-
-    <!-- 생활 시설 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">생활 시설</label>
-      <div class="grid grid-cols-3 gap-2">
-        <BaseCheckbox
-          v-for="item in livingFacilitiesList"
-          :key="item"
-          :label="item"
-          :modelValue="localListing.livingFacilities.includes(item)"
-          @update:modelValue="
-            (checked) => updateArray(localListing.livingFacilities, item, checked)
-          "
+  <form @submit.prevent="onSubmit" class="max-w-4xl mx-auto p-6 space-y-6 rounded-md">
+    <h2 class="text-lg font-semibold text-gray mb-2">시설 정보</h2>
+    <p class="mb-4 text-gray-700">
+      해당되는 시설을 모두 선택해주세요. 임차인이 확인할 수 있습니다.
+    </p>
+
+    <fieldset
+      v-for="(items, category) in utilityItems"
+      :key="category"
+      class="border border-gray-300 rounded-md p-4"
+    >
+      <legend class="font-semibold mb-2">{{ categoryLabels[category] }}</legend>
+      <div class="flex flex-wrap gap-6">
+        <BaseCheckBox
+          v-for="item in items"
+          :key="item.id"
+          :label="item.name"
+          :modelValue="localSelectedIds.includes(item.id)"
+          @update:modelValue="(checked) => updateCheckbox(item.id, checked)"
         />
       </div>
-    </div>
-
-    <!-- 난방 방식 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">난방 방식</label>
-      <div class="flex gap-2">
-        <button
-          v-for="option in heatingOptions"
-          :key="option"
-          type="button"
-          @click="localListing.selectedHeating = option"
-          :class="[
-            'px-4 py-2 rounded border',
-            localListing.selectedHeating === option
-              ? 'bg-yellow-primary text-white border-yellow-primary'
-              : 'bg-white border-gray-300',
-          ]"
-        >
-          {{ option }}
-        </button>
-      </div>
-    </div>
-
-    <!-- 냉방 시설 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">냉방 시설</label>
-      <div class="flex gap-2">
-        <button
-          v-for="option in coolingOptions"
-          :key="option"
-          type="button"
-          @click="localListing.selectedCooling = option"
-          :class="[
-            'px-4 py-2 rounded border',
-            localListing.selectedCooling === option
-              ? 'bg-yellow-primary text-white border-yellow-primary'
-              : 'bg-white border-gray-300',
-          ]"
-        >
-          {{ option }}
-        </button>
-      </div>
-    </div>
-
-    <!-- 보안 시설 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">보안 시설</label>
-      <div class="grid grid-cols-3 gap-2">
-        <BaseCheckbox
-          v-for="item in securityFacilitiesList"
-          :key="item"
-          :label="item"
-          :modelValue="localListing.securityFacilities.includes(item)"
-          @update:modelValue="
-            (checked) => updateArray(localListing.securityFacilities, item, checked)
-          "
+    </fieldset>
+
+    <div class="border border-gray-300 rounded-md p-4">
+      <h3 class="font-semibold mb-2">기타 상세 정보</h3>
+      <div class="flex flex-wrap gap-6">
+        <BaseCheckBox
+          label="반려동물 가능"
+          :modelValue="localIsPet"
+          @update:modelValue="(checked) => updateToggleOption('isPet', checked)"
         />
-      </div>
-    </div>
-
-    <!-- 기타 시설 -->
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">기타 시설</label>
-      <div class="grid grid-cols-3 gap-2">
-        <BaseCheckbox
-          v-for="item in otherFacilitiesList"
-          :key="item"
-          :label="item"
-          :modelValue="localListing.otherFacilities.includes(item)"
-          @update:modelValue="(checked) => updateArray(localListing.otherFacilities, item, checked)"
+        <BaseCheckBox
+          label="주차 가능"
+          :modelValue="localIsParking"
+          @update:modelValue="(checked) => updateToggleOption('isParking', checked)"
         />
       </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <script setup>
-import { reactive, watch } from 'vue'
-import BaseCheckbox from '@/components/common/BaseCheckbox.vue'
+import { computed, ref, watch } from 'vue'
+import BaseCheckBox from '@/components/common/BaseCheckbox.vue'
 
 const props = defineProps({
   modelValue: {
     type: Object,
-    required: true,
+    default: () => ({
+      facilityItemIds: [],
+      isPet: false,
+      isParking: false,
+    }),
   },
 })
+
 const emit = defineEmits(['update:modelValue'])
 
-// reactive 복사본 (로컬 상태)
-const localListing = reactive({
-  buildingFacilities: props.modelValue.buildingFacilities || { elevator: false },
-  livingFacilities: props.modelValue.livingFacilities || [],
-  selectedHeating: props.modelValue.selectedHeating || null,
-  selectedCooling: props.modelValue.selectedCooling || null,
-  securityFacilities: props.modelValue.securityFacilities || [],
-  otherFacilities: props.modelValue.otherFacilities || [],
-})
+const localSelectedIds = ref([...props.modelValue.facilityItemIds])
+const localIsPet = ref(props.modelValue.isPet)
+const localIsParking = ref(props.modelValue.isParking)
+
+watch(
+  () => props.modelValue.facilityItemIds,
+  (newVal) => {
+    localSelectedIds.value = [...newVal]
+  },
+)
 
-// props 변경 감지 후 동기화
 watch(
-  () => props.modelValue,
+  () => props.modelValue.isPet,
   (newVal) => {
-    localListing.buildingFacilities = newVal.buildingFacilities || { elevator: false }
-    localListing.livingFacilities = newVal.livingFacilities || []
-    localListing.selectedHeating = newVal.selectedHeating || null
-    localListing.selectedCooling = newVal.selectedCooling || null
-    localListing.securityFacilities = newVal.securityFacilities || []
-    localListing.otherFacilities = newVal.otherFacilities || []
+    localIsPet.value = newVal
   },
-  { deep: true },
 )
 
-// localListing 변경 시 부모에 emit
 watch(
-  localListing,
+  () => props.modelValue.isParking,
   (newVal) => {
-    emit('update:modelValue', { ...newVal })
+    localIsParking.value = newVal
   },
-  { deep: true },
 )
 
-// 체크박스 목록
-const livingFacilitiesList = [
-  '에어컨',
-  'TV',
-  '세탁기',
-  '냉장고',
-  '인덕션',
-  '가스레인지',
-  '인덕션레인지',
-  '전자레인지',
-  '욕조',
-  '싱크대',
-  '책상',
-  '옷장',
-  '붙박이장',
-  '신발장',
-]
-
-const heatingOptions = ['개별난방', '전체난방']
-const coolingOptions = ['벽걸이 에어컨', '빌트인 에어컨']
-
-const securityFacilitiesList = ['현관보안', 'CCTV', '인터폰', '카드키 도어락', '방범창', '경비']
-
-const otherFacilitiesList = ['화재 경보기', '소화기', '주차']
-
-// 배열에 항목 추가/삭제 함수
-function updateArray(arr, item, checked) {
-  if (checked && !arr.includes(item)) {
-    arr.push(item)
-  } else if (!checked && arr.includes(item)) {
-    const idx = arr.indexOf(item)
-    if (idx > -1) arr.splice(idx, 1)
+const allValidIds = computed(() => {
+  return Object.values(utilityItems)
+    .flat()
+    .map((item) => item.id)
+})
+
+const utilityItems = {
+  appliances: [
+    { id: 1, name: '에어컨' },
+    { id: 2, name: '세탁기' },
+    { id: 3, name: '냉장고' },
+    { id: 4, name: '전자레인지' },
+    { id: 16, name: 'TV' },
+    { id: 19, name: '인덕션' },
+    { id: 20, name: '가스렌지' },
+    { id: 22, name: '벽걸이 에어컨' },
+    { id: 23, name: '빌트인 에어컨' },
+  ],
+  furniture: [
+    { id: 5, name: '침대' },
+    { id: 6, name: '책상' },
+    { id: 7, name: '옷장' },
+    { id: 8, name: '소파' },
+    { id: 24, name: '욕조' },
+    { id: 25, name: '싱크대' },
+    { id: 28, name: '붙박이장' },
+    { id: 29, name: '신발장' },
+  ],
+  security: [
+    { id: 9, name: '도어락' },
+    { id: 10, name: 'CCTV' },
+    { id: 11, name: '인터폰' },
+    { id: 34, name: '카드키' },
+    { id: 35, name: '방범창' },
+    { id: 36, name: '경비' },
+    { id: 37, name: '화재경보기' },
+    { id: 38, name: '소화기' },
+    { id: 39, name: '현관보안' },
+  ],
+  convenience: [
+    { id: 12, name: '엘리베이터' },
+    { id: 14, name: '택배보관함' },
+    { id: 41, name: '전체난방' },
+  ],
+}
+
+const categoryLabels = {
+  appliances: '가전제품',
+  furniture: '가구',
+  security: '보안시설',
+  convenience: '편의시설',
+}
+
+function updateCheckbox(itemId, checked) {
+  const numericItemId = Number(itemId)
+  const currentIds = new Set(localSelectedIds.value)
+
+  if (!allValidIds.value.includes(numericItemId)) {
+    console.warn(`Attempted to update an invalid itemId: ${itemId}`)
+    return
+  }
+
+  if (checked) {
+    currentIds.add(numericItemId)
+  } else {
+    currentIds.delete(numericItemId)
+  }
+
+  localSelectedIds.value = Array.from(currentIds)
+  emit('update:modelValue', {
+    ...props.modelValue,
+    facilityItemIds: localSelectedIds.value,
+  })
+}
+
+function updateToggleOption(key, checked) {
+  if (key === 'isPet') {
+    localIsPet.value = checked
+  } else if (key === 'isParking') {
+    localIsParking.value = checked
   }
+  emit('update:modelValue', {
+    ...props.modelValue,
+    isPet: localIsPet.value,
+    isParking: localIsParking.value,
+  })
 }
 </script>
diff --git a/src/components/homes/homeupdate/ImageUploader.vue b/src/components/homes/homeupdate/ImageUploader.vue
index b21f6a0..bc7110e 100644
--- a/src/components/homes/homeupdate/ImageUploader.vue
+++ b/src/components/homes/homeupdate/ImageUploader.vue
@@ -2,29 +2,39 @@
   <div class="bg-white p-6 rounded-lg">
     <h2 class="text-lg font-semibold mb-4">매물 이미지</h2>
 
-    <!-- 이미지 미리보기 영역 -->
     <div class="flex gap-4 flex-wrap">
-      <!-- 기존 이미지 -->
-      <img
-        v-for="(img, index) in previewImages"
-        :key="'default-' + index"
-        :src="img.image_url"
-        :alt="img.space_type"
-        class="w-24 h-24 object-cover rounded-md cursor-pointer"
-        @click="openPreview(img.image_url)"
-      />
+      <div
+        v-for="(imgUrl, index) in images"
+        :key="'existing-' + index"
+        class="relative w-24 h-24 rounded overflow-hidden border border-gray-300 shadow-sm"
+      >
+        <img :src="imgUrl" alt="기존 이미지" class="object-cover w-full h-full" />
+        <button
+          @click="removeExistingImage(index, imgUrl)"
+          type="button"
+          class="absolute top-1 right-1 w-6 h-6 rounded-full bg-red-600 text-white text-xs flex items-center justify-center hover:bg-red-700"
+          aria-label="삭제"
+        >
+          ×
+        </button>
+      </div>
 
-      <!-- 새 이미지 -->
-      <img
+      <div
         v-for="(file, index) in newImages"
         :key="'new-' + index"
-        :src="file.preview"
-        alt="업로드된 이미지"
-        class="w-24 h-24 object-cover rounded-md cursor-pointer"
-        @click="openPreview(file.preview)"
-      />
+        class="relative w-24 h-24 rounded overflow-hidden border border-gray-300 shadow-sm"
+      >
+        <img :src="file.preview" alt="업로드된 이미지" class="object-cover w-full h-full" />
+        <button
+          @click="removeNewImage(index)"
+          type="button"
+          class="absolute top-1 right-1 w-6 h-6 rounded-full bg-red-600 text-white text-xs flex items-center justify-center hover:bg-red-700"
+          aria-label="삭제"
+        >
+          ×
+        </button>
+      </div>
 
-      <!-- 이미지 업로드 버튼 (최대 10장 제한) -->
       <label
         v-if="totalImageCount < 10"
         for="image-upload"
@@ -41,100 +51,63 @@
         />
       </label>
     </div>
-
-    <!-- 이미지 확대 모달 -->
-    <div
-      v-if="modalImage"
-      class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
-    >
-      <!-- 닫기 버튼 -->
-      <button
-        class="absolute top-4 right-4 text-white text-3xl font-bold"
-        @click="modalImage = null"
-      >
-        ×
-      </button>
-      <img :src="modalImage" class="max-w-3xl max-h-[90vh] rounded shadow-lg" />
-    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
-// 기본 이미지
-const previewImages = ref([
-  {
-    image_id: 1,
-    space_type: '거실',
-    image_url: 'https://cdn.pixabay.com/photo/2024/05/22/01/39/room-8779502_1280.png',
-  },
-  {
-    image_id: 2,
-    space_type: '침실',
-    image_url: 'https://cdn.pixabay.com/photo/2018/08/09/06/13/home-3593832_1280.jpg',
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => [],
   },
-  {
-    image_id: 3,
-    space_type: '주방',
-    image_url: 'https://cdn.pixabay.com/photo/2024/05/22/01/39/room-8779502_1280.png',
+  newImages: {
+    type: Array,
+    default: () => [],
   },
-  {
-    image_id: 4,
-    space_type: '거실',
-    image_url: 'https://cdn.pixabay.com/photo/2024/05/22/01/39/room-8779502_1280.png',
-  },
-  {
-    image_id: 5,
-    space_type: '거실',
-    image_url: 'https://cdn.pixabay.com/photo/2024/05/22/01/39/room-8779502_1280.png',
-  },
-])
+})
 
-// 새로 추가한 이미지
-const newImages = ref([])
+const emit = defineEmits(['update:images', 'update:newImages', 'image-deleted'])
 
-// 총 이미지 개수 계산
-const totalImageCount = computed(() => previewImages.value.length + newImages.value.length)
+const totalImageCount = computed(() => props.images.length + props.newImages.length)
 
-// 파일 업로드 처리
 const handleImageUpload = (e) => {
   const files = Array.from(e.target.files)
   const remainingSlots = 10 - totalImageCount.value
 
-  // 초과 업로드 방지
   if (files.length > remainingSlots) {
     alert(`이미지는 최대 10장까지 업로드할 수 있습니다. (${remainingSlots}장 더 추가 가능)`)
     return
   }
 
-  files.forEach((file) => {
-    const reader = new FileReader()
-    reader.onload = (event) => {
-      newImages.value.push({
-        file,
-        preview: event.target.result,
-      })
-    }
-    reader.readAsDataURL(file)
-  })
+  const newFilesWithPreview = files.map((file) => ({
+    file,
+    preview: URL.createObjectURL(file),
+  }))
 
-  // input 초기화
+  emit('update:newImages', [...props.newImages, ...newFilesWithPreview])
   e.target.value = ''
 }
 
-// 모달 이미지
-const modalImage = ref(null)
+const removeExistingImage = (index, imgUrl) => {
+  const filename = imgUrl.substring(imgUrl.lastIndexOf('/') + 1)
+  const imageId = parseInt(filename.substring(0, filename.lastIndexOf('_')), 10)
+
+  if (!isNaN(imageId)) {
+    emit('image-deleted', imageId)
+  } else {
+    console.warn(`Could not extract a valid image ID from URL: ${imgUrl}`)
+  }
 
-// 모달 열기
-const openPreview = (src) => {
-  modalImage.value = src
+  const updatedImages = [...props.images]
+  updatedImages.splice(index, 1)
+  emit('update:images', updatedImages)
 }
-</script>
 
-<style scoped>
-/* 닫기 버튼 커서 */
-button {
-  cursor: pointer;
+const removeNewImage = (index) => {
+  const updatedNewImages = [...props.newImages]
+  updatedNewImages.splice(index, 1)
+  emit('update:newImages', updatedNewImages)
 }
-</style>
+</script>
diff --git a/src/components/homes/homeupdate/PriceInfoForm.vue b/src/components/homes/homeupdate/PriceInfoForm.vue
index 7b4072f..627c707 100644
--- a/src/components/homes/homeupdate/PriceInfoForm.vue
+++ b/src/components/homes/homeupdate/PriceInfoForm.vue
@@ -1,92 +1,194 @@
 <template>
-  <div class="bg-white p-6 rounded-lg">
-    <h2 class="text-lg font-semibold mb-4">거래 정보</h2>
+  <div class="bg-white p-6 rounded-lg space-y-6">
+    <h2 class="text-lg font-semibold">가격 정보</h2>
 
-    <!-- 거래 유형 -->
-    <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">거래 유형</label>
-      <div class="flex gap-2">
-        <button
-          v-for="type in ['월세', '전세']"
-          :key="type"
-          :class="[
-            'px-4 py-2 rounded',
-            거래유형 === type ? 'bg-yellow-primary text-white' : 'bg-gray-200',
-          ]"
-          @click="거래유형 = type"
-          type="button"
+    <div v-if="form.leaseType === 'JEONSE'" class="space-y-4">
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >전세금 <span class="text-red-500">*</span></label
         >
-          {{ type }}
-        </button>
+        <div class="relative w-full">
+          <input
+            type="text"
+            :value="displayValue('depositPrice')"
+            @input="handleInput('depositPrice', $event)"
+            class="w-full border rounded px-3 py-2 pr-16 text-right"
+            placeholder="0"
+            required
+          />
+          <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
+            >원</span
+          >
+        </div>
       </div>
-    </div>
-
-    <!-- 보증금 및 월세/관리비 -->
-    <div class="grid grid-cols-2 gap-4 mb-4">
-      <BaseInput v-model="보증금" label="보증금" placeholder="예: 1000" type="number" min="0" />
-
-      <!-- 월세는 거래 유형이 '월세'일 때만 표시 -->
-      <BaseInput
-        v-if="거래유형 === '월세'"
-        v-model="월세"
-        label="월세"
-        placeholder="예: 100"
-        type="number"
-        min="0"
-      />
-
-      <BaseInput v-model="관리비" label="관리비" placeholder="예: 10" type="number" min="0" />
-    </div>
-
-    <!-- 관리비 포함 항목 -->
-    <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">관리비 포함 항목</label>
-      <div class="grid grid-cols-4 gap-2">
-        <BaseCheckbox
-          v-for="item in 관리비포함항목목록"
-          :key="item"
-          :label="item"
-          :modelValue="관리비포함항목.includes(item)"
-          @update:modelValue="(checked) => updateArray(관리비포함항목, item, checked)"
-        />
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >관리비<span class="text-red-500">*</span></label
+        >
+        <div class="relative w-full">
+          <input
+            type="text"
+            :value="displayValue('maintenaceFee')"
+            @input="handleInput('maintenaceFee', $event)"
+            class="w-full border rounded px-3 py-2 pr-16 text-right"
+            placeholder="0"
+          />
+          <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
+            >원</span
+          >
+        </div>
+      </div>
+      <div>
+        <h4 class="font-semibold mt-4 mb-2">관리비 포함 항목</h4>
+        <div class="grid grid-cols-2 gap-2">
+          <BaseCheckBox
+            v-for="item in maintenanceItems"
+            :key="item.maintenanceId"
+            :label="item.maintenanceName"
+            :modelValue="isChecked(item.maintenanceId)"
+            @update:modelValue="
+              (checked) => toggleMaintenanceItem(item.maintenanceId, item.fee, checked)
+            "
+          />
+        </div>
       </div>
     </div>
 
-    <!-- 입주 가능일 -->
-    <div>
-      <label for="move-in-date" class="block text-sm font-medium text-gray-700 mb-1">
-        입주 가능일
-      </label>
-      <input
-        type="date"
-        id="move-in-date"
-        v-model="입주가능일"
-        class="border rounded px-3 py-2 w-full"
-      />
+    <div v-else-if="form.leaseType === 'WOLSE'" class="space-y-4">
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >보증금 <span class="text-red-500">*</span></label
+        >
+        <div class="relative w-full">
+          <input
+            type="text"
+            :value="displayValue('depositPrice')"
+            @input="handleInput('depositPrice', $event)"
+            class="w-full border rounded px-3 py-2 pr-16 text-right"
+            placeholder="0"
+            required
+          />
+          <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
+            >원</span
+          >
+        </div>
+      </div>
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >월세 <span class="text-red-500">*</span></label
+        >
+        <div class="relative w-full">
+          <input
+            type="text"
+            :value="displayValue('monthlyRent')"
+            @input="handleInput('monthlyRent', $event)"
+            class="w-full border rounded px-3 py-2 pr-16 text-right"
+            placeholder="0"
+          />
+          <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
+            >원</span
+          >
+        </div>
+      </div>
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >관리비 <span class="text-red-500">*</span></label
+        >
+        <div class="relative w-full">
+          <input
+            type="text"
+            :value="displayValue('maintenaceFee')"
+            @input="handleInput('maintenaceFee', $event)"
+            class="w-full border rounded px-3 py-2 pr-16 text-right"
+            placeholder="0"
+          />
+          <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-sm text-gray-500"
+            >원</span
+          >
+        </div>
+      </div>
+      <div>
+        <h4 class="font-semibold mt-4 mb-2">관리비 포함 항목</h4>
+        <div class="grid grid-cols-2 gap-2">
+          <BaseCheckBox
+            v-for="item in maintenanceItems"
+            :key="item.maintenanceId"
+            :label="item.maintenanceName"
+            :modelValue="isChecked(item.maintenanceId)"
+            @update:modelValue="
+              (checked) => toggleMaintenanceItem(item.maintenanceId, item.fee, checked)
+            "
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import BaseCheckbox from '@/components/common/BaseCheckbox.vue'
-import BaseInput from '@/components/common/BaseInput.vue'
+import { toRaw, toRefs } from 'vue'
+import BaseCheckBox from '@/components/common/BaseCheckbox.vue'
 
-const 거래유형 = ref('월세')
-const 보증금 = ref(null)
-const 월세 = ref(null)
-const 관리비 = ref(null)
-const 관리비포함항목 = ref([])
-const 입주가능일 = ref('')
+const emit = defineEmits(['update:form'])
+const props = defineProps({ form: Object })
+const { form } = toRefs(props)
 
-const 관리비포함항목목록 = ['전기료', '수도료', '인터넷', '케이블 TV', '가스료', '난방비']
+function formatCurrency(value) {
+  const number = value.replace(/[^\d]/g, '')
+  return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+function handleInput(field, event) {
+  const raw = event.target.value.replace(/[^\d]/g, '')
+  let parsed = raw ? parseInt(raw, 10) : 0
+
+  if (isNaN(parsed)) {
+    parsed = 0
+  }
+
+  if (field === 'depositPrice' || field === 'monthlyRent' || field === 'maintenaceFee') {
+    parsed = parsed === null ? 0 : parsed
+  }
+
+  emit('update:form', { ...props.form, [field]: parsed })
+  const formatted = formatCurrency(raw || '0')
+  event.target.value = formatted
+  requestAnimationFrame(() => {
+    const len = formatted.length
+    event.target.setSelectionRange(len, len)
+  })
+}
+
+function displayValue(field) {
+  const value = props.form[field]
+  return value || value === 0 ? formatCurrency(String(value)) : '0'
+}
+
+const maintenanceItems = [
+  { maintenanceId: 3, maintenanceName: '가스료', fee: 0 },
+  { maintenanceId: 2, maintenanceName: '수도료', fee: 0 },
+  { maintenanceId: 4, maintenanceName: '인터넷', fee: 0 },
+  { maintenanceId: 1, maintenanceName: '전기료', fee: 0 },
+  { maintenanceId: 5, maintenanceName: '청소비', fee: 0 },
+]
 
-function updateArray(arr, item, checked) {
-  if (checked && !arr.includes(item)) {
-    arr.push(item)
-  } else if (!checked && arr.includes(item)) {
-    const idx = arr.indexOf(item)
-    if (idx > -1) arr.splice(idx, 1)
+function toggleMaintenanceItem(id, fee, checked) {
+  let newItems = [...(props.form.maintenanceFees || [])]
+
+  if (checked) {
+    if (!newItems.some((item) => toRaw(item).maintenanceId === id)) {
+      newItems.push({ maintenanceId: id, fee: fee })
+    }
+  } else {
+    newItems = newItems.filter((item) => toRaw(item).maintenanceId !== id)
   }
+  emit('update:form', {
+    ...props.form,
+    maintenanceFees: toRaw(newItems),
+  })
+}
+
+function isChecked(id) {
+  return (props.form.maintenanceFees || []).some((item) => toRaw(item).maintenanceId === id)
 }
 </script>
diff --git a/src/components/homes/homeupdate/RoomInfoForm.vue b/src/components/homes/homeupdate/RoomInfoForm.vue
index 8108576..f9c2fd9 100644
--- a/src/components/homes/homeupdate/RoomInfoForm.vue
+++ b/src/components/homes/homeupdate/RoomInfoForm.vue
@@ -1,94 +1,205 @@
 <template>
-  <div class="bg-white p-6 rounded-lg">
-    <h2 class="text-lg font-semibold mb-4">기본 정보</h2>
+  <div class="bg-white p-6 rounded-lg space-y-6">
+    <h2 class="text-lg font-semibold mb-2">상세 정보</h2>
+    <p class="mb-4 text-gray-700">전용면적과 건물 정보를 입력해주세요.</p>
 
-    <!-- 방 수 -->
-    <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">방 수</label>
-      <div class="flex gap-2">
-        <button
-          v-for="num in 5"
-          :key="num"
-          type="button"
-          @click="selectedRooms = num"
-          :class="[
-            'px-4 py-2 rounded border',
-            selectedRooms === num
-              ? 'bg-yellow-primary text-white border-yellow-primary'
-              : 'bg-white border-gray-300',
-          ]"
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >전용면적 <span class="text-red-500">*</span></label
         >
-          {{ num }}개
-        </button>
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-20 w-full no-spin"
+            :value="form.exclusiveArea"
+            @input="handleChange('exclusiveArea', $event.target.valueAsNumber)"
+            required
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">제곱미터</span>
+        </div>
+      </div>
+
+      <div>
+        <label class="block mb-1 text-sm font-medium">공급면적</label>
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-20 w-full no-spin"
+            :value="form.supplyArea"
+            @input="handleChange('supplyArea', $event.target.valueAsNumber)"
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">제곱미터</span>
+        </div>
       </div>
     </div>
 
-    <!-- 욕실 수 -->
-    <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">욕실 수</label>
-      <div class="flex gap-2">
-        <button
-          v-for="num in 3"
-          :key="num"
-          type="button"
-          @click="selectedBathrooms = num"
-          :class="[
-            'px-4 py-2 rounded border',
-            selectedBathrooms === num
-              ? 'bg-yellow-primary text-white border-yellow-primary'
-              : 'bg-white border-gray-300',
-          ]"
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >방 개수 <span class="text-red-500">*</span></label
         >
-          {{ num }}개
-        </button>
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-12 w-full no-spin"
+            :value="form.roomCnt"
+            @input="handleChange('roomCnt', $event.target.valueAsNumber)"
+            required
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">개</span>
+        </div>
+      </div>
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >욕실 개수 <span class="text-red-500">*</span></label
+        >
+        <div class="relative">
+          <input
+            type="number"
+            min="0"
+            class="border rounded p-2 pr-12 w-full no-spin"
+            :value="form.bathroomCnt"
+            @input="handleChange('bathroomCnt', $event.target.valueAsNumber)"
+            required
+            placeholder="0"
+          />
+          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">개</span>
+        </div>
       </div>
     </div>
 
-    <!-- 방향 -->
-    <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">방향</label>
-      <div class="flex flex-wrap gap-2">
+    <div class="grid grid-cols-2 gap-6">
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >현재 층 <span class="text-red-500">*</span></label
+        >
+        <input
+          type="number"
+          min="0"
+          class="border rounded p-2 w-full"
+          :value="form.homeFloor"
+          @input="handleChange('homeFloor', $event.target.valueAsNumber)"
+          required
+          placeholder="0"
+        />
+      </div>
+      <div>
+        <label class="block mb-1 text-sm font-medium"
+          >총 층수 <span class="text-red-500">*</span></label
+        >
+        <input
+          type="number"
+          min="0"
+          class="border rounded p-2 w-full"
+          :value="form.buildingTotalFloors"
+          @input="handleChange('buildingTotalFloors', $event.target.valueAsNumber)"
+          required
+          placeholder="0"
+        />
+      </div>
+    </div>
+
+    <div>
+      <label class="block mb-1 text-sm font-medium"
+        >사용 승인일<span class="text-red-500">*</span></label
+      >
+      <input
+        type="date"
+        class="border rounded p-2 w-full max-w-xs"
+        :value="form.buildDate"
+        @input="handleChange('buildDate', $event.target.value)"
+      />
+    </div>
+
+    <fieldset>
+      <legend class="font-semibold mb-2">방향</legend>
+      <div class="grid grid-cols-4 gap-2 max-w-xl">
         <button
-          v-for="dir in directions"
-          :key="dir"
+          v-for="opt in homeDirectionOptions"
+          :key="opt.value"
           type="button"
-          @click="selectedDirection = dir"
+          @click="handleChange('homeDirection', opt.value)"
           :class="[
-            selectedDirection === dir
+            'py-2 px-4 border rounded text-center cursor-pointer w-full',
+            form.homeDirection === opt.value
               ? 'bg-yellow-primary text-white border-yellow-primary'
-              : 'bg-white border-gray-300',
-            'px-4 py-2 rounded border',
+              : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100',
           ]"
         >
-          {{ dir }}
+          {{ opt.label }}
         </button>
       </div>
-    </div>
+    </fieldset>
 
-    <!-- 상세 설명 -->
-    <div>
-      <label for="details" class="block text-sm font-medium text-gray-700 mb-1">상세 내용</label>
-      <textarea
-        id="details"
-        v-model="details"
-        rows="5"
-        placeholder="매물에 대한 상세한 설명을 입력하세요."
-        class="w-full border rounded p-3 resize-none"
-      ></textarea>
-    </div>
+    <fieldset class="rounded-md p-4">
+      <OptionChecklist
+        :modelValue="{
+          facilityItemIds: form.facilityItemIds,
+          isPet: form.isPet,
+          isParking: form.isParking,
+        }"
+        @update:modelValue="updateForm"
+      />
+    </fieldset>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-// import axios from 'axios'  // 저장 기능 제거되었으므로 axios도 필요 없음
+import { toRefs } from 'vue'
+import OptionChecklist from '../homecreate/OptionChecklist.vue'
 
-const selectedRooms = ref(null)
-const selectedBathrooms = ref(null)
-const selectedDirection = ref(null)
-const details = ref('')
+const props = defineProps({
+  form: {
+    type: Object,
+    required: true,
+  },
+})
+const emit = defineEmits(['update:form'])
 
-const directions = ['동향', '서향', '남향', '북향', '동남향', '동북향', '서남향', '서북향']
+const { form } = toRefs(props)
 
-// 저장 기능 제거됨 (submit 함수 필요 없음)
+const handleChange = (key, value) => {
+  const updatedValue = typeof value === 'number' && isNaN(value) ? 0 : value
+  emit('update:form', {
+    ...props.form,
+    [key]: updatedValue,
+  })
+}
+
+const updateForm = (updatedFields) => {
+  emit('update:form', {
+    ...props.form,
+    ...updatedFields,
+  })
+}
+
+const homeDirectionOptions = [
+  { label: '남향', value: 'S' },
+  { label: '동향', value: 'E' },
+  { label: '서향', value: 'W' },
+  { label: '북향', value: 'N' },
+  { label: '남동향', value: 'SE' },
+  { label: '남서향', value: 'SW' },
+  { label: '북동향', value: 'NE' },
+  { label: '북서향', value: 'NW' },
+]
 </script>
+
+<style scoped>
+input[type='number'].no-spin::-webkit-inner-spin-button,
+input[type='number'].no-spin::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'].no-spin {
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/src/pages/chat/ChatPage.vue b/src/pages/chat/ChatPage.vue
index ef2e4e4..80bffb6 100644
--- a/src/pages/chat/ChatPage.vue
+++ b/src/pages/chat/ChatPage.vue
@@ -1,3 +1,4 @@
+tjt
 <template>
   <ChatLayout v-slot="{ selectedRoom }" :initial-room-id="initialRoomId">
     <ChatRoom v-if="selectedRoom" :room="selectedRoom" />
@@ -6,7 +7,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import ChatLayout from '@/components/chat/layout/ChatLayout.vue'
 import ChatRoom from '@/components/chat/chatRoom/ChatRoom.vue'
diff --git a/src/pages/homes/HomeCreatePage.vue b/src/pages/homes/HomeCreatePage.vue
index 18115d0..636e147 100644
--- a/src/pages/homes/HomeCreatePage.vue
+++ b/src/pages/homes/HomeCreatePage.vue
@@ -2,7 +2,8 @@
   <div class="max-w-4xl mx-auto p-6 space-y-6">
     <StepProgressIndicator :currentStep="currentStep" />
     <component :is="stepComponent" :form="form" @update:form="updateForm" />
-    <div class="flex justify-between mt-10">
+
+    <div class="flex justify-between mt-8">
       <BaseButton v-if="currentStep > 1" @click="goToStep(currentStep - 1)">이전</BaseButton>
       <div class="ml-auto">
         <BaseButton v-if="currentStep < stepComponents.length" @click="goToStep(currentStep + 1)">
@@ -134,6 +135,7 @@ const handleSubmit = async () => {
       landCategory: rawForm.landCategory,
       facilityItemIds: rawForm.facilityItemIds,
       maintenanceFees: rawForm.maintenanceFees,
+      description: rawForm.description,
     }
 
     console.log('📦 최종 제출 데이터 (payload):', payload)
diff --git a/src/pages/homes/HomeDetailsPage.vue b/src/pages/homes/HomeDetailsPage.vue
index bc1a583..90b201b 100644
--- a/src/pages/homes/HomeDetailsPage.vue
+++ b/src/pages/homes/HomeDetailsPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-4xl mx-auto p-6">
+  <div class="max-w-4xl mx-auto p-4 md:p-6">
     <ImageGallery
       v-if="images.length > 0"
       :images="images"
@@ -13,12 +13,12 @@
 
       <TravelMap
         :title="listing.residenceType + ' 매물 위치'"
-        :address="processedAddress"
+        :address="`${listing.addr1} ${listing.addr2}`"
         class="rounded-md shadow-md"
       />
 
-      <div class="w-full flex gap-4">
-        <BaseButton class="w-full" variant="primary" size="lg" @click="goChat">
+      <div class="w-full flex flex-col md:flex-row gap-4">
+        <BaseButton class="w-full" variant="primary" size="lg" @click="goToChat">
           연락하기
         </BaseButton>
         <BaseButton class="w-full" variant="secondary" size="lg" @click="goRiskCheck">
@@ -42,6 +42,7 @@ import BaseButton from '@/components/common/BaseButton.vue'
 import TravelMap from '@/components/travel/TravelMap.vue'
 
 import { fetchListingById } from '@/apis/listing.js'
+import { createChatRoom } from '@/apis/chatApi.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -50,32 +51,43 @@ const id = Number(route.params.no)
 const listing = ref(null)
 const images = ref([])
 const isFavorite = ref(false)
-const processedAddress = ref('')
 
 onMounted(async () => {
   try {
     const data = await fetchListingById(id)
-    console.log('✅ 매물 상세 API 응답:', data)
-
     if (data) {
       listing.value = data
       images.value = data.imageUrls || []
-
-      if (data.addr1) {
-        processedAddress.value = data.addr1
-      } else {
-        processedAddress.value = data.addr2 || '주소정보 없음'
-      }
-
-      console.log('최종 가공된 주소:', processedAddress.value)
     }
   } catch (err) {
     console.error('매물 조회 실패:', err)
   }
 })
 
-function goChat() {
-  router.push('/chat')
+const isCreatingChat = ref(false)
+
+const goToChat = async () => {
+  if (!id) {
+    console.log('채팅방을 만들 수 없습니다 - 매물 ID 없음')
+    alert('매물 정보를 찾을 수 없습니다. 페이지를 새로고침 해주세요.')
+    return
+  }
+
+  isCreatingChat.value = true
+  try {
+    const response = await createChatRoom(id)
+    if (response && response.data) {
+      router.push(`/chat?roomId=${response.data}`)
+    } else {
+      console.error('채팅방 생성 실패: 응답에 chatRoomId가 없습니다', response)
+      alert('채팅방 생성에 실패했습니다. 다시 시도해주세요.')
+    }
+  } catch (error) {
+    console.error('채팅방 생성 오류 상세:', error.response || error)
+    alert('채팅방 생성 중 오류가 발생했습니다.')
+  } finally {
+    isCreatingChat.value = false
+  }
 }
 
 function goRiskCheck() {
diff --git a/src/pages/homes/HomeListPage.vue b/src/pages/homes/HomeListPage.vue
index b3e12ed..6785b9a 100644
--- a/src/pages/homes/HomeListPage.vue
+++ b/src/pages/homes/HomeListPage.vue
@@ -1,10 +1,26 @@
 <template>
-  <div class="flex">
-    <FilterSidebar @filter-change="onFilterChange" />
+  <div class="flex flex-col md:flex-row">
+    <FilterSidebar class="hidden md:block" @filter-change="onFilterChange" />
+
+    <main class="flex-1 p-4 md:p-6 relative">
+      <div class="flex justify-between items-center mb-4 md:hidden">
+        <button
+          @click="toggleFilter"
+          class="bg-gray-200 text-gray-700 font-bold py-2 px-4 rounded-md"
+        >
+          필터
+        </button>
+        <button
+          class="bg-yellow-primary hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded"
+          type="button"
+          @click="goCreatePage"
+        >
+          매물 등록
+        </button>
+      </div>
 
-    <main class="flex-1 p-6 relative">
       <button
-        class="absolute top-4 right-4 bg-yellow-primary hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded z-10"
+        class="hidden md:block absolute top-4 right-4 bg-yellow-primary hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded z-10"
         type="button"
         @click="goCreatePage"
       >
@@ -62,6 +78,29 @@
         </button>
       </div>
     </main>
+
+    <div v-if="showFilter" class="fixed inset-0 bg-white z-50 overflow-y-auto">
+      <div class="p-4 flex justify-between items-center border-b">
+        <h2 class="text-xl font-bold">필터</h2>
+        <button @click="toggleFilter" class="text-gray-500">
+          <svg
+            class="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+        </button>
+      </div>
+      <FilterSidebar @filter-change="handleFilterChangeAndClose" @close="showFilter = false" />
+    </div>
   </div>
 </template>
 
@@ -90,10 +129,22 @@ const filters = ref({
 })
 
 const page = ref(1)
-const size = ref(21) // 초기 로딩 시 모든 매물을 가져오기 위해 충분히 큰 값으로 설정
+const size = ref(21)
 const totalItems = ref(0)
 const totalPages = computed(() => Math.ceil(totalItems.value / size.value))
 
+// 모바일 필터 관련 상태
+const showFilter = ref(false)
+
+function toggleFilter() {
+  showFilter.value = !showFilter.value
+}
+
+function handleFilterChangeAndClose(newFilters) {
+  onFilterChange(newFilters)
+  showFilter.value = false
+}
+
 const selectedGu = computed(() => {
   return filters.value.district !== '전체' && filters.value.district !== undefined
     ? filters.value.district
@@ -146,14 +197,15 @@ async function loadListings() {
           : undefined,
     }
 
-    if (filters.value.dealType === '월세' && filters.value.depositRange > 0) {
+    if (filters.value.dealType === 'WOLSE' && filters.value.depositRange > 0) {
       params.maxDepositPrice = filters.value.depositRange * 10000
     }
-    if (filters.value.dealType === '월세' && filters.value.monthlyRange > 0) {
+    if (filters.value.dealType === 'WOLSE' && filters.value.monthlyRange > 0) {
       params.maxMonthlyRent = filters.value.monthlyRange * 10000
     }
-    if (filters.value.dealType === '전세' && filters.value.leaseRange > 0) {
+    if (filters.value.dealType === 'JEONSE' && filters.value.leaseRange > 0) {
       params.maxDepositPrice = filters.value.leaseRange * 10000
+      delete params.maxMonthlyRent
     }
 
     if (filters.value.direction) {
@@ -179,11 +231,13 @@ async function loadListings() {
       }
     }
 
-    if (filters.value.conditions.includes('반려동물 가능')) {
-      params.isPet = true
-    }
-    if (filters.value.conditions.includes('주차 가능')) {
-      params.isParking = true
+    if (Array.isArray(filters.value.conditions)) {
+      if (filters.value.conditions.includes('반려동물 가능')) {
+        params.isPet = true
+      }
+      if (filters.value.conditions.includes('주차 가능')) {
+        params.isParking = true
+      }
     }
 
     const response = await fetchListings(params)
diff --git a/src/pages/homes/HomeUpdatePage.vue b/src/pages/homes/HomeUpdatePage.vue
index ea1f3dc..73fcf8c 100644
--- a/src/pages/homes/HomeUpdatePage.vue
+++ b/src/pages/homes/HomeUpdatePage.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="max-w-4xl mx-auto p-6 space-y-6">
-    <!-- 상단 타이틀 및 뒤로가기 -->
     <div class="flex items-center space-x-2">
       <router-link to="/homes" class="text-gray-600 hover:text-black">
         <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -10,41 +9,61 @@
       <h1 class="text-xl font-semibold">매물 정보 수정</h1>
     </div>
 
-    <!-- 기본 정보 (읽기 전용) -->
-    <section class="bg-white rounded-xl shadow-md p-6">
-      <BasicInfoForm :listing="listing" readonly />
-    </section>
-
-    <!-- 가격 정보 -->
-    <section class="bg-white rounded-xl shadow-md p-6">
-      <PriceInfoForm v-model="listing" />
-    </section>
-
-    <!-- 방/세부 정보 -->
-    <section class="bg-white rounded-xl shadow-md p-6">
-      <RoomInfoForm v-model="listing" />
-    </section>
-
-    <!-- 시설 정보 -->
-    <section class="bg-white rounded-xl shadow-md p-6">
-      <FacilityInfoForm v-model="listing" />
-    </section>
-
-    <!-- 이미지 업로더 -->
-    <section class="bg-white rounded-xl shadow-md p-6">
-      <ImageUploader v-model="listing.images" />
-      <p class="text-sm text-gray-500 mt-2">※ 최대 10장까지 업로드 가능합니다.</p>
-    </section>
-
-    <!-- 에러 메시지 -->
-    <div v-if="error" class="text-red-500 font-semibold">{{ error }}</div>
-
-    <!-- 저장 및 취소 버튼 -->
-    <div class="grid grid-cols-2 gap-4 h-12">
-      <BaseButton variant="outline" @click="cancelUpdate" :disabled="isLoading">취소</BaseButton>
-      <BaseButton variant="primary" @click="updateListingData" :disabled="isLoading">
-        {{ isLoading ? '저장 중...' : '저장하기' }}
-      </BaseButton>
+    <div v-if="isLoading && !listing.homeId" class="text-center text-gray-500">
+      매물 정보를 불러오는 중입니다...
+    </div>
+
+    <div v-else-if="listing.homeId" class="space-y-6">
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <BasicInfoForm v-model:form="listing" />
+      </section>
+
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <PriceInfoForm v-model:form="listing" />
+      </section>
+
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <RoomInfoForm v-model:form="listing" />
+      </section>
+
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <FacilityInfoForm v-model:form="listing" />
+      </section>
+
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <ImageUploader
+          v-model:images="listing.imageUrls"
+          v-model:newImages="newImages"
+          @image-deleted="handleImageDelete"
+        />
+        <p class="text-sm text-gray-500 mt-2">※ 최대 10장까지 업로드 가능합니다.</p>
+      </section>
+
+      <section class="bg-white rounded-xl shadow-md p-6">
+        <h2 class="text-lg font-semibold mb-2">상세 설명</h2>
+        <textarea
+          v-model="listing.description"
+          :maxlength="1000"
+          placeholder="구조, 특징, 주변 환경 등을 자유롭게 작성해주세요. 1000자 이내 권장"
+          class="w-full border rounded p-3 resize-none min-h-[100px] focus:outline-yellow-500"
+        ></textarea>
+        <div class="text-right text-xs text-gray-500 mt-1">
+          {{ listing.description?.length ?? 0 }}/1000
+        </div>
+      </section>
+
+      <div v-if="error" class="text-red-500 font-semibold">{{ error }}</div>
+
+      <div class="grid grid-cols-2 gap-4 h-12">
+        <BaseButton variant="outline" @click="cancelUpdate" :disabled="isSaving">취소</BaseButton>
+        <BaseButton variant="primary" @click="updateListingData" :disabled="isSaving">
+          {{ isSaving ? '저장 중...' : '저장하기' }}
+        </BaseButton>
+      </div>
+    </div>
+
+    <div v-else class="text-center text-red-500">
+      {{ error }}
     </div>
   </div>
 </template>
@@ -59,7 +78,6 @@ import PriceInfoForm from '@/components/homes/homeupdate/PriceInfoForm.vue'
 import RoomInfoForm from '@/components/homes/homeupdate/RoomInfoForm.vue'
 import FacilityInfoForm from '@/components/homes/homeupdate/FacilityInfoForm.vue'
 import ImageUploader from '@/components/homes/homeupdate/ImageUploader.vue'
-
 import { fetchListingById, updateListing } from '@/apis/listing.js'
 
 const route = useRoute()
@@ -69,13 +87,18 @@ const listingId = route.params.id
 const listing = ref({})
 const originalListing = ref({})
 const isLoading = ref(false)
+const isSaving = ref(false)
 const error = ref(null)
 
+const newImages = ref([])
+const deletedImageIds = ref([])
+
 onMounted(async () => {
   try {
     isLoading.value = true
-    listing.value = await fetchListingById(listingId)
-    originalListing.value = JSON.parse(JSON.stringify(listing.value))
+    const response = await fetchListingById(listingId)
+    listing.value = response
+    originalListing.value = JSON.parse(JSON.stringify(response))
   } catch (err) {
     error.value = '데이터를 불러오는 데 실패했습니다.'
     console.error('조회 실패:', err)
@@ -84,17 +107,78 @@ onMounted(async () => {
   }
 })
 
+const handleImageDelete = (imageId) => {
+  const numericId = parseInt(imageId, 10)
+  if (!isNaN(numericId) && !deletedImageIds.value.includes(numericId)) {
+    deletedImageIds.value.push(numericId)
+  }
+}
+
 const updateListingData = async () => {
   try {
-    isLoading.value = true
+    isSaving.value = true
     error.value = null
-    await updateListing(listingId, listing.value)
+
+    const formData = new FormData()
+
+    // 백엔드 DTO에 존재하는 필드만 FormData에 개별적으로 추가
+    const fieldsToAppend = {
+      addr1: listing.value.addr1,
+      addr2: listing.value.addr2,
+      residenceType: listing.value.residenceType,
+      leaseType: listing.value.leaseType,
+      depositPrice: listing.value.depositPrice ?? 0,
+      monthlyRent: listing.value.monthlyRent ?? 0,
+      maintenanceFee: listing.value.maintenanceFee ?? 0,
+      roomCnt: listing.value.roomCnt ?? 0,
+      supplyArea: listing.value.supplyArea ?? 0.0,
+      exclusiveArea: listing.value.exclusiveArea ?? 0.0,
+      buildDate: listing.value.buildDate,
+      homeFloor: listing.value.homeFloor ?? 0,
+      buildingTotalFloors: listing.value.buildingTotalFloors ?? 0,
+      homeDirection: listing.value.homeDirection,
+      bathroomCnt: listing.value.bathroomCnt ?? 0,
+      isPet: listing.value.isPet,
+      isParking: listing.value.isParking,
+    }
+
+    // 모든 필드를 FormData에 직접 추가
+    for (const key in fieldsToAppend) {
+      if (Object.prototype.hasOwnProperty.call(fieldsToAppend, key)) {
+        const value = fieldsToAppend[key]
+        if (value !== null && typeof value !== 'undefined') {
+          formData.append(key, value)
+        }
+      }
+    }
+
+    // 배열 필드들을 명시적으로 FormData에 추가
+    ;(listing.value.facilityItemIds || []).forEach((id) => {
+      formData.append('facilityItemIds', id)
+    })
+    ;(listing.value.maintenanceFees || []).forEach((feeItem, index) => {
+      formData.append(`maintenanceFees[${index}].maintenanceId`, feeItem.maintenanceId)
+      formData.append(`maintenanceFees[${index}].fee`, feeItem.fee ?? 0)
+    })
+    ;(deletedImageIds.value || []).forEach((id) => {
+      formData.append('deleteImageIds', id)
+    })
+
+    // 파일 필드 추가
+    if (newImages.value && newImages.value.length > 0) {
+      newImages.value.forEach((img) => {
+        formData.append('newImages', img.file)
+      })
+    }
+
+    await updateListing(listingId, formData)
     router.push('/homes')
   } catch (err) {
-    error.value = '저장 중 오류가 발생했습니다.'
+    const errorMessage = err.response?.data?.message || '저장 중 오류가 발생했습니다.'
+    error.value = errorMessage
     console.error('저장 실패:', err)
   } finally {
-    isLoading.value = false
+    isSaving.value = false
   }
 }