Skip to content

GitLab

Commit c81f0b8a authored by 이재연's avatar 이재연
Browse files

UI끝...

parent c0b9c068
Show whitespace changes
Inline Side-by-side
client/.eslintcache deleted 100644 → 0
View file @ c0b9c068
[{"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\index.js":"1","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\App.js":"2","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\reportWebVitals.js":"3","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Admin.js":"4","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\ShoppingCart.js":"5","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Signup.js":"6","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Login.js":"7","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Home.js":"8","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Payment.js":"9","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\MainNav.js":"10","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\SubNav.js":"11","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\ProductsRegist.js":"12","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\Pagination.js":"13"},{"size":1364,"mtime":1609240129210,"results":"14","hashOfConfig":"15"},{"size":652,"mtime":1608705187305,"results":"16","hashOfConfig":"15"},{"size":362,"mtime":499162500000,"results":"17","hashOfConfig":"15"},{"size":4826,"mtime":1609240129179,"results":"18","hashOfConfig":"15"},{"size":4675,"mtime":1609240129200,"results":"19","hashOfConfig":"15"},{"size":5121,"mtime":1609244349031,"results":"20","hashOfConfig":"15"},{"size":3932,"mtime":1609245789103,"results":"21","hashOfConfig":"15"},{"size":6208,"mtime":1609240129182,"results":"22","hashOfConfig":"15"},{"size":6324,"mtime":1609240129185,"results":"23","hashOfConfig":"15"},{"size":1188,"mtime":1609240129167,"results":"24","hashOfConfig":"15"},{"size":5929,"mtime":1609240129173,"results":"25","hashOfConfig":"15"},{"size":319,"mtime":1609240129196,"results":"26","hashOfConfig":"15"},{"size":533,"mtime":1609240129169,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},"1f8h90z",{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"37","usedDeprecatedRules":"30"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"40","usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"43","messages":"44","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"45","messages":"46","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"47","usedDeprecatedRules":"30"},{"filePath":"48","messages":"49","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"50","usedDeprecatedRules":"30"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"53","usedDeprecatedRules":"30"},{"filePath":"54","messages":"55","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"56","usedDeprecatedRules":"30"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"59","usedDeprecatedRules":"30"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"62","usedDeprecatedRules":"30"},"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\index.js",[],["63","64"],"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\App.js",[],"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\reportWebVitals.js",[],"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Admin.js",["65","66","67","68"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport Nav1 from '../Components/MainNav';\r\nimport Nav2 from '../Components/SubNav';\r\n\r\nfunction Admin() {\r\n\r\n return (\r\n <div>\r\n <Nav1 />\r\n <Nav2 />\r\n \r\n </div>\r\n )\r\n}\r\n\r\nexport default Admin","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\ShoppingCart.js",["69","70","71","72"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport { Redirect } from 'react-router-dom';\r\nimport Nav1 from '../Components/MainNav';\r\nimport Nav2 from '../Components/SubNav';\r\n\r\nfunction ShoppingCart() {\r\n\r\n return (\r\n <div>\r\n <Nav1 />\r\n <Nav2 />\r\n \r\n </div>\r\n )\r\n}\r\n\r\nexport default ShoppingCart","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Signup.js",["73","74","75","76","77"],"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Login.js",["78","79","80","81"],"C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Home.js",["82","83","84"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport Nav1 from '../Components/MainNav';\r\nimport Nav2 from '../Components/SubNav';\r\n\r\nfunction Home() {\r\n\r\n return (\r\n <div>\r\n <Nav1 />\r\n <Nav2 />\r\n \r\n </div>\r\n )\r\n}\r\n\r\nexport default Home","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\Payment.js",["85","86","87"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport Nav1 from '../Components/MainNav';\r\nimport Nav2 from '../Components/SubNav';\r\n\r\nfunction Payment() {\r\n\r\n return (\r\n <div>\r\n <Nav1 />\r\n <Nav2 />\r\n \r\n </div>\r\n )\r\n}\r\n\r\nexport default Payment","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\MainNav.js",["88","89","90","91"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nfunction MainNav() {\r\n\r\n return (\r\n <div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MainNav","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\SubNav.js",["92","93","94","95"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nfunction SubNav() {\r\n\r\n return (\r\n <div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default SubNav","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Pages\\ProductsRegist.js",["96","97","98"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport MainNav from '../Components/MainNav';\r\nimport SubNav from '../Components/SubNav';\r\n\r\nfunction ProductsRegist() {\r\n\r\n return (\r\n <div>\r\n <MainNav />\r\n <SubNav />\r\n </div>\r\n )\r\n}\r\n\r\nexport default ProductsRegist","C:\\Users\\이재연\\Desktop\\2020\\shopping-mall\\client\\src\\Components\\Pagination.js",["99","100","101"],"import React, { useState, useEffect, useRef } from 'react';\r\nimport { Pagination } from 'react-bootstrap';\r\n\r\nfunction pagination() {\r\n let active = 1;\r\n let items = [];\r\n for (let number = 1; number <= 5; number++) {\r\n items.push(\r\n <Pagination.Item key={number} active={number === active}>\r\n {number}\r\n </Pagination.Item>,\r\n );\r\n }\r\n\r\n return (\r\n <Pagination className=\"justify-content-center mt-5\">{items}</Pagination>\r\n )\r\n}\r\n\r\nexport default pagination",{"ruleId":"102","replacedBy":"103"},{"ruleId":"104","replacedBy":"105"},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"112","line":2,"column":10,"nodeType":"108","messageId":"109","endLine":2,"endColumn":18},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"112","line":2,"column":10,"nodeType":"108","messageId":"109","endLine":2,"endColumn":18},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"112","line":2,"column":10,"nodeType":"108","messageId":"109","endLine":2,"endColumn":18},{"ruleId":"106","severity":1,"message":"113","line":6,"column":8,"nodeType":"108","messageId":"109","endLine":6,"endColumn":22},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"112","line":5,"column":16,"nodeType":"108","messageId":"109","endLine":5,"endColumn":24},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"114","line":2,"column":10,"nodeType":"108","messageId":"109","endLine":2,"endColumn":14},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"114","line":2,"column":10,"nodeType":"108","messageId":"109","endLine":2,"endColumn":14},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},{"ruleId":"106","severity":1,"message":"107","line":1,"column":17,"nodeType":"108","messageId":"109","endLine":1,"endColumn":25},{"ruleId":"106","severity":1,"message":"110","line":1,"column":27,"nodeType":"108","messageId":"109","endLine":1,"endColumn":36},{"ruleId":"106","severity":1,"message":"111","line":1,"column":38,"nodeType":"108","messageId":"109","endLine":1,"endColumn":44},"no-native-reassign",["115"],"no-negated-in-lhs",["116"],"no-unused-vars","'useState' is defined but never used.","Identifier","unusedVar","'useEffect' is defined but never used.","'useRef' is defined but never used.","'Redirect' is defined but never used.","'FormCheckInput' is defined but never used.","'Link' is defined but never used.","no-global-assign","no-unsafe-negation"]
client/.gitignore
View file @ c81f0b8a
...@@ -22,3 +22,4 @@ npm-debug.log* ...@@ -22,3 +22,4 @@ npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
package-lock.json package-lock.json
.eslintcache
\ No newline at end of file
client/package-lock.json
View file @ c81f0b8a
...@@ -12340,6 +12340,27 @@ ...@@ -12340,6 +12340,27 @@
"warning": "^4.0.3" "warning": "^4.0.3"
} }
}, },
"react-daum-postcode": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/react-daum-postcode/-/react-daum-postcode-2.0.2.tgz",
"integrity": "sha512-K1ScGNJeIk8lUqGf3mSn3flD1zJ+PmH1G54FplHxywlyKp8uG/+xrP1VEgDHKYBFJtpuiHvIUaJDFAh8m8zX9g==",
"requires": {
"prop-types": "^15.6.2",
"react": "^16.4.2"
},
"dependencies": {
"react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
}
}
},
"react-dev-utils": { "react-dev-utils": {
"version": "11.0.1", "version": "11.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz",
......
client/package.json
View file @ c81f0b8a
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.4.0",
"react-daum-postcode": "^2.0.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.1", "react-scripts": "4.0.1",
......
client/src/Components/SubNav.js
View file @ c81f0b8a
...@@ -22,7 +22,7 @@ function SubNav() { ...@@ -22,7 +22,7 @@ function SubNav() {
} }
return ( return (
<Nav fixed="top" className="flex-nowrap"> <Nav fixed="top" className="flex-nowrap" style={{overflowX: "auto"}}>
<NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}> <NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
<NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item> <NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>
<NavDropdown.Item href="/dress/short">SHORT DRESS</NavDropdown.Item> <NavDropdown.Item href="/dress/short">SHORT DRESS</NavDropdown.Item>
......
client/src/Pages/Login.js
View file @ c81f0b8a
...@@ -4,50 +4,63 @@ import Nav2 from '../Components/SubNav'; ...@@ -4,50 +4,63 @@ import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap' import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import { Link, Redirect } from 'react-router-dom' import { Link, Redirect } from 'react-router-dom'
function login(){ 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 ( return (
<div> <div>
<Nav1 /> <Nav1 />
<Nav2 /> <Nav2 />
<Container className="my-5"> <Container className="my-5">
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h3 className="text-center mt-5">Login</h3> <h3 className="text-center mt-5">Login</h3>
<Form className="p-5"> <Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
<Form.Group controlId="formBasicId"> <Form.Group controlId="formBasicId">
<Form.Row> <Form.Row>
<Form.Label for="id">아이디</Form.Label> <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
<Col> <Col sm={8} xs={12} as={Form.Control}
<Form.Control required
type="text" type="text"
id="id" id="id"
value={id} placeholder="ID"
onChange={({ target: { value } }) => user.d(value)} style={{ width: '160px' }}>
className="mx-sm-3" size="sm" placeholder="ID">
</Form.Control>
</Col> </Col>
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Row> <Form.Row>
<Form.Label for="password">비밀번호</Form.Label> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col> <Col sm={8} xs={12} as={Form.Control}
<Form.Control
type="password" type="password"
id="password" id="password"
value={password} placeholder="Password"
onChange={({ target: { value } }) => user.password(value)} style={{ width: '160px' }}
className="mx-sm-3" size="sm" placeholder="Password"></Form.Control> required />
</Col> <Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button> <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
<div className="loginLine"> <div className="loginLine">
<Link to="/signup" style={{ color: '#91877F' }} onClick={handleClick}>회원이 아니십니까?</Link> <Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
</div> </div>
</Form> </Form>
</Col> </Col>
......
client/src/Pages/ShoppingCart.js
View file @ c81f0b8a
...@@ -8,8 +8,8 @@ function ShoppingCart() { ...@@ -8,8 +8,8 @@ function ShoppingCart() {
return ( return (
<div> <div>
<Nav1 /> <MainNav />
<Nav2 /> <SubNav />
<div className="justify-content-center"> <div 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" style={{ color: '#F2A400' }}>장바구니</h3>
<div> <div>
......
client/src/Pages/Signup.js
View file @ c81f0b8a
...@@ -4,9 +4,67 @@ import Nav1 from '../Components/MainNav'; ...@@ -4,9 +4,67 @@ import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav'; import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row } from 'react-bootstrap' import { Form, Col, Container, Button, Row } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput'; import FormCheckInput from 'react-bootstrap/esm/FormCheckInput';
import DaumPostcode from "react-daum-postcode";
function Signup() { function Signup() {
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 = {
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 ( return (
<div> <div>
...@@ -15,10 +73,10 @@ function Signup() { ...@@ -15,10 +73,10 @@ function Signup() {
<Nav2 /> <Nav2 />
<Container className="my-5"> <Container className="my-5">
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{background:'#F7F3F3'}}> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2> <h2 className="text-center mt-5">Sign Up</h2>
<Form className="p-5"> <Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5">
...@@ -27,7 +85,12 @@ function Signup() { ...@@ -27,7 +85,12 @@ function Signup() {
<Form.Label for="name">이 름</Form.Label> <Form.Label for="name">이 름</Form.Label>
<Col> <Col>
<Form.Control type="text" id="name" size="sm" placeholder="" className="mx-sm-3"></Form.Control> <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> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
...@@ -37,10 +100,11 @@ function Signup() { ...@@ -37,10 +100,11 @@ function Signup() {
<Form.Label for="number">주민등록번호</Form.Label> <Form.Label for="number">주민등록번호</Form.Label>
<Col as={Row}> <Col as={Row}>
<Form.Control type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{ width: '120px' }}></Form.Control> <Form.Control required type="text" id="number1" size="sm" maxlength="6" className="mx-sm-3" style={{ width: '120px' }}></Form.Control>
- -
<Form.Control type="text" id="number2" size="sm" maxlength="1" className="mx-sm-3" style={{ width: '25px' }}></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> </Col>
</Form.Row> </Form.Row>
...@@ -50,7 +114,8 @@ function Signup() { ...@@ -50,7 +114,8 @@ function Signup() {
<Form.Label for="id">아이디</Form.Label> <Form.Label for="id">아이디</Form.Label>
<Col> <Col>
<Form.Control type="text" id="id" size="sm" placeholder="ID" className="mx-sm-3"></Form.Control> <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> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
...@@ -60,8 +125,10 @@ function Signup() { ...@@ -60,8 +125,10 @@ function Signup() {
<Form.Label for="password">비밀번호</Form.Label> <Form.Label for="password">비밀번호</Form.Label>
<Col> <Col>
<Form.Control type="password" id="password" size="sm" placeholder="Password"aria-describedby="passwordHelpBlock" className="mx-sm-3"></Form.Control> <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.Text id="password" muted> 8-15자로 입력해주세요.</Form.Text>
<Form.Control.Feedback type="invalid"> 비밀번호를 입력하세요.
</Form.Control.Feedback>
</Col> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
...@@ -71,7 +138,9 @@ function Signup() { ...@@ -71,7 +138,9 @@ function Signup() {
<Form.Label for="password2">비밀번호 확인</Form.Label> <Form.Label for="password2">비밀번호 확인</Form.Label>
<Col> <Col>
<Form.Control type="password" id="password2" size="sm" placeholder="" className="mx-sm-3"></Form.Control> <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> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
...@@ -81,7 +150,8 @@ function Signup() { ...@@ -81,7 +150,8 @@ function Signup() {
<Form.Label for="tel">휴대전화</Form.Label> <Form.Label for="tel">휴대전화</Form.Label>
<Col> <Col>
<Form.Control type="text" id="tel" size="sm" placeholder="" className="mx-sm-3"></Form.Control> <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> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
...@@ -91,12 +161,15 @@ function Signup() { ...@@ -91,12 +161,15 @@ function Signup() {
<Form.Label>주 소</Form.Label> <Form.Label>주 소</Form.Label>
<Col> <Col>
<Form.Control type="text" id="add" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control> <button type="button" onClick={postClick}>우편번호 찾기</button>
{post}
<Form.Control required type="text" id="add2" size="sm" placeholder="상세주소" className="mx-sm-3"></Form.Control>
<Form.Control.Feedback type="invalid" > 상세 주소를 입력하세요. </Form.Control.Feedback>
</Col> </Col>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button style={{background:'#91877F', borderColor:'#91877F'}} type="submit" block>Sign Up</Button> <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Sign Up</Button>
</Form> </Form>
</Col> </Col>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment