From 56123aca7d69092c0346ee17c2aaf0fcab42050e Mon Sep 17 00:00:00 2001
From: JaeSeoKim <devjaeseo@gmail.com>
Date: Thu, 21 Apr 2022 16:30:39 +0900
Subject: [PATCH] =?UTF-8?q?feat(blog):=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80#35?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../blog/components/Header/Header.styled.tsx  | 21 ++++++++++--
 packages/blog/components/Header/Header.tsx    | 34 ++++++++++++++++---
 .../components/Header/Hero/Hero.styled.tsx    |  2 +-
 packages/blog/components/Header/Hero/Hero.tsx |  6 ++--
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/packages/blog/components/Header/Header.styled.tsx b/packages/blog/components/Header/Header.styled.tsx
index a971da1..d25e4f0 100644
--- a/packages/blog/components/Header/Header.styled.tsx
+++ b/packages/blog/components/Header/Header.styled.tsx
@@ -1,9 +1,10 @@
 import { motion } from 'framer-motion'
 import styled, { css } from 'styled-components'
 import { breakPoint } from '../../styles/theme'
+import { BiSearch, BiMenu } from 'react-icons/bi'
 
 export const mediaPadding = css`
-  padding: 16px 32px;
+  padding: 16px 16px;
 `
 
 const Styled = {
@@ -44,7 +45,7 @@ const Styled = {
     color: inherit;
     text-decoration: inherit;
   `,
-  icon: styled(motion.img)`
+  blogImage: styled(motion.img)`
     border-radius: 50%;
     width: 32px;
     height: 32px;
@@ -60,12 +61,26 @@ const Styled = {
     margin-bottom: auto;
     font-weight: 600;
   `,
-  menu: styled(motion.div)`
+  menuContainer: styled(motion.div)`
     display: none;
     @media screen and (max-width: ${breakPoint.md}px) {
       display: flex;
     }
   `,
+  iconButtonWrapper: styled(motion.button)`
+    width: 24px;
+    height: 24px;
+  `,
+  search: styled(BiSearch)`
+    width: 100%;
+    height: 100%;
+    fill: ${({ theme }) => theme.color.black};
+  `,
+  menu: styled(BiMenu)`
+    width: 100%;
+    height: 100%;
+    fill: ${({ theme }) => theme.color.black};
+  `,
 }
 
 export default Styled
diff --git a/packages/blog/components/Header/Header.tsx b/packages/blog/components/Header/Header.tsx
index 33261b3..8920121 100644
--- a/packages/blog/components/Header/Header.tsx
+++ b/packages/blog/components/Header/Header.tsx
@@ -11,7 +11,7 @@ const image = {
 }
 
 const title = 'JaeSeoKim'
-const subtitle = '🎢 To become a better developer...!'
+const description = '🎢 To become a better developer...!'
 
 export type HeaderProps = {}
 
@@ -51,25 +51,49 @@ const Header: React.FC<HeaderProps> = ({}) => {
           }}
         >
           <Styled.wrapContainer>
-            <Styled.menu>menu</Styled.menu>
+            <Styled.menuContainer>
+              <Styled.iconButtonWrapper
+                whileHover={{
+                  scale: 1.2,
+                  transition: {
+                    scale: { type: 'spring', duration: 0.5 },
+                  },
+                }}
+                aria-label="menu button"
+              >
+                <Styled.menu />
+              </Styled.iconButtonWrapper>
+            </Styled.menuContainer>
             <Styled.flexContainer>
               {!isShowHero && (
                 <Link href={'/'} passHref>
                   <Styled.anchor>
-                    <Styled.icon layoutId={`${router.pathname}-image`} src={image.src} alt={image.alt} />
+                    <Styled.blogImage layoutId={`${router.pathname}-image`} src={image.src} alt={image.alt} />
                     <Styled.title layoutId={`${router.pathname}-title`}>{title}</Styled.title>
                   </Styled.anchor>
                 </Link>
               )}
             </Styled.flexContainer>
-            <Styled.flexContainer>right</Styled.flexContainer>
+            <Styled.flexContainer>
+              <Styled.iconButtonWrapper
+                whileHover={{
+                  scale: 1.2,
+                  transition: {
+                    scale: { type: 'spring', duration: 0.5 },
+                  },
+                }}
+                aria-label="search button"
+              >
+                <Styled.search />
+              </Styled.iconButtonWrapper>
+            </Styled.flexContainer>
           </Styled.wrapContainer>
         </Styled.rootContainer>
         {isHome && (
           <Hero
             image={image}
             title={title}
-            subtitle={subtitle}
+            description={description}
             onViewportEnter={() => {
               setIsShowHero(true)
             }}
diff --git a/packages/blog/components/Header/Hero/Hero.styled.tsx b/packages/blog/components/Header/Hero/Hero.styled.tsx
index b2f2cda..ee19783 100644
--- a/packages/blog/components/Header/Hero/Hero.styled.tsx
+++ b/packages/blog/components/Header/Hero/Hero.styled.tsx
@@ -62,7 +62,7 @@ const Styled = {
       font-size: 24px;
     }
   `,
-  subtitle: styled(motion.h2)`
+  description: styled(motion.p)`
     font-size: 16px;
     font-weight: normal;
     line-height: 1.2;
diff --git a/packages/blog/components/Header/Hero/Hero.tsx b/packages/blog/components/Header/Hero/Hero.tsx
index 76f4b09..992b2a4 100644
--- a/packages/blog/components/Header/Hero/Hero.tsx
+++ b/packages/blog/components/Header/Hero/Hero.tsx
@@ -5,7 +5,7 @@ import Styled from './Hero.styled'
 
 export type HeroProps = {
   title: string
-  subtitle: string
+  description: string
   image: {
     src: string
     alt: string
@@ -15,13 +15,13 @@ export type HeroProps = {
   pathname: string
 }
 
-const Hero: React.FC<HeroProps> = ({ image, title, subtitle, onViewportEnter, onViewportLeave, pathname }) => {
+const Hero: React.FC<HeroProps> = ({ image, title, description, onViewportEnter, onViewportLeave, pathname }) => {
   return (
     <Styled.container onViewportEnter={onViewportEnter} onViewportLeave={onViewportLeave}>
       <Styled.image layoutId={`${pathname}-image`} {...image} />
       <Styled.infoContainer>
         <Styled.title layoutId={`${pathname}-title`}>{title}</Styled.title>
-        <Styled.subtitle>{subtitle}</Styled.subtitle>
+        <Styled.description>{description}</Styled.description>
       </Styled.infoContainer>
     </Styled.container>
   )