Merge pull request #156 from CampingOn/fix/#155-camp-calendar

silverzoo · web-flow · commit b805ba6cce1b · 2024-12-10T16:39:19.000+09:00
Fix/#155 캘린더 새로고침 해결, 반려동물 반입 추가
diff --git a/src/components/camp/CampDatePicker.js b/src/components/camp/CampDatePicker.js
@@ -3,30 +3,62 @@ import DatePicker from "react-datepicker";
 import { ko } from "date-fns/locale";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../style/camp-date-picker.css";
+import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
 
 const CampDatePicker = ({ checkin, checkout, handleDateChange }) => {
     const today = new Date(); // 오늘 날짜 기준
 
+    const clearDates = () => {
+        handleDateChange([null, null]); // 입실일과 퇴실일 초기화
+    };
+
+    const handleDateSelection = (dates) => {
+        const [start, end] = dates || [null, null];
+        const today = new Date(); // 오늘 날짜
+        today.setHours(0, 0, 0, 0); // 시간 제거하여 날짜만 비교
+
+        if (start) {
+            const isTodaySelected = start.getTime() === today.getTime(); // 입실일이 오늘인지 확인
+            if (isTodaySelected && end) {
+                // 당일을 입실일로 선택한 경우 퇴실일 무효화
+                handleDateChange([start, null]);
+                return;
+            }
+        }
+
+        handleDateChange(dates); // 유효한 날짜만 반영
+    };
+
     return (
-        <DatePicker
-            locale={ko} // 한글 로케일 적용
-            selected={checkin}
-            onChange={(dates) => {
-                const [start, end] = dates || [null, null];
-                if (start && end) {
-                    const dayDifference = (end - start) / (1000 * 60 * 60 * 24); // 날짜 차이 계산
-                    if (dayDifference < 1) {
-                        return dayDifference >= 1;
-                    }
-                }
-                handleDateChange(dates); // 유효한 날짜만 반영
-            }}
-            startDate={checkin}
-            endDate={checkout}
-            selectsRange
-            inline
-            minDate={today} // 오늘 이후 날짜만 선택 가능
-        />
+        <div className="camp-date-picker-container">
+            <div className="datepicker-wrapper">
+                <DatePicker
+                    locale={ko} // 한글 로케일 적용
+                    selected={checkin}
+                    onChange={handleDateSelection} // 선택 처리
+                    startDate={checkin}
+                    endDate={checkout}
+                    selectsRange
+                    inline
+                    minDate={today} // 오늘 이후 날짜만 선택 가능
+                />
+                {/* 캘린더 입실일 초기화 버튼 (DisabledByDefaultIcon 사용) */}
+                {(checkin && !checkout) && (
+                    <DisabledByDefaultIcon
+                        className="clear-dates-icon"
+                        onClick={clearDates} // 초기화 이벤트 핸들러
+                        style={{
+                            color: "black", // 아이콘 색상
+                            cursor: "pointer", // 클릭 가능
+                            position: "absolute", // 위치 조정
+                            top: "73px", // 적절한 위치 설정
+                            right: "1px", // 적절한 위치 설정
+                            fontSize: "35px", // 아이콘 크기
+                        }}
+                    />
+                )}
+            </div>
+        </div>
     );
 };
 
