[MyPagePanel]TermsOfService 작성

- 신규 작성건.

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

@@ -1,5 +1,80 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-export default function TermsOfService() {
-  return <div>TermsOfService</div>;
+import { useDispatch, useSelector } from "react-redux";
+
+import { getHomeTerms } from "../../../../actions/homeActions";
+import ExitPopUp from "../../../../components/ExitPopUp/ExitPopUp";
+import TButton, { TYPES } from "../../../../components/TButton/TButton";
+import TButtonTab from "../../../../components/TButtonTab/TButtonTab";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./TermsOfService.module.less";
+
+export default function Support() {
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [showExitButton, setShowExitButton] = useState(false);
+  const [trmsTpCd, setTrmsTpCd] = useState("MST00401");
+  const tabList = [
+    $L("TERMS OF SERVICE"),
+    $L("PRIVACY POLICY"),
+    $L("TERMS OF PURCHASE"),
+    $L("PRIVACY POLICY(PAYMENT)"),
+  ];
+  const trmsCdList = ["MST00401", "MST00402", "MST00403", "MST00404"];
+  const dispatch = useDispatch();
+  const termsData = useSelector((state) => state.home.termsData);
+
+  const handleItemClick = useCallback(
+    ({ index }) => {
+      setSelectedTab(index);
+      setTrmsTpCd(trmsCdList[index]);
+    },
+    [selectedTab, termsData]
+  );
+  useEffect(() => {
+    dispatch(getHomeTerms({ trmsTpCdList: trmsTpCd }));
+  }, [dispatch, trmsTpCd]);
+
+  const handleDisagree = useCallback(() => {
+    setShowExitButton(!showExitButton);
+  }, [showExitButton]);
+
+  return (
+    <div className={css.termsContainer}>
+      <div className={css.title}>{$L("TERMS OF SERVICE")}</div>
+
+      <div className={css.contentsBox}>
+        <TButtonTab
+          contents={tabList}
+          className={css.tTab}
+          onItemClick={handleItemClick}
+          selectedIndex={selectedTab && selectedTab}
+        />
+        <div className={css.textBox}>
+          <div
+            className={css.subTitle}
+            dangerouslySetInnerHTML={{
+              __html: termsData && termsData.data?.terms[0]?.trmsNm,
+            }}
+          ></div>
+          <div
+            className={css.text}
+            dangerouslySetInnerHTML={{
+              __html: termsData && termsData.data?.terms[0]?.trmsCntt,
+            }}
+          ></div>
+        </div>
+
+        <div className={css.buttonBox}>
+          <TButton
+            onClick={handleDisagree}
+            type={TYPES.agree}
+            className={css.locateBox}
+          >
+            {$L("Do Not Agree")}
+          </TButton>
+        </div>
+      </div>
+      {showExitButton && <ExitPopUp onClose={handleDisagree} />}
+    </div>
+  );
 }

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

@@ -0,0 +1,68 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.termsContainer {
+  width: 100%;
+  height: 100%;
+  background: @BG_COLOR_01;
+
+  .title {
+    background: @COLOR_WHITE;
+    width: 1800px;
+    height: 90px;
+    font-size: 42px;
+    font-family: @baseFontBold;
+    font-weight: bold;
+    color: @COLOR_GRAY07;
+    text-align: left;
+    padding-left: 59px;
+    line-height: 90px;
+    margin-bottom: 42px;
+  }
+  .contentsBox {
+    padding: 0px 60px;
+    .textBox {
+      width: 1680px;
+      height: 714px;
+      background-color: @BG_COLOR_02;
+      overflow-y: auto;
+      border: 1px solid @COLOR_GRAY02;
+      box-sizing: border-box;
+      padding: 42px 60px 0;
+      font-size: 24px;
+      color: #808080;
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: @PRIMARY_COLOR_RED;
+        border: 3px solid @PRIMARY_COLOR_RED;
+      }
+      &::-webkit-scrollbar-track {
+        background: #e7e7e7;
+        width: 6px;
+        border: 3px solid #e7e7e7;
+      }
+      .subTitle {
+        font-family: @baseFontBold;
+        margin-bottom: 27px;
+      }
+      .text {
+      }
+    }
+    .buttonBox {
+      margin-top: 30px;
+      width: 100%;
+      display: flex;
+      flex-direction: row-reverse;
+      .locateBox {
+        min-width: 360px;
+        width: 360px;
+        height: 78px;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+    }
+  }
+}