diff --git a/public/Image/photo.png b/public/Image/photo.png
new file mode 100644
index 0000000..c2ec51a
Binary files /dev/null and b/public/Image/photo.png differ
diff --git a/public/Image/pt1.png b/public/Image/pt1.png
new file mode 100644
index 0000000..5e6ab57
Binary files /dev/null and b/public/Image/pt1.png differ
diff --git a/public/Image/pt2.png b/public/Image/pt2.png
new file mode 100644
index 0000000..8b09702
Binary files /dev/null and b/public/Image/pt2.png differ
diff --git a/public/Image/pt3.png b/public/Image/pt3.png
new file mode 100644
index 0000000..dafc1ca
Binary files /dev/null and b/public/Image/pt3.png differ
diff --git a/src/App.js b/src/App.js
index 5fff9f7..1ae7c11 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
-import './App.css';
-import React, {useEffect, useState} from 'react';
+import "./App.css";
+import React, { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
-import axios from 'axios';
+import axios from "axios";
import SelfAuth from "./Page/SignUp/SelfAuth";
import InputInfo from "./Page/SignUp/InputInfo";
import MemberAgree from "./Page/SignUp/MemberAgree";
@@ -13,39 +13,41 @@ import Auth from "./Page/Auth";
import Profile from "./Page/Profile";
import FindPw from "./Page/FindPw";
import MainPage from "./Page/MainPage";
-
+import Register from "./Page/Register";
+import RegisterSuccess from "./Page/RegisterSuccess";
function App() {
- const [hello, setHello] = useState('')
+ const [hello, setHello] = useState("");
-// useEffect(() => {
-// axios.get('http://localhost:8080/api/hello')
-// .then(response => setHello(response.data))
-// .catch(error => console.log(error))
-// }, []);
+ // useEffect(() => {
+ // axios.get('http://localhost:8080/api/hello')
+ // .then(response => setHello(response.data))
+ // .catch(error => console.log(error))
+ // }, []);
- return (
+ return (
-
-
- }>
- }>
- }>
- }>
- }>
-
- {/* }>
+
+
+ }>
+ }>
+ }>
+ }>
+ }>
+
+ {/* }>
}>
}> */}
- }>
- }>
- }>
- }>
-
-
-
-
- );
+ }>
+ }>
+ }>
+ }>
+ }>
+ }>
+
+
+
+ );
}
export default App;
diff --git a/src/Components/head.js b/src/Components/head.js
index 8e37373..4925356 100644
--- a/src/Components/head.js
+++ b/src/Components/head.js
@@ -9,7 +9,7 @@ const Heads = styled.div`
height: 70px;
`;
const Center = styled.div`
- width: 1280px;
+ width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -57,11 +57,12 @@ const Head = () => {
src="Image/logo.png"
alt="logo"
style={{ width: "34px", height: "34px" }}
+ onClick={() => navigate("/")}
/>
인기매물 확인
- 매물 등록하기
+ navigate("/register")}>매물 등록하기
CONTACT_US
diff --git a/src/Page/Register.js b/src/Page/Register.js
new file mode 100644
index 0000000..916ba40
--- /dev/null
+++ b/src/Page/Register.js
@@ -0,0 +1,343 @@
+import styled, { css } from "styled-components";
+import Head from "../Components/head";
+import { Autocomplete, TextField } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import useDetectClose from "../hooks/useDetectClose";
+
+const Div = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+`;
+const H1 = styled.h1`
+ margin-top: 100px;
+ display: flex;
+ height: 68px;
+ font-size: 32px;
+ font-weight: bold;
+`;
+const Main = styled.div`
+ display: flex;
+ width: 1200px;
+ flex-direction: column;
+ & > h2 {
+ display: flex;
+ justify-content: flex-start;
+ }
+`;
+const Box1 = styled.div`
+ background-color: #fafafa;
+ width: 1232px;
+ height: 278px;
+ border-radius: 30px;
+ margin-top: 20px;
+`;
+const Box2 = styled.div`
+ background-color: #fafafa;
+ width: 1232px;
+ height: 120px;
+ border-radius: 30px;
+ margin-top: 20px;
+`;
+const H3 = styled.h3`
+ font-weight: "Bold";
+ font-size: 24px;
+ color: #f0c101;
+`;
+const Dis = styled.div`
+ display: flex;
+ width: ${(props) => props.width};
+ margin-left: ${(props) => props.marignLeft};
+ margin-top: ${(props) => props.marignTop};
+ justify-content: space-between;
+ align-items: center;
+`;
+const H4 = styled.h3`
+ display: flex;
+ font-size: 18px;
+ align-items: center;
+ justify-content: flex-start;
+ margin-left: ${(props) => props.paddingLeft};
+`;
+const Input = styled.input`
+ width: 375px;
+ height: 66px;
+ border-radius: 30px;
+ font-size: 22px;
+ font-weight: bold;
+ text-indent: 50px;
+ border: 1px solid black;
+`;
+const H5 = styled.h4`
+ font-size: 20px;
+ text-decoration: underline;
+ color: #007b59;
+`;
+const Btn = styled.div`
+ margin-top: 66px;
+ display: flex;
+ justify-content: flex-end;
+ & > button {
+ width: 168px;
+ height: 45px;
+ background-color: #007b59;
+ border-radius: 30px;
+ border: none;
+ color: white;
+ font-size: 18px;
+ font-weight: bold;
+ }
+`;
+
+const DropdownContainer = styled.div`
+ position: relative;
+ text-align: center;
+`;
+
+const Menu = styled.div`
+ background: white;
+ position: absolute;
+ top: 52px;
+ left: 50%;
+ width: ${(props) => props.width};
+ height: ${(props) => props.height};
+ text-align: center;
+ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 30px;
+ opacity: 0;
+ visibility: hidden;
+ transform: translate(-50%, -20px);
+ transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
+ z-index: 9;
+
+ &:after {
+ content: "";
+ height: 0;
+ width: 0;
+ position: absolute;
+ top: -3px;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border: 12px solid transparent;
+ border-top-width: 0;
+ }
+
+ ${({ isDropped }) =>
+ isDropped &&
+ css`
+ opacity: 1;
+ visibility: visible;
+ transform: translate(-50%, 0);
+ left: 50%;
+ `};
+`;
+
+const Ul = styled.ul`
+ & > li {
+ margin-bottom: 10px;
+ }
+
+ & > li:first-of-type {
+ margin-top: 10px;
+ }
+
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+`;
+const LinkWrapper = styled.a`
+ font-size: ${(props) => props.font};
+ font-weight: ${(props) => props.weight};
+
+ text-decoration: none;
+ color: black;
+`;
+const Li = styled.li`
+ margin-top: ${(props) => props.marginTop};
+ margin-bottom: ${(props) => props.marginButtom};
+`;
+const IMG = styled.div`
+ display: columns;
+ width: 209px;
+ height: 218px;
+ align-items: center;
+ margin-left: 24px;
+ margin-right: 24px;
+ & > h4 {
+ font-size: 23px;
+ }
+`;
+const day = ["6일", "10일", "15일", "선택없음"];
+const percent = ["3%", "5%", "10%", "선택없음"];
+const size = ["20인치", "24~25인치", "27~28인치", "30~31인치"];
+const colors = ["갈색", "흰색", "파란색", "주황색", "초록색"];
+const brand = ["샘소나이트", "내셔널지오그래픽", "샤오마", "스위스밀리터리"];
+
+const Register = () => {
+ const [sizeIsOpen, sizeRef, sizeHandler] = useDetectClose(false);
+ const [guideIsOpen, guideRef, guideHandler] = useDetectClose(false);
+ const navigate = useNavigate();
+ return (
+
+
+
+ 캐리어 등록하기
+
+
+
+ 
+ 사진 등록하기
+
+
+ *캐리어 등록 가이드 확인하기
+
+ -
+
-
+
+ 상세 사진 가이드
+
+
+ -
+
![]()
+ 
측면
+
+ ![]()
+ 
정면
+
+ ![]()
+ 
후면
+
+
+
+
+
+
+
+
+ *사진은 전면 / 후면 / 측면 모두 올려야 캐리어 등록이 가능합니다.
+
+
+
+
+ 가격 설정하기
+
+
+
+
+
+ 장기 대여 시 할인
+
+
+ (
+
+ )}
+ />
+ 기간 이상 대여하면,
+
+
+ (
+
+ )}
+ />
+ 를 할인해줄 수 있습니다.
+
+
+
+
+
+
+
+ 색상
+ }
+ />
+
+
+ 크기
+ }
+ />
+
+
+ 브랜드
+ (
+
+ )}
+ />
+
+
+
+
+
+ *캐리어 사이즈 구분
+
+
+ -
+
-
+ 20인치 기내 반입 사이즈
+
+ -
+ 24~25인치 중간 사이즈
+
+ -
+ 27~28인치 화물 사이즈
+
+ -
+ 30~31인치 특대 사이즈
+
+
+
+
+
+
+
+
+ 상품 설명
+
+
+ *상품과 관련된 자세한 설명 / 반납시 유의 사항 / 개인적인 스토리 등을
+ 작성해주시면, 대여 확률이 200% 증가!
+
+
+
+
+
+
+
+ );
+};
+export default Register;
diff --git a/src/Page/RegisterSuccess.js b/src/Page/RegisterSuccess.js
new file mode 100644
index 0000000..5233b49
--- /dev/null
+++ b/src/Page/RegisterSuccess.js
@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import Head from "../Components/head";
+
+import { ReactComponent as Success } from "../assets/img/memberSuccess.svg";
+import { useNavigate } from "react-router-dom";
+const Div = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+`;
+const Main = styled.div`
+ display: flex;
+ width: 1200px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+`;
+const Content = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+const Icon = styled.div`
+ width: 175px;
+ height: 175px;
+ margin-top: 230px;
+`;
+const H1 = styled.h1`
+ display: flex;
+ align-items: center;
+ height: 68px;
+ font-weight: bold;
+ font-size: 20px;
+`;
+const Btn = styled.div`
+ display: flex;
+ margin-top: 104px;
+ width: 553.67px;
+ justify-content: space-between;
+ & > button {
+ color: white;
+ border: none;
+ width: 266.67px;
+ height: 74.06px;
+ border-radius: 30px;
+ font-size: 18px;
+ font-weight: bold;
+ }
+`;
+const RegisterSuccess = () => {
+ const navigate = useNavigate();
+ return (
+
+
+
+
+
+
+
+ 캐리어 등록이 완료되었습니다.
+
+
+
+
+
+
+ );
+};
+export default RegisterSuccess;
diff --git a/src/hooks/useDetectClose.js b/src/hooks/useDetectClose.js
new file mode 100644
index 0000000..b4607ac
--- /dev/null
+++ b/src/hooks/useDetectClose.js
@@ -0,0 +1,30 @@
+import { useEffect, useState, useRef } from "react";
+
+const useDetectClose = (initialState) => {
+ const [isOpen, setIsOpen] = useState(initialState);
+ const ref = useRef(null);
+
+ const removeHandler = () => {
+ setIsOpen(!isOpen);
+ };
+
+ useEffect(() => {
+ const onClick = (e) => {
+ if (ref.current !== null && !ref.current.contains(e.target)) {
+ setIsOpen(!isOpen);
+ }
+ };
+
+ if (isOpen) {
+ window.addEventListener("click", onClick);
+ }
+
+ return () => {
+ window.removeEventListener("click", onClick);
+ };
+ }, [isOpen]);
+
+ return [isOpen, ref, removeHandler];
+};
+
+export default useDetectClose;