Merge pull request #150 from pkiop/feat/AddrecodeInNavbar

Navbar 추가 / Navbar +버튼 클릭 시 InputRecode 나오도록 수정

frontend/src/components/UI/organisms/NavBar/index.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import GlobalThemeProvider from 'styles/GlobalThemeProvider';
+import NavBar from '.';
+
+export default {
+  title: 'Organisms/NavBar',
+  component: NavBar,
+};
+
+export const Default = () => (
+  <GlobalThemeProvider>
+    <NavBar navPlusOnClick={() => {}}/>
+  </GlobalThemeProvider>
+);

frontend/src/components/UI/organisms/NavBar/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as S from './style';
+
+export interface Props {
+  navPlusOnClick: any;
+  className?: string;
+}
+
+function App({ navPlusOnClick, className }: Props) {
+  return (
+    <>
+      <S.NavBar className={className}>
+        <S.AddBtn onClick={navPlusOnClick}>
+          <S.PlusText>+</S.PlusText>
+        </S.AddBtn>
+      </S.NavBar>
+    </>
+  );
+}
+
+export default App;

frontend/src/components/UI/organisms/NavBar/style.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const NavBar = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.navbar};
+  z-index: 100;
+`;
+
+export const AddBtn = styled.div`
+  background-color: ${({ theme }) => theme.color.beige};
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 1.3rem;
+  z-index: 101;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :hover {
+    color: red;
+    cursor: pointer;
+  }
+`;
+
+export const PlusText = styled.div`
+  font-size: 2rem;
+  margin-bottom: 0.3rem;
+`;

frontend/src/components/templates/MainTemplate/index.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import * as S from './style';
 
-function App({ contents, className }: any) {
+function App({ contents, navPlusOnClick, className }: any) {
   return (
     <S.MainTemplate className={className}>
       <S.HeaderBar />
       <S.Contents>
         {contents}
       </S.Contents>
+      <S.NavBar navPlusOnClick={navPlusOnClick}/>
     </S.MainTemplate>
   );
 }

frontend/src/components/templates/MainTemplate/style.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import HeaderBarComponent from 'components/UI/organisms/HeaderBar';
+import NavBarComponent from 'components/UI/organisms/NavBar';
 
 export const MainTemplate = styled.div`
   display: flex;
@@ -8,9 +9,26 @@ export const MainTemplate = styled.div`
   align-items: center;
 `;
 
-export const HeaderBar = styled(HeaderBarComponent)``;
+const headerBarHeight = '2.5rem';
+const navBarHeight = '3rem';
+export const HeaderBar = styled(HeaderBarComponent)`
+  position: fixed;
+  top:0;
+  left:0;
+  height: ${headerBarHeight};
+  z-index: 100;
+`;
+
+export const NavBar = styled(NavBarComponent)`
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: ${navBarHeight};
+`;
 
 export const Contents = styled.div`
-  margin-top: 1rem;
+  margin-top: calc(${headerBarHeight} + 1rem);
+  margin-bottom: calc(${headerBarHeight} + 1rem);
   width: 90%;
 `;

frontend/src/pages/Main/index.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useCallback, useReducer } from 'react';
 import MainTemplate from 'components/templates/MainTemplate';
-// import Board from 'components/UI/organisms/Board';
-import RecodeInput from 'components/UI/organisms/RecodeInput';
 import RecodeList from 'components/UI/organisms/RecodeList';
 import { gql, useQuery } from '@apollo/client';
 import { listTimeRecodes } from 'graphql/queries';
+import * as S from './style';
 
 const TestLabelsForOverFlow = [
   {
@@ -30,14 +29,18 @@ function App() {
   const {
     loading, error, data, refetch,
   } = useQuery(gql`${listTimeRecodes}`);
+  const [bRecodeInput, toggleBRecodeInput] = useReducer((state: boolean) => !state, false);
+  const navPlusOnClick = useCallback(() => toggleBRecodeInput(), []);
+
   const contents = (
     <>
-      <RecodeInput labelList={TestLabelsForOverFlow} refetch={refetch} />
+      <S.RecodeInput labelList={TestLabelsForOverFlow} refetch={refetch} className={bRecodeInput ? 'active' : ''}/>
       <RecodeList timeRecodes={data?.listTimeRecodes?.items} loading={loading} error={error} />
+      <S.RecodeInputCover onClick={navPlusOnClick} className={bRecodeInput ? 'active' : ''} />
     </>
   );
 
-  return <MainTemplate contents={contents} />;
+  return <MainTemplate contents={contents} navPlusOnClick={navPlusOnClick}/>;
 }
 
 export default App;

frontend/src/pages/Main/style.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import RecodeInputComponent from 'components/UI/organisms/RecodeInput';
+
+export const RecodeInput = styled(RecodeInputComponent)`
+  background-color: ${({ theme }) => theme.color.white}; 
+  margin: 0 auto;
+  padding: 1rem 0;
+  border-top-left-radius: ${({ theme }) => theme.size.mainInputRadius};
+  border-top-right-radius: ${({ theme }) => theme.size.mainInputRadius};
+  position: fixed;
+  left: 4.9%;
+  right: 4.9%;
+  bottom: -16rem;
+  transition: 0.4s bottom;
+  &.active {
+    bottom: calc(${({ theme }) => theme.size.navbarHeight} - 0.05rem);
+    transition: 0.4s bottom;
+  }
+  z-index: 30;
+`;
+
+export const RecodeInputCover = styled.div`
+  position: fixed;
+  left:0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  
+  display: none;
+  &.active {
+    display: flex;
+  }
+`;

frontend/src/styles/theme.ts

@@ -1,8 +1,10 @@
 const color = {
   black: '#000000',
   mainColor: '#2E4B73',
+  white: '#FFFFFF',
   beige: '#ECE6CC',
   beigeCompare: '#E0980C',
+  navbar: '#3F93FD',
   timeInput: '#F87878',
   submitGreen: '#28A745',
   submitGreenHover: '#218838',
@@ -16,6 +18,7 @@ const size = {
     height: '1.4rem',
   },
   mainInputRadius: '0.5rem',
+  navbarHeight: '3rem',
 };
 
 const theme = {