Merge pull request #54 from LikeLionHGU/hwan_#52/지도-중심-기준-마크-찍기

Hwan #52/지도 중심 기준 마크 찍기
LikeLionHGU · Jun 7, 2024 · 34af81c · 34af81c
2 parents a7cfbf8 + fe44020
commit 34af81c
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 36 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=bc826944272a7bea731a3ed59cfd0231"
     ></script>
-    <title>React App</title>
+    <title>Hot Spot</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -3,6 +3,9 @@ import Logo from "../../imgs/eng_logo.svg";
 
 import "../../assets/font.css";
 import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { detailState } from "../../atom";
+import { useRecoilState } from "recoil";
 
 const StyleContainer = styled.div`
   width: 100%;
@@ -16,14 +19,15 @@ const StyleContainer = styled.div`
 
   display: flex;
   align-items: center;
+  justify-content: center;
 `;
 
 const TitleContainer = styled.div`
-  display: flex;
-  justify-content: space-around;
   /* display: ${({ isResult }) => (isResult ? "block" : "flex")}; */
   /* margin-left: ${({ isResult }) => (isResult ? "228px" : "0")}; */
-  width: 100%;
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
 `;
 
 const EngLogo = styled.img`
@@ -68,38 +72,64 @@ const LoginBtn = styled.button`
 
 function getTitle(isHeader) {
   switch (isHeader) {
-    case ("test", "ramentest"):
+    case "test":
+      return <Title>맵기 레벨 검사</Title>;
+    case "ramentest":
       return <Title>맵기 레벨 검사</Title>;
-    default:
-      return null;
-  }
-}
-
-function getButton(isHeader) {
-  switch (isHeader) {
-    case ("test", "ramentest"):
-      return (
-        // <Link to="/test">
-        <ReturnBtn>처음으로</ReturnBtn>
-        // </Link>
-      );
-    case "main":
-      return (
-        <LoginBtn
-          onClick={() =>
-            (window.location.href = "http://localhost:8080/login/test")
-          }
-        >
-          로그인
-        </LoginBtn>
-      );
     default:
       return null;
   }
 }
 
 export default function Header({ isHeader }) {
   const isResult = isHeader === "result";
+  const [onLogin, setOnLogin] = useState();
+
+  function getButton(isHeader) {
+    switch (isHeader) {
+      case "test":
+        return (
+          // <Link to="/test">
+          <ReturnBtn>처음으로</ReturnBtn>
+          // </Link>
+        );
+      case "ramentest":
+        return (
+          // <Link to="/test">
+          <ReturnBtn>처음으로</ReturnBtn>
+          // </Link>
+        );
+      case "main":
+        return (
+          <>
+            {onLogin ? (
+              <></>
+            ) : (
+              <LoginBtn
+                onClick={() =>
+                  (window.location.href = "http://localhost:8080/login/test")
+                }
+              >
+                로그인
+              </LoginBtn>
+            )}
+          </>
+        );
+      default:
+        return null;
+    }
+  }
+
+  useEffect(() => {
+    fetch(`http://localhost:8080/auth/mypage`, {
+      credentials: "include",
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // console.log(data.email);
+        setOnLogin(data.email);
+      });
+  }, []);
 
   return (
     <StyleContainer>

diff --git a/src/components/review/onLogin.jsx b/src/components/review/onLogin.jsx
@@ -134,7 +134,7 @@ export default function OnLogin() {
       });
   }, [ID]);
 
-  console.log(userEmail, ID);
+  // console.log(userEmail, ID);
 
   const [formData, setFormData] = useState({
     storeId: { ID },

diff --git a/src/routes/mainpage/Main.jsx b/src/routes/mainpage/Main.jsx
@@ -35,6 +35,9 @@ const Btn = styled.div`
 
 const BtnBlock = styled.div`
   margin-right: 72px;
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 // const Ment = styled.h1`
@@ -74,7 +77,7 @@ export default function Main() {
           <BtnBlock>
             <TestBtn onClick={toTest} />
           </BtnBlock>
-          <MapBtn onClick={toMap} />
+          <MapBtn style={{ cursor: "pointer" }} onClick={toMap} />
         </Btn>
       </Body>
     </StyleContainer>

diff --git a/src/routes/map/MapContainer.jsx b/src/routes/map/MapContainer.jsx
@@ -103,6 +103,7 @@ function FirePoints({ score }) {
 export default function MapContainer() {
   const [detail, setDetail] = useRecoilState(detailState);
   const [ID, setID] = useRecoilState(storeIdState);
+  const [result, setResult] = useState("");
   // console.log(detail);
 
   const toggleDetail = () => {
@@ -146,6 +147,19 @@ export default function MapContainer() {
       alert("Geolocation을 사용할 수 없습니다.");
     }
   }, []);
+  // console.log(result);
+
+  useEffect(() => {
+    if (result.getLng && result.getLat) {
+      fetch(
+        `http://223.p-e.kr:8080/get/stores?x=${result.getLng()}&y=${result.getLat()}&radius=1000`
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          setData(data);
+        });
+    }
+  }, [result]);
 
   const EventMarkerContainer = ({
     position,
@@ -174,7 +188,6 @@ export default function MapContainer() {
       }
     };
     // setStoreId(storeId);
-    useEffect(() => {}, []);
     // [0] - spicyLevelList, [1] - reviewCountList
     // const spicyReview = Object.values(review);
     const reviewCount = review.reviewCountList?.at(0) || 0;
@@ -188,7 +201,6 @@ export default function MapContainer() {
         position={position} // 마커를 표시할 위치
         onClick={(marker) => {
           map.panTo(marker.getPosition()); // 지도 중앙을 마커
-          // console.log(marker);
           handleIsOpen(); // 열고 닫는거
         }}
         image={{
@@ -205,7 +217,9 @@ export default function MapContainer() {
         {isOpen && (
           <InfoContainer>
             <InfoAbove>
-              <div onClick={toggleDetail}>{storeName}</div>
+              <div style={{ cursor: "pointer" }} onClick={toggleDetail}>
+                {storeName}
+              </div>
               <img
                 onClick={handleIsOpen}
                 style={{ cursor: "pointer" }}
@@ -237,7 +251,15 @@ export default function MapContainer() {
   return (
     <StyleContainer>
       <Sidebar />
-      <Map center={currentPosition} style={{ width: "100vw", height: "100vh" }}>
+      <Map
+        center={currentPosition}
+        style={{ width: "100vw", height: "100vh" }}
+        onDragEnd={(map) => {
+          const latlng = map.getCenter();
+          // console.log(latlng.getLat(), latlng.getLng());
+          setResult(latlng);
+        }}
+      >
         {data.map((value) => (
           <EventMarkerContainer
             key={`EventMarkerContainer-${value.xaxis}-${value.yaxis}`}

diff --git a/src/routes/test/RamenTest.jsx b/src/routes/test/RamenTest.jsx
@@ -26,7 +26,10 @@ const Btn = styled.button`
   margin-top: 70px;
   border: none;
   background-color: transparent;
-  cursor: pointer;
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const Content = styled.div`
@@ -67,6 +70,9 @@ const Answer = styled.div`
   justify-content: center;
   align-items: center;
   font-size: 16px;
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const ques = ["<라면>", "<마라탕>", "<불닭>", "<엽떡>"];
@@ -151,7 +157,7 @@ export default function RamenTest() {
         </LoadingContainer>
       ) : (
         <>
-          <Header />
+          <Header isHeader="ramentest" />
           <TestContainer>
             {currentIndex === 0 ? (
               <div

diff --git a/src/routes/test/Test.jsx b/src/routes/test/Test.jsx
@@ -55,6 +55,9 @@ const Agree = styled.div`
 const Answer = styled.button`
   margin-left: 20px;
   margin-right: 20px;
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const Img = styled.div`
@@ -103,6 +106,9 @@ const ResultBtn = styled.button`
     opacity: 0.5;
     cursor: not-allowed;
   `}
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 export default function Main() {