Merge pull request #215 from boostcamp-2020/feature/fixRedo

Feature/fix redo
boostcamp-2020 · Dec 20, 2020 · 7f9bd6c · 7f9bd6c
2 parents e02d277 + 2a6c28b
commit 7f9bd6c
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 44 deletions.
diff --git a/src/components/LeftSection/BottomWhiteSpace/style.ts b/src/components/LeftSection/BottomWhiteSpace/style.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import colors from '@src/utils/colors';
 
 export const BottomWhiteSpace = styled.div`
-  width: 97%;
+  width: 98%;
   height: 3%;
   background-color: ${colors.borderGrey};
 `;
diff --git a/src/components/LeftSection/InputSelectionSection/style.tsx b/src/components/LeftSection/InputSelectionSection/style.tsx
@@ -4,7 +4,7 @@ import colors from '@src/utils/colors';
 export const InputSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 97%;
+  width: 98%;
   height: 280px;
   margin-top: 4px;
   border: 1px solid ${colors.borderGrey};

diff --git a/src/components/LeftSection/ResizingArea/MathSection/style.tsx b/src/components/LeftSection/ResizingArea/MathSection/style.tsx
@@ -4,7 +4,7 @@ import colors from '@src/utils/colors';
 export const MathSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 97%;
+  width: 98%;
   height: 100%;
   border: 1px solid ${colors.borderGrey};
   background-color: ${colors.white};

diff --git a/src/components/LeftSection/ResizingArea/TemplateSection/style.tsx b/src/components/LeftSection/ResizingArea/TemplateSection/style.tsx
@@ -4,7 +4,7 @@ import colors from '@src/utils/colors';
 export const TemplateSectionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 97%;
+  width: 98%;
   height: 100%;
   border: 1px solid ${colors.borderGrey};
   background-color: ${colors.white};

diff --git a/src/components/MainSection/MathQuill/style.tsx b/src/components/MainSection/MathQuill/style.tsx
@@ -46,11 +46,14 @@ export const MathField = styled.div<MathFieldProp>`
     flex-wrap: wrap;
     border: none;
   }
-  .mq-root-block var,
-  span {
+  .mq-root-block {
     text-align: ${(props) => props.fontAlign};
-    font-style: ${(props) => (props.isDecline ? 'italic' : 'normal')};
+    & var,
+    span {
+      font-style: ${(props) => (props.isDecline ? 'italic' : 'normal')};
+    }
   }
+
   .mq-empty {
     border: 0.5px dotted ${colors.grey};
     background-color: ${colors.white};

diff --git a/src/components/Toolbar/BackgroundDropdown/index.tsx b/src/components/Toolbar/BackgroundDropdown/index.tsx
@@ -4,7 +4,6 @@ import { RootState } from '@src/store/modules';
 import SUMMER from '@src/utils/svg/background/summer.svg';
 import WINTER from '@src/utils/svg/background/winter.svg';
 import BACKGROUND from '@src/utils/svg/background/background_icon.svg';
-import { RoundButton } from '@src/components/Common/RoundButton/style';
 import {
   showBackgroundDropdown,
   showWinter,
@@ -18,7 +17,6 @@ import {
   drawingRain,
   deleteSummerAnimation,
 } from '@src/utils/drawingRainAnimation';
-import { closePaint } from '@src/store/modules/paintDropdown';
 import SvgButton from '@src/components/Common/SvgButton';
 import colors from '@src/utils/colors';
 import * as StyleComponent from './style';
@@ -85,9 +83,12 @@ const Background = () => {
   const backgroundRef = useRef<HTMLDivElement>(null);
   return (
     <div ref={backgroundRef}>
-      <RoundButton onClick={onClickBackgroundHandler}>
+      <StyleComponent.BackgroundDropdownButton
+        backgroundDropdown={backgroundDropdown}
+        onClick={onClickBackgroundHandler}
+      >
         <BACKGROUND />
-      </RoundButton>
+      </StyleComponent.BackgroundDropdownButton>
       {backgroundDropdown && (
         <StyleComponent.BackgroundContainer>
           <SvgButton

diff --git a/src/components/Toolbar/BackgroundDropdown/style.tsx b/src/components/Toolbar/BackgroundDropdown/style.tsx
@@ -1,5 +1,23 @@
 import styled from 'styled-components';
 import colors from '@src/utils/colors';
+import { RoundButton } from '@src/components/Common/RoundButton/style';
+
+interface Props {
+  backgroundDropdown: boolean;
+}
+export const BackgroundDropdownButton = styled(RoundButton)<Props>`
+  background-color: ${(props) =>
+    props.backgroundDropdown ? colors.darkGrey : colors.white};
+  svg path {
+    fill: ${(props) => props.backgroundDropdown && colors.white};
+  }
+
+  &:hover {
+    background-color: ${(props) =>
+      props.backgroundDropdown ? colors.darkGrey : '#f1f3f4'};
+    opacity: 0.8;
+  }
+`;
 
 export const BackgroundContainer = styled.div`
   display: flex;
@@ -27,4 +45,3 @@ export const BackgroundContainer = styled.div`
     width: 10px;
   }
 `;
