Merge pull request #12 from StopSoo/forked

api 연결을 통한 카카오 로그인 구현 완성 !
FF-UNI-SPHERE · Dec 8, 2023 · 629b2af · 629b2af
2 parents e50589e + 26237dd
commit 629b2af
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 82 deletions.
diff --git 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
@@ -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
diff --git a/src/api/cookie.js 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: '/' });
+};
diff --git a/src/component/login/LoginTemplate.jsx b/src/component/login/LoginTemplate.jsx
@@ -6,53 +6,52 @@ import googleLogo from '../resource/logo_google.png';
 
 import WhiteBox from './WhiteBox'
 
-function LoginTemplate () {
-    //추후 api 변경 시 같이 변경하기
-    const login = ({socialtype}) => {
-        try {
-            window.location.replace(
-                import.meta.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 -> 적용이 안되는 문제로 우선 삭제
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
-            <WhiteBox >
-                <h1 className="title">로그인하기</h1>
-                <h3>소셜 로그인으로 진행하세요</h3>
-                <HorizontalLine position="top"/>
-                <ButtonContainer >
-                    <SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
-                        <SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon"/>
-                        카카오 로그인
-                    </SocialLoginButton>
-                    <SocialLoginButton socialtype="naver" onClick={() => login(socialtype)}>
-                        <SocialButtonIcon src={naverLogo} alt="네이버 로고" className="social-icon"/>
-                        네이버 로그인
-                    </SocialLoginButton>
-                    <SocialLoginButton socialtype="google" onClick={() => login(socialtype)}>
-                        <SocialButtonIcon src={googleLogo} alt="구글 로고" className="social-icon"/>
-                        &nbsp; 구글 로그인
-                    </SocialLoginButton>
-                </ButtonContainer >
-                <HorizontalLine position="top"/>
-                {/* <HorizontalLine position="bottom"/>
+  return (
+    //align-items: center -> 적용이 안되는 문제로 우선 삭제
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+      <WhiteBox >
+        <h1 className="title">로그인하기</h1>
+        <h3>소셜 로그인으로 진행하세요</h3>
+        <HorizontalLine position="top" />
+        <ButtonContainer >
+          <SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
+            <SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon" />
+            카카오 로그인
+          </SocialLoginButton>
+          <SocialLoginButton socialtype="naver" onClick={() => login('naver')}>
+            <SocialButtonIcon src={naverLogo} alt="네이버 로고" className="social-icon" />
+            네이버 로그인
+          </SocialLoginButton>
+          <SocialLoginButton socialtype="google" onClick={() => login('google')}>
+            <SocialButtonIcon src={googleLogo} alt="구글 로고" className="social-icon" />
+            &nbsp; 구글 로그인
+          </SocialLoginButton>
+        </ButtonContainer >
+        <HorizontalLine position="top" />
+        {/* <HorizontalLine position="bottom"/>
                 <SignInButton >회원가입하기</SignInButton > */}
-            </WhiteBox >
-        </div>
-    );
+      </WhiteBox >
+    </div>
+  );
 };
 
-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;
@@ -67,18 +66,18 @@ const LineContainer = styled.div`
     justify-content: center;
 `;
 
-const HorizontalLine = ({position}) => {
-    return (
-        <LineContainer>
-            {position === 'top' && <LineStyled />}
-            {position === 'bottom' && <LineStyled />}
-            {position === 'bottom' && <TextStyled>또는</TextStyled>}
-            {position === 'bottom' && <LineStyled />}
-        </LineContainer>
-    );
+const HorizontalLine = ({ position }) => {
+  return (
+    <LineContainer>
+      {position === 'top' && <LineStyled />}
+      {position === 'bottom' && <LineStyled />}
+      {position === 'bottom' && <TextStyled>또는</TextStyled>}
+      {position === 'bottom' && <LineStyled />}
+    </LineContainer>
+  );
 };
 
-const ButtonContainer  = styled.div`
+const ButtonContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -100,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)'};
 `;
 
@@ -119,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;
diff --git a/src/screen/MainScreen.jsx b/src/screen/MainScreen.jsx
@@ -2,12 +2,12 @@ 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(
       <BeforeLoginSet />
     );