LoginComp.js 2.45 KB
Newer Older
Spark's avatar
Spark committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert, Card } from 'react-bootstrap';
import Oauth, { LoginWithKakao } from '../utils/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';

function LoginComp() {

    const cardstyled = {
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        borderWidth: '3px',
        borderRadius: '20px',
        borderColor: 'rgb(110, 189, 142)',
        color: '#04AB70'
    }

    const inboxstyled = {
        display: 'flex',
        flexDirection: 'column',
Spark's avatar
Spark committed
26
        maxWidth: '80%',
Spark's avatar
Spark committed
27
28
29
30
31
32
33
34
35
        justifyContent: 'center',
        margin: 'auto',
        padding: '10px'
    }


    return (
        <Row className='text-center w-100 my-2'>
            <Card style={cardstyled}>
Spark's avatar
Spark committed
36
                <Card.Title id='impactTitle'>
Spark's avatar
Spark committed
37
38
                    LOGIN
                </Card.Title>
Spark's avatar
Spark committed
39
40
41
                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
                    Log in with your social media account or email address
                </Card.Subtitle>
Spark's avatar
Spark committed
42
43
44
45
46
47
48
49
50
51
                <hr />
                <Card.Text>
                    <Form style={inboxstyled}>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Control type="email" placeholder="Email" />
                        </Form.Group>

                        <Button variant='light' type="submit" id='formbtn'>
                            LOGIN
                        </Button>
Spark's avatar
Spark committed
52

Spark's avatar
Spark committed
53
                    </Form>
Spark's avatar
Spark committed
54
55
56
57
58
59
60
61
62
63
64

                    <Row className='d-flex align-items-center m-2'>
                        <Col>
                            <hr />
                        </Col>
                        OR
                        <Col>
                            <hr />
                        </Col>
                    </Row>

Spark's avatar
Spark committed
65
66
67
                    <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
                        <a href="#;" onClick={LoginWithKakao} id='socialLink' >
                            {/* 세미콜론이 붙으면 최상단 이동 x */}
Spark's avatar
Spark committed
68
                            <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
Spark's avatar
Spark committed
69
70
71
72
73
74
75
76
77
78
79
                        </a>

                    </Row>
                </Card.Text>
            </Card>

        </Row>
    )
}

export default LoginComp;