마커 클릭시 시군구 월평균 전월세

sesac-mini2 · Jan 6, 2025 · dd9c717 · dd9c717
1 parent 28c14fa
commit dd9c717
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 24 deletions.
diff --git a/src/main/map/src/App.js b/src/main/map/src/App.js
@@ -17,6 +17,7 @@ function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [nickname, setNickname] = useState('');
   const [targetUmd, setTargetUmd] = useState(null);
+  const [targetUmdSggcd, setTargetUmdSggcd] = useState(null);
   const [isShowUmdModal, setIsShowUmdModal] = useState(false);
   const [isAreaModalOpen, setIsAreaModalOpen] = useState(false);
   const [startYearMonth, setStartYearMonth] = useState('202101');
@@ -34,8 +35,9 @@ function App() {
     setIsShowUmdModal(false);
   }
 
-  const showUmdModal = (regioncdId) => {
+  const showUmdModal = (regioncdId, sggCd) => {
     setTargetUmd(regioncdId);
+    setTargetUmdSggcd(sggCd);
     setIsShowUmdModal(true);
   }
 
@@ -156,7 +158,7 @@ function App() {
               </div>
             </div>
             <div className="position-relative">
-              <UmdModal isAuthenticated={isAuthenticated} targetUmd={targetUmd} isShowUmdModal={isShowUmdModal} closeUmdModal={closeUmdModal}
+              <UmdModal isAuthenticated={isAuthenticated} targetUmd={targetUmd} targetUmdSggcd={targetUmdSggcd} isShowUmdModal={isShowUmdModal} closeUmdModal={closeUmdModal}
                 startYearMonth={startYearMonth}
                 endYearMonth={endYearMonth}
                 selectedType={selectedType}

diff --git a/src/main/map/src/MapContainer.js b/src/main/map/src/MapContainer.js
@@ -49,9 +49,9 @@ const MapContainer = ({
     }
   };
 
-  const handleMouseUp = (regionId) => {
+  const handleMouseUp = (regionId, sggCd) => {
     if (!isDraggingRef.current) {
-      onClickOverlay(regionId);  // 드래깅 상태가 아니면 클릭 이벤트 실행
+      onClickOverlay(regionId, sggCd);  // 드래깅 상태가 아니면 클릭 이벤트 실행
     }
     isMouseDownRef.current = false;
     isDraggingRef.current = false;
@@ -147,7 +147,7 @@ const MapContainer = ({
 
             content.onmousedown = handleMouseDown;
             content.onmousemove = handleMouseMove;
-            content.onmouseup = () => handleMouseUp(region.id);
+            content.onmouseup = () => handleMouseUp(region.id, region.sidoCd + region.sggCd);
 
             const customOverlay = new window.kakao.maps.CustomOverlay({
               map: map,

diff --git a/src/main/map/src/components/Graph/Scrap.js b/src/main/map/src/components/Graph/Scrap.js
@@ -2,16 +2,16 @@ import axios from 'axios';
 import React, { useState, useEffect, useRef } from 'react';
 import { select, scaleBand, axisBottom, scaleLinear, axisLeft, min, max } from 'd3';
 
-function Scarp() {
+function Scarp({targetUmdSggcd, startYearMonth, endYearMonth}) {
     const [data, setData] = useState([]);
 
-    const [sggcds, setSggcds] = useState(['11590', '11305']);
-    const [startYearMonth, setStartYearMonth] = useState('202301');
-    const [endYearMonth, setEndYearMonth] = useState('202307');
+    // const [sggcds, setSggcds] = useState(['11590', '11305']);
+    // const [startYearMonth, setStartYearMonth] = useState('202301');
+    // const [endYearMonth, setEndYearMonth] = useState('202307');
 
     const ref = useRef();
 
-    const containerWidth = 500;
+    const containerWidth = 800;
     const containerHeight = 500;
 
     const transitionDuration = 500;
@@ -63,6 +63,10 @@ function Scarp() {
         )
         .attr("class", "x-axis")
         .attr("transform", `translate(0,${height - margin.bottom})`)
+        .selectAll("text") // x축 텍스트 선택
+        .attr("transform", "rotate(-45)")
+        .style("text-anchor", "end") // 텍스트 정렬 (끝쪽 정렬)
+        .attr("dx", "-0.5em") // x축 텍스트의 위치를 약간 조정
 
       // y축
       const yScale = scaleLinear()
@@ -114,8 +118,11 @@ function Scarp() {
 
     // 초기 데이터 로드
     useEffect(() => {
-      getData(['11590', '11305'], '202307', '202312');
-    }, []);
+      if(!targetUmdSggcd) {
+        return;
+      }
+      getData([targetUmdSggcd], startYearMonth, endYearMonth);
+    }, [targetUmdSggcd, startYearMonth, endYearMonth]);
 
     return (
         <div>
@@ -125,11 +132,11 @@ function Scarp() {
                 <g className="mybar" />
             </svg><br />
 
-            시군구코드: <input type="text" value={sggcds} onChange={e => setSggcds(e.target.value)} /><br />
+            {/* 시군구코드: <input type="text" value={sggcds} onChange={e => setSggcds(e.target.value)} /><br />
             시작년월: <input type="number" value={startYearMonth} onChange={e => setStartYearMonth(e.target.value)} /><br />
             끝년월: <input type="number" value={endYearMonth} onChange={e => setEndYearMonth(e.target.value)} />
 
-            <button onClick={() => getData(sggcds, startYearMonth, endYearMonth)}>업데이트</button>
+            <button onClick={() => getData(sggcds, startYearMonth, endYearMonth)}>업데이트</button> */}
         </div>
     );
 }

diff --git a/src/main/map/src/components/Graph/UmdGraph.js b/src/main/map/src/components/Graph/UmdGraph.js
@@ -15,7 +15,6 @@ function UmdGraph({ region,
     maxArea
 }) {
     const [data, setData] = useState([{"umdnm": "", "yearMonth": "", "avgMonthlyRent": 0, "avgDeposit": 0, "count": 0}]);
-    const [testNum, setTestNum] = useState(0);
 
     const ref = useRef();
 
@@ -29,6 +28,7 @@ function UmdGraph({ region,
     const avgDepositColor = '#1372a2';
 
     function getData(sggcd, name) {
+        if(!sggcd) return;
         axios.get(`/api/${selectedType}/transition`, {
             params: {
                 sggcd: sggcd,
@@ -431,11 +431,6 @@ function UmdGraph({ region,
                 <g className="y-axisR" />
                 <text className="nodata" x="300" y="230" text-anchor="start" fill="black" opacity="1" font-size="20px">데이터가 없습니다.</text>
             </svg><br />
-
-            <button onClick={() => {
-                setTestNum((testNum + 1) % 3);
-                getData(testNum);
-            }}>업데이트</button>
         </div>
     );
 }

diff --git a/src/main/map/src/components/UmdModal.js b/src/main/map/src/components/UmdModal.js
@@ -4,9 +4,9 @@ import ScrapButton from "./ScrapButton";
 import Scrap from './Graph/Scrap';
 import UmdGraph from './Graph/UmdGraph';
 
-const UmdModal = ({ isAuthenticated, targetUmd, isShowUmdModal, closeUmdModal,
-  startYearMonth,
-  endYearMonth,
+const UmdModal = ({ isAuthenticated, targetUmd, targetUmdSggcd, isShowUmdModal, closeUmdModal,
+  startYearMonth, 
+  endYearMonth, 
   selectedType,
   rentType,
   minBuildYear,
@@ -42,6 +42,7 @@ const UmdModal = ({ isAuthenticated, targetUmd, isShowUmdModal, closeUmdModal,
   const [region, setRegion] = useState({ cd: '', name: '' });
 
   useEffect(() => {
+    if(!targetUmd) return;
     axios.get(`/api/regioncd/id/${targetUmd}`)
       .then((res) => {
         setRegion({
@@ -64,7 +65,10 @@ const UmdModal = ({ isAuthenticated, targetUmd, isShowUmdModal, closeUmdModal,
           </div>
           <button type="button" className="btn-close" aria-label="Close" style={closeButtonStyle} onClick={closeUmdModal}></button>
         </div>
-        <Scrap />
+        <Scrap targetUmdSggcd={targetUmdSggcd} 
+          startYearMonth={startYearMonth}
+          endYearMonth={endYearMonth}
+          />
         <UmdGraph region={region}
           startYearMonth={startYearMonth}
           endYearMonth={endYearMonth}