From 18fa775fe31168c93b21714a40aae2c66bd30ae0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B8=ED=9D=AC?= <lolry0207@sookmyung.ac.kr>
Date: Wed, 21 Feb 2024 16:20:01 +0900
Subject: [PATCH] Add Id Check Button

---
 src/components/Modal.tsx | 68 ++++++++++++++++++++--------------------
 src/pages/Signuppage.tsx |  2 +-
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 9de7448..00a5def 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -41,7 +41,7 @@ const ModalContainer = styled.div`
     display: flex;
     flex-direction: column;
     border-radius: 5px;
-    padding: 10px 15px;
+    padding: 15px 15px;
     border: 1px solid white;
     background-color: white;
     position: relative;
@@ -77,8 +77,8 @@ const WeatherContainerStyle = styled.div`
     margin: 10px
 `
 
-const WeatherDivStyle = styled.div`
-    padding: 10px 0px 0px 0px;
+const InforDivStyle = styled.div`
+    padding: 8px 0px 0px 0px;
 `
 
 const ImageStyle = styled.div<ImageStyleProps>`
@@ -91,41 +91,41 @@ const ImageStyle = styled.div<ImageStyleProps>`
     background-size: cover;
 `
 
-
 const Modal = ({ title, latlng, onClick }: ModalProps) =>{
     const [weatherData, setWeatherData] = useState<any>(null);
-    const [camnum, setCamnum] = useState<number>(2);
     const [date, setDate] = useState<string>("");
     const [time, setTime] = useState<string>("");
     const [percentage, setPercentage] = useState<string>("");
     const [imgurl, setImgurl] = useState<string>("");
   
-    useEffect(() => {
-        if(latlng){
-            if(latlng.lat() ===  37.5455){ 
-                setCamnum(1);
-            }
-        }
-    }, [latlng]);
-
     useEffect(() => {
         if(latlng){
             fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latlng.lat()}&lon=${latlng.lng()}&appid=${import.meta.env.VITE_WEATHER_API_KEY}`)
             .then(response => response.json())
             .then(data => setWeatherData(data))
             .catch(error => console.error('Error:', error));
-        }
 
-        axios.post(`http://localhost:8080/api/fire-Info/${camnum}`)
-            .then(response => {
-            console.log("카메라다" + camnum);
-            console.log(response.data)
-            setImgurl(response.data);
-        })
-        .catch(error => {
-            console.error('Error:', error);
-        });
-    }, [camnum])
+            if(latlng.lat() ===  37.5455){
+                axios.get("http://localhost:8080/api/fire-Info/cam1")
+                .then(response => {
+                    setImgurl(response.data);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+            }
+
+            else{
+                axios.get("http://localhost:8080/api/fire-Info/cam2")
+                .then(response => {
+                    setImgurl(response.data);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+            }
+        }
+    }, [latlng]);
 
     useEffect(() => {
         setDate(imgurl.substring(68, 76))
@@ -164,19 +164,19 @@ const Modal = ({ title, latlng, onClick }: ModalProps) =>{
                 )}
                 {weatherData && (
                     <WeatherContainerStyle>
-                        <WeatherDivStyle>Current temperature : {(weatherData.main.temp - 273.15).toFixed(2)} °C</WeatherDivStyle>
-                        <WeatherDivStyle>Weather Information : {weatherData.weather[0].main} - {weatherData.weather[0].description}</WeatherDivStyle>
-                        <WeatherDivStyle>Humidity : {weatherData.main.humidity} %</WeatherDivStyle>
-                        <WeatherDivStyle>Wind direction : {getWindDirection(weatherData.wind.deg)}</WeatherDivStyle>
-                        <WeatherDivStyle>Wind Speed : {weatherData.wind.speed} m/s</WeatherDivStyle>
-                        <WeatherDivStyle>Cloud : {weatherData.clouds.all} %</WeatherDivStyle>
+                        <InforDivStyle>Current temperature : {(weatherData.main.temp - 273.15).toFixed(2)} °C</InforDivStyle>
+                        <InforDivStyle>Weather Information : {weatherData.weather[0].main} - {weatherData.weather[0].description}</InforDivStyle>
+                        <InforDivStyle>Humidity : {weatherData.main.humidity} %</InforDivStyle>
+                        <InforDivStyle>Wind direction : {getWindDirection(weatherData.wind.deg)}</InforDivStyle>
+                        <InforDivStyle>Wind Speed : {weatherData.wind.speed} m/s</InforDivStyle>
+                        <InforDivStyle>Cloud : {weatherData.clouds.all} %</InforDivStyle>
                     </WeatherContainerStyle>
                 )}
 
-                <ImageStyle url={imgurl}>.</ImageStyle>
-                <div>Date : {date}</div>
-                <div>Time : {time}</div>
-                <div>Percentage : {percentage} %</div>
+                <ImageStyle url={imgurl} />
+                <InforDivStyle>Date : {date}</InforDivStyle>
+                <InforDivStyle>Time : {time}</InforDivStyle>
+                <InforDivStyle>Percentage : {percentage} %</InforDivStyle>
                 
             </InfoContainerStyle>
         </ModalContainer>
diff --git a/src/pages/Signuppage.tsx b/src/pages/Signuppage.tsx
index d6bfa81..f46f410 100644
--- a/src/pages/Signuppage.tsx
+++ b/src/pages/Signuppage.tsx
@@ -108,7 +108,7 @@ const Signup = () => {
           phoneNo: phonenumber
         };
 
-        axios.post('http://localhost:8080/api/join', user)
+        axios.post('http://localhost:8080/api/join', user, { withCredentials: true})
         .then(response => {
             console.log(response.data);
             navigate("/") // 회원가입 후 페이지 이동