diff --git a/src/components/style/footerStyle.scss b/src/components/style/footerStyle.scss new file mode 100644 index 0000000..a2142ee --- /dev/null +++ b/src/components/style/footerStyle.scss @@ -0,0 +1,4 @@ +.icons-disable { + opacity: 0.3; + cursor: auto; +} diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index 0523ce4..6914e77 100644 --- a/src/containers/Footer.tsx +++ b/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 twoPage from "../components/image/Pages.svg"; -import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg"; +import { + BookCloseIcon, + 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 ( <> @@ -39,10 +52,44 @@ const Footer = ({