[React MUI 5] 인스타그램 클론코딩 - Login Page 소셜 로그인 버튼 | google, apple, facebook

결과물

 

 

1. Header.js 에 테스트용 user 추가

  const [user, setUser] = React.useState(false);

 

2. 3항 연산자로 user 변수에 따라 헤더 오른쪽 상단 다르게 보이도록 수정

          {/* profile */}
          {user ? (
            <Box sx={{ display: 'flex' }}>
              {/* desktop icon group */}
              <Box
                sx={{
                  marginRight: '1rem',
                  display: { xs: 'none', md: 'block' },
                }}
              >
                ......
              </Box>

              <Avatar alt="Remy Sharp" src="https://" />
            </Box>
          ) : (
            <Button variant="contained" onClick={MoveLoginPage}>
              로그인
            </Button>
          )}

헤더 오른쪽 로그인 버튼

 

3. 로고 및 로그인 버튼 클릭시 이동 처리 위해 next router 사용하기

import { useRouter } from 'next/router';

// ......

  const router = useRouter();

  const MoveHomePage = () => {
    router.push('/');
  };

  const MoveLoginPage = () => {
    router.push('/login');
  };

// ......

          {/* logo */}
          <Box
            sx={{
              width: '96px',
              display: { xs: 'none', sm: 'block', cursor: 'pointer' },
            }}
            onClick={MoveHomePage}
          >
          
          // ......
         
          {/* mobile logo */}
          <Box
            sx={{ width: '40px', display: { sm: 'none' }, cursor: 'pointer' }}
            onClick={MoveHomePage}
          >
          
          // ......
          
            <Button variant="contained" onClick={MoveLoginPage}>
              로그인
            </Button>

 

 

4. src/pages/login.js 파일 생성 후 상단에 인스타그램 로고 title 크게 넣기

import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';

import Header from '../components/Header';


function LoginPage() {
  return (
    <Box sx={{ height: '100vh' }}>
      <Header />

      <Container
        maxWidth="sm"
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        {/* title */}
        <Box sx={{ marginY: '5rem' }}>
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/320px-Instagram_logo.svg.png"
            alt="logo"
            width={'100%'}
          />
          <Typography align="center">MUI5 인스타그램 클론코딩</Typography>
        </Box>
      </Container>
    </Box>
  );
}
export default LoginPage;

 

5. 구글 로그인 버튼 구현

import Button from '@mui/material/Button';

// ......

        {/* social login buttons*/}
        <Box
          sx={{
            width: '100%',
            maxWidth: '360px',
            '> button + button': { marginTop: '0.25rem' },
          }}
        >
          <Button
            fullWidth
            startIcon={
              <img
                src="https://developers.google.com/static/identity/images/g-logo.png"
                alt="google login"
                width={20}
                height={20}
              />
            }
            sx={{
              color: '#333333',
              backgroundColor: '#ffffff',
              border: '1px solid #bdbdbd',
              // borderColor: '#000000',
              '&:hover': {
                backgroundColor: '#eeeeee',
              },
            }}
          >
            구글 로그인
          </Button>
        </Box>
      </Container>

 

6. 애플 로그인 버튼 구현

import AppleIcon from '@mui/icons-material/Apple';

// ...... 구글로그인

          <Button
            fullWidth
            startIcon={<AppleIcon />}
            sx={{
              color: '#ffffff',
              backgroundColor: '#000000',
              '&:hover': {
                backgroundColor: '#000000bb',
              },
            }}
          >
            애플 로그인
          </Button>

 

7. 페이스북 로그인 버튼 구현

import FacebookIcon from '@mui/icons-material/Facebook';

// ...... apple 로그인

          <Button
            fullWidth
            startIcon={<FacebookIcon />}
            sx={{
              backgroundColor: '#4267b2',
              color: '#ffffff',
              '&:hover': {
                backgroundColor: '#4267b2dd',
              },
            }}
          >
            페이스북 로그인
          </Button>