Add Logo

src/components/header/Logo.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+// lib
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+
+const Logo = () => {
+	return (
+		<Wrapper href="https://github.com/altmshfkgudtjr/react-epub-viewer" target="__blank__">
+			<Img src="react-epub-viewer/images/reactEpubIcon.png" alt="Logo" />
+		</Wrapper>
+	);
+} 
+
+const Wrapper = styled.a`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	margin-left: 16px;
+	background-color: rgba(0,0,0,0);
+	transition: .3s ${styles.transition};
+	border-radius: 8px;
+	padding: 4px 8px;
+	cursor: pointer;
+
+	&:focus, &:hover {
+		background-color: ${palette.blue1};
+	}
+`;
+
+const Img = styled.img`
+	height: 32px;
+`;
+
+export default Logo

src/containers/Header.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 // components
 import Wrapper from 'components/header/Wrapper'
 import Layout, { AutoLayout } from 'components/header/Layout'
+import Logo from 'components/header/Logo'
 import ControlBtn from 'components/header/ControlBtn'
 import ControlIconBtn from 'components/header/ControlIconBtn'
 import VerticalLine from 'components/header/VerticalLine'
@@ -72,6 +73,7 @@ const Header = ({
       <Layout>
         <AutoLayout>
           <div>
+            <Logo />
             <ControlBtn message="Contents" onClick={onNavToggle} />
             <ControlBtn message="Setting" onClick={onOptionToggle} />
             <ControlBtn message="Highlights" onClick={onLearningToggle} />

src/index.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom';
 import Reader from 'containers/Reader'
 
-const EPUB_URL = "files/Alices Adventures in Wonderland.epub";
+const EPUB_URL = "react-epub-viewer/files/Alices Adventures in Wonderland.epub";
 
 ReactDOM.render(<Reader url={EPUB_URL} />,  document.getElementById('root'));