3 botton in footer finished

src/components/style/footerStyle.scss

@@ -0,0 +1,4 @@
+.icons-disable {
+  opacity: 0.3;
+  cursor: auto;
+}

src/containers/Footer.tsx

@@ -5,9 +5,15 @@ import Item from "components/footer/Item";
 // import MoveBtn from "components/footer/MoveBtn";
 import styled from "styled-components";
 import ProgressBar from "../components/footer/progressBar";
-import onePage from "../components/image/Document.svg";
+import {
-import twoPage from "../components/image/Pages.svg";
+  BookCloseIcon,
-import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg";
+  BookOpenIcon,
+  ScrollVerticalIcon,
+  ScrollHorizontalIcon,
+} from "lib/svg";
+
+// import style
+import "../components/style/footerStyle.scss";
 
 const Footer = ({
   // title,
@@ -15,12 +21,19 @@ const Footer = ({
   totalPage,
   // onPageMove,
   CountPage,
+  onClickDirection,
+  onClickViewType,
+  onBookOptionChange,
+  bookOption,
 }: Props) => {
   const [Icon, setIcon] = useState(false);
 
   const changeIcone = () => {
     setIcon(!Icon);
   };
+
+  const [toggleIcon, setToggleIcon] = useState(true);
+
   return (
     <>
       <Wrapper>
@@ -39,10 +52,44 @@ const Footer = ({
           <nav onClick={() => changeIcone()} className="nav-icon  ">
             {window.innerWidth > 768 ? (
               <div className="display-icon" style={{ cursor: "pointer" }}>
-                <nav style={{ width: "65px" , display: 'flex' }}>
+                <nav style={{ width: "65px", display: "flex" }}>
-                  <BookOpenIcon />
+                  <BookOpenIcon
-                  <BookCloseIcon />
+                    className={`${toggleIcon ? "icons-disable" : ""}`}
-                  <ScrollVerticalIcon />
+                    onClick={() => onClickViewType(true)}
+                  />
+                  <BookCloseIcon
+                    className={`${toggleIcon ? "icons-disable" : ""}`}
+                    onClick={() => onClickViewType(false)}
+                  />
+                  {toggleIcon === true ? (
+                    <nav
+                      style={{ width: "65px" }}
+                      onClick={() => setToggleIcon(false)}
+                    >
+                      <ScrollVerticalIcon
+                        onClick={() =>
+                          onBookOptionChange({
+                            ...bookOption,
+                            flow: "paginated",
+                          })
+                        }
+                      />
+                    </nav>
+                  ) : (
+                    <nav
+                      style={{ width: "65px" }}
+                      onClick={() => setToggleIcon(true)}
+                    >
+                      <ScrollHorizontalIcon
+                        onClick={() =>
+                          onBookOptionChange({
+                            ...bookOption,
+                            flow: "scrolled-doc",
+                          })
+                        }
+                      />
+                    </nav>
+                  )}
                 </nav>
               </div>
             ) : null}
@@ -79,10 +126,14 @@ const Button = styled.button`
 `;
 
 interface Props {
+  onBookOptionChange: any;
+  onClickViewType: any;
+  onClickDirection: any;
   title: string;
   nowPage: number;
   totalPage: number;
   CountPage: number;
+  bookOption: any;
   onPageMove: (type: "PREV" | "NEXT") => void;
 }
 

src/containers/Reader.tsx

@@ -93,7 +93,6 @@ const Reader = ({ url, loadingView }: Props) => {
     const node =
       iframe && iframe.contentWindow && iframe.contentWindow.document;
     //   node && node.head && node.head.appendChild(new_style_element);
-    console.log(node);
   };
   const onBookInfoChange = (book: Book) => {
     loadFont();
@@ -168,6 +167,41 @@ const Reader = ({ url, loadingView }: Props) => {
   //   setsettingicon(!settingicon);
   // };
 
+  const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
+  const onClickDirection = (type: "Horizontal" | "Vertical") => {
+    if (type === "Horizontal") {
+      onBookOptionChange({
+        ...bookOption,
+        flow: "paginated",
+      });
+    } else if (type === "Vertical") {
+      onBookOptionChange({
+        ...bookOption,
+        flow: "scrolled-doc",
+      });
+    }
+  };
+  console.log(isScrollHorizontal) 
+
+  const [viewType, setViewType] = useState({
+    spread: true,
+  });
+  const onClickViewType = (isSpread: boolean) => {
+    if (isSpread) {
+      setViewType({ ...viewType, spread: true });
+      onBookOptionChange({
+        ...bookOption,
+        spread: "auto",
+      });
+    } else {
+      setViewType({ ...viewType, spread: false });
+      onBookOptionChange({
+        ...bookOption,
+        spread: "none",
+      });
+    }
+  };
+
   const [CountPage, setCountPage] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -276,6 +310,10 @@ const Reader = ({ url, loadingView }: Props) => {
         </nav>
 
         <Footer
+          bookOption={bookOption}
+          onBookOptionChange={onBookOptionChange}
+          onClickViewType={onClickViewType}
+          onClickDirection={onClickDirection}
           CountPage={CountPage}
           title={currentLocation.chapterName}
           nowPage={currentLocation.currentPage}
@@ -342,6 +380,7 @@ interface Props {
   loadingView?: React.ReactNode;
   isOpen?: any;
   setIsOpen?: any;
+  setIsScrollHorizontal?: any;
 }
 
 export default ReaderWrapper;

src/containers/menu/Option.tsx

@@ -41,8 +41,8 @@ const Option = (
   const [marginVertical, setMarginVertical] = useState<number>(
     bookStyle.marginVertical
   );
-  const [isScrollHorizontal, setIsScrollHorizontal] = useState<boolean>(true);
+  const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
-  const [viewType, setViewType] = useState<ViewType>({
+  const [viewType, setViewType] = useState({
     active: true,
     spread: true,
   });