[REFACTOR] 매물 상세 페이지 상세주소 추가

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) {

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>

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>

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"

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"