Merge pull request #19 from kdt-8-4/develop

[Feat]weather_req(#10)
kdt-8-4 · Nov 20, 2023 · 62e2eda · 62e2eda
2 parents 6d0cb7f + 1069d1a
commit 62e2eda
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 32 deletions.
diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+import Menubar from "@/component/MenuBar"
+import WeatherBar from "@/component/WeatherBar"
+
+export default function Feed(){
+
+
+
+    return(<>
+        <div className="container">
+            <div id="search"></div>
+            <WeatherBar />
+            <div id="category"></div>
+            <div id="feed_img">
+
+            </div>
+
+        </div>
+    </>)
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Link } from "@mui/icons-material";
 import "../../style/login.scss";
 import CloseIcon from "@mui/icons-material/Close";

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
@@ -3,6 +3,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import "../../style/register.scss";
 import { useState } from "react";
 import InputBar from "@/component/InputBar";
+import Menubar from "@/component/MenuBar";
 
 export default function Register(): JSX.Element {
   const [email, setEmail] = useState("");
@@ -98,7 +99,10 @@ export default function Register(): JSX.Element {
           </button>
         </form>
       </section>
-      <footer>옷늘날씨</footer>
+      <footer>
+        <span>옷늘날씨</span>
+        <Menubar />
+      </footer>
     </div>
   );
 }
diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+import Menubar from "@/component/MenuBar";
+import WeatherBar from "@/component/WeatherBar";
+import CloseIcon from "@mui/icons-material/Close";
+import "../../style/upload.scss";
+
+export default function Upload(): JSX.Element {
+  return (
+    <div className="container">
+      <header>
+        <div className="top">
+          <CloseIcon id="x" />
+          <h3>등록하기</h3>
+          <span>완료</span>
+        </div>
+        <WeatherBar />
+      </header>
+      <section className="main"></section>
+
+      <footer>
+        <Menubar />
+      </footer>
+    </div>
+  );
+}
diff --git a/src/component/MenuBar.tsx b/src/component/MenuBar.tsx
@@ -1,30 +1,42 @@
+import { useRouter } from "next/navigation";
 import "../style/menubar.scss";
 import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
 import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
 import CheckroomOutlinedIcon from "@mui/icons-material/CheckroomOutlined";
 import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
 
 export default function Menubar() {
+  const router = useRouter(); // useRouter 훅을 사용하여 router 객체 가져오기
+  const goto_home = () => {
+    router.push("/"); // '/'로 페이지 이동
+  };
+  const goto_feed = () => {
+    router.push("/feed"); // '/feed'로 페이지 이동
+  };
+  const goto_upload = () => {
+    router.push("/upload"); // '/upload'로 페이지 이동
+  };
+  const goto_myPage = () => {
+    router.push("/mypage"); // '/mypage'로 페이지 이동
+  };
   return (
-    <>
-      <footer>
-        <div className="menu_box">
-          <HomeOutlinedIcon className="menu_icon" />
-          <span>홈</span>
-        </div>
-        <div className="menu_box">
-          <CheckroomOutlinedIcon className="menu_icon" />
-          <span>구경</span>
-        </div>
-        <div className="menu_box">
-          <AddBoxOutlinedIcon className="menu_icon" />
-          <span>업로드</span>
-        </div>
-        <div className="menu_box">
-          <PersonOutlineOutlinedIcon className="menu_icon" />
-          <span>마이페이지</span>
-        </div>
-      </footer>
-    </>
+    <div className="menubar">
+      <div className="menu_box" onClick={goto_home}>
+        <HomeOutlinedIcon className="menu_icon" />
+        <span>홈</span>
+      </div>
+      <div className="menu_box" onClick={goto_feed}>
+        <CheckroomOutlinedIcon className="menu_icon" />
+        <span>구경</span>
+      </div>
+      <div className="menu_box" onClick={goto_upload}>
+        <AddBoxOutlinedIcon className="menu_icon" />
+        <span>업로드</span>
+      </div>
+      <div className="menu_box" onClick={goto_myPage}>
+        <PersonOutlineOutlinedIcon className="menu_icon" />
+        <span>마이페이지</span>
+      </div>
+    </div>
   );
 }
diff --git a/src/component/WeatherBar.tsx b/src/component/WeatherBar.tsx
@@ -1,7 +1,87 @@
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import "../style/weatherBar.scss";
+import React from "react";
 
-export default function WeatherBar() {
+// interface WeatherData {
+//   main:{
+//     temp:number;
+//     temp_max:
+//   };
+//   weather:{
+//     main: string;
+//   }[];
+// }
+
+// interface Address {
+//   documents: {
+//     address: {
+//       region_1depth_name: string;
+//       region_2depth_name: string;
+//     };
+//   }[];
+// }
+
+
+const WeatherBar:React.FC = () => {
+  const API_KEY = "fa3eba61f243af3e8e69086462763172";
+  const kakao_API_KEY = "3a6c3035c801405eaa71ebb9dc7f474b";
+  let temp: string | undefined;
+  const [usetemp, setTemp] = useState<string | undefined>();
+
+  const [max, setMax] = useState<string | undefined>();
+  const [min, setMin] = useState<string | undefined>();
+  const [weat, setWeat] = useState<string | undefined>();
+  const [address, setAddress] = useState<string | undefined>();
+
+  useEffect(() => {
+    // 위치 정보를 비동기적으로 가져오는 함수
+    const getLocation = async () => {
+        try {
+          const position = await new Promise<GeolocationPosition>(
+            (resolve, reject) => {
+              navigator.geolocation.getCurrentPosition(resolve, reject);
+            }
+          );
+
+          const latitude = position.coords.latitude;
+          const longitude = position.coords.longitude;
+
+          const weatherResponse = await fetch(
+            `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
+          );
+          const weatherData = await weatherResponse.json();
+          temp = weatherData.main.temp.toFixed(1);
+          setTemp(temp);
+          // max = weatherData.main.temp_max.toFixed(1);
+          setMax(weatherData.main.temp_max.toFixed(1));
+          setMin(weatherData.main.temp_min.toFixed(1));
+          setWeat(weatherData.weather[0].main);
+          // console.log(`온도 : ${temp} ,최고온도 ${max},최저온도 ${min}, 날씨 : ${weat}`);
+
+          const addressResponse = await fetch(
+            `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${longitude}&y=${latitude}`,
+            {
+              method: "GET",
+              headers: { Authorization: `KakaoAK ${kakao_API_KEY}` },
+            }
+          );
+          const addressData = await addressResponse.json();
+          setAddress(
+            addressData.documents[0].address.region_1depth_name +
+            " " +
+            addressData.documents[0].address.region_2depth_name
+          );
+
+          console.log(address);
+        } catch (error) {
+          console.error("Error getting location:", error);
+        }
+      };
+
+      getLocation(); // getLocation 함수 실행
+    }, []); 
+
   return (
     <div id="container">
       <div id="weather">
@@ -13,13 +93,15 @@ export default function WeatherBar() {
           height={24}
           priority
         />
-        <span>7℃</span>
+        <span> {usetemp} ℃</span>
       </div>
       <div id="maxmin">
-        <span>최고 10℃&nbsp;</span>
+        <span>최고 {max}℃&nbsp;</span>
         &nbsp;
-        <span>최저 0℃</span>
+        <span>최저 {min}℃</span>
       </div>
     </div>
   );
 }
+
+export default WeatherBar;
diff --git a/src/style/_util.scss b/src/style/_util.scss
@@ -50,8 +50,8 @@ $color-register: #7995f9;
   cursor: pointer;
 }
 
-@mixin weatherbar($width, $height, $fontsize) {
-  width: $width;
+@mixin weatherbar($height, $fontsize) {
+  width: 100%;
   height: $height;
   display: flex;
   justify-content: space-between;

diff --git a/src/style/menubar.scss b/src/style/menubar.scss
@@ -1,4 +1,4 @@
-footer {
+.menubar {
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -10,6 +10,7 @@ footer {
     display: flex;
     flex-direction: column;
     align-items: center;
+    cursor: pointer;
 
     .menu_icon {
       width: 30px;

diff --git a/src/style/register.scss b/src/style/register.scss
@@ -49,7 +49,12 @@ form {
 
 footer {
   text-align: center;
-  margin: 1vh 0;
+  width: 100%;
+  height: 100px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 // 모바일

diff --git a/src/style/upload.scss b/src/style/upload.scss
@@ -0,0 +1,28 @@
+@import "_util.scss";
+
+.container {
+  font-family: "EASTARJET-Medium";
+  font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header {
+  width: 100%;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+
+footer {
+  width: 100%;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 768px) {
+  .container {
+    width: 100%;
+  }
+}
diff --git a/src/style/weatherBar.scss b/src/style/weatherBar.scss
@@ -15,18 +15,18 @@
 
 @media only screen and (min-width: 320px) and (max-width: 768px) {
   #container {
-    @include weatherbar(85%, 40px, 15px);
+    @include weatherbar(40px, 15px);
   }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   #container {
-    @include weatherbar(60%, 50px, 20px);
+    @include weatherbar(50px, 20px);
   }
 }
 
 @media only screen and (min-width: 1024px) {
   #container {
-    @include weatherbar(60%, 50px, 20px);
+    @include weatherbar(50px, 20px);
   }
 }