[Mypage] support

Detail Notes :
 
1. FAQ, Notice GUI 변경 완료
2. Contact 진행중

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ContactContents/ContactContents.module.less

@@ -2,9 +2,6 @@
 @import "../../../../../style/utils.module.less";
 
 .contactContainer {
-  width: 1680px;
-  height: 540px;
-
   .container {
     height: 635px;
     width: 100%;

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx

@@ -9,6 +9,7 @@ import { getMyFaqInfo, getNotice } from "../../../../../actions/myPageActions";
 import TPopUp from "../../../../../components/TPopUp/TPopUp";
 import TScroller from "../../../../../components/TScroller/TScroller";
 import css from "./ListContents.module.less";
+import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller";
 
 const SpottableComponent = Spottable("li");
 
@@ -47,12 +48,11 @@ export default function ListContents({ selectedTab }) {
   return (
     <>
       <TScroller className={css.scrollContainer} verticalScrollbar="visible">
-        <ul className={css.liContainer}>
+        <ul className={css.listContainer}>
           {listInfos &&
             listInfos.map((list, idx) => {
               return (
                 <SpottableComponent
-                  className={css.supportList}
                   key={`list:${idx}`}
                   onClick={() => {
                     handleListClick(list.notiNo);
@@ -84,9 +84,13 @@ export default function ListContents({ selectedTab }) {
                 {currentInfos.expsDt.substring(0, 10)}
               </div>
             </div>
-            <TScroller className={css.faqDesc} verticalScrollbar="visible">
+            <TButtonScroller
+              className={css.faqDesc}
+              boxHeight={460}
+              // verticalScrollbar="visible"
+            >
               {currentInfos.notiCntt}
-            </TScroller>
+            </TButtonScroller>
           </div>
         )}
       </TPopUp>

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.module.less

@@ -2,56 +2,41 @@
 @import "../../../../../style/utils.module.less";
 
 .scrollContainer {
-  height: 635px;
-  width: 1680px;
+  height: 770px;
+  width: 1650px;
 
-  > div:nth-child(2) {
-    padding: 0;
-    > div {
-      background-color: #cccccc;
-      height: 100%;
-      width: 4px;
+  > div {
+    > div:nth-child(2) {
+      top: 15px;
       > div {
-        background-color: @COLOR_GRAY05;
+        width: 4px;
       }
     }
   }
 }
 
-.liContainer {
-  height: 635px;
-  width: 100%;
+.listContainer {
+  width: calc(100% - 15px);
+  padding: 16px 17px;
 
   li {
-    width: 1650px;
-    height: 70px;
-
-    color: @COLOR_GRAY06;
-    .font(@fontFamily: @arialFontBold,@fontSize:30px);
+    color: @COLOR_GRAY08;
     background: @COLOR_WHITE;
-    text-align: left;
-
-    line-height: 70px;
-    letter-spacing: -0.75px;
-    padding: 0 61px;
-    box-shadow: 0px 3px 5.6px 0.4px rgba(0, 0, 0, 0.11);
-    margin: 0 0 10px;
-
-    .border-solid(@size:1px,@color:#cccccc);
+    font-size: 24px;
+    padding: 18px 31px;
+    .border-solid(@size:1px,@color:@COLOR_GRAY02);
     border-radius: 8px;
-
-    .elip(@clamp: 1);
-
+    margin-bottom: 24px;
     position: relative;
     &:focus {
-      color: @PRIMARY_COLOR_RED;
       &::after {
-        .focused();
+        .focused(@boxShadow:22px, @borderRadius:12px);
       }
     }
 
     .marquee {
       width: 100%;
+      .elip(@clamp: 1);
     }
   }
 }
@@ -78,8 +63,17 @@
   }
 
   .faqDesc {
-    padding: 30px;
+    padding: 0;
     line-height: 50px;
     height: 460px;
+    > div:nth-child(2) {
+      > div {
+        > div {
+          > div {
+            padding: 30px 0 30px 30px;
+          }
+        }
+      }
+    }
   }
 }

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx

@@ -38,11 +38,13 @@ export default function Support({ title, cbScrollTo }) {
               selectedIndex={selectedTab && selectedTab}
             />
           </div>
-          {selectedTab && selectedTab === 1 ? (
-            <ContactContents />
-          ) : (
-            <ListContents selectedTab={selectedTab} />
-          )}
+          <div className={css.supportContents}>
+            {selectedTab && selectedTab === 1 ? (
+              <ContactContents />
+            ) : (
+              <ListContents selectedTab={selectedTab} />
+            )}
+          </div>
         </div>
       </TBody>
     </>

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less

@@ -15,4 +15,11 @@
       }
     }
   }
+  .supportContents {
+    width: 1680px;
+    height: 822px;
+    background: @BG_COLOR_02;
+    border: 1px solid @COLOR_GRAY02;
+    padding: 15px;
+  }
 }