Merge pull request #48 from LikeLionHGU/hwan_#42/리뷰로그인및리뷰보내기

Hwan #42/리뷰로그인및리뷰보내기
LikeLionHGU · Jun 7, 2024 · 51633ab · 51633ab
2 parents 307cab7 + 58bd074
commit 51633ab
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 54 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,19 +7,22 @@ import Map from "./routes/map/MapContainer";
 import MapContainer from "./routes/map/MapContainer";
 import RamenTest from "./routes/test/RamenTest.jsx";
 import { useEffect } from "react";
+import { RecoilRoot } from "recoil";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Main />} />
-        <Route path="/test" element={<Test />}></Route>
-        <Route path="/ramentest" element={<RamenTest />}></Route>
-        <Route path="/result" element={<Result />}></Route>
-        <Route path="/mypage" element={<MyPage />}></Route>
-        <Route path="/map" element={<MapContainer />}></Route>
-      </Routes>
-    </BrowserRouter>
+    <RecoilRoot>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path="/test" element={<Test />}></Route>
+          <Route path="/ramentest" element={<RamenTest />}></Route>
+          <Route path="/result" element={<Result />}></Route>
+          <Route path="/mypage" element={<MyPage />}></Route>
+          <Route path="/map" element={<MapContainer />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </RecoilRoot>
   );
 }
 

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/nonLogin.jsx b/src/components/review/nonLogin.jsx
@@ -41,7 +41,13 @@ export default function NonLogin() {
     <Sidebar>
       <SidebarContainer>
         <Character src={CharacterLogo} alt="캐릭터 로고" />
-        <LoginBtn>로그인</LoginBtn>
+        <LoginBtn
+          onClick={() =>
+            (window.location.href = "http://localhost:8080/login/test")
+          }
+        >
+          로그인
+        </LoginBtn>
       </SidebarContainer>
     </Sidebar>
   );

diff --git a/src/components/review/onLogin.jsx b/src/components/review/onLogin.jsx
@@ -4,6 +4,9 @@ import FirePoint from "../../imgs/firePoint.svg";
 import NonFirePoint from "../../imgs/nonFirePoint.svg";
 import { useEffect, useState } from "react";
 
+import { useRecoilState } from "recoil";
+import { storeIdState } from "../../atom";
+
 const Sidebar = styled.div`
   position: absolute;
   display: flex;
@@ -105,9 +108,37 @@ function FirePoints() {
 }
 
 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: "",
@@ -120,11 +151,12 @@ export default function OnLogin() {
       [name]: value,
     });
   };
-
   const sendData = async () => {
     try {
-      const response = await fetch("http://223.p-e.kr:8080/post/store/review", {
+      const response = await fetch("http://localhost:8080/post/store/review", {
         method: "POST",
+        redirect: "manual",
+        credentials: "include",
         headers: {
           "Content-Type": "application/json",
         },
@@ -142,27 +174,36 @@ export default function OnLogin() {
     e.preventDefault();
     sendData();
   };
+
   return (
     <Sidebar>
       <SidebarContainer>
-        <Name>식당이름</Name>
+        <Name>{detail ? detail.storeName : ""}</Name>
         <GeneralText>당신의 불점은?</GeneralText>
-        <FirePoints />
+        <FirePoints
+          setReviewSpicyLevel={(level) =>
+            setFormData({ ...formData, reviewSpicyLevel: level })
+          }
+        />
         <GeneralText>어떤 음식을 드셨나요?</GeneralText>
         <InputContent
+          name="title"
           value={formData.title}
+          onChange={handleChange}
           placeholder="음식은 맛있으셨나요?"
           rows={"3"}
         />
         <GeneralText>어떤 점이 좋았나요?(선택)</GeneralText>
         <InputContent
+          name="comment"
           value={formData.comment}
+          onChange={handleChange}
           placeholder="식당을 이용하면서 좋았던 점이나 개선할 점이 있다면 남겨주세요."
           rows={"7"}
         />
         <TwoBtn>
           <CancelReview>취소</CancelReview>
-          <SubmitReview>등록</SubmitReview>
+          <SubmitReview onClick={handleSubmit}>등록</SubmitReview>
         </TwoBtn>
       </SidebarContainer>
     </Sidebar>

diff --git a/src/components/reviewList.jsx → src/components/review/reviewList.jsx b/src/components/reviewList.jsx → src/components/review/reviewList.jsx
diff --git a/src/components/review/sidebar.jsx b/src/components/review/sidebar.jsx
@@ -10,6 +10,7 @@ import LeftArrow from "../../imgs/goLeftArrow.svg";
 import RightArrow from "../../imgs/goRightArrow.svg";
 import { useRecoilState } from "recoil";
 import { detailState } from "../../atom";
+
 const Container = styled.div`
   background-color: white;
 `;
@@ -55,15 +56,18 @@ const Contents = styled.div`
 `;
 
 const Sidebar = ({ width = 300, children }) => {
-  const [isOpen, setOpen] = useState(false);
+  // const [isOpen, setOpen] = useState(false);
   const [xPosition, setX] = useState(width);
   const [onLogin, setOnLogin] = useState();
   const side = useRef();
 
   const [detail, setDetail] = useRecoilState(detailState);
-  const toggleDetail = () => {
-    setDetail(!detail); // 상태를 토글하여 열림/닫힘 상태 변경
-  };
+  // console.log(detail);
+
+  // const toggleDetail = () => {
+  //   setX(width);
+  //   setDetail(false); // 상태를 토글하여 열림/닫힘 상태 변경
+  // };
 
   useEffect(() => {
     fetch(`http://localhost:8080/auth/mypage`, {
@@ -74,35 +78,39 @@ const Sidebar = ({ width = 300, children }) => {
         // console.log(data.email);
         setOnLogin(data.email);
       });
-  }, []);
+    if (detail === true) {
+      setX(60);
+      // console.log("!");
+    }
+  }, [detail]);
 
   // button 클릭 시 토글
   const toggleMenu = () => {
-    if (xPosition > 60) {
-      setX(60);
-      setOpen(true);
-    } else {
-      setX(width);
-      setOpen(false);
-    }
+    // if (xPosition > 60) {
+    //   setX(60);
+    //   setDetail(true);
+    // } else {
+    setX(width);
+    setDetail(false);
+    // }
   };
 
   // 사이드바 외부 클릭시 닫히는 함수
-  const handleClose = async (e) => {
-    let sideArea = side.current;
-    let sideCildren = side.current.contains(e.target);
-    if (isOpen && (!sideArea || !sideCildren)) {
-      await setX(width);
-      await setOpen(false);
-    }
-  };
+  // const handleClose = async (e) => {
+  //   let sideArea = side.current;
+  //   let sideCildren = side.current.contains(e.target);
+  //   if (detail && (!sideArea || !sideCildren)) {
+  //     await setX(width);
+  //     await setDetail(false);
+  //   }
+  // };
 
-  useEffect(() => {
-    window.addEventListener("click", handleClose);
-    return () => {
-      window.removeEventListener("click", handleClose);
-    };
-  });
+  // useEffect(() => {
+  //   window.addEventListener("click", handleClose);
+  //   return () => {
+  //     window.removeEventListener("click", handleClose);
+  //   };
+  // });
 
   return (
     // container
@@ -120,14 +128,15 @@ const Sidebar = ({ width = 300, children }) => {
         {/* <OnLogin /> 로그인 했을 때 */}
         {/* <CompleteReview/> 리뷰 작성 완료 */}
 
-        {isOpen ? onLogin ? <OnLogin /> : <NonLog /> : <MapLogo />}
-        <OpenBtn onClick={() => toggleMenu()}>
-          {isOpen ? (
+        {detail ? onLogin ? <OnLogin /> : <NonLog /> : <MapLogo />}
+        {detail ? (
+          <OpenBtn onClick={() => toggleMenu()}>
             <img src={LeftArrow} alt="" />
-          ) : (
-            <img src={RightArrow} alt="" />
-          )}
-        </OpenBtn>
+          </OpenBtn>
+        ) : (
+          <></>
+        )}
+
         {/* content */}
         <Contents>{children}</Contents>
       </Side>

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) => {