modules alpha version init

4 years ago · 0bfa6da53f
parent e22b6ad1be
commit 0bfa6da53f
120 changed files with 17377 additions and 1 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,40 @@
+{
+  "presets": [
+		"@babel/preset-env",
+		[
+			"@babel/preset-react",
+			{
+				"runtime": "automatic"
+			}
+		],
+		"@babel/preset-typescript"
+  ],
+  "plugins": [
+		[
+			"module-resolver",
+			{
+				"root": "./src",
+				"extensions": [
+					".ts",
+					".tsx"
+				]
+			}
+		],
+    "@babel/plugin-proposal-class-properties",
+		"@babel/plugin-proposal-object-rest-spread",
+		"@babel/plugin-proposal-optional-chaining",
+		"babel-plugin-styled-components"
+  ],
+	"ignore": [
+		"src/components",
+		"src/containers",
+		"src/lib/hooks",
+		"src/lib/styles",
+		"src/lib/svg",
+		"src/slices",
+		"src/types",
+		"src/index.tsx",
+		"src/react-app-env.d.ts",
+		"src/setupTests.ts"
+	]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,205 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,linux,node
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Storybook build outputs
+.out
+.storybook-out
+storybook-static
+
+# rollup.js default build output
+dist/
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Temporary folders
+tmp/
+temp/
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node
+
+# Custom ignore files or folders
+
+/lib
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,11 @@
+src/
+test/
+.gitignore
+.babelrc
+.babelrc.js
+tsconfig.json
+public
+build
+desktop.ini
+.DS_Store
+.github
--- a/README.md
+++ b/README.md
@ -1,2 +1,26 @@
 # react-epub-viewer
-Epub Viewer for React.js
+Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/)
+
+
+
+
+
+## EpubViewer
+
+If you put ref as an argument, the module will register the viewer as an `iframe` in the ref. Also, there are some functions written in the ref by default. 
+
+- [x] **`handleKeyPress`** Function
+- [x] **`onLocationChange`** Function
+- [x] **`selectionChanged`** Function
+
+
+
+## ReactViewer
+
+- [x] **`onTocChange`** Event
+- [x] **`onBookInfoChange`** Event
+- [x] **`onPageChange`** Event
+- [x] **`onSelection`** Event
+  - Fire with `mouseup` event
+- [x] Custom Loading Component
+
--- a/package.json
+++ b/package.json
@ -0,0 +1,92 @@
+{
+  "name": "@altmshfkgudtjr/react-epub-viewer",
+  "version": "0.0.1",
+  "author": "NB",
+  "description": "Epub viewer for React.js powered by Epub.js",
+  "license": "MIT",
+  "keywords": [
+    "epub",
+    "viewer",
+    "React"
+  ],
+  "main": "lib/modules/index.js",
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/altmshfkgudtjr/react-epub-viewer"
+  },
+  "bugs": {
+    "url": "https://github.com/altmshfkgudtjr/react-epub-viewer/issues"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "prebuild": "react-scripts test --watchAll=false --passWithNoTests",
+    "build": " react-scripts build",
+    "test": "react-scripts test",
+    "clean": "rimraf lib",
+    "precompile": "react-scripts test --watchAll=false --passWithNoTests && yarn clean",
+    "compile": "babel src --out-dir lib --extensions .ts,.tsx",
+    "postcompile": "cp -r ./src/types ./lib/types"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
+    "epubjs": "^0.3.88",
+    "react-redux": "^7.2.2",
+    "throttle-debounce": "^3.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.13.14",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.16",
+    "@types/styled-components": "^5.1.7",
+    "@types/throttle-debounce": "^2.1.0",
+    "babel-plugin-module-resolver": "4.0.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "install": "^0.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
+    "styled-components": "^5.2.3",
+    "typescript": "^4.2.3"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.1",
+    "react-redux": ">=7.2.0",
+    "@reduxjs/toolkit": ">=1.5.0",
+    "throttle-debounce": ">=3.0.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "types": "dist/types/index.d.ts"
+}
--- a/public/css/global.css
+++ b/public/css/global.css
@ -0,0 +1,37 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
+
+html, body {
+	scroll-behavior: auto;
+	-webkit-overflow-scrolling: touch;
+	font-size: 16px;
+	height: 100%;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+button {
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+a {
+	text-decoration: none;
+}
+
+* {
+	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: auto;
+	font-weight: 400;
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	font-size: 1rem;
+	color: #333;
+}
+
+#root {
+	height : 100%;
+}
--- a/public/favicons/favicon_24x24.png
+++ b/public/favicons/favicon_24x24.png
--- a/public/favicons/favicon_48x48.png
+++ b/public/favicons/favicon_48x48.png
--- a/public/favicons/favicon_96x96.png
+++ b/public/favicons/favicon_96x96.png
--- a/public/files/Alices
+++ b/public/files/Alices
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>React-Epub-Viewer Demo</title>
+		<meta
+			name="description"
+			content="React-Epub-Viewer Demo Page"
+		/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="icon" sizes="24x24" href="%PUBLIC_URL%/favicons/favicon_24x24.png" />
+		<link rel="icon" sizes="48x48" href="%PUBLIC_URL%/favicons/favicon_48x48.png" />
+		<link rel="icon" sizes="96x96" href="%PUBLIC_URL%/favicons/favicon_96x96.png" />
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/favicon_96x96.png" />
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/global.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "React-Epub-Viewer",
+  "name": "React-Epub-Viewer Demo",
+  "icons": [
+    {
+      "src": "favicons/favicon_96x96.png",
+      "sizes": "96x96 48x48 24x24",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/LoadingView.tsx
+++ b/src/LoadingView.tsx
@ -0,0 +1,44 @@
+import styled, { keyframes } from 'styled-components'
+
+const LoadingView = () => {
+  return (
+    <LoadingWrapper>
+      <Wrapper>
+        <Content />
+      </Wrapper>
+    </LoadingWrapper>
+  );
+}
+
+const spin = keyframes`
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+`;
+
+const LoadingWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Wrapper = styled.div`
+	position: relative;
+	width: 100%;
+	height: 30px;
+	margin: 30px 0;
+	text-align: center;
+`;
+
+const Content = styled.div`
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	border: 3px solid #ebf1ff;
+	border-radius: 50%;
+	border-top-color: #3972ff;
+	animation: ${spin} 1s ease-in-out infinite;
+`;
+
+export default LoadingView
--- a/src/components/commons/Snackbar.tsx
+++ b/src/components/commons/Snackbar.tsx
@ -0,0 +1,90 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import media from 'lib/styles/media'
+import palette from 'lib/styles/palette'
+import animations from 'lib/styles/animations'
+// types
+import SnackbarType from 'types/snackbar'
+
+const Snackbar = ({ onClick, text, type }: Props)=> {
+	return (
+	  <Container onClick={onClick} type={type}>
+	  	<Content>
+	  	  <Message>{text}</Message>
+	  	</Content>
+	  </Container>
+	);
+}
+
+const Container = styled.div<{ type: SnackbarType }>`
+	position: relative;
+	width: 320px;
+	height: auto;
+	max-height: 800px;
+	background-color: ${({ type }) => {
+			if (type === 'SUCCESS') {	
+				return palette.green4;
+			} else if (type === 'WARNING') {
+				return palette.orange4;
+			} else if (type === 'ERROR') {
+				return palette.red3;
+			} else if (type === 'INFO') {
+				return palette.blue4;
+			} else {
+				return palette.gray4;
+			}
+		}
+	};
+	box-shadow: ${styles.boxShadow.regular};
+	border-radius: 4px;
+	animation: ${animations.fadeInBottom} .3s cubic-bezier(0.25,0.1,0.25,1),
+						 ${animations.fadeOutBottom} .5s cubic-bezier(0.25,0.1,0.25,1) 3.6s;
+	cursor: pointer;
+	transition: .2s ${styles.transition};
+	${styles.noselect};
+
+	&:active {
+		transform: scale(.97, .97);
+	}
+
+	${media.small} {
+		border-radius: 0px;
+		width: 100%;
+		min-height: 1.8rem;
+	}
+`;
+
+const Content = styled.div`
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: auto;
+	min-height: 2rem;
+	box-sizing: border-box;
+	padding: 12px 20px;
+
+	${media.small} {
+		min-height: 1.6rem;
+		line-height: 1.6rem;
+	}
+`;
+
+const Message = styled.div`
+	position: relative;
+	flex-grow: 1;
+	color: white;
+	font-size: 14px;
+	white-space: pre-wrap;
+	word-break: keep-all;
+	vertical-align: top;
+`;
+
+
+interface Props {
+	onClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+	text: string;
+	type: SnackbarType;
+}
+
+export default Snackbar
--- a/src/components/commons/ViewerWrapper.tsx
+++ b/src/components/commons/ViewerWrapper.tsx
@ -0,0 +1,15 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+
+const ViewerWrapper = styled.div`
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  ${styles.scrollbar(0)};
+`;
+
+export default ViewerWrapper
--- a/src/components/contextMenu/ColorItem.tsx
+++ b/src/components/contextMenu/ColorItem.tsx
@ -0,0 +1,72 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const ColorItem = ({ name, color, onClick }: Props) => {
+  const onClickItem = (e: any) => {
+    onClick();
+    e.target.blur();
+  };
+
+  return (
+    <Wrapper onClick={onClickItem}>
+      <ColorWrapper>
+        <Color color={color} />
+      </ColorWrapper>
+      <Message>{name}</Message>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: rgba(0,0,0,0);
+  transition: .1s ${styles.transition};
+  outline: none;
+
+  &:hover, &:focus {
+    background-color: ${palette.blue3};
+
+    & > span {
+      color: #fff;
+    }
+  }
+`;
+
+const ColorWrapper = styled.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  background-color: #fff;
+  margin-right: 16px;
+`;
+
+const Color = styled.div<{ color: string }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  background-color: ${({ color }) => color};
+  opacity: .4;
+`;
+
+const Message = styled.span`
+  width: 48px;
+  font-size: 14px;
+  color: #ddd;
+  line-height: 20px;
+`;
+
+interface Props {
+  name: string;
+  color: string;
+  onClick: () => void;
+}
+
+export default ColorItem
--- a/src/components/contextMenu/Item.tsx
+++ b/src/components/contextMenu/Item.tsx
@ -0,0 +1,34 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const Item = ({ text, onClick }: Props) => {
+  return <Container onClick={onClick}>{text}</Container>;
+}
+
+const Container = styled.button`
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-size: 14px;
+  color: #ccc;
+  transition: .1s ${styles.transition};
+  background-color: rgba(0,0,0,0);
+  border-radius: 6px;
+  cursor: pointer;
+  outline: none;
+
+  &:focus, &:hover {
+    color: #fff;
+    background-color: ${palette.red3};
+  }
+`;
+
+interface Props {
+  text: string;
+  onClick: (e?: any) => void;
+}
+
+export default Item
--- a/src/components/contextMenu/Wrapper.tsx
+++ b/src/components/contextMenu/Wrapper.tsx
@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components'
+// lib
+import { contextmenuWidth } from 'lib/styles/viewerLayout'
+import * as styles from 'lib/styles/styles'
+import zIndex from 'lib/styles/zIndex'
+
+const Wrapper = styled.div<Props>`
+  position: absolute;
+  left: ${({ x }) => window.innerWidth < x + contextmenuWidth
+    ? `${window.innerWidth - contextmenuWidth}px`
+    : `${x}px`
+  };
+  top: ${({ y }) => window.innerHeight < y + 40
+    ? `${window.innerHeight - 40}px`
+    : `${y}px`
+  };
+  width: ${({ width }) => width + 'px'};
+  height: ${({ height }) => height + 'px'};
+  box-sizing: border-box;
+  padding: ${({ width }) => width > 0
+    ? `4px`
+    : ``
+  };
+  border-radius: 8px;
+  background-color: rgba(0,0,0,.8);
+  box-shadow: ${styles.boxShadow.regular};
+  z-index: ${zIndex.menu};
+
+  & > div:first-child {
+    height: 100%;
+    overflow-y: auto;
+    ${styles.scrollbar(0)};
+  }
+
+  &::before {
+    display: ${({ width }) => width > 0
+      ? `black`
+      : `none`
+    };
+    content: "";
+    position: absolute;
+    left: 80px;
+    ${({ isReverse }) => isReverse
+      ? css`bottom: -16px;`
+      : css`top: -16px;`
+    }
+    transform: translateX(-8px);
+    border: 8px solid rgba(0,0,0,0);
+    ${({ isReverse }) => isReverse
+      ? css`border-top: 8px solid rgba(0,0,0,.8);`
+      : css`border-bottom: 8px solid rgba(0,0,0,.8);`
+    }
+    z-index: 1;
+  }
+`;
+
+interface Props {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isReverse: boolean;
+}
+
+export default Wrapper
--- a/src/components/footer/Item.tsx
+++ b/src/components/footer/Item.tsx
@ -0,0 +1,28 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const Item = ({ text }: Props) => {
+  return (
+    <Container>
+      <span>{text}</span>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  height: 100%;
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & > span {
+    color: ${palette.gray4};
+  }
+`;
+
+interface Props {
+  text: string;
+}
+
+export default Item;
--- a/src/components/footer/MoveBtn.tsx
+++ b/src/components/footer/MoveBtn.tsx
@ -0,0 +1,56 @@
+import styled from 'styled-components'
+// icons
+import { PrevIcon, NextIcon } from 'lib/svg'
+// lib
+import * as styles from 'lib/styles/styles'
+
+const MoveBtn = ({ type, onClick }: Props) => {
+  const Icon = type === "PREV"
+    ? PrevIcon
+    : NextIcon;
+  
+  const msg = type === "PREV"
+    ? "이전 페이지"
+    : "다음 페이지";
+
+  return (
+    <Container onClick={onClick} title={msg}>
+      <Content>
+        <Icon />
+      </Content>
+    </Container>
+  );
+}
+
+const Container = styled.button`
+  min-width: 60px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+
+  &:focus, &:hover {
+    filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .1s ${styles.transition};
+
+  & > svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+interface Props {
+  type: "PREV" | "NEXT"
+  onClick: () => void;
+}
+
+export default MoveBtn;
--- a/src/components/footer/Wrapper.tsx
+++ b/src/components/footer/Wrapper.tsx
@ -0,0 +1,17 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const Wrapper = styled.div`
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${palette.white};
+`;
+
+export default Wrapper
--- a/src/components/header/ControlBtn.tsx
+++ b/src/components/header/ControlBtn.tsx
@ -0,0 +1,34 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const ControlBtn = ({ message, onClick }: Props) => {
+  return <Btn onClick={() => onClick()}>{message}</Btn>;
+}
+
+const Btn = styled.button`
+  height: 100%;
+  padding: 0 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .1s ${styles.transition};
+  outline: none;
+
+  &:focus, &:hover {
+    color: ${palette.blue3};
+  }
+
+  &:first-child {
+    margin-left: 8px;
+  }
+`;
+
+interface Props {
+  message: string;
+  onClick: (value?: boolean) => void;
+}
+
+export default ControlBtn
--- a/src/components/header/ControlIconBtn.tsx
+++ b/src/components/header/ControlIconBtn.tsx
@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components'
+// icons
+import { 
+  ScrollHorizontalIcon,
+  ScrollVerticalIcon,
+  BookCloseIcon,
+  BookOpenIcon
+} from 'lib/svg'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const ControlIconBtn = ({ type, alt, active, isSelected, onClick }: Props) => {
+  let HeaderIcon = null;
+  switch (type) {
+    case "ScrollVertical":
+      HeaderIcon = ScrollVerticalIcon;
+      break;
+    case "ScrollHorizontal":
+      HeaderIcon = ScrollHorizontalIcon;
+      break;
+    case "BookOpen":
+      HeaderIcon = BookOpenIcon;
+      break;
+    case "BookClose":
+      HeaderIcon = BookCloseIcon;
+      break;
+  }
+  
+  const onClickBtn = () => {
+    if (active) onClick();
+  }
+
+  return (
+    <Btn 
+      onClick={onClickBtn} 
+      isSelected={isSelected}
+      active={active}
+      title={alt}
+    >
+      <Icon>
+        <HeaderIcon />
+      </Icon>
+    </Btn>
+  );
+}
+
+const Btn = styled.button<{ isSelected: boolean, active: boolean }>`
+  position: relative;
+  height: 100%;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 0;
+  transition: .3s ${styles.transition};
+  opacity: ${({active}) => active
+    ? '1'
+    : '.3'
+  };
+  cursor: ${({active}) => active
+    ? 'pointer'
+    : 'default'
+  };
+  outline: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: -1;
+    border-radius: 30px;
+    width: ${({isSelected}) => isSelected
+      ? '32px'
+      : '8px'
+    };
+    height: ${({isSelected}) => isSelected
+      ? '32px'
+      : '8px'
+    };
+    opacity: ${({active, isSelected}) => active && isSelected
+      ? '.7'
+      : '0'
+    };
+    transition: .1s ${styles.transition};
+    background-color: ${palette.blue1};
+  }
+
+  &:focus, &:hover {
+    ${({active}) => active
+      ? css`
+        &:before {
+          width: 32px;
+          height: 32px;
+          opacity: 1;
+        }
+      `
+      : ""
+    };
+    
+  }
+`;
+
+const Icon = styled.div`
+  width: 16px;
+  height: 16px;
+
+  & > div, & > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+type HeaderIcon = 
+  "ScrollHorizontal" |
+  "ScrollVertical" |
+  "BookOpen" |
+  "BookClose";
+
+interface Props {
+  type: HeaderIcon;
+  alt: string;
+  active: boolean;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+export default ControlIconBtn
--- a/src/components/header/Layout.tsx
+++ b/src/components/header/Layout.tsx
@ -0,0 +1,34 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+import zIndex from 'lib/styles/zIndex'
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 54px;
+  background-color: ${palette.white};
+  z-index: ${zIndex.header};
+`;
+
+export const AutoLayout = styled.div`
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 2px solid ${palette.gray1};
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  & > div:last-child {
+    margin-right: 8px;
+  }
+`;
+
+export default Layout
--- a/src/components/header/VerticalLine.tsx
+++ b/src/components/header/VerticalLine.tsx
@ -0,0 +1,20 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const VerticalLine = ({ height=16 }: Props) => {
+  return <Bar height={height} />
+}
+
+const Bar = styled.div<{height: number}>`
+  width: 1px;
+  height: ${({height}) => height+'px'};
+  margin: 0 8px;
+  background-color: ${palette.gray2};
+`;
+
+interface Props {
+  height?: number
+}
+
+export default VerticalLine
--- a/src/components/header/Wrapper.tsx
+++ b/src/components/header/Wrapper.tsx
@ -0,0 +1,16 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+import zIndex from 'lib/styles/zIndex'
+
+const Wrapper = styled.div`
+  position: sticky;
+  width: 100%;
+  height: auto;
+  left: 0;
+  top: 0;
+  background-color: ${palette.white};
+  z-index: ${zIndex.header};
+`;
+
+export default Wrapper
--- a/src/components/learning/Layout.tsx
+++ b/src/components/learning/Layout.tsx
@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const Layout = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 24px 0;
+`;
+
+export default Layout
--- a/src/components/learning/SortedBtn.tsx
+++ b/src/components/learning/SortedBtn.tsx
@ -0,0 +1,34 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const SortedBtn = ({ text, isSelected, onClick }: Props) => {  
+  return <Btn isSelected={isSelected} onClick={onClick}>{text}</Btn>;
+}
+
+const Btn = styled.button<{isSelected: boolean}>`
+  height: 20px;
+  line-height: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  margin-left: 16px;
+  color: ${({isSelected}) => isSelected 
+    ? palette.blue3
+    : palette.gray4
+  };
+  transition: .2s ${styles.transition};
+  
+  &:hover {
+    color: ${palette.blue3};
+  }
+`;
+
+interface Props {
+  text: string;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+export default SortedBtn
--- a/src/components/learning/SortedBtnWrapper.tsx
+++ b/src/components/learning/SortedBtnWrapper.tsx
@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const SortedBtnWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 24px 24px 24px;
+`;
+
+export default SortedBtnWrapper
--- a/src/components/learning/highlight/PageNum.tsx
+++ b/src/components/learning/highlight/PageNum.tsx
@ -0,0 +1,21 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const PageNum = ({ num }: Props) => {
+  return <Content>{num}p</Content>
+}
+
+const Content = styled.span`
+  min-width: 32px;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${palette.gray4};
+`;
+
+interface Props {
+  num: number;
+}
+
+export default PageNum
--- a/src/components/learning/highlight/Post.tsx
+++ b/src/components/learning/highlight/Post.tsx
@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+const Post = styled.div<{ color: string }>`
+  position: relative;
+  font-size: 14px;
+  margin-top: 16px;
+  padding: 8px;
+  box-sizing: border-box;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: ${({ color }) => color};
+    opacity: .3;
+    border-radius: 8px;
+    mix-blend-mode: multiply;
+  }
+`;
+
+export default Post
--- a/src/components/learning/highlight/Title.tsx
+++ b/src/components/learning/highlight/Title.tsx
@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+const Title = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: inherit;
+`;
+
+export default Title
--- a/src/components/learning/highlight/Wrapper.tsx
+++ b/src/components/learning/highlight/Wrapper.tsx
@ -0,0 +1,32 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+import * as styles from 'lib/styles/styles'
+
+const Wrapper = styled.button`
+  padding: 16px 24px;
+  box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: ${palette.gray0};
+  transition: .1s ${styles.transition};
+  cursor: pointer;
+  outline: none;
+  text-align: left;
+  
+  &:last-child {
+    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
+  }
+
+  & > div {
+    color: inherit;
+    flex-grow: 1;
+  }
+
+  &:hover > *, &:focus > * {
+    color: ${palette.blue3};
+  }
+`;
+
+export default Wrapper
--- a/src/components/nav/BookInfo.tsx
+++ b/src/components/nav/BookInfo.tsx
@ -0,0 +1,50 @@
+import styled from 'styled-components'
+
+const BookInfo = ({src="", title ,publisher, author}: Props) => {
+  return (
+    <Container>
+      <BookImg src={src} alt={title} />
+      <BookContent>
+        <Title>{title}</Title>
+        <Info>{publisher}</Info>
+        <Info>{author}</Info>
+      </BookContent>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  padding: 24px;
+`;
+
+const BookImg = styled.img`
+  margin-right: 12px;
+  width: 44%;
+  min-width: 120px;
+  border-radius: 4px;
+  background: #eee;
+`;
+
+const BookContent = styled.div`
+  flex-grow: 1;
+`;
+
+const Title = styled.div`
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+
+const Info = styled.div`
+  font-size: 14px;
+  margin-bottom: 4px;
+`;
+
+interface Props {
+  src: string;
+  title: string;
+  publisher: string;
+  author: string;
+}
+
+export default BookInfo
--- a/src/components/nav/NavItem.tsx
+++ b/src/components/nav/NavItem.tsx
@ -0,0 +1,42 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const NavItem = ({ message, onClick }: Props) => {
+  return (
+    <Content onClick={onClick}>
+      <span>{message}</span>
+    </Content>
+  );
+}
+
+const Content = styled.button`
+  width: 100%;
+  height: 48px;
+  box-sizing: border-box;
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: ${palette.gray0};
+  
+  & > span {
+    transition: .2s ${styles.transition};
+    font-size: 14px;
+  }
+
+  &:hover {
+    & > span {
+      color: ${palette.blue3};
+      margin-left: 12px;
+    }
+  }
+`;
+
+interface Props {
+  message: string;
+  onClick: () => void;
+}
+
+export default NavItem
--- a/src/components/option/Dropdown.tsx
+++ b/src/components/option/Dropdown.tsx
@ -0,0 +1,79 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import styled from 'styled-components'
+// components
+import OptionWrapper from 'components/option/OptionWrapper'
+import OptionTitle from 'components/option/OptionTitle'
+import DropdownValue from 'components/option/DropdownValue'
+import DropdownItemWrapper from 'components/option/DropdownItemWrapper'
+import DropdownItem from 'components/option/DropdownItem'
+// types
+import { BookFontFamily } from 'types/book'
+
+const Dropdown = ({
+  title,
+  defaultValue,
+  valueList,
+  onSelect
+}: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState<boolean>(false);
+  const value = defaultValue === "Origin" ? "Original" : defaultValue;
+  
+  /** Toggle dropdown */
+  const onToggle = useCallback(() => setVisible(!visible), [visible]);
+
+  /** Close dropdown */
+  const onClose = useCallback((e: any) => {
+    if (!ref || !ref.current) return;
+    if (![...e.path].includes(ref.current)) {
+      onToggle();
+    }
+  }, [ref, onToggle]);
+
+  const Items = valueList.map(font => 
+    <DropdownItem key={font} value={font} onClick={() => {
+      onSelect(font);
+      onToggle();
+    }} />
+  );
+
+  /** Register dropdown close event */
+  useEffect(() => {
+    if (visible) {
+      document.addEventListener('click', onClose);
+    } else {
+      document.removeEventListener('click', onClose);
+    }
+    return () => {
+      document.removeEventListener('click', onClose);
+    }
+  }, [visible, onClose]);
+
+  return (
+    <OptionWrapper>
+      <OptionTitle>{title}</OptionTitle>
+
+      <DropdownWrapper ref={ref}>
+        <DropdownValue value={value} 
+                       isDropdown={visible} 
+                       onClick={onToggle} />
+        <DropdownItemWrapper show={visible}>
+          {Items}
+        </DropdownItemWrapper>
+      </DropdownWrapper>
+    </OptionWrapper>
+  );
+}
+
+const DropdownWrapper = styled.div`
+  position: relative;
+`;
+
+interface Props {
+  title: string;
+  defaultValue: BookFontFamily;
+  valueList: BookFontFamily[];
+  onSelect: (font: BookFontFamily) => void;
+}
+
+export default Dropdown
--- a/src/components/option/DropdownItem.tsx
+++ b/src/components/option/DropdownItem.tsx
@ -0,0 +1,33 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+
+const DropdownItem = ({ value, onClick }: Props) => {
+const text = value === "Origin" ? "Original" : value;
+
+  return <Container onClick={onClick}>{text}</Container>;
+}
+
+const Container = styled.button`
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+  padding: 0 16px;
+  transition: .1s ${styles.transition};
+  font-size: 14px;
+  line-height: 40px;
+  cursor: pointer;
+  text-align: left;
+  outline: none;
+  
+  &:focus, &:hover {
+    background-color: rgba(0,0,0,.05);
+  }
+`;
+
+interface Props {
+  value: string;
+  onClick: () => void;
+}
+
+export default DropdownItem
--- a/src/components/option/DropdownItemWrapper.tsx
+++ b/src/components/option/DropdownItemWrapper.tsx
@ -0,0 +1,44 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const DropdownItemWrapper = ({ show, children }: Props) => {
+  return <Container show={show}>{children}</Container>
+}
+
+const Container = styled.div<{show: boolean}>`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 0 0 16px 0;
+  background-color: ${palette.white};
+  border: 2px solid ${palette.blue3};
+  z-index: 3;
+  border-radius: ${({show}) => show
+    ? '0 0 20px 20px'
+    : '20px'
+  };
+  transition: .4s ${styles.transition};
+  opacity: ${({show}) => show
+    ? '1'
+    : '0'
+  };
+  transform-origin: top;
+  transform: ${({show}) => show
+    ? 'translateY(-2px) scaleY(1);'
+    : 'translateY(-40px) scaleY(0);'
+  };
+  ${styles.scrollbar(6)}
+`;
+
+interface Props {
+  show: boolean;
+  children: React.ReactElement[];
+}
+
+export default DropdownItemWrapper
--- a/src/components/option/DropdownValue.tsx
+++ b/src/components/option/DropdownValue.tsx
@ -0,0 +1,83 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+// icons
+import { DownIcon } from 'lib/svg'
+
+const DropdownValue = ({ value, isDropdown, onClick }: Props) => {
+  return (
+    <Container 
+      onClick={onClick}
+      isDropdown={isDropdown}
+      title="Select font"
+    >
+      <Content>{value}</Content>
+      <Icon isDropdown={isDropdown}>
+        <DownIcon />
+      </Icon>
+    </Container>
+  );
+}
+
+const Container = styled.button<{isDropdown: boolean}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background-color: ${palette.white};
+  border: ${({isDropdown}) => isDropdown
+    ? `2px solid ${palette.blue3}`
+    : `2px solid ${palette.gray2}`
+  };
+  border-radius: ${({isDropdown}) => isDropdown
+    ? "20px 20px 0 0"
+    : "20px"
+  };
+  box-sizing: border-box;
+  padding: 0px 16px;
+  cursor: pointer;
+  z-index: 4;
+  transition: .1s ${styles.transition};
+  text-align: left;
+  outline: none;
+
+  &:hover, &:focus {
+    border: 2px solid ${palette.blue3};
+
+    & > div {
+      opacity: .8;
+    }
+  }
+`;
+
+const Content = styled.span`
+  flex-grow: 1;
+  margin-right: 16px;
+  font-size: 14px;
+`;
+
+const Icon = styled.div<{isDropdown: boolean}>`
+  display: flex;
+  width: 12px;
+  height: 12px;
+  opacity: .3;
+  
+  & > svg {
+    transform-origin: center;
+    transform: ${({isDropdown}) => isDropdown
+      ? 'rotate(180deg)'
+      : 'rotate(0deg)'
+    };
+  }
+`;
+
+interface Props {
+  value: string;
+  isDropdown: boolean;
+  onClick: (e: any) => void;
+}
+
+export default DropdownValue
--- a/src/components/option/Layout.tsx
+++ b/src/components/option/Layout.tsx
@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  box-sizing: border-box;
+  padding: 24px;
+`;
+
+export default Wrapper
--- a/src/components/option/OptionTitle.tsx
+++ b/src/components/option/OptionTitle.tsx
@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+const OptionTitle = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 16px;
+`;
+
+export default OptionTitle
--- a/src/components/option/OptionValue.tsx
+++ b/src/components/option/OptionValue.tsx
@ -0,0 +1,18 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const OptionValue = styled.span<{ active: boolean }>`
+  display: inline-block;
+  font-size: 14px;
+  color: ${props => props.active
+    ? palette.blue3
+    : palette.gray4
+  };
+  margin-right: 8px;
+  width: 40px;
+  text-align: right;
+  line-height: 20px;
+`;
+
+export default OptionValue
--- a/src/components/option/OptionWrapper.tsx
+++ b/src/components/option/OptionWrapper.tsx
@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+const OptionWrapper = styled.div`
+  margin-bottom: 24px;
+`;
+
+export default OptionWrapper
--- a/src/components/option/Slider.tsx
+++ b/src/components/option/Slider.tsx
@ -0,0 +1,56 @@
+import styled from 'styled-components'
+// components
+import OptionWrapper from 'components/option/OptionWrapper'
+import OptionTitle from 'components/option/OptionTitle'
+import OptionValue from 'components/option/OptionValue'
+import SliderValue from 'components/option/SliderValue'
+
+const Slider = ({
+  active,
+  title,
+  minValue,
+  maxValue,
+  defaultValue,
+  step,
+  onChange
+}: Props) => {
+  const onChangeValue = (e: any) => {
+    if (!active) return;
+    onChange(e);
+  }
+  
+  
+  return (
+    <OptionWrapper>
+      <OptionTitle>{title}</OptionTitle>
+      
+      <SliderWrapper>
+        <OptionValue active={active}>{defaultValue}</OptionValue>
+        <SliderValue active={active}
+                     minValue={minValue}
+                     maxValue={maxValue}
+                     defaultValue={defaultValue}
+                     step={step}
+                     onChange={onChangeValue} />
+      </SliderWrapper>
+    </OptionWrapper>
+  );
+}
+
+const SliderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 20px;
+`;
+
+interface Props {
+  active: boolean;
+  title: string;
+  minValue: number;
+  maxValue: number;
+  defaultValue: number;
+  step: number;
+  onChange: (e: any) => void;
+}
+
+export default Slider
--- a/src/components/option/SliderValue.tsx
+++ b/src/components/option/SliderValue.tsx
@ -0,0 +1,130 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+import * as styles from 'lib/styles/styles'
+
+const SliderValue = ({ 
+  active, 
+  minValue, 
+  maxValue, 
+  defaultValue, 
+  step, 
+  onChange 
+}: Props) => {
+  const percentage = Math.round((defaultValue - minValue) / (maxValue - minValue) * 100);
+
+  return (<>
+    <Icon>-</Icon>
+    <SliderWrapper>
+      <SliderBackground />
+      <SliderBar 
+        active={active}
+        percentage={percentage}
+      />
+      <Slider
+        type="range" 
+        min={minValue}
+        max={maxValue}
+        defaultValue={defaultValue}
+        step={step}
+        onChange={onChange}
+        active={active}
+        disabled={!active} />
+    </SliderWrapper>
+    <Icon>+</Icon>
+  </>);
+}
+
+const SliderWrapper = styled.div`
+  flex-grow: 1;
+  display: flex;
+  position: relative;
+  width: auto;
+`;
+
+const SliderBackground = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 6px;
+  background-color: #eee;
+  border-radius: 6px;
+  z-index: 0;
+`;
+
+const SliderBar = styled.div<{ percentage: number, active: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: ${({ percentage }) => percentage + '%'};
+  height: 6px;
+  border-radius: 6px 0 0 6px;
+  background-color: ${props => props.active
+    ? palette.blue4
+    : palette.gray2
+  };
+	z-index: 1;
+`;
+
+const Slider = styled.input<{ active: boolean }>`
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background-color: transparent;
+  border-radius: 6px;
+  margin: 0;
+  z-index: 2;
+  
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 18px;
+    box-shadow: ${styles.boxShadow.regular};
+    background-color: white;
+    transition: .2s ${styles.transition};
+    transition-property: box-shadow, background-color;
+    border: ${props => props.active
+      ? `2px solid ${palette.blue3}`
+      : `2px solid ${palette.gray4}`
+    };
+    cursor: ${props => props.active
+        ? 'pointer'
+        : ''
+      };;
+
+    &:hover {
+      background-color: ${props => props.active
+        ? palette.blue1
+        : ''
+      };
+    }
+
+    &:active {
+      box-shadow: none;
+      background-color: ${props => props.active
+        ? palette.blue0
+        : ''
+      };
+    }
+  }
+`;
+
+const Icon = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+  color: ${palette.gray4};
+  margin: 0 8px;
+  line-height: 20px;
+`;
+
+interface Props {
+  active: boolean;
+  minValue: number;
+  maxValue: number;
+  defaultValue: number;
+  step: number;
+  onChange: (e: any) => void;
+}
+
+export default SliderValue
--- a/src/components/sideMenu/CloseBtn.tsx
+++ b/src/components/sideMenu/CloseBtn.tsx
@ -0,0 +1,39 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+// icons
+import { CloseIcon } from 'lib/svg'
+
+const CloseBtn = ({ onClick }: Props) => {
+  return (
+    <Btn onClick={onClick}>
+      <Icon />
+    </Btn>
+  );
+}
+
+const Btn = styled.button`
+  position: relative;
+  height: 100%;
+  padding: 0 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .1s ${styles.transition};
+
+  &:hover {
+    filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
+  }
+`;
+
+const Icon = styled(CloseIcon)`
+  width: 18px;
+  height: 18px;
+`;
+
+interface Props {
+  onClick: () => void;
+}
+
+export default CloseBtn;
--- a/src/components/sideMenu/MenuEmpty.tsx
+++ b/src/components/sideMenu/MenuEmpty.tsx
@ -0,0 +1,23 @@
+import styled from 'styled-components'
+// lib
+import palette from 'lib/styles/palette'
+
+const MenuEmpty = ({ text }: Props) => {
+  return <Content>{text}</Content>;
+}
+
+const Content = styled.div`
+  flex-grow: 1;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${palette.blue2};
+  font-size: 14px;
+`;
+
+interface Props {
+  text: string;
+}
+
+export default MenuEmpty
--- a/src/components/sideMenu/Wrapper.tsx
+++ b/src/components/sideMenu/Wrapper.tsx
@ -0,0 +1,65 @@
+import React from 'react'
+import styled from 'styled-components'
+// components
+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'
+
+const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => {
+  return (
+    <Container show={show} ref={ref}>
+      <Header>
+        <span>{title}</span>
+        <CloseBtn onClick={onClose} />
+      </Header>
+      {children}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  width: 340px;
+  height: 100vh;
+  top: 0;
+  right: 0;
+  z-index: ${zIndex.menu};
+  box-shadow: -4px 0 8px 0 rgba(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(.8)`
+  };
+  transition: .3s ${styles.transition};
+  overflow-y: auto;
+  ${styles.scrollbar()};
+`;
+
+const Header = styled.div`
+  width: 100%;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 30px;
+
+  & > span {
+    padding-left: 24px;
+    font-size: 21px;
+    font-weight: 600;
+  }
+`;
+
+interface Props {
+  title: string;
+  show: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+}
+
+export default React.forwardRef(Wrapper)
--- a/src/containers/Footer.tsx
+++ b/src/containers/Footer.tsx
@ -0,0 +1,25 @@
+// components
+import Wrapper from 'components/footer/Wrapper'
+import Item from 'components/footer/Item'
+import MoveBtn from 'components/footer/MoveBtn'
+
+
+const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => {
+  return (
+    <Wrapper>
+      <MoveBtn type="PREV" onClick={() => onPageMove("PREV")} />
+      <Item text={title} />
+      <Item text={`${nowPage} / ${totalPage}`} />
+      <MoveBtn type="NEXT" onClick={() => onPageMove("NEXT")} />
+    </Wrapper>
+  );
+}
+
+interface Props {
+  title: string;
+  nowPage: number;
+  totalPage: number;
+  onPageMove: (type: "PREV" | "NEXT") => void;
+}
+
+export default Footer
--- a/src/containers/Header.tsx
+++ b/src/containers/Header.tsx
@ -0,0 +1,125 @@
+import { useState } from 'react'
+// components
+import Wrapper from 'components/header/Wrapper'
+import Layout, { AutoLayout } from 'components/header/Layout'
+import ControlBtn from 'components/header/ControlBtn'
+import ControlIconBtn from 'components/header/ControlIconBtn'
+import VerticalLine from 'components/header/VerticalLine'
+// types
+import { BookOption } from 'types/book'
+
+
+const Header = ({ 
+  title, 
+  bookOption, 
+  onNavToggle, 
+  onOptionToggle, 
+  onLearningToggle,
+  onBookOptionChange
+}: Props) => {
+  const [isScrollHorizontal, setIsScrollHorizontal] = useState<boolean>(true);
+  const [viewType, setViewType] = useState<ViewType>({
+    active: true,
+    spread: true
+  });
+
+
+  /** 
+   * Select view direction
+   * @param type Direction
+   */
+  const onClickDirection = (type: "Horizontal" | "Vertical") => {
+    if (type === "Horizontal") {
+      setIsScrollHorizontal(true);
+      setViewType({ ...viewType, active: true });
+      onBookOptionChange({
+        ...bookOption,
+        flow: "paginated"
+      });
+    } else {
+      setIsScrollHorizontal(false);
+      setViewType({ ...viewType, active: false });
+      onBookOptionChange({
+        ...bookOption,
+        flow: "scrolled-doc"
+      });
+    }
+  }
+
+  /**
+   * Select isSpread
+   * @param isSpread Whether spread view 
+   */
+  const onClickViewType = (isSpread: boolean) => {
+    if (isSpread) {
+      setViewType({ ...viewType, spread: true });
+      onBookOptionChange({
+        ...bookOption,
+        spread: "auto"
+      });
+    } else {
+      setViewType({ ...viewType, spread: false });
+      onBookOptionChange({
+        ...bookOption,
+        spread: "none"
+      });
+    }
+  }
+
+
+  return (
+    <Wrapper>
+      <Layout>
+        <AutoLayout>
+          <div>
+            <ControlBtn message="Contents" onClick={onNavToggle} />
+            <ControlBtn message="Setting" onClick={onOptionToggle} />
+            <ControlBtn message="Highlights" onClick={onLearningToggle} />
+          </div>
+
+          <div>
+            <ControlIconBtn type="ScrollHorizontal"
+                            alt="Horizontal View"
+                            active={true}
+                            isSelected={isScrollHorizontal}
+                            onClick={() => onClickDirection("Horizontal")} />
+            <ControlIconBtn type="ScrollVertical" 
+                            alt="Vertical View"
+                            active={true}
+                            isSelected={!isScrollHorizontal}
+                            onClick={() => onClickDirection("Vertical")} />
+
+            <VerticalLine />
+
+            <ControlIconBtn type="BookOpen" 
+                            alt="Two Page View"
+                            active={viewType.active}
+                            isSelected={viewType.spread}
+                            onClick={() => onClickViewType(true)} />
+            <ControlIconBtn type="BookClose" 
+                            alt="One Page View"
+                            active={viewType.active}
+                            isSelected={!viewType.spread}
+                            onClick={() => onClickViewType(false)} />
+          </div>
+        </AutoLayout>
+      </Layout>
+    </Wrapper>
+  );
+}
+
+interface Props {
+  title: string;
+  bookOption: BookOption;
+  onNavToggle: (value?: boolean) => void;
+  onOptionToggle: (value?: boolean) => void;
+  onLearningToggle: (value?: boolean) => void;
+  onBookOptionChange: (bookOption: BookOption) => void;
+}
+
+type ViewType = {
+  active: boolean,
+  spread: boolean
+}
+
+export default Header
--- a/src/containers/Reader.tsx
+++ b/src/containers/Reader.tsx
@ -0,0 +1,218 @@
+import { useState, useRef } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { Provider } from 'react-redux'
+// containers
+import Viewer from 'modules/reactViewer/ReactViewer'
+import Header from 'containers/Header'
+import Footer from 'containers/Footer'
+import Nav from 'containers/menu/Nav'
+import Option from 'containers/menu/Option'
+import Learning from 'containers/menu/Note'
+import ContextMenu from 'containers/commons/ContextMenu'
+import Snackbar from 'containers/commons/Snackbar'
+// components
+import ViewerWrapper from 'components/commons/ViewerWrapper'
+import LoadingView from 'LoadingView'
+// slices
+import store from 'slices'
+import { updateBook, updateCurrentPage, updateToc } from 'slices/book'
+// hooks
+import useMenu from 'lib/hooks/useMenu'
+import useHighlight from 'lib/hooks/useHighlight'
+// styles
+import 'lib/styles/readerStyle.css'
+import viewerLayout from 'lib/styles/viewerLayout'
+// types
+import { RootState } from 'slices'
+import Book, { BookStyle, BookOption } from 'types/book'
+import Page from 'types/page'
+import Toc from 'types/toc'
+
+
+const Reader = ({ url, loadingView }: Props) => {
+  const dispatch = useDispatch();
+  const book = useSelector<RootState, Book>(state => state.book.book);	
+	const currentLocation = useSelector<RootState, Page>(state => state.book.currentLocation);
+  
+	const viewerRef = useRef<any>(null);
+  const navRef = useRef<HTMLDivElement | null>(null);
+  const optionRef = useRef<HTMLDivElement | null>(null);
+  const learningRef = useRef<HTMLDivElement | null>(null);
+
+	const [isContextMenu, setIsContextMenu] = useState<boolean>(false);
+	
+	const [bookStyle, setBookStyle] = useState<BookStyle>({
+    fontFamily: 'Origin',
+    fontSize: 18,
+    lineHeight: 1.4,
+    marginHorizontal: 15,
+    marginVertical: 5
+  });
+
+  const [bookOption, setBookOption] = useState<BookOption>({
+    flow: "paginated",
+    resizeOnOrientationChange: true,
+    spread: "auto"
+  });
+
+	const [navControl, onNavToggle] = useMenu(navRef, 300.);
+	const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
+	const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
+	const { 
+		selection, 
+		onSelection, 
+		onClickHighlight,
+		onAddHighlight,
+		onRemoveHighlight,
+		onUpdateHighlight
+	} = useHighlight(viewerRef, setIsContextMenu, bookStyle, bookOption.flow);
+
+	/**
+	 * Change Epub book information
+	 * @param book Epub Book Info
+	 */
+	const onBookInfoChange = (book: Book) => dispatch(updateBook(book));
+
+  /**
+	 * Change Epub location
+	 * @param loc epubCFI or href
+	 */
+	const onLocationChange = (loc: string) => {
+		if (!viewerRef.current) return;
+		viewerRef.current.setLocation(loc);
+	}	
+	
+	/**
+	 * Move page
+	 * @param type Direction
+	 */
+	const onPageMove = (type: "PREV" | "NEXT") => {
+		const node = viewerRef.current;
+		if (!node || !node.prevPage || !node.nextPage) return;
+
+		type === "PREV" && node.prevPage();
+		type === "NEXT" && node.nextPage();
+	};
+
+	/**
+	 * Set toc
+	 * @param toc Table of Epub contents
+	 */
+	const onTocChange = (toc: Toc[]) => dispatch(updateToc(toc));
+
+	/** 
+	 * Set Epub viewer styles
+	 * @param bokkStyle_ viewer style
+	 */
+	const onBookStyleChange = (bookStyle_: BookStyle) => setBookStyle(bookStyle_);
+
+	/** 
+	 * Set Epub viewer options
+	 * @param bookOption_ viewer option
+	 */
+	 const onBookOptionChange = (bookOption_: BookOption) => setBookOption(bookOption_);
+
+	/**
+	 * Change current page
+	 * @param page Epub page
+	 */
+	const onPageChange = (page: Page) => dispatch(updateCurrentPage(page));
+
+	/** 
+	 * ContextMenu on 
+	 * @param cfiRange CfiRange
+	 */
+	const onContextMenu = (cfiRange: string) => {
+		const result = onSelection(cfiRange);
+		setIsContextMenu(result);
+	}
+
+	/** ContextMenu off */
+	const onContextmMenuRemove = () => setIsContextMenu(false);
+
+  return (<>
+    <ViewerWrapper>
+      <Header 
+				title={book.title}
+				bookOption={bookOption}
+				onNavToggle={onNavToggle}
+				onOptionToggle={onOptionToggle}
+				onLearningToggle={onLearningToggle}
+				onBookOptionChange={onBookOptionChange}
+			/>
+
+      <Viewer 
+				url={url}
+				viewerLayout={viewerLayout}
+				viewerStyle={bookStyle}
+				viewerOption={bookOption}
+				onBookInfoChange={onBookInfoChange}
+				onPageChange={onPageChange}
+				onTocChange={onTocChange}
+				onSelection={onContextMenu}
+				loadingView={loadingView || <LoadingView />}
+				ref={viewerRef}
+			/>
+      
+			<Footer 
+				title={currentLocation.chapterName}
+				nowPage={currentLocation.currentPage}
+				totalPage={currentLocation.totalPage}
+				onPageMove={onPageMove}
+			/>
+    </ViewerWrapper>
+
+    <Nav
+			control={navControl}
+			onToggle={onNavToggle}
+			onLocation={onLocationChange}
+			ref={navRef}
+		/>
+    
+    <Option 
+			control={optionControl}
+			bookStyle={bookStyle}
+			bookFlow={bookOption.flow}
+			onToggle={onOptionToggle} 
+			emitEvent={emitEvent}
+			onBookStyleChange={onBookStyleChange}
+			ref={optionRef}
+		/>
+
+		<Learning 
+			control={learningControl}
+			onToggle={onLearningToggle}
+			onClickHighlight={onClickHighlight}
+			emitEvent={emitEvent}
+			viewerRef={viewerRef}
+			ref={learningRef}
+		/>
+
+		<ContextMenu
+			active={isContextMenu}
+			viewerRef={viewerRef}
+			selection={selection}
+			onAddHighlight={onAddHighlight}
+			onRemoveHighlight={onRemoveHighlight}
+			onUpdateHighlight={onUpdateHighlight}
+			onContextmMenuRemove={onContextmMenuRemove}
+		/>
+
+		<Snackbar />
+  </>);
+}
+
+const ReaderWrapper = ({ url, loadingView }: Props) => {
+	return (
+		<Provider store={store}>
+			<Reader url={url} loadingView={loadingView} />
+		</Provider>
+	);
+}
+
+interface Props {
+	url: string;
+	loadingView?: React.ReactNode;
+}
+
+export default ReaderWrapper
--- a/src/containers/commons/ContextMenu.tsx
+++ b/src/containers/commons/ContextMenu.tsx
@ -0,0 +1,207 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useSelector } from 'react-redux'
+// components
+import Wrapper from 'components/contextMenu/Wrapper'
+import ColorItem from 'components/contextMenu/ColorItem'
+import Item from 'components/contextMenu/Item'
+// utils
+import { getParagraphCfi } from 'lib/utils/commonUtil'
+// slices
+import { contextmenuWidth } from 'lib/styles/viewerLayout'
+// types
+import { RootState } from 'slices'
+import Highlight, { Color } from 'types/highlight'
+import Selection from 'types/selection'
+
+
+const ContextMenu = ({ 
+  active,
+  viewerRef, 
+  selection, 
+  onAddHighlight,
+  onRemoveHighlight,
+  onUpdateHighlight, 
+  onContextmMenuRemove
+}: Props) => {
+  const highlights = useSelector<RootState, Highlight[]>(state => state.book.highlights);
+  const colorList = useSelector<RootState, Color[]>(state => state.book.colorList);
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const [highlight, setHighlight] = useState<Highlight | null>(null);
+  
+  const [display, setDisplay] = useState<boolean>(false);
+  const [isEraseBtn, setIsEraseBtn] = useState<boolean>(false);
+  const [isReverse, setIsReverse] = useState<boolean>(false);
+  
+  const [height, setHeight] = useState<number>(0);
+  const [y, setY] = useState<number>(selection.y);
+
+  const ColorList = colorList.map(
+    color => <ColorItem key={color.code}
+                        name={color.name}
+                        color={color.code}
+                        onClick={selection.update
+                          ? () => onUpdateHighlight(highlight, color.code)
+                          : () => onAddHighlight(color.code)
+                        } />
+  );
+
+  
+  /** Remove highlight */
+  const onRemoveHighlight_ = useCallback(() => {
+    if (!highlight) return;
+
+    onRemoveHighlight(highlight.key, highlight.cfiRange);
+    onContextmMenuRemove();
+    
+    setIsEraseBtn(false);
+  }, [highlight, onRemoveHighlight, onContextmMenuRemove]);
+
+  /** 
+   * Remove contextmenu
+   * @param e Mouse Event
+   * @param e.path
+   */
+  const onRemove = useCallback(({ path }: any) => {
+    if (!menuRef.current) return;
+
+    if ([...path].includes(menuRef.current)) return;
+    onContextmMenuRemove();
+  }, [menuRef, onContextmMenuRemove]);
+  
+  /** 
+   * Arrow event
+   * @param e Keyboard Event
+   * @param e.key
+   */
+  const onKeyPress = useCallback(({ key }: any) => {
+    key && key === "ArrowLeft" && onContextmMenuRemove();
+    key && key === "ArrowRight" && onContextmMenuRemove();
+  }, [onContextmMenuRemove]);
+
+
+  /** Check whether the menu button is visible */
+  useEffect(() => {
+    if (!active) setIsEraseBtn(false);
+
+    const paragraphCfi = getParagraphCfi(selection.cfiRange);
+    if (!paragraphCfi) return;
+
+    const filtered = highlights.filter(highlight => highlight.key === paragraphCfi + selection.cfiRange);
+
+    if (!filtered.length) return;
+    const highlight_ = filtered[0];
+    setHighlight(highlight_);
+
+    if (selection.update) {
+      setIsEraseBtn(true);
+    } else {
+      setIsEraseBtn(false);
+    }
+  }, [
+    active,
+    highlights, 
+    selection.cfiRange,
+    selection.update
+  ]);
+
+  /** Register contextmenu events */
+  useEffect(() => {
+    if (!viewerRef.current) return;
+    
+    const iframe = document.querySelector('iframe');
+    const node = iframe && iframe.contentWindow && iframe.contentWindow.document;
+    const scrolledTarget = viewerRef.current.querySelector('div');
+
+    if (active) {
+      setDisplay(true);
+      scrolledTarget && scrolledTarget.addEventListener('scroll', onContextmMenuRemove);
+      node && node.addEventListener('mousedown', onRemove);
+      node && node.addEventListener('keyup', onKeyPress);
+      document.addEventListener('mousedown', onRemove);
+      document.addEventListener('keyup', onKeyPress);
+    } else {
+      setDisplay(false);
+      scrolledTarget && scrolledTarget.removeEventListener('scroll', onContextmMenuRemove);
+      node && node.removeEventListener('mousedown', onRemove);
+      node && node.removeEventListener('keyup', onKeyPress);
+      document.removeEventListener('mousedown', onRemove);
+      document.removeEventListener('keyup', onKeyPress);
+    };
+
+    return () => {
+      node && node.removeEventListener('mousedown', onContextmMenuRemove);
+      node && node.removeEventListener('keyup', onKeyPress);
+      document.removeEventListener('keyup', onKeyPress);
+    }
+  }, [
+    viewerRef, 
+    active,
+    onRemove,
+    onContextmMenuRemove, 
+    onKeyPress
+  ]);
+
+  /** Set modified contextmenu height & whether menu is reverse */
+  useEffect(() => {
+    const menuPadding = 8;
+    const itemHeight = 32;
+    let itemCnt = ColorList.length;
+    
+    if (isEraseBtn) itemCnt += 1;
+    
+    const defaultHeight = itemCnt * itemHeight + menuPadding;
+    let y_ = selection.y;
+    const { innerHeight } = window;
+    
+    if (selection.y + defaultHeight > innerHeight) {
+      y_ = selection.y - selection.height - (defaultHeight);
+      if (y_ < 0) {
+        setHeight(defaultHeight + y_ - 8);
+        y_ = 8;
+      } else {
+        setHeight(defaultHeight);
+      }
+      setIsReverse(true);
+    } else {
+      setHeight(defaultHeight);
+      setIsReverse(false);
+    }
+
+    setY(y_);
+  }, [
+    selection.y, 
+    selection.height, 
+    ColorList, 
+    isEraseBtn, 
+    setHeight
+  ]);
+
+
+  return (<>
+    {display && <Wrapper x={selection.x} 
+                         y={y} 
+                         width={contextmenuWidth}
+                         height={height}
+                         isReverse={isReverse}
+                         ref={menuRef}>
+      <div>
+        {ColorList}
+        {isEraseBtn && <Item text="Remove" onClick={onRemoveHighlight_} />}
+      </div>
+    </Wrapper>}
+  </>);
+}
+
+interface Props {
+  active: boolean;
+  viewerRef: any;
+  selection: Selection;
+  onAddHighlight: (color: string) => void;
+  onRemoveHighlight: (key: string, cfiRange: string) => void;
+  onUpdateHighlight: (highlight: Highlight | null, color: string) => void;
+  onContextmMenuRemove: () => void;
+}
+
+export default ContextMenu
--- a/src/containers/commons/Snackbar.tsx
+++ b/src/containers/commons/Snackbar.tsx
@ -0,0 +1,56 @@
+import styled from 'styled-components'
+import { useSelector, useDispatch } from 'react-redux'
+// components
+import Snackbar from 'components/commons/Snackbar'
+// lib
+import zIndex from 'lib/styles/zIndex'
+import media from 'lib/styles/media'
+// slices
+import { deleteSnackbar } from 'slices/snackbar'
+// types
+import { RootState } from 'slices'
+import { SnackbarState } from 'slices/snackbar'
+
+
+const SnackbarWrapper = ()=> {
+  const dispatch = useDispatch();
+	const snackbar = useSelector<RootState, SnackbarState>(state => state.snackbar);
+	
+
+	const onClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		if (e) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+		dispatch(deleteSnackbar());
+	};
+
+	
+	return (
+		<Container>
+			{snackbar.text !== '' && <Snackbar onClick={onClick} 
+                                         text={snackbar.text} 
+                                         type={snackbar.type} />}
+		</Container>
+	);
+}
+
+const Container = styled.div`
+	position: fixed;
+	top: 40px;
+	right: 30px;
+	width: 320px;
+	height: auto;
+	z-index: ${zIndex.snackbar};
+
+	${media.small} {
+		width: 100%;
+		top: initial;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+`;
+
+export default SnackbarWrapper
--- a/src/containers/menu/Nav.tsx
+++ b/src/containers/menu/Nav.tsx
@ -0,0 +1,52 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+// components
+import Wrapper from 'components/sideMenu/Wrapper'
+import BookInfo from 'components/nav/BookInfo'
+import NavItem from 'components/nav/NavItem'
+// types
+import { RootState } from 'slices'
+import Book from 'types/book'
+import Toc from 'types/toc'
+import { MenuControl } from 'lib/hooks/useMenu'
+
+const Nav = ({ control, onToggle, onLocation }: Props, ref: any) => {
+  const book = useSelector<RootState, Book>(state => state.book.book);
+  const bookToc = useSelector<RootState, Toc[]>(state => state.book.toc);
+  
+  /** Click nav item */
+  const onClickItem = (loc: string) => {
+    onLocation(loc);
+    onToggle();
+  }
+
+  const Tocs = bookToc.map((t, idx) => 
+    <NavItem key={idx}
+             message={t.label}
+             onClick={() => onClickItem(t.href)} />
+  );
+  
+  
+  return (<>
+    {control.display && <Wrapper title="Contents"
+                                 show={control.open}
+                                 onClose={onToggle}
+                                 ref={ref}>
+      <BookInfo 
+        src={book.coverURL}
+        title={book.title}
+        publisher={book.publisher}
+        author={book.author} 
+      />
+      {Tocs}
+    </Wrapper>}
+  </>);
+}
+
+interface Props {
+  control: MenuControl;
+  onToggle: () => void;
+  onLocation: (loc: string) => void;
+}
+
+export default React.forwardRef(Nav)
--- a/src/containers/menu/Note.tsx
+++ b/src/containers/menu/Note.tsx
@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+// containers
+import Highlight from 'containers/menu/commons/Highlight'
+// components
+import Wrapper from 'components/sideMenu/Wrapper'
+import LearningLayout from 'components/learning/Layout'
+import SortedBtnWrapper from 'components/learning/SortedBtnWrapper'
+import SortedBtn from 'components/learning/SortedBtn'
+import MenuEmpty from 'components/sideMenu/MenuEmpty'
+// types
+import { RootState } from 'slices'
+import HighlightType from 'types/highlight'
+import { MenuControl } from 'lib/hooks/useMenu'
+
+
+const Note = ({ 
+  control, 
+  onToggle, 
+  onClickHighlight, 
+  emitEvent,
+  viewerRef 
+}: Props, ref: any) => {
+  const highlights = useSelector<RootState, HighlightType[]>(state => state.book.highlights);
+  
+  const [sorted, setSorted] = useState<Sorted>("CART");
+  const [highlightList, setHighlightList] = useState<any[]>([]);
+  
+  /** 
+   * Select sort type
+   * @param type Viewed or Created
+   */
+  const onSortedClick = (type: Sorted) => setSorted(type);
+
+
+  /** Set highlight contents */
+  useEffect(() => {
+    const sortedKey = sorted === "LOOK" 
+      ? "accessTime" 
+      : "createTime";
+
+    const highlightList = highlights.slice().sort(function (a, b) {
+      return new Date(b[sortedKey]).getTime() - new Date(a[sortedKey]).getTime();
+    });
+    const Items = highlightList.map(h => <Highlight key={h.key} 
+                                                    highlight={h}
+                                                    onClick={onClickHighlight} 
+                                                    emitEvent={emitEvent}
+                                                    viewerRef={viewerRef} />
+    );
+    setHighlightList(Items); 
+  }, [
+    viewerRef,
+    sorted, 
+    highlights,
+    onClickHighlight,
+    emitEvent,
+    setHighlightList
+  ]);
+
+
+  return (<>
+    {control.display && <Wrapper title="Highlight"
+                                 show={control.open}
+                                 onClose={onToggle}
+                                 ref={ref} >
+      <LearningLayout>
+        <SortedBtnWrapper>
+          <SortedBtn 
+            text="viewed" 
+            isSelected={sorted === "LOOK"} 
+            onClick={() => onSortedClick("LOOK")}
+          />
+          <SortedBtn 
+            text="created" 
+            isSelected={sorted === "CART"} 
+            onClick={() => onSortedClick("CART")}
+          />
+        </SortedBtnWrapper>
+
+        {highlightList.length > 0
+          ? highlightList
+          : <MenuEmpty text="Empty highlights!" />
+        }
+      </LearningLayout>
+    </Wrapper>}
+  </>);
+}
+
+type Sorted = "LOOK" | "CART"
+
+interface Props {
+  control: MenuControl;
+  onToggle: () => void;
+  onClickHighlight: (highlightNode: any) => void;
+  emitEvent: () => void;
+  viewerRef: any;
+}
+
+export default React.forwardRef(Note)
--- a/src/containers/menu/Option.tsx
+++ b/src/containers/menu/Option.tsx
@ -0,0 +1,137 @@
+import React from 'react'
+import { useState, useEffect } from 'react'
+// components
+import Wrapper from 'components/sideMenu/Wrapper'
+import OptionLayout from 'components/option/Layout'
+import OptionDropdown from 'components/option/Dropdown'
+import OptionSlider from 'components/option/Slider'
+// types
+import { BookStyle, BookFontFamily, BookFlow } from 'types/book'
+import { MenuControl } from 'lib/hooks/useMenu'
+
+const Option = ({ 
+  control, 
+  bookStyle,
+  bookFlow,
+  onToggle, 
+  emitEvent,
+  onBookStyleChange
+}: Props, ref: any) => {
+  const [fontFamily, setFontFamily] = useState<BookFontFamily>(bookStyle.fontFamily);
+  const [fontSize, setFontSize] = useState<number>(bookStyle.fontSize);
+  const [lineHeight, setLineHeight] = useState<number>(bookStyle.lineHeight);
+  const [marginHorizontal, setMarginHorizontal] = useState<number>(bookStyle.marginHorizontal);
+  const [marginVertical, setMarginVertical] = useState<number>(bookStyle.marginVertical);
+
+
+  /** Change font family */
+  const onSelectFontFamily = (font: BookFontFamily) => setFontFamily(font);
+
+  /** Change font style and layout */
+  const onChangeSlider = (type: SliderType, e: any) => {
+    if (!e || !e.target) return;
+    switch (type) {
+      case "FontSize":
+        setFontSize(e.target.value);
+        break;
+      case "LineHeight":
+        setLineHeight(e.target.value);
+        break;
+      case "MarginHorizontal":
+        setMarginHorizontal(e.target.value);
+        break;
+      case "MarginVertical":
+        setMarginVertical(e.target.value);
+        break;
+      default:
+        break;
+    }
+  }
+
+
+  /* Save userdata */
+  // TODO Fix the infinite re-rendering issue, when inlcude `onBookStyleChange` to dependencies array.
+  /* eslint-disable */
+  useEffect(() => {
+    const timer = window.setTimeout(() => { 
+      onBookStyleChange({
+        fontFamily,
+        fontSize,
+        lineHeight,
+        marginHorizontal,
+        marginVertical
+      });
+    }, 250);
+
+    return () => window.clearTimeout(timer);
+  }, [
+    fontFamily, 
+    fontSize, 
+    lineHeight, 
+    marginHorizontal, 
+    marginVertical
+  ]);
+  /* eslint-enable */
+
+  /** Re-register close event, when after set */
+  useEffect(() => emitEvent(), [bookStyle, emitEvent]);
+
+  
+  return (<>
+    {control.display && <Wrapper title="Setting"
+                                 show={control.open}
+                                 onClose={onToggle}
+                                 ref={ref}>
+      <OptionLayout>
+        <OptionDropdown title="Font"
+                        defaultValue={fontFamily}
+                        valueList={["Origin", "Roboto"]}
+                        onSelect={onSelectFontFamily} />
+        <OptionSlider active={true}
+                      title="Size"
+                      minValue={8}
+                      maxValue={36}
+                      defaultValue={fontSize}
+                      step={1}
+                      onChange={(e) => onChangeSlider("FontSize", e)} />
+        <OptionSlider active={true}
+                      title="Line height"
+                      minValue={1}
+                      maxValue={3}
+                      defaultValue={lineHeight}
+                      step={0.1}
+                      onChange={(e) => onChangeSlider("LineHeight", e)} />
+        <OptionSlider active={true}
+                      title="Horizontal margin"
+                      minValue={0}
+                      maxValue={100}
+                      defaultValue={marginHorizontal}
+                      step={1}
+                      onChange={(e) => onChangeSlider("MarginHorizontal", e)} />
+        <OptionSlider active={bookFlow === "paginated"}
+                      title="Vertical margin"
+                      minValue={0}
+                      maxValue={100}
+                      defaultValue={marginVertical}
+                      step={1}
+                      onChange={(e) => onChangeSlider("MarginVertical", e)} />
+      </OptionLayout>
+    </Wrapper>}
+  </>);
+}
+
+interface Props {
+  control: MenuControl;
+  bookStyle: BookStyle;
+  bookFlow: BookFlow;
+  onToggle: () => void;
+  emitEvent: () => void;
+  onBookStyleChange: (bookStyle: BookStyle) => void;
+}
+
+type SliderType = "FontSize" 
+  | "LineHeight" 
+  | "MarginHorizontal" 
+  | "MarginVertical";
+
+export default React.forwardRef(Option)
--- a/src/containers/menu/commons/Highlight.tsx
+++ b/src/containers/menu/commons/Highlight.tsx
@ -0,0 +1,71 @@
+import { useDispatch } from 'react-redux'
+// components
+import Wrapper from 'components/learning/highlight/Wrapper'
+import Title from 'components/learning/highlight/Title'
+import Post from 'components/learning/highlight/Post'
+import PageNum from 'components/learning/highlight/PageNum'
+// slices
+import { updateHighlight } from 'slices/book'
+// utils
+import { cfiRangeSpliter } from 'lib/utils/commonUtil'
+// types
+import HighlightType from 'types/highlight'
+
+const Highlight = ({ 
+  highlight, 
+  onClick, 
+  emitEvent, 
+  viewerRef
+}: Props) => {
+  const dispatch = useDispatch();
+
+
+  /** 하이라이트 클릭 */
+  const onClickHighlight = () => {
+    if (!viewerRef.current) return;
+    
+    const now = new Date().toISOString();
+    dispatch(updateHighlight({
+      ...highlight,
+      accessTime: now
+    }));
+
+    const splitCfi = cfiRangeSpliter(highlight.cfiRange);
+    if (!splitCfi) return;
+
+    const { startCfi } = splitCfi;
+
+    viewerRef.current.setLocation(startCfi);
+
+    emitEvent();
+
+    const svgContainer = viewerRef.current.querySelector("svg");
+    if (!svgContainer) return;
+
+    const targetSvg = svgContainer.querySelector(`g[data-epubcfi="${highlight.cfiRange}"]`);
+    if (!targetSvg) return;
+
+    onClick(targetSvg.childNodes[0]);
+  }
+  
+  return (
+    <Wrapper onClick={onClickHighlight}>
+      <PageNum num={highlight.pageNum} />
+
+      <div>
+        <Title>{highlight.chpaterName}</Title>
+
+        <Post color={highlight.color}>{highlight.content}</Post>
+      </div>
+    </Wrapper>
+  );
+}
+
+interface Props {
+  highlight: HighlightType;
+  onClick: (highlightNode: any) => void;
+  emitEvent: () => void;
+  viewerRef: any;
+}
+
+export default Highlight
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom';
+import Reader from 'containers/Reader'
+
+const EPUB_URL = "files/Alices Adventures in Wonderland.epub";
+
+ReactDOM.render(<Reader url={EPUB_URL} />,  document.getElementById('root'));
--- a/src/lib/hooks/useHighlight.ts
+++ b/src/lib/hooks/useHighlight.ts
@ -0,0 +1,261 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+// slices
+import { pushHighlight, popHighlight, updateHighlight } from 'slices/book'
+import { newSnackbar } from 'slices/snackbar'
+// utils
+import {  
+	getParagraphCfi,
+	clashCfiRange, 
+	getSelectionPosition,
+	compareCfi,
+	cfiRangeSpliter,
+	getNodefromCfi
+} from 'lib/utils/commonUtil'
+// styles
+import viewerLayout, { contextmenuWidth } from 'lib/styles/viewerLayout'
+// types
+import { RootState } from 'slices'
+import { BookStyle, BookFlow } from 'types/book'
+import Page from 'types/page'
+import Selection from 'types/selection'
+import Highlight from 'types/highlight'
+
+
+/**
+ * Epub Reader의 Highlight 관련 hook
+ * - [selection]: 현재 selection의 정보
+ * - [onSelection]: selection 적용 함수 (Iframe에 selection 이벤트로 등록해야 합니다.)
+ * - [onClickHighlight]: highlight 클릭 함수
+ * - [onAddHighlight] highlight 생성 함수
+ * - [onRemoveHighlight]: highlight 제거 함수
+ * - [onUpdateHighlight]: highlight 갱신 함수
+ *
+ * @param viewerRef Viewer에 등록된 가지고 있는 useRef
+ * @param setIsContextMenu Contextmenu를 컨트롤 할 수 있는 useState 함수
+ * 
+ * @example
+ * const [isContextMenu, setIsContextMenu] = useState<boolean>(false);
+ * 
+ * const { 
+ * 	selection, 
+ * 	onSelection, 
+ * 	onClickHighlight,
+ * 	onRemoveHighlight
+ * } = useSelection(viewerRef, setIsContextMenu);
+ */
+const useHighlight = (
+	viewerRef: any, 
+	setIsContextMenu: React.Dispatch<React.SetStateAction<boolean>>,
+	bookStyle: BookStyle,
+	bookFlow: BookFlow
+) => {
+	const dispatch = useDispatch();
+	const currentLocation = useSelector<RootState, Page>(state => state.book.currentLocation);
+	const highlights = useSelector<RootState, Highlight[]>(state => state.book.highlights);
+
+	const [selection, setSelection] = useState<Selection>({
+		update: false,
+		x: 0,
+		y: 0,
+		height: 0,
+		cfiRange: '',
+		content: ''
+	});
+	
+
+	/** 
+	 * Selection 발동 이벤트
+	 * @param cfiRange CfiRange
+	 * @return Whether event is success
+	 */
+	const onSelection = useCallback((cfiRange: string): boolean => {
+		if (!viewerRef.current) return false;
+
+		const iframe = viewerRef.current.querySelector('iframe');
+		if (!iframe) return false;
+
+		const iframeWin = iframe.contentWindow;
+		if (!iframeWin) return false;
+		
+		const filtered = highlights.filter(
+			highlight => clashCfiRange(highlight.cfiRange, cfiRange)
+		);
+
+		if (filtered.length > 0) {
+			dispatch(newSnackbar({
+        text: "There are already registered highlights in your selection.", 
+        type: "WARNING" 
+      }));
+
+			iframeWin.getSelection().removeAllRanges();
+			return false;
+		}
+
+		const position = getSelectionPosition(
+			viewerRef.current,
+			bookStyle,
+			bookFlow,
+			viewerLayout.MIN_VIEWER_WIDTH,
+			viewerLayout.MIN_VIEWER_HEIGHT,
+			viewerLayout.VIEWER_HEADER_HEIGHT,
+			contextmenuWidth
+		);
+		if (!position) return false;
+
+		const { x, y, height } = position;
+
+		const content = iframeWin.getSelection().toString().trim();
+
+		if (content.length === 0) return false;
+		
+		setSelection({ 
+			update: false,
+			x, 
+			y,
+			height,
+			cfiRange,
+			content
+		});
+		
+		return true;
+	}, [
+		dispatch, 
+		viewerRef,
+		highlights, 
+		bookFlow, 
+		bookStyle,
+		setSelection
+	]);
+
+	/** Highlight 클릭 이벤트 */
+	const onClickHighlight = useCallback((highlightNode: HTMLElement) => {
+		const targetNode = highlightNode.parentElement;
+		if (!targetNode) return;
+
+		const cfiRange = targetNode.dataset.epubcfi;
+		if (!cfiRange) return;
+
+		const { x, y, width, height } = targetNode.getBoundingClientRect();
+
+		setSelection({ 
+			update: true,
+			x: x + width / 2 - contextmenuWidth / 2, 
+			y: y + height,
+			height,
+			cfiRange,
+			content: ""
+		});
+	}, [setSelection]);
+
+	/** 하이라이트 생성 함수 */
+	const onAddHighlight = useCallback((color: string) => {
+    const paragraphCfi = getParagraphCfi(selection.cfiRange);
+    if (!paragraphCfi) return;
+    
+    const highlight: Highlight = {
+      key: paragraphCfi + selection.cfiRange,
+      accessTime: new Date().toISOString(),
+      createTime: new Date().toISOString(),
+      color,
+      paragraphCfi,
+      cfiRange: selection.cfiRange,
+      chpaterName: currentLocation.chapterName,
+      pageNum: currentLocation.currentPage,
+      content: selection.content
+    };
+
+    dispatch(pushHighlight(highlight));
+
+		setSelection({ ...selection, update: true });
+  }, [dispatch, selection, currentLocation]);
+
+	/** 
+   * 하이라이트 수정
+   * @param color 색상 Hex 코드
+   */
+	const onUpdateHighlight = useCallback((highlight: Highlight | null, color: string) => {
+		if (!highlight) return;
+
+    dispatch(updateHighlight({
+      ...highlight,
+      color
+    }));
+  }, [dispatch]);
+
+	/** 
+	 * 하이라이트 제거 함수 
+	 * @param key 북마크 식별값
+	 */
+	 const onRemoveHighlight = useCallback((key: string, cfiRange: string) => {
+		if (!viewerRef.current || !key) return;
+
+		dispatch(popHighlight(key));
+
+		dispatch(newSnackbar({
+			text: "The highlight removed successful!", 
+			type: "INFO" 
+		}));
+		
+		viewerRef.current.offHighlight(cfiRange);
+	}, [dispatch, viewerRef]);
+
+
+	/**
+	 * 하이라이트 여부 확인
+	 * - 페이지 변경에 따른 하이라이트 확인 및 적용
+	 */
+	 useEffect(() => {
+		if (!viewerRef.current) return;
+
+		const iframe = viewerRef.current.querySelector('iframe');
+		if (!iframe) return;
+
+		const iframeWin = iframe.contentWindow;
+		if (!iframeWin) return;
+
+		highlights.forEach(highlight => {
+			const cfiRange = cfiRangeSpliter(highlight.cfiRange);
+			if (!cfiRange) return;
+
+			const { startCfi } = cfiRange;
+
+			if (compareCfi(currentLocation.startCfi, startCfi) < 1
+				&& compareCfi(currentLocation.endCfi, startCfi) > -1) {
+				const node = getNodefromCfi(highlight.paragraphCfi);
+				if (!node) return;
+
+				viewerRef.current.onHighlight(
+					highlight.cfiRange,
+					(e: any) => {
+						onClickHighlight(e.target);
+						setIsContextMenu(true);
+					},
+					highlight.color 
+				);
+
+				iframeWin.getSelection().removeAllRanges();
+			}
+		});
+	}, [
+		dispatch,
+		viewerRef, 
+		currentLocation, 
+		highlights, 
+		onRemoveHighlight,
+		onClickHighlight,
+		setIsContextMenu
+	]);
+
+
+	return { 
+		selection, 
+		onSelection, 
+		onClickHighlight,
+		onAddHighlight,
+		onRemoveHighlight,
+		onUpdateHighlight
+	};
+}
+
+export default useHighlight;
--- a/src/lib/hooks/useMenu.ts
+++ b/src/lib/hooks/useMenu.ts
@ -0,0 +1,124 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Epub Reader 메뉴를 컨트롤 하는 hook
+ * - control의 display를 Menu 생성/제거 플래그로 이용합니다.
+ * - control의 show를 Animaton 플래그로 이용합니다.
+ * - Menu 이외의 영역 클릭시 Close Event 발동
+ *
+ * @param ref DOM을 가지고 있는 useRef
+ * @param delay 애니메이션 딜레이 시간(ms)
+ * 
+ * @example
+ * const Viewer = () => {
+ *   const menuDelay = 300;
+ * 
+ *   const ref = useRef<HTMLDivElement | null>(null);
+ *   const [control, onToggle] = usemenu(ref, menuDelay);
+ * 
+ *   return (<>
+ *     <MenuOpenBtn onClick={onToggle} />
+ *     <Menu control={control} onToggle={onToggle} ref={ref} />
+ *   </>);
+ * }
+ * 
+ * const Menu = ({ control, onToggle }, ref) => {
+ *   return (<>
+ *     {control.display && <MenuWrapper show={control.show} 
+ *                                      delay={menuDelay}
+ *                                      ref={ref}>
+ *       <CloseBtn onClick={onToggle} />
+ *     </MenuWrapper>}
+ *   </>);
+ * }
+ * 
+ * const MenuWrapper = styled.div<{show: boolean; delay: boolean;}>`
+ *   transform: ${({show}) => show
+ *     ? "translateX(0px)"
+ *     : "translateX(420px)"
+ *   };
+ *   transition: ${({delay}) => `${delay}ms ease`};
+ * `;
+ */
+function useMenu(ref: { current: any }, delay: number) {
+	const [eventSignal, setEventSignal] = useState<boolean>(true);
+	const [control, setControl] = useState<MenuControl>({
+		display: false,
+		open: false
+	});
+	
+
+	/** Menu 토글 */
+	const onToggle = useCallback(() => {
+		let event: any = null;
+		window.clearTimeout(event);
+		if (!control.display) {
+			setControl({ display: true, open: false });
+			event = window.setTimeout(() => setControl({ display: true, open: true}), 0);
+		} else {
+			setControl({ display: true, open: false });
+			event = window.setTimeout(() => setControl({ display: false, open: false }), delay - 50);
+		}
+	}, [control.display, delay]);
+
+	/** 
+	 * 메뉴 닫기 
+	 * - Event path에서 메뉴가 포함되어있지 않으면, 함수를 실행합니다.
+	 */
+  const onClose = useCallback((e: any) => {
+    if (!ref || !ref.current) return;
+    if (!e.path.includes(ref.current)) {
+			onToggle();
+    }
+  }, [ref, onToggle]);
+
+	/** 
+	 * 이벤트 재등록
+	 * - '보기설정' 에서 rendition이 재 렌더링 될 때, 이벤트를 재등록하기 위한 함수
+	 * - Iframe 생성 시간 대기 [About 250ms]
+	 */
+	const emitEvent = useCallback(() => {
+		window.setTimeout(() => setEventSignal(true), 300);
+	}, [setEventSignal]); 
+
+
+  /** 
+	 * 목차 닫기 이벤트 등록 
+	 * - Epub이 iframe으로 등록되므로, iframe에도 Event를 등록시켜줍니다.
+	 */
+  useEffect(() => {
+		if (!eventSignal && !control.display) return;
+		
+    const epubIframe = document.querySelector('iframe');
+
+		if (control.display) {
+			document.addEventListener('click', onClose);
+			if (epubIframe && epubIframe.contentWindow) {
+				epubIframe.contentWindow.document.addEventListener('click', onClose);
+			}
+		} else {
+			document.removeEventListener('click', onClose);
+      if (epubIframe && epubIframe.contentWindow) {
+				epubIframe.contentWindow.document.removeEventListener('click', onClose);
+      }
+		}
+
+		setEventSignal(false);
+  
+    return () => {
+      document.removeEventListener('click', onClose);
+      if (epubIframe && epubIframe.contentWindow) {
+				epubIframe.contentWindow.document.removeEventListener('click', onClose);
+      }
+    }
+  }, [control.display, onClose, eventSignal]);
+
+	return [control, onToggle, emitEvent] as const;
+}
+
+export type MenuControl = {
+	display: boolean;
+	open: boolean;
+}
+
+export default useMenu
--- a/src/lib/styles/animations.ts
+++ b/src/lib/styles/animations.ts
@ -0,0 +1,62 @@
+import { keyframes } from 'styled-components';
+
+const fadeIn = keyframes`
+	0% { opacity: 0; }
+	100% { opacity: 1;}
+`;
+const fadeOut = keyframes`
+	0% { opacity: 1; }
+	100% { opacity: 0; }
+`;
+const fadeInTop = keyframes`
+	0% { opacity: 0; transform: translateY(-40px); }
+	100% { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutTop = keyframes`
+	0% { opacity: 1; transform: translateY(0); }
+	100% { opacity: 0; transform: translateY(-40px); }
+`;
+const fadeInBottom = keyframes`
+	0% { opacity: 0; transform: translateY(40px); }
+	100% { opacity: 1; transform: translateY(0); }
+`;
+const fadeOutBottom = keyframes`
+	0% { opacity: 1; transform: translateY(0); }
+	100% { opacity: 0; transform: translateY(40px); }
+`;
+const fadeInLeft = keyframes`
+	0% { opacity: 0; transform: translateX(-40px); }
+	100% { opacity: 1; transform: translateX(0); }
+`;
+const fadeOutLeft = keyframes`
+	0% { opacity: 1; transform: translateX(0); }
+	100% { opacity: 0; transform: translateX(-40px); }
+`;
+const fadeInRight = keyframes`
+	0% { opacity: 0; transform: translateX(40px); }
+	100% { opacity: 1; transform: translateX(0); }
+`;
+const fadeOutRight = keyframes`
+	0% { opacity: 1; transform: translateX(0); }
+	100% { opacity: 0; transform: translateX(40px); }
+`;
+const spin = keyframes`
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+`;
+
+const animations = {
+	fadeIn,
+	fadeOut,
+	fadeInTop,
+	fadeOutTop,
+	fadeInBottom,
+	fadeOutBottom,
+	fadeInLeft,
+	fadeOutLeft,
+	fadeInRight,
+	fadeOutRight,
+	spin
+};
+
+export default animations
--- a/src/lib/styles/media.ts
+++ b/src/lib/styles/media.ts
@ -0,0 +1,31 @@
+export const mediaQuery = (maxWidth: number): string => `
+	@media (max-width: ${maxWidth}px)
+`;
+
+export const mediaValue = {
+	xlarge: 1600,
+	large: 1440,
+	medium: 1200,
+	small: 702,
+	xsmall: 350	
+};
+
+type Media = {
+	xlarge : string,
+	large : string,
+	medium : string,
+	small : string,
+	xsmall : string,
+	custom : (maxWidth: number) => string
+}
+
+const media: Media = {
+	xlarge : mediaQuery(mediaValue.xlarge),
+	large : mediaQuery(mediaValue.large),
+	medium : mediaQuery(mediaValue.medium),
+	small : mediaQuery(mediaValue.small),
+	xsmall : mediaQuery(mediaValue.xsmall),
+	custom : mediaQuery,
+};
+
+export default media;
--- a/src/lib/styles/palette.ts
+++ b/src/lib/styles/palette.ts
@ -0,0 +1,79 @@
+/*
+ :::: Color Varient ::::
+*/
+const palette = {
+  white: '#ffffff',
+  black: '#000000',
+  /* gray */
+  gray0: '#fafafa',
+  gray1: '#e7e7e7',
+  gray2: '#c3c3c3',
+  gray3: '#9e9e9e',
+  gray4: '#868686',
+  gray5: '#656565',
+  gray6: '#505050',
+  gray7: '#3c3c3c',
+  gray8: '#282828',
+  /* red */
+  red0: '#ffe8e8',
+  red1: '#ffd0d1',
+  red2: '#ff8a8b',
+  red3: '#ff4445',
+  red4: '#ff1517',
+  red5: '#bf1011',
+  red6: '#990d0e',
+  red7: '#73090a',
+  red8: '#4d0607',
+  /* orange */
+  orange0: '#fff0ec',
+  orange1: '#ffe2d9',
+  orange2: '#ffb6a0',
+  orange3: '#ff8966',
+  orange4: '#ff6c40',
+  orange5: '#bf5130',
+  orange6: '#994126',
+  orange7: '#73311d',
+  orange8: '#4d2013',
+  /* yellow */
+  yellow0: '#fffce6',
+  yellow1: '#fffacc',
+  yellow2: '#fff280',
+  yellow3: '#feea33',
+  yellow4: '#fee500',
+  yellow5: '#bfac00',
+  yellow6: '#988900',
+  yellow7: '#726700',
+  yellow8: '#4c4500',
+  /* green */
+  green0: '#e6f7e6',
+  green1: '#cdefcc',
+  green2: '#83d880',
+  green3: '#39c133',
+  green4: '#07b100',
+  green5: '#058500',
+  green6: '#046a00',
+  green7: '#035000',
+  green8: '#023500',
+  /* blue */
+  blue0: '#ebf1ff',
+  blue1: '#d7e3ff ',
+  blue2: '#9cb9ff ',
+  blue3: '#618eff ',
+  blue4: '#3972ff ',
+  blue5: '#2b56bf ',
+  blue6: '#224499 ',
+  blue7: '#1a3373 ',
+  blue8: '#11224d ',
+  /* purple */
+  purple0: '#f2ebff',
+  purple1: '#d7e3ff',
+  purple2: '#be9cff',
+  purple3: '#9761ff',
+  purple4: '#7d39ff',
+  purple5: '#5e2bbf',
+  purple6: '#4b2299',
+  purple7: '#381a73',
+  purple8: '#26114d',
+};
+
+export default palette
--- a/src/lib/styles/readerStyle.css
+++ b/src/lib/styles/readerStyle.css
@ -0,0 +1,24 @@
+a {
+	text-decoration: none;
+}
+
+input {
+	border: none;
+	background-color: rgba(0,0,0,0);
+}
+
+::selection {
+	background-color: #d4e9ff;
+}
+
+.epub-highlight {
+  fill-opacity: 0.3;
+  mix-blend-mode: multiply;
+	cursor: pointer;
+	pointer-events: fill;
+	transition: .1s ease-in-out;
+}
+
+.epub-highlight:hover {
+	fill-opacity: 0.4;
+}
--- a/src/lib/styles/styles.ts
+++ b/src/lib/styles/styles.ts
@ -0,0 +1,35 @@
+export const noselect = (): string => `
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+`;
+
+export const transition = (): string =>`
+	cubic-bezier(0.25, 0.1, 0.25, 1);
+`;
+
+export const boxShadow = {
+	light: "0px 4px 16px rgba(0, 0, 0, 0.04)",
+	regular: "0px 8px 12px rgba(0, 0, 0, 0.2)",
+	bold: "0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 8px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2)"
+};
+
+export const scrollbar = (width=8) => `
+	&::-webkit-scrollbar {
+		width: ${width}px;
+		background: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: #ddd;
+		border-radius: 10px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background: #ccc;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+`
--- a/src/lib/styles/viewerLayout.ts
+++ b/src/lib/styles/viewerLayout.ts
@ -0,0 +1,14 @@
+import ViewerLayout from 'types/viewerLayout'
+
+/** Epub viewer layout size */
+const viewerLayout: ViewerLayout = {
+  MIN_VIEWER_WIDTH: 600,  
+  MIN_VIEWER_HEIGHT: 300,
+  VIEWER_HEADER_HEIGHT: 54,
+  VIEWER_FOOTER_HEIGHT: 60,
+	VIEWER_SIDEMENU_WIDTH: 0
+}
+
+export const contextmenuWidth = 160;
+
+export default viewerLayout
--- a/src/lib/styles/zIndex.ts
+++ b/src/lib/styles/zIndex.ts
@ -0,0 +1,13 @@
+export const zIndexSet = (layer: number): string => `
+	${layer}
+`;
+
+const zIndex = {
+	header: zIndexSet(5),
+	menu: zIndexSet(10),
+	modal: zIndexSet(100),
+	snackbar: zIndexSet(400),
+	tooltip: zIndexSet(500)
+};
+
+export default zIndex;
--- a/src/lib/svg/BookClose.js
+++ b/src/lib/svg/BookClose.js
@ -0,0 +1,36 @@
+import * as React from "react";
+
+function SvgBookClose(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}"
+          }
+        </style>
+      </defs>
+      <g
+        id="bookClose_svg__\uB808\uC774\uC5B4_2"
+        data-name="\uB808\uC774\uC5B4 2"
+      >
+        <g
+          id="bookClose_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            className="bookClose_svg__cls-3"
+            d="M37.12 3H10.88a3 3 0 00-.43 0A1.71 1.71 0 009.1 4.11a1.87 1.87 0 00-.1.59v29.18c0 1 0 .94 1.88 1.88l18 9a1.8 1.8 0 002.6-1.2 3 3 0 000-.31v-7.58h5.62A1.88 1.88 0 0039 33.8V4.87A1.88 1.88 0 0037.12 3z"
+          />
+          <path
+            className="bookClose_svg__cls-3"
+            d="M31.5 35.67V14.84a2 2 0 00-1.1-1.78L10.45 3"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgBookClose;
--- a/src/lib/svg/BookOpen.js
+++ b/src/lib/svg/BookOpen.js
@ -0,0 +1,32 @@
+import * as React from "react";
+
+function SvgBookOpen(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}"
+          }
+        </style>
+      </defs>
+      <g
+        id="bookOpen_svg__\uB808\uC774\uC5B4_2"
+        data-name="\uB808\uC774\uC5B4 2"
+      >
+        <g
+          id="bookOpen_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            className="bookOpen_svg__cls-3"
+            d="M4 6.5a27.24 27.24 0 0120 1v34a27.24 27.24 0 00-20-1zM24 7.5a27.24 27.24 0 0120-1v34a27.24 27.24 0 00-20 1"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgBookOpen;
--- a/src/lib/svg/Bookmark.js
+++ b/src/lib/svg/Bookmark.js
@ -0,0 +1,23 @@
+import * as React from "react";
+
+function SvgBookmark(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <g data-name="\uB808\uC774\uC5B4 2">
+        <g data-name="\uB808\uC774\uC5B4 1">
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            d="M10 5.07V44a1 1 0 001.71.73l10.88-11.29a1.94 1.94 0 012.82 0l10.88 11.25A1 1 0 0038 44V5.07A2 2 0 0036 3H12a2 2 0 00-2 2.07z"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            fill="none"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgBookmark;
--- a/src/lib/svg/Bookmarker.js
+++ b/src/lib/svg/Bookmarker.js
@ -0,0 +1,22 @@
+import * as React from "react";
+
+function SvgBookmarker(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <g data-name="\uB808\uC774\uC5B4 2">
+        <g data-name="\uB808\uC774\uC5B4 1">
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            d="M42.93 12H4c-.93 0-1.39.92-.73 1.46l11.25 9.33a1.51 1.51 0 010 2.42L3.31 34.54c-.66.54-.2 1.46.69 1.46h38.93A1.92 1.92 0 0045 34.29V13.71A1.92 1.92 0 0042.93 12z"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgBookmarker;
--- a/src/lib/svg/Close.js
+++ b/src/lib/svg/Close.js
@ -0,0 +1,26 @@
+import * as React from "react";
+
+function SvgClose(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <defs>
+        <style>
+          {
+            ".close_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g id="close_svg__\uB808\uC774\uC5B4_2" data-name="\uB808\uC774\uC5B4 2">
+        <g
+          id="close_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path className="close_svg__cls-3" d="M4 4l40 40M4 44L44 4" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgClose;
--- a/src/lib/svg/Controller.js
+++ b/src/lib/svg/Controller.js
@ -0,0 +1,35 @@
+import * as React from "react";
+
+function SvgController(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <defs>
+        <style>
+          {
+            ".controller_svg__cls-3{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g
+        id="controller_svg__\uB808\uC774\uC5B4_2"
+        data-name="\uB808\uC774\uC5B4 2"
+      >
+        <g
+          id="controller_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <circle className="controller_svg__cls-3" cx={39} cy={40} r={4} />
+          <circle className="controller_svg__cls-3" cx={24} cy={24} r={4} />
+          <path d="M20 24a4 4 0 01.55-2H4a2 2 0 000 4h16.55a4 4 0 01-.55-2zM44 22H27.45a3.91 3.91 0 010 4H44a2 2 0 000-4z" />
+          <circle className="controller_svg__cls-3" cx={9} cy={8} r={4} />
+          <path d="M44 6H12.45a3.91 3.91 0 010 4H44a2 2 0 000-4zM5 8a4 4 0 01.55-2H4a2 2 0 000 4h1.55A4 4 0 015 8z" />
+          <circle className="controller_svg__cls-3" cx={39} cy={40} r={4} />
+          <path d="M35 40a4 4 0 01.55-2H4a2 2 0 000 4h31.55a4 4 0 01-.55-2zM44 38h-1.55a3.91 3.91 0 010 4H44a2 2 0 000-4z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgController;
--- a/src/lib/svg/Down.js
+++ b/src/lib/svg/Down.js
@ -0,0 +1,22 @@
+import * as React from "react";
+
+function SvgDown(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <g data-name="\uB808\uC774\uC5B4 2">
+        <g data-name="\uB808\uC774\uC5B4 1">
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            d="M8.33 15.82l14.32 20.46a1.63 1.63 0 002.7 0l14.32-20.46A1.78 1.78 0 0038.32 13H9.68a1.78 1.78 0 00-1.35 2.82z"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgDown;
--- a/src/lib/svg/Left.js
+++ b/src/lib/svg/Left.js
@ -0,0 +1,29 @@
+import * as React from "react";
+
+function SvgLeft(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <defs>
+        <style>
+          {
+            ".left_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g id="left_svg__\uB808\uC774\uC5B4_2" data-name="\uB808\uC774\uC5B4 2">
+        <g
+          id="left_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <path
+            className="left_svg__cls-3"
+            d="M4 24L18.5 9.5M18.5 38.5L4 24M44 24H4"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgLeft;
--- a/src/lib/svg/Menu.js
+++ b/src/lib/svg/Menu.js
@ -0,0 +1,18 @@
+import * as React from "react";
+
+function SvgMenu(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <g data-name="\uB808\uC774\uC5B4 2">
+        <g data-name="\uB808\uC774\uC5B4 1">
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <rect x={2} y={6} width={44} height={4} rx={2} />
+          <rect x={2} y={22} width={44} height={4} rx={2} />
+          <rect x={2} y={38} width={44} height={4} rx={2} />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgMenu;
--- a/src/lib/svg/Next.js
+++ b/src/lib/svg/Next.js
@ -0,0 +1,26 @@
+import * as React from "react";
+
+function SvgNext(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" {...props}>
+      <defs>
+        <style>
+          {
+            ".next_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g id="next_svg__\uB808\uC774\uC5B4_2" data-name="\uB808\uC774\uC5B4 2">
+        <g
+          id="next_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h44v44H0z" opacity={0.3} />
+          <path className="next_svg__cls-3" d="M32 22L12 2M32 22L12 42" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgNext;
--- a/src/lib/svg/Prev.js
+++ b/src/lib/svg/Prev.js
@ -0,0 +1,26 @@
+import * as React from "react";
+
+function SvgPrev(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" {...props}>
+      <defs>
+        <style>
+          {
+            ".prev_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g id="prev_svg__\uB808\uC774\uC5B4_2" data-name="\uB808\uC774\uC5B4 2">
+        <g
+          id="prev_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h44v44H0z" opacity={0.3} />
+          <path className="prev_svg__cls-3" d="M12 22L32 2M12 22l20 20" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgPrev;
--- a/src/lib/svg/ScrollHorizontal.js
+++ b/src/lib/svg/ScrollHorizontal.js
@ -0,0 +1,38 @@
+import * as React from "react";
+
+function SvgScrollHorizontal(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <defs>
+        <style>
+          {
+            ".scrollHorizontal_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g
+        id="scrollHorizontal_svg__\uB808\uC774\uC5B4_2"
+        data-name="\uB808\uC774\uC5B4 2"
+      >
+        <g
+          id="scrollHorizontal_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <circle
+            className="scrollHorizontal_svg__cls-3"
+            cx={24}
+            cy={24}
+            r={5}
+          />
+          <path
+            className="scrollHorizontal_svg__cls-3"
+            d="M3 24l12-12M3 24l12 12M45 24L33 12M45 24L33 36"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgScrollHorizontal;
--- a/src/lib/svg/ScrollVertical.js
+++ b/src/lib/svg/ScrollVertical.js
@ -0,0 +1,33 @@
+import * as React from "react";
+
+function SvgScrollVertical(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}"
+          }
+        </style>
+      </defs>
+      <g
+        id="scrollVertical_svg__\uB808\uC774\uC5B4_2"
+        data-name="\uB808\uC774\uC5B4 2"
+      >
+        <g
+          id="scrollVertical_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <circle className="scrollVertical_svg__cls-3" cx={24} cy={24} r={5} />
+          <path
+            className="scrollVertical_svg__cls-3"
+            d="M24 3l12 12M24 3L12 15M24 45l12-12M24 45L12 33"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgScrollVertical;
--- a/src/lib/svg/Search.js
+++ b/src/lib/svg/Search.js
@ -0,0 +1,27 @@
+import * as React from "react";
+
+function SvgSearch(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
+      <defs>
+        <style>
+          {
+            ".search_svg__cls-3{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}"
+          }
+        </style>
+      </defs>
+      <g id="search_svg__\uB808\uC774\uC5B4_2" data-name="\uB808\uC774\uC5B4 2">
+        <g
+          id="search_svg__\uB808\uC774\uC5B4_1-2"
+          data-name="\uB808\uC774\uC5B4 1"
+        >
+          <path fill="none" d="M0 0h48v48H0z" opacity={0.2} />
+          <circle className="search_svg__cls-3" cx={17} cy={17} r={14} />
+          <path className="search_svg__cls-3" d="M44 44L27 27" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SvgSearch;
--- a/src/lib/svg/TempIcon.tsx
+++ b/src/lib/svg/TempIcon.tsx
@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const TempIcon = styled.div`
+  width: 32px;
+  height: 32px;
+  background-color: #ccc;
+  border-radius: 32px;
+`;
+
+export default TempIcon
--- a/src/lib/svg/bookClose.svg
+++ b/src/lib/svg/bookClose.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M37.12,3H10.88a3,3,0,0,0-.43,0h0A1.71,1.71,0,0,0,9.1,4.11,1.87,1.87,0,0,0,9,4.7V33.88c0,1,0,.94,1.88,1.88l18,9a1.8,1.8,0,0,0,2.6-1.2,3,3,0,0,0,0-.31V35.67h5.62A1.88,1.88,0,0,0,39,33.8V4.87A1.88,1.88,0,0,0,37.12,3Z"/><path class="cls-3" d="M31.5,35.67V14.84a2,2,0,0,0-1.1-1.78L10.45,3"/></g></g></svg>
--- a/src/lib/svg/bookOpen.svg
+++ b/src/lib/svg/bookOpen.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M4,6.5a27.24,27.24,0,0,1,20,1v34a27.24,27.24,0,0,0-20-1Z"/><path class="cls-3" d="M24,7.5a27.24,27.24,0,0,1,20-1v34a27.24,27.24,0,0,0-20,1"/></g></g></svg>
--- a/src/lib/svg/bookmark.svg
+++ b/src/lib/svg/bookmark.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M10,5.07V44a1,1,0,0,0,1.71.73L22.59,33.44a1.94,1.94,0,0,1,2.82,0L36.29,44.69A1,1,0,0,0,38,44V5.07A2,2,0,0,0,36,3H12A2,2,0,0,0,10,5.07Z"/></g></g></svg>
--- a/src/lib/svg/bookmarker.svg
+++ b/src/lib/svg/bookmarker.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M42.93,12H4c-.93,0-1.39.92-.73,1.46l11.25,9.33a1.51,1.51,0,0,1,0,2.42L3.31,34.54C2.65,35.08,3.11,36,4,36H42.93A1.92,1.92,0,0,0,45,34.29V13.71A1.92,1.92,0,0,0,42.93,12Z"/></g></g></svg>
--- a/src/lib/svg/close.svg
+++ b/src/lib/svg/close.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><line class="cls-3" x1="4" y1="4" x2="44" y2="44"/><line class="cls-3" x1="4" y1="44" x2="44" y2="4"/></g></g></svg>
--- a/src/lib/svg/controller.svg
+++ b/src/lib/svg/controller.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><circle class="cls-3" cx="39" cy="40" r="4"/><circle class="cls-3" cx="24" cy="24" r="4"/><path d="M20,24a4,4,0,0,1,.55-2H4a2,2,0,0,0,0,4H20.55A4,4,0,0,1,20,24Z"/><path d="M44,22H27.45a3.91,3.91,0,0,1,0,4H44a2,2,0,0,0,0-4Z"/><circle class="cls-3" cx="9" cy="8" r="4"/><path d="M44,6H12.45a3.91,3.91,0,0,1,0,4H44a2,2,0,0,0,0-4Z"/><path d="M5,8a4,4,0,0,1,.55-2H4a2,2,0,0,0,0,4H5.55A4,4,0,0,1,5,8Z"/><circle class="cls-3" cx="39" cy="40" r="4"/><path d="M35,40a4,4,0,0,1,.55-2H4a2,2,0,0,0,0,4H35.55A4,4,0,0,1,35,40Z"/><path d="M44,38H42.45a3.91,3.91,0,0,1,0,4H44a2,2,0,0,0,0-4Z"/></g></g></svg>
--- a/src/lib/svg/down.svg
+++ b/src/lib/svg/down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M8.33,15.82,22.65,36.28a1.63,1.63,0,0,0,2.7,0L39.67,15.82A1.78,1.78,0,0,0,38.32,13H9.68A1.78,1.78,0,0,0,8.33,15.82Z"/></g></g></svg>
--- a/src/lib/svg/index.ts
+++ b/src/lib/svg/index.ts
@ -0,0 +1,31 @@
+import MenuIcon from './Menu'
+import ControllerIcon from './Controller';
+import PrevIcon from './Prev';
+import NextIcon from './Next';
+import BookCloseIcon from './BookClose';
+import BookOpenIcon from './BookOpen';
+import BookmarkIcon from './Bookmark';
+import BookmarkerIcon from './Bookmarker';
+import CloseIcon from './Close';
+import DownIcon from './Down';
+import LeftIcon from './Left';
+import ScrollHorizontalIcon from './ScrollHorizontal';
+import ScrollVerticalIcon from './ScrollVertical';
+import SearchIcon from './Search';
+
+export { 
+	MenuIcon,
+	ControllerIcon,
+	PrevIcon,
+	NextIcon,
+	BookCloseIcon,
+	BookOpenIcon,
+	BookmarkIcon,
+	BookmarkerIcon,
+	CloseIcon,
+	DownIcon,
+	LeftIcon,
+	ScrollHorizontalIcon,
+	ScrollVerticalIcon,
+	SearchIcon
+};
--- a/src/lib/svg/left.svg
+++ b/src/lib/svg/left.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><line class="cls-3" x1="4" y1="24" x2="18.5" y2="9.5"/><line class="cls-3" x1="18.5" y1="38.5" x2="4" y2="24"/><line class="cls-3" x1="44" y1="24" x2="4" y2="24"/></g></g></svg>
--- a/src/lib/svg/menu.svg
+++ b/src/lib/svg/menu.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2{fill:none;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><rect x="2" y="6" width="44" height="4" rx="2"/><rect x="2" y="22" width="44" height="4" rx="2"/><rect x="2" y="38" width="44" height="4" rx="2"/></g></g></svg>
--- a/src/lib/svg/next.svg
+++ b/src/lib/svg/next.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{opacity:0.3;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="44" height="44"/></g><line class="cls-3" x1="32" y1="22" x2="12" y2="2"/><line class="cls-3" x1="32" y1="22" x2="12" y2="42"/></g></g></svg>
--- a/src/lib/svg/prev.svg
+++ b/src/lib/svg/prev.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{opacity:0.3;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="44" height="44"/></g><line class="cls-3" x1="12" y1="22" x2="32" y2="2"/><line class="cls-3" x1="12" y1="22" x2="32" y2="42"/></g></g></svg>
--- a/src/lib/svg/scrollHorizontal.svg
+++ b/src/lib/svg/scrollHorizontal.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><circle class="cls-3" cx="24" cy="24" r="5"/><line class="cls-3" x1="3" y1="24" x2="15" y2="12"/><line class="cls-3" x1="3" y1="24" x2="15" y2="36"/><line class="cls-3" x1="45" y1="24" x2="33" y2="12"/><line class="cls-3" x1="45" y1="24" x2="33" y2="36"/></g></g></svg>
--- a/src/lib/svg/scrollVertical.svg
+++ b/src/lib/svg/scrollVertical.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><circle class="cls-3" cx="24" cy="24" r="5"/><line class="cls-3" x1="24" y1="3" x2="36" y2="15"/><line class="cls-3" x1="24" y1="3" x2="12" y2="15"/><line class="cls-3" x1="24" y1="45" x2="36" y2="33"/><line class="cls-3" x1="24" y1="45" x2="12" y2="33"/></g></g></svg>
--- a/src/lib/svg/search.svg
+++ b/src/lib/svg/search.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><circle class="cls-3" cx="17" cy="17" r="14"/><line class="cls-3" x1="44" y1="44" x2="27" y2="27"/></g></g></svg>
--- a/src/lib/utils/commonUtil.ts
+++ b/src/lib/utils/commonUtil.ts
@ -0,0 +1,201 @@
+import { EpubCFI } from 'epubjs'
+// types
+import { BookStyle, BookFlow } from 'types/book'
+
+
+/**
+ * DateTime to `yyyy-mm-dd`
+ * @param {Date} time 
+ */
+ export const timeFormatter = (time: Date): string => {
+	const yyyy = time.getFullYear();
+	const mm = time.getMonth() + 1;
+	const dd = time.getDate();
+	const msg = `${yyyy}-${mm}-${dd}`;
+
+	return msg;
+}
+
+
+/**
+ * Comparison of two CFI sizes
+ * - -1 : CFI 1 < CFI 2
+ * - 0 : CFI 1 == CFI 2
+ * - 1 : CFI 1 > CFI 2
+ * @param cfi_1 CFI 1
+ * @param cfi_2 CFI 2
+ */
+export const compareCfi = (cfi_1: string, cfi_2: string): number => {
+	const epubcfi = new EpubCFI();
+	return epubcfi.compare(cfi_1, cfi_2);
+};
+
+
+/**
+ * Split CFI range into two starting CFI and ending CFI
+ * - null : Invalid CFIRange
+ * @param cfiRange CFIRange
+ */
+export const cfiRangeSpliter = (cfiRange: string) => {
+	const content = cfiRange.slice(8, -1);
+	const [origin, start, end] = content.split(',');
+
+	if (!origin || !start || !end) return null;
+
+	const startCfi = `epubcfi(${origin + start})`;
+	const endCfi = `epubcfi(${origin + end})`;
+	return { startCfi, endCfi }
+}
+
+
+/**
+ * Whether the two CFI ranges nested
+ * - true : Nested
+ * - false : Not nested
+ * - null : Invalid CFIRange
+ * @param cfiRange1 First CFIRange
+ * @param cfiRange2 Second CFIRange
+ */
+export const clashCfiRange = (baseCfiRange: string, targetCfiRange: string) => {
+	const splitCfi1 = cfiRangeSpliter(baseCfiRange);
+	const splitCfi2 = cfiRangeSpliter(targetCfiRange);
+
+	if (!splitCfi1 || !splitCfi2) return null;
+
+	const { startCfi: s1, endCfi: e1 } = splitCfi1;
+	const { startCfi: s2, endCfi: e2 } = splitCfi2;
+
+	if ((compareCfi(s2, s1) <= 0 && compareCfi(s1, e2) <= 0)
+		||(compareCfi(s2, e1) <= 0 && compareCfi(e1, e2) <= 0)
+		||(compareCfi(s1, s2) <= 0 && compareCfi(e2, e1) <= 0)) {
+		return true;
+	}
+	return false;
+}
+
+
+/**
+ * Extract paragraph CFI from CFIRange
+ * - null : Invalid CFIRange
+ * @param cfiRange CFIRange
+ */
+export const getParagraphCfi = (cfiRange: string) => {
+	if (!cfiRange) return;
+
+	const content = cfiRange.slice(8, -1);
+	const [origin, start, end] = content.split(',');
+	
+	if (!origin || !start || !end) return null;
+
+	const cfi = `epubcfi(${origin})`;
+	return cfi;
+}
+
+
+/**
+ * Get specific DOM Element from CFI
+ * - **※ Warning**: Other Iframe must not exist in the Reader page!
+ * @param cfi CFI
+ * @returns HTML Element or Null
+ */
+export const getNodefromCfi = (cfi: string): HTMLElement | null => {
+	const epubcfi = cfi.slice(8, -1);
+
+	/* Remove Id */
+	const pureCfi = epubcfi.replace(/\[.*?\]/gi, '');
+
+	/* Only CFI Base */
+	const splitCfi = pureCfi.split('!');
+	if (splitCfi.length < 1 || splitCfi[1] === "") {
+		return null;
+	}
+
+	/* Remove Body tag CFI */
+	const cfiPath: number[] = splitCfi[1].split('/')
+																			 .slice(2)
+																			 .map(x => Number(x));
+
+	const iframe = document.querySelector('iframe');
+	if (!iframe) return null;
+	
+	const iframeBody = iframe.contentWindow && iframe.contentWindow.document.body;
+	if (!iframeBody) return null;
+
+	let component: HTMLElement | null = iframeBody;
+
+	/* Find Node based on CFI */
+	for (let idx of cfiPath) {
+		const childNodes: any = component && component.childNodes;
+
+		/* Bookmark / Highlight filtering.. */
+		const filtered = ([...childNodes].filter(n => !n.dataset 
+																									|| !n.dataset.bookmark
+																									|| !n.dataset.highlight ));
+		component = filtered[idx - 1];
+
+		if (!component) {
+			component = null;
+			break;
+		}
+	}
+
+	return component;
+}
+
+
+/**
+ * Selection absolute location
+ * @param viewer viewerRef.current
+ * @param bookStyle bookStyle
+ * @param bookFlow book-flow
+ * @param MIN_VIEWER_WIDTH min viewer width
+ * @param MIN_VIEWER_HEIGHT min viewer height
+ * @param VIEWER_HEADER_HEIGHT viewer header height
+ * @param CONTEXTMENU_WIDTH contextmenu width
+ * @returns Contextmenu location
+ */
+export const getSelectionPosition = (
+	viewer: any,
+	bookStyle: BookStyle,
+	bookFlow: BookFlow,
+	MIN_VIEWER_WIDTH: number,
+	MIN_VIEWER_HEIGHT: number,
+	VIEWER_HEADER_HEIGHT: number,
+	CONTEXTMENU_WIDTH: number
+): { x: number, y: number, height: number, width: number } | null => {
+	const { 
+		innerWidth: windowWidth,
+		innerHeight: windowHeight 
+	} = window;
+
+	const iframeWidth = viewer.offsetWidth;
+
+	const scrollTop = viewer.querySelector('div').scrollTop;
+
+	const iframe = viewer.querySelector('iframe');
+	const selection_ = iframe && iframe.contentWindow && iframe.contentWindow.getSelection();
+	if (!selection_ || selection_.rangeCount === 0) return null;
+
+	const range = selection_.getRangeAt(0);
+	const {
+		x: selectionX,
+		y: selectionY,
+		height: selectionHeight,
+		width: selectionWidth
+	} = range.getBoundingClientRect();
+
+	const marginLeft = ~~((windowWidth - MIN_VIEWER_WIDTH) / 100 * bookStyle.marginHorizontal / 2);
+	const marginTop = bookFlow === "scrolled-doc"
+		? 0
+		: ~~((windowHeight - VIEWER_HEADER_HEIGHT - MIN_VIEWER_HEIGHT) / 100 * bookStyle.marginVertical / 2);
+
+	const x = ~~(selectionX % iframeWidth + marginLeft + ( selectionWidth / 2 - CONTEXTMENU_WIDTH / 2));
+	const y = ~~(selectionY + selectionHeight + VIEWER_HEADER_HEIGHT + marginTop - scrollTop);
+
+	return { 
+		x, 
+		y, 
+		height: selectionHeight, 
+		width: selectionWidth 
+	};
+}
--- a/src/modules/epubViewer/EpubViewer.tsx
+++ b/src/modules/epubViewer/EpubViewer.tsx
@ -0,0 +1,287 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { Book, Rendition } from "epubjs";
+// style
+import EpubViewerWrapper from 'modules/epubViewer/style'
+// types
+import { EpubViewerProps } from 'types'
+import Toc from 'types/toc'
+import Loc from 'types/loc'
+
+
+/**
+ * EpubViewer Module
+ * @class
+ * @param props
+ * @param props.url Epub path
+ * @param props.epubFileOptions Epub file option
+ * @param props.epubOptions Epub viewer option
+ * @param props.style Epub Wrapper style
+ * @param props.location Epub CFI or href
+ * @param props.bookChanged Run when book changed
+ * @param props.rendtionChanged Run when rendition changed
+ * @param props.pageChanged Run when page changed
+ * @param props.tocChanged Run when toc changed
+ * @param props.selectionChanged Run when selected
+ * @param props.loadingView Loading Component
+ * @param ref Viewer ref
+ */
+const EpubViewer = ({
+  url, 
+  epubFileOptions, 
+  epubOptions,
+  style,
+  location,
+  bookChanged,
+  rendtionChanged,
+  pageChanged,
+  tocChanged,
+  selectionChanged,
+  loadingView,
+}: EpubViewerProps, ref: any) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const [book, setBook] = useState<Book | null>(null);
+
+  const [rendition, setRendition] = useState<Rendition | null>(null);
+
+  const [toc, setToc] = useState<Toc[]>([]);
+
+  const currentCfi = useRef<string>('');
+
+  
+
+  /**
+   * Init Book
+   * @method
+   * - Set book state
+   * - Set Epub path state
+   * - Set isLoaded state
+   * - Set toc state
+   */
+  const initBook = () => {
+    if (book) {
+      book.destroy();
+    }
+    
+    const book_ = new Book(url, epubFileOptions);
+    setBook(book_);
+
+    bookChanged && bookChanged(book_);
+
+    book_.loaded.navigation.then(({ toc }) => {
+      const toc_: Toc[] = toc.map(t => ({ 
+        label: t.label, 
+        href: t.href 
+      }));
+      
+      setIsLoaded(true);
+      setToc(toc_);
+      tocChanged && tocChanged(toc_);
+      initRendition(book_);
+    });
+
+    // Init Location & Pagination
+    book_.ready.then(function() {
+      const stored = localStorage.getItem(book_.key() + '-locations');
+      if (stored) {
+          return book_.locations.load(stored);
+      } else {
+          return book_.locations.generate(1024);
+      }
+    }).then(() => {
+      localStorage.setItem(book_.key() + '-locations', book_.locations.save());
+    });
+  };
+
+  /**
+   * Init Rendition
+   * @method
+   * - Init iframe tag on DOM element
+   * - Set rendition
+   * - Set start page
+   */
+  const initRendition = (book_: Book) => {
+    const node = ref.current;
+    if (!node || !book_) return;
+    
+    const rendition_ = book_.renderTo(node, {
+      width: "100%",
+      height: "100%",
+      ...epubOptions
+    });
+    setRendition(rendition_);
+    
+    rendtionChanged && rendtionChanged(rendition_);
+
+    if(typeof location === "string") {
+      rendition_.display(location);
+    } else if(toc.length > 0 && toc[0].href) {
+      rendition_.display(toc[0].href);
+    } else {
+      rendition_.display();
+    }
+  }
+
+  /**
+   * Move page
+   * @method
+   * @param type direction
+   */
+  const movePage = useCallback((type: "PREV" | "NEXT") => {
+    if (!rendition) return;
+    if (type === "PREV") rendition.prev();
+    else rendition.next();
+  }, [rendition]);
+
+  /**
+   * Move page by arrow key
+   * @method
+   * @param props Keyboard Event
+   * @param props.key 
+   */
+  const handleKeyPress = useCallback(({ key }: any) => {
+    key && key === "ArrowLeft" && movePage("PREV");
+    key && key === "ArrowRight" && movePage("NEXT");
+  }, [movePage]);
+
+  /**
+   * Run when location changed
+   * @method
+   * @param loc
+   * - Set location state
+   * - Run 'locationChanged()' through startCFI
+   */
+  const onLocationChange = useCallback((loc: Loc) => {
+    const startCfi = loc && loc.start;
+    const endCfi = loc && loc.end;
+    const base = loc && loc.start.slice(8).split('!')[0];
+
+    if (!book) return;
+
+    const spineItem = book.spine.get(startCfi);
+    const navItem = book.navigation.get(spineItem.href);
+    const chapterName = navItem && navItem.label.trim();
+
+    const locations: any = book.locations;
+    const currentPage = locations.locationFromCfi(startCfi);
+    const totalPage = locations.total;
+
+    pageChanged && pageChanged({
+      chapterName, 
+      currentPage, 
+      totalPage, 
+      startCfi, 
+      endCfi,
+      base
+    });
+
+    currentCfi.current = startCfi;
+  }, [book, pageChanged]);
+
+  /**
+   * Highlight function
+   * @param cfiRange Selecton CFIRange
+   * @param color Highlight color
+   * @param callback Highlight callback function when click it
+   */
+   const onHighlight = useCallback((
+    cfiRange: string, 
+    callback: (e: any) => void,
+    color?: string
+  ) => {
+    if (!rendition) return;
+
+    rendition.annotations.remove(cfiRange, 'highlight');
+    rendition.annotations.highlight(
+      cfiRange, 
+      {}, 
+      callback, 
+      "epub-highlight",
+      { 'fill': color || '#fdf183' }
+    );
+  }, [rendition]);
+
+  /**
+   * Register viewer control function
+   * @method
+   * - REF.CURRENT.prevPage() : Move prev page
+   * - REF.CURRENT.nextPage() : Move next page
+   * - REF.CURRENT.getCurrentCfi() : Get current CFI
+   * - REF.CURRENT.onHighlight(): Set highlight
+   * - REF.CURRENT.offHighlight(): Remove specific highliht
+   * - REF.CURRENT.seLocation(): Move to specific cfi or href
+   */
+  const registerGlobalFunc = useCallback(() => {
+    if (!ref.current) return;
+    if (movePage) {
+      ref.current.prevPage = () => movePage("PREV");
+      ref.current.nextPage = () => movePage("NEXT");
+    }
+    ref.current.getCurrentCfi = () => currentCfi.current;
+    if (onHighlight) {
+      ref.current.onHighlight = onHighlight;
+    }
+    if (rendition) {
+      ref.current.offHighlight = (cfiRange: string) => rendition.annotations.remove(cfiRange, 'highlight');
+      ref.current.setLocation = (location: string) => rendition.display(location);
+    }
+  }, [ref, rendition, movePage, onHighlight]);
+
+
+
+  /** Epub Init */
+  /* eslint-disable */
+  useEffect(() => {
+    if (!url) return;
+
+    initBook();
+  }, [url]);
+  /* eslint-enable */
+
+  /** 
+   * Emit Viewer Event
+   * - Register move event
+   * - Register location changed event
+   * - Register selection event
+   */
+  /* eslint-disable */
+  useEffect(() => {
+    if (!rendition) return;
+
+    // Emit global control function
+    registerGlobalFunc();
+
+    document.addEventListener('keyup', handleKeyPress, false);
+    rendition.on("keyup", handleKeyPress);
+    rendition.on("locationChanged", onLocationChange);
+    selectionChanged && rendition.on('selected', selectionChanged);
+
+    return (() => {
+      document.removeEventListener('keyup', handleKeyPress, false);
+      rendition.off("keyup", handleKeyPress);
+      rendition.off("locationChanged", onLocationChange);
+      selectionChanged && rendition.off('selected', selectionChanged);
+    });
+  }, [
+    rendition,
+    registerGlobalFunc,
+    handleKeyPress
+  ]);
+  /* eslint-enable */
+
+  /** Display page by changed location */
+  useEffect(() => {
+    if (!location || !rendition) return;
+
+    rendition.display(location);
+  }, [location, rendition]);
+
+
+  
+  return (<>
+    {!isLoaded && loadingView}
+    <EpubViewerWrapper ref={ref} style={style} />
+  </>);
+}
+
+export default React.forwardRef(EpubViewer)
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><path class="cls-3" d="M37.12,3H10.88a3,3,0,0,0-.43,0h0A1.71,1.71,0,0,0,9.1,4.11,1.87,1.87,0,0,0,9,4.7V33.88c0,1,0,.94,1.88,1.88l18,9a1.8,1.8,0,0,0,2.6-1.2,3,3,0,0,0,0-.31V35.67h5.62A1.88,1.88,0,0,0,39,33.8V4.87A1.88,1.88,0,0,0,37.12,3Z"/><path class="cls-3" d="M31.5,35.67V14.84a2,2,0,0,0-1.1-1.78L10.45,3"/></g></g></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{opacity:0.2;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="레이어_2" data-name="레이어 2"><g id="레이어_1-2" data-name="레이어 1"><g class="cls-1"><rect class="cls-2" width="48" height="48"/></g><line class="cls-3" x1="4" y1="4" x2="44" y2="44"/><line class="cls-3" x1="4" y1="44" x2="44" y2="4"/></g></g></svg>`