Yanolza-Miniproject · 2YH02 · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,54 @@
-# frontend
+## ✨미니프로젝트 4조 - 아버지날보고있다면정답을알려조✨
 
-야놀자 미니 프로젝트 프론트엔드.
+### **FE팀**  
+`팀장: 이용훈`
+`팀원: 김미정, 김민섭, 이승연, 박수연`
 
-## 💫 커밋 컨벤션
+## _🏖️ 행복한 여행, 즐거운 시간.  'HEY놀자!' 🏖️_
+>바쁜 일상에 지친 여러분, 다음 목적지는 휴식입니다. 
+나의 소중한 하루를 선사할 곳을 'HEY놀자'에서 만나보세요!
+```sh
+배포 주소 : 
+```
+## 'HEY놀자'는 이런 곳이에요.
+
+- 내 위치 기반/ 인기순 /주차 가능 숙소 등 다양한 카테고리의 숙소를 보실 수 있어요.
+- 지역별, 숙소 타입별, 추가 옵션 여부 등 내 입맛에 맞는 숙소를 찾아볼 수 있어요.
+- 숙소별 상세 안내, 일자별 객실 가능 여부 등의 다양한 정보를 확인할 수 있어요. 
+- 마음에 쏙 드는 숙소는 내 카트에 담아두거나, 결제하여 예약할 수 있어요.
+- 언제라도 꼭 가고 싶은 숙소, ❤️[찜하기] 기능을 이용해보세요.
+
+
+## 프로젝트 세부 정보
+### 📍개발 환경 및 배포 
+: Visual Studio Code, Git, GitHub, Eslint, Prettier, Netlify
+#### 📍사용 기술 
+: React, Typescript, React Router, Recoil, Emotion, 
+#### 📍협업 툴
+: Notion, Figma, Slack, ZEP
 
+### 팀원별 담당 페이지 소개
+| 팀원 | 담당 페이지 |
+| ------ | ------ |
+| 이용훈(팀장) | ㅁㄴㅇㄹㄴㅁㄹ |
+| 김미정 | ㅁㄴㅇㄹㄴㅁㅇㄹ |
+| 김민섭 | ㅁㄴㄹㅇㄴㅁㅇㄹ |
+| 이승연 | ㅁㄴㅇㄹㅁㄴㄹㅇ |
+| 박수연 | ㅁㄴㄹㅇㅁㄴㄹ |
+
+### 주요 구현 내용
+```sh
+# 메인페이지
+캡쳐
+- 구현 기능 소개 
+```
+
+```sh
+# 로그인, 회원가입 페이지 
+캡쳐
+- 구현 기능 소개
 ```
-Feat: 기능 구현
-Fix: 수정
-Review: 리뷰 반영
-Refactoring: 개선
-Chore: 기타 등등
+
+```sh
+마이페이지
 ```
diff --git a/src/components/Category/CategoryFilter/CategoryFilter.constants.ts b/src/components/Category/CategoryFilter/CategoryFilter.constants.ts
@@ -4,15 +4,15 @@ export const accommoationTypes = [
     value: 99,
   },
   {
-    label: "관광호텔",
+    label: "호텔",
     value: 0,
   },
   {
-    label: "콘도미니엄",
+    label: "콘도",
     value: 1,
   },
   {
-    label: "유스호스텔",
+    label: "호스텔",
     value: 2,
   },
   {
@@ -36,7 +36,7 @@ export const accommoationTypes = [
     value: 7,
   },
   {
-    label: "서비스드레지던스",
+    label: "레지던스",
     value: 8,
   },
   {
@@ -75,7 +75,7 @@ export const regionTypes = [
     value: 5,
   },
   {
-    label: "제주시",
+    label: "제주도",
     value: 6,
   },
 ];
diff --git a/src/components/Detail/Calendar/Calendar.styles.ts b/src/components/Detail/Calendar/Calendar.styles.ts
@@ -16,7 +16,6 @@ export const SelectDatesText = styled.div`
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  letter-spacing: -0.15rem;
 `;
 
 export const PriceText = styled.div`
@@ -26,5 +25,5 @@ export const PriceText = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  letter-spacing: -0.04375rem;
+  letter-spacing: -0.02375rem;
 `;
diff --git a/src/components/Detail/Calendar/index.tsx b/src/components/Detail/Calendar/index.tsx
@@ -1,5 +1,5 @@
 import { ko } from "date-fns/locale";
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useRecoilState } from "recoil";
@@ -20,19 +20,27 @@ const Calendar: React.FC<CalendarProps> = ({ price, onDateChange }) => {
     return date instanceof Date && !isNaN(date.getTime());
   };
 
-  const validCheckInDate = isValidDate(checkInDate) ? checkInDate : null;
-  const validCheckOutDate = isValidDate(checkOutDate) ? checkOutDate : null;
+  const validCheckInDate = isValidDate(checkInDate) ? checkInDate : undefined;
+  const validCheckOutDate = isValidDate(checkOutDate)
+    ? checkOutDate
+    : undefined;
 
-  const handleChange = (dates: [Date, Date]) => {
-    const [start, end] = dates;
-    setCheckInDate(start);
-    setCheckOutDate(end);
+  const handleChange = useCallback(
+    (dates: [Date | null, Date | null]) => {
+      const [start, end] = dates;
+      setCheckInDate(start);
+      setCheckOutDate(end);
 
-    onDateChange(start, end);
+      if (onDateChange) {
+        onDateChange(start, end);
+      }
+    },
+    [setCheckInDate, setCheckOutDate, onDateChange],
+  );
 
-    // console.log("체크인 날짜:", formatDate(start));
-    // console.log("체크아웃 날짜:", formatDate(end));
-  };
+  useEffect(() => {
+    handleChange([checkInDate, checkOutDate]);
+  }, [checkInDate, checkOutDate, handleChange]);
 
   return (
     <>

diff --git a/src/components/Detail/PriceDisplay/PriceDisplay.styles.ts b/src/components/Detail/PriceDisplay/PriceDisplay.styles.ts
@@ -5,6 +5,7 @@ export const PriceContainer = styled.div`
   justify-content: flex-end;
   align-items: center;
   gap: 6px;
+  margin-bottom: 0.5rem;
 `;
 
 export const SumText = styled.div`
@@ -13,7 +14,7 @@ export const SumText = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  letter-spacing: -0.05625rem;
+  letter-spacing: -0.02625rem;
 `;
 
 export const PriceText = styled.div`

diff --git a/src/components/Detail/ProductDetails/ProductDetail.styles.ts b/src/components/Detail/ProductDetails/ProductDetail.styles.ts
@@ -9,7 +9,6 @@ export const ProductName = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  letter-spacing: -0.05rem;
 `;
 
 export const RoomName = styled.div`
@@ -20,7 +19,6 @@ export const RoomName = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  letter-spacing: -0.08125rem;
 `;
 
 export const ProductPrice = styled.div`

diff --git a/src/components/Detail/QuantitySelector/QuantitySelector.styles.ts b/src/components/Detail/QuantitySelector/QuantitySelector.styles.ts
@@ -5,6 +5,7 @@ export const SelectorContainer = styled.div`
   justify-content: space-between;
   display: flex;
   align-items: center;
+  margin-bottom: 1.5rem;
   gap: 8px;
 `;
 
@@ -46,7 +47,7 @@ export const LabelText = styled.div`
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  letter-spacing: -0.15rem;
+  letter-spacing: -0.05rem;
 `;
 
 export const PriceText = styled.div`
@@ -56,7 +57,7 @@ export const PriceText = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  letter-spacing: -0.04375rem;
+  letter-spacing: -0.01375rem;
 `;
 
 export const MinusButton = styled(Button)`

diff --git a/src/components/DetailList/Card/Card.styles.ts b/src/components/DetailList/Card/Card.styles.ts
@@ -40,5 +40,7 @@ export const CardTitle = styled.div`
 
 export const CardDescription = styled.div<{ isActive: boolean }>`
   text-align: center;
+  font-size: 1.1rem;
+  font-weight: bold;
   color: ${({ isActive }) => (isActive ? "black" : "#E6E6E6")};
 `;
diff --git a/src/components/DetailList/ProductImage/ProductImage.styles.ts b/src/components/DetailList/ProductImage/ProductImage.styles.ts
@@ -3,12 +3,12 @@ import { Box } from "@mui/material";
 
 export const ImageContainer = styled(Box)`
   height: 60vh;
-  margin-right: 10px;
+  overflow: hidden;
 `;
 
 export const ProductImage = styled("img")`
-  // margin-left: auto;
   margin-right: 10px;
+
   max-width: 60vw;
   max-height: 60vh;
 `;
diff --git a/src/components/DetailList/ProductInfo/ProductInfo.styles.ts b/src/components/DetailList/ProductInfo/ProductInfo.styles.ts
@@ -39,7 +39,7 @@ export const InfoTitleText = styled.div`
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  letter-spacing: -0.15rem;
+  letter-spacing: -0.05rem;
 `;
 
 export const InfoDetailText = styled.div`
@@ -49,7 +49,7 @@ export const InfoDetailText = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  letter-spacing: -0.04375rem;
+  letter-spacing: -0.02375rem;
 `;
 
 export const ItemContainer = styled.div`

diff --git a/src/components/DetailList/ProductTitle/ProductTitle.styles.ts b/src/components/DetailList/ProductTitle/ProductTitle.styles.ts
@@ -9,7 +9,6 @@ export const ProductType = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  letter-spacing: -0.05rem;
 `;
 
 export const ProductName = styled.div`
@@ -20,7 +19,6 @@ export const ProductName = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  letter-spacing: -0.08125rem;
 `;
 
 export const DetailsContainer = styled(Box)`

diff --git a/src/components/DetailList/ProductTitle/index.tsx b/src/components/DetailList/ProductTitle/index.tsx
@@ -2,15 +2,15 @@ import * as Styled from "./ProductTitle.styles";
 import { ProductTitleProps } from "./ProductTitle.types";
 
 const typeTexts: { [key: number]: string } = {
-  0: "관광호텔",
-  1: "콘도미니엄",
-  2: "유스호스텔",
+  0: "호텔",
+  1: "콘도",
+  2: "호스텔",
   3: "펜션",
   4: "모텔",
   5: "민박",
   6: "게스트하우스",
   7: "홈스테이",
-  8: "서비스드레지던스",
+  8: "레지던스",
   9: "한옥",
 };
 

diff --git a/src/components/MyPage/MyOrder/MyOrderItem/MyOrder.styles.ts b/src/components/MyPage/MyOrder/MyOrderItem/MyOrder.styles.ts
@@ -47,7 +47,7 @@ export const ItemImg = styled.div`
 
   background-image: url("/src/assets/image/empty.png");
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: contain;
   object-fit: cover;
   margin-right: 2rem;
 

diff --git a/src/components/Signin/InputText/InputText.styles.ts b/src/components/Signin/InputText/InputText.styles.ts
@@ -10,7 +10,7 @@ export const InputTextWrapper = styled.div`
 `;
 
 export const InputTextError = styled.p`
-  font-size: 8px;
+  font-size: 0.9rem;
   color: red;
-  margin-top: 0;
+  margin-top: 0.6rem;
 `;