Demo page styles modified

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altmshfkgudtjr/react-epub-viewer",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "author": "NB",
   "description": "Epub viewer for React.js powered by Epub.js",
   "license": "MIT",

src/components/learning/highlight/Wrapper.tsx

@@ -5,7 +5,6 @@ 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;
@@ -14,9 +13,10 @@ const Wrapper = styled.button`
   cursor: pointer;
   outline: none;
   text-align: left;
+  border-bottom: 1px solid ${palette.gray1};
   
-  &:last-child {
+  &:nth-child(2) {
-    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
+    border-top: 1px solid ${palette.gray1};
   }
 
   & > div {

src/components/nav/NavItem.tsx

@@ -20,13 +20,14 @@ const Content = styled.button`
   align-items: center;
   cursor: pointer;
   background-color: ${palette.gray0};
+  outline: none;
   
   & > span {
     transition: .2s ${styles.transition};
     font-size: 14px;
   }
 
-  &:hover {
+  &:focus, &:hover {
     & > span {
       color: ${palette.blue3};
       margin-left: 12px;

src/components/option/DropdownItemWrapper.tsx

@@ -34,6 +34,10 @@ const Container = styled.div<{show: boolean}>`
     : 'translateY(-40px) scaleY(0);'
   };
   ${styles.scrollbar(6)}
+  ${({show}) => show
+    ? ''
+    : styles.noselect
+  };
 `;
 
 interface Props {

src/components/option/DropdownValue.tsx

@@ -30,7 +30,7 @@ const Container = styled.button<{isDropdown: boolean}>`
   background-color: ${palette.white};
   border: ${({isDropdown}) => isDropdown
     ? `2px solid ${palette.blue3}`
-    : `2px solid ${palette.gray2}`
+    : `2px solid ${palette.gray1}`
   };
   border-radius: ${({isDropdown}) => isDropdown
     ? "20px 20px 0 0"
@@ -48,7 +48,8 @@ const Container = styled.button<{isDropdown: boolean}>`
     border: 2px solid ${palette.blue3};
 
     & > div {
-      opacity: .8;
+      opacity: 1;
+      filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
     }
   }
 `;

src/components/option/SliderValue.tsx

@@ -74,6 +74,7 @@ const Slider = styled.input<{ active: boolean }>`
   border-radius: 6px;
   margin: 0;
   z-index: 2;
+  outline: none;
   
   &::-webkit-slider-thumb {
     appearance: none;
@@ -103,11 +104,16 @@ const Slider = styled.input<{ active: boolean }>`
     &:active {
       box-shadow: none;
       background-color: ${props => props.active
-        ? palette.blue0
+        ? palette.blue3
         : ''
       };
     }
   }
+
+  &:focus::-webkit-slider-thumb {
+    box-shadow: none;
+    background-color: ${palette.blue3};
+  }
 `;
 
 const Icon = styled.span`

src/components/sideMenu/CloseBtn.tsx

@@ -21,8 +21,9 @@ const Btn = styled.button`
   align-items: center;
   justify-content: center;
   transition: .1s ${styles.transition};
+  outline: none;
 
-  &:hover {
+  &:focus, &:hover {
     filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%);
   }
 `;

src/containers/Reader.tsx

@@ -67,6 +67,8 @@ const Reader = ({ url, loadingView }: Props) => {
 		onUpdateHighlight
 	} = useHighlight(viewerRef, setIsContextMenu, bookStyle, bookOption.flow);
 
+
+
 	/**
 	 * Change Epub book information
 	 * @param book Epub Book Info
@@ -130,6 +132,8 @@ const Reader = ({ url, loadingView }: Props) => {
 	/** ContextMenu off */
 	const onContextmMenuRemove = () => setIsContextMenu(false);
 
+	
+	
   return (<>
     <ViewerWrapper>
       <Header 

src/modules/reactViewer/ReactViewer.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react"
-import { Book, Rendition, Contents } from "epubjs";
+import { Book, Rendition, Contents } from "epubjs"
 import { debounce } from "throttle-debounce"
+// modules
+import EpubViewer from "modules/epubViewer/EpubViewer"
 // components
 import LoadingView from 'LoadingView'
-// modules
-import EpubViewer from "modules/epubViewer/EpubViewer";
 // utils
 import { timeFormatter } from 'lib/utils/commonUtil'
 // styles
@@ -95,7 +95,7 @@ const ReactViewer = ({
    * Viewer resizing function
    * @method
    */
-  const onResize = useCallback(() => {
+  const onResize = useCallback(debounce(250, () => {
     if (!rendition) return;
 
     const viewerLayout_ = viewerLayout || {
@@ -126,7 +126,7 @@ const ReactViewer = ({
     try {
       rendition.resize(w, h);
     } catch { }
-  }, [
+  }), [
     rendition,
     viewerLayout,
     bookStyle.marginHorizontal,
@@ -253,9 +253,8 @@ const ReactViewer = ({
 
   /** Emit screen resizing event */
   useEffect(() => {
-    // TODO debounce 해제 안되는 이슈 수정하기
+    window.addEventListener('resize', onResize);
-    window.addEventListener('resize', debounce(250, onResize));
+    return () => window.removeEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', debounce(250, onResize));
   }, [onResize]);
 
   /** Emit selection event */