Merge pull request #110 from boostcamp-2020/feature/htmlcss

feat: export 버튼 기능 구현
boostcamp-2020 · Dec 4, 2020 · 3370e42 · 3370e42
2 parents eff5c83 + 30c30b1
commit 3370e42
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 57 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -5,13 +5,17 @@ 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';
 
 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,13 @@ const Header = () => {
     aTag.click();
     document.body.removeChild(aTag);
   };
+
   const onClickExportHandler = () => {
-    console.log('export ');
+    const style = window.getComputedStyle(
+      document.querySelector('.mq-root-block')
+    ) as any;
+    saveAsFile(mathQuiiFunc.html(), 'html.txt');
+    saveAsFile(JSON.stringify(style), 'css.txt');
   };
   return (
     <StyleComponent.HeaderContainer>

diff --git 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
@@ -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
@@ -11,13 +11,14 @@ export const InputSectionContainer = styled.div`
 
 export const InputTopSelectionSectionContainer = styled.div`
   width: 100%;
-  height: 48%;
-  border-bottom: 1px solid ${colors.borderGrey};
-  padding-top: 3px;
+  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};
+  }
+`;
diff --git 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/constants/InputSection.ts b/src/constants/InputSection.ts
@@ -42,7 +42,8 @@ export const InputLatexTopContent: InputLatex[] = [
   {
     name: 'pow',
     svg: POW,
-    latex: '\\combi{ }^{ }',
+
+    latex: '^{ }',
   },
   {
     name: 'integral',
@@ -57,46 +58,47 @@ 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: '\\triangleq',
   },
   {
     name: 'matrix',
     svg: MATRIX,
-    latex: '\begin{matrix}&\\&end{matrix}',
+    latex: '\\begin{pmatrix}  &  \\  &  \\end{pmatrix}',
   },
   {
     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[] = [
   {
     name: 'arrow',
     svg: ARROW,
-    latex: 'gets',
+    latex: '\\gets',
   },
   {
     name: 'inequality',
@@ -106,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: '㎠',
   },
   {
     name: 'specialsymbol',
@@ -138,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',
   },
 ];
diff --git 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
@@ -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;