diff --git a/src/components/common/OperationPolicy.js b/src/components/common/OperationPolicy.js
@@ -6,7 +6,8 @@ const OperationPolicy = ({
     title = '운영정책', 
     showDefaultPolicies = true,
     outdoorFacility,
-    industries
+    industries,
+    animalAdmission
 }) => {
     const policyData = [];
 
@@ -28,6 +29,12 @@ const OperationPolicy = ({
         policyData.push({ label: '업종', value: industriesValue });
     }
 
+    if (animalAdmission) {
+        policyData.push({ label: '반려동물 반입', value: animalAdmission });
+    }
+
+    policyData.push(...additionalPolicies);
+
     policyData.push(...additionalPolicies);
 
     return (
@@ -48,7 +55,7 @@ const OperationPolicy = ({
             <List sx={{ p: 0 }}>
                 {policyData.map((item, index) => (
                     item.value && (
-                        <ListItem 
+                        <ListItem
                             key={index}
                             sx={{
                                 display: 'flex',
diff --git a/src/pages/camp/CampDetail.js b/src/pages/camp/CampDetail.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useCampDetail } from "../../hooks/useCampDetail";
 import useAvailableCampSites from "../../hooks/useAvailableCampSites";
@@ -60,7 +60,7 @@ function CampDetail() {
     const handleModalOpen = () => setOpenModal(true);
     const handleModalClose = () => setOpenModal(false);
 
-    if (loading) return <div>로딩 중...</div>;
+
     if (error) return <div>에러 발생: {error}</div>;
     if (detailError) return <div>에러 발생: {detailError}</div>;
     if (!campDetails) return <div>캠핑장 정보를 찾을 수 없습니다.</div>;
@@ -78,9 +78,9 @@ function CampDetail() {
             {/* images가 빈 배열일 경우 랜덤 썸네일로 채우기 */}
             {(!images || images.length === 0) ? (
                 <div className="main-image" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', marginBottom: '20px'}}>
-                    <img 
+                    <img
                         src={getRandomThumbnail("")}
-                        alt="랜덤 썸네일" 
+                        alt="랜덤 썸네일"
                         style={{ objectFit: 'cover', width: '100%', height: '100%' }}
                     />
                 </div>
@@ -93,6 +93,7 @@ function CampDetail() {
             <OperationPolicy
                 industries={campDetails.indutys || []}
                 outdoorFacility={campDetails.outdoorFacility || "부대시설 정보 없음"}
+                animalAdmission={campDetails.animalAdmission}
             />
             <MapSection
                 latitude={campAddr?.latitude}
@@ -110,18 +111,19 @@ function CampDetail() {
                 />
                 <div className="date-info">
                     <div className="date-box">
-                        <span className="label">입실</span>
-                        <span className="date">{checkin ? checkin.toLocaleDateString("ko-KR") : "날짜를 선택하세요"}</span>
+                        <span className="label">입실일</span>
+                        <span className="date">{checkin ? checkin.toLocaleDateString("ko-KR") : "날짜를 선택하기"}</span>
                     </div>
                     <div className="date-box">
-                        <span className="label">퇴실</span>
-                        <span className="date">{checkout ? checkout.toLocaleDateString("ko-KR") : "날짜를 선택하세요"}</span>
+                        <span className="label">퇴실일</span>
+                        <span className="date">{checkout ? checkout.toLocaleDateString("ko-KR") : "날짜를 선택하기"}</span>
                     </div>
                 </div>
             </div>
 
             <div className="camp-site-list-available">
                 <h2>예약 가능한 캠핑지 목록</h2>
+                {/*if (loading) return <div>로딩 중...</div>;*/}
                 {availableSites && availableSites.length > 0 ? (
                     availableSites.map((site, index) => (
                         <CampSiteCard
@@ -142,7 +144,7 @@ function CampDetail() {
                     open={modalOpen}
                     onClose={() => setModalOpen(false)}
                     title="당일 예약 안내"
-                    message="※ 당일 예약�� 전화로만 가능합니다."
+                    message="※ 당일 예약은 전화로만 가능합니다."
                 />
             </div>
         </div>
diff --git a/src/style/camp-date-picker.css b/src/style/camp-date-picker.css
@@ -1,52 +1,89 @@
+/* 달력 컨테이너 스타일 */
+.camp-date-picker-container {
+    margin: 0; /* 컨테이너 간격 제거 */
+    display: flex;
+    flex-direction: column; /* 세로 정렬 */
+    align-items: center; /* 내부 요소 가운데 정렬 */
+    gap: 0; /* 간격 제거 */
+    position: relative; /* 위치 지정 */
+}
+
+/* 달력 스타일 */
+.datepicker-wrapper {
+    position: relative;
+    width: auto;
+    margin: 0; /* 달력과 텍스트 박스 간격 제거 */
+}
+
+/* 달력 박스 스타일 */
 .react-datepicker {
-    transform: scale(1.5); /* 크기 확대 */
+    transform: scale(1); /* 크기 확대 (1.5에서 1.8로 증가) */
     transform-origin: top center; /* 확대 기준점을 중앙으로 설정 */
     margin-bottom: 0; /* 달력과 아래 텍스트의 간격 제거 */
     width: auto; /* 자동 크기 */
-    text-align: center; /* 달력 텍스트 가운데 정렬 */
+    text-align: center; /* 텍스트 가운데 정렬 */
 }
 
 /* 텍스트 크기 조정 */
 .react-datepicker__day,
-.react-datepicker__day-name,
+.react-datepicker__day-name {
+    font-size: 1.5rem; /* 글자 크기 */
+    text-align: center; /* 가운데 정렬 */
+    letter-spacing: 1px; /* 글자 간격 */
+}
 .react-datepicker__current-month {
-    font-size: 1.2rem; /* 텍스트 크기 확대 */
+    font-size: 1.5rem; /* 텍스트 크기 확대 */
     text-align: center; /* 텍스트를 가운데 정렬 */
 }
 
 /* 날짜 선택 영역 패딩 및 크기 조정 */
 .react-datepicker__month {
-    padding: 20px; /* 패딩 설정 */
-    max-width: 600px; /* 최대 가로 길이 설정 */
+    padding: 25px; /* 내부 패딩 증가 */
+    max-width: 700px; /* 최대 가로 길이 증가 */
     display: flex; /* 플렉스 박스 활성화 */
     flex-direction: column; /* 세로 정렬 */
     align-items: center; /* 항목을 가운데 정렬 */
-}
-
-/* 컨테이너 스타일 */
-.camp-date-picker-container {
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column; /* 세로 정렬 */
-    align-items: center; /* 내부 요소 가운데 정렬 */
-    gap: 10px; /* 간격 추가 */
+    justify-content: space-between; /* 주차 간격 조정 */
 }
 
 /* 달력 아래 텍스트 박스 스타일 */
 .date-info {
     display: flex;
     justify-content: center; /* 중앙 정렬 */
-    gap: 20px; /* 입실/퇴실 간격 */
-    margin-top: 132px; /* 달력과 텍스트 박스 간격 축소 */
-    padding: 10px; /* 내부 여백 */
+    gap: 30px; /* 입실/퇴실 간격 */
+    padding: 10px; /* 내부 여백 증가 */
     background-color: #ffd672; /* 배경 색상 */
-    border: 1.5px solid #c3c3c3;
+    border: 1.5px solid #c3c3c3; /* 테두리 */
     border-radius: 8px; /* 모서리 둥글게 */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
-    width: 424px; /* 고정된 가로 크기 */
+    width: 430px; /* 가로 크기 증가 */
     height: auto; /* 높이는 내용에 따라 자동으로 조정 */
+    margin: -7px; /* 텍스트 박스 간격 제거 */
+    margin-bottom: 100px;
+    position: relative; /* 기본 위치에 유지 */
 }
 
+/* 날짜 칸 스타일 */
+.react-datepicker__day {
+    width: 3rem; /* 날짜 칸 너비 증가 */
+    height: 3rem; /* 날짜 칸 높이 증가 */
+    line-height: 3rem; /* 텍스트 중앙 정렬 */
+    font-size: 1.5rem; /* 날짜 텍스트 크기 증가 */
+    text-align: center;
+}
+
+
+/* 날짜 선택 영역 패딩 및 크기 조정 */
+.react-datepicker__month {
+    padding: 20px; /* 내부 패딩 */
+    max-width: 600px; /* 최대 가로 길이 */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between; /* 주차 간격 조정 */
+}
+
+
 /* 개별 텍스트 박스 스타일 */
 .date-box {
     display: flex;
@@ -81,4 +118,13 @@
     font-size: 16px;
     color: #222;
     font-weight: bold;
+}
+
+/* 캘린더 날짜 취소 버튼 */
+.datepicker-wrapper {
+    position: relative;
+}
+
+.react-datepicker__day--outside-month {
+    visibility: hidden; /* 다음 달 날짜 숨김 */
 }
diff --git a/src/style/camp-detail.css b/src/style/camp-detail.css
@@ -215,16 +215,6 @@
     flex: 1; /* 동일한 비율로 공간을 차지 */
 }
 
-
-
-/*.location-info {*/
-/*    padding: 5px;*/
-/*    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);*/
-/*    border-radius: 8px;*/
-/*    border: 1px solid #ccc;*/
-/*    background-color: #ffffff;*/
-/*}*/
-
 .location-info-title {
     font-size: 1.5rem;
     font-weight: bold;
@@ -237,6 +227,7 @@
     border-radius: 8px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    margin-bottom: 60px; /* 지도 아래에 간격 추가 */
 }
 
 #map {