-export const BackgroundContent = styled.div``;
diff --git a/src/components/Toolbar/PaintDropdown/index.tsx b/src/components/Toolbar/PaintDropdown/index.tsx
@@ -7,7 +7,6 @@ import { RoundButton } from '@src/components/Common/RoundButton/style';
 import { showPaintDropdown } from '@src/store/modules/paintDropdown';
 import DRAWER from '@src/utils/svg/toolbar/drawer.svg';
 import setColors, { canvasX, canvasY } from '@src/utils/setColor';
-import { closeBackgroundDropdown } from '@src/store/modules/backgroundDropdown';
 import * as StyleComponent from './style';
 
 const Drawer = () => {
@@ -134,9 +133,12 @@ const Drawer = () => {
 
   return (
     <div>
-      <RoundButton onClick={() => onClickDrawerHandler(backgroundCanvas)}>
+      <StyleComponent.DropdownButton
+        paintDropdown={paintDropdown}
+        onClick={() => onClickDrawerHandler(backgroundCanvas)}
+      >
         <DRAWER />
-      </RoundButton>
+      </StyleComponent.DropdownButton>
       {paintDropdown && (
         <StyleComponent.DrawerContainer>
           {DrawerItem}

diff --git a/src/components/Toolbar/PaintDropdown/style.tsx b/src/components/Toolbar/PaintDropdown/style.tsx
@@ -1,6 +1,23 @@
 import styled from 'styled-components';
 import colors from '@src/utils/colors';
+import { RoundButton } from '@src/components/Common/RoundButton/style';
 
+interface Props {
+  paintDropdown: boolean;
+}
+export const DropdownButton = styled(RoundButton)<Props>`
+  background-color: ${(props) =>
+    props.paintDropdown ? colors.darkGrey : colors.white};
+  svg {
+    fill: ${(props) => props.paintDropdown && colors.white};
+  }
+
+  &:hover {
+    background-color: ${(props) =>
+      props.paintDropdown ? colors.darkGrey : '#f1f3f4'};
+    opacity: 0.8;
+  }
+`;
 export const DrawerContainer = styled.div`
   display: flex;
   position: absolute;
@@ -18,20 +35,16 @@ export const DrawerContainer = styled.div`
   button {
     border: none;
     background-color: ${colors.white};
-    &:hover {
-      cursor: pointer;
-    }
+    cursor: pointer;
   }
 `;
 export const DrawerDiv = styled.div`
   width: 1.2rem;
   height: 1.2rem;
   border-radius: 4px;
   background-color: ${(props) => props.color};
+  cursor: pointer;
   & + & {
     margin-left: 0.3rem;
   }
-  &:hover {
-    cursor: pointer;
-  }
 `;
diff --git a/src/components/style.ts b/src/components/style.ts
@@ -10,12 +10,18 @@ export const Header = styled.div`
 
 export const Aside = styled.div`
   width: 23%;
+  @media screen and (max-width: 1600px) {
+    width: 30%;
+  }
   height: 100%;
 `;
 export const Main = styled.div`
   display: flex;
   flex-direction: column;
   width: 77%;
+  @media screen and (max-width: 1600px) {
+    width: 70%;
+  }
 `;
 
 export const MoveArea = styled.div`

diff --git a/src/constants/mathSection.ts b/src/constants/mathSection.ts
@@ -1,8 +1,4 @@
 import { SVG } from '@src/utils/svg/leftsection/mathsection';
-import PLUS from '@src/utils/svg/leftsection/inputsection/plus.svg';
-import MINUS from '@src/utils/svg/leftsection/inputsection/minus.svg';
-import MULTIPLE from '@src/utils/svg/leftsection/inputsection/multiple.svg';
-import DIVISION from '@src/utils/svg/leftsection/inputsection/division.svg';
 
 export interface InputMath {
   name: string;
@@ -45,38 +41,32 @@ export const combi: InputMath[] = [
   {
     name: 'combi1',
     svg: SVG.combi.COMBI,
-    latex: '^{ }',
+    latex: 'x^{ }',
     isPossible: true,
   },
   {
     name: 'combi2',
     svg: SVG.combi.COMBI_DOWN,
-    latex: '{ }_{ }',
-    isPossible: true,
-  },
-  {
-    name: 'combi3',
-    svg: SVG.combi.COMBI_RIGHT,
-    latex: '{ }_{ }^{ }',
+    latex: 'x_{ }',
     isPossible: true,
   },
   {
     name: 'combi4',
     svg: SVG.combi.COMBI_LEFT,
-    latex: '_{  }^{  }{  }',
+    latex: '_{  }^{  }x',
     isPossible: true,
   },
   {
     name: 'combi5',
     svg: SVG.combi.COMBI_DOWN_BOTH,
-    latex: '{ _{  }{\\  }_{  } }',
-    isPossible: true,
+    latex: '{ _{  }x_{  } }',
+    isPossible: false,
   },
   {
     name: 'combi6',
     svg: SVG.combi.COMBI_ALL,
-    latex: '_{ }^{ }{\\ }_{ }^{ }',
-    isPossible: true,
+    latex: '_{ }^{ }\\overline{ }_{ }^{ }',
+    isPossible: false,
   },
 ];
 
@@ -141,12 +131,6 @@ export const integral: InputMath[] = [
     latex: '\\oiiint _{ }^{ }',
     isPossible: false,
   },
-  {
-    name: 'integral11',
-    svg: SVG.integral.INTEGRAL_THEOREM,
-    latex: '\\left\\lceil \\right\\rceil _{ }^{ }',
-    isPossible: false,
-  },
 ];
 
 export const sigma: InputMath[] = [