647

client/src/Pages/Mypage.js

 import React from 'react'
-import { Tab, Tabs, Card, Image, Button, Container, Row, Col } from 'react-bootstrap'
+import { Tab, Tabs, Card, Image, Container, Row, Col, Table, Badge } from 'react-bootstrap'
 import mypagetiger from '../mypagetiger.svg';
 import person from '../person.svg';
 
 
 function Mypage() {
   return (
-
-    <Container className="justify-content-center py-5">
-      <article id="top" class="wrapper style1">
-        <Card className="px-3 py-3">
-          <Row className="px-3">
-            <Image src={person} roundedCircle className="img-thumbnail mx-3 justify-content-center" />
-            <Col>
+    <Container className="px-5 justify-content-center">
+      <h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
+      <div className="p-3">
+        <Card md={3} className="p-3 mb-4" style={{ background: '#F7F3F3' }}>
           <Row>
-              
-              <h1 className="my-4 justify-content-center">
+            <Col md={4} className="text-center ">
+              <Image src={person} roundedCircle className="img-thumbnail" />
+            </Col>
+            <Col>
+              <Row className="my-4 text-center">
+                <Col className="text-size-adjust">
+                  <h2>
                     <Image src={mypagetiger} width={"30px"} />
-                <strong> Login.user </strong> 환영합니다!
-              </h1>
-                  환영합니다.
+                    <strong> Login.user</strong> <small>님, 환영합니다. </small>
+                    <Badge className="badge-secondary">New</Badge>
+
+                  </h2>
+                </Col>
               </Row>
 
-              <Row className="justify-content-center">
-                <Tabs defaultActiveKey="mypage" id="uncontrolled-tab-example">
-                  <Tab eventKey="주문현황" title="주문현황">
-                  </Tab>
-                  <Tab eventKey="배송중" title="배송중">
-                  </Tab>
-                  <Tab eventKey="배송완료" title="배송완료">
-                  </Tab>
-                </Tabs>
+              <Row className="my-3 px-3">
+                <Card.Body>
+                    <Card.Text>Email : </Card.Text>
+                    <Card.Text>Address : </Card.Text>
+                </Card.Body>
               </Row>
             </Col>
           </Row>
         </Card>
-      </article>
-
+        <Row className="my-3 px-3">
+          <Table>
+            <thead style={{ background: '#F7F3F3' }}>
+              <tr>
+                <th scope="col">주문현황</th>
+                <th scope="col">배송중</th>
+                <th scope="col">배송완료</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>Mark</td>
+                <td>Otto</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>Jacob</td>
+                <td>Thornton</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td colspan="2">Larry the Bird</td>
+              </tr>
+            </tbody>
+          </Table>
+        </Row>
+      </div>
 
     </Container >