From 2da29d05a200334457305cdbcd6dfa995e76e0d8 Mon Sep 17 00:00:00 2001 From: BuildTheTruth Date: Tue, 4 May 2021 00:42:46 +0900 Subject: [PATCH] #7 Add kakao login link in header --- apps/client/api/auth.ts | 1 + .../components/header/header.stories.tsx | 5 +--- apps/client/components/header/header.style.ts | 15 ----------- .../client/components/header/header.styled.ts | 16 ++++++++++++ apps/client/components/header/header.tsx | 26 ++++++++----------- apps/client/pages/_app.tsx | 10 +++---- apps/client/pages/index.tsx | 8 +++++- apps/client/pages/login.tsx | 7 ----- apps/client/styles/global-style.ts | 16 ++++++++++++ package-lock.json | 26 +++++-------------- package.json | 4 ++- 11 files changed, 65 insertions(+), 69 deletions(-) create mode 100644 apps/client/api/auth.ts delete mode 100644 apps/client/components/header/header.style.ts create mode 100644 apps/client/components/header/header.styled.ts delete mode 100644 apps/client/pages/login.tsx create mode 100644 apps/client/styles/global-style.ts diff --git a/apps/client/api/auth.ts b/apps/client/api/auth.ts new file mode 100644 index 0000000..c31a225 --- /dev/null +++ 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 index df1ba42..4a320ea 100644 --- a/apps/client/components/header/header.stories.tsx +++ b/apps/client/components/header/header.stories.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Header, HeaderProps } from './header' +import Header from './header' export default { component: Header, @@ -7,8 +7,5 @@ export default { } export const primary = () => { - /* eslint-disable-next-line */ - const props: HeaderProps = {} - return
} diff --git a/apps/client/components/header/header.style.ts b/apps/client/components/header/header.style.ts deleted file mode 100644 index 53d114c..0000000 --- a/apps/client/components/header/header.style.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' - -export const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - flexGrow: 1, - }, - menuButton: { - marginRight: theme.spacing(2), - }, - title: { - flexGrow: 1, - }, - }) -) diff --git a/apps/client/components/header/header.styled.ts b/apps/client/components/header/header.styled.ts new file mode 100644 index 0000000..a67165d --- /dev/null +++ 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 index f2c379b..b3ea058 100644 --- 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 ( -
+ - + - - 리뷰캠퍼스 - - + 리뷰캠퍼스 + + + -
+ ) } diff --git a/apps/client/pages/_app.tsx b/apps/client/pages/_app.tsx index ec3b7f4..b453cbe 100644 --- a/apps/client/pages/_app.tsx +++ b/apps/client/pages/_app.tsx @@ -1,9 +1,9 @@ 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 ( @@ -11,12 +11,8 @@ function CustomApp({ Component, pageProps }: AppProps) { 리뷰 캠퍼스 -
-
-
- -
-
+ + ) } diff --git a/apps/client/pages/index.tsx b/apps/client/pages/index.tsx index bf15f9a..33cbc43 100644 --- 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
Index Page
+ return ( + <> +
+
Index Page
+ + ) } export default Index diff --git a/apps/client/pages/login.tsx b/apps/client/pages/login.tsx deleted file mode 100644 index 63aa260..0000000 --- a/apps/client/pages/login.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -function Login() { - return
Login Page
-} - -export default Login diff --git a/apps/client/styles/global-style.ts b/apps/client/styles/global-style.ts new file mode 100644 index 0000000..a92b449 --- /dev/null +++ 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 index e8961d1..3ac68e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1758,7 +1758,6 @@ "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "dev": true, "requires": { "@emotion/memoize": "0.7.4" } @@ -1766,20 +1765,17 @@ "@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "dev": true + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@eslint/eslintrc": { "version": "0.1.3", @@ -6355,7 +6351,6 @@ "version": "1.10.7", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", - "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.0.0", "@babel/helper-module-imports": "^7.0.0", @@ -6985,8 +6980,7 @@ "camelize": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", - "dev": true + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" }, "caniuse-api": { "version": "3.0.0", @@ -7970,8 +7964,7 @@ "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", - "dev": true + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" }, "css-color-names": { "version": "0.0.4", @@ -8217,7 +8210,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "dev": true, "requires": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", @@ -22565,8 +22557,7 @@ "shallowequal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "dev": true + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" }, "sharp": { "version": "0.26.2", @@ -23585,7 +23576,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz", "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==", - "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@babel/traverse": "^7.4.5", @@ -23602,14 +23592,12 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } diff --git a/package.json b/package.json index 8e47e60..c9e0649 100644 --- 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",