Kwakseryoung

.env

@@ -1,6 +1,3 @@
+REACT_APP_SERVER_URL = http://3.39.223.179:8080
 
-REACT_APP_SERVER_URL = http://3.39.6.18:8080/
-
-REACT_APP_SERVER_URL = http://13.209.14.99:8080
-
-# http://3.39.6.18:8080/
+REACT_APP_REST_API_KEY = 94c5891ab6cec1f5eddede64f8358dd9

package.json

@@ -11,7 +11,9 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.4",
+    "react-hook-form": "^7.43.5",
+    "react-hook-form-resolvers": "^0.0.1",
+    "react-icons": "^4.8.0",
     "react-query": "^3.39.3",
     "react-redux": "^8.0.5",
     "react-router": "^6.8.2",

src/App.jsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "react-query";
+
 import { GlobalStyle } from "./Globalstyle";
 
 import Router from "./router/Router";

src/api/api.js

@@ -2,6 +2,7 @@ import instance from "./instance";
 import axios from "axios";
 
 //////////////로 그 인 ///////
+
 const loginUser = async (userId) => {
   return await instance.post(`/api/users/login`, userId);
 };
@@ -22,6 +23,7 @@ const addRoom = async (formData) => {
 export { addRoom, getRoom, loginUser, signUpUser };
 
 // ---------------곽세령이 짠 거------------------
+
 const getCard = async () => {
   const response = await instance.get("/api/houses");
   return response.data;
@@ -36,7 +38,14 @@ const getDetail = async (houseid) => {
 
 export {getDetail}
 
-// ---------------곽세령이 짠 거 ------------------
 
+const addReview = async (houseid) => {
+  return await instance.post(`/api/houses/${houseid}/reviews`, houseid);
+};
+
+export {addReview}
+
+
+// ---------------곽세령이 짠 거 ------------------
 
 

src/components/card/Card.jsx

@@ -2,36 +2,42 @@ 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 = ({ item }) => {
   const navigate = useNavigate();
   return (
     <CardBox>
-      <ImgBox>
+      <ImgBox
+        onClick={() => {
+          navigate(`/${item.id}`);
+        }}
+      >
         <ImgView src={item.imageUrl} alt="img" />
-        <Heart>♡</Heart>
+        <RiHeart3Line className="HeartLogo" />
+        <RiHeart3Fill className="HeartLogoBottom" />
       </ImgBox>
       <CardHeaderBox>
         <Title
           key={item.id}
           onClick={() => {
-            navigate(`/:${item.id}`);
+            navigate(`/${item.id}`);
           }}
         >
-          {item.title}
+          {item.location}
         </Title>
         <StarBox>
-          <Star>★</Star>
+          <BsStarFill className="StarLogo" />
           <Count>{item.likesNum}</Count>
         </StarBox>
       </CardHeaderBox>
       <CardInfoBox>
-        <LocationBox>{item.location}</LocationBox>
+        <LocationBox>{item.distance}km 거리</LocationBox>
         <PriceBox>₩{item.price}/박</PriceBox>
       </CardInfoBox>
     </CardBox>
   );
-
 };
 
 export default Card;
@@ -48,9 +54,8 @@ const PriceBox = styled.div`
 `;
 
 const CardBox = styled.div`
-  width: 300px;
-  height: 400px;
-  text-align: center;
+  width: 250px;
+  height: 350px;
 `;
 
 const Title = styled.div`
@@ -61,19 +66,44 @@ const Title = styled.div`
   font-weight: bold;
 `;
 
-const ImgBox = styled.div`
-  width: 300px;
-  height: 300px;
+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: 300px;
-  height: 300px;
+  width: 250px;
+  height: 250px;
   border-radius: 15px;
 `;
 
@@ -85,33 +115,8 @@ const Count = styled.div`
   margin-top: 0px;
 `;
 
-const Star = styled.div`
-  /* width: 20px;
-  height: 20px; */
-  font-size: 20px;
-  /* position: absolute;
-  top: 80%;
-  left: 80%; */
-  color: black;
-`;
-
-const Heart = styled.div`
-  font-size: 25px;
-  position: absolute;
-  top: 0%;
-  left: 80%;
-  color: rgba(231, 231, 231, 0.829);
-`;
-
 const CardHeaderBox = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
-
-const StarBox = styled.div`
-  gap: 3px;
-  display: flex;
-  flex-direction: row;
-  margin-top: 2px;
-`;

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;
 `;