토글 버튼 만들기

1. 토글 버튼 컴포넌트

mport { styled } from "styled-components";
import { useEffect, useState } from 'react';

/* 개인정보 관리 - 알림 페이지 토글 스위치 */

const ToggleContainer = styled.div`
  width : 49px;
  position: relative;
  margin-top: 19px;
  margin-left : 25px;
  cursor: pointer;

  > .toggle-container {
    width: 50px;
    height: 31px;
    border-radius: 30px;
    background-color: rgb(233,233,234);}
    //.toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현
  > .toggle--checked {
    background-color:  var(--jled, #B80000);
    transition : 0.5s
  }

  > .toggle-circle {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgb(255,254,255);
    transition : 0.5s
    //.toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현
  } >.toggle--checked {
    left: 24px;
    transition : 0.5s
  }
`;

const Desc = styled.div`
  //설명 부분의 CSS를 구현
  text-align: center;
  margin: 20px;
`;

export const Toggle = ({option, toggleHandler, name} : any) => {


  return (
    <>
      <ToggleContainer
        onClick={() => toggleHandler(name, option)}
      >
        <div className={`toggle-container ${option === 1 ? "toggle--checked" : null}`}/>
        <div className={`toggle-circle ${option === 1 ? "toggle--checked" : null}`}/>
      </ToggleContainer>
    </>
  );
};

2. 다른 컴포넌트에서 사용

import { styled } from "styled-components"
import { Button, H1, H2, Wrapper } from "../common/Style"
import { Toggle } from "./ToggleButton"
import { useEffect, useState } from "react"
import { API } from "../../util/common"
import axios from "axios"
// import { CheckBox, CheckBoxLabel } from "./ToggleButton"

/* 계정 설정 - 알림 설정 변경 페이지*/

const ContentsWrapper = styled(Wrapper)`
    width : 1140px;
    float : right
`

const CheckBoxWrapper = styled(Wrapper)`
    position : relative;
`

type noticeOptionType = {
    night_push : number,
    event_push_recv : number,
    event_sms_recv : number,
    event_email_recv : number,
    app_push_recv : number,
    app_sms_recv : number,
    app_email_recv : number,
}

export default function Notice(){


    const [noticeOption, setNoticeOption] = useState<noticeOptionType>({
        night_push : 0,
        event_push_recv : 0,
        event_sms_recv : 0,
        event_email_recv : 0,
        app_push_recv : 0,
        app_sms_recv : 0,
        app_email_recv :0,
    })

    const options = 
    {
        // withCredentials : true,
        headers : {
            'Authorization' : 'Bearer ------------"
            'Content-Type' : 'application/json',
        },

    }

    const fetchNoticeInfo = async (dvidx : number) => {

        const authInfo = 
            {
                "dbidx": dvidx,
                "appver": 0,
                "logintype": 0,
                "authkind": 0,
                "marketmode": 0,
                "lang": 0,
                "country_code": "KR",
                "gmt_gap": 0,
                "device_os": "string",
                "device_model": "string",
                "sdk_int": 0
              }
              
        console.log(authInfo)

        try{      
            const {data, status} = await axios.post(`${API}/dev/301`, authInfo , options);  
            
                if(status === 200){
                    console.log(`data.outcode : ${data.outcode}`)
                    if(data.outcode === 0){
                        sessionStorage.setItem("pid", data.read_dev_base.devdbidx);
                        
                        const { night_push, 
                            event_push_recv, 
                            event_sms_recv, 
                            event_email_recv, 
                            app_push_recv, 
                            app_sms_recv, 
                            app_email_recv}        
                            
                            = data.read_login_acc_dev;
    
                        setNoticeOption({night_push,
                                   event_push_recv,
                                   event_sms_recv,
                                   event_email_recv,
                                   app_push_recv,
                                   app_sms_recv,
                                   app_email_recv})
                       console.log(noticeOption)
                    }
                    else{
                        alert("오류가 발생하였습니다.")
                        console.log(data.outcode);
                    }
                }
            }
            catch(error){
                console.log(error);
                alert('로그인에 실패하였습니다.');
            }
    }

    const submitNoticeOption = async () => {

        const body = {...noticeOption, pid : sessionStorage.getItem("pid")}

        try{      
            const {data, status} = await axios.post(`${API}/dev/403`, body, options);  
        
            console.log(data)

            if(status === 200){
                if(data.outcode === 0){
                    alert("성공적으로 저장되었습니다.")
                }
                else{
                    alert("저장에 실패 하였습니다.")
                }
            }
        }
        catch(e : unknown){
            if(e instanceof Error){
                console.log(e.message)
            }
        }
    }  

    const toggleHandler = (name : string, option : number) => {
    
        if(option === 0){
            setNoticeOption({...noticeOption, [name] : 1})
        }
        else{
            setNoticeOption({...noticeOption, [name] : 0})
        }
    }

    useEffect(()=>{
        fetchNoticeInfo(Number(sessionStorage.getItem("pid")));
    },[])

    return(
        <ContentsWrapper>
            <Wrapper width={1027} height={460}>
                <Wrapper>
                    <Wrapper float="left" height={78} marginTop={34} marginLeft={90}>
                        <H1 width={541}>마케팅 수신동의</H1>
                        <H2 marginLeft={20} paddingTop = {18} paddingLeft={60} width={541} height={49}>마케팅등의 이벤트 알림</H2>
                    </Wrapper>
                    <Wrapper float="right" marginTop={34} marginBottom={32} >
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>앱 푸시</H1>
                            <Toggle 
                                option={noticeOption.app_push_recv} 
                                name ="app_push_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>SMS</H1>
                            <Toggle 
                                option={noticeOption.app_sms_recv}
                                name="app_sms_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>이메일</H1>
                            <Toggle 
                                option={noticeOption.app_email_recv} 
                                name="app_email_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                    </Wrapper>
                </Wrapper>
                <Wrapper>
                    <Wrapper float="left" height={78} marginTop={34} marginLeft={90}>
                        <H1 width={541}>테스트 수행</H1>
                        <H2 marginLeft={20} paddingTop={18} paddingLeft={30} width={541} height={49}>테스트 진행 사항에 대한 알림</H2>
                    </Wrapper>
                    <Wrapper float="right" marginBottom={32}>
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>앱 푸시</H1>
                            <Toggle 
                                option={noticeOption.event_push_recv} 
                                name="event_push_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>SMS</H1>
                            <Toggle 
                                option={noticeOption.event_sms_recv} 
                                name="event_sms_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>이메일</H1>
                            <Toggle 
                                option={noticeOption.event_email_recv} 
                                name="event_email_recv" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                    </Wrapper> 
                </Wrapper> 
                <Wrapper>
                    <Wrapper float="left" height={78} marginTop={34} marginLeft={90}>
                        <H1 width={541}>야간 알림</H1>
                        <H2 marginLeft={20} paddingTop = {18} paddingLeft={30} width={541} height={49}>야간 알림 푸시에 대한 동의</H2>
                    </Wrapper>
                    <Wrapper float="right">
                        <Wrapper display="inline-block">
                            <H1 textAlign="center" width={103}>동의여부</H1>
                            <Toggle 
                                option={noticeOption.night_push} 
                                name="night_push" 
                                toggleHandler={toggleHandler}
                            />
                        </Wrapper>
                    </Wrapper> 
                </Wrapper>
                <Button style={{margin : "40px 50%"}} onClick={submitNoticeOption}>변경하기</Button> 
            </Wrapper>
        </ContentsWrapper>
    )
}