From 7ed9d777affa3af98f27e89a75f40ddc56f48f5c Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 13 Feb 2024 13:58:47 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Feat:=20=EB=A9=A4=EB=B2=84=EC=8B=AD=20?= =?UTF-8?q?=ED=8F=AC=EC=9D=B8=ED=8A=B8=20UI=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 4 + .../views/PageComponent/OrderStorage.jsx | 4 +- .../views/PointStateBox/PointStateBox.css | 79 +++++++++++++++ .../views/PointStateBox/PointStateBox.jsx | 34 +++++++ src/pages/MembershipPage/MembershipPage.css | 82 ++++++++++++++-- src/pages/MembershipPage/MembershipPage.jsx | 98 ++++++++++++++++--- src/pages/TestPage/TestPage.jsx | 15 --- 7 files changed, 278 insertions(+), 38 deletions(-) create mode 100644 src/components/views/PointStateBox/PointStateBox.css create mode 100644 src/components/views/PointStateBox/PointStateBox.jsx delete mode 100644 src/pages/TestPage/TestPage.jsx diff --git a/src/App.js b/src/App.js index dd520d3..0bf4d11 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import MyPage from "../src/pages/MyPage/MyPage"; import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage"; import "./App.css"; // import loading from "./assets/animation/loading.json"; +import MembershipPage from "../src/pages/MembershipPage/MembershipPage"; import ic_berry from "./assets/images/ic_berry.png"; import Auth from "./hoc/auth"; import useInterval from "./hooks/useInterval"; @@ -57,6 +58,7 @@ function App() { const NewMyprofilePage = Auth(MyprofilePage, true); const NewOrderProcessPage = Auth(OrderProcessPage, true); + const NewMembershipPage = Auth(MembershipPage, true); const NewCouponPage = Auth(CouponPage, true); const NewCartPage = Auth(CartPage, true); const NewPaymentPage = Auth(PaymentPage, true); @@ -147,6 +149,8 @@ function App() { } /> {/* 마이페이지-쿠폰 확인 페이지 */} } /> + {/* 멤버쉽 포인트 페이지 */} + } /> {/* 장바구니 페이지 */} } /> {/* 결제 페이지 */} diff --git a/src/components/views/PageComponent/OrderStorage.jsx b/src/components/views/PageComponent/OrderStorage.jsx index 7a81a5a..99c4b06 100644 --- a/src/components/views/PageComponent/OrderStorage.jsx +++ b/src/components/views/PageComponent/OrderStorage.jsx @@ -1,12 +1,12 @@ import React from "react"; import { useNavigate } from "react-router-dom"; -import "./OrderStorage.css"; +import { IMAGES } from "../../../constants/images"; import useFetchNewOrderHistory from "../../../hooks/useFetchNewOrderHistory"; import useFetchOldOrderHistory from "../../../hooks/useFetchOldOrderHistory"; import Header from "../Header/Header"; import NavBar from "../NavBar/NavBar"; import StateBox from "../StateBox/StateBox"; -import { IMAGES } from "../../../constants/images"; +import "./OrderStorage.css"; function OrderStorage() { const navigate = useNavigate(); diff --git a/src/components/views/PointStateBox/PointStateBox.css b/src/components/views/PointStateBox/PointStateBox.css new file mode 100644 index 0000000..6b72774 --- /dev/null +++ b/src/components/views/PointStateBox/PointStateBox.css @@ -0,0 +1,79 @@ +.membership-box-container { + width: 100%; + height: 7.5rem; + background-color: #fff; + border-bottom: 0.25rem solid #dadada; + display: flex; + align-items: center; +} + +.membership-box { + display: flex; + align-items: center; + flex-direction: row; + width: 87.8%; + margin-left: auto; + margin-right: auto; + height: 70%; + margin: 0 auto; +} + +/* 이미지 박스 뒷배경 */ +.membership-box-img { + width: 3.25rem; + height: 3.25rem; + background-color: #d82356; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; +} +.membership-box-img img { + width: 1.62431rem; + height: 1.62431rem; +} +.membership-box-img-accumulate-color { + background-color: #d82356; +} +.membership-box-img-use-color { + background-color: #d9d9d9; +} + +.point-box-content { + height: 100%; + margin-left: 0.75rem; + margin-right: auto; + display: flex; + justify-content: center; + flex-direction: column; +} + +.point-box-use-name { + display: flex; + color: #000; + font-size: 0.9375rem; + text-decoration: none; + align-items: center; + white-space: nowrap; + font-family: "Pretendard Variable"; + font-weight: 700; +} + +.point-box-span { + color: #838383; + font-size: 0.5rem; + text-decoration: none; + white-space: nowrap; + font-family: "Pretendard Variable"; + font-weight: 600; + line-height: 130%; /* 0.65rem */ + letter-spacing: 0.015rem; +} + +.point-box-point-span { + color: #4f4f4f; + + text-align: right; + font-size: 1.25rem; + font-weight: 700; +} diff --git a/src/components/views/PointStateBox/PointStateBox.jsx b/src/components/views/PointStateBox/PointStateBox.jsx new file mode 100644 index 0000000..5923409 --- /dev/null +++ b/src/components/views/PointStateBox/PointStateBox.jsx @@ -0,0 +1,34 @@ +import berryWhite from "../../../assets/images/ic_berry_white.png"; +import "./PointStateBox.css"; + +const PointStateBox = ({ status, point, store, date }) => { + const stateText = status ? "적립" : "사용"; + return ( +
+
+
+ berry +
+ +
+
{stateText}
+
+ {stateText}일자: {date} +
+
+ {stateText}매장: {store} +
+
+
{point} P
+
+
+ ); +}; + +export default PointStateBox; diff --git a/src/pages/MembershipPage/MembershipPage.css b/src/pages/MembershipPage/MembershipPage.css index e766fc3..baeaa6f 100644 --- a/src/pages/MembershipPage/MembershipPage.css +++ b/src/pages/MembershipPage/MembershipPage.css @@ -1,31 +1,44 @@ .membershippage-div { width: 100%; - height: 100%; + height: 93vh; background-color: #ffffff; /* 수정된 헤더 기준으로 */ - margin-top: 8.44rem; + /* 8.44-1.5rem */ display: flex; align-items: center; flex-direction: column; -} + white-space: nowrap; + padding-top: 4.44rem; + padding-bottom: 5.0625rem; +} +.membershippage-point-box-container { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 1.5rem; + border-top: 0.3rem solid #d82356; + overflow-y: auto; +} +/* 포인트 박스 */ .membershippage-point-box-wrapper { display: flex; align-items: center; flex-direction: column; width: 87.8%; height: 10.5rem; - margin: 0 auto; + margin-top: 2.5rem; + margin-left: auto; + margin-right: auto; border-radius: 0.625rem; background: #d82356; box-shadow: 0px 0px 8px 2px rgba(216, 35, 86, 0.3); } - .membershippage-point-box-top-wrapper { display: flex; justify-content: space-between; margin-top: 2.19rem; - width: 90%; + width: 80%; color: #fff; font-family: "Pretendard"; font-size: 2rem; @@ -33,11 +46,60 @@ font-weight: 700; line-height: normal; } -/* .membershippage-point-box-top-img-wrapper{ - width: 6.125rem; - height: 1.5rem; -} */ + .membershippage-point-box-wrapper img { height: 1.22294rem; padding-top: 0.44rem; } + +.membershippage-point-box-bottom-wrapper { + margin-top: 1.31rem; + margin-bottom: 1.56rem; + width: 80%; + height: 3.0625rem; + border-radius: 0.3125rem; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + color: var(--838383, #fff); + text-align: center; + font-size: 0.75rem; + font-weight: 500; + display: flex; + justify-content: center; + align-items: center; +} +.membershippage-point-box-bottom-wrapper ul { + display: flex; + flex-direction: row; + justify-content: center; + list-style: none; + width: 100%; + margin: 0; + padding: 0; +} +/* .membershippage-point-box-bottom-wrapper li{ + margin: 0 1.735rem; +} */ +/* 사용내역 */ +.membershippage-use-point-box-wrapper { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + margin-top: 2.44rem; + border-radius: 0.625rem; +} +.membershippage-use-point-box-title { + width: 87.8%; + margin-left: auto; + margin-right: auto; + color: var(--title, #2e2d2d); + font-size: 1rem; + font-weight: 700; + line-height: 130%; /* 1.3rem */ + letter-spacing: -0.01rem; +} + +.membershippage-use-point-box-content { + width: 100%; +} diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx index 07a073e..3347089 100644 --- a/src/pages/MembershipPage/MembershipPage.jsx +++ b/src/pages/MembershipPage/MembershipPage.jsx @@ -5,14 +5,15 @@ import Header from "../../components/views/Header/Header"; import NavBar from "../../components/views/NavBar/NavBar"; import { IMAGES } from "../../constants/images"; // import useFetchUserInfo from "../../hooks/useFetchUserInfo"; +import PointStateBox from "../../components/views/PointStateBox/PointStateBox"; import "./MembershipPage.css"; function MembershipPage() { // const [isAuth] = useRecoilState(isAuthenticatedState); // const { name: userName } = useFetchUserInfo(); - + const point = 10000; return ( -
+
-
-
-
- logoWhite +
+ {/* 멤버쉽 박스 */} +
+ {/* 맵버쉽 박스 윗부분_로고&포인트 */} +
+
+ logoWhite +
+
{point} P
+
+ {/* 멤버쉽 박스 아랫부분_쿠폰함&FAQ */} +
+
    +
  • 쿠폰함
    • +
  • |
    • +
  • FAQ
    • +
-
P
- dk -
- dldd + {/* 포인트 사용 내역 */} +
+
+ 포인트 사용내역 +
+ {/* {newStorageList?.length ? ( + newStorageList?.map((e, i) => ( +
+ handleNavigation(event, e.orderId, e.progress) + } + style={{ textDecoration: "none" }} + > */} + {/* 매핑될 요소 */} +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + {/*
+ )) + ) : ( +
+ empty + 비어있습니다 +
+ )} */} +
+ + -
+
); } diff --git a/src/pages/TestPage/TestPage.jsx b/src/pages/TestPage/TestPage.jsx deleted file mode 100644 index 02df1cb..0000000 --- a/src/pages/TestPage/TestPage.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import Header from "../../components/views/Header/Header"; -import NavBar from "../../components/views/NavBar/NavBar"; - -function TestPage() { - return ( -
-
-
hello! testPage
- -
- ); -} - -export default TestPage; From 67553222554abf9ae115369f1dab1460b568a5d0 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 13 Feb 2024 14:13:05 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Feat:=20=EB=A9=A4=EB=B2=84=EC=8B=AD=20?= =?UTF-8?q?=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EB=B9=88=20=EB=82=B4=EC=97=AD?= =?UTF-8?q?=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/PointStateBox/PointStateBox.jsx | 5 +- src/pages/MembershipPage/MembershipPage.css | 29 ++++++ src/pages/MembershipPage/MembershipPage.jsx | 90 ++++++++----------- 3 files changed, 68 insertions(+), 56 deletions(-) diff --git a/src/components/views/PointStateBox/PointStateBox.jsx b/src/components/views/PointStateBox/PointStateBox.jsx index 5923409..7556bbe 100644 --- a/src/components/views/PointStateBox/PointStateBox.jsx +++ b/src/components/views/PointStateBox/PointStateBox.jsx @@ -1,6 +1,5 @@ -import berryWhite from "../../../assets/images/ic_berry_white.png"; +import { IMAGES } from "../../../constants/images"; import "./PointStateBox.css"; - const PointStateBox = ({ status, point, store, date }) => { const stateText = status ? "적립" : "사용"; return ( @@ -13,7 +12,7 @@ const PointStateBox = ({ status, point, store, date }) => { : "membership-box-img-use-color" }`} > - berry + berry
diff --git a/src/pages/MembershipPage/MembershipPage.css b/src/pages/MembershipPage/MembershipPage.css index baeaa6f..24ec687 100644 --- a/src/pages/MembershipPage/MembershipPage.css +++ b/src/pages/MembershipPage/MembershipPage.css @@ -103,3 +103,32 @@ .membershippage-use-point-box-content { width: 100%; } + +/* 빈 포인트 내역*/ + +/* 빈 주문 내역 */ +.membershippage-empty-order-wrapper { + display: flex; + width: fit-content; + height: fit-content; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.membershippage-empty-img { + display: flex; + width: 8.625rem; + height: 8.625rem; +} + +.membershippage-empty-text { + color: var(--title, #2e2d2d); + text-align: center; + font-family: "Pretendard"; + font-size: 1.25rem; + font-style: normal; + font-weight: 800; + line-height: 130%; /* 1.625rem */ + letter-spacing: -0.0125rem; +} diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx index 3347089..f6fb33b 100644 --- a/src/pages/MembershipPage/MembershipPage.jsx +++ b/src/pages/MembershipPage/MembershipPage.jsx @@ -12,6 +12,20 @@ function MembershipPage() { // const [isAuth] = useRecoilState(isAuthenticatedState); // const { name: userName } = useFetchUserInfo(); const point = 10000; + const membershipList = [ + // { + // status: true, + // point: "+1000", + // store: "오르다", + // date: "2023-11-25 19:09", + // }, + // { + // status: false, + // point: "-1000", + // store: "오르다", + // date: "2023-11-25 19:09", + // }, + ]; return (
포인트 사용내역
- {/* {newStorageList?.length ? ( - newStorageList?.map((e, i) => ( + {membershipList?.length ? ( + membershipList?.map((e, i) => ( + // {/* 매핑될 요소 */}
- handleNavigation(event, e.orderId, e.progress) - } + className="membershippage-use-point-box-content" + // onClick={(event) => + // handleNavigation(event, e.orderId, e.progress) + // } style={{ textDecoration: "none" }} - > */} - {/* 매핑될 요소 */} -
- -
-
- -
-
- -
-
- -
-
- -
- - {/*
+ > + + )) ) : ( -
- empty - 비어있습니다 +
+ empty + 내역이 없습니다.
- )} */} + )}
From 9d66955acec9a5d5ed607c0b71aeb5a1d4005a13 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 13 Feb 2024 14:34:25 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Docs:=201000=EC=9B=90=EB=8B=A8=EC=9C=84=20,?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/PointStateBox/PointStateBox.jsx | 4 +- src/pages/MembershipPage/MembershipPage.jsx | 44 ++++++++++--------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/views/PointStateBox/PointStateBox.jsx b/src/components/views/PointStateBox/PointStateBox.jsx index 7556bbe..1db8a1c 100644 --- a/src/components/views/PointStateBox/PointStateBox.jsx +++ b/src/components/views/PointStateBox/PointStateBox.jsx @@ -24,7 +24,9 @@ const PointStateBox = ({ status, point, store, date }) => { {stateText}매장: {store} -
{point} P
+
+ {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} P +
); diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx index f6fb33b..34039a1 100644 --- a/src/pages/MembershipPage/MembershipPage.jsx +++ b/src/pages/MembershipPage/MembershipPage.jsx @@ -13,18 +13,18 @@ function MembershipPage() { // const { name: userName } = useFetchUserInfo(); const point = 10000; const membershipList = [ - // { - // status: true, - // point: "+1000", - // store: "오르다", - // date: "2023-11-25 19:09", - // }, - // { - // status: false, - // point: "-1000", - // store: "오르다", - // date: "2023-11-25 19:09", - // }, + { + status: true, + point: "+1000", + store: "오르다", + date: "2023-11-25 19:09", + }, + { + status: false, + point: "-1000", + store: "오르다", + date: "2023-11-25 19:09", + }, ]; return (
@@ -43,7 +43,9 @@ function MembershipPage() {
logoWhite
-
{point} P
+
+ {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} P +
{/* 멤버쉽 박스 아랫부분_쿠폰함&FAQ */}
@@ -78,13 +80,15 @@ function MembershipPage() {
)) ) : ( -
- empty - 내역이 없습니다. +
+ empty + + 내역이 없습니다. +
)}
From cebf0a6783ed9ecde9b8097aa1fbd5a35fbde046 Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 13 Feb 2024 17:58:58 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Docs:=20homepage=20=ED=91=B8=ED=84=B0=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/Homepage.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx index 90489e9..658127f 100644 --- a/src/pages/HomePage/Homepage.jsx +++ b/src/pages/HomePage/Homepage.jsx @@ -122,10 +122,9 @@ const HomePage = () => {
사업자등록번호: 738-32-01406
- 대표: 오남택  |  고객센터: 010-9295-5340 + 대표: 오남택  |  고객센터: 070-8064-6199
- 주소: 서울특별시 서대문구 세검정로1길 95, 115동 203호(홍은동, - 벽산아파트) + 주소: 경기도 부천시 원미구 지봉로 43, 산학협력관 창업 랩실(역곡동, 가톨릭대학교 성심교정)
E-Mail: ohnt0307@gmail.com
From ddb3150f01127d165a98fdaec8bd399249e3cd5e Mon Sep 17 00:00:00 2001 From: KKangHHee <137751841+KKangHHee@users.noreply.github.com> Date: Tue, 13 Feb 2024 20:24:36 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Docs:=20homepage=20=EA=B0=80=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/Homepage.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css index 031c4b6..20f230c 100644 --- a/src/pages/HomePage/Homepage.css +++ b/src/pages/HomePage/Homepage.css @@ -109,6 +109,7 @@ box-shadow: 0.25px 0.25rem 0.2rem rgba(0, 0, 0, 0.2); border-radius: 0.5rem; text-decoration: none; + flex-direction: row; } .home_individual_quick_order_item {