feat: 이용약관 간격, 크기, 뒤로가기 버튼 추가/수정, 상세페이지 bottom sheet 수정

bsideproject · Jul 28, 2023 · 4ce1226 · 4ce1226
2 parents f0df9eb + 14782dc
commit 4ce1226
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 33 deletions.
diff --git a/src/components/common/TitleWrap.tsx b/src/components/common/TitleWrap.tsx
@@ -3,7 +3,7 @@ import IcBackBtn from "../../assets/images/icon/ic_back_btn.svg";
 import { useNavigate } from "react-router-dom";
 
 interface PropsType{
-    title: string,
+    title?: string,
     relation?: string
 }
 

diff --git a/src/pages/setting/SettingTermDetail.tsx b/src/pages/setting/SettingTermDetail.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import terms from '../../assets/terms.json';
 import { useParams } from 'react-router-dom';
+import TitleWrap from "../../components/common/TitleWrap";
 
 const SettingTermDetail = () => {
 
@@ -19,10 +20,11 @@ const SettingTermDetail = () => {
     }, []);
 
     return (
-        <div>
+        <div className="terms-detail">
+            <TitleWrap title=""  />
             <div dangerouslySetInnerHTML={{__html : html}}></div>
         </div>
     );
 };
 
-export default SettingTermDetail;
+export default SettingTermDetail;
diff --git a/src/pages/setting/SettingTerms.tsx b/src/pages/setting/SettingTerms.tsx
@@ -8,8 +8,8 @@ const SettingTerms = () => {
         <div className="SettingTerms inner">
             <TitleWrap title="이용 약관" />
             <div className="setting-cont">
-                <Link target="_blank" to="/page/setting/term/1" className="setting-list">서비스 이용약관<i><img src={IcFrontBtn} alt="arr-icon" /></i></Link>
-                <Link target="_blank" to="/page/setting/term/2" className="setting-list">개인 정보 수집 및 이용 안내<i><img src={IcFrontBtn} alt="arr-icon" /></i></Link>
+                <Link to="/page/setting/term/1" className="setting-list">서비스 이용약관<i><img src={IcFrontBtn} alt="arr-icon" /></i></Link>
+                <Link to="/page/setting/term/2" className="setting-list">개인 정보 수집 및 이용 안내<i><img src={IcFrontBtn} alt="arr-icon" /></i></Link>
             </div>
         </div>
     )

diff --git a/src/styles/pages/_detail.scss b/src/styles/pages/_detail.scss
@@ -147,44 +147,26 @@
 
 }
 // dev
-.sc-gEvEer.kzfFMm{
-  background-color: #242424;
-  border-top: 1px solid #383838;
-}
-// prod
-.sc-gEvEer.gBtkQB{
-  background-color: #242424;
-  border-top: 1px solid #383838;
+.sheet-container{
+  background-color: #242424 !important;
+  border-top: 1px solid #383838 !important;
 }
 // dev
-.sc-fqkvVR.gDWucW{
-  background-color: inherit;
-}
-// prod
-.sc-fqkvVR.SRknK{
-  background-color: inherit;
+.sheet-header{
+  background-color: inherit !important;
 }
 // dev
-.sc-eqUAAy.ejOydj{
-  background-color: inherit;
-}
-// prod
-.sc-eqUAAy.JqVif{
-  background-color: inherit;
+.sheet-scroll{
+  background-color: inherit !important;
 }
 .sheet-header{
   padding: 10px 0;
 }
-// dev
-.SRknK::before{
-  top: 15px !important;
-  background-color: #818181 !important;
-}
-// prod
-.gDWucW::before{
+.sheet-header::before{
   top: 15px !important;
   background-color: #818181 !important;
 }
+
 // exchange wrap
 .ExchangeWrap{
   width: 100%;

diff --git a/src/styles/pages/_setting.scss b/src/styles/pages/_setting.scss
@@ -148,4 +148,24 @@
     }
   }
 }
-
+.terms-detail{
+  padding: 0 20px;
+  .title-wrap{
+    margin-bottom: 20px;
+  }
+  .page-title{
+    font-size: 22px;
+  }
+  article{
+    font-size: 14px;
+    h2{
+      font-size: 20px;
+    }
+    p{
+      line-height: 1.2;
+    }
+    li{
+      line-height: 1.2;
+    }
+  }
+}