From f760f61a0edae7fa71e2bce33ff2d1a3299c1244 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 16:26:41 +0900
Subject: [PATCH 1/7] =?UTF-8?q?fix=20:=20=EC=9C=84=EC=B9=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 입력 선택 부분의 위치를 왼쪽으로 이동하였습니다.
---
 src/components/LeftSection/InputSelectionSection/style.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LeftSection/InputSelectionSection/style.tsx b/src/components/LeftSection/InputSelectionSection/style.tsx
index e95c50a..988a30e 100644
--- a/src/components/LeftSection/InputSelectionSection/style.tsx
+++ b/src/components/LeftSection/InputSelectionSection/style.tsx
@@ -11,10 +11,10 @@ export const InputSectionContainer = styled.div`
 
 export const InputTopSelectionSectionContainer = styled.div`
   width: 100%;
-  height: 48%;
+  height: 43%;
   border-bottom: 1px solid ${colors.borderGrey};
-  padding-top: 3px;
   padding-bottom: 5px;
+  margin-left: -10px;
 `;
 export const InputBottomSelectionSectionContainer = styled.div`
   width: 100%;

From a3c5e19cba1f6aefb5d8fd1be3fe4450d659a394 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 16:27:02 +0900
Subject: [PATCH 2/7] =?UTF-8?q?chore=20:=20=20latex=20=EB=AC=B8=EB=B2=95?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. latex 문법을 수정하였습니다.
---
 src/constants/InputSection.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/constants/InputSection.ts b/src/constants/InputSection.ts
index 69593c6..ed92b10 100644
--- a/src/constants/InputSection.ts
+++ b/src/constants/InputSection.ts
@@ -32,7 +32,7 @@ export const InputLatexTopContent: InputLatex[] = [
   {
     name: 'multiply',
     svg: MULTPLY,
-    latex: '\frac{ }{ }',
+    latex: '\\frac{ }{ }',
   },
   {
     name: 'root',
@@ -42,7 +42,8 @@ export const InputLatexTopContent: InputLatex[] = [
   {
     name: 'pow',
     svg: POW,
-    latex: '\\combi{ }^{ }',
+
+    latex: '^{ }',
   },
   {
     name: 'integral',
@@ -57,39 +58,40 @@ export const InputLatexTopContent: InputLatex[] = [
   {
     name: 'galho',
     svg: GLOHO,
-    latex: 'left{combi{ }\right}',
+    latex: '\\left\\{\\right\\}',
   },
 ];
 export const InputLatexBottomContent: InputLatex[] = [
   {
     name: 'sin',
     svg: SIN,
-    latex: 'sin ^{ }',
+    latex: '\\sin ^{ }',
   },
   {
     name: 'decoration',
     svg: DECORATION,
-    latex: 'ddot{ }',
+    latex: '\\dot{ }\\dot{ }',
   },
   {
     name: 'limit',
     svg: LIMIT,
-    latex: 'lim _{ }^{ }combi{ }',
+    latex: '\\lim _{ }^{ }',
   },
   {
     name: 'operator',
     svg: OPERATOR,
-    latex: 'deltaequal ',
+    latex: '+=',
   },
   {
     name: 'matrix',
     svg: MATRIX,
-    latex: '\begin{matrix}&\\&end{matrix}',
+    latex: '\\left[\\begin{matrix}3&4\\1&2\\\\end{matrix}\\right]',
   },
   {
     name: 'inputdraw',
     svg: INPUTDRAW,
-    latex: '\begin{matrix}&\\&end{matrix}',
+    latex:
+      '\\begin{grid}\\cell{0000}&\\cell{0000}\\\\cell{0000}&\\cell{0000}\\end{grid}',
   },
 ];
 export const InputLatexMathTopContent: InputLatex[] = [

From 21ad3910acde48232dcc77fcbdace0e79123fd3e Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 20:01:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?chore=20:=20=EC=88=98=EC=8B=9D=20=EA=B8=B0?=
 =?UTF-8?q?=ED=98=B8=20latex=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 수식 기호 latex 수정
---
 src/constants/InputSection.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/constants/InputSection.ts b/src/constants/InputSection.ts
index ed92b10..6d42ec3 100644
--- a/src/constants/InputSection.ts
+++ b/src/constants/InputSection.ts
@@ -80,7 +80,7 @@ export const InputLatexBottomContent: InputLatex[] = [
   {
     name: 'operator',
     svg: OPERATOR,
-    latex: '+=',
+    latex: '\\triangleq',
   },
   {
     name: 'matrix',
@@ -98,7 +98,7 @@ export const InputLatexMathTopContent: InputLatex[] = [
   {
     name: 'arrow',
     svg: ARROW,
-    latex: 'gets',
+    latex: '\\gets',
   },
   {
     name: 'inequality',
@@ -108,17 +108,17 @@ export const InputLatexMathTopContent: InputLatex[] = [
   {
     name: 'notoperator',
     svg: NOTOPERATOR,
-    latex: '\nless ',
+    latex: '\\nless ',
   },
   {
     name: 'figure',
     svg: FIGURE,
-    latex: '\rightangle ',
+    latex: '\\lfloor',
   },
   {
     name: 'unit',
     svg: UNIT,
-    latex: 'cmx ',
+    latex: '\\mx',
   },
   {
     name: 'specialsymbol',
@@ -140,21 +140,21 @@ export const InputLatexMathBottomContent: InputLatex[] = [
   {
     name: 'multiple',
     svg: MULTIPLE,
-    latex: '\times ',
+    latex: '\\times ',
   },
   {
     name: 'division',
     svg: DIVISION,
-    latex: 'div ',
+    latex: '\\div ',
   },
   {
     name: 'greece',
     svg: GREECE,
-    latex: 'alpha ',
+    latex: '\\alpha ',
   },
   {
     name: 'font',
     svg: FONT,
-    latex: 'E ',
+    latex: '\\epsilon',
   },
 ];

From 1ccbff0571d6817de42fb08531112f1e658f3649 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 20:05:38 +0900
Subject: [PATCH 4/7] =?UTF-8?q?style=20:=20=EC=88=98=EC=8B=9D=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EB=B6=80=EB=B6=84=20=ED=95=98=EB=8B=A8=20ui=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 수식 입력 부분 하단 ui를 생성하였습니다.
---
 .../InputBottomSelectionSection.tsx           | 79 +++++++++++--------
 .../InputSelectionSection/index.tsx           |  3 +-
 .../InputSelectionSection/style.tsx           | 19 ++++-
 3 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection.tsx b/src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection.tsx
index cd4a772..53c395c 100644
--- a/src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection.tsx
+++ b/src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection.tsx
@@ -1,36 +1,47 @@
-// import React from 'react';
-// import {
-//   InputLatexMathTopContent,
-//   InputLatexMathBottomContent,
-// } from '@src/constants/InputSection';
-// import Svg from '@src/components/Common/Svg';
-// import { InputLatexContent } from '@src/components/Common/LatexContent/style';
-// import * as StyledComponent from './style';
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import {
+  InputLatexMathTopContent,
+  InputLatexMathBottomContent,
+} from '@src/constants/InputSection';
+import { LatexContent } from '@src/components/Common/LatexContent';
 
-// const InputBottomSelectionSection = () => {
-//   return (
-//     <>
-//       <StyledComponent.InputBottomSelectionSectionContainer>
-//         <StyledComponent.InputLatexContainer>
-//           {InputLatexMathTopContent.map((value, index) => (
-//             <InputLatexContent key={`dab${index}`} width="40" height="40">
-//               <Svg Svg={value.svg} />
-//             </InputLatexContent>
-//           ))}
-//           <InputLatexContent width="107" height="40">
-//             <StyledComponent.Dictionary>수식 사전</StyledComponent.Dictionary>
-//           </InputLatexContent>
-//         </StyledComponent.InputLatexContainer>
-//         <StyledComponent.InputLatexContainer>
-//           {InputLatexMathBottomContent.map((value, index) => (
-//             <InputLatexContent key={`dab${index}`} width="40" height="40">
-//               <Svg Svg={value.svg} />
-//             </InputLatexContent>
-//           ))}
-//         </StyledComponent.InputLatexContainer>
-//       </StyledComponent.InputBottomSelectionSectionContainer>
-//     </>
-//   );
-// };
+import * as StyledComponent from './style';
 
-// export default InputBottomSelectionSection;
+const InputBottomSelectionSection = () => {
+  return (
+    <>
+      <StyledComponent.InputBottomSelectionSectionContainer>
+        <StyledComponent.InputLatexContainer>
+          {InputLatexMathTopContent.map((value, index) => (
+            <LatexContent
+              key={`latex-dab${index}`}
+              svg={value.svg}
+              latex={value.latex}
+              name={value.name}
+              width="40"
+              height="40"
+            />
+          ))}
+          <StyledComponent.InputLatexContent width="102" height="40">
+            <StyledComponent.Dictionary>수식 사전</StyledComponent.Dictionary>
+          </StyledComponent.InputLatexContent>
+        </StyledComponent.InputLatexContainer>
+        <StyledComponent.InputLatexContainer>
+          {InputLatexMathBottomContent.map((value, index) => (
+            <LatexContent
+              key={`latex-${index}`}
+              width="40"
+              height="40"
+              svg={value.svg}
+              name={value.name}
+              latex={value.latex}
+            />
+          ))}
+        </StyledComponent.InputLatexContainer>
+      </StyledComponent.InputBottomSelectionSectionContainer>
+    </>
+  );
+};
+
+export default InputBottomSelectionSection;
diff --git a/src/components/LeftSection/InputSelectionSection/index.tsx b/src/components/LeftSection/InputSelectionSection/index.tsx
index aaf1189..9b80040 100644
--- a/src/components/LeftSection/InputSelectionSection/index.tsx
+++ b/src/components/LeftSection/InputSelectionSection/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Title from '@src/components/Common/Title';
 import InputTopSelectionSection from '@src/components/LeftSection/InputSelectionSection/InputTopSelectionSection';
-// import InputBottomSelectionSection from '@src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection';
+import InputBottomSelectionSection from '@src/components/LeftSection/InputSelectionSection/InputBottomSelectionSection';
 import * as StyledComponent from './style';
 import { Box } from './Box';
 
@@ -12,6 +12,7 @@ const InputSelectionSectionContainer = () => {
         <Title title="입력 선택" />
         {/* <Box name="Glass" latex="\frac{ }{ }" /> */}
         <InputTopSelectionSection />
+        <InputBottomSelectionSection />
       </StyledComponent.InputSectionContainer>
     </>
   );
diff --git a/src/components/LeftSection/InputSelectionSection/style.tsx b/src/components/LeftSection/InputSelectionSection/style.tsx
index 988a30e..381e292 100644
--- a/src/components/LeftSection/InputSelectionSection/style.tsx
+++ b/src/components/LeftSection/InputSelectionSection/style.tsx
@@ -11,13 +11,14 @@ export const InputSectionContainer = styled.div`
 
 export const InputTopSelectionSectionContainer = styled.div`
   width: 100%;
-  height: 43%;
-  border-bottom: 1px solid ${colors.borderGrey};
+  height: 46%;
   padding-bottom: 5px;
   margin-left: -10px;
 `;
 export const InputBottomSelectionSectionContainer = styled.div`
   width: 100%;
+  margin-top: 10px;
+  margin-left: -10px;
 `;
 export const InputLatexContainer = styled.div`
   display: flex;
@@ -27,3 +28,17 @@ export const InputLatexContainer = styled.div`
 export const Dictionary = styled.p`
   padding: 10px 20px;
 `;
+interface InputLatexContentProps {
+  width: string;
+  height: string;
+}
+export const InputLatexContent = styled.div<InputLatexContentProps>`
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+  border: 1px solid ${colors.borderGrey};
+  padding-top: 10px;
+  &:hover {
+    cursor: pointer;
+    border: 1px solid ${colors.mainGreen};
+  }
+`;

From bdc66114ec881e22d72d5365e0f55f4607dbeb97 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 20:16:26 +0900
Subject: [PATCH 5/7] =?UTF-8?q?chore=20:=20cm2=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. cm2를 변경하였습니다.
---
 src/constants/InputSection.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/InputSection.ts b/src/constants/InputSection.ts
index 6d42ec3..7a7653e 100644
--- a/src/constants/InputSection.ts
+++ b/src/constants/InputSection.ts
@@ -85,7 +85,7 @@ export const InputLatexBottomContent: InputLatex[] = [
   {
     name: 'matrix',
     svg: MATRIX,
-    latex: '\\left[\\begin{matrix}3&4\\1&2\\\\end{matrix}\\right]',
+    latex: '\\begin{pmatrix}  &  \\  &  \\end{pmatrix}',
   },
   {
     name: 'inputdraw',
@@ -118,7 +118,7 @@ export const InputLatexMathTopContent: InputLatex[] = [
   {
     name: 'unit',
     svg: UNIT,
-    latex: '\\mx',
+    latex: '㎠',
   },
   {
     name: 'specialsymbol',

From f83a6bf364d43fae8c92c9e8f26dee25c3255cd1 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 23:25:38 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feature=20:=20=EC=88=98=EC=8B=9D=20html,=20?=
 =?UTF-8?q?css=20=EC=A0=80=EC=9E=A5=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. html과 css를 저장해서 공유할 수 있도록 구현하였습니다.
---
 src/components/Header/index.tsx            | 15 ++++++++++++++-
 src/components/MainSection/MainSection.tsx |  1 +
 src/store/modules/getMathQuill.ts          |  2 --
 src/utils/savefile.ts                      |  9 +++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/savefile.ts

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 6ba7d26..67656cc 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -5,6 +5,7 @@ import colors from '@src/utils/colors';
 import html2canvas from 'html2canvas';
 import { RootState } from '@src/store/modules';
 import { useSelector, useDispatch } from 'react-redux';
+import saveAsFile from '@src/utils/savefile';
 import HeaderTitle from './HeaderTitle';
 import * as StyleComponent from './style';
 
@@ -12,6 +13,9 @@ const Header = () => {
   const { mathQuillContainer } = useSelector(
     (state: RootState) => state.getMathQuillReducer
   );
+  const { mathQuiiFunc } = useSelector(
+    (state: RootState) => state.mathQuillReducer
+  );
   const onClickImageSaveHandler = async () => {
     const mathquillSection = mathQuillContainer.current;
     const canvas = await html2canvas(mathquillSection);
@@ -23,8 +27,17 @@ const Header = () => {
     aTag.click();
     document.body.removeChild(aTag);
   };
+
   const onClickExportHandler = () => {
-    console.log('export ');
+    alert('html css가 복사가 완료되었습니다.');
+    const input = document.createElement('input');
+
+    const style = window.getComputedStyle(
+      document.querySelector('.mq-root-block')
+    ) as any;
+    input.setAttribute('value', JSON.stringify(style));
+    saveAsFile(mathQuiiFunc.html(), 'html.txt');
+    saveAsFile(JSON.stringify(style), 'css.txt');
   };
   return (
     <StyleComponent.HeaderContainer>
diff --git a/src/components/MainSection/MainSection.tsx b/src/components/MainSection/MainSection.tsx
index 0168b8c..209832a 100644
--- a/src/components/MainSection/MainSection.tsx
+++ b/src/components/MainSection/MainSection.tsx
@@ -21,6 +21,7 @@ const MainSection = () => {
     dispatch(change(e.target.value));
   };
   const mainSectionRef = useRef<HTMLDivElement>(null);
+
   const [{ canDrop, isOver }, drop] = useDrop({
     accept: 'box',
     collect: (monitor) => ({
diff --git a/src/store/modules/getMathQuill.ts b/src/store/modules/getMathQuill.ts
index 8c1a2aa..af95d55 100644
--- a/src/store/modules/getMathQuill.ts
+++ b/src/store/modules/getMathQuill.ts
@@ -1,9 +1,7 @@
 import { createAction, handleActions } from 'redux-actions';
 
 const GET_MATHQUILL_CONTAINER = ' GET_MATHQUILL_CONTAINER';
-
 export const getMathQuillContainer = createAction(GET_MATHQUILL_CONTAINER);
-
 export interface MathQuillContainerState {
   mathQuillContainer: any;
 }
diff --git a/src/utils/savefile.ts b/src/utils/savefile.ts
new file mode 100644
index 0000000..df773ec
--- /dev/null
+++ b/src/utils/savefile.ts
@@ -0,0 +1,9 @@
+const saveAsFile = (str: any, filename: string) => {
+  const hiddenElement = document.createElement('a');
+  hiddenElement.href = `data:attachment/text,${encodeURI(str)}`;
+  hiddenElement.target = '_blank';
+  hiddenElement.download = filename;
+  hiddenElement.click();
+};
+
+export default saveAsFile;

From 11cddcf48f6db38be805457996d736d4f53614c7 Mon Sep 17 00:00:00 2001
From: thdwlsgus0 <thdwlsgus0@naver.com>
Date: Thu, 3 Dec 2020 23:29:12 +0900
Subject: [PATCH 7/7] =?UTF-8?q?refactor=20:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. input 태그를 제거해주었습니다.
---
 src/components/Header/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 67656cc..284c782 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -29,13 +29,9 @@ const Header = () => {
   };
 
   const onClickExportHandler = () => {
-    alert('html css가 복사가 완료되었습니다.');
-    const input = document.createElement('input');
-
     const style = window.getComputedStyle(
       document.querySelector('.mq-root-block')
     ) as any;
-    input.setAttribute('value', JSON.stringify(style));
     saveAsFile(mathQuiiFunc.html(), 'html.txt');
     saveAsFile(JSON.stringify(style), 'css.txt');
   };