[React x Typescript] 다크모드 구현

> Toggle 1차 에러 발생 in Wrapper

TS2769 : No overload matches this call, 

import styled from 'styled-components';

interface ThemeToggle {
    themeMode: string;
    toggleTheme: () => void;
}

const Wrapper = styled.button<ThemeToggle>`
    background: ${({ theme }) => theme.mode.mainBackground};
    border: 1px solid ${({ theme }) => theme.mode.border};
    box-shadow: 0 1px 3px ${({ theme }) => theme.mode.divider};
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    font-size: 0.5rem;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    padding: 0.5rem;
    position: fixed;
    z-index: 1;
    width: 4rem;
    height: 2rem;
    bottom: 2rem;
    right: 1rem;
    span{
        color: ${({theme}) => theme.mode.slider};
        &:first-child{
            transform: ${({themeMode}) => 
             themeMode === "light" ? "translateY(0)" : "translateY(2rem)"};
            transition: background 0.25s ease 2s; 
        }
        &:nth-child(2){
            transform: ${({themeMode}) => 
            themeMode === "dark" ? "translateY(0)" : "translateyY(-2rem"};
            transition: background 0.25s ease 2s;
        }
    }
`;

const Toggle = ({themeMode, toggleTheme}: ThemeToggle) => {
    return (
            <Wrapper onClick={toggleTheme} themeMode={themeMode}>
            </Wrapper>
    )
}

export default Toggle;

 - Wrapper의 타입이 없어서 그랬던듯..? 

interface themeWrapper로 새롭게 타입 새엇ㅇ해서 지정해주니까 에러 해결 

> 해결 코드 

import styled from 'styled-components';

interface ThemeToggle {
    themeMode: string;
    toggleTheme: () => void;
}

interface ThemeWrapper {
    themeMode:string;
}


const Wrapper = styled.button<ThemeWrapper>`
    background: ${({ theme }) => theme.mode.mainBackground};
    border: 1px solid ${({ theme }) => theme.mode.border};
    box-shadow: 0 1px 3px ${({ theme }) => theme.mode.divider};
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    font-size: 0.5rem;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    padding: 0.5rem;
    position: fixed;
    z-index: 1;
    width: 4rem;
    height: 2rem;
    bottom: 2rem;
    right: 1rem;
    span{
        color: ${({theme}) => theme.mode.slider};
        &:first-child{
            transform: ${({themeMode}) => 
             themeMode === "light" ? "translateY(0)" : "translateY(2rem)"};
            transition: background 0.25s ease 2s; 
        }
        &:nth-child(2){
            transform: ${({themeMode}) => 
            themeMode === "dark" ? "translateY(0)" : "translateyY(-2rem"};
            transition: background 0.25s ease 2s;
        }
    }
`;

const Toggle = ({themeMode, toggleTheme}: ThemeToggle) => {
    return (
            <Wrapper onClick={toggleTheme} themeMode={themeMode}>
            </Wrapper>
    )
}

export default Toggle;