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 ( -