header logo & toggle 디자인 추가 #505

admin/.storybook/preview.ts

@@ -1,5 +1,8 @@
 import type { Preview } from "@storybook/react";
 import './index.css';
+import tokens from '../src/styles/tokens.json';
+
+const globalTokens = tokens.global;
 
 const preview: Preview = {
   parameters: {
@@ -10,7 +13,15 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'dark', value: `${globalTokens.Black.value}` },
+        { name: 'light', value: `${globalTokens.Background.value}` }
+      ]
+    }, 
   },
 };
 
+
 export default preview;

admin/src/atoms/buttons/Buttons.stories.tsx

@@ -7,7 +7,7 @@ type buttonsPropsType = {
 
 const Buttons = ({isDark}:buttonsPropsType) => {
     return (
-        <div style={{display: "grid", gridTemplateColumns: '1fr 1fr 1fr 1fr', gridAutoRows: '1fr', placeItems: 'center', backgroundColor:isDark?'#182333':'white' }}>
+        <div style={{display: "grid", gridTemplateColumns: '1fr 1fr 1fr 1fr', gridAutoRows: '1fr', placeItems: 'center' }}>
             <BigButton isDark={isDark}>Big Button</BigButton>
             <RegularButton isDark={isDark}>Regular Button</RegularButton>
             <TextButton isDark={isDark}>Text Button</TextButton>

admin/src/atoms/toggle/Toggle.stories.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { ToggleCircle, ToggleContainer, ToggleWrapper, togglePropsType } from './Toggle';
+
+type toggleStoryPropsType = {
+    isDark: boolean;
+}
+
+const ToggleStory = ({isDark}:toggleStoryPropsType) => {
+    const [ isOn, setIsOn ] = useState(false);
+
+    return (
+        <ToggleWrapper onClick={()=>{ setIsOn(!isOn) }}>
+            <ToggleContainer isDark={isDark}>
+                <ToggleCircle isOn={isOn}/>
+            </ToggleContainer>
+        </ToggleWrapper>
+    )
+}
+
+export default {
+    title: 'Atoms/Button',
+    component: ToggleStory,
+}
+
+export const ToggleTemplate = (args: toggleStoryPropsType) => <ToggleStory {...args}/>
+ToggleTemplate.args = {
+    isDark: false,
+}

admin/src/atoms/toggle/Toggle.tsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import tokens from '../../styles/tokens.json';
+import { useSelector } from "react-redux";
+import { RootState } from "../../redux/Store";
+
+const globalTokens = tokens.global;
+
+export const ToggleWrapper = styled.div`
+    cursor: pointer;
+    width: fit-content;
+`
+export const ToggleContainer = styled.div<{isDark:boolean}>`
+    position: relative;
+    top: 0;
+    left: 0;
+    background-color: ${(props) =>
+        props.isDark ? "rgba(255,255,255,0.15)" : "rgba(205,5,5,0.25)"};
+  border-radius: ${globalTokens.BigRadius.value}px;
+  width: 48px;
+  height: 24px;
+  padding: ${globalTokens.Spacing4.value}px ${globalTokens.Spacing12.value}px;
+  box-shadow: ${globalTokens.RegularShadow.value.x}px
+    ${globalTokens.RegularShadow.value.y}px
+    ${globalTokens.RegularShadow.value.blur}px
+    ${globalTokens.RegularShadow.value.spread}px
+    ${(props) => (props.isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)")};
+`;
+export const ToggleCircle = styled.div<{isOn:boolean}>`
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  border-radius: ${globalTokens.CircleRadius.value}%;
+  background-color: ${globalTokens.White.value};
+  width: 18px;
+  height: 18px;
+  transform: ${(props) => props.isOn && "translateX(24px)"};
+  transition: 300ms;
+`;
+
+export type togglePropsType = {
+    isOn: boolean;
+    setIsOn: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Toggle = ({isOn, setIsOn}:togglePropsType) => {
+    const isDark = useSelector((state:RootState)=>state.uiSetting.isDark);
+
+    return (
+        <ToggleWrapper onClick={()=>{ setIsOn(!isOn) }}>
+            <ToggleContainer isDark={isDark}>
+                <ToggleCircle isOn={isOn}/>
+            </ToggleContainer>
+        </ToggleWrapper>
+    );
+}

admin/src/atoms/typographys/Typographys.stories.tsx

@@ -7,7 +7,7 @@ type typographysPropsType = {
 
 const Typographys = ({isDark}:typographysPropsType) => {
     return (
-        <div style={{ display:'flex', flexDirection:'column', backgroundColor:isDark?'#182333':'white', transition:'200ms'}} >
+        <div style={{ display:'flex', flexDirection:'column'}} >
             <Heading1Typo isDark={isDark}>This is Heading1 Typo.</Heading1Typo>
             <Heading2Typo isDark={isDark}>This is Heading2 Typo.</Heading2Typo>
             <Heading3Typo isDark={isDark}>This is Heading3 Typo.</Heading3Typo>

admin/src/components/header/Header.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/Store';
 import { HeaderContainer } from './Header.style';
+import HeaderLogo from './HeaderLogo';
 
 const Header = () => {
     const isDark=useSelector((state:RootState)=>state.uiSetting.isDark);
 
     return (
         <HeaderContainer isDark={isDark}>
-            This is Header.
+            <HeaderLogo/>
         </HeaderContainer>
     );
 };

admin/src/components/header/HeaderLogo.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import tokens from '../../styles/tokens.json';
+import styled from 'styled-components';
+import { BodyTextTypo } from '../../atoms/typographys/Typographys';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../redux/Store';
+import logo from '../../assets/images/logos/logo.png';
+import lightLogo from '../../assets/images/logos/lightLogo.png';
+import { Toggle } from '../../atoms/toggle/Toggle';
+import { setIsDark } from '../../redux/createSlice/uiSettingSlice';
+
+const globalTokens = tokens.global;
+
+export const HeaderWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`
+export const HeaderLogoContainer = styled.section`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding: ${globalTokens.Spacing4.value}px ${globalTokens.Spacing32.value}px;
+    transition: 1000ms;
+    &:active {
+        opacity: 0.3;
+    }
+`
+export const HeaderLogoTitle = styled(BodyTextTypo)`
+    height: 50px;
+    text-align: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    font-family: 'Saira Semi Condensed', sans-serif;
+`
+export const HeaderLogoImg = styled.img`
+    width: 50px;
+    transition: 300ms;
+`
+
+const HeaderLogo = () => {
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const isDark = useSelector((state:RootState)=>state.uiSetting.isDark);
+
+    const handleOnClick = () => {
+        navigate('/');
+    }
+
+    return (
+        <HeaderWrapper>
+            <HeaderLogoContainer onClick={handleOnClick}>
+                <HeaderLogoTitle isDark={isDark}>IT Prometheus</HeaderLogoTitle>
+                <HeaderLogoImg src={isDark?lightLogo:logo}/>
+            </HeaderLogoContainer>
+            <Toggle isOn={isDark} setIsOn={()=>{ dispatch(setIsDark(!isDark)) }}/>
+        </HeaderWrapper>
+    );
+};
+
+export default HeaderLogo;