refactor: 각 페이지 공통 헤더 적용

공통 헤더 적용 후 기존 페이지에 맞게끔 스타일을 조금씩 수정함 - 로그인 페이지에 적용되어있던 AppBar 제거 close #38
nolmungshemung · Feb 9, 2022 · 6c11790 · 6c11790
1 parent 7912866
commit 6c11790
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 80 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,7 @@ import type { AppProps } from 'next/app';
 import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { APP_STAGE } from '~/shared/constants/environments';
-import { globalCss } from '@nolmungshemung/ui-kits';
+import { globalCss, Box } from '@nolmungshemung/ui-kits';
 import { reset } from 'stitches-reset';
 import { DefaultSeo } from 'next-seo';
 import { Header } from '~/components/layout';
@@ -39,8 +39,10 @@ function MyApp({ Component, pageProps }: AppProps) {
       <DefaultSeo />
       <QueryClientProvider client={queryClient}>
         <Hydrate state={pageProps.dehydratedState}>
-          <Header />
-          <Component {...pageProps} />
+          <Box css={{ height: '100%' }}>
+            <Header />
+            <Component {...pageProps} />
+          </Box>
           <ReactQueryDevtools initialIsOpen={false} />
         </Hydrate>
       </QueryClientProvider>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -31,7 +31,7 @@ const SytledTopArea = styled(Box, {
 
 const StyledSearch = styled(Search, {
   width: '33.125rem',
-  marginTop: '5rem',
+  marginTop: '$sp-50',
 });
 
 const Main: NextPage = function () {

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 import { NextSeo } from 'next-seo';
-import { Box, AppBar, Text, Button, styled } from '@nolmungshemung/ui-kits';
+import { Box, Text, Button, styled } from '@nolmungshemung/ui-kits';
 
 const GuideText = styled(Text, {
   color: '$gray',
@@ -15,89 +15,57 @@ const Login: NextPage = function () {
         title="WritingHub: 로그인"
         description="라이팅허브 로그인 화면"
       />
-      <Box css={{ height: '100%' }}>
-        <AppBar
-          sticky={true}
-          css={{
-            paddingTop: '$sp-16',
-            justifyContent: 'space-around',
-            borderBottom: '1px solid $gray',
-          }}
-        >
-          <Text
-            weight="bold"
-            css={{
-              color: '#333333',
-            }}
-          >
-            Writing Hub
-          </Text>
+      <Box
+        css={{
+          height: 'calc(100% - $height-appbar)',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Box css={{ marginBottom: '8rem' }}>
+          <Text css={{ fontSize: '5rem' }}>WritingHub</Text>
+        </Box>
+        <Box css={{ marginBottom: '$sp-32' }}>
           <Button
             size="lg"
             color="white"
-            outline="black"
             css={{
-              paddingLeft: '$sp-20',
-              paddingRight: '$sp-20',
-              height: '$height-md',
+              paddingLeft: '14rem',
+              paddingRight: '14rem',
+              height: '$height-appbar',
               cursor: 'pointer',
+              borderRadius: '15px',
+              backgroundColor: '#F4DC01',
             }}
           >
-            로그인
+            <Text size="xl" css={{ fontWeight: '$bold' }}>
+              카카오톡 로그인
+            </Text>
           </Button>
-        </AppBar>
-        <Box
-          css={{
-            height: 'calc(100% - $height-appbar)',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Box css={{ marginBottom: '8rem' }}>
-            <Text css={{ fontSize: '5rem' }}>WritingHub</Text>
-          </Box>
-          <Box css={{ marginBottom: '$sp-32' }}>
-            <Button
-              size="lg"
-              color="white"
-              css={{
-                paddingLeft: '14rem',
-                paddingRight: '14rem',
-                height: '$height-appbar',
-                cursor: 'pointer',
-                borderRadius: '15px',
-                backgroundColor: '#F4DC01',
-              }}
-            >
-              <Text size="xl" css={{ fontWeight: '$bold' }}>
-                카카오톡 로그인
-              </Text>
-            </Button>
-          </Box>
-          <Box>
-            <GuideText size="xl">라이팅허브가 처음이신가요?</GuideText>
-            <GuideText
-              size="xl"
-              css={{
-                color: '#333333',
-                textDecoration: 'underline',
-                cursor: 'pointer',
-              }}
-            >
-              회원가입
-            </GuideText>
-            <GuideText
-              size="xl"
-              css={{
-                color: '#000000',
-                cursor: 'pointer',
-              }}
-            >
-              계정찾기
-            </GuideText>
-          </Box>
+        </Box>
+        <Box>
+          <GuideText size="xl">라이팅허브가 처음이신가요?</GuideText>
+          <GuideText
+            size="xl"
+            css={{
+              color: '#333333',
+              textDecoration: 'underline',
+              cursor: 'pointer',
+            }}
+          >
+            회원가입
+          </GuideText>
+          <GuideText
+            size="xl"
+            css={{
+              color: '#000000',
+              cursor: 'pointer',
+            }}
+          >
+            계정찾기
+          </GuideText>
         </Box>
       </Box>
     </>

diff --git a/pages/writing.tsx b/pages/writing.tsx
@@ -71,6 +71,7 @@ const Writing: NextPage = function () {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
+          marginTop: '$sp-32',
         }}
       >
         <Table.Wrapper css={{ width: '1200px', height: '750px' }}>