Merge pull request #29 from TUK-MoreView/feat/login-page

feat: 소셜 로그인 Link 추가
play3step · Mar 13, 2024 · 54d5e28 · 54d5e28
2 parents f77e3e2 + ad8fd04
commit 54d5e28
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/components/LoginPage/SocialLoginBtn.jsx b/src/components/LoginPage/SocialLoginBtn.jsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 import { ReactComponent as Kakao } from '../../assets/socialLogin/kakao.svg';
 import { ReactComponent as Naver } from '../../assets/socialLogin/naver.svg';
 
-function SocialLoginBtn({ type }) {
+function SocialLoginBtn({ type, onClick }) {
   return (
-    <SocialLoginBtnContainer>
+    <SocialLoginBtnContainer onClick={onClick}>
       {type === 'kakao' && (
         <TextContainer>
           <Kakao alt="카카오" width="1.40625vw" height="2.5vh" />

diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
@@ -8,19 +8,32 @@ function LoginPage() {
   const onCancel = () => {
     navigate(-1);
   };
+  const NAVER = process.env.REACT_APP_NAVER;
+  const KAKAO = process.env.REACT_APP_KAKAO;
+
+  const routeToSocialLogin = (type) => {
+    const url = type === 'naver' ? NAVER : KAKAO;
+    window.location.href = url;
+  };
+
   return (
     <LoginContainer>
       <BackPosition>
         <CloseBtn onClose={onCancel} />
       </BackPosition>
       <LogoStyle>MoreView</LogoStyle>
-      <SocialLoginBtn type="kakao" />
+      <SocialLoginBtn
+        type="kakao"
+        onClick={() => routeToSocialLogin('kakao')}
+      />
       <Despite>또는</Despite>
-      <SocialLoginBtn type="naver" />
+      <SocialLoginBtn
+        type="naver"
+        onClick={() => routeToSocialLogin('naver')}
+      />
     </LoginContainer>
   );
 }
-
 export default LoginPage;
 
 const LoginContainer = styled.div`

diff --git a/src/pages/ProjectPage.jsx b/src/pages/ProjectPage.jsx
@@ -200,8 +200,9 @@ function ProjectPage() {
                   ) : (
                     <Canvas
                       key={page.id}
+                      gl={{ alpha: true }}
                       style={{
-                        backgroundColor: '#D9D9D9',
+                        // backgroundColor: '#D9D9D9',
                         width: '83.33333333333334vw',
                         height: '83.33333333333334vh',
                       }}