Merge pull request #95 from hhhhyelim/test

Feat: 로그아웃 구현
readyvery · Nov 25, 2023 · 083a925 · 083a925
2 parents d32a053 + 2a0169b
commit 083a925
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 22 deletions.
diff --git a/src/App.css b/src/App.css
@@ -29,6 +29,10 @@
     left: calc(50% - 207px); /* Center the navbar */
     right: calc(50% - 207px); /* Center the navbar */
   }
+  .top_header2 {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 800px) {
@@ -51,6 +55,10 @@
     left: calc(50% - 215px); /* Center the navbar */
     right: calc(50% - 215px); /* Center the navbar */
   }
+  .top_header2 {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
 }
 
 @media (min-width: 800px) {
@@ -75,6 +83,10 @@
     left: calc(50% - 300px); /* Center the navbar */
     right: calc(50% - 300px); /* Center the navbar */
   }
+  .top_header2 {
+    left: calc(50% - 207px); /* Center the navbar */
+    right: calc(50% - 207px); /* Center the navbar */
+  }
 }
 
 @font-face {

diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -1,17 +1,23 @@
 /* Header 상단 고정 및 세로길이 설정 */
 .top_header {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4rem;
-  background-color: #ffffff;
+  /* background-color: #ffffff; */
   display: flex;
   z-index: 100;
   align-items: center;
+  background: linear-gradient(
+      180deg,
+      rgba(216, 35, 86, 0.2) 0.1%,
+      rgba(216, 35, 86, 0) 100%
+    ),
+    #fff;
 }
 
-.top_header.page {
+.top_header2 {
   position: fixed;
   top: 0;
 

diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -9,7 +9,7 @@ const Header = ({ headerProps }) => {
   return (
     <>
       {headerProps ? (
-        <header className="top_header page">
+        <header className="top_header2">
           <div className="header-main__warpper">
             {!headerProps.isClose ? (
               <div>

diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css
@@ -7,6 +7,26 @@
 .homepage::-webkit-scrollbar {
   display: none;
 }
+/* 홍보 문구 */
+.addTextBox {
+  width: 90%;
+  margin: 0 auto;
+  border-radius: 1.25rem;
+  border: 1.5px solid #d82356;
+  background: #fff;
+  height: 2.375rem;
+  display: flex;
+}
+.berryIcon {
+  margin: 0.6rem 1rem;
+  width: 1.062rem;
+  height: 1.062rem;
+}
+.addText {
+  margin: auto 0;
+  font-family: "Medium";
+  font-size: 0.875rem;
+}
 
 /* 바로 주문 */
 .quick-order {

diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx
@@ -2,11 +2,13 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import "slick-carousel/slick/slick-theme.css";
 import "slick-carousel/slick/slick.css";
+import berryIcon from "../../assets/images/berry.svg";
 // import event_icon from "../../assets/images/event_icon.svg";
 // import home_cafedream from "../../assets/images/home_cafedream.svg";
 // import home_harang from "../../assets/images/home_harang.svg";
 // import home_orda from "../../assets/images/home_orda.svg";
 import axios from "axios";
+import { useCookies } from "react-cookie";
 import eventTextIcon from "../../assets/images/icon_eventText.svg";
 import profile_icon from "../../assets/images/profile_icon.svg";
 import Header from "../../components/views/Header/Header";
@@ -15,12 +17,20 @@ import NavBar2 from "../../components/views/NavBar/NavBar2";
 import "./Homepage.css";
 
 function Homepage() {
-  const isLoggedIn = window.localStorage.getItem("isAuthenticated");
+  // const isLoggedIn = window.localStorage.getItem("isAuthenticated");
   const apiRoot = process.env.REACT_APP_API_ROOT;
+  const [cookies] = useCookies(["accessToken"]);
+  const [loggedIn, setLoggedIn] = useState(false);
 
   useEffect(() => {
-    console.log(isLoggedIn);
-  }, [isLoggedIn]);
+    if (cookies?.accessToken) {
+      setLoggedIn(true);
+    } else {
+      setLoggedIn(false);
+    }
+    console.log(loggedIn);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cookies]);
 
   // const eventCase = [
   //   {
@@ -89,20 +99,23 @@ function Homepage() {
   const [quickOrder, setQuickOrder] = useState([]);
   // {/* 바로주문 */}
   useEffect(() => {
-    const config = {
-      withCredentials: true,
-    };
-    // Fetch data from the backend API
-    axios
-      .get(`${apiRoot}/api/v1/order/history`, config)
-      .then((response) => {
-        setQuickOrder(response.data.receipts);
-      })
-      .catch((error) => {
-        console.error("Error fetching data:", error);
-      });
+    if (loggedIn) {
+      const config = {
+        withCredentials: true,
+      };
+      // Fetch data from the backend API
+      axios
+        .get(`${apiRoot}/api/v1/order/history`, config)
+        .then((response) => {
+          setQuickOrder(response.data.receipts);
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [loggedIn]);
 
   const [stores, setStores] = useState([]);
   /* verypick 가게 정보 */
@@ -167,10 +180,15 @@ function Homepage() {
     <div className="homepage">
       <Header headerProps={null} />
 
+      <div className="addTextBox">
+        <img src={berryIcon} alt="berryIcon" className="berryIcon" />
+        <div className="addText">오늘도 준비된 당신의 삶을 위해, 레디베리!</div>
+      </div>
+
       <div className="quick-order">
         <div className="quick-order-text">바로 주문</div>
         <div className="quick-order-list">
-          {isLoggedIn ? (
+          {loggedIn ? (
             quickOrder.map((item) => (
               //to={`/ready?quickId=${item.id}`}
               <Link to={`/ready?quickId=${item.id}`} className="login-box">
@@ -199,7 +217,7 @@ function Homepage() {
 
       {/* 이벤트 div */}
       <div className="event">
-        {isLoggedIn
+        {loggedIn
           ? eventBanner.map((item) => (
               <img
                 key={item.idx}