Merge pull request #204 from KKangHHee/test

Feat: 멤버십 포인트 UI 디자인

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() {
             <Route path="/order" element={<NewOrderProcessPage />} />
             {/* 마이페이지-쿠폰 확인 페이지 */}
             <Route path="/coupon" element={<NewCouponPage />} />
+            {/* 멤버쉽 포인트 페이지 */}
+            <Route path="/membership" element={<NewMembershipPage />} />
             {/* 장바구니 페이지 */}
             <Route path="/cart" element={<NewCartPage />} />
             {/* 결제 페이지 */}

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();

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;
+}

src/components/views/PointStateBox/PointStateBox.jsx

@@ -0,0 +1,35 @@
+import { IMAGES } from "../../../constants/images";
+import "./PointStateBox.css";
+const PointStateBox = ({ status, point, store, date }) => {
+  const stateText = status ? "적립" : "사용";
+  return (
+    <div className="membership-box-container">
+      <div className="membership-box">
+        <div
+          className={`membership-box-img ${
+            status
+              ? "membership-box-img-accumulate-color"
+              : "membership-box-img-use-color"
+          }`}
+        >
+          <img src={IMAGES.berryWhite} alt="berry" />
+        </div>
+
+        <div className="point-box-content">
+          <div className="point-box-use-name">{stateText}</div>
+          <div className="point-box-span">
+            {stateText}일자: {date}
+          </div>
+          <div className="point-box-span">
+            {stateText}매장: {store}
+          </div>
+        </div>
+        <div className="point-box-point-span">
+          {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} P
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PointStateBox;

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 {

src/pages/HomePage/Homepage.jsx

@@ -122,10 +122,9 @@ const HomePage = () => {
           <br />
           사업자등록번호: 738-32-01406
           <br />
-          대표: 오남택 &nbsp;|&nbsp; 고객센터: 010-9295-5340
+          대표: 오남택 &nbsp;|&nbsp; 고객센터: 070-8064-6199
           <br />
-          주소: 서울특별시 서대문구 세검정로1길 95, 115동 203호(홍은동,
-          벽산아파트)
+          주소: 경기도 부천시 원미구 지봉로 43, 산학협력관 창업 랩실(역곡동, 가톨릭대학교 성심교정)
           <br />
           E-Mail: [email protected]
           <br />

src/pages/MembershipPage/MembershipPage.css

@@ -1,43 +1,134 @@
 .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;
   font-style: normal;
   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%;
+}
+
+/* 빈 포인트 내역*/
+
+/* 빈 주문 내역  */
+.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;
+}