From f0a57260080c97d875a778107fba8b375e7bfdd5 Mon Sep 17 00:00:00 2001 From: chanyeol123 Date: Tue, 7 Mar 2023 15:08:56 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/api.js | 8 ++++++-- src/components/modal/Login.jsx | 29 ++++++++++++++++++++++------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index 2a1f644..ed993b5 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -3,8 +3,12 @@ import instance from "./instance"; //////////////로 그 인 /////// -const loginUser = async (userId) => { - return await instance.post(`/api/user/login`, userId); +const loginUser = async (props) => { + const login = { + } + + return await instance.post(`/api/user/login`, login); + }; const signUpUser = async (newbie) => { diff --git a/src/components/modal/Login.jsx b/src/components/modal/Login.jsx index 86bf4f1..a5c88cf 100644 --- a/src/components/modal/Login.jsx +++ b/src/components/modal/Login.jsx @@ -5,8 +5,19 @@ import { loginUser } from "../../api/api"; const Login = () => { const [signUpModal, setSignUpModal] = useState(false); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); + const [inputValue, setInputValue] = useState({ + email: "", + password: "", + }); + + const userInfo = { + email: "", + password: "", + }; + + const onSubmitHandler = (e) => { + const { email, password } = e.target.value; + }; const { register, @@ -16,12 +27,14 @@ const Login = () => { isSubmitting, } = useForm(); + // ; + return (
{ }, })} onChange={(e) => { - setEmail(e.target.value); + setInputValue({ email: e.target.value }); + console.log(inputValue); }} placeholder="이메일을 입력하세요" /> @@ -42,10 +56,11 @@ const Login = () => {
{ - setPassword(e.target.value); + setInputValue({ password: e.target.value }); + console.log(inputValue); }} placeholder="비밀번호를 입력하세요" /> From fd774fd94efadb9ce1d2978e0b33c4177bf85369 Mon Sep 17 00:00:00 2001 From: SeryoungK Date: Tue, 7 Mar 2023 20:27:08 +0900 Subject: [PATCH 02/10] =?UTF-8?q?env,=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=93=B1=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 + package.json | 3 + src/.env | 7 -- src/App.jsx | 2 +- src/api/api.js | 18 +++++ src/components/card/Card.jsx | 119 ++++++++++++++++++++++++++++++- src/components/footer/Footer.jsx | 8 ++- src/components/home/Index.jsx | 99 ++++++++++++++++++++++++- src/pages/Detail.jsx | 53 ++++++++++++-- src/pages/Home.jsx | 56 +++++++++++++-- yarn.lock | 40 ++++++++++- 11 files changed, 381 insertions(+), 27 deletions(-) create mode 100644 .env delete mode 100644 src/.env diff --git a/.env b/.env new file mode 100644 index 0000000..4ee5a95 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +REACT_APP_SERVER_URL = http://3.39.223.179:8080 + +REACT_APP_REST_API_KEY = 94c5891ab6cec1f5eddede64f8358dd9 \ No newline at end of file diff --git a/package.json b/package.json index 8853f89..33802b2 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,13 @@ "react": "^18.2.0", "react-cookie": "^4.1.1", "react-dom": "^18.2.0", + "react-icons": "^4.8.0", "react-query": "^3.39.3", + "react-redux": "^8.0.5", "react-router": "^6.8.2", "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", + "redux": "^4.2.1", "styled-components": "^5.3.8", "web-vitals": "^2.1.0" }, diff --git a/src/.env b/src/.env deleted file mode 100644 index a0e010b..0000000 --- a/src/.env +++ /dev/null @@ -1,7 +0,0 @@ -REACT_APP_SERVER_URL = http://13.209.14.99:8080 - - - -/api/users/signup - -REACT_APP_REST_API_KEY = 94c5891ab6cec1f5eddede64f8358dd9 \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index d71457e..6bcbf60 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,6 @@ import "./App.css"; import { QueryClient, QueryClientProvider } from "react-query"; -import GlobalStyle from "./GlobalStyle"; +import GlobalStyle from "./Globalstyle"; import Router from "./router/Router"; const queryClient = new QueryClient(); diff --git a/src/api/api.js b/src/api/api.js index 2a1f644..b17ce4e 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -22,3 +22,21 @@ const addRoom = async (newForm) => { }; export { addRoom,getRoom,loginUser,signUpUser } + + +// ---------------곽세령이 짠 거------------------ +const getCard = async () => { + const response = await instance.get("/api/houses"); + return response.data; +}; + +export {getCard} + +const getDetail = async (houseid) => { + const response = await instance.get(`/api/houses/${houseid}`); + return response.data; +}; + +export {getDetail} + +// ---------------곽세령이 짠 거 ------------------ \ No newline at end of file diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx index 9e286c0..732a3b5 100644 --- a/src/components/card/Card.jsx +++ b/src/components/card/Card.jsx @@ -1,7 +1,122 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; +import { RiHeart3Line, RiHeart3Fill } from "react-icons/ri"; +import { BsStarFill } from "react-icons/bs"; -const Card = () => { - return
Card
; +const Card = ({ item }) => { + const navigate = useNavigate(); + return ( + + { + navigate(`/${item.id}`); + }} + > + + + + + + { + navigate(`/${item.id}`); + }} + > + {item.title} + + + + {item.likesNum} + + + + {item.distance}km 거리 + ₩{item.price}/박 + + + ); }; export default Card; + +const CardInfoBox = styled.div``; +const LocationBox = styled.div` + text-align: left; + color: #6b6b6b; +`; +const PriceBox = styled.div` + text-align: left; + font-size: medium; + font-weight: bold; +`; + +const CardBox = styled.div` + width: 250px; + height: 350px; +`; + +const Title = styled.div` + text-align: center; + margin-top: 15px; + cursor: pointer; + font-size: medium; + font-weight: bold; +`; + +const StarBox = styled.div` + gap: 5px; + display: flex; + flex-direction: row; + margin-top: 2px; + .StarLogo { + font-size: 14px; + color: black; + margin-top: 10px; + } +`; + +const ImgBox = styled.div` + width: 250px; + height: 250px; + position: relative; + background-color: gray; + border-radius: 15px; + cursor: pointer; + + .HeartLogo { + position: absolute; + top: 10%; + left: 80%; + font-size: 30px; + color: white; + } + .HeartLogoBottom { + position: absolute; + top: 10%; + left: 80%; + font-size: 30px; + color: #00000057; + } +`; + +const ImgView = styled.img` + width: 250px; + height: 250px; + border-radius: 15px; +`; + +const Count = styled.div` + /* position: absolute; + top: 83%; + left: 74%; */ + font-size: 18px; + margin-top: 0px; +`; + +const CardHeaderBox = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx index 4a55dce..8f3c195 100644 --- a/src/components/footer/Footer.jsx +++ b/src/components/footer/Footer.jsx @@ -13,9 +13,13 @@ const Footer = () => { export default Footer; const FooterContainer = styled.div` - position: absolute; + /* position: absolute; z-index: 99; bottom: 0; width: 90vw; - padding: 20px; + padding: 20px; */ + display: flex; + justify-content: center; + margin-top: 10px; + padding-bottom: 10px; `; diff --git a/src/components/home/Index.jsx b/src/components/home/Index.jsx index 7a69005..8af0256 100644 --- a/src/components/home/Index.jsx +++ b/src/components/home/Index.jsx @@ -1,7 +1,104 @@ import React from "react"; +import { TbUfo } from "react-icons/tb"; +import { MdOutlineHouseboat } from "react-icons/md"; +import { GiLighthouse } from "react-icons/gi"; + +import styled from "styled-components"; const Index = () => { - return
gdgd
; + return ( + + + + 기상천외한 숙소 + + + + 한옥 + + + + 인기 급상승 + + + ); }; export default Index; + +const CategoryBox = styled.div` + gap: 30px; + display: flex; + flex-direction: row; + justify-content: center; + border-top: 1px solid #a8a8a86e; + padding-top: 10px; +`; + +const Case1 = styled.div` + width: 110px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + cursor: pointer; + .TbUfo { + font-size: 25px; + color: black; + } + &:hover { + border-bottom: 2px solid gray; + } +`; +const Desc1 = styled.div` + margin-top: 8px; + padding-bottom: 10px; + font-size: small; + color: black; +`; + +const Case2 = styled.div` + width: 40px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + cursor: pointer; + + border-bottom: 2px solid white; + .MdOutlineHouseboat { + font-size: 25px; + color: black; + } + &:hover { + border-bottom: 2px solid gray; + } +`; +const Desc2 = styled.div` + margin-top: 8px; + padding-bottom: 10px; + font-size: small; + color: black; +`; + +const Case3 = styled.div` + width: 80px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; + cursor: pointer; + .GiLighthouse { + font-size: 25px; + color: black; + } + &:hover { + border-bottom: 2px solid gray; + } +`; +const Desc3 = styled.div` + margin-top: 8px; + padding-bottom: 10px; + font-size: small; + color: black; +`; diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index f603163..5386dcc 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,15 +1,60 @@ import React from "react"; import Header from "./../components/header/Header"; import Footer from "./../components/footer/Footer"; +import { useQuery } from "react-query"; +import { getDetail } from "../api/api"; +import styled from "styled-components"; +import { useParams } from "react-router"; + +const Detail = (item) => { + const postID = useParams(); + console.log(postID); + // useParams를 사용해 URL 맨 뒤에 붙을 숫자를 postID라고 이름붙이고 가져온다 + + const { data } = useQuery("Detail", () => { + return getDetail(postID.id); + }); + // getDetail을 사용, postID와 id가 같은 data를 가져온다. + + console.log(data); -const Detail = () => { return ( <> -
-
메인
-