refactor: Header 컴포넌트 수정

login 페이지에 적용해 두었던 AppBar를 공통 컴포넌트로 분리함 - DefaultLayout.tsx 파일은 필요없을 것 같아 제거 - _app.tsx 에 Header컴포넌트 공통으로 적용 ref #38
nolmungshemung · Feb 9, 2022 · 7912866 · 7912866
1 parent 8686a45
commit 7912866
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 51 deletions.
diff --git a/components/layout/DefaultLayout.tsx b/components/layout/DefaultLayout.tsx
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -1,29 +1,59 @@
-import Link from 'next/link';
-import { Text, Button, AppBar, styled } from '@nolmungshemung/ui-kits';
+import { AppBar, Text, Button, Box, styled } from '@nolmungshemung/ui-kits';
+import Router from 'next/router';
 
-const StyledAppBar = styled(AppBar, {
-  gridArea: 'header',
-  display: 'flex',
-  alignItems: 'center',
-  borderBottom: 'solid 1px $gray',
-  ':nth-child(1)': {
-    marginLeft: '22.5rem',
-  },
-  ':nth-child(2)': {
-    marginLeft: '68.75rem',
-  },
+const HeaderButton = styled(Button, {
+  width: '5rem',
+  padding: '0 $sp-20',
+  height: '$height-md !important',
+  cursor: 'pointer',
+  marginRight: '$sp-12',
 });
 
-const Header = () => (
-  <StyledAppBar>
-    {/* passHref: href 속성을 Link의 children에게 전달 */}
-    <Link href="/main" passHref>
-      <Text>Writing Hub</Text>
-    </Link>
-    <Button outline="black" size="md">
-      로그인
-    </Button>
-  </StyledAppBar>
-);
+export function Header() {
+  const handleRouting = (path: string) => {
+    Router.push(path);
+  };
 
-export default Header;
+  return (
+    <AppBar
+      sticky={true}
+      css={{
+        paddingTop: '$sp-16',
+        justifyContent: 'space-around',
+        borderBottom: '1px solid $gray',
+        height: '4rem',
+      }}
+    >
+      <Text
+        weight="bold"
+        css={{
+          color: '#333333',
+          cursor: 'pointer',
+        }}
+        onClick={() => handleRouting('/')}
+      >
+        Writing Hub
+      </Text>
+      <Box>
+        {/* TODO: 로그인 세션에 따라서 다르게 처리하도록 수정 필요 */}
+        {/* <HeaderButton size="lg" color="white" outline="black">
+          필명등록
+        </HeaderButton>
+        <HeaderButton size="lg" color="white" outline="black">
+          로그아웃
+        </HeaderButton>
+        <HeaderButton size="lg" color="white" outline="black">
+          내피드
+        </HeaderButton> */}
+        <HeaderButton
+          size="lg"
+          color="white"
+          outline="black"
+          onClick={() => handleRouting('/login')}
+        >
+          로그인
+        </HeaderButton>
+      </Box>
+    </AppBar>
+  );
+}
diff --git a/components/layout/index.ts b/components/layout/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,6 +4,8 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { APP_STAGE } from '~/shared/constants/environments';
 import { globalCss } from '@nolmungshemung/ui-kits';
 import { reset } from 'stitches-reset';
+import { DefaultSeo } from 'next-seo';
+import { Header } from '~/components/layout';
 
 globalCss({
   ...reset,
@@ -33,12 +35,16 @@ queryClient.setDefaultOptions({
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Hydrate state={pageProps.dehydratedState}>
-        <Component {...pageProps} />
-        <ReactQueryDevtools initialIsOpen={false} />
-      </Hydrate>
-    </QueryClientProvider>
+    <>
+      <DefaultSeo />
+      <QueryClientProvider client={queryClient}>
+        <Hydrate state={pageProps.dehydratedState}>
+          <Header />
+          <Component {...pageProps} />
+          <ReactQueryDevtools initialIsOpen={false} />
+        </Hydrate>
+      </QueryClientProvider>
+    </>
   );
 }
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -7,6 +7,10 @@ export default class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
+          />
           <style
             id={'stitches'}
             dangerouslySetInnerHTML={{ __html: getCssText() }}