Admin.js 6.5 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 Pagination from '../Components/Pagination';
kusang96's avatar
kusang96 committed
3
import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
Kim, Subin's avatar
Kim, Subin committed
4
5

function Admin() {
6
7
8
    function handleClick(e) {
        const card = e.target.parentNode.parentNode
        alert('해당 상품을 성공적으로 삭제하였습니다.')
kusang96's avatar
kusang96 committed
9
10
11
12
13
        card.remove()
    }

    function handleSubmit(e) {
        e.preventDefault()
14
    }
Kim, Subin's avatar
Kim, Subin committed
15
16
17

    return (
        <div>
18
19
20
21
22
23
24
25
26
27
28
29
30
            <style type="text/css">
                {`
                .btn {
                    background-color: #CDC5C2;
                    border-color: #CDC5C2;
                }

                .btn:hover, .btn:active, .btn:focus {
                    background-color: #91877F;
                    border-color: #91877F;
                }
                `}
            </style>
Jiwon Yoon's avatar
Jiwon Yoon committed
31
            <Container>
kusang96's avatar
kusang96 committed
32
33
                <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
                    <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
34
                    <Button type="submit" className="px-2">
kusang96's avatar
dd    
kusang96 committed
35
                        <img src="icon/search.svg" width="20" height="20" />
Kim, Subin's avatar
Kim, Subin committed
36
                    </Button>
Jiwon Yoon's avatar
Jiwon Yoon committed
37
                    <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
kusang96's avatar
kusang96 committed
38
39
40
41
42
43
44
45
                </Row>
                <Row className="justify-content-start m-5">
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>케이시앵글부츠(SH)</Card.Title>
                            <Card.Text>
                                재고: 8<br />
46
                            구매자 : 10
47
                        </Card.Text>
kusang96's avatar
kusang96 committed
48
49
50
51
52
53
54
55
56
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>메리제인플랫(SH)</Card.Title>
                            <Card.Text>
                                재고: 20<br />
57
                            구매자 : 60
58
                        </Card.Text>
kusang96's avatar
kusang96 committed
59
60
61
62
63
64
65
66
67
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>솔티드스니커즈(SH)</Card.Title>
                            <Card.Text>
                                재고: 34<br />
68
                            구매자 : 5
69
                        </Card.Text>
kusang96's avatar
kusang96 committed
70
71
72
73
74
75
76
77
78
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>버켄슬리퍼(SH)</Card.Title>
                            <Card.Text>
                                재고: 50<br />
79
80
                            구매자 : 18
                        </Card.Text>
kusang96's avatar
kusang96 committed
81
82
83
84
85
86
87
88
89
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>크레센도 하이힐펌프스</Card.Title>
                            <Card.Text>
                                재고: 35<br />
90
                            구매자 : 70
91
                        </Card.Text>
kusang96's avatar
kusang96 committed
92
93
94
95
96
97
98
99
100
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
                            <Card.Text>
                                재고: 40<br />
101
                            구매자 : 30
102
                        </Card.Text>
kusang96's avatar
kusang96 committed
103
104
105
106
107
108
109
110
111
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                    <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
                        <Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
                        <Card.Body>
                            <Card.Title>포웰3.5cm 스니커즈</Card.Title>
                            <Card.Text>
                                재고: 15<br />
112
                            구매자 : 50
113
                        </Card.Text>
kusang96's avatar
kusang96 committed
114
115
116
117
118
                            <Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
                        </Card.Body>
                    </Card>
                </Row>
                <Pagination />
Jiwon Yoon's avatar
Jiwon Yoon committed
119
            </Container>
Kim, Subin's avatar
Kim, Subin committed
120
        </div>
Kim, Subin's avatar
Kim, Subin committed
121

Kim, Subin's avatar
Kim, Subin committed
122
123
124
125
    )
}

export default Admin