#7 Add kakao login link in header

KEP-STUDY · May 3, 2021 · 2da29d0 · 2da29d0
1 parent 32eed36
commit 2da29d0
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 69 deletions.
diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts
@@ -0,0 +1 @@
+export const KAKAO_OAUTH2_URL = `${process.env.NEXT_PUBLIC_KAUTH_URL}/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_APP_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_BASE_URL}/api/oauth`
diff --git a/apps/client/components/header/header.stories.tsx b/apps/client/components/header/header.stories.tsx
@@ -1,14 +1,11 @@
 import React from 'react'
-import { Header, HeaderProps } from './header'
+import Header from './header'
 
 export default {
  component: Header,
  title: 'Header',
 }
 
 export const primary = () => {
- /* eslint-disable-next-line */
- const props: HeaderProps = {}
-
  return <Header />
 }
diff --git a/apps/client/components/header/header.style.ts b/apps/client/components/header/header.style.ts
diff --git a/apps/client/components/header/header.styled.ts b/apps/client/components/header/header.styled.ts
@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+import Typography from '@material-ui/core/Typography'
+import { Link } from '@material-ui/core'
+
+export const LoginLink = styled(Link)`
+ text-decoration: none;
+`
+
+export const Container = styled.div`
+ flex-grow: 1;
+`
+
+export const Title = styled(Typography)`
+ flex-grow: 1;
+ padding-left: 16px;
+`
diff --git a/apps/client/components/header/header.tsx b/apps/client/components/header/header.tsx
@@ -1,31 +1,27 @@
 import React from 'react'
-import { useStyles } from './header.style'
+import * as S from './header.styled'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
 import Button from '@material-ui/core/Button'
-import IconButton from '@material-ui/core/IconButton'
 import MenuIcon from '@material-ui/icons/Menu'
+import IconButton from '@material-ui/core/IconButton'
+import { KAKAO_OAUTH2_URL } from 'api/auth'
 
-export interface HeaderProps {}
-
-export function Header() {
- const classes = useStyles()
-
+function Header() {
  return (
- <div className={classes.root}>
+ <S.Container>
  <AppBar position="static">
  <Toolbar>
- <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
+ <IconButton edge="start" color="inherit" aria-label="menu">
  <MenuIcon />
  </IconButton>
- <Typography variant="h6" className={classes.title}>
-  리뷰캠퍼스
- </Typography>
- <Button color="inherit">로그인</Button>
+ <S.Title variant="h6">리뷰캠퍼스</S.Title>
+ <S.LoginLink color="inherit" href={KAKAO_OAUTH2_URL}>
+  <Button color="inherit">로그인</Button>
+ </S.LoginLink>
  </Toolbar>
  </AppBar>
- </div>
+ </S.Container>
  )
 }
 

diff --git a/apps/client/pages/_app.tsx b/apps/client/pages/_app.tsx
@@ -1,22 +1,18 @@
 import React from 'react'
 import { AppProps } from 'next/app'
 import Head from 'next/head'
-import { Header } from 'components'
 import { ThemeProvider } from 'styled-components'
 import theme from 'utils/theme'
+import { GlobalStyle } from 'styles/global-style'
 
 function CustomApp({ Component, pageProps }: AppProps) {
  return (
  <ThemeProvider theme={theme}>
  <Head>
  <title>리뷰 캠퍼스</title>
  </Head>
- <div className="app">
- <Header />
- <main>
- <Component {...pageProps} />
- </main>
- </div>
+ <GlobalStyle />
+ <Component {...pageProps} />
  </ThemeProvider>
  )
 }

diff --git a/apps/client/pages/index.tsx b/apps/client/pages/index.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
+import { Header } from 'components'
 
 function Index() {
- return <div>Index Page</div>
+ return (
+ <>
+ <Header />
+ <div>Index Page</div>
+ </>
+ )
 }
 
 export default Index
diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx
diff --git a/apps/client/styles/global-style.ts b/apps/client/styles/global-style.ts
@@ -0,0 +1,16 @@
+import { createGlobalStyle } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle`
+ html, body {
+ height: 100%;
+ }
+ body {
+ min-width: 1024px;
+ background-color: #fff;
+ -webkit-text-size-adjust: none;
+ word-break: break-all;
+ }
+ #__next {
+ height:100%;
+ }
+`
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,13 +32,15 @@
  "@nestjs/common": "^7.0.0",
  "@nestjs/core": "^7.0.0",
  "@nestjs/platform-express": "^7.0.0",
+ "axios": "^0.21.1",
  "core-js": "^3.6.5",
  "next": "10.0.1",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  "react-is": "17.0.1",
  "reflect-metadata": "^0.1.13",
- "rxjs": "~6.6.3"
+ "rxjs": "~6.6.3",
+ "styled-components": "5.2.1"
  },
  "devDependencies": {
  "@babel/core": "7.9.6",