Merge pull request #111 from boostcamp-2020/feature/localstorage

feat: 탭 추가 시 localstorage 등록

src/@types/index.d.ts

@@ -2,3 +2,13 @@ declare module '*.svg' {
   const src: string;
   export default src;
 }
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}

src/components/MainSection/LatexSection/Handle.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useDrag } from 'react-dnd';
+import { useDrag, DragPreviewImage } from 'react-dnd';
 import XButton from '@src/utils/svg/latex/x_button.svg';
+import NullPreviewPng from '@src/utils/svg/latex/nullPreview.png';
 import * as StyleComponent from './style';
 
 export default function Handle() {
-  const [{ isDragging }, drag] = useDrag({
+  const [{ isDragging }, drag, resizePreview] = useDrag({
     item: { type: 'resize' },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
@@ -13,6 +14,7 @@ export default function Handle() {
 
   return (
     <>
+      <DragPreviewImage connect={resizePreview} src={NullPreviewPng} />
       <StyleComponent.Handle ref={drag}>
         <div>LaTeX</div>
         <div className="x-button">

src/components/MainSection/Tab/index.tsx

@@ -1,22 +1,68 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@src/store/modules';
-import { changeTab, addTab } from '@src/store/modules/tab';
+import { changeTab, addTab, updateTab } from '@src/store/modules/tab';
+import { change } from '@src/store/modules/mathQuill';
+import useInterval from '@src/hooks/useInterval';
 import TabList from './TabList';
 import * as StyleComponent from './style';
 
 const Tab = () => {
-  const { selectedTabId, tabList } = useSelector(
+  const { lastId, selectedTabId, tabList } = useSelector(
     (state: RootState) => state.tabReducer
   );
+  const { latex } = useSelector((state: RootState) => state.mathQuillReducer);
 
   const dispatch = useDispatch();
 
+  let storedData;
+  let newStoreData;
+
+  useInterval(() => {
+    console.log('자동저장되었습니다.');
+    storedData = JSON.parse(window.localStorage.getItem('tab'));
+    newStoreData = storedData.map(
+      (data: { id: number; title: string; latex: string }) => {
+        if (data.id === selectedTabId) {
+          return { ...data, latex };
+        }
+        return data;
+      }
+    );
+    window.localStorage.setItem('tab', JSON.stringify(newStoreData));
+  }, 10000);
+
   const handleChangeTab = (tabId: number) => {
+    storedData = JSON.parse(window.localStorage.getItem('tab'));
+    const selectedTabData = storedData.filter(
+      (tab: { id: number; title: string; latex: string }) => tab.id === tabId
+    )[0];
+
+    newStoreData = storedData.map(
+      (data: { id: number; title: string; latex: string }) => {
+        if (data.id === selectedTabId) {
+          return { ...data, latex };
+        }
+        return data;
+      }
+    );
+
     dispatch(changeTab(tabId));
+    dispatch(change(selectedTabData.latex));
+    dispatch(updateTab(newStoreData));
+    window.localStorage.setItem('tab', JSON.stringify(newStoreData));
   };
 
   const handleAddTab = () => {
+    storedData = JSON.parse(window.localStorage.getItem('tab'));
+
+    newStoreData = storedData.concat({
+      id: lastId + 1,
+      title: `TAB${lastId + 1}`,
+      latex: 'blank',
+    });
+
+    window.localStorage.setItem('tab', JSON.stringify(newStoreData));
     dispatch(addTab());
   };
 
@@ -46,6 +92,17 @@ const Tab = () => {
     />
   );
 
+  useEffect(() => {
+    console.log('Successful import from local storage!');
+    storedData = JSON.parse(window.localStorage.getItem('tab'));
+    if (storedData !== null) {
+      dispatch(updateTab(storedData));
+      dispatch(change(storedData[0].latex));
+    } else {
+      window.localStorage.setItem('tab', JSON.stringify(tabList));
+    }
+  }, []);
+
   return <StyleComponent.TabContainer>{list}</StyleComponent.TabContainer>;
 };
 export default Tab;

src/components/Toolbar/index.tsx

@@ -69,7 +69,7 @@ const ToolBar = () => {
         <FontColorDropdown />
         <AlignButton />
         <RoundButton onClick={buttonAttributes[2].onClick}>
-          <div className="title">F</div>
+          <div className="title">f</div>
         </RoundButton>
         <RoundButton onClick={buttonAttributes[0].onClick}>
           <DRAWER />

src/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const useInterval = (callback: any, delay: any) => {
+  const savedCallback: any = useRef();
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return undefined;
+  }, [delay]);
+};
+
+export default useInterval;

src/store/modules/tab.ts

@@ -2,34 +2,50 @@ import { createAction, handleActions } from 'redux-actions';
 
 const CHANGE_TAB = 'tab/CHANGE_TAB' as const;
 const ADD_TAB = 'tab/ADD_TAB' as const;
+const UPDATE_TAB = 'tab/UPDATE_TAB' as const;
 
 export const changeTab = createAction(CHANGE_TAB);
 export const addTab = createAction(ADD_TAB);
+export const updateTab = createAction(UPDATE_TAB);
 
-type Action = ReturnType<typeof changeTab> | ReturnType<typeof addTab>;
+type Action =
+  | ReturnType<typeof changeTab>
+  | ReturnType<typeof addTab>
+  | ReturnType<typeof updateTab>;
 
 export interface TabState {
   lastId: number;
   selectedTabId: number;
-  tabList: { id: number; title: string }[];
+  tabList: { id: number; title: string; latex: string }[];
 }
 
 const initialState = {
   lastId: 1,
   selectedTabId: 1,
-  tabList: [{ id: 1, title: 'TAB1' }],
+  tabList: [{ id: 1, title: 'TAB1', latex: 'blank' }],
 };
 
 export const tabReducer = handleActions(
   {
     [CHANGE_TAB]: (state, action: Action) => {
       return { ...state, selectedTabId: action.payload };
     },
-    [ADD_TAB]: (state, action: Action) => {
+    [ADD_TAB]: (state) => {
       return {
         ...state,
         lastId: state.lastId + 1,
-        tabList: state.tabList.concat({ id: state.lastId + 1, title: 'TAB1' }),
+        tabList: state.tabList.concat({
+          id: state.lastId + 1,
+          title: `TAB${state.lastId + 1}`,
+          latex: 'blank',
+        }),
+      };
+    },
+    [UPDATE_TAB]: (state, action: Action) => {
+      return {
+        ...state,
+        lastId: action.payload.length,
+        tabList: action.payload,
       };
     },
   },

webpack.config.js

@@ -37,6 +37,10 @@ module.exports = {
         test: /\.svg$/,
         use: ['@svgr/webpack'],
       },
+      {
+        test: /\.(png|jpg)$/,
+        use: ['file-loader'],
+      },
     ],
   },
   devServer: {