From 77e7856f7e9960cd95dc8bef06cfb665a3d6bd54 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Thu, 16 Nov 2023 21:27:27 +0900 Subject: [PATCH 1/8] =?UTF-8?q?Feat:=20Header=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 3 ++ src/pages/CartPage/CartPage.jsx | 37 +++++++++++++++++++ src/pages/CartPage/style.css | 0 .../OrderProcessPage/OrderProcessPage.jsx | 21 +++++++---- src/pages/OrderProcessPage/style.css | 17 +++++++-- .../PackagingStatusPage.jsx | 2 +- src/pages/StoreDetailPage/StoreDetailPage.jsx | 8 +++- 7 files changed, 76 insertions(+), 12 deletions(-) create mode 100644 src/pages/CartPage/CartPage.jsx create mode 100644 src/pages/CartPage/style.css diff --git a/src/App.js b/src/App.js index 600d7ef..e3db624 100644 --- a/src/App.js +++ b/src/App.js @@ -53,6 +53,9 @@ function App() { } /> {/* 마이페이지-약관정책 페이지 */} } /> + {/* 장바구니 페이지 */} + } /> + {/* 결제 페이지 */} ); diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx new file mode 100644 index 0000000..aa1b2d4 --- /dev/null +++ b/src/pages/CartPage/CartPage.jsx @@ -0,0 +1,37 @@ +const CartPage = () => { + // const { cartItems, setCartItems } = useContext(CartContext); + + // const handleRemoveFromCart = (id) => { + // const newCartItems = cartItems.filter((item) => item.id !== id); + // setCartItems(newCartItems); + // }; + + return ( +
+ {/*
*/} + {/*

Cart

+
+ {cartItems.map((item) => ( +
+ {item.title} +
+

{item.title}

+

Price: ${item.price}

+

Quantity: {item.quantity}

+ +
+
+ ))} +
*/} +
+ ); +}; +export default CartPage; diff --git a/src/pages/CartPage/style.css b/src/pages/CartPage/style.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx index f456621..4a325a3 100644 --- a/src/pages/OrderProcessPage/OrderProcessPage.jsx +++ b/src/pages/OrderProcessPage/OrderProcessPage.jsx @@ -4,13 +4,13 @@ import Header from "../../components/views/Header/Header"; import noImageMenu from "../../assets/images/no_image_menu.svg"; import toggleUp from "../../assets/images/toggle_up.svg"; import toggleDown from "../../assets/images/toggle_down.svg"; -// import { Link, useLocation } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; const OrderProcessPage = () => { - // const location = useLocation(); - // const params = new URLSearchParams(location.search); - // const storeId = params.get("storeId"); - // const inout = params.get("inout"); + const location = useLocation(); + const params = new URLSearchParams(location.search); + const storeId = params.get("storeId"); + const inout = params.get("inout"); // const foodie_id = params.get("foodie_id"); const foodOptionInfo = { @@ -97,7 +97,9 @@ const OrderProcessPage = () => { return (
-
+
no_image_menu @@ -169,7 +171,12 @@ const OrderProcessPage = () => {
-
장바구니 담기
+ +
장바구니 담기
+
); }; diff --git a/src/pages/OrderProcessPage/style.css b/src/pages/OrderProcessPage/style.css index 9351573..73ae283 100644 --- a/src/pages/OrderProcessPage/style.css +++ b/src/pages/OrderProcessPage/style.css @@ -93,6 +93,16 @@ display: flex; } +.order-process-page__quantity { + display: flex; +} + +.order-process-page__quantity__value { + display: flex; + margin-left: 0.87rem; + margin-right: 0.87rem; +} + .order-process-page__total-amount { display: flex; color: #000; @@ -101,6 +111,7 @@ font-size: 1.125rem; line-height: 130%; /* 1.4625rem */ letter-spacing: 0.0225rem; + justify-content: flex-end; margin-top: 2rem; margin-bottom: 2.38rem; margin-left: 14.31rem; @@ -116,15 +127,13 @@ white-space: nowrap; } -.order-process-page__btn { +.order-process-page__cart__btn { display: flex; width: 17.8505rem; height: 3.1875rem; flex-shrink: 0; border-radius: 0.5rem; background: #d82356; - margin-left: auto; - margin-right: auto; color: #fff; text-align: center; font-family: "Bold"; @@ -133,5 +142,7 @@ letter-spacing: -0.01125rem; justify-content: center; align-items: center; + margin-left: auto; + margin-right: auto; margin-bottom: 2.38rem; } diff --git a/src/pages/PackagingStatusPage/PackagingStatusPage.jsx b/src/pages/PackagingStatusPage/PackagingStatusPage.jsx index 29cff81..2001752 100644 --- a/src/pages/PackagingStatusPage/PackagingStatusPage.jsx +++ b/src/pages/PackagingStatusPage/PackagingStatusPage.jsx @@ -13,7 +13,7 @@ const PackagingStatusPage = () => { return (
-
+
어떻게 준비해드릴까요?
수령방식을 선택해주세요 diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx index 5262158..553f991 100644 --- a/src/pages/StoreDetailPage/StoreDetailPage.jsx +++ b/src/pages/StoreDetailPage/StoreDetailPage.jsx @@ -382,7 +382,13 @@ const StoreDetailPage = () => { return (
-
+
Date: Fri, 17 Nov 2023 19:27:42 +0900 Subject: [PATCH 2/8] Fix: Route import --- src/App.js | 1 + src/pages/CartPage/CartPage.jsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index e3db624..8f0775c 100644 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ import OrderProcessPage from "./pages/OrderProcessPage/OrderProcessPage"; import OrderStatus from "./pages/OrderStatus/OrderStatus"; import OrderStorage from "./pages/OrderStorage/OrderStorage"; import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage"; +import CartPage from "./pages/CartPage/CartPage"; function App() { return ( diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx index aa1b2d4..b107857 100644 --- a/src/pages/CartPage/CartPage.jsx +++ b/src/pages/CartPage/CartPage.jsx @@ -1,3 +1,5 @@ +import Header from "../../components/views/Header/Header"; + const CartPage = () => { // const { cartItems, setCartItems } = useContext(CartContext); @@ -8,13 +10,13 @@ const CartPage = () => { return (
- {/*
*/} + /> {/*

Cart

{cartItems.map((item) => ( From 0c86b1aa0c5abfcc03aaa0876663bacf2fbefb2a Mon Sep 17 00:00:00 2001 From: imi21123 Date: Fri, 17 Nov 2023 23:04:42 +0900 Subject: [PATCH 3/8] =?UTF-8?q?Feat:=20payment=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 11 +- src/App.js | 2 + src/assets/images/menu_delete.svg | 3 + src/components/views/Header/Header.css | 12 +- src/pages/CartPage/CartPage.jsx | 15 +- src/pages/CartPage/style.css | 23 ++ src/pages/OrderDetail/OrderDetail.jsx | 254 ++++++++++-------- .../OrderProcessPage/OrderProcessPage.jsx | 8 +- src/pages/PaymentPage/PaymentPage.jsx | 188 +++++++++++++ src/pages/PaymentPage/style.css | 104 +++++++ src/pages/StoreDetailPage/StoreDetailPage.jsx | 2 +- 11 files changed, 495 insertions(+), 127 deletions(-) create mode 100644 src/assets/images/menu_delete.svg create mode 100644 src/pages/PaymentPage/PaymentPage.jsx create mode 100644 src/pages/PaymentPage/style.css diff --git a/src/App.css b/src/App.css index 6ef6d8a..a9eb3f0 100644 --- a/src/App.css +++ b/src/App.css @@ -14,7 +14,7 @@ max-width: 390px; height: 94vh; background-color: white; - padding-top: 2.75rem; + padding-top: 3.5rem; } .bottom_navbar { left: calc(50% - 207px); /* Center the navbar */ @@ -36,7 +36,7 @@ max-width: 430px; height: 94vh; background-color: white; - padding-top: 2.75rem; + padding-top: 3.5rem; } .bottom_navbar { left: calc(50% - 207px); /* Center the navbar */ @@ -51,7 +51,6 @@ left: calc(50% - 207px); /* Center the navbar */ right: calc(50% - 207px); /* Center the navbar */ } - } @media (min-width: 800px) { @@ -59,7 +58,7 @@ width: 600px; height: 94vh; background-color: white; - padding-top: 2.75rem; + padding-top: 3.5rem; } .bottom_navbar { left: calc(50% - 300px); /* Center the navbar */ @@ -82,8 +81,8 @@ font-display: swap; src: local("Pretendard"), url("./assets/font/Pretendard-Bold.woff2") format("woff2"); -unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039; - } + unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039; +} @font-face { font-family: "ExtraBold"; diff --git a/src/App.js b/src/App.js index 8f0775c..bd0e316 100644 --- a/src/App.js +++ b/src/App.js @@ -15,6 +15,7 @@ import OrderStatus from "./pages/OrderStatus/OrderStatus"; import OrderStorage from "./pages/OrderStorage/OrderStorage"; import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage"; import CartPage from "./pages/CartPage/CartPage"; +import PaymentPage from "./pages/PaymentPage/PaymentPage"; function App() { return ( @@ -57,6 +58,7 @@ function App() { {/* 장바구니 페이지 */} } /> {/* 결제 페이지 */} + } />
); diff --git a/src/assets/images/menu_delete.svg b/src/assets/images/menu_delete.svg new file mode 100644 index 0000000..79bb10f --- /dev/null +++ b/src/assets/images/menu_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css index 2f17733..5eab458 100644 --- a/src/components/views/Header/Header.css +++ b/src/components/views/Header/Header.css @@ -4,7 +4,7 @@ top: 0; left: 0; right: 0; - height: 2.6875rem; + height: 3.5rem; background-color: #ffffff; display: flex; align-items: center; @@ -15,7 +15,7 @@ top: 0; left: 0; right: 0; - height: 2.6875rem; + height: 3.5rem; background-color: #ffffff; display: flex; align-items: center; @@ -25,7 +25,7 @@ margin-left: 1.5rem; } -.header-main__warpper{ +.header-main__warpper { display: flex; flex-direction: row; justify-content: space-between; @@ -34,12 +34,12 @@ margin: 0 auto; } -.header-main__warpper span{ +.header-main__warpper span { color: #000; font-size: 1.25rem; font-family: "Bold"; } -.header-main__warpper div{ +.header-main__warpper div { width: 1.5rem; -} \ No newline at end of file +} diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx index b107857..fb2a596 100644 --- a/src/pages/CartPage/CartPage.jsx +++ b/src/pages/CartPage/CartPage.jsx @@ -1,6 +1,13 @@ import Header from "../../components/views/Header/Header"; +import "./style.css"; +import { Link, useLocation } from "react-router-dom"; const CartPage = () => { + const location = useLocation(); + const params = new URLSearchParams(location.search); + const storeId = params.get("storeId"); + const inout = params.get("inout"); + // const { cartItems, setCartItems } = useContext(CartContext); // const handleRemoveFromCart = (id) => { @@ -14,7 +21,7 @@ const CartPage = () => { headerProps={{ pageName: "장바구니", isClose: false, - linkTo: "/store", + linkTo: `/store?storeId=${storeId}&inout=${inout}`, }} /> {/*

Cart

@@ -33,6 +40,12 @@ const CartPage = () => {
))}
*/} + +
주문하기
+
); }; diff --git a/src/pages/CartPage/style.css b/src/pages/CartPage/style.css index e69de29..b4778a3 100644 --- a/src/pages/CartPage/style.css +++ b/src/pages/CartPage/style.css @@ -0,0 +1,23 @@ +.cart-page { + display: flex; + width: 100%; +} + +.order-btn { + display: flex; + width: 23.4375rem; + height: 3.6875rem; + flex-shrink: 0; + border-radius: 0.625rem; + background: #d82356; + margin-left: auto; + margin-right: auto; + color: #fff; + text-align: center; + font-family: "Bold"; + font-size: 1.125rem; + line-height: 130%; /* 1.4625rem */ + letter-spacing: -0.01125rem; + justify-content: center; + align-items: center; +} diff --git a/src/pages/OrderDetail/OrderDetail.jsx b/src/pages/OrderDetail/OrderDetail.jsx index 720259c..abf11d6 100644 --- a/src/pages/OrderDetail/OrderDetail.jsx +++ b/src/pages/OrderDetail/OrderDetail.jsx @@ -3,124 +3,156 @@ import Header from "../../components/views/Header/Header"; import "./OrderDetail.css"; const OrderDetail = () => { - const isCompelete = false; + const isCompelete = false; - return( -
-
-
-
-
-
- {isCompelete ? ( - 주문 취소 (가게사정) - ) : ( - 주문 완료 - )} - 이디야커피 가톨릭대점 -
- 주문일시: 2021년 12월 12일 18:06 (픽업) - 주문번호: B14102GXG9 - 가게전화: 031-123-1234 -
-
-
-
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 - 샷추가 -
-
-
- 3,500원 -
-
+ return ( +
+
+
+
+
+
+ {isCompelete ? ( + + 주문 취소 (가게사정) + + ) : ( + 주문 완료 + )} + 이디야커피 가톨릭대점 +
+ 주문일시: 2021년 12월 12일 18:06 (픽업) + 주문번호: B14102GXG9 + 가게전화: 031-123-1234 +
+
+
+
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + + 샷추가 +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
-
-
-
americano
-
- 아메리카노 - ICE / LARGE / 1 -
-
-
- 3,500원 -
-
-
-
-
-
- 총 결제금액 - 22,500원 -
-
- 결제방법 - 주문취소 -
-
-
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+ 3,500원
+
+
+
+
+ americano +
+
+ 아메리카노 + + ICE / LARGE / 1 + +
+
+
+ 3,500원 +
+
+
+
+
+
+ 총 결제금액 + 22,500원 +
+
+ 결제방법 + 주문취소 +
+
+
- ) -} +
+
+ ); +}; -export default OrderDetail; \ No newline at end of file +export default OrderDetail; diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx index 4a325a3..a417e4c 100644 --- a/src/pages/OrderProcessPage/OrderProcessPage.jsx +++ b/src/pages/OrderProcessPage/OrderProcessPage.jsx @@ -98,11 +98,15 @@ const OrderProcessPage = () => { return (
- no_image_menu +
diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx new file mode 100644 index 0000000..25574ca --- /dev/null +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -0,0 +1,188 @@ +import Header from "../../components/views/Header/Header"; +import "./style.css"; +import React, { useEffect, useRef } from "react"; +import { useLocation } from "react-router-dom"; +import noImageMenu from "../../assets/images/no_image_menu.svg"; + +const PaymentPage = () => { + const location = useLocation(); + const params = new URLSearchParams(location.search); + const storeId = params.get("storeId"); + const inout = params.get("inout"); + + const paymentData = { + name: "카페 오르다", + imgUrl: "/주소", + carts: [ + { + idx: 141, // 장바구니 idx + name: "아메리카노", + imgUrl: "/주주소소", + price: 2500, + count: 4, + options: [ + { + idx: 1, // 옵션 테이블 인덱스 + name: "ICE", + }, + { + idx: 114, // 옵션 테이블 인덱스 + name: "샷추가", + }, + ], + }, + { + idx: 143, // 장바구니 idx + name: "카페라떼", + imgUrl: null, + price: 4500, + count: 3, + options: [ + { + idx: 1, // 옵션 테이블 인덱스 + name: "ICE", + }, + { + idx: 114, // 옵션 테이블 인덱스 + name: "샷추가", + }, + ], + }, + ], + couponId: 12, + }; + + const buttonRef = useRef(); + + useEffect(() => { + const loadTossPayments = async () => { + try { + // 토스페이먼츠 라이브러리 비동기로 로드 + const TossPayments = await import( + "https://js.tosspayments.com/v1/payment" + ); + + // 클라이언트 키로 객체 초기화 + const clientKey = "test_ck_pP2YxJ4K87By0b4RZeo0rRGZwXLO"; + const tossPayments = TossPayments.default(clientKey); + + // 버튼에 클릭 이벤트 추가 + buttonRef.current.addEventListener("click", () => { + // 결제창 띄우기 + tossPayments.requestPayment("card", { + amount: 20, + orderId: "2ab88b105d-8bd1-436a-ab52-731396a352bda", + orderName: "포인트 충전", + customerName: "첫번째", + customerEmail: "test1@gmail.com", + successUrl: "http://localhost:8080/api/v1/payments/toss/success", + failUrl: "http://localhost:8080/api/v1/payments/toss/fail", + }); + }); + } catch (error) { + console.error("Failed to load TossPayments:", error); + } + }; + + loadTossPayments(); + }, []); + + return ( +
+
+ +
+ + + {paymentData.name} + +
+ +
+ {paymentData.carts.map((item) => ( +
+
+ + +
+
+ {item.name} +
+
+ {item.options.map((option) => ( +
•{option.name}
+ ))} +
+
+ {item.price} +
+
+
+
+
+ ))} +
+ + {/* 버튼에 ref 추가 */} +
+ 결제하기 +
+
+ ); +}; +// const PaymentPage = () => { +// const [paymentMethod, setPaymentMethod] = useState("PayPal"); + +// const dispatch = useDispatch(); + +// const cart = useSelector((state) => state.cart); +// const { shippingAddress } = cart; + +// if (!shippingAddress.address) { +// history.push("/shipping"); +// } + +// const submitHandler = (e) => { +// e.preventDefault(); +// dispatch(savePaymentMethod(paymentMethod)); +// history.push("/placeorder"); +// }; + +// return ( +//
+// {/*
어떻게 결제할까요?
+//
+// 결제방식을 선택해주세요 +//
+//
+// takeOut +// 먹고갈게요 +//
+//
+// takeOut +// 가져갈게요 +//
*/} +//
+// ); +// }; +export default PaymentPage; diff --git a/src/pages/PaymentPage/style.css b/src/pages/PaymentPage/style.css new file mode 100644 index 0000000..c1643d6 --- /dev/null +++ b/src/pages/PaymentPage/style.css @@ -0,0 +1,104 @@ +.payment-page { + display: flex; + width: 100%; + flex-direction: column; +} + +.payment-page__cafe-info { + display: flex; + margin-left: 1.56rem; + margin-top: 1.38rem; + margin-bottom: 0.44rem; +} + +.payment-page__cafe-info__img { + display: flex; + width: 1.875rem; + height: 1.875rem; + flex-shrink: 0; + border-radius: 0.625rem; +} + +.payment-page__cafe-info__name { + color: #000; + font-family: "Bold"; + font-size: 1.25rem; + line-height: 130%; /* 1.625rem */ + letter-spacing: -0.0125rem; + margin-left: 0.75rem; +} + +.payment-page__order-info { + display: flex; + flex-shrink: 0; + background: #fff; + flex-direction: column; +} + +.payment-page__order-info__item { + display: flex; + height: fit-content; + flex-shrink: 0; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.7rem; + padding-bottom: 0.7rem; +} + +.payment-page__order-info__item__img { + display: flex; + width: 4.8125rem; + height: 4.8125rem; + flex-shrink: 0; + border-radius: 0.625rem; + background: #f4f4f4; + margin-right: 0.69rem; +} + +.payment-page__order-info__item__name { + display: flex; + color: #000; + font-family: "Medium"; + font-size: 0.9375rem; + line-height: 130%; /* 1.21875rem */ + letter-spacing: -0.00938rem; +} +.payment-page__order-info__item__option { + display: flex; + flex-direction: column; + color: #838383; + font-family: "Light"; + font-size: 0.625rem; + line-height: 130%; /* 0.8125rem */ + letter-spacing: -0.00625rem; + margin-bottom: 0.31rem; +} + +.payment-page__order-info__item__line { + width: 21.5625rem; + height: 0rem; + flex-shrink: 0; + stroke-width: 1px; + stroke: #dadada; + margin-left: auto; + margin-right: auto; +} + +.payment-page__btn { + display: flex; + width: 23.4375rem; + height: 3.6875rem; + flex-shrink: 0; + border-radius: 0.625rem; + background: #d82356; + margin-left: auto; + margin-right: auto; + color: #fff; + text-align: center; + font-family: "Bold"; + font-size: 1.125rem; + line-height: 130%; /* 1.4625rem */ + letter-spacing: -0.01125rem; + justify-content: center; + align-items: center; +} diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx index 553f991..49e3b71 100644 --- a/src/pages/StoreDetailPage/StoreDetailPage.jsx +++ b/src/pages/StoreDetailPage/StoreDetailPage.jsx @@ -386,7 +386,7 @@ const StoreDetailPage = () => { headerProps={{ pageName: "", isClose: false, - linkTo: "/packagingStatus", + linkTo: `/packagingStatus?storeId=${storeId}`, }} />
From 926e002b127c649cfa0aad23e4f3d463fbc216c1 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Fri, 17 Nov 2023 23:15:51 +0900 Subject: [PATCH 4/8] =?UTF-8?q?Fix:=20img=20=EC=82=BD=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PaymentPage/PaymentPage.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index 25574ca..a3face0 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -3,6 +3,7 @@ import "./style.css"; import React, { useEffect, useRef } from "react"; import { useLocation } from "react-router-dom"; import noImageMenu from "../../assets/images/no_image_menu.svg"; +import menuDelete from "../../assets/images/menu_delete.svg"; const PaymentPage = () => { const location = useLocation(); @@ -120,6 +121,7 @@ const PaymentPage = () => {
{item.name}
+ X
{item.options.map((option) => (
•{option.name}
From c7fbc7a427a6c864877ce101b6f2348aef557340 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Fri, 17 Nov 2023 23:29:37 +0900 Subject: [PATCH 5/8] =?UTF-8?q?Fix:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PaymentPage/PaymentPage.jsx | 75 +++++++++++++-------------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index a3face0..25d2efc 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -1,6 +1,6 @@ import Header from "../../components/views/Header/Header"; import "./style.css"; -import React, { useEffect, useRef } from "react"; +import React from "react"; import { useLocation } from "react-router-dom"; import noImageMenu from "../../assets/images/no_image_menu.svg"; import menuDelete from "../../assets/images/menu_delete.svg"; @@ -53,40 +53,40 @@ const PaymentPage = () => { couponId: 12, }; - const buttonRef = useRef(); - - useEffect(() => { - const loadTossPayments = async () => { - try { - // 토스페이먼츠 라이브러리 비동기로 로드 - const TossPayments = await import( - "https://js.tosspayments.com/v1/payment" - ); - - // 클라이언트 키로 객체 초기화 - const clientKey = "test_ck_pP2YxJ4K87By0b4RZeo0rRGZwXLO"; - const tossPayments = TossPayments.default(clientKey); - - // 버튼에 클릭 이벤트 추가 - buttonRef.current.addEventListener("click", () => { - // 결제창 띄우기 - tossPayments.requestPayment("card", { - amount: 20, - orderId: "2ab88b105d-8bd1-436a-ab52-731396a352bda", - orderName: "포인트 충전", - customerName: "첫번째", - customerEmail: "test1@gmail.com", - successUrl: "http://localhost:8080/api/v1/payments/toss/success", - failUrl: "http://localhost:8080/api/v1/payments/toss/fail", - }); - }); - } catch (error) { - console.error("Failed to load TossPayments:", error); - } - }; - - loadTossPayments(); - }, []); + // const buttonRef = useRef(); + + // useEffect(() => { + // const loadTossPayments = async () => { + // try { + // // 토스페이먼츠 라이브러리 비동기로 로드 + // const TossPayments = await import( + // "https://js.tosspayments.com/v1/payment" + // ); + + // // 클라이언트 키로 객체 초기화 + // const clientKey = "test_ck_pP2YxJ4K87By0b4RZeo0rRGZwXLO"; + // const tossPayments = TossPayments.default(clientKey); + + // // 버튼에 클릭 이벤트 추가 + // buttonRef.current.addEventListener("click", () => { + // // 결제창 띄우기 + // tossPayments.requestPayment("card", { + // amount: 20, + // orderId: "2ab88b105d-8bd1-436a-ab52-731396a352bda", + // orderName: "포인트 충전", + // customerName: "첫번째", + // customerEmail: "test1@gmail.com", + // successUrl: "http://localhost:8080/api/v1/payments/toss/success", + // failUrl: "http://localhost:8080/api/v1/payments/toss/fail", + // }); + // }); + // } catch (error) { + // console.error("Failed to load TossPayments:", error); + // } + // }; + + // loadTossPayments(); + // }, []); return (
@@ -137,10 +137,9 @@ const PaymentPage = () => { ))}
- {/* 버튼에 ref 추가 */} -
+ {/*
결제하기 -
+
*/}
); }; From fec3ead69603d02b1594ea046a190929e03c34af Mon Sep 17 00:00:00 2001 From: imi21123 Date: Sun, 19 Nov 2023 16:30:25 +0900 Subject: [PATCH 6/8] =?UTF-8?q?Fix:=20img=20alt=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/OrderProcessPage/OrderProcessPage.jsx | 2 +- src/pages/PaymentPage/PaymentPage.jsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx index a417e4c..97ae983 100644 --- a/src/pages/OrderProcessPage/OrderProcessPage.jsx +++ b/src/pages/OrderProcessPage/OrderProcessPage.jsx @@ -106,7 +106,7 @@ const OrderProcessPage = () => { />
- + menuImg
diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx index 25d2efc..a1fce2d 100644 --- a/src/pages/PaymentPage/PaymentPage.jsx +++ b/src/pages/PaymentPage/PaymentPage.jsx @@ -102,6 +102,7 @@ const PaymentPage = () => { cafeImg {paymentData.name} @@ -115,6 +116,7 @@ const PaymentPage = () => { menuImg
From a4adaf232e35ea29cf71064dcf53cc4d7c8f6547 Mon Sep 17 00:00:00 2001 From: hhhhyelim Date: Sun, 19 Nov 2023 19:01:02 +0900 Subject: [PATCH 7/8] =?UTF-8?q?Feat:=20=ED=99=88=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 25 +++++++ package.json | 1 + src/App.css | 4 +- src/App.js | 3 +- src/assets/images/cafe1.svg | 8 +-- src/assets/images/cafe2.svg | 8 +-- src/assets/images/cafe3.svg | 9 +++ src/assets/images/event_icon.svg | 25 +++---- src/assets/images/icon_eventText.svg | 3 + src/assets/images/search_cafe1.svg | 9 +++ src/assets/images/search_cafe2.svg | 9 +++ src/assets/images/search_cafe3.svg | 9 +++ src/components/views/StateBox/StateBox.jsx | 44 ++++++------ src/hoc/auth.jsx | 44 ++++++++++++ src/hoc/useInterval.jsx | 22 ++++++ src/index.js | 5 +- src/pages/CafeSearch/CafeSearch.css | 59 +++++++++++++++ src/pages/CafeSearch/CafeSearch.jsx | 79 ++++++++++++++++++++ src/pages/HomePage/Homepage.css | 49 +++++++++++-- src/pages/HomePage/Homepage.jsx | 83 +++++++++++----------- src/pages/LoginPage/Login.jsx | 1 + src/pages/LoginPage/LoginHandler.jsx | 0 src/pages/MyPage/CouponPage.css | 48 +++++++++++++ src/pages/MyPage/CouponPage.jsx | 37 +++++++++- src/pages/MyPage/EventingPage.jsx | 15 ++++ src/pages/MyPage/MyPage.jsx | 12 +++- src/pages/MyPage/PolicyPage.css | 16 +++++ src/pages/MyPage/PolicyPage.jsx | 4 +- src/recoil/authAtoms.jsx | 13 ++++ src/recoil/user.jsx | 6 ++ 30 files changed, 547 insertions(+), 103 deletions(-) create mode 100644 src/assets/images/cafe3.svg create mode 100644 src/assets/images/icon_eventText.svg create mode 100644 src/assets/images/search_cafe1.svg create mode 100644 src/assets/images/search_cafe2.svg create mode 100644 src/assets/images/search_cafe3.svg create mode 100644 src/hoc/useInterval.jsx create mode 100644 src/pages/CafeSearch/CafeSearch.css create mode 100644 src/pages/CafeSearch/CafeSearch.jsx create mode 100644 src/pages/LoginPage/LoginHandler.jsx create mode 100644 src/recoil/authAtoms.jsx create mode 100644 src/recoil/user.jsx diff --git a/package-lock.json b/package-lock.json index bd74c60..95cda71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", + "recoil": "^0.7.7", "redux": "^4.2.1", "redux-promise": "^0.6.0", "redux-thunk": "^2.4.2", @@ -8617,6 +8618,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -14535,6 +14541,25 @@ "node": ">=8.10.0" } }, + "node_modules/recoil": { + "version": "0.7.7", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", + "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", + "dependencies": { + "hamt_plus": "1.0.2" + }, + "peerDependencies": { + "react": ">=16.13.1" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", diff --git a/package.json b/package.json index 850bf56..b05c55f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", + "recoil": "^0.7.7", "redux": "^4.2.1", "redux-promise": "^0.6.0", "redux-thunk": "^2.4.2", diff --git a/src/App.css b/src/App.css index 3d60bbe..910c623 100644 --- a/src/App.css +++ b/src/App.css @@ -94,8 +94,8 @@ font-display: swap; src: local("Pretendard"), url("./assets/font/Pretendard-Bold.woff2") format("woff2"); -unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039; - } + unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039; +} @font-face { font-family: "ExtraBold"; diff --git a/src/App.js b/src/App.js index 7f1314b..b9e9329 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import MyPage from "../src/pages/MyPage/MyPage"; import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage"; import TestPage from "../src/pages/TestPage/TestPage"; import "./App.css"; +import CafeSearchPage from "./pages/CafeSearch/CafeSearch"; import KakaoLoginPage from "./pages/LoginPage/Login"; import CouponPage from "./pages/MyPage/CouponPage"; import EventingPage from "./pages/MyPage/EventingPage"; @@ -23,7 +24,7 @@ function App() { {/* 없는 경로로 갈 경우 메인페이지로 강제 이동 */} }> {/* 테스트 페이지 - 카페검색*/} - } /> + } /> {/* 주문내역 페이지*/} } /> {/* 주문상태 페이지 - 추후 병합 예정*/} diff --git a/src/assets/images/cafe1.svg b/src/assets/images/cafe1.svg index 3ea586e..21d936a 100644 --- a/src/assets/images/cafe1.svg +++ b/src/assets/images/cafe1.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/src/assets/images/cafe2.svg b/src/assets/images/cafe2.svg index 8e2b714..648f33a 100644 --- a/src/assets/images/cafe2.svg +++ b/src/assets/images/cafe2.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/src/assets/images/cafe3.svg b/src/assets/images/cafe3.svg new file mode 100644 index 0000000..85dd8bf --- /dev/null +++ b/src/assets/images/cafe3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/event_icon.svg b/src/assets/images/event_icon.svg index 96edb33..05e56aa 100644 --- a/src/assets/images/event_icon.svg +++ b/src/assets/images/event_icon.svg @@ -1,19 +1,16 @@ - - - - - - - - - - - - + + + + + - + - + + + + + diff --git a/src/assets/images/icon_eventText.svg b/src/assets/images/icon_eventText.svg new file mode 100644 index 0000000..e9d0250 --- /dev/null +++ b/src/assets/images/icon_eventText.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/search_cafe1.svg b/src/assets/images/search_cafe1.svg new file mode 100644 index 0000000..645e558 --- /dev/null +++ b/src/assets/images/search_cafe1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/search_cafe2.svg b/src/assets/images/search_cafe2.svg new file mode 100644 index 0000000..a9c01b2 --- /dev/null +++ b/src/assets/images/search_cafe2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/search_cafe3.svg b/src/assets/images/search_cafe3.svg new file mode 100644 index 0000000..24902fb --- /dev/null +++ b/src/assets/images/search_cafe3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/views/StateBox/StateBox.jsx b/src/components/views/StateBox/StateBox.jsx index db0cb78..a305ede 100644 --- a/src/components/views/StateBox/StateBox.jsx +++ b/src/components/views/StateBox/StateBox.jsx @@ -2,28 +2,28 @@ import "./StateBox.css"; import cafe from "../../../assets/images/cafe_logo.png"; -const StateBox = ( {id, date, name, menu, state} ) => { - const stateList = ["취소완료", "진행중", "수령완료"]; +const StateBox = ({ id, date, name, menu, state }) => { + const stateList = ["취소완료", "진행중", "수령완료"]; - return( - <> -
-
-
{date}
-
- {stateList.filter((e, i) => i === state)} -
-
-
- {cafe}/ -
-
{name}
-
{menu}
-
-
+ return ( + <> +
+
+
{date}
+
+ {stateList.filter((e, i) => i === state)} +
- - ) -} +
+ {cafe} +
+
{name}
+
{menu}
+
+
+
+ + ); +}; -export default StateBox; \ No newline at end of file +export default StateBox; diff --git a/src/hoc/auth.jsx b/src/hoc/auth.jsx index e69de29..1e38da4 100644 --- a/src/hoc/auth.jsx +++ b/src/hoc/auth.jsx @@ -0,0 +1,44 @@ +// // ../hoc/auth.js + +// import React, { useEffect } from "react"; +// import { useLocation, useNavigate } from "react-router-dom"; +// import { useRecoilState } from "recoil"; +// import { accessTokenState, isAuthenticatedState } from "../recoil/authAtoms"; + +// export default function Auth(SpecificComponent, option, adminRoute = null) { +// function AuthenticationCheck() { +// const navigate = useNavigate(); +// const location = useLocation(); +// const [isAuthenticated, setIsAuthenticated] = +// useRecoilState(isAuthenticatedState); +// const [accessToken, setAccessToken] = useRecoilState(accessTokenState); + +// useEffect(() => { +// // 여기서 적절한 방법으로 사용자의 인증 상태를 확인하고 accessToken을 Recoil 상태에 업데이트합니다. +// // 이 예시에서는 option이 false일 때만 인증 상태를 true로 설정합니다. +// if (!option) { +// setIsAuthenticated(true); +// // 여기서 세션 또는 토큰을 가져와서 Recoil 상태에 업데이트합니다. +// // 이 예시에서는 accessToken을 예시로 사용하고, 실제로는 여러분의 인증 방식에 맞게 수정해야 합니다. +// setAccessToken("exampleAccessToken"); +// } +// }, [option, setIsAuthenticated, setAccessToken]); + +// useEffect(() => { +// // 인증 상태에 따라 페이지 접근을 처리합니다. +// if (!isAuthenticated) { +// // 인증되지 않은 경우 로그인 페이지로 리다이렉트 +// if (location.pathname !== "/kakaologin") { +// navigate("/kakologin", { replace: true }); +// } +// } else if (isAuthenticated && option === false) { +// // 인증된 상태이고 option이 false인 경우 특정 조건에 따라 리다이렉트 +// // 이 예시에서는 특별한 조건이 없으므로 특별한 동작을 추가할 수 있습니다. +// } +// }, [isAuthenticated, option, navigate, location.pathname]); + +// return ; +// } + +// return AuthenticationCheck; +// } diff --git a/src/hoc/useInterval.jsx b/src/hoc/useInterval.jsx new file mode 100644 index 0000000..b15385f --- /dev/null +++ b/src/hoc/useInterval.jsx @@ -0,0 +1,22 @@ +import { useEffect, useRef } from "react"; + +function useInterval(callback, delay) { + const savedCallback = useRef(); + + useEffect(() => { + savedCallback.current = callback; + }, [callback]); + + useEffect(() => { + function tick() { + savedCallback.current(); + } + + if (delay !== null) { + const intervalId = setInterval(tick, delay); + return () => clearInterval(intervalId); + } + }, [delay]); +} + +export default useInterval; diff --git a/src/index.js b/src/index.js index f1461f8..8b25826 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; +import { RecoilRoot } from "recoil"; import { ThemeProvider } from "styled-components"; import App from "./App"; import "./index.css"; @@ -11,7 +12,9 @@ root.render( - + + + diff --git a/src/pages/CafeSearch/CafeSearch.css b/src/pages/CafeSearch/CafeSearch.css new file mode 100644 index 0000000..4b85acf --- /dev/null +++ b/src/pages/CafeSearch/CafeSearch.css @@ -0,0 +1,59 @@ +.search-container { + width: 100%; +} + +.search-list { + width: 90%; + margin: 5% auto; + display: flex; + flex-direction: column; +} + +.search-link { + text-decoration: none; + color: black; +} + +.search-details { + display: flex; + flex-direction: row; + margin: 2% 0; + align-items: center; +} + +.search-detail { + align-items: center; + justify-content: space-between; + margin: 0 5%; +} + +.search-status-time { + display: flex; + flex-direction: row; + margin-top: 2%; +} + +.search-name { + color: #000; + font-family: "Bold"; + font-size: 0.875rem; +} + +.search-status { + color: #4f4f4f; + font-family: "Bold"; + font-size: 0.75rem; +} + +.search-time { + color: #000; + font-family: "ExtraLight"; + font-size: 0.75rem; + margin-top: 1.5%; +} + +.search-address { + color: #838383; + font-family: "ExtraLight"; + font-size: 0.75rem; +} diff --git a/src/pages/CafeSearch/CafeSearch.jsx b/src/pages/CafeSearch/CafeSearch.jsx new file mode 100644 index 0000000..be7a0a1 --- /dev/null +++ b/src/pages/CafeSearch/CafeSearch.jsx @@ -0,0 +1,79 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import search_cafe1 from "../../assets/images/search_cafe1.svg"; +import search_cafe2 from "../../assets/images/search_cafe2.svg"; +import search_cafe3 from "../../assets/images/search_cafe3.svg"; +import Header from "../../components/views/Header/Header2"; +import "./CafeSearch.css"; + +function CafeSearch() { + const dummyStoreItems = [ + { + idx: 1, + name: "카페 오르다", + address: "경기도 부천시 지봉로 1", + status: "영업중", + time: "23:00에 영업종료", + imgUrl: search_cafe1, + }, + { + idx: 2, + name: "카페 하랑", + address: "경기도 부천시 지봉로 2", + status: "영업종료", + time: "09:00에 영업시작", + imgUrl: search_cafe2, + }, + { + idx: 3, + name: "카페 드림", + address: "경기도 부천시 지봉로 3", + status: "영업중", + time: "22:00에 영업종료", + imgUrl: search_cafe3, + }, + ]; + + return ( +
+
+
+ {dummyStoreItems.map((item) => ( +
+ +
+ search_cafe +
+
{item.name}
+
+
+ {item.status} +
+    +
{item.time}
+
+
{item.address}
+
+
+ +
+ ))} +
+
+ ); +} + +export default CafeSearch; diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css index 9ea0d67..6d55b82 100644 --- a/src/pages/HomePage/Homepage.css +++ b/src/pages/HomePage/Homepage.css @@ -75,14 +75,9 @@ /* event */ .event { width: 90%; - height: 10%; margin: 0 auto; } -.event-link { - width: 100%; - height: 100%; -} .event-icon { width: 100%; } @@ -96,6 +91,8 @@ .very-pick-text { width: 100%; font-family: "Bold"; + margin-top: 4%; + margin-bottom: 2.5%; font-size: 1.25rem; } @@ -106,11 +103,32 @@ .very-pick-item { width: 100%; text-decoration: none; + overflow: hidden; +} + +.pick-detail-wrapper { + width: 100%; + display: flex; + flex-direction: column; + box-shadow: 0.25px 0.25rem 0.2rem rgba(0, 0, 0, 0.2); /* 그림자 추가 */ + border-radius: 0.5rem; + margin: 0 0 1rem 0; +} + +.pick-detail { + width: 100%; /* Set the fixed width for the image */ + height: 7.625rem; + border-radius: 0.5rem 0.5rem 0 0; + object-fit: cover; /* Ensure the image covers the entire container */ +} + +.pick-info { + height: 5rem; + margin: 0.62rem 0.69rem; } .pick-name { width: 100%; - margin: 0.5rem 0 0 0; font-size: 1.0625rem; font-family: "Medium"; color: black; @@ -119,11 +137,28 @@ .pick-address { width: 100%; font-size: 0.75rem; + margin-top: 0.2rem; font-family: "Regular"; color: #838383; } -.pick-detail { + +.pick-event-info { + display: flex; + margin-top: 0.7rem; +} + +.pick-eventTextIcon { + width: 1rem; /* Set a fixed width for the icon if needed */ + height: 1.125rem; + margin-right: 0.5rem; /* Adjust margin as needed */ +} + +.pick-eventText { width: 100%; + font-size: 0.75rem; + margin-top: 0.1rem; + font-family: "Bold"; + color: #d82356; } /* 사업자 정보 */ diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx index dad9279..cc47d99 100644 --- a/src/pages/HomePage/Homepage.jsx +++ b/src/pages/HomePage/Homepage.jsx @@ -1,19 +1,24 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { Link } from "react-router-dom"; -import cardi_cafe from "../../assets/images/cafe1.svg"; -import milda_cafe from "../../assets/images/cafe2.svg"; +import { useRecoilValue } from "recoil"; +import orda_cafe from "../../assets/images/cafe1.svg"; +import harang_cafe from "../../assets/images/cafe2.svg"; +import dream_cafe from "../../assets/images/cafe3.svg"; import event_icon from "../../assets/images/event_icon.svg"; +import eventTextIcon from "../../assets/images/icon_eventText.svg"; import profile_icon from "../../assets/images/profile_icon.svg"; import Header from "../../components/views/Header/Header"; import NavBar from "../../components/views/NavBar/NavBar"; import NavBar2 from "../../components/views/NavBar/NavBar2"; +import { loginState } from "../../recoil/user"; import "./Homepage.css"; function Homepage() { - const [isLoggedIn, setIsLoggedIn] = useState(false); + //const [isLoggedIn, setIsLoggedIn] = useState(false); // const [quickOrderItems, setQuickOrderItems] = useState([]); // 바로주문 // const [eventImages, setEventImages] = useState([]); // evetn 배너 // const [storeData, setsStoreData] = useState([]); // verypick + const isLoggedIn = useRecoilValue(loginState); let eventCase = { event1: { @@ -49,21 +54,25 @@ function Homepage() { const dummyVeryPickItems = [ { id: 1, - name: "까르디에스프레소바", - address: "경기 부천시 부일로 705 1층 101호(역곡동, 역곡동 50-6)", - img: cardi_cafe, + name: "카페오르다", + address: "경기 부천시 지봉로 46 백호빌딩 2층", + img: orda_cafe, + eventText: "테이크아웃 시 아메리카노 1,700원", }, { id: 2, - name: "밀다", - address: "경기도 부천시 지봉로71", - img: milda_cafe, + name: "카페하랑 부천점", + address: "경기도 부천시 지봉로 43", + img: harang_cafe, + eventText: "강의실에서 주문하고, 바로 가져가세요!", }, { id: 3, - name: "까르디에스프레소바", - address: "경기 부천시 부일로 705 1층 101호(역곡동, 역곡동 50-6)", - img: cardi_cafe, + name: "카페드림 가톨릭대학교 성심교정 중앙도서관점", + address: + "경기도 부천시 지봉로 43 가톨릭대학교 중앙도서관 1층 15베리타스관", + img: dream_cafe, + eventText: "기말고사 화이팅!", }, ]; @@ -110,26 +119,6 @@ function Homepage() { // }); // }, []); - useEffect(() => { - // 서버에서 로그인 상태를 확인하는 비동기 함수 - // const checkLoginStatus = async () => { - // try { - // // axios를 사용하여 서버로 HTTP GET 요청 보내기 - // const response = await axios.get(""); /* http://localhost:8080/ */ - - // // 서버 응답 데이터에서 로그인 상태를 가져와 업데이트 - // setIsLoggedIn(response.data.isLoggedIn); - // } catch (error) { - // // 에러 처리 - // console.error("로그인 상태 확인 중 에러 발생:", error); - // } - // }; - - // // 초기 로딩 시에 서버에서 로그인 상태 확인 - // checkLoginStatus(); - setIsLoggedIn(false); //false-로그아웃, ture-로그인 - }, []); - return (
@@ -213,14 +202,26 @@ function Homepage() { to={`/packagingStatus?storeId=${item.id}`} className="very-pick-item" > - -
{item.name}
-
{item.address}
- veryPickimg + +
+ veryPickimg +
+
{item.name}
+
{item.address}
+
+ eventTextIcon +
{item.eventText}
+
+
+
))} diff --git a/src/pages/LoginPage/Login.jsx b/src/pages/LoginPage/Login.jsx index 365ec39..a625b67 100644 --- a/src/pages/LoginPage/Login.jsx +++ b/src/pages/LoginPage/Login.jsx @@ -38,6 +38,7 @@ function KaKaoLoginBtn() { const handleKakaoLogin = () => { window.location.href = `${process.env.REACT_APP_KAKAO_LOGIN}`; //console.log(`${process.env.REACT_APP_KAKAO_LOGIN}`); + console.log(document.cookie); }; return ( diff --git a/src/pages/LoginPage/LoginHandler.jsx b/src/pages/LoginPage/LoginHandler.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/MyPage/CouponPage.css b/src/pages/MyPage/CouponPage.css index e69de29..657ebdf 100644 --- a/src/pages/MyPage/CouponPage.css +++ b/src/pages/MyPage/CouponPage.css @@ -0,0 +1,48 @@ +.coupon-div { + width: 100%; + margin: 0 auto; +} + +.coupon-list { + margin-top: 2rem; + width: 90%; + margin: 10% auto; +} + +.coupon-item { + width: 100%; + display: flex; + flex-direction: column; + border-radius: 0.5rem; + border: 1px solid #bababa; + margin: 4% 0; + padding: 5% 0; +} + +.coupon-item-name { + margin: 1% 4%; + font-size: 1.625rem; + font-family: "ExtraBold"; + color: #d82356; +} + +.coupon-item-content { + margin: 2% 4%; + font-size: 0.875rem; + font-family: "ExtraBold"; + color: #4f4f4f; +} + +.coupon-item-date { + margin: 0 4%; + font-size: 0.6875rem; + font-family: "SemiBold"; + color: #838383; +} + +.coupon-item-limit { + margin: 0 4%; + font-size: 0.6875rem; + font-family: "SemiBold"; + color: #838383; +} diff --git a/src/pages/MyPage/CouponPage.jsx b/src/pages/MyPage/CouponPage.jsx index 4aa88c8..7f6383f 100644 --- a/src/pages/MyPage/CouponPage.jsx +++ b/src/pages/MyPage/CouponPage.jsx @@ -1,12 +1,43 @@ import React from "react"; -import Header from "../../components/views/Header/Header"; +import Header from "../../components/views/Header/Header2"; import "./CouponPage.css"; function CouponPage() { + const dummyCouponItems = [ + { + idx: 1, + name: "500원 할인 쿠폰", + content: "레디베리 x CUK 쿠폰", + date: "2023년 12월 18일까지", + limit: "전 메뉴 사용 가능", + }, + { + idx: 2, + name: "깜짝 할인 쿠폰", + content: "내가 주고 싶어서 주는 쿠폰", + date: "2023년 11월 19일까지", + limit: "아샷추만 사용 가능", + }, + + // 추가 아이템들 + ]; + return (
-
-
쿠폰은 백에서 어떻게 가져올까유....
+
+ +
+
+ {dummyCouponItems.map((item) => ( +
+
{item.name}
+
{item.content}
+
{item.date}
+
{item.limit}
+
+ ))} +
+
); } diff --git a/src/pages/MyPage/EventingPage.jsx b/src/pages/MyPage/EventingPage.jsx index eae5b9f..996edcd 100644 --- a/src/pages/MyPage/EventingPage.jsx +++ b/src/pages/MyPage/EventingPage.jsx @@ -5,6 +5,21 @@ import Header from "../../components/views/Header/Header"; import "./EventingPage.css"; function EventingPage() { + // const dummyEventingItems = [ + // { + // events: [ + // { + // idx: 1, + // imgUrl: eventing1, + // }, + // { + // idx: 2, + // imgUrl: eventing1, + // }, + // ], + // }, + // ]; + return (
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index d2535ce..c61fccd 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import profile_icon from "../../assets/images/profile_icon.svg"; -import Header from "../../components/views/Header/Header"; +import Header from "../../components/views/Header/Header2"; import "./MyPage.css"; function Mypage() { @@ -9,11 +9,19 @@ function Mypage() { useEffect(() => { setIsLoggedIn(true); + + // Axios.get("http://localhost:8080/api/v1/auth", { + // withCredentials: true, // default + // }).then((response) => { + // if (response.data) { + // console.log(response.data); + // } + // }); }, []); return (
-
+
diff --git a/src/pages/MyPage/PolicyPage.css b/src/pages/MyPage/PolicyPage.css index 3fdf0f0..e3a9b59 100644 --- a/src/pages/MyPage/PolicyPage.css +++ b/src/pages/MyPage/PolicyPage.css @@ -3,3 +3,19 @@ height: 100%; margin: 0 auto; } + +.myprofile-head { + width: 90%; + display: flex; + flex-direction: column; +} + +.terms-of-use, +.personal-info { + text-decoration: none; + color: black; + font-family: "Medium"; + font-size: 1.125rem; + align-self: flex-start; + margin: 3% 0; +} diff --git a/src/pages/MyPage/PolicyPage.jsx b/src/pages/MyPage/PolicyPage.jsx index 7ebdc4e..f44c291 100644 --- a/src/pages/MyPage/PolicyPage.jsx +++ b/src/pages/MyPage/PolicyPage.jsx @@ -1,12 +1,12 @@ import React from "react"; import { Link } from "react-router-dom"; -import Header from "../../components/views/Header/Header"; +import Header from "../../components/views/Header/Header2"; import "./PolicyPage.css"; function PolicyPage() { return (
-
+
서비스 이용약관
diff --git a/src/recoil/authAtoms.jsx b/src/recoil/authAtoms.jsx new file mode 100644 index 0000000..f038d0f --- /dev/null +++ b/src/recoil/authAtoms.jsx @@ -0,0 +1,13 @@ +// authAtoms.js + +import { atom } from "recoil"; + +export const isAuthenticatedState = atom({ + key: "isAuthenticatedState", + default: false, +}); + +export const accessTokenState = atom({ + key: "accessTokenState", + default: null, +}); diff --git a/src/recoil/user.jsx b/src/recoil/user.jsx new file mode 100644 index 0000000..115d44f --- /dev/null +++ b/src/recoil/user.jsx @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const loginState = atom({ + key: "loginState", + default: false, +}); From 0d12aa3dab2e37c04ea17a8d24a6b9a0723150e3 Mon Sep 17 00:00:00 2001 From: hhhhyelim Date: Sun, 19 Nov 2023 20:22:30 +0900 Subject: [PATCH 8/8] =?UTF-8?q?Fix:=20Header2=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CafeSearch/CafeSearch.jsx | 2 +- src/pages/MyPage/CouponPage.jsx | 2 +- src/pages/MyPage/MyPage.jsx | 2 +- src/pages/MyPage/PolicyPage.jsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/CafeSearch/CafeSearch.jsx b/src/pages/CafeSearch/CafeSearch.jsx index be7a0a1..d2a13aa 100644 --- a/src/pages/CafeSearch/CafeSearch.jsx +++ b/src/pages/CafeSearch/CafeSearch.jsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; import search_cafe1 from "../../assets/images/search_cafe1.svg"; import search_cafe2 from "../../assets/images/search_cafe2.svg"; import search_cafe3 from "../../assets/images/search_cafe3.svg"; -import Header from "../../components/views/Header/Header2"; +import Header from "../../components/views/Header/Header"; import "./CafeSearch.css"; function CafeSearch() { diff --git a/src/pages/MyPage/CouponPage.jsx b/src/pages/MyPage/CouponPage.jsx index 7f6383f..22c59f7 100644 --- a/src/pages/MyPage/CouponPage.jsx +++ b/src/pages/MyPage/CouponPage.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Header from "../../components/views/Header/Header2"; +import Header from "../../components/views/Header/Header"; import "./CouponPage.css"; function CouponPage() { diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index c61fccd..23fa983 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import profile_icon from "../../assets/images/profile_icon.svg"; -import Header from "../../components/views/Header/Header2"; +import Header from "../../components/views/Header/Header"; import "./MyPage.css"; function Mypage() { diff --git a/src/pages/MyPage/PolicyPage.jsx b/src/pages/MyPage/PolicyPage.jsx index f44c291..1ef57fa 100644 --- a/src/pages/MyPage/PolicyPage.jsx +++ b/src/pages/MyPage/PolicyPage.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Link } from "react-router-dom"; -import Header from "../../components/views/Header/Header2"; +import Header from "../../components/views/Header/Header"; import "./PolicyPage.css"; function PolicyPage() {