From e5adef5f5113fa2aa430a544569c1c9e0283437b Mon Sep 17 00:00:00 2001
From: taha12322 <66300435+taha12322@users.noreply.github.com>
Date: Sat, 28 Aug 2021 11:22:17 +0430
Subject: [PATCH] footer setting

---
 src/components/style/footerStyle.scss |  20 +-
 src/containers/Footer.tsx             | 305 +++++++++++++++-----------
 src/containers/Header.tsx             |  11 +-
 src/containers/Reader.tsx             |  15 +-
 src/containers/menu/Option.tsx        |  82 +++----
 src/lib/svg/BookClose.js              |   4 +-
 src/lib/svg/BookOpen.js               |   4 +-
 src/lib/svg/ScrollVertical.js         |   6 +-
 src/slices/book.ts                    | 201 +++++++++--------
 9 files changed, 354 insertions(+), 294 deletions(-)

diff --git a/src/components/style/footerStyle.scss b/src/components/style/footerStyle.scss
index c53b7af..ce72e79 100644
--- a/src/components/style/footerStyle.scss
+++ b/src/components/style/footerStyle.scss
@@ -19,8 +19,14 @@
     align-items: center;
     margin-bottom: 5px;
     .icon{
-      width: 25px;
-      margin-left: 1rem;
+      width: 30px;
+      padding: 4px 5px;
+      margin-left: 0.25rem;
+      cursor: pointer;
+    }
+    .active{
+      border-radius: 7px;
+      background-color: #009aa8;
     }
   }
 }
@@ -31,14 +37,4 @@
 
 }
 
-.active{
-  border-radius: 20%;
-  width: 65px;
-  background-color: #009aa873;
-}
-
-.icon{
-  width: 65px;
-}
-
 
diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx
index 8f203b2..2c14f7b 100644
--- a/src/containers/Footer.tsx
+++ b/src/containers/Footer.tsx
@@ -18,59 +18,73 @@ import "../components/style/footerStyle.scss";
 const Footer = ({
   // title,
   nowPage,
-  totalPage,
-  viewType,
-  // onPageMove,
-  CountPage,
-  onClickDirection,
-  onClickViewType,
+  // totalPage,
+  //viewType,
+  // // onPageMove,
+  // CountPage,
+  // onClickDirection,
+  // onClickViewType,
   onBookOptionChange,
   bookOption,
 }: Props) => {
-  //scroll onepage
-  //noscoroll onepage
-  //noscroll twopage
-
-  const [scrollToggle, setScrollToggle] = useState(false);
-
-  // const [settingIcons, setSettingIcons] = useState({
-  //   scroll: 0,
-  //   onePage: 0,
-  //   twoPage: 0,
-  //   noscroll: 0,
-  // });
-
-  // const changeActiveHandler = () => {
-  //   if (toggleIcon === 1) {
-  //     setSettingIcons({
-  //       ...settingIcons,
-  //       noscroll: 1,
-  //     });
-  //   } else if (toggleIcon === 2) {
-  //     setSettingIcons({
-  //       ...settingIcons,
-  //       scroll: 1,
-  //     });
-  //   }
-  // };
-
-  // const [active, setActive] = useState(1);
-  // const [toggleIcon, setToggleIcon] = useState(false);
-  // const onToggle = () => {
-  //   if (active === 1 || 2) {
-  //     setActive(3);
-  //   }
-  //   setToggleIcon(false);
-  // };
-  let isMobile = window.innerWidth <= 768
+  //desctop setting
+  const [mode, setdesctopIsActive] = useState(2);
+  //desctop fnc
+  const desctopTwoPageHandler = () => {
+    setdesctopIsActive(2);
+    onBookOptionChange({
+      ...bookOption,
+      flow: "paginated",
+      spread: "auto",
+    });
+  };
+  const desctopSinglePageHandler = () => {
+    setdesctopIsActive(1);
+    onBookOptionChange({
+      ...bookOption,
+      flow: "paginated",
+      spread: "none",
+    });
+  };
+  const desctopScrollPageHandler = () => {
+    setdesctopIsActive(0);
+    onBookOptionChange({
+      ...bookOption,
+      flow: "scrolled-doc",
+      spread: "none",
+    });
+  };
+
+  //mobile fnc
+  const mobilePageHandler = () => {
+    setdesctopIsActive(1);
+    onBookOptionChange({
+      ...bookOption,
+      flow: "paginated",
+      spread: "none",
+    });
+  };
+  const mobileScrollPageHandler = () => {
+    setdesctopIsActive(0);
+    onBookOptionChange({
+      ...bookOption,
+      flow: "scrolled-doc",
+      spread: "none",
+    });
+  };
+
+  let isMobile = window.innerWidth <= 768;
+  const color = {
+    notactive: "#221",
+    active: "#fff",
+  };
   return (
-    <nav className="nav-footer"
-    // style={{display: isMobile?"":"flex"   }}
+    <nav
+      className="nav-footer"
+      // style={{display: isMobile?"":"flex"   }}
     >
       <nav className="footer-item">
-
         <>
-
           <nav className="nav-footer-item" id="toggler">
             <Item text={`${nowPage} / ${101}`} />
           </nav>
@@ -78,57 +92,108 @@ const Footer = ({
             <ProgressBar value={nowPage} max={100} />
           </nav>
           {isMobile ? (
-
-
+            // --------- Mobile
             <>
-              <nav className="icon" >
-                <BookCloseIcon onClick={() => onBookOptionChange({
-                  ...bookOption,
-                  flow: "scrolled-doc",
-                })
-                }
+              <nav
+                onClick={mobilePageHandler}
+                className={`icon ${mode >= 1 ? "active" : ""} ms-3`}
+              >
+                <BookCloseIcon
+                  color={mode >= 1 ? color.active : color.notactive}
+                  onClick={() =>
+                    onBookOptionChange({
+                      ...bookOption,
+                      flow: "scrolled-doc",
+                    })
+                  }
                 />
               </nav>
-              <nav className="icon" >
-                <ScrollVerticalIcon onClick={() => onBookOptionChange({
-                  ...bookOption,
-                  flow: "paginated"
-                })
-                }
+              <nav
+                onClick={() => mobileScrollPageHandler()}
+                className={`icon ${mode == 0 ? "active" : ""}`}
+              >
+                <ScrollVerticalIcon
+                  color={mode == 0 ? color.active : color.notactive}
                 />
               </nav>
-
             </>
-
-
           ) : (
+            // --------- Desctop
             <>
-              <nav className="icon" >
-                <BookOpenIcon onClick={() => onBookOptionChange({
-                  ...bookOption,
-                  flow: "paginated"
-                })
-                }
+              <nav
+                onClick={desctopTwoPageHandler}
+                className={`icon ${mode === 2 ? "active" : ""} ms-3`}
+              >
+                <BookOpenIcon
+                  color={mode === 2 ? color.active : color.notactive}
                 />
               </nav>
-              <nav className="icon" >
-                <BookCloseIcon onClick={() => onBookOptionChange({
-                  ...bookOption,
-                  flow: "paginated"
-                })
-                }
+              <nav
+                onClick={desctopSinglePageHandler}
+                className={`icon ${mode === 1 ? "active" : ""}`}
+              >
+                <BookCloseIcon
+                  color={mode === 1 ? color.active : color.notactive}
                 />
               </nav>
-              <nav className="icon" >
-                <ScrollVerticalIcon onClick={() => onBookOptionChange({
-                  ...bookOption,
-                  flow: "paginated"
-                })
-                }
+              <nav
+                onClick={desctopScrollPageHandler}
+                className={`icon ${mode === 0 ? "active" : ""}`}
+              >
+                <ScrollVerticalIcon
+                  color={mode === 0 ? color.active : color.notactive}
                 />
               </nav>
+            </>
+          )}
+        </>
+      </nav>
+      <Button>خرید کتاب</Button>
+    </nav>
+  );
+};
+
+const Button = styled.button`
+  width: 100%;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 2rem;
+  color: #fff;
+  font-family: inherit;
+  background-color: rgb(0, 154, 168);
+`;
+
+interface Props {
+  onBookOptionChange: any;
+  onClickViewType: any;
+  onClickDirection: any;
+  title: string;
+  nowPage: number;
+  totalPage: number;
+  CountPage: number;
+  bookOption: any;
+  viewType: any;
+  color?: any;
+  onPageMove: (type: "PREV" | "NEXT") => void;
+}
+
+export default Footer;
+
+// const WrapperBtn = styled.div`
+//   position: fixed;
+//   left: 0;
+//   top: 60px;
+//   width: 100%;
+//   height: 100%;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+// `;
 
-              {/* <nav className="nav-icon">
+{
+  /* <nav className="nav-icon">
 
                 <div className="display-icon" style={{ cursor: "pointer" }}>
                   <nav
@@ -183,53 +248,35 @@ const Footer = ({
                 </div>
 
               </nav>
-           */}  </>
-
-          )}
-        </>
-      </nav>
-      {isMobile ? <Button>خرید کتاب</Button> : null}
-
-    </nav>
-  );
-};
-
-
-
-const Button = styled.button`
-  width: 100%;
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2px 2rem;
-  color: #fff;
-  font-family: inherit;
-  background-color: rgb(0, 154, 168);
-`;
-
-interface Props {
-  onBookOptionChange: any;
-  onClickViewType: any;
-  onClickDirection: any;
-  title: string;
-  nowPage: number;
-  totalPage: number;
-  CountPage: number;
-  bookOption: any;
-  viewType: any;
-  onPageMove: (type: "PREV" | "NEXT") => void;
+           */
 }
 
-export default Footer;
+// const [settingIcons, setSettingIcons] = useState({
+//   scroll: 0,
+//   onePage: 0,
+//   twoPage: 0,
+//   noscroll: 0,
+// });
 
-// const WrapperBtn = styled.div`
-//   position: fixed;
-//   left: 0;
-//   top: 60px;
-//   width: 100%;
-//   height: 100%;
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-// `;
+// const changeActiveHandler = () => {
+//   if (toggleIcon === 1) {
+//     setSettingIcons({
+//       ...settingIcons,
+//       noscroll: 1,
+//     });
+//   } else if (toggleIcon === 2) {
+//     setSettingIcons({
+//       ...settingIcons,
+//       scroll: 1,
+//     });
+//   }
+// };
+
+// const [active, setActive] = useState(1);
+// const [toggleIcon, setToggleIcon] = useState(false);
+// const onToggle = () => {
+//   if (active === 1 || 2) {
+//     setActive(3);
+//   }
+//   setToggleIcon(false);
+// };
diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx
index b0277b4..f13fca4 100644
--- a/src/containers/Header.tsx
+++ b/src/containers/Header.tsx
@@ -36,9 +36,6 @@ const Header = ({
                 onClick={onLearningToggle as any}
               />
             </nav>
-            <nav>
-                {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
-              </nav>
             <nav
               style={{
                 display: "flex",
@@ -47,10 +44,14 @@ const Header = ({
               }}
             >
               <Item text={title as any} />
-              <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
+              <span style={{ color: "#fff", marginRight: "10px" }}>
+                {title ? "|" : ""}
+              </span>
               {/* <BookInfo/> */}
               <div>
-                <p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
+                <p style={{ margin: "0", color: "#fff", width: "85px" }}>
+                  {nameBook}
+                </p>
               </div>
               <Logo />
               <Img
diff --git a/src/containers/Reader.tsx b/src/containers/Reader.tsx
index 230e90b..9dcdfba 100644
--- a/src/containers/Reader.tsx
+++ b/src/containers/Reader.tsx
@@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
     resizeOnOrientationChange: true,
     spread: "auto",
   });
-
+  const [pPage, setpPage] = useState(0);
   const [navControl, onNavToggle] = useMenu(navRef, 300);
   const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
   const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
@@ -105,6 +105,7 @@ const Reader = ({ url, loadingView }: Props) => {
    * @param loc epubCFI or href
    */
   const onLocationChange = (loc: string) => {
+    //console.log("onLocationChange", currentLocation);
     if (!viewerRef.current) return;
     viewerRef.current.setLocation(loc);
   };
@@ -116,7 +117,12 @@ const Reader = ({ url, loadingView }: Props) => {
   const onPageMove = (type: "NEXT" | "PREV") => {
     //loadFont();
     const node = viewerRef.current;
-    if (!node || !node.prevPage || !node.nextPage) return;
+    if (!node || !node.prevPage || !node.nextPage) {
+      // console.log("no page found");
+      return;
+    }
+    //console.log("onPageMove", type, currentLocation);
+    //setpPage(currentLocation.currentPage)
 
     type === "NEXT" && node.nextPage();
     type === "PREV" && node.prevPage();
@@ -148,7 +154,10 @@ const Reader = ({ url, loadingView }: Props) => {
    * Change current page
    * @param page Epub page
    */
-  const onPageChange = (page: Page) => dispatch(updateCurrentPage(page));
+  const onPageChange = (page: Page) => {
+    // console.log("onPageChange:", currentLocation, page.currentPage);
+    dispatch(updateCurrentPage(page));
+  };
 
   /**
    * ContextMenu on
diff --git a/src/containers/menu/Option.tsx b/src/containers/menu/Option.tsx
index 4d5ad6b..42308e1 100644
--- a/src/containers/menu/Option.tsx
+++ b/src/containers/menu/Option.tsx
@@ -11,9 +11,9 @@ import ControlIconBtn from "components/option/ControlIconBtn";
 import { BookStyle, BookFontFamily, BookFlow } from "types/book";
 import { MenuControl } from "lib/hooks/useMenu";
 import { BookOption } from "types/book";
-import * as styles from "lib/styles/styles";
+// import * as styles from "lib/styles/styles";
 // import palette from 'lib/styles/palette'
-import styled from "styled-components";
+// import styled from "styled-components";
 
 // import Setting from "components/Setting/setting";
 
@@ -253,50 +253,50 @@ interface Props {
   onBookOptionChange: (bookOption: BookOption) => void;
 }
 
-const Btn = styled.button`
-  position: relative;
-  height: 100%;
-  padding: 0 12px;
-  dispayl: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 0;
-  transition: 0.3s ${styles.transition};
-  outline: none;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: -1;
-    border-radius: 30px;
-    transition: 0.1s ${styles.transition};
-    background-color: rgb(0, 154, 168);
-  }
-`;
-const BtnWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  padding: 8px 0;
-`;
-const OptionTitle = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 16px;
-`;
+// const Btn = styled.button`
+//   position: relative;
+//   height: 100%;
+//   padding: 0 12px;
+//   dispayl: flex;
+//   align-items: center;
+//   justify-content: center;
+//   z-index: 0;
+//   transition: 0.3s ${styles.transition};
+//   outline: none;
+//   &::before {
+//     content: "";
+//     position: absolute;
+//     left: 0;
+//     right: 0;
+//     top: 0;
+//     bottom: 0;
+//     margin: auto;
+//     z-index: -1;
+//     border-radius: 30px;
+//     transition: 0.1s ${styles.transition};
+//     background-color: rgb(0, 154, 168);
+//   }
+// `;
+// const BtnWrapper = styled.div`
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-around;
+//   padding: 8px 0;
+// `;
+// const OptionTitle = styled.div`
+//   font-size: 14px;
+//   font-weight: 500;
+//   margin-bottom: 16px;
+// `;
 type SliderType =
   | "FontSize"
   | "LineHeight"
   | "MarginHorizontal"
   | "MarginVertical";
 
-type ViewType = {
-  active: boolean;
-  spread: boolean;
-};
+// type ViewType = {
+//   active: boolean;
+//   spread: boolean;
+// };
 
 export default React.forwardRef(Option);
diff --git a/src/lib/svg/BookClose.js b/src/lib/svg/BookClose.js
index 81a32f1..44b9e22 100644
--- a/src/lib/svg/BookClose.js
+++ b/src/lib/svg/BookClose.js
@@ -1,12 +1,12 @@
 import * as React from "react";
 
-function SvgBookClose(props) {
+function SvgBookClose(color,props) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
       <defs>
         <style>
           {
-            ".bookClose_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+            `.bookClose_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`
           }
         </style>
       </defs>
diff --git a/src/lib/svg/BookOpen.js b/src/lib/svg/BookOpen.js
index 11cd6f9..c8e89a4 100644
--- a/src/lib/svg/BookOpen.js
+++ b/src/lib/svg/BookOpen.js
@@ -1,12 +1,12 @@
 import * as React from "react";
 
-function SvgBookOpen(props) {
+function SvgBookOpen(color,props) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
       <defs>
         <style>
           {
-            ".bookOpen_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+            `.bookOpen_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`
           }
         </style>
       </defs>
diff --git a/src/lib/svg/ScrollVertical.js b/src/lib/svg/ScrollVertical.js
index 0107e97..2041cff 100644
--- a/src/lib/svg/ScrollVertical.js
+++ b/src/lib/svg/ScrollVertical.js
@@ -1,13 +1,11 @@
 import * as React from "react";
 
-function SvgScrollVertical(props) {
+function SvgScrollVertical(color, props) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
       <defs>
         <style>
-          {
-            ".scrollVertical_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
-          }
+          {`.scrollVertical_svg__cls-3{fill:none;stroke:${color.color};stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}`}
         </style>
       </defs>
       <g
diff --git a/src/slices/book.ts b/src/slices/book.ts
index ca63a89..d772461 100644
--- a/src/slices/book.ts
+++ b/src/slices/book.ts
@@ -1,12 +1,11 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 // types
-import Book from 'types/book'
-import Page from 'types/page'
-import Toc from 'types/toc'
-import Highlight, { Color } from 'types/highlight'
+import Book from "types/book";
+import Page from "types/page";
+import Toc from "types/toc";
+import Highlight, { Color } from "types/highlight";
 // lib
-import palette from 'lib/styles/palette'
-
+import palette from "lib/styles/palette";
 
 /* 
 	Initial State
@@ -14,110 +13,120 @@ import palette from 'lib/styles/palette'
 
 /** 초기 Book 상태 */
 const initialBook: Book = {
-	coverURL: '',
-	title: '',
-	description: '',
-	published_date: '',
-	modified_date: '',
-	author: '',
-	publisher: '',
-	language: ''
-}
+  coverURL: "",
+  title: "",
+  description: "",
+  published_date: "",
+  modified_date: "",
+  author: "",
+  publisher: "",
+  language: "",
+};
 
 /** 초기 CurrentPage 상태 */
 const initialCurrentLocation: Page = {
-	chapterName: "-",
-	currentPage: 0,
-	totalPage: 0,
-	startCfi: '',
-	endCfi: '',
-	base: ''
-}
+  chapterName: "-",
+  currentPage: 0,
+  totalPage: 0,
+  startCfi: "",
+  endCfi: "",
+  base: "",
+};
 
 /** 초기 색상표 상태 */
 const initialColorList: Color[] = [
-	{ name: 'قرمز', code: palette.red4 },
-	{ name: 'نارنجی', code: palette.orange4 },
-	{ name: 'زرد', code: palette.yellow4 },
-	{ name: 'سبز', code: palette.green4 },
-	{ name: 'آبی', code: palette.blue4 },
-	{ name: 'بنفش', code: palette.purple4 }
-]
+  { name: "قرمز", code: palette.red4 },
+  { name: "نارنجی", code: palette.orange4 },
+  { name: "زرد", code: palette.yellow4 },
+  { name: "سبز", code: palette.green4 },
+  { name: "آبی", code: palette.blue4 },
+  { name: "بنفش", code: palette.purple4 },
+];
 
 const initialState: BookState = {
-	book: initialBook,
-	currentLocation: initialCurrentLocation,
-	toc: [],
-	highlights: [],
-	colorList: initialColorList,
-}
-
+  book: initialBook,
+  currentLocation: initialCurrentLocation,
+  toc: [],
+  highlights: [],
+  colorList: initialColorList,
+};
 
 /* 
 	Slice
 */
 const bookSlice = createSlice({
-	name: 'book',
-	initialState,
-	reducers: {
-		/** Book 갱신 @dispatch */
-		updateBook(state, action: PayloadAction<Book>) {
-			state.book = action.payload;
-		},
-		/** CurrentPage 갱신 @dispatch */
-		updateCurrentPage(state, action: PayloadAction<Page>) {
-			state.currentLocation = action.payload;
-		},
-		/** Book 초기화 @dispatch */
-		clearBook(state) {
-			state.book = initialBook;
-		},
-		/** 목차 갱신 @dispatch */
-		updateToc(state, action: PayloadAction<Toc[]>) {
-			state.toc = action.payload;
-		},
-		/** 목차 초기화 @dispatch */
-		clearToc(state) {
-			state.toc = [];
-		},
-		/** 하이라이트 추가 */
-		pushHighlight(state, action: PayloadAction<Highlight>) {
-			const check = state.highlights.filter(h => h.key === action.payload.key);
-			if (check.length > 0) return;
-			state.highlights.push(action.payload);
-		},
-		/** 하이라이트 갱신 */
-		updateHighlight(state, action: PayloadAction<Highlight>) {
-			const new_idx = action.payload.key;
-			const old_idx = state.highlights.map(h => h.key).indexOf(new_idx);
-			state.highlights.splice(old_idx, 1, action.payload);
-		},
-		/** 하이라이트 삭제 */
-		popHighlight(state, action: PayloadAction<string>) {
-			const idx = state.highlights.map(h => h.key).indexOf(action.payload);
-			state.highlights.splice(idx, 1);
-		}
-	}
+  name: "book",
+  initialState,
+  reducers: {
+    /** Book 갱신 @dispatch */
+    updateBook(state, action: PayloadAction<Book>) {
+      state.book = action.payload;
+    },
+    /** CurrentPage 갱신 @dispatch */
+    updateCurrentPage(state, action: PayloadAction<Page>) {
+      if (
+        state.currentLocation.currentPage == action.payload.currentPage &&
+        action.payload.chapterName
+      ) {
+        console.log(JSON.parse(JSON.stringify(state)));
+        // let c = current(state)
+        // let x = [...c.toc];
+        // console.log(x[1]);
+        alert("فصل بعد");
+      }
+      state.currentLocation = action.payload;
+    },
+    /** Book 초기화 @dispatch */
+    clearBook(state) {
+      state.book = initialBook;
+    },
+    /** 목차 갱신 @dispatch */
+    updateToc(state, action: PayloadAction<Toc[]>) {
+      state.toc = action.payload;
+    },
+    /** 목차 초기화 @dispatch */
+    clearToc(state) {
+      state.toc = [];
+    },
+    /** 하이라이트 추가 */
+    pushHighlight(state, action: PayloadAction<Highlight>) {
+      const check = state.highlights.filter(
+        (h) => h.key === action.payload.key
+      );
+      if (check.length > 0) return;
+      state.highlights.push(action.payload);
+    },
+    /** 하이라이트 갱신 */
+    updateHighlight(state, action: PayloadAction<Highlight>) {
+      const new_idx = action.payload.key;
+      const old_idx = state.highlights.map((h) => h.key).indexOf(new_idx);
+      state.highlights.splice(old_idx, 1, action.payload);
+    },
+    /** 하이라이트 삭제 */
+    popHighlight(state, action: PayloadAction<string>) {
+      const idx = state.highlights.map((h) => h.key).indexOf(action.payload);
+      state.highlights.splice(idx, 1);
+    },
+  },
 });
 
-
 export interface BookState {
-	book: Book;
-	currentLocation: Page;
-	toc: Toc[];
-	highlights: Highlight[];
-	colorList: Color[];
+  book: Book;
+  currentLocation: Page;
+  toc: Toc[];
+  highlights: Highlight[];
+  colorList: Color[];
 }
 
-export const { 
-	updateBook,
-	clearBook,
-	updateCurrentPage,
-	updateToc,
-	clearToc,
-	pushHighlight,
-	updateHighlight,
-	popHighlight
- } = bookSlice.actions;
- 
-export default bookSlice.reducer
\ No newline at end of file
+export const {
+  updateBook,
+  clearBook,
+  updateCurrentPage,
+  updateToc,
+  clearToc,
+  pushHighlight,
+  updateHighlight,
+  popHighlight,
+} = bookSlice.actions;
+
+export default bookSlice.reducer;