Merge pull request #205 from imi21123/test

Feat: Header 변경, 페이지 height 변경, navigate 연결
readyvery · Feb 14, 2024 · 1fb185f · 1fb185f
2 parents d0be8c6 + 477a7ef
commit 1fb185f
Show file tree

Hide file tree

Showing 25 changed files with 279 additions and 331 deletions.
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -44,30 +44,15 @@
   font-weight: 700;
 }
 
-.top_header_page div {
+/* .top_header_page div {
   width: 4rem;
-}
-
-.header-link {
-  margin-top: 1rem;
-  margin-left: 2rem;
-}
+} */
 
 .header_back {
   width: 0.8125rem;
   height: 1.5625rem;
-  /* margin-left: 1.56rem; */
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.close-link {
-  width: 1.51144rem;
-  height: 1.54225rem;
   margin-top: auto;
   margin-bottom: auto;
-  margin-right: auto;
-  margin-left: 1.56rem;
 }
 
 .home-link {

diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -47,58 +47,41 @@ const Header = ({ headerProps }) => {
       {/* headerProps가 주어진 경우 */}
       {headerProps ? (
         <header className="top_header_page">
-          {/* isClosed가 false인 경우 */}
-          {!headerProps.isClose ? (
-            <img
-              src={IMAGES.headerBack}
-              alt="back"
-              className="header_back"
-              // onClick={() => handleGoBack()}
-              onClick={() => navigate(headerProps.linkTo, { replace: true })}
-            />
-          ) : (
-            // isClosed가 true인 경우면 빈 div
-            <div></div>
-          )}
-          {/* 페이지 이름 표시 */}
+          <img
+            src={IMAGES.headerBack}
+            alt="back"
+            className="header_back"
+            // onClick={() => handleGoBack()}
+            onClick={() => navigate(headerProps.linkTo, { replace: true })}
+          />
           <span>{headerProps.pageName}</span>
-          {/* isClosed가 true인 경우 */}
-          {headerProps.isClose ? (
-            <img
-              src={IMAGES.headerClose}
-              alt="close"
-              className="close-link"
-              onClick={() => navigate(headerProps.linkTo, { replace: true })}
-            />
-          ) : (
-            <div className="homeAndCart">
-              {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}
-              {!isCartPage ? (
-                <div>
-                  <img
-                    src={IMAGES.headerCart}
-                    alt="cart"
-                    className="header_cart"
-                    onClick={() => navigate(`/cart`, { replace: true })}
-                  />
+          <div className="homeAndCart">
+            {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}
+            {!isCartPage ? (
+              <div>
+                <img
+                  src={IMAGES.headerCart}
+                  alt="cart"
+                  className="header_cart"
+                  onClick={() => navigate(`/cart`, { replace: true })}
+                />
 
-                  <img
-                    src={IMAGES.headerHome}
-                    alt="home"
-                    className="header_home1"
-                    onClick={() => navigate(`/`, { replace: true })}
-                  />
-                </div>
-              ) : (
                 <img
                   src={IMAGES.headerHome}
                   alt="home"
-                  className="header_home2"
+                  className="header_home1"
                   onClick={() => navigate(`/`, { replace: true })}
                 />
-              )}
-            </div>
-          )}
+              </div>
+            ) : (
+              <img
+                src={IMAGES.headerHome}
+                alt="home"
+                className="header_home2"
+                onClick={() => navigate(`/`, { replace: true })}
+              />
+            )}
+          </div>
         </header>
       ) : (
         // headerProps가 주어지지 않은 경우

diff --git a/src/components/views/PageComponent/OrderStorage.jsx b/src/components/views/PageComponent/OrderStorage.jsx
@@ -37,9 +37,7 @@ function OrderStorage() {
 
   return (
     <section className="order_storage">
-      <Header
-        headerProps={{ pageName: "주문내역", isClose: false, linkTo: "/" }}
-      />
+      <Header headerProps={{ pageName: "주문내역", linkTo: "/" }} />
 
       <main className="order_storage__container">
         {newStorageList?.length || oldStorageList?.length ? (

diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx
@@ -127,7 +127,6 @@ const CartPage = () => {
       <Header
         headerProps={{
           pageName: "장바구니",
-          isClose: false,
           linkTo:
             !storeId ||
             isNaN(parseInt(storeId, 10)) ||

diff --git a/src/pages/MembershipPage/MembershipPage.jsx b/src/pages/MembershipPage/MembershipPage.jsx
@@ -31,7 +31,6 @@ function MembershipPage() {
       <Header
         headerProps={{
           pageName: "멤버십",
-          isClose: false,
           linkTo: "/",
         }}
       />

diff --git a/src/pages/MyPage/CouponPage/CouponPage.jsx b/src/pages/MyPage/CouponPage/CouponPage.jsx
@@ -12,7 +12,6 @@ function CouponPage() {
       <Header
         headerProps={{
           pageName: "할인쿠폰",
-          isClose: false,
           linkTo: "/mypage",
         }}
       />

diff --git a/src/pages/MyPage/CustomerServicePage/CustomerServicePage.jsx b/src/pages/MyPage/CustomerServicePage/CustomerServicePage.jsx
@@ -11,7 +11,6 @@ function CustomerServicePage() {
       <Header
         headerProps={{
           pageName: "고객센터",
-          isClose: false,
           linkTo: "/mypage",
         }}
       />

diff --git a/src/pages/MyPage/EventingPage/EventingPage.jsx b/src/pages/MyPage/EventingPage/EventingPage.jsx
@@ -44,7 +44,6 @@ function EventingPage() {
       <Header
         headerProps={{
           pageName: "진행 중인 이벤트",
-          isClose: false,
           linkTo: "/mypage",
         }}
       />

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -18,7 +18,6 @@ function Mypage() {
       <Header
         headerProps={{
           pageName: "마이페이지",
-          isClose: false,
           linkTo: "/",
         }}
       />
@@ -66,7 +65,12 @@ function Mypage() {
         >
           주문 내역
         </div>
-        <div className="mypage_profile_category">멤버쉽 내역</div>
+        <div
+          className="mypage_profile_category"
+          onClick={() => navigate(isAuth ? `/membership` : `/login`)}
+        >
+          멤버쉽 내역
+        </div>
       </div>
 
       <div className="mypage_profile_line"></div>

diff --git a/src/pages/MyPage/MyprofilePage/MyprofilePage.css b/src/pages/MyPage/MyprofilePage/MyprofilePage.css
@@ -1,6 +1,5 @@
 .myprofile {
   width: 100%;
-  height: 92vh;
   padding-top: 4.44rem;
 }
 
@@ -65,4 +64,5 @@
   font-weight: 500;
   line-height: normal;
   margin-top: 15rem;
+  margin-bottom: 5.25rem;
 }
diff --git a/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx b/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx
@@ -26,7 +26,6 @@ function MyprofilePage() {
       <Header
         headerProps={{
           pageName: "계정 관리",
-          isClose: false,
           linkTo: "/mypage",
         }}
       />

diff --git a/src/pages/MyPage/PolicyPage/PolicyPage.jsx b/src/pages/MyPage/PolicyPage/PolicyPage.jsx
@@ -11,7 +11,6 @@ function PolicyPage() {
       <Header
         headerProps={{
           pageName: "약관 및 정책",
-          isClose: false,
           linkTo: "/mypage",
         }}
       />

diff --git a/src/pages/MyPage/PolicyPage/PositionpolicyPage.jsx b/src/pages/MyPage/PolicyPage/PositionpolicyPage.jsx
@@ -8,7 +8,6 @@ function PositionpolicyPage() {
       <Header
         headerProps={{
           pageName: "위치 기반 서비스 이용약관",
-          isClose: false,
           linkTo: "/policy",
         }}
       />

diff --git a/src/pages/MyPage/PolicyPage/PrivacypolicyPage.jsx b/src/pages/MyPage/PolicyPage/PrivacypolicyPage.jsx
@@ -8,7 +8,6 @@ function PrivacypolicyPage() {
       <Header
         headerProps={{
           pageName: "개인정보 처리방침",
-          isClose: false,
           linkTo: "/policy",
         }}
       />

diff --git a/src/pages/MyPage/PolicyPage/TermsofusePage.jsx b/src/pages/MyPage/PolicyPage/TermsofusePage.jsx
@@ -8,7 +8,6 @@ function TermsofusePage() {
       <Header
         headerProps={{
           pageName: "서비스 이용약관",
-          isClose: false,
           linkTo: "/policy",
         }}
       />

diff --git a/src/pages/MyPage/PolicyPage/ThirdpartyPage.jsx b/src/pages/MyPage/PolicyPage/ThirdpartyPage.jsx
@@ -8,26 +8,32 @@ function ThirdpartyPage() {
       <Header
         headerProps={{
           pageName: "개인정보 제3자 제공 동의",
-          isClose: false,
           linkTo: "/policy",
         }}
       />
-      <div style={{ fontSize: "12px", "fontFamily": "Regular" }}>
-      {TEXT.thirdPartyTitle.split("\n").map((title, index) => (
-        <React.Fragment key={index}>
-          <span style={{'fontSize' : '14px', 'fontFamily': "Bold", 'marginTop' : '5px'}}>{title}</span>
-          <br />
-          {/* Check if there's a corresponding line in privacyPolicy */}
-          {TEXT.thirdParty.split("#")[index] && (
-            <div style={{'marginTop': '10px', 'marginBottom': '10px'}}>
-            <span style={{'fontSize': '12px', 'fontFamily': "Regular"}}>
-              {TEXT.thirdParty.split("#")[index].split("\n").map((e) => (
-                <div>{e}</div>
-              ))}
+      <div style={{ fontSize: "12px", fontFamily: "Regular" }}>
+        {TEXT.thirdPartyTitle.split("\n").map((title, index) => (
+          <React.Fragment key={index}>
+            <span
+              style={{ fontSize: "14px", fontFamily: "Bold", marginTop: "5px" }}
+            >
+              {title}
             </span>
-            </div>
-          )}
-        </React.Fragment>
+            <br />
+            {/* Check if there's a corresponding line in privacyPolicy */}
+            {TEXT.thirdParty.split("#")[index] && (
+              <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+                <span style={{ fontSize: "12px", fontFamily: "Regular" }}>
+                  {TEXT.thirdParty
+                    .split("#")
+                    [index].split("\n")
+                    .map((e) => (
+                      <div>{e}</div>
+                    ))}
+                </span>
+              </div>
+            )}
+          </React.Fragment>
         ))}
       </div>
     </div>