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'); };