feat : Recoil 수정

LikeLionHGU · Jun 7, 2024 · 58bd074 · 58bd074
1 parent 05e82b8
commit 58bd074
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 12 deletions.
diff --git a/src/atom.js b/src/atom.js
@@ -4,3 +4,8 @@ export const detailState = atom({
   key: "detailState",
   default: false, // 기본값은 사이드바가 닫혀있는 상태
 });
+
+export const storeIdState = atom({
+  key: "storeIdState",
+  default: null, // 기본값은 사이드바가 닫혀있는 상태
+});
diff --git a/src/components/review/onLogin.jsx b/src/components/review/onLogin.jsx
@@ -2,7 +2,10 @@ import styled from "styled-components";
 // import Font from "../../assets/font.css";
 import FirePoint from "../../imgs/firePoint.svg";
 import NonFirePoint from "../../imgs/nonFirePoint.svg";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+import { useRecoilState } from "recoil";
+import { storeIdState } from "../../atom";
 
 const Sidebar = styled.div`
   position: absolute;
@@ -104,10 +107,38 @@ function FirePoints() {
   );
 }
 
-export default function SideBar() {
+export default function OnLogin() {
+  const [ID, setID] = useRecoilState(storeIdState);
+  const [userEmail, setUserEmail] = useState(null);
+  const [detail, setDetail] = useState(null);
+
+  useEffect(() => {
+    fetch(`http://localhost:8080/auth/mypage`, {
+      redirect: "manual",
+      credentials: "include",
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        // console.log(res);
+        setUserEmail(res.email);
+      })
+      .catch((error) => {
+        console.error("Error occurred while fetching:", error);
+      });
+    console.log(ID);
+    fetch(`http://223.p-e.kr:8080/get/stores/detail?storeId=${ID}`)
+      .then((response) => response.json())
+      .then((detailStore) => {
+        // console.log(detailStore);
+        setDetail(detailStore);
+      });
+  }, [ID]);
+
+  // console.log(email);
+
   const [formData, setFormData] = useState({
-    storeId: "",
-    userEmail: "",
+    storeId: { ID },
+    userEmail: { userEmail },
     reviewSpicyLevel: "",
     title: "",
     comment: "",
@@ -124,6 +155,8 @@ export default function SideBar() {
     try {
       const response = await fetch("http://localhost:8080/post/store/review", {
         method: "POST",
+        redirect: "manual",
+        credentials: "include",
         headers: {
           "Content-Type": "application/json",
         },
@@ -145,7 +178,7 @@ export default function SideBar() {
   return (
     <Sidebar>
       <SidebarContainer>
-        <Name>식당이름</Name>
+        <Name>{detail ? detail.storeName : ""}</Name>
         <GeneralText>당신의 불점은?</GeneralText>
         <FirePoints
           setReviewSpicyLevel={(level) =>

diff --git a/src/components/review/sidebar.jsx b/src/components/review/sidebar.jsx
@@ -64,10 +64,10 @@ const Sidebar = ({ width = 300, children }) => {
   const [detail, setDetail] = useRecoilState(detailState);
   // console.log(detail);
 
-  const toggleDetail = () => {
-    setX(width);
-    setDetail(false); // 상태를 토글하여 열림/닫힘 상태 변경
-  };
+  // const toggleDetail = () => {
+  //   setX(width);
+  //   setDetail(false); // 상태를 토글하여 열림/닫힘 상태 변경
+  // };
 
   useEffect(() => {
     fetch(`http://localhost:8080/auth/mypage`, {

diff --git a/src/routes/map/MapContainer.jsx b/src/routes/map/MapContainer.jsx
@@ -9,6 +9,7 @@ import CloseImg from "../../imgs/close.svg";
 
 import { useRecoilState } from "recoil";
 import { detailState } from "../../atom";
+import { storeIdState } from "../../atom";
 
 const regdata = [
   {
@@ -99,6 +100,7 @@ function FirePoints({ score }) {
 
 export default function MapContainer() {
   const [detail, setDetail] = useRecoilState(detailState);
+  const [ID, setID] = useRecoilState(storeIdState);
   // console.log(detail);
 
   const toggleDetail = () => {
@@ -154,8 +156,11 @@ export default function MapContainer() {
     // const [review, setReview] = useState([]);
     const [review, setReview] = useState({});
 
+    // setID({ storeId });
     const handleIsOpen = () => {
-      setIsOpen(!isOpen);
+      setID(storeId);
+      setIsOpen(!isOpen); // 리코일
+      // console.log(ID);
       if (!isOpen) {
         const urlR = `http://223.p-e.kr:8080/get/store/spicy-level?storeId=${storeId}`;
 
@@ -166,7 +171,8 @@ export default function MapContainer() {
           });
       }
     };
-
+    // setStoreId(storeId);
+    useEffect(() => {}, []);
     // [0] - spicyLevelList, [1] - reviewCountList
     // const spicyReview = Object.values(review);
     const reviewCount = review.reviewCountList?.at(0) || 0;
@@ -180,6 +186,7 @@ export default function MapContainer() {
         position={position} // 마커를 표시할 위치
         onClick={(marker) => {
           map.panTo(marker.getPosition()); // 지도 중앙을 마커
+          // console.log(marker);
           handleIsOpen(); // 열고 닫는거
         }}
         image={{

diff --git a/src/routes/test/RamenTest.jsx b/src/routes/test/RamenTest.jsx
@@ -126,7 +126,7 @@ export default function RamenTest() {
     })
       .then((res) => res.json())
       .then((res) => {
-        console.log(res);
+        // console.log(res);
         setUserEmail(res.email);
       })
       .catch((error) => {