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

feat : try to show information of houseinfos

Author: femmefatalehaein

package-lock.json

@@ -33,6 +33,7 @@
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",
     "postcss": "^8.4.49",
+    "sass": "^1.81.0",
     "sass-embedded": "^1.81.0",
     "tailwindcss": "^3.4.15",
     "vite": "^5.4.11",

package.json

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+import axios from 'axios';
+
+export const useHouseInfoStore = defineStore('houseInfo', {
+  state: () => ({
+    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);
+        }
+      } catch (error) {
+        console.log('데이터를 가져오는데 실패했습니다.', error);
+      }
+    },
+  },
+});

src/Component/MapView.vue

@@ -8,21 +8,21 @@
       <!-- 내용 섹션 -->
       <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">
-          아파트</span>
+          {{ buildingUse }}</span>
         <h5 class="text-lg font-bold text-gray-800 pl-1">아파트 이름</h5>
         <div class="pl-1">
           <span class="text-sm text-gray-600">
-            동작구</span>
+            {{ districtName }}</span>
           <span class="text-sm text-gray-600">
-            동자동</span>
+            {{ legalName }}</span>
         </div>
           <div class="pl-1">
             <span class="text-md">최소 </span>
-            <span class="text-sm">00</span>
+            <span class="text-sm">{{ minPropertyPrice }}</span>
             <span class="text-md">만원</span>
             <span class="text-md"> - </span>
             <span class="text-md">최대 </span>
-            <span class="text-sm">00</span>
+            <span class="text-sm">{{ maxPropertyPrice }}</span>
             <span class="text-md">만원</span>
           </div>
         <!-- 버튼 -->
@@ -31,32 +31,44 @@
   </div>
 </template>
 
-<script>
-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");
-    },
-  },
-};
+<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,
+  buildingName: String,
+  districtName: String,
+  legalName: String,
+  minPropertyPrice: Number, // double → Number
+  maxPropertyPrice: Number  // double → Number
+});
+
 </script>
 
 <style scoped>

src/stores/mapCard.js

@@ -28,6 +28,7 @@ const goToHome = () => {
   router.push({ name: 'home' });
 };
 
+
 const goToLogin = () => {
   console.log('Login button clicked');
   router.push({ name: 'login' });

src/views/CardView.vue

@@ -1,17 +1,3 @@
-<script setup>
-import { KakaoMap } from 'vue3-kakao-maps';
-import CardView from './CardView.vue';
-//import RangeSlider from '@/Component/RangeSlider.vue';
-
-const coordinate = {
-  lat: 37.566826,
-  lng: 126.9786567,
-};
-
-// 필터 버튼 목록
-const filters = ['가격', '면적', '사용승인일', '층수'];
-</script>
-
 <template>
   <div class="flex flex-row items-center w-full h-[100vh] pt-20">
     <!-- 버튼 영역 -->
@@ -75,34 +61,58 @@ const filters = ['가격', '면적', '사용승인일', '층수'];
           </div>
           <!-- 목록 영역 추가할 수 있습니다 -->
           <div class="p-2">
-            <CardView description="hi" @click="showFrame = !showFrame"></CardView>
-            <CardView description="hi"></CardView>
 
-            <!-- slide 효과 열리는 프레임 -->
-            <div v-show="showFrame" class="absolute top-40 bottom-0  left-[460px] w-72 bg-blue-500 h-72 p-1 shadow-lg rounded-md z-10
-            transition-all duration-2000 ease-in-out" :style="{'left': showFrame ? 'translateX(500px)' : 'translateX(0)'}">
-            <div class="bg-white w-full h-full"> 프레임입니다만 </div>
-          </div>
+            <div v-if="houseInfosLoaded">
+              <div v-for="(house, index) in houseInfos.data" :key="index">
+                <p>{{ house.name }}</p>
+                <p>{{ house.price }}</p>
+              </div>
+            </div>
+
+            <!-- 데이터가 로딩 중일 때 표시할 로딩 화면 -->
+            <div v-else>
+              <p>로딩 중...</p>
+            </div>
 
           </div>
         </div>
 
         <!-- 지도 표시 영역 -->
         <div class="relative w-full bg-purple-100">
           <KakaoMap :lat="coordinate.lat" :lng="coordinate.lng" width="100%" height="100%"/>
-        <!-- 이동해야하는 자리 -->
         </div>
       </div>
 
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      showFrame: false, // Frame의 표시 여부를 관리하는 상태 변수
-    };
-  },
+
+<script setup>
+import { KakaoMap } from 'vue3-kakao-maps';
+import { ref, onMounted } from 'vue';
+import { useHouseInfoStore } from '@/stores/mapCard'; // Pinia store 가져오기
+
+const coordinate = {
+  lat: 37.566826,
+  lng: 126.9786567,
+};
+
+// 필터 버튼 목록
+const filters = ['가격', '면적', '사용승인일', '층수'];
+
+// Pinia store 사용
+const houseInfoStore = useHouseInfoStore();
+
+// 데이터를 가져오는 함수
+const fetchData = async (type) => {
+  await houseInfoStore.fetchHouseInfo(type); // API 호출하여 데이터 가져오기
+  //console.log(houseInfoStore.houseInfos.data); // store의 houseInfos 상태 출력
 };
+
+onMounted(async () => {
+  await fetchData('아파트'); // 데이터가 로딩된 후 실행
+});
+
+// store에서 houseInfos 가져오기
+const houseInfos = houseInfoStore.houseInfos;
 </script>

src/views/HeaderView.vue

@@ -1,22 +1,21 @@
-
 module.exports = {
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-   darkMode: false, // or 'media' or 'class'
-   theme: {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // 'purge' 대신 'content' 사용
+  darkMode: 'media', // 'false' 대신 'media'로 설정 (또는 이 줄을 아예 제거 가능)
+  theme: {
     extend: {
       fontFamily: {
-	      Pretendard: ["Pretendard"],
+        Pretendard: ["Pretendard"],
         PretendardRegular: ["Pretendard Regular"],
         PretendardSemiBold: ["Pretendard SemiBold"],
         PretendardBold: ["Pretendard Bold"],
-	    },
+      },
       fontSize: {
         'xxs': '0.65rem', // 10px
       },
     },
   },
-   variants: {
-     extend: {},
-   },
-   plugins: [],
- }
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

src/views/MapView.vue

@@ -8,7 +8,17 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
-    port: 3000,  // 원하는 포트 번호로 변경
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080', // 첫 번째 서버 주소
+        changeOrigin: true,
+        secure: false,  // https 사용하지 않는 경우 false로 설정
+        rewrite: (path) => path.replace(/^\/api/, ''), // 프록시 경로를 적절히 수정
+      },
+      // 추가적인 프록시 설정이 필요하면 아래와 같이 작성할 수 있습니다.
+  
+    },
   },
   plugins: [
     vue(),
@@ -17,7 +27,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
-  }
+  },
 })