SearchForm, Menu, Header컴포넌트 마이그레이션, 404일때 url 주소 변경

package.json

@@ -14,15 +14,16 @@
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@svgr/webpack": "^5.5.0",
     "@reduxjs/toolkit": "^1.8.0",
+    "@svgr/webpack": "^5.5.0",
     "@types/react-redux": "^7.1.23",
     "@types/yup": "^0.29.13",
     "emotion-normalize": "^11.0.1",
     "firebase": "^9.6.8",
     "formik": "^2.2.9",
     "next": "12.1.0",
     "next-redux-wrapper": "^7.0.5",
+    "polished": "^4.1.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",

src/components/Button/Button.types.ts

@@ -10,6 +10,8 @@ export interface StyledButtonProps {
   color: Color;
   style?: React.CSSProperties;
   className?: string;
+  onClick?: () => void;
+  title?: string;
 }
 
 export interface ButtonProps extends StyledButtonProps {
@@ -20,9 +22,10 @@ export interface ButtonProps extends StyledButtonProps {
 export interface StyledIconButtonProps {
   type: Type;
   ariaLabel: string;
-  circle: boolean;
+  circle?: boolean;
   color: Color;
   size: Size;
+  onClick?: () => void;
 }
 
 export interface IconButtonProps extends StyledIconButtonProps {

src/components/Header/Header.styled.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { IconButton } from 'components';
+
+const headerHeight = 70;
+
+export const StyledHeader = styled.header`
+  background-color: ${({ theme }) => theme.color.white};
+  box-shadow: 0 4px 10px rgba(0 0 0 / 10%);
+  padding: 0 10px 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: top 0.2s ease-in-out;
+  z-index: 10;
+
+  &.hide {
+    top: ${-1 * headerHeight}px;
+  }
+`;
+
+export const StyledDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1500px;
+  margin: 0 auto;
+  height: ${headerHeight}px;
+`;
+
+export const StyledIconButton = styled(IconButton)`
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  cursor: pointer;
+  box-shadow: 1px 4px 9px rgb(0 0 0 / 30%);
+`;

src/components/Header/Header.tsx

@@ -1,3 +1,102 @@
+import { SearchForm, Menu, Button, Logo } from 'components';
+import { useState, useEffect, useRef } from 'react';
+// import { useAuthLoading, useAuthUser } from '../../contexts/AuthContext';
+import lodash from 'lodash';
+import { createPortal } from 'react-dom';
+import { StyledHeader, StyledDiv, StyledIconButton } from './Header.styled';
+
 export const Header = (): JSX.Element => {
-  return <header>Header comes here</header>;
+  // const authLoading = useAuthLoading();
+  // const authUser = useAuthUser();
+  // const [showDialog, setShowDialog] = useState(false);
+
+  const [tempAuth, setTempAuth] = useState(false);
+  const [hideHeader, setHideHeader] = useState(false);
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const oldScrollTop = useRef(0);
+
+  /*
+  const handleOpenDialog = () => {
+    setShowDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setShowDialog(false);
+  };
+  */
+
+  const handleFocus = () => {
+    setHideHeader(false);
+  };
+
+  const handleBlur = () => {
+    setHideHeader(window.pageYOffset > 70);
+  };
+
+  const controlHeader = lodash.throttle(() => {
+    const currentScrollTop = window.pageYOffset;
+    setHideHeader(currentScrollTop > 70 && currentScrollTop > oldScrollTop.current);
+    oldScrollTop.current = currentScrollTop;
+  }, 300);
+
+  const controlScrollToTop = lodash.debounce(() => {
+    const currentScrollTop = window.pageYOffset;
+    setShowScrollToTop(currentScrollTop > 500);
+  }, 300);
+
+  useEffect(() => {
+    document.addEventListener('scroll', controlHeader);
+    document.addEventListener('scroll', controlScrollToTop);
+    return () => {
+      document.removeEventListener('scroll', controlHeader);
+      document.removeEventListener('scroll', controlScrollToTop);
+    };
+  }, []);
+
+  return (
+    <StyledHeader onFocus={handleFocus} onBlur={handleBlur}>
+      <StyledDiv>
+        <Logo />
+        <SearchForm />
+        {tempAuth ? (
+          <Menu />
+        ) : (
+          <>
+            <Button
+              type="button"
+              variant="transparent"
+              aria-haspopup="dialog"
+              aria-label="Open SignIn Dialog"
+              title="Open SignIn Dialog"
+              // onClick={handleOpenDialog}
+              color="black"
+            >
+              Sign In
+            </Button>
+            {/* <Auth isVisible={showDialog} onClose={handleClos /eDialog} /> */}
+          </>
+        )}
+        {showScrollToTop &&
+          createPortal(
+            <StyledIconButton
+              ariaLabel="Go to Top"
+              iconType="up"
+              type="button"
+              variant="filled"
+              color="primaryGreen"
+              size="large"
+              circle
+              onClick={() => {
+                window.scroll({
+                  top: 0,
+                  left: 0,
+                  behavior: 'smooth',
+                });
+              }}
+            />,
+            document.getElementById('__next')!,
+          )}
+      </StyledDiv>
+    </StyledHeader>
+  );
 };

src/components/Logo/Logo.styled.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { pxToRem, media } from 'utils';
-import { LogoIcon } from './LogoIcon';
+import LogoIcon from 'assets/icons/logo.svg';
 
 export const StyledA = styled.a`
   display: flex;

src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Menu } from './Menu';
+
+export default {
+  title: 'Menu',
+  component: Menu,
+} as ComponentMeta<typeof Menu>;
+
+const Template: ComponentStory<typeof Menu> = () => <Menu />;
+
+export const Default = Template.bind({});
+Default.decorators = [
+  (Story) => (
+    <div style={{ width: '300px', display: 'flex', justifyContent: 'center' }}>
+      <Story />
+    </div>
+  ),
+];

src/components/Menu/Menu.styled.tsx

@@ -0,0 +1,51 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { lighten } from 'polished';
+
+export const StyledNav = styled.nav`
+  position: relative;
+  width: fit-content;
+`;
+
+export const StyledUl = styled.ul`
+  position: absolute;
+  top: 60px;
+  right: 0;
+  background-color: ${({ theme }) => theme.color.menuBg};
+  color: white;
+  padding: 5px 0;
+  white-space: nowrap;
+  z-index: 10;
+
+  & ::before {
+    content: '';
+    position: absolute;
+    right: 20px;
+    top: -9px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 5px 10px 5px;
+    border-color: transparent transparent ${({ theme }) => theme.color.menuBg} transparent;
+  }
+`;
+
+export const StyledLi = styled.li`
+  text-align: center;
+
+  & > button,
+  & > a {
+    width: 100%;
+    display: block;
+    padding: 15px 25px;
+  }
+
+  & :hover {
+    ${({ theme }) => {
+      const menuBg = theme.color.menuBg;
+      return css`
+        background-color: ${lighten(0.2, menuBg)};
+      `;
+    }}
+  }
+`;

src/components/Menu/Menu.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import { StyledNav, StyledUl, StyledLi } from './Menu.styled';
+import { useRouter } from 'next/router';
+import { IconButton, Button } from 'components';
+import Link from 'next/link';
+import { logOut } from 'api/requestAuth';
+
+export const Menu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLElement, Element>) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsOpen(false);
+    }
+  };
+
+  const router = useRouter();
+
+  /*
+  TODO: 스토리북에서 next.js 설정 후 주석 해제
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setIsOpen(false);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, []);
+  */
+
+  return (
+    <StyledNav onBlur={handleBlur}>
+      <IconButton
+        type="button"
+        ariaLabel="User Menu"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        color="black"
+        size="large"
+        variant="transparent"
+        iconType="user"
+        onClick={handleClick}
+      />
+      {isOpen && (
+        <StyledUl>
+          <StyledLi>
+            <Link href="/my-recipes">My Recipes</Link>
+          </StyledLi>
+          <StyledLi>
+            <Button type="button" variant="transparent" color="white" onClick={logOut}>
+              Sign Out
+            </Button>
+          </StyledLi>
+        </StyledUl>
+      )}
+    </StyledNav>
+  );
+};

src/components/SearchForm/SearchForm.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { SearchForm } from './SearchForm';
+
+export default {
+  title: 'SearchForm',
+  component: SearchForm,
+} as ComponentMeta<typeof SearchForm>;
+
+const Template: ComponentStory<typeof SearchForm> = () => <SearchForm />;
+
+export const Default = Template.bind({});

src/components/SearchForm/SearchForm.styled.tsx

@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+import { media } from 'utils';
+import { IconButton } from 'components';
+
+export const StyledForm = styled.form`
+  position: relative;
+  width: fit-content;
+`;
+
+export const StyledInput = styled.input`
+  width: 40vw;
+  background: ${({ theme }) => theme.color.searchGray};
+  border: none;
+  border-radius: 30px;
+  padding: 10px 38px 10px 18px;
+  line-height: 1;
+
+  ${media.mobile} {
+    width: 50vw;
+  }
+`;
+
+export const StyledIconButton = styled(IconButton)`
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+`;