[#7] OAuth 회원가입, 로그인 UI 및 동작

client/.env.sample

@@ -0,0 +1 @@
+SERVER_URL=

client/jest.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',
+  },
 };

client/package.json

@@ -34,6 +34,7 @@
     "fork-ts-checker-webpack-plugin": "^6.3.2",
     "html-webpack-plugin": "^5.3.2",
     "jest": "^27.0.6",
+    "jest-transform-stub": "^2.0.0",
     "prettier": "^2.3.2",
     "typescript": "^4.3.5",
     "webpack": "^5.50.0",

client/src/components/login/Login.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Login from './Login';
+
+describe('Login 컴포넌트', () => {
+  test('facebook 버튼 UI', () => {
+    const login = render(<Login />);
+
+    login.getByText('페이스북으로 로그인');
+  });
+
+  test('google 버튼 UI', () => {
+    const login = render(<Login />);
+
+    login.getByText('구글로 로그인');
+  });
+});

client/src/components/login/Login.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import OAuthButton from './OAuthButton';
+import FACEBOOK from './facebook.svg';
+import GOOGLE from './google.svg';
+
+enum OAuthType {
+  Facebook,
+  Google,
+}
+
+const Header = styled.h1`
+  font-size: 24px;
+  font-weight: normal;
+`;
+
+const LoginContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const OAuthButtonWrapper = styled.div`
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Login = (): JSX.Element => {
+  const handleOAuthButtonClick = useCallback((redirectURL: string) => {
+    return () => (location.href = redirectURL);
+  }, []);
+
+  const BUTTON_PROPS = useMemo(
+    () => ({
+      [OAuthType.Facebook]: {
+        backgroundColor: '#4267b2',
+        fontColor: '#ffffff',
+        icon: FACEBOOK,
+        content: '페이스북으로 로그인',
+        onClick: handleOAuthButtonClick(`${process.env.SERVER_URL}/auth/facebook-login`),
+      },
+      [OAuthType.Google]: {
+        backgroundColor: '#EA4335',
+        fontColor: '#ffffff',
+        icon: GOOGLE,
+        content: '구글로 로그인',
+        onClick: handleOAuthButtonClick(`${process.env.SERVER_URL}/auth/google-login`),
+      },
+    }),
+    [handleOAuthButtonClick]
+  );
+
+  return (
+    <LoginContainer>
+      <Header>회원 로그인</Header>
+      <OAuthButtonWrapper>
+        <OAuthButton {...BUTTON_PROPS[OAuthType.Facebook]} />
+        <OAuthButton {...BUTTON_PROPS[OAuthType.Google]} />
+      </OAuthButtonWrapper>
+    </LoginContainer>
+  );
+};
+
+export default Login;

client/src/components/login/OAuthButton.tsx

@@ -0,0 +1,55 @@
+import React, { MouseEventHandler } from 'react';
+import styled from 'styled-components';
+
+type ContainerProps = {
+  backgroundColor: string;
+  fontColor: string;
+};
+
+const OAuthButtonContainer = styled.button<ContainerProps>`
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.fontColor};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  height: 50px;
+  width: 300px;
+  padding: 15px;
+  border: none;
+  cursor: pointer;
+`;
+
+const OAuthIcon = styled.img`
+  max-width: 18px;
+  max-height: 100%;
+`;
+
+const OAuthButtonContent = styled.span`
+  font-size: 16px;
+`;
+
+type Props = {
+  backgroundColor: string;
+  fontColor: string;
+  icon: string;
+  content: string;
+  onClick: MouseEventHandler;
+};
+
+const OAuthButton = ({
+  icon,
+  fontColor,
+  backgroundColor,
+  content,
+  onClick,
+}: Props): JSX.Element => {
+  return (
+    <OAuthButtonContainer fontColor={fontColor} backgroundColor={backgroundColor} onClick={onClick}>
+      <OAuthIcon src={icon} />
+      <OAuthButtonContent>{content}</OAuthButtonContent>
+    </OAuthButtonContainer>
+  );
+};
+
+export default OAuthButton;

client/webpack.dev.js

@@ -19,6 +19,6 @@ module.exports = merge(common, {
         mode: 'DEV',
       },
     }),
-    new EnvironmentPlugin([]),
+    new EnvironmentPlugin(['SERVER_URL']),
   ],
 });