From ea9392393e88c89430d2f4dc296282329d672fc0 Mon Sep 17 00:00:00 2001 From: StopSoo Date: Fri, 8 Dec 2023 16:18:04 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:=20api=20=EC=97=B0=EA=B2=B0=EC=9D=84?= =?UTF-8?q?=20=ED=86=B5=ED=95=9C=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B5=AC=ED=98=84=20=EC=99=84=EC=84=B1=20?= =?UTF-8?q?!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- package.json | 1 + pnpm-lock.yaml | 38 +++++++++++++++++++++++++++ src/api/cookie.js | 15 +++++++++++ src/component/login/LoginTemplate.jsx | 9 +++---- src/screen/MainScreen.jsx | 7 ++--- 6 files changed, 63 insertions(+), 9 deletions(-) create mode 100644 src/api/cookie.js diff --git a/.gitignore b/.gitignore index 4d29575..eab411a 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,7 @@ # misc .DS_Store -.env.local +.env .env.development.local .env.test.local .env.production.local diff --git a/package.json b/package.json index 3f00b82..f77f02a 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^14.5.1", "polished": "^4.2.2", "react": "^18.2.0", + "react-cookie": "^6.1.1", "react-dom": "^18.2.0", "react-icons": "^4.12.0", "react-responsive": "^9.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 382e31c..e86dc35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: react: specifier: ^18.2.0 version: 18.2.0 + react-cookie: + specifier: ^6.1.1 + version: 6.1.1(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -2231,6 +2234,10 @@ packages: dependencies: '@types/node': 20.9.0 + /@types/cookie@0.5.4: + resolution: {integrity: sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==} + dev: false + /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: @@ -2270,6 +2277,13 @@ packages: dependencies: '@types/node': 20.9.0 + /@types/hoist-non-react-statics@3.3.5: + resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==} + dependencies: + '@types/react': 18.2.37 + hoist-non-react-statics: 3.3.2 + dev: false + /@types/html-minifier-terser@6.1.0: resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==} @@ -5009,6 +5023,12 @@ packages: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true + /hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + dependencies: + react-is: 16.13.1 + dev: false + /hoopy@0.1.4: resolution: {integrity: sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==} engines: {node: '>= 6.0.0'} @@ -7598,6 +7618,17 @@ packages: semver: 5.7.2 dev: true + /react-cookie@6.1.1(react@18.2.0): + resolution: {integrity: sha512-fuFRpf8LH6SfmVMowDUIRywJF5jAUDUWrm0EI5VdXfTl5bPcJ7B0zWbuYpT0Tvikx7Gs18MlvAT+P+744dUz2g==} + peerDependencies: + react: '>= 16.3.0' + dependencies: + '@types/hoist-non-react-statics': 3.3.5 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + universal-cookie: 6.1.1 + dev: false + /react-dev-utils@12.0.1(eslint@8.53.0)(typescript@5.3.2)(webpack@5.89.0): resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==} engines: {node: '>=14'} @@ -8928,6 +8959,13 @@ packages: dependencies: crypto-random-string: 2.0.0 + /universal-cookie@6.1.1: + resolution: {integrity: sha512-33S9x3CpdUnnjwTNs2Fgc41WGve2tdLtvaK2kPSbZRc5pGpz2vQFbRWMxlATsxNNe/Cy8SzmnmbuBM85jpZPtA==} + dependencies: + '@types/cookie': 0.5.4 + cookie: 0.5.0 + dev: false + /universalify@0.2.0: resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} engines: {node: '>= 4.0.0'} diff --git a/src/api/cookie.js b/src/api/cookie.js new file mode 100644 index 0000000..f4759c3 --- /dev/null +++ b/src/api/cookie.js @@ -0,0 +1,15 @@ +import { Cookies } from 'react-cookie'; + +const cookies = new Cookies(); + +export const setCookie = (key, value) => { + cookies.set(key, value, { path: '/' }); +}; + +export const getCookie = (key) => { + return cookies.get(key); +}; + +export const removeCookie = (key) => { + cookies.remove(key, { path: '/' }); +}; \ No newline at end of file diff --git a/src/component/login/LoginTemplate.jsx b/src/component/login/LoginTemplate.jsx index c8b48ac..5781793 100644 --- a/src/component/login/LoginTemplate.jsx +++ b/src/component/login/LoginTemplate.jsx @@ -7,11 +7,10 @@ import googleLogo from '../resource/logo_google.png'; import WhiteBox from './WhiteBox' function LoginTemplate () { - //추후 api 변경 시 같이 변경하기 - const login = ({socialtype}) => { + const login = (socialtype) => { try { window.location.replace( - import.meta.env.REACT_APP_BE_HOST + `/api/v1/auth/login/oauth-types/${socialtype}`, + `${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}` ); } catch (error) { console.error("유효하지 않은 URL입니다!", error); @@ -30,11 +29,11 @@ function LoginTemplate () { 카카오 로그인 - login(socialtype)}> + login('naver')}> 네이버 로그인 - login(socialtype)}> + login('google')}>   구글 로그인 diff --git a/src/screen/MainScreen.jsx b/src/screen/MainScreen.jsx index 866defc..716be8e 100644 --- a/src/screen/MainScreen.jsx +++ b/src/screen/MainScreen.jsx @@ -2,12 +2,13 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import BeforeLoginSet from '../component/main screen/BeforeLogin'; import AfterLoginSet from '../component/main screen/AfterLogin'; +import { getCookie } from '../api/cookie'; /* 로그인 여부에 따라 다른 화면을 렌더링 */ function MainScreen(props) { - const [IsLogin, setIsLogin] = useState(0); - - if (IsLogin) { + const token = getCookie('access_token'); + + if (!token) { return( ); From 26237ddaca53159e25dcf0b15df50982fa314a25 Mon Sep 17 00:00:00 2001 From: StopSoo Date: Fri, 8 Dec 2023 16:31:38 +0900 Subject: [PATCH 2/2] =?UTF-8?q?:=20=EC=A3=BC=EC=84=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/login/LoginTemplate.jsx | 131 +++++++++++--------------- src/screen/MainScreen.jsx | 1 - 2 files changed, 55 insertions(+), 77 deletions(-) diff --git a/src/component/login/LoginTemplate.jsx b/src/component/login/LoginTemplate.jsx index 5781793..df34219 100644 --- a/src/component/login/LoginTemplate.jsx +++ b/src/component/login/LoginTemplate.jsx @@ -6,52 +6,52 @@ import googleLogo from '../resource/logo_google.png'; import WhiteBox from './WhiteBox' -function LoginTemplate () { - const login = (socialtype) => { - try { - window.location.replace( - `${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}` - ); - } catch (error) { - console.error("유효하지 않은 URL입니다!", error); - } - }; +function LoginTemplate() { + const login = (socialtype) => { + try { + window.location.replace( + `${process.env.REACT_APP_BE_HOST}/api/v1/auth/login/oauth-types/${socialtype}` + ); + } catch (error) { + console.error("유효하지 않은 URL입니다!", error); + } + }; - return ( - //align-items: center -> 적용이 안되는 문제로 우선 삭제 -
- -

로그인하기

-

소셜 로그인으로 진행하세요

- - - login('kakao')}> - - 카카오 로그인 - - login('naver')}> - - 네이버 로그인 - - login('google')}> - -   구글 로그인 - - - - {/* + return ( + //align-items: center -> 적용이 안되는 문제로 우선 삭제 +
+ +

로그인하기

+

소셜 로그인으로 진행하세요

+ + + login('kakao')}> + + 카카오 로그인 + + login('naver')}> + + 네이버 로그인 + + login('google')}> + +   구글 로그인 + + + + {/* 회원가입하기 */} - -
- ); + +
+ ); }; -const LineStyled = styled.span ` +const LineStyled = styled.span` flex: 1; border-top: 1px solid var(--light-gray); `; -const TextStyled = styled.span ` +const TextStyled = styled.span` padding: 0 35px; color: var(--light-gray); font-size: 22px; @@ -66,18 +66,18 @@ const LineContainer = styled.div` justify-content: center; `; -const HorizontalLine = ({position}) => { - return ( - - {position === 'top' && } - {position === 'bottom' && } - {position === 'bottom' && 또는} - {position === 'bottom' && } - - ); +const HorizontalLine = ({ position }) => { + return ( + + {position === 'top' && } + {position === 'bottom' && } + {position === 'bottom' && 또는} + {position === 'bottom' && } + + ); }; -const ButtonContainer = styled.div` +const ButtonContainer = styled.div` display: flex; flex-direction: column; align-items: center; @@ -99,15 +99,15 @@ const SocialLoginButton = styled.button` &:hover { filter: brightness(95%); } outline: none; - border: ${props => - props.socialtype === 'google' ? '1px solid #D9D9D9' : 'none'}; + border: ${props => + props.socialtype === 'google' ? '1px solid #D9D9D9' : 'none'}; background-color: ${props => - props.socialtype === 'naver' ? '#03c75a' : - props.socialtype === 'kakao' ? '#FEE500' : + props.socialtype === 'naver' ? '#03c75a' : + props.socialtype === 'kakao' ? '#FEE500' : props.socialtype === 'google' ? '#FFF' : 'var(--white)'}; color: ${props => - props.socialtype === 'naver' ? '#FFF' : - props.socialtype === 'kakao' ? '#000' : + props.socialtype === 'naver' ? '#FFF' : + props.socialtype === 'kakao' ? '#000' : props.socialtype === 'google' ? '#000' : 'var(--black)'}; `; @@ -118,25 +118,4 @@ const SocialButtonIcon = styled.img` margin-right: 27%; `; -//사이트 자체 로그인 지원 안하므로 삭제됨 -// const SignInButton = styled.button` -// margin-left: auto; -// margin-right: auto; - -// display: flex; -// align-items: center; -// justify-content: center; -// width: 400px; -// height: 50px; -// margin-top: 5%; -// border-radius: 12px; -// border : 1px solid var(--light-gray); -// background-color: var(--white); -// font-size: 14px; -// font-weight: 700; -// &:active { opacity: 0.4; } -// &:hover { filter: brightness(95%); } -// `; - -export default LoginTemplate; - +export default LoginTemplate; \ No newline at end of file diff --git a/src/screen/MainScreen.jsx b/src/screen/MainScreen.jsx index 716be8e..cfacf87 100644 --- a/src/screen/MainScreen.jsx +++ b/src/screen/MainScreen.jsx @@ -4,7 +4,6 @@ import BeforeLoginSet from '../component/main screen/BeforeLogin'; import AfterLoginSet from '../component/main screen/AfterLogin'; import { getCookie } from '../api/cookie'; -/* 로그인 여부에 따라 다른 화면을 렌더링 */ function MainScreen(props) { const token = getCookie('access_token');