feat(blog): ios blur 효과 수정 및 모바일 touch ux 개선 #35

packages/blog/components/Header/Header.styled.tsx

@@ -31,13 +31,28 @@ const Styled = {
   `,
   flexContainer: styled(motion.div)`
     display: flex;
-    gap: 8px;
     align-items: center;
+    & > * {
+      margin-right: 8px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
   `,
   anchor: styled(motion.a)`
     display: flex;
-    gap: 4px;
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > * {
+      margin-right: 4px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
+
     align-items: center;
+    margin: -8px;
+    padding: 8px;
 
     color: inherit;
     text-decoration: inherit;
@@ -68,8 +83,10 @@ const Styled = {
     }
   `,
   iconButtonWrapper: styled(motion.button)`
-    width: 24px;
-    height: 24px;
+    width: calc(24px + 8px * 2);
+    height: calc(24px + 8px * 2);
+    margin: -8px;
+    padding: 8px;
   `,
   search: styled(SearchIcon)`
     width: 100%;
@@ -86,9 +103,14 @@ const Styled = {
   `,
   linkContainer: styled(motion.div)`
     display: flex;
-    gap: 18px;
-
-    margin-right: 12px;
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > * {
+      margin-right: 8px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
+    margin-right: 16px;
 
     @media screen and (max-width: ${({ theme }) => theme.breakpoint.md}) {
       display: none;

packages/blog/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { LayoutGroup, Variant, AnimatePresence } from 'framer-motion'
 import Styled from './Header.styled'
 import Link from 'next/link'
@@ -34,13 +34,12 @@ export type Link = {
   url: string
 }
 
-export type HeaderProps = {}
+export type HeaderProps = { isHome?: boolean | any }
 
-export default function Header({}: HeaderProps): JSX.Element {
+export default function Header({ isHome }: HeaderProps): JSX.Element {
+  isHome = typeof isHome !== 'undefined'
   const router = useRouter()
-  const [pathname, setPathname] = useState(router.pathname)
-  const isHome = pathname === '/'
-  const [isShowHero, setIsShowHero] = useState(false)
+  const [isShowHero, setIsShowHero] = useState(isHome)
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
 
   const hoverAnimation: Variant = {
@@ -50,13 +49,8 @@ export default function Header({}: HeaderProps): JSX.Element {
     },
   }
 
-  useEffect(() => {
-    setPathname(router.pathname)
-    setIsShowHero(false)
-  }, [router.pathname])
-
   return (
-    <LayoutGroup id={pathname}>
+    <LayoutGroup>
       <Styled.rootContainer
         initial={[isShowHero ? 'hero' : 'header']}
         animate={[isShowHero ? 'hero' : 'header']}

packages/blog/components/Header/Hero/Hero.styled.tsx

@@ -6,7 +6,13 @@ const Styled = {
   container: styled(motion.div)`
     display: flex;
     flex-direction: row;
-    gap: 24px;
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > * {
+      margin-right: 24px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
     align-items: flex-start;
     width: 100%;
     max-width: ${({ theme }) => theme.breakpoint.xl};
@@ -38,7 +44,13 @@ const Styled = {
   infoContainer: styled(motion.div)`
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > * {
+      margin-right: 16px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
     align-items: flex-start;
 
     margin-top: 8px;

packages/blog/components/Header/Sidebar/Sidebar.styled.ts

@@ -19,7 +19,13 @@ const Styled = {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    gap: 16px;
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > * {
+      margin-right: 16px;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
 
     width: 80%;
     max-width: 480px;

packages/blog/components/Header/Sidebar/Sidebar.tsx

@@ -33,14 +33,17 @@ export default function SideBar({ links, onClose }: SidebarProps): JSX.Element {
           initial: {
             background: 'rgba(0, 0, 0, 0)',
             backdropFilter: 'blur(0px)',
+            WebkitBackdropFilter: 'blur(0px)',
           },
           enter: {
             background: 'rgba(0, 0, 0, 0.08)',
             backdropFilter: 'blur(2px)',
+            WebkitBackdropFilter: 'blur(2px)',
           },
           exit: {
             background: 'rgba(0, 0, 0, 0)',
             backdropFilter: 'blur(0px)',
+            WebkitBackdropFilter: 'blur(0px)',
             transition: {
               delay: 0.5,
             },
@@ -56,12 +59,10 @@ export default function SideBar({ links, onClose }: SidebarProps): JSX.Element {
             enter: {
               x: 0,
               opacity: 1,
-              transition: { type: 'tween', delayChildren: 0.2 },
             },
             exit: {
               x: -300,
               opacity: 0,
-              transition: { type: 'tween', delay: 0.5 },
             },
           }}
         >
@@ -71,22 +72,13 @@ export default function SideBar({ links, onClose }: SidebarProps): JSX.Element {
                 <Styled.link
                   variants={{
                     initial: {
-                      y: 50,
                       opacity: 0,
                     },
                     enter: {
-                      y: 0,
                       opacity: 1,
-                      transition: {
-                        y: { stiffness: 1000, velocity: -100 },
-                      },
                     },
                     exit: {
-                      y: 50,
                       opacity: 0,
-                      transition: {
-                        y: { stiffness: 1000, velocity: -100 },
-                      },
                     },
                   }}
                 >
@@ -95,6 +87,13 @@ export default function SideBar({ links, onClose }: SidebarProps): JSX.Element {
               </Link>
             </div>
           ))}
+          {links.map((link, i) => (
+            <div key={i}>
+              <Link href={link.url} passHref>
+                <Styled.link>{link.name}</Styled.link>
+              </Link>
+            </div>
+          ))}
         </Styled.menu>
         <Styled.outside onTap={onClose} />
       </Styled.container>

packages/blog/pages/_app.tsx

@@ -3,14 +3,12 @@ import GlobalStyle from '../styles/glolbal-style'
 import { theme } from '../styles/theme'
 import { ThemeProvider } from 'styled-components'
 import 'katex/dist/katex.min.css'
-import Header from '../components/Header'
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
-        <Header />
         <Component {...pageProps} />
       </ThemeProvider>
     </>

packages/blog/pages/index.tsx

@@ -1,5 +1,6 @@
 import type { GetStaticPropsContext, InferGetStaticPropsType, NextPage } from 'next'
 import Link from 'next/link'
+import Header from '../components/Header'
 import { getAllPosts } from '../libs/post-api'
 
 export const getStaticProps = (ctx: GetStaticPropsContext) => {
@@ -20,7 +21,7 @@ export const getStaticProps = (ctx: GetStaticPropsContext) => {
 const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ posts }) => {
   return (
     <div>
-      <h1>craft-blog-starter</h1>
+      <Header isHome />
       {posts.map((post) => (
         <Link key={post.id} href={`/posts/${post.id}`}>
           <a

packages/blog/pages/posts/[slug].tsx

@@ -1,6 +1,7 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps, NextPage } from 'next'
 import { CraftPage } from 'react-craft-x'
 import styled from 'styled-components'
+import Header from '../../components/Header'
 import { getAllPosts } from '../../libs/post-api'
 import { CraftBlogPage } from '../../types/CraftBlogPage'
 
@@ -50,7 +51,12 @@ const PostPage: NextPage<{
     margin-right: auto;
   `
 
-  return <StyledCraftPage rootBlock={page.rootBlock} />
+  return (
+    <>
+      <Header />
+      <StyledCraftPage rootBlock={page.rootBlock} />
+    </>
+  )
 }
 
 export default PostPage