feat: Header Container 추가(style, event 포함)

client/package.json

@@ -11,10 +11,13 @@
     "test:local": "jest"
   },
   "dependencies": {
+    "@types/styled-components": "^5.1.26",
     "codecov": "^3.8.3",
+    "jotai": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
+    "styled-components": "^5.3.6",
     "uuidv4": "^6.2.13"
   },
   "devDependencies": {

client/src/App.tsx

@@ -1,5 +1,27 @@
-function App() {
-  return <div>Hello Docker!</div>;
-}
+import { ReactElement } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './Router';
+import styled from 'styled-components';
+import Header from './container/Header';
+import Menubar from './container/Menubar';
+import { Provider } from 'jotai';
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
+const App = (): ReactElement => {
+  return (
+    <>
+      <Provider>
+        <Menubar />
+        <Wrapper>
+          <Header />
+          <RouterProvider router={router} />
+        </Wrapper>
+      </Provider>
+    </>
+  );
+};
 
 export default App;

client/src/components/Button.tsx

@@ -0,0 +1,35 @@
+import { FC, ReactElement } from 'react';
+import styled from 'styled-components';
+
+interface StyleProps {
+  width?: string;
+  height?: string;
+  backgroundColor?: string;
+  color?: string;
+  borderRadius?: string;
+  margin?: string;
+}
+
+interface Props extends StyleProps {
+  context: string | ReactElement;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const StyledButton = styled.button<StyleProps>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ color }) => color};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  margin: ${({ margin }) => margin};
+`;
+
+const Button: FC<Props> = ({ context, onClick, ...props }) => {
+  return (
+    <StyledButton onClick={onClick} {...props}>
+      {context}
+    </StyledButton>
+  );
+};
+
+export default Button;

client/src/components/Text.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+
+interface StyleProps {
+  color?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  fontFamily?: string;
+}
+
+interface Props extends StyleProps {
+  text: string;
+}
+
+const StyledText = styled.p<StyleProps>`
+  color: ${({ color }) => color};
+  font-family: ${({ fontFamily }) => fontFamily};
+  font-size: ${({ fontSize }) => fontSize};
+  font-weight: ${({ fontWeight }) => fontWeight};
+`;
+
+const Text: FC<Props> = ({ text, ...props }) => {
+  console.log(props);
+
+  return <StyledText {...props}>{text}</StyledText>;
+};
+
+export default Text;

client/src/container/Header.tsx

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import Button from '../components/Button';
+import Text from '../components/Text';
+import LongLogo from '../components/LongLogo';
+import { useAtom } from 'jotai';
+import { loginStateAtom } from '../util/GlobalState';
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 25px;
+  font-family: 'Roboto';
+`;
+
+const FlexGrow3 = styled.div`
+  flex-grow: 3;
+`;
+
+const Header = (): ReactElement => {
+  const [login, setUserLogin] = useAtom(loginStateAtom);
+
+  return (
+    <Wrapper>
+      <FlexGrow3>
+        <Button context={<LongLogo />} />
+      </FlexGrow3>
+      {!login && (
+        <Button
+          context={<Text text={'Sign in'} fontFamily="roboto" />}
+          onClick={() => setUserLogin(!login)}
+          margin={'0 3vw 0 0'}
+        />
+      )}
+      {!login && <Button context={<Text text={'Sign up'} fontFamily="roboto" />} />}
+      {login && (
+        <Button context={<Text text={'Sign out'} fontFamily="roboto" />} onClick={() => setUserLogin(!login)} />
+      )}
+    </Wrapper>
+  );
+};
+
+export default Header;

client/src/container/Menubar.tsx

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 100vh;
+`;
+
+const Menubar = (): ReactElement => {
+  return <Wrapper>menu</Wrapper>;
+};
+
+export default Menubar;

client/src/main.tsx

@@ -1,10 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
-import { router } from './Router';
+import styled from 'styled-components';
+import App from './App';
+import GlobalStyle from './util/GlobalStyle';
+
+const Wrapper = styled.div`
+  display: flex;
+`;
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <GlobalStyle />
+    <Wrapper>
+      <App />
+    </Wrapper>
   </React.StrictMode>,
 );

client/src/util/GlobalState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+
+export const loginStateAtom = atom(false);
+
+export const readWriteAtom = atom(
+  (get) => get(loginStateAtom),
+  (_get, set, newValue: boolean) => set(loginStateAtom, newValue),
+);

client/src/util/GlobalStyle.tsx

@@ -0,0 +1,40 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+  
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  html, body{
+    height: 100%;
+    margin: 0;
+    font-family: 'Nanum Myeongjo','Noto Sans KR','Roboto', sans-serif;
+  }
+  #root {
+    height: 100%;
+    margin: 0;
+  }
+  h2, p {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  h4 {
+    font-size: 14px;
+  }
+  p {
+    font-size: 1rem;
+  }
+  button {background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible;
+  }
+`;
+
+export default GlobalStyle;