Merge remote-tracking branch 'origin/ourMaster' into who

.gitignore

+node_modules
\ No newline at end of file

client/.gitignore

@@ -22,4 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+
 .eslintcache
+
+.yarn.lock

client/package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
+    "react-daum-postcode": "^2.0.2",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",

client/src/App.js

 import logo from './logo.svg';
 import './App.css';
+import { Button } from 'react-bootstrap';
+import { Router } from 'react-router-dom';
+import Login from './Login'
+import LogoutButton from './LogoutButton'
+import {signIn} from './auth'
+
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  const [user,setUser]=useState(null);
+
+  const authenticated =user !=null;
+
+  const login =({id, password}) => setUser(signIn({id,password}));
+
+  const logout=()=>setUser(null);
+
+
 }
 
 export default App;

client/src/Auth.js

+const users=[
+    { id:'wodus', password:'123'},
+    {id:'kim', password:'456'},
+]
+
+export function signIn({id,password}){
+    const user=users.find(user=>user.id===id && user.password===password);
+    if (user===undefined) throw new Error();
+    return user;
+}
\ No newline at end of file

client/src/AuthRoute.js

+import React from 'react'
+import {Route, Redirect} from "react-router-dom"
+
+function AuthRoute({})
\ No newline at end of file

client/src/Pages/Login.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
-function Login() {
+import { Link, Redirect } from 'react-router-dom';
+import Nav1 from '../Components/MainNav';
+import Nav2 from '../Components/SubNav';
+import { Form, Col, Container, Button, Row } from 'react-bootstrap';
 
+function Login(){
+
+    const [validated,setValidated]=useState(false);
+
+    const handleSubmit=(e)=>{
+        const form =e.currentTarget;
+        console.log(form)
+        if(form.checkValidity() === false){
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        setValidated(true);
+    }
     return (
         <div>
-            <MainNav />
-            <SubNav />
+            <Nav1 />
+            <Nav2 />
+            <Container className="my-5">
+                <Row className="justify-content-center">
+                    <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
+                        <h3 className="text-center mt-5">Login</h3>
+                        <Form  noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
+                            <Form.Group controlId="formBasicId">
+                                <Form.Row>
+                                    <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
+                                        <Col sm={8} xs={12} as={Form.Control}
+                                            required
+                                            type="text"
+                                            id="id"
+                                            placeholder="ID"
+                                            style={{ width: '160px' }}>
+                                        </Col>
+                                        <Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicPassword">
+                                <Form.Row>
+                                    <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
+                                        <Col sm={8} xs={12} as={Form.Control}
+                                            type="password"
+                                            id="password"
+                                            placeholder="Password"
+                                            style={{ width: '160px' }}
+                                            required />
+                                    <Form.Control.Feedback className="text-center" type="invalid">
+                                        비밀번호를 입력하세요.
+                                    </Form.Control.Feedback>
+                                </Form.Row>
+                            </Form.Group>
+                            <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
+                            <div className="loginLine">
+                                <Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
+                            </div>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     )
 }

client/src/Pages/LogoutButton.js

+import React from 'react'
+import {withRouter} from 'react-router-dom'
+
+function LogoutButton({logout,history}){
+    const handleClick = () =>{
+        logout()
+        history.push("/")
+    }
+    return <button onClick={handleClick}>Logout</button>
+}
+
+export default withRouter(LogoutButton)
\ No newline at end of file

client/src/Pages/Payment.js

 import React, { useState, useEffect, useRef } from 'react';
 import MainNav from '../Components/MainNav';
 import SubNav from '../Components/SubNav';
+import DaumPostcode from "react-daum-postcode";
 import { Container, Card, Row, Col, Button, Form } from 'react-bootstrap';
 
 function Payment() {
 
     const [paymentWay, setPaymentWay] = useState([])
+    const [isAddress, setIsAddress] = useState("");
+    const [isZoneCode, setIsZoneCode] = useState();
+    const [isPostOpen, setIsPostOpen] = useState();
+    const [post, setPost] = useState([])
+
+    function postClick() {
+        if (post.length !== 0) {
+            setPost([])
+        }
+        else {
+            setPost(
+                <div>
+                    <DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
+                </div>
+            )
+        }
+
+    }
+
+    const handleComplete = (data) => {
+        let fullAddress = data.address;
+        let extraAddress = "";
+
+        if (data.addressType === "R") {
+            if (data.bname !== "") {
+                extraAddress += data.bname;
+            }
+            if (data.buildingName !== "") {
+                extraAddress +=
+                    extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
+            }
+            fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
+        }
+        setIsZoneCode(data.zonecode);
+        setIsAddress(fullAddress);
+        setIsPostOpen(false);
+    };
+    const postCodeStyle = {
+        display: "block",
+        position: "absolute",
+        // top: "50%",
+        width: "400px",
+        height: "500px",
+        padding: "7px",
+    };
 
     function handleClick() {
+
         if (paymentWay.length !== 0) {
             setPaymentWay([])
         }
@@ -40,7 +87,6 @@ function Payment() {
     function handleClick2() {
         if (paymentWay.length !== 0) {
             setPaymentWay([])
-            // paymentWay=[]
         }
     }
 
@@ -49,9 +95,9 @@ function Payment() {
             <MainNav />
             <SubNav />
             <Container>
-                <h3 className="my-5 font-weight-bold text-center" style={{ color: '#F2A400' }}>주문/결제</h3>
+                <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
                 <div>
-                    <h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문자 정보</h5>
+                    <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문자 정보</h5>
                     <Form>
                         <Form.Group controlId="formBasicName">
                             <Form.Label>이름</Form.Label>
@@ -70,11 +116,18 @@ function Payment() {
                 </div>
 
                 <div>
-                    <h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">배송지 정보</h5>
+                    <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>배송지 정보</h5>
+                    <Row>
+
+                        <Col>
+                            <Button className="my-3" style={{ background: "#91877F", borderColor: '#91877F' }} onClick={postClick}>우편번호</Button>
+                        </Col>
+                    </Row>
+                    {post}
                 </div>
 
                 <div>
-                    <h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문상품정보</h5>
+                    <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h5>
                     <Card >
                         <Row>
                             <Col className="text-center align-self-center">
@@ -90,10 +143,10 @@ function Payment() {
                                     <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                     <Card.Text>가격</Card.Text>
                                     <Card.Text>옵션</Card.Text>
-                                    <div>
-                                        <Button variant="outline-dark" size="sm">-</Button>
-                                        <input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input>
-                                        <Button variant="outline-dark" size="sm">+</Button>
+                                    <div className="align-items-center" >
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
+                                        <input type="text"  placeholder="1"  style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
                                     </div>
                                 </Card.Body>
                             </Col>
@@ -101,7 +154,7 @@ function Payment() {
                     </Card>
                 </div>
 
-                <div className="bg-light p-5 m-5">
+                <div className="p-5 m-5" style={{ background: '#F7F3F3' }}>
                     <ul className="pl-0" style={{ listStyle: 'none' }}>
                         <li>
                             <span className="text-secondary">총 상품금액</span>
@@ -118,7 +171,7 @@ function Payment() {
                 </div>
 
                 <div>
-                    <h5 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">결제수단</h5>
+                    <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
                     <div className="text-center">
                         <Button variant="success" onClick={handleClick} >무통장입금</Button>
                         <Button variant="warning" style={{ color: '#ffffff' }} onClick={handleClick2}>카카오페이</Button>

client/src/Pages/Products.js

@@ -4,9 +4,20 @@ import SubNav from '../Components/SubNav';
 import { Row, Col, Form, Card } from 'react-bootstrap';
 
 function Products() {
+    function handleClick(e) {
+        const box = e.target.parentNode.parentNode
+        box.style.display = "none"
+    }
 
     return (
         <div>
+            {/* <style type="text/css">
+                {`
+                .close {
+                    color: 
+                }
+                `}
+            </style> */}
             <MainNav />
             <SubNav />
             <Row className="justify-content-center mt-5">
@@ -33,32 +44,34 @@ function Products() {
                     <div></div>
                 </Col>
             </Row>
-            <div className="m-5">
-                <h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천</h6>
+            <div className="mx-5 pt-3" style={{ position: "fixed", bottom: "0", backgroundColor: "#fff" }}>
+                <h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
+                <a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem" }}>X</a>
+                </h6>
                 <Row className="justify-content-space" style={{ objectFit: "contain", width: "100%" }}>
                     <Col as={Card} style={{ width: "16rem" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" />
+                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
                         <Card.Body>
                             <Card.Title>클로타탄원피스</Card.Title>
                             <Card.Text>구매자 수: 30</Card.Text>
                         </Card.Body>
                     </Col>
                     <Col as={Card} style={{ width: "16rem" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" />
+                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
                         <Card.Body>
                             <Card.Title>클로타탄원피스</Card.Title>
                             <Card.Text>구매자 수: 30</Card.Text>
                         </Card.Body>
                     </Col>
                     <Col as={Card} style={{ width: "16rem" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" />
+                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
                         <Card.Body>
                             <Card.Title>클로타탄원피스</Card.Title>
                             <Card.Text>구매자 수: 30</Card.Text>
                         </Card.Body>
                     </Col>
                     <Col as={Card} style={{ width: "16rem" }}>
-                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" />
+                        <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain", width: "10rem", height: "10rem" }} />
                         <Card.Body>
                             <Card.Title>클로타탄원피스</Card.Title>
                             <Card.Text>구매자 수: 30</Card.Text>

client/src/Pages/ProductsRegist.js

 import React, { useState, useEffect, useRef } from 'react';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
+import Nav1 from '../Components/MainNav';
+import Nav2 from '../Components/SubNav';
+import { Row, Col, Button, Form, Container } from 'react-bootstrap';
 
-function ProductsRegist() {
 
+function ProductsRegist() {
     return (
         <div>
-            <MainNav />
-            <SubNav />
+            <Nav1 />
+            <Nav2 />
+            <Container>
+                <Row className="justify-content-md-center">
+                    <Col md={6} className="border m-5 p-3" style={{background:'#F7F3F3'}}>
+                        <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
+                        <Form className="p-5">
+                            <Form.Group controlId="productNameform">
+                                <Form.Label>상품명</Form.Label>
+                                <Form.Control type="text" placeholder="상품명" />
+                            </Form.Group>
+                            <Form.Group controlId="productAmountform">
+                                <Form.Label>수량</Form.Label>
+                                <Form.Control type="text" placeholder="숫자만 입력해주세요" />
+                            </Form.Group>
+                            <Form.Group controlId="productPriceform">
+                                <Form.Label>가격</Form.Label>
+                                <Form.Control type="text" placeholder="숫자만 입력해주세요" />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>분류</Form.Label>
+                                <Row>
+                                    <Col md={6}>
+                                        <Form.Control as="select" placeholder="상위분류">
+                                            <option>Pants</option>
+                                            <option>Skirt</option>
+                                            <option>Outer</option>
+                                        </Form.Control>
+                                    </Col>
+                                    <Col md={6}>
+                                        <Form.Control as="select" placeholder="하위분류">
+                                            <option>긴바지</option>
+                                            <option>반바지</option>
+                                            <option>청바지</option>
+                                        </Form.Control>
+                                    </Col>
+                                </Row>
+                            </Form.Group>
+                            <Form.Group controlId="productDescriptionform">
+                                <Form.Label>상품설명</Form.Label>
+                                <Form.Control as="textarea" rows={3} placeholder="상품을 설명해주세요" />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>대표이미지</Form.Label>
+                                <Form.File id="productImageform" />
+                            </Form.Group>
+                            <Button className="float-right" variant="primary" type="submit" style={{background:'#91877F', borderColor:'#91877F'}}>등록</Button>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     )
 }

client/src/Pages/ShoppingCart.js

@@ -11,9 +11,9 @@ function ShoppingCart() {
             <MainNav />
             <SubNav />
             <Container className="justify-content-center">
-                <h3 className="my-5 font-weight-bold text-center" style={{ color: '#F2A400' }}>장바구니</h3>
+                <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
                 <div>
-                    <h4 className="bg-light font-weight-bold py-3 border-top border-bottom text-center">주문상품정보</h4>
+                    <h4 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>주문상품정보</h4>
                     <Card >
                         <Row>
                             <Col>
@@ -22,15 +22,15 @@ function ShoppingCart() {
                             </Col>
                             <Col md={6}>
                                 <Card.Body>
-                                    <img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
+                                    <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
                                     <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                     <Card.Text>가격</Card.Text>
                                     <Card.Text>옵션</Card.Text>
                                     <Card.Text>수량</Card.Text>
                                     <div>
-                                        <Button variant="outline-dark" size="sm">-</Button>
-                                        <input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input>
-                                        <Button variant="outline-dark" size="sm">+</Button>
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
+                                        <input type="text" placeholder="1" style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
                                     </div>
                                 </Card.Body>
                             </Col>
@@ -44,22 +44,22 @@ function ShoppingCart() {
                             </Col>
                             <Col>
                                 <Card.Body>
-                                    <img src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
+                                    <input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" />
                                     <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
                                     <Card.Text>가격</Card.Text>
                                     <Card.Text>옵션</Card.Text>
                                     <Card.Text>수량</Card.Text>
-                                    <div>
-                                        <Button variant="outline-dark" size="sm">-</Button>
-                                        <input type="text" style={{ width: '30px' }} className="align-middle mx-1" readOnly></input>
-                                        <Button variant="outline-dark" size="sm">+</Button>
+                                    <div className="align-items-center" >
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" />
+                                        <input type="text"  placeholder="1"  style={{ width: '30px' }} className="text-center align-middle mx-1" readOnly></input>
+                                        <input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" />
                                     </div>
                                 </Card.Body>
                             </Col>
                         </Row>
                     </Card>
                 </div>
-                <div className="bg-light p-5 m-5">
+                <div className="p-5 m-5"  style={{background:'#F7F3F3'}}>
                     <ul className="pl-0" style={{ listStyle: 'none' }}>
                         <li>
                             <span className="text-secondary">총 상품금액</span>
@@ -75,7 +75,7 @@ function ShoppingCart() {
                     </div>
                 </div>
                 <div className="text-center">
-                    <Button className="px-5">결제하기</Button>
+                    <Button className="px-5" style={{ background: "#91877F", borderColor: '#91877F' }} href="/payment">결제하기</Button>
                 </div>
             </Container>
 

client/src/Pages/Signup.js

 import React, { useState, useEffect, useRef } from 'react';
 import { Redirect } from 'react-router-dom';
-import MainNav from '../Components/MainNav';
-import SubNav from '../Components/SubNav';
+import Nav1 from '../Components/MainNav';
+import Nav2 from '../Components/SubNav';
+import { Form, Col, Container, Button, Row } from 'react-bootstrap';
+import DaumPostcode from "react-daum-postcode";
+
 
 function Signup() {
+    const [address,setAddress] =useState("")
 
+    const handleComplete = (data) => {
+        let fullAddress = data.address;
+        let extraAddress = "";
 
-    return (
-        <div class="form-container">
-            <MainNav />
-            <SubNav />
-            <form id="form" class="form">
-                <h1>회원가입</h1>
-                <div class="form-control">
-                    <label for="id">아이디</label>
-                    <input type="text" id="id" placeholder="아이디를 입력하세요"></input>
+        console.log(data)
 
-                    <label for="name">본명</label>
-                    <input type="text" id="name" placeholder="본명을 입력하세요"></input>
+        if (data.addressType === "R") {
+            if (data.bname !== "") {
+                extraAddress += data.bname;
+                console.log(extraAddress)
+            }
+            if (data.buildingName !== "") {
+                extraAddress +=
+                    extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
+            }
+            fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
+        }
+        setAddress({full: fullAddress, zone: data.zonecode});
 
-                    <label for="password">비밀번호</label>
-                    <input type="password" id="password" placeholder="비밀번호를 입력하세요"></input>
+        console.log(fullAddress);
+    }
 
-                    <label for="password2">비밀번호 확인</label>
-                    <input type="password" id="password2" placeholder="비밀번호를 한번 더 입력하세요"></input>
+    const Postcode = () => {
 
-                    <label for="tel">휴대폰 번호</label>
-                    <input type="text" id="tel" placeholder="휴대폰 번호를 입력하세요"></input>
 
-                    <label for="add">주소</label>
-                </div>
-            </form>
+        return (
+            <DaumPostcode
+                onComplete={handleComplete}
+            />
+        );
+    }
+
+
+    const [post, setPost] = useState([]);
+
+    function postClick() {
+        if (post.length !== 0) {
+            setPost([])
+        } else {
+            setPost(
+                <div>
+                    <DaumPostcode style={postCodeStyle} onComplete={handleComplete} />
                 </div>
+            )
+
+        }
+    }
+    const postCodeStyle = {
+        position: "absolute",
+        width: "400px",
+        height: "500px",
+        padding: "7px",
+    };
+
+
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (e) => {
+        const form = e.currentTarget;
+        console.log(form)
+        if (form.checkValidity() === false) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        setValidated(true);
+    }
 
+    return (
+        <div>
+            <Nav1 />
+            <Nav2 />
+            <Container className="my-5">
+                <Row className="justify-content-center">
+                    <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
+                        <h2 className="text-center mt-5">Sign Up</h2>
+                        <Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
+                            <Form.Group controlId="formBasicName">
+                                <Form.Row>
+                                    <Form.Label for="name">이 름</Form.Label>
+                                    <Col>
+                                        <Form.Control
+                                            required
+                                            type="text" id="name"
+                                            size="sm" placeholder="" className="mx-sm-3">
+                                        </Form.Control>
+                                        <Form.Control.Feedback type="invalid">이름을 입력하세요. </Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicNumber">
+                                <Form.Row>
+                                    <Form.Label for="number">주민등록번호</Form.Label>
+
+                                    <Col as={Row}>
+                                        <Form.Control required type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{ width: '120px' }}></Form.Control>
+                                    -
+                                    <Form.Control required type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{ width: '25px' }}></Form.Control>
+                                    ******
+                                    <Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+                            <Form.Group controlId="formBasicId">
+                                <Form.Row>
+                                    <Form.Label for="id">아이디</Form.Label>
+
+                                    <Col>
+                                        <Form.Control required type="text" id="id" size="sm" placeholder="ID" className="mx-sm-3"></Form.Control>
+                                        <Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicPassword">
+                                <Form.Row>
+                                    <Form.Label for="password">비밀번호</Form.Label>
+
+                                    <Col>
+                                        <Form.Control required type="password" id="password" size="sm" placeholder="Password" aria-describedby="passwordHelpBlock" className="mx-sm-3"></Form.Control>
+                                        <Form.Text id="password" muted> 8-15자로 입력해주세요.</Form.Text>
+                                        <Form.Control.Feedback type="invalid"> 비밀번호를 입력하세요.
+                                    </Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicPassword2">
+                                <Form.Row>
+                                    <Form.Label for="password2">비밀번호 확인</Form.Label>
+
+                                    <Col>
+                                        <Form.Control required type="password" id="password2" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
+                                        <Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
+                                    </Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicTel">
+                                <Form.Row>
+                                    <Form.Label for="tel">휴대전화</Form.Label>
+
+                                    <Col>
+                                        <Form.Control required type="text" id="tel" size="sm" placeholder="" className="mx-sm-3"></Form.Control>
+                                        <Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
+                                    </Col>
+                                </Form.Row>
+                            </Form.Group>
+
+                            <Form.Group controlId="formBasicAdd">
+                                <Form.Row>
+                                    {console.log("address=", address)}
+                                    <Form.Label className="mx-3">주 소</Form.Label>
+                                    <Form.Control required type="text" id="add" size="sm " style={{ width: '120px' }} value={address.zone} disabled={(address.zone == null) ? false : true} ></Form.Control>                                        
+                                    <Button size="sm" style={{ background: '#91877F', borderColor: '#91877F' }} className="mx-3" type="button" onClick={postClick}>주소 찾기</Button>
+                                        {post}
+                                    <Form.Control required type="text" id="add" size="sm " value={address.full} disabled={(address.zone == null) ? false : true} className="mx-3"style={{width:'330px'}}></Form.Control>
+                                    <Form.Control required type="text" id="add2" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
+                                        <Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
+                                </Form.Row>
+                            </Form.Group>
+                            <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Sign Up</Button>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
     )
 }