Merge pull request #194 from Igloo-Club/develop

약관동의 api추가

src/mypage/components/AgreeToggleBtn.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react';
+import instance from '../../common/apis/axiosInstanse';
+import styled from '@emotion/styled';
+
+const AgreeToggleBtn = () => {
+  const [isOn, setIsOn] = useState<boolean | undefined>();
+
+  useEffect(() => {
+    getInfo();
+  }, []);
+
+  const getInfo = async () => {
+    const { data } = await instance.get(`api/member/consent`);
+    setIsOn(data.agreeMarketing);
+  };
+
+  const handleToggle = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsOn((prevIsOn) => !prevIsOn);
+    try {
+      await instance.patch('api/member/consent', {
+        agreeMarketing: !isOn,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <>
+      {isOn !== undefined ? (
+        <StToggleContainer onClick={handleToggle}>
+          <StToggleWrapper isOn={isOn} />
+          <StToggleCircle isOn={isOn}>
+            {isOn ? (
+              <StToggleState>ON</StToggleState>
+            ) : (
+              <StToggleState>OFF</StToggleState>
+            )}
+          </StToggleCircle>
+        </StToggleContainer>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default AgreeToggleBtn;
+
+const StToggleContainer = styled.div`
+  position: absolute;
+  right: 0;
+  cursor: pointer;
+`;
+
+const StToggleWrapper = styled.div<{ isOn: boolean }>`
+  width: 5rem;
+  height: 2.4rem;
+  background-color: ${({ isOn, theme }) =>
+    isOn ? `${theme.colors.primary}` : '#d3d2d2'};
+  border-radius: 30px;
+  transition: background-color 0.5s ease-in-out;
+`;
+
+const StToggleCircle = styled.div<{ isOn: boolean }>`
+  position: absolute;
+  top: 0.1rem;
+  left: ${({ isOn }) => (isOn ? '2.7rem' : '0.1rem')};
+  width: 2.2rem;
+  height: 2.2rem;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: left 0.5s ease-in-out;
+`;
+
+const StToggleState = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 1rem;
+  font-weight: 700;
+`;

src/mypage/components/ToggleBtn.tsx

@@ -43,7 +43,8 @@ const ToggleBtn = ({ disableCompany }: ToggleBtnProps) => {
 export default ToggleBtn;
 
 const StToggleContainer = styled.div`
-  position: relative;
+  position: absolute;
+  right: 0;
   cursor: pointer;
 `;
 

src/mypage/pages/myPage.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { Registertypes } from '../../register/types/registerTypes';
 import MyProfileCard from '../components/MyProfileCard';
 import { 약관동의리스트 } from '../../common/constants/memberAgreeConstants';
+import AgreeToggleBtn from '../components/AgreeToggleBtn';
 
 const MyPage = () => {
   const navigate = useNavigate();
@@ -66,10 +67,14 @@ const MyPage = () => {
           <span>프로필 수정</span>
           <button type="button" onClick={ClickEditBtn}></button>
         </button>
-        <div css={Top.TopStyleBottom}>
+        <div css={Top.TopStyle}>
           <span>회사 사람 만나지 않기</span>
           <ToggleBtn disableCompany={values.disableCompany} />
         </div>
+        <div css={Top.TopStyleBottom}>
+          <span>마케팅 정보 수신 동의 켜기</span>
+          <AgreeToggleBtn />
+        </div>
       </div>
       <div css={Middle.Wrapper}>
         {약관동의리스트.map((item) => {
@@ -140,13 +145,15 @@ const Top = {
   `,
 
   TopStyle: css`
+    position: relative;
     display: flex;
     flex-direction: row;
     color: ${theme.colors.gray9};
     ${theme.fonts.body1m};
   `,
 
   TopStyleBottom: css`
+    position: relative;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -167,6 +174,7 @@ const Middle = {
   `,
 
   MiddleStyle: css`
+    position: relative;
     display: flex;
     flex-direction: row;
     color: ${theme.colors.gray9};

src/register/funnelPages/RegisterMemberAgreeFunnel.tsx

@@ -6,6 +6,7 @@ import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import RegisterBtn from '../components/RegisterBtn';
 import { 약관동의리스트 } from '../../common/constants/memberAgreeConstants';
+import instance from '../../common/apis/axiosInstanse';
 
 /** 체크박스 컴포넌트입니다 */
 const Check = ({
@@ -58,7 +59,8 @@ const 약관동의 = ({
     }
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
+    await instance.patch(`api/member/consent`, { agreeMarketing: agree[2] });
     onNext();
   };