Merge pull request #170 from thdwlsgus0/feature/savebutton

저장 버튼 수정

src/components/Header/SaveButtons.tsx

@@ -1,25 +1,46 @@
 import React from 'react';
-import Button from '@src/components/Common/Button';
-import colors from '@src/utils/colors';
+import { setCropContainer } from '@src/store/modules/getMathQuill';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@src/store/modules';
+import html2canvas from 'html2canvas';
 import * as StyledComponent from './style';
 
 interface ButtonProps {
  color: string;
  value: string;
  onClick: () => void;
+ saveClick: boolean;
 }
 
-const SaveButtons = ({ color, value, onClick }: ButtonProps) => {
- const onClickImageSaveHandler = async () => {
- console.log('hi');
+const SaveButtons = ({ color, value, onClick, saveClick }: ButtonProps) => {
+ const dispatch = useDispatch();
+ const { mathQuillContainer } = useSelector(
+ (state: RootState) => state.getMathQuillReducer
+ );
+ const { click } = useSelector(
+ (state: RootState) => state.getMathQuillReducer
+ );
+ const onClickImageSeveralSaveHandler = () => {
+ dispatch(setCropContainer(true));
+ };
+ const onClickSaveAllHandler = async () => {
+ if (!click) {
+ const mathquillSection = mathQuillContainer.current;
+ const canvas = await html2canvas(mathquillSection);
+ const imageUrl = canvas.toDataURL('data:image/gif;base64');
+ const aTag = document.createElement('a');
+ aTag.download = '수식 저장.gif';
+ aTag.href = imageUrl;
+ aTag.click();
+ }
  };
  return (
- <StyledComponent.SaveButtonContainer>
- <StyledComponent.MiniButton>
+ <StyledComponent.SaveButtonContainer saveClick={saveClick}>
+ <StyledComponent.MiniButton onClick={onClickSaveAllHandler}>
  <span className="text">전체</span>
  <span className="text">저장</span>
  </StyledComponent.MiniButton>
- <StyledComponent.MiniButton>
+ <StyledComponent.MiniButton onClick={onClickImageSeveralSaveHandler}>
  <span className="text">부분</span>
  <span className="text">저장</span>
  </StyledComponent.MiniButton>

src/components/Header/index.tsx

@@ -6,21 +6,27 @@ import colors from '@src/utils/colors';
 import { RootState } from '@src/store/modules';
 import { useSelector, useDispatch } from 'react-redux';
 import saveAsFile from '@src/utils/savefile';
-import { setCropContainer } from '@src/store/modules/getMathQuill';
+import {
+ setSaveContainer,
+ setCropContainer,
+} from '@src/store/modules/getMathQuill';
 import HeaderTitle from './HeaderTitle';
 import SaveButtons from './SaveButtons';
 import * as StyleComponent from './style';
 
 const Header = () => {
- const { click } = useSelector(
+ const dispatch = useDispatch();
+ const { saveClick } = useSelector(
  (state: RootState) => state.getMathQuillReducer
  );
  const { mathQuiiFunc } = useSelector(
  (state: RootState) => state.mathQuillReducer
  );
- const dispatch = useDispatch();
- const onClickImageSaveHandler = async () => {
- dispatch(setCropContainer(true));
+ const { click } = useSelector(
+ (state: RootState) => state.getMathQuillReducer
+ );
+ const onClickSaveHandler = () => {
+ dispatch(setSaveContainer(!saveClick));
  };
 
  const onClickExportHandler = () => {
@@ -38,12 +44,13 @@ const Header = () => {
  <SaveModeButton
  color={colors.lightGrey}
  value="저장 모드"
- onClick={onClickImageSaveHandler}
+ onClick={onClickSaveHandler}
  />
  <SaveButtons
  color={colors.lightGrey}
  value="저장 모드"
- onClick={onClickImageSaveHandler}
+ onClick={onClickSaveHandler}
+ saveClick={saveClick}
  />
  <Button
  color={colors.lightGrey}

src/components/Header/style.tsx

@@ -34,24 +34,25 @@ export const Title = styled.div`
  color: ${colors.grey};
  }
 `;
-
-export const SaveButtonContainer = styled.div`
- display: flex;
+interface Props {
+ saveClick: boolean;
+}
+export const SaveButtonContainer = styled.div<Props>`
+ display: ${(props) => (props.saveClick ? 'flex' : 'none')};
  align-items: center;
  width: 110px;
  justify-content: space-between;
  margin-right: 1.87rem;
- display: none;
 `;
 
 export const MiniButton = styled.div`
-  display: flex;
- flex-direction: column;
+ display: lex;
+ flex-dection: column;
  justify-content: space-between 
  width: 50px;
  height: 100%;
  align-items: center;
- background-color: ${colors.grey};
+  background-color: ${colors.grey};
  padding: 3px;
  border-radius: 3px;
  cursor: pointer;

src/components/MainSection/MainSection.tsx

@@ -27,6 +27,9 @@ const MainSection = () => {
  const { isBackgroundDropdownShow } = useSelector(
  (state: RootState) => state.BackgroundDropdownHandler
  );
+ const { saveClick } = useSelector(
+ (state: RootState) => state.getMathQuillReducer
+ );
  const {isDropdownShow} = useSelector(
  (state:RootState) => state.drawerDropdownHandler
  )
@@ -122,7 +125,7 @@ const MainSection = () => {
  height={height}
  />
 
- {click && <CropSection />}
+ {click && saveClick && <CropSection /> }
  </>
  );
 };

src/components/Toolbar/BackgroundDropdown/index.tsx

@@ -60,6 +60,7 @@ const Background = () => {
  drawingSnow(context, canvas.width, canvas.height, winterDropdownShow);
  }
  };
+
  const backgroundRef = useRef<HTMLDivElement>(null);
  return (
  <div ref={backgroundRef}>

src/components/Toolbar/DrawerDropDown/index.tsx

@@ -21,14 +21,17 @@ const Drawer = () => {
  const { backgroundCanvas } = useSelector(
  (state: RootState) => state.BackgroundDropdownHandler
  );
+
  const dispatch = useDispatch();
  const color = ['black', 'yellow', 'red', 'green'];
  const [click, setClick] = useState(false);
  const [colorValue, setColor] = useState();
+
  const onClickHandler = (e: React.MouseEvent<HTMLElement>) => {
  const canvas = backgroundCanvas.current;
  const contexts = canvas.getContext('2d');
  const [colors, context] = setColors(e.target, contexts);
+
  setColor(colors);
  };
 
@@ -37,7 +40,8 @@ const Drawer = () => {
  const canvas = backgroundCanvas.current;
  if (!canvas) return;
  const context = canvas.getContext('2d');
- if (context === null) return;
+ if (!context) return;
+
  const x = canvasX(e.clientX, canvas);
  const y = canvasY(e.clientY, canvas);
  context.beginPath();
@@ -52,10 +56,11 @@ const Drawer = () => {
  const canvas = backgroundCanvas.current;
  if (!canvas) return;
  const context = canvas.getContext('2d');
- if (context === null) return;
+ if (!context) return;
+
  const x = canvasX(e.clientX, canvas);
  const y = canvasY(e.clientY, canvas);
- if (click) {
+ if (click && isDropdownShow) {
  context.lineTo(x, y);
  context.lineWidth = ref.current.value;
  context.stroke();
@@ -85,6 +90,7 @@ const Drawer = () => {
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, 300, 300);
  };
+
  useEffect(() => {
  document.addEventListener('mouseup', mouseUpHandler);
  return () => document.removeEventListener('mouseup', mouseUpHandler);

src/hooks/useOutSideClick.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-useless-return */
 import { useEffect, MutableRefObject } from 'react';
 import { useDispatch } from 'react-redux';
 

src/store/modules/getMathQuill.ts

@@ -2,18 +2,21 @@ import { createAction, handleActions } from 'redux-actions';
 
 const GET_MATHQUILL_CONTAINER = ' GET_MATHQUILL_CONTAINER';
 const SET_CROP_CONTAINER = 'SET_CROP_CONTAINER';
+const SHOW_SAVE_CONTAINER = 'SHOW_SAVE_CONTAINER';
 
 export const getMathQuillContainer = createAction(GET_MATHQUILL_CONTAINER);
 export const setCropContainer = createAction(SET_CROP_CONTAINER);
-
+export const setSaveContainer = createAction(SHOW_SAVE_CONTAINER);
 export interface MathQuillContainerState {
  mathQuillContainer: any;
  click: boolean;
+ saveClick: boolean;
 }
 
 const initialState = {
  mathQuillContainer: '',
  click: false,
+ saveClick: false,
 };
 
 export const getMathQuillReducer = handleActions(
@@ -24,6 +27,9 @@ export const getMathQuillReducer = handleActions(
  [SET_CROP_CONTAINER]: (state = initialState, action: any) => {
  return { ...state, click: !state.click };
  },
+ [SHOW_SAVE_CONTAINER]: (state = initialState, action: any) => {
+ return { ...state, saveClick: !state.saveClick };
+ },
  },
  initialState
 );

src/utils/backgroundAnimation.ts

@@ -16,6 +16,7 @@ const initSnow = () => {
  const t = Math.random() * (Math.PI * 2);
  g.addColorStop(0, 'rgba(255,255,255,1)');
  g.addColorStop(1, 'rgba(255,255,255,0)');
+
  context.beginPath();
  context.moveTo(x, y);
  context.fillStyle = g;
@@ -70,6 +71,7 @@ export const drawingSnow = (
  height = h;
  context = ctx;
  backGround = background;
+
  context.fillStyle = 'rgba(0,0,0,0.7)';
  context.fillRect(0, 0, width, height);
  snowArr = [];

src/utils/setColor.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable consistent-return */
 const setColor = (e: EventTarget, context: any) => {
  const e1 = e as HTMLElement;