Merge pull request #24 from full-ownership/feature/intro

feat : expose map info

Author: femmefatalehaein

.env

@@ -0,0 +1 @@
+BASE_URL=http://localhost:8080/api

src/stores/mapCard.js

@@ -1,25 +1,20 @@
 import { defineStore } from 'pinia';
 import axios from 'axios';
+const BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 export const useHouseInfoStore = defineStore('houseInfo', {
   state: () => ({
-    houseInfos: { data: [] }, // 초기 상태 설정
+    houseInfos: { data: [] } ,
   }),
   actions: {
     async fetchHouseInfo(type) {
       try {
+ 
         const response = await axios.get(`http://localhost:8080/api/houseinfos/${type}`);
 
-        // 응답이 정상적으로 왔는지 확인
-        if (response.data && Array.isArray(response.data) && response.data.length > 0) {
-          this.houseInfos = response.data;
-          //console.log(this.houseInfos.data[0].buildingUse); // 데이터가 존재할 때만 접근
-          
-          const valueArray = this.houseInfos.data.map(item => item.value);
-          console.log(valueArray);
-        } else {
-          console.error('빈 데이터 또는 잘못된 데이터 구조:', response.data);
-        }
+        this.houseInfos.data = response.data.data;
+        
+         //아파트 출력
       } catch (error) {
         console.log('데이터를 가져오는데 실패했습니다.', error);
       }

src/views/CardView.vue

@@ -9,7 +9,7 @@
       <div class="ml-2">
         <span class="inline-flex mb-1 items-center text-xxs w-auto text-gray-600 border-2 border-gray-200 bg-white rounded-lg px-2 text-center">
           {{ buildingUse }}</span>
-        <h5 class="text-lg font-bold text-gray-800 pl-1">아파트 이름</h5>
+        <h5 class="text-lg font-bold text-gray-800 pl-1">{{ buildingName }}</h5>
         <div class="pl-1">
           <span class="text-sm text-gray-600">
             {{ districtName }}</span>
@@ -21,10 +21,11 @@
             <span class="text-sm">{{ minPropertyPrice }}</span>
             <span class="text-md">만원</span>
             <span class="text-md"> - </span>
-            <span class="text-md">최대 </span>
+            <span class="text-md">최대</span>
             <span class="text-sm">{{ maxPropertyPrice }}</span>
             <span class="text-md">만원</span>
           </div>
+          
         <!-- 버튼 -->
       </div>
     </div>
@@ -33,32 +34,6 @@
 
 <script setup>
 
-// export default {
-//   props: {
-//     image: {
-//       type: String,
-//       required: true,
-//     },
-//     title: {
-//       type: String,
-//       required: true,
-//     },
-//     description: {
-//       type: String,
-//       required: true,
-//     },
-//     buttonText: {
-//       type: String,
-//       default: "Click Me",
-//     },
-//   },
-//   methods: {
-//     onButtonClick() {
-//       this.$emit("button-click");
-//     },
-//   },
-// };
-
 defineProps({
   id: Number, // int → Number
   buildingUse: String,

src/views/MapView.vue

@@ -60,19 +60,26 @@
             <FilterButton></FilterButton>
           </div>
           <!-- 목록 영역 추가할 수 있습니다 -->
-          <div class="p-2">
+          <div class="p-2 overflow-y-auto">
 
-            <div v-if="houseInfosLoaded">
+            <!--<div v-if="houseInfosLoaded">-->
               <div v-for="(house, index) in houseInfos.data" :key="index">
-                <p>{{ house.name }}</p>
-                <p>{{ house.price }}</p>
+
+                <CardView
+                  :id="house.id"
+                  :buildingUse="house.buildingUse"
+                  :buildingName="house.buildingName"
+                  :districtName="house.districtName"
+                  :legalName="house.legalName"
+                  :minPropertyPrice="house.minPropertyPrice"
+                  :maxPropertyPrice="house.maxPropertyPrice"
+                />
+        
               </div>
-            </div>
+            <!--</div>-->
 
             <!-- 데이터가 로딩 중일 때 표시할 로딩 화면 -->
-            <div v-else>
-              <p>로딩 중...</p>
-            </div>
+        
 
           </div>
         </div>
@@ -91,6 +98,7 @@
 import { KakaoMap } from 'vue3-kakao-maps';
 import { ref, onMounted } from 'vue';
 import { useHouseInfoStore } from '@/stores/mapCard'; // Pinia store 가져오기
+import CardView from './CardView.vue';
 
 const coordinate = {
   lat: 37.566826,
@@ -115,4 +123,5 @@ onMounted(async () => {
 
 // store에서 houseInfos 가져오기
 const houseInfos = houseInfoStore.houseInfos;
+
 </script>