[Merge] main <- dev

[Feat] #7 로그인 화면 개발 및 서비스 연동
infruencer · Feb 3, 2024 · b697808 · b697808
2 parents bfa11a4 + 9c38936
commit b697808
Show file tree

Hide file tree

Showing 26 changed files with 455 additions and 142 deletions.
diff --git a/.swcrc b/.swcrc
@@ -0,0 +1,14 @@
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        [
+          "@swc/plugin-styled-components",
+          {
+            "ssr": true
+          }
+        ]
+      ]
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "diary",
+  "name": "woodada",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@react-oauth/google": "latest",
     "@reduxjs/toolkit": "^2.0.1",
     "@tanstack/react-query": "^5.17.10",
     "@tanstack/react-query-devtools": "^5.17.10",
@@ -35,6 +36,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@swc/plugin-styled-components": "^1.5.115",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "eslint": "^8.35.0",

diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import './globals.css';
-import { Open_Sans } from 'next/font/google';
 import { Metadata } from 'next';
 import StyledComponents from '@/lib/StyledComponents';
 import QueryProvider from '@/lib/QueryProvider';
 import ReduxProvider from '@/lib/ReduxProvider';
 import ReactCookiesProvider from '@/lib/CookiesProvider';
 import Header from '@/components/layout/Header';
 import Main from '@/components/layout/Main';
+import { IChildrenProps } from '@/interfaces/common.interface';
 
-const openSans = Open_Sans({ subsets: ['latin'] });
-
+/**
+ * 메타 데이터
+ */
 export const metadata: Metadata = {
   title: {
     default: 'woodada',
@@ -19,17 +19,21 @@ export const metadata: Metadata = {
   description: '우리들의 다정한 다이어리',
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+/**
+ * 루트 레이아웃
+ * @param children: 자식 컴포넌트
+ */
+export default function RootLayout({ children }: IChildrenProps) {
   return (
-    <html lang="en" className={openSans.className}>
+    <html lang={'en'}>
       <body>
         <QueryProvider>
           <ReduxProvider>
             <ReactCookiesProvider>
               <StyledComponents>
                 <Header />
                 <Main>{children}</Main>
-                <div id="portal" />
+                <div id={'portal'} />
               </StyledComponents>
             </ReactCookiesProvider>
           </ReduxProvider>

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,7 +1,100 @@
-import React from 'react';
+'use client';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import logo from '@/public/static/images/logo_big.png';
+import Image from 'next/image';
+import { ButtonTheme } from '@/constants/ui-button.constant';
+import { Button } from '@/components/ui/Button';
+import { useRouter } from 'next/navigation';
+import { theme } from '@/styles/theme';
+import { GoogleLogin } from '@react-oauth/google';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 
-const Login = () => {
-  return <div>Login</div>;
+/**
+ * 로그인 페이지
+ */
+const Login: FC = () => {
+  const router = useRouter();
+
+  const handleGoogleLogin = async () => {
+    //const response = await fetch('/api/oauth2/google');
+    const response = await fetch(
+      'https://accounts.google.com/o/oauth2/auth?client_id=769747151656-i84bhc07vino6im6qn44q8au8qg9pq3j.apps.googleusercontent.com&redirect_uri=http://ec2-3-38-243-167.ap-northeast-2.compute.amazonaws.com/api/v1/oauth2/google&scope=https://www.googleapis.com/auth/userinfo.profile&response_type=code',
+      { method: 'GET' },
+    );
+    console.log(response);
+  };
+  /**
+   * 로그인
+   */
+  const handleLogin = () => {};
+
+  const handleGoogleLoginSuccess = (res: any) => {
+    console.log(res); // 로그인한 사용자 정보 조회
+    router.push('/google'); // /google 페이지로 이동
+    alert('성공');
+  };
+
+  const handleGoogleLoginFailure = (error: any) => {
+    console.log(error);
+    alert('실패');
+  };
+
+  return (
+    <Container>
+      <Image src={logo} alt={'logo'} width={330} height={68} />
+      <Buttons>
+        {/* <GoogleOAuthProvider clientId="769747151656-i84bhc07vino6im6qn44q8au8qg9pq3j.apps.googleusercontent.com">
+          <GoogleLogin
+            onSuccess={(res) => {
+              console.log(res);
+            }}
+            onError={() => {
+              console.log('실패');
+            }}
+          />
+        </GoogleOAuthProvider> */}
+        <Button text="구글 로그인" onClick={handleGoogleLogin} />
+        <Button text={'이메일 로그인·회원가입'} onClick={handleLogin} theme={ButtonTheme.ORANGE} />
+      </Buttons>
+    </Container>
+  );
 };
 
 export default Login;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 218px;
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const GoogleLoginButton = styled(GoogleLogin)`
+  width: 350px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px !important;
+  border-radius: 5px !important;
+  cursor: pointer;
+  font-size: 17px !important;
+  font-weight: 500 !important;
+  border-color: ${theme.colors.lightGray} !important;
+  background-color: ${theme.colors.white} !important;
+  color: ${theme.colors.text} !important;
+  box-shadow: none !important;
+  > div {
+    margin: 0 !important;
+  }
+  &:hover {
+    border-width: 2px !important;
+    border-color: ${theme.colors.orange} !important;
+  }
+`;
diff --git a/src/app/logout/page.tsx b/src/app/logout/page.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { googleLogout } from '@react-oauth/google'; // 구글 로그아웃 테스트
+
+/**
+ * 구글 로그아웃 테스트 페이지
+ */
+const Logout: FC = () => {
+  return <div></div>;
+};
+
+export default Logout;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,11 @@
+'use client';
 import React from 'react';
 import Welcome from '@/components/layout/Welcome';
 
-export default async function HomePage() {
+/**
+ * 루트 페이지
+ */
+export default function HomePage() {
   return (
     <section>
       <Welcome />

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { FC } from 'react';
 
-const Signup = () => {
+/**
+ * 회원가입 페이지
+ */
+const Signup: FC = () => {
   return <div>Signup</div>;
 };
 

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,16 +1,46 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
-import React from 'react';
+import React, { FC } from 'react';
 import { styled } from 'styled-components';
 import logo from '@/public/static/images/logo.png';
+import { usePathname, useRouter } from 'next/navigation';
+import { ButtonTheme } from '@/constants/ui-button.constant';
+import { Button } from '../ui/Button';
+import { theme } from '@/styles/theme';
+
+/**
+ * 헤더 컴포넌트
+ */
+const Header: FC = () => {
+  const router = useRouter();
+  const path = usePathname();
+
+  /**
+   * 회원가입 페이지로 이동
+   */
+  const handleSignup = () => {
+    router.push('/signup');
+  };
+
+  /**
+   * 로그인 페이지로 이동
+   */
+  const handleLogin = () => {
+    router.push('/login');
+  };
 
-const Header = () => {
   return (
     <Container>
       <Link href={'/'}>
-        <Image src={logo} alt="logo" width={141} height={49} />
+        <Image src={logo} alt={'logo'} width={141} height={49} />
       </Link>
+      {path === '/' && (
+        <Buttons>
+          <Button text={'로그인'} onClick={handleLogin} theme={ButtonTheme.TEXT} />
+          <Button text={'회원가입'} onClick={handleSignup} theme={ButtonTheme.TEXT} />
+        </Buttons>
+      )}
     </Container>
   );
 };
@@ -21,7 +51,27 @@ const Container = styled.header`
   width: 100vw;
   height: 80px;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 16px 30px 16px 40px;
   box-sizing: border-box;
-  box-shadow: 0 4px 20px 0 rgba(178, 178, 178, 0.15);
+  box-shadow: ${theme.boxShadow.header};
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  gap: 10px;
+  > :first-child {
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 6px;
+      right: -5px;
+      width: 1px;
+      height: 10px;
+      background-color: ${theme.colors.gray};
+    }
+  }
 `;
diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -1,16 +1,13 @@
 'use client';
+import { IChildrenProps } from '@/interfaces/common.interface';
 import React, { FC } from 'react';
 import { styled } from 'styled-components';
 
-type Props = {
-  children: React.ReactNode;
-};
-
 /**
  * 메인 레이아웃
  * @param children: 자식 컴포넌트
  */
-const Main: FC<Props> = ({ children }) => {
+const Main: FC<IChildrenProps> = ({ children }) => {
   return <Container>{children}</Container>;
 };
 

diff --git a/src/components/layout/Welcome.tsx b/src/components/layout/Welcome.tsx
@@ -1,15 +1,16 @@
 'use client';
 import Image from 'next/image';
-import React from 'react';
+import React, { FC } from 'react';
 import logo from '@/public/static/images/logo_big.png';
 import styled from 'styled-components';
-import Button from '../ui/Button';
 import { useRouter } from 'next/navigation';
+import { ButtonTheme } from '@/constants/ui-button.constant';
+import { Button } from '../ui/Button';
 
 /**
  * 시작하기 페이지
  */
-const Welcome = () => {
+const Welcome: FC = () => {
   const router = useRouter();
 
   /**
@@ -21,8 +22,8 @@ const Welcome = () => {
 
   return (
     <Container>
-      <Image src={logo} alt="logo" width={442} height={88} />
-      <Button text="시작하기" onClick={handleStart} theme={'white'} />
+      <Image src={logo} alt={'logo'} width={442} height={88} />
+      <Button text={'시작하기'} onClick={handleStart} theme={ButtonTheme.WHITE} />
     </Container>
   );
 };