Home.js 5.95 KB
Newer Older
Kim, Subin's avatar
Kim, Subin committed
1
import React, { useState, useEffect, useRef } from 'react';
Kim, Subin's avatar
Kim, Subin committed
2
3
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
4
import { Card, CardDeck, CardColumns, Container, Row } from 'react-bootstrap';
5

Kim, Subin's avatar
Kim, Subin committed
6
7
8
9
10

function Home() {

    return (
        <div>
Kim, Subin's avatar
Kim, Subin committed
11
12
            <MainNav />
            <SubNav />
13
14
15
16
            <Container>
                <div className="my-3">
                    <h3 ><u>Best</u></h3>
                    <Row className="justify-content-center">
17
                        <Card className="mx-1" style={{ width: '18rem' }}>
18
19
20
21
22
23
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
24
                        <Card className="mx-1" style={{ width: '18rem' }}>
25
26
27
28
29
30
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
31
                        <Card className="mx-1" style={{ width: '18rem' }}>
32
33
34
35
36
37
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
38
                        <Card className="mx-1" style={{ width: '18rem' }}>
39
40
41
42
43
44
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
45
                        <Card className="mx-1" style={{ width: '18rem' }}>
46
47
48
49
50
51
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
52
                        <Card className="mx-1" style={{ width: '18rem' }}>
53
54
55
56
57
58
59
60
61
62
63
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
                    </Row>
                </div>
                <div className="my-3">
                    <h3><u>New Arrival</u></h3>
                    <Row className="justify-content-center">
64
                        <Card className="mx-1" style={{ width: '18rem' }}>
65
66
67
68
69
70
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
71
                        <Card className="mx-1" style={{ width: '18rem' }}>
72
73
74
75
76
77
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
78
                        <Card className="mx-1" style={{ width: '18rem' }}>
79
80
81
82
83
84
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
85
                        <Card className="mx-1" style={{ width: '18rem' }}>
86
87
88
89
90
91
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
92
                        <Card className="mx-1" style={{ width: '18rem' }}>
93
94
95
96
97
98
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
99
                        <Card className="mx-1" style={{ width: '18rem' }}>
100
101
102
103
104
105
106
107
108
                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
                            <Card.Body>
                                <Card.Title className="font-weight-bold">제품명</Card.Title>
                                <Card.Text>가격</Card.Text>
                            </Card.Body>
                        </Card>
                    </Row>
                </div>
            </Container>
Kim, Subin's avatar
Kim, Subin committed
109
110
111
112
113
        </div>
    )
}

export default Home