Home.js 6.04 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
import { Card, Container, Row } from 'react-bootstrap';
3

Kim, Subin's avatar
Kim, Subin committed
4
5
6
7

function Home() {
    return (
        <div>
kusang96's avatar
kusang96 committed
8
9
            <Container className="my-5">
                <div className="my-4">
kusang96's avatar
kusang96 committed
10
                    <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
kusang96's avatar
kusang96 committed
11
12
                    <Row className="justify-content-center mx-0">
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
13
14
15
16
17
18
                            <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>
kusang96's avatar
kusang96 committed
19
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
20
21
22
23
24
25
                            <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>
kusang96's avatar
kusang96 committed
26
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
27
28
29
30
31
32
                            <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>
kusang96's avatar
kusang96 committed
33
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
34
35
36
37
38
39
                            <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>
kusang96's avatar
kusang96 committed
40
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
41
42
43
44
45
46
                            <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>
kusang96's avatar
kusang96 committed
47
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
48
49
50
51
52
53
54
55
                            <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>
kusang96's avatar
kusang96 committed
56
                <div className="my-4">
kusang96's avatar
kusang96 committed
57
                    <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
kusang96's avatar
kusang96 committed
58
59
                    <Row className="justify-content-center mx-0">
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
60
61
62
63
64
65
                            <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>
kusang96's avatar
kusang96 committed
66
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
67
68
69
70
71
72
                            <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>
kusang96's avatar
kusang96 committed
73
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
74
75
76
77
78
79
                            <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>
kusang96's avatar
kusang96 committed
80
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
81
82
83
84
85
86
                            <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>
kusang96's avatar
kusang96 committed
87
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
88
89
90
91
92
93
                            <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>
kusang96's avatar
kusang96 committed
94
                        <Card className="mx-1 my-2" style={{ width: '18rem' }}>
95
96
97
98
99
100
101
102
103
                            <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
104
105
106
107
108
        </div>
    )
}

export default Home