diff --git a/src/App.css b/src/App.css index de59252..4b48e0f 100644 --- 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 index a9fddcc..86317aa 100644 --- 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 index 5c24c70..fc895bc 100644 --- a/src/components/views/Header/Header.jsx +++ b/src/components/views/Header/Header.jsx @@ -9,7 +9,7 @@ const Header = ({ headerProps }) => { return ( <> {headerProps ? ( -
+
{!headerProps.isClose ? (
diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css index 607686c..3f7120a 100644 --- 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 index f79c870..0ead76f 100644 --- 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() {
+
+ berryIcon +
오늘도 준비된 당신의 삶을 위해, 레디베리!
+
+
바로 주문
- {isLoggedIn ? ( + {loggedIn ? ( quickOrder.map((item) => ( //to={`/ready?quickId=${item.id}`} @@ -199,7 +217,7 @@ function Homepage() { {/* 이벤트 div */}
- {isLoggedIn + {loggedIn ? eventBanner.map((item) => (