feat(blog): 헤더 컴포넌트 추가#35

CraBft · Apr 21, 2022 · 56123ac · 56123ac
1 parent 9fadf9f
commit 56123ac
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   )