feat: 튜토리얼 모드 전환 버튼 구현

client/src/components/tutorial/ToggleButton.tsx

@@ -0,0 +1,57 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+
+interface ButtonStylingProps {
+  isActive: boolean;
+}
+
+const StyledButton = styled.button<ButtonStylingProps>`
+  position: absolute;
+  inset: 0px;
+  transition: all 200ms ease 0s;
+  border-radius: 22px;
+  cursor: pointer;
+  border: 2px solid #5c5c5c;
+  background: transparent;
+
+  &::before {
+    width: 14px;
+    height: 14px;
+    left: 3px;
+    bottom: 2px;
+    background-color: #5c5c5c;
+    position: absolute;
+    content: '';
+    transition: all 200ms ease 0s;
+    border-radius: 50%;
+  }
+
+  ${({ isActive }) =>
+    isActive &&
+    `   
+        border: 2px solid #FEA34F;
+        &::before {
+          transform: translateX(16px);
+          background-color: #FEA34F;
+        }
+      `}
+`;
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+`;
+
+interface ToggleButtonProps {
+  isActive: boolean;
+  toggleActive: () => void;
+}
+
+export const ToggleButton = ({ isActive, toggleActive, ...props }: ToggleButtonProps): ReactElement => {
+  return (
+    <Wrapper {...props}>
+      <StyledButton isActive={isActive} onClick={toggleActive} />
+    </Wrapper>
+  );
+};

client/src/container/Header.tsx

@@ -1,11 +1,12 @@
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 import styled from 'styled-components';
 
 import LongLogo from '@images/LongLogo.svg';
 
 import { Link } from 'react-router-dom';
 import Image from '@components/Image';
-import LoginButton from '@components/LoginButton';
+// import LoginButton from '@components/LoginButton';
+import { ToggleButton } from '@components/tutorial/ToggleButton';
 
 const Wrapper = styled.div`
   display: flex;
@@ -18,13 +19,25 @@ const Wrapper = styled.div`
   z-index: -10;
 `;
 
+const TutorialButtonWrapper = styled.div`
+  font-family: 'Nanum Myeongjo';
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
 const Header = (): ReactElement => {
+  const [isActive, setIsActive] = useState(false);
   return (
     <Wrapper>
       <Link to="/">
         <Image src={LongLogo} flexGrow={3} />
       </Link>
-      <LoginButton />
+      <TutorialButtonWrapper>
+        <span>튜토리얼 모드</span>
+        <ToggleButton isActive={isActive} toggleActive={() => setIsActive(!isActive)} />
+      </TutorialButtonWrapper>
     </Wrapper>
   );
 };