diff --git a/package.json b/package.json index b341905..ed38a90 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ }, "dependencies": { "@material-ui/core": "^4.12.3", + "@material-ui/icons": "^4.11.2", "epubjs": "^0.3.88", "node-sass": "4.14.1", "react-epub-viewer": "^0.1.7", diff --git a/public/index.html b/public/index.html index a67f5bd..8a8c2b6 100644 --- a/public/index.html +++ b/public/index.html @@ -2,30 +2,11 @@ - React-Epub-Viewer Demo + Book reader - - - - diff --git a/src/components/footer/MoveBtn.tsx b/src/components/footer/MoveBtn.tsx index 3eabc9f..d6bccb6 100644 --- a/src/components/footer/MoveBtn.tsx +++ b/src/components/footer/MoveBtn.tsx @@ -1,46 +1,52 @@ -import styled from 'styled-components' +import styled from "styled-components"; // icons -import { PrevIcon, NextIcon } from 'lib/svg' +import { PrevIcon, NextIcon } from "lib/svg"; // lib -import * as styles from 'lib/styles/styles' +import * as styles from "lib/styles/styles"; const MoveBtn = ({ type, onClick }: Props) => { - const Icon = type === "PREV" - ? NextIcon - : PrevIcon; - - const msg = type === "PREV" - ? "이전 페이지" - : "다음 페이지"; + const Icon = type === "PREV" ? NextIcon : PrevIcon; + + const msg = type === "PREV" ? "이전 페이지" : "다음 페이지"; return ( - + {window.innerWidth > 768 ? : } ); -} +}; const Container = styled.button` - min-width: 60px; + min-width: 160px; height: 100%; display: flex; align-items: center; + padding-top: 5px; justify-content: center; cursor: pointer; outline: none; - &:focus, &:hover { - filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%); + &:focus, + &:hover { + filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) + brightness(113%) contrast(101%); } `; +const contentM = styled.div` + display: flex; + align-items: center; + justify-content: center; + transition: 0.1s ${styles.transition}; +`; + const Content = styled.div` display: flex; align-items: center; justify-content: center; - transition: .1s ${styles.transition}; + transition: 0.1s ${styles.transition}; & > svg { width: 18px; @@ -49,8 +55,8 @@ const Content = styled.div` `; interface Props { - type: "PREV" | "NEXT" + type: "PREV" | "NEXT"; onClick: () => void; } -export default MoveBtn; \ No newline at end of file +export default MoveBtn; diff --git a/src/components/footer/Wrapper.tsx b/src/components/footer/Wrapper.tsx index 90ea75d..9949c61 100644 --- a/src/components/footer/Wrapper.tsx +++ b/src/components/footer/Wrapper.tsx @@ -7,11 +7,13 @@ const Wrapper = styled.div` left: 0; bottom: 0; width: 100%; - height: 60px; + height: 37px; display: flex; align-items: center; justify-content: center; background-color: ${palette.white}; `; -export default Wrapper \ No newline at end of file +export default Wrapper + + diff --git a/src/components/nav/NavItem.tsx b/src/components/nav/NavItem.tsx index 632b7ac..faafeea 100644 --- a/src/components/nav/NavItem.tsx +++ b/src/components/nav/NavItem.tsx @@ -21,6 +21,7 @@ const Content = styled.button` cursor: pointer; background-color: ${palette.gray0}; outline: none; + direction: rtl; & > span { transition: .2s ${styles.transition}; diff --git a/src/components/sideMenu/Wrapper.tsx b/src/components/sideMenu/Wrapper.tsx index 9546660..ef66e12 100644 --- a/src/components/sideMenu/Wrapper.tsx +++ b/src/components/sideMenu/Wrapper.tsx @@ -1,11 +1,11 @@ -import React from 'react' -import styled from 'styled-components' +import React from "react"; +import styled from "styled-components"; // components -import CloseBtn from 'components/sideMenu/CloseBtn' +import CloseBtn from "components/sideMenu/CloseBtn"; // lib -import * as styles from 'lib/styles/styles' -import zIndex from 'lib/styles/zIndex' -import palette from 'lib/styles/palette' +import * as styles from "lib/styles/styles"; +import zIndex from "lib/styles/zIndex"; +import palette from "lib/styles/palette"; const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => { return ( @@ -16,10 +16,11 @@ const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => { {children} - ) -} + ); +}; const Container = styled.div` + direction: rtl; display: flex; flex-direction: column; position: fixed; @@ -29,15 +30,15 @@ const Container = styled.div` top: 0; right: 0; z-index: ${zIndex.menu}; - box-shadow: -4px 0 8px 0 rgba(0,0,0,.16); + box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.16); background-color: ${palette.white}; border-radius: 16px 0 0 16px; - transform: ${({ show }: { show: boolean }) => show - ? `translateX(0px) scale(1)` - : `translateX(420px) scale(.9)` - }; - transition: .4s ${styles.transition}; + transform: ${({ show }: { show: boolean }) => + show ? `translateX(0px) scale(1)` : `translateX(420px) scale(.9)`}; + transition: 0.4s ${styles.transition}; overflow-y: auto; + text-align: right; + direction: rtl; ${styles.scrollbar(0)}; `; @@ -48,6 +49,7 @@ const Header = styled.div` align-items: center; justify-content: space-between; padding-top: 4px; + direction: rtl; & > span { padding-left: 24px; @@ -63,4 +65,4 @@ interface Props { children?: React.ReactNode; } -export default React.forwardRef(Wrapper) \ No newline at end of file +export default React.forwardRef(Wrapper); diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index 0781c4b..3237de8 100644 --- a/src/containers/Footer.tsx +++ b/src/containers/Footer.tsx @@ -2,17 +2,30 @@ import Wrapper from "components/footer/Wrapper"; import Item from "components/footer/Item"; import MoveBtn from "components/footer/MoveBtn"; +import styled from "styled-components"; const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => { return ( - - onPageMove("NEXT")} /> - - onPageMove("PREV")} /> - + <> + + {/* */} + {window.innerWidth < 768 ? : null} + + ); }; +const Button = styled.button` + width: 100%; + justify-content: center; + display: flex; + height: 35px; + padding: 2px 2rem; + color: #fff; + font-family: inherit; + background-color: rgb(0, 154, 168); +`; + interface Props { title: string; nowPage: number; @@ -21,3 +34,14 @@ interface Props { } 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; +`; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index 14610c9..59fbd0a 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -28,7 +28,7 @@ const Header = ({ />