diff --git a/web/src/assets/Group 51.svg b/web/src/assets/Group 51.svg new file mode 100644 index 0000000..98e8a7e --- /dev/null +++ b/web/src/assets/Group 51.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/src/assets/Group 53.svg b/web/src/assets/Group 53.svg new file mode 100644 index 0000000..a8694ca --- /dev/null +++ b/web/src/assets/Group 53.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/src/assets/Group 54.svg b/web/src/assets/Group 54.svg new file mode 100644 index 0000000..86a8acf --- /dev/null +++ b/web/src/assets/Group 54.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/src/assets/Group 55.svg b/web/src/assets/Group 55.svg new file mode 100644 index 0000000..0b39eeb --- /dev/null +++ b/web/src/assets/Group 55.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/src/assets/Group 56.svg b/web/src/assets/Group 56.svg new file mode 100644 index 0000000..c1184ab --- /dev/null +++ b/web/src/assets/Group 56.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/headers/index.tsx b/web/src/components/headers/index.tsx index dc0d997..9d105be 100644 --- a/web/src/components/headers/index.tsx +++ b/web/src/components/headers/index.tsx @@ -10,7 +10,7 @@ const Header = () => { return ( <> { - (!location.pathname.includes("sign") && !location.pathname.includes("host")) && location.pathname !== "/login" && location.pathname !== "/search/question" && location.pathname !== "/profile" &&
{ return( @@ -32,6 +33,7 @@ const Router=()=>{ }/> }/> }/> + }/> ) diff --git a/web/src/page/host-home/index.tsx b/web/src/page/host-home/index.tsx index 2787f93..3422c0c 100644 --- a/web/src/page/host-home/index.tsx +++ b/web/src/page/host-home/index.tsx @@ -1,29 +1,66 @@ -import React from 'react' +import React, {useEffect, useState} from 'react' import * as S from "../host-home/index.style"; import bookDummyData from "../../constant/host-home/BookDummy"; import PopularDummyData from "../../constant/host-home/PopluarDummy"; +import banner1 from "../../assets/Group 47.svg"; +import banner2 from "../../assets/Group 48.svg"; +import banner3 from "../../assets/Group 49.svg"; const Index = () => { + + const [currentIndex, setCurrentIndex] = useState(0); + const images = [ + banner1, + banner2, + banner3, + ]; + + useEffect(() => { + const interval = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + }, 5000); + + return () => clearInterval(interval); + }, [images.length]); + return ( - +
+ {`Slide +
+ {images.map((_, index) => ( + setCurrentIndex(index)}> + {'●'} + + ))} +
+
- 내 여행 관리 - - - - {bookDummyData.map((item, index) => ( - - {item.title} - {item.name} - {item.date} - - ))} - - 나의 인기 여행 - + 내 여행 관리 + + + + {bookDummyData.map((item, index) => ( + + {item.title} + {item.name} + {item.date} + + ))} + + 나의 인기 여행 + {PopularDummyData.map((ratings, index) => ( {ratings.tourName} diff --git a/web/src/page/host-make/index.style.ts b/web/src/page/host-make/index.style.ts index d0127cb..86228a0 100644 --- a/web/src/page/host-make/index.style.ts +++ b/web/src/page/host-make/index.style.ts @@ -210,7 +210,7 @@ export const DetailText = styled.input` `; export const PhotoUpload = styled.div` - margin-top: 20px; + margin-top: 5px; `; export const OptionContainer = styled.div` @@ -258,4 +258,103 @@ export const SubmitButton = styled.button` border-radius: 4px; cursor: pointer; margin-top: 20px; -`; \ No newline at end of file +`; + + +export const CustomCalendar = styled.div` + display: flex; + flex-direction: column; + width: 80%; + height: 80%; + margin-top: 25px; +`; + +export const CalendarHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + padding: 0 10px; +`; + +export const HeaderButton = styled.button` + background: none; + border: none; + font-size: 18px; + cursor: pointer; + &:focus { + outline: none; + } +`; + +export const DayWrapper = styled.div` + display: grid; + grid-template-columns: repeat(7, minmax(43px, 0.8fr)); + grid-row-gap: 13px; +`; + +export const CalendarItem = styled.div<{ $isSunday: boolean }>` + color: ${props => (props.$isSunday ? 'red' : 'black')}; + margin-bottom: 12px; +`; + +export const Day = styled.div<{ + $isCurrentMonth: boolean; + $isSelectedDate: boolean; + $isInRange: boolean; + $isSunday: boolean +}>` + opacity: ${props => (props.$isCurrentMonth ? '1' : '0.5')}; + background-color: ${props => (props.$isSelectedDate ? 'rgba(255,168,0,0.37)' : props.$isInRange ? 'rgba(255,168,0,0.2)' : 'transparent')}; + color: ${props => (props.$isSunday ? 'red' : 'black')}; + cursor: pointer; + width: 30px; + height: 22px; + margin-left: -10px; + border-radius: 5px; + text-align: center; + justify-content: center; + align-items: center; +`; + +export const SelectedDate = styled.span` + color: #000; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + margin-left: -6.4px; + margin-top: -40px; +`; + +export const HeaderText = styled.span` + font-size: 16px; + font-weight: 800; + color: #ffa800; + margin-bottom: -3px; +`; + +export const SelectCategoryListContainer = styled.div` + margin-top: 16px; + overflow: hidden; + width: 100%; + overflow-x: auto; + white-space: nowrap; + box-sizing: border-box; + background-color: rgba(255, 255, 255, 0); + &::-webkit-scrollbar { + display: none; + } +`; + +export const ScrollContent = styled.div` + display: inline-block; +`; + +export const Item = styled.div<{ bgColor?: string }>` + display: inline-block; + width: 100px; + height: 130px; + margin-right: 15px; + border-radius: 10px; +`; diff --git a/web/src/page/host-make/index.tsx b/web/src/page/host-make/index.tsx index 95da333..c216fd5 100644 --- a/web/src/page/host-make/index.tsx +++ b/web/src/page/host-make/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import * as S from "../host-make/index.style"; import CancelButton from "../../assets/cancel.svg"; @@ -9,12 +9,16 @@ import KitchenIcon from "../../assets/kitchen.svg"; import LaundryIcon from "../../assets/laundaury.svg"; import CarIcon from "../../assets/car.svg"; import IceIcon from "../../assets/ice.svg"; +import selectorImg1 from "../../assets/image 5.svg"; +import selectorImg2 from "../../assets/Group 42.svg"; +import selectorImg3 from "../../assets/Group 43.svg"; +import selectorImg4 from "../../assets/Group 44.svg"; type DetailCountField = 'capacity' | 'beds' | 'bathrooms' | 'rooms'; const HostMake = () => { const [selectedOptions, setSelectedOptions] = useState([]); - const [destinations, setDestinations] = useState(['']); + const [destinations, setDestinations] = useState(['']); const [detailCounts, setDetailCounts] = useState({ capacity: 0, @@ -30,6 +34,29 @@ const HostMake = () => { })); }; + const [formData, setFormData] = useState({ + title: '', + startAt: '', + endAt: '', + limitPeople: 0, + price: 0, + description: '', + wifi: false, + tv: false, + kitchen: false, + washingMachine: false, + airConditioner: false, + parking: false, + bedCnt: 0, + bathroomCnt: 0, + roomCnt: 0, + address: '', + guideKind: "EXPERIENCE", + places: [], + files: [], + userId: 'uiseong', + }); + const decrementCount = (field: DetailCountField) => { setDetailCounts(prevState => ({ ...prevState, @@ -49,6 +76,14 @@ const HostMake = () => { setDestinations([...destinations, '']); }; + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value, type, checked } = e.target; + setFormData(prevData => ({ + ...prevData, + [name]: type === 'checkbox' ? checked : value + })); + }; + const handleDestinationChange = (index: number, value: string) => { const newDestinations = [...destinations]; newDestinations[index] = value; @@ -60,98 +95,339 @@ const HostMake = () => { setDestinations(newDestinations); }; + const options = [ { label: '와이파이', icon: WifiIcon }, { label: 'TV', icon: TVIcon }, { label: '주방', icon: KitchenIcon }, - { label: '세탁기', icon: LaundryIcon }, + { label: '세탁기', icon: LaundryIcon }, { label: '주차', icon: CarIcon }, { label: '에어컨', icon: IceIcon } ]; - + + const [indexSelectorNum, setIndexSelector] = useState(1); + + const getDaysInMonth = (year: number, month: number) => { + return new Array(new Date(year, month, 0).getDate()).fill(null).map((_, index) => index + 1); + }; + + useEffect(() => { + switch (indexSelectorNum) { + case 1: + setFormData({...formData, guideKind: "NATURE"}); + break; + case 2: + setFormData({...formData, guideKind: "FOOD"}); + break; + case 3: + setFormData({...formData, guideKind: "REST"}); + break; + case 4: + setFormData({...formData, guideKind: "EXPERIENCE"}); + break; + } + },[indexSelectorNum]) + + const getStartOfMonth = (year: number, month: number) => { + return new Date(year, month - 1, 1); + }; + + const getEndOfMonth = (year: number, month: number) => { + return new Date(year, month, 0); + }; + + const [currentDate, setCurrentDate] = useState(new Date()); + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + + const currentYear = currentDate.getFullYear(); + const currentMonth = currentDate.getMonth(); + + const startOfMonth = getStartOfMonth(currentYear, currentMonth + 1); + const endOfMonth = getEndOfMonth(currentYear, currentMonth + 1); + const startOfFirstWeek = new Date(startOfMonth); + const endOfLastWeek = new Date(endOfMonth); + + startOfFirstWeek.setDate(startOfFirstWeek.getDate() - startOfFirstWeek.getDay()); + endOfLastWeek.setDate(endOfLastWeek.getDate() + (6 - endOfLastWeek.getDay())); + + const days = []; + for (let d = new Date(startOfFirstWeek); d <= endOfLastWeek; d.setDate(d.getDate() + 1)) { + days.push(new Date(d)); + } + + const changeMonth = (increment: number) => { + setCurrentDate(prevDate => { + const newDate = new Date(prevDate); + newDate.setMonth(prevDate.getMonth() + increment); + return newDate; + }); + }; + + const changeYear = (increment: number) => { + setCurrentDate(prevDate => { + const newDate = new Date(prevDate); + newDate.setFullYear(prevDate.getFullYear() + increment); + return newDate; + }); + }; + + const handleDateClick = (selectedDate: string) => { + if (!startDate) { + setStartDate(selectedDate); + } else if (!endDate && selectedDate > startDate) { + setEndDate(selectedDate); + } else if (startDate && endDate) { + setStartDate(selectedDate); + setEndDate(null); + } else if (startDate === selectedDate) { + setStartDate(null); + } else { + setEndDate(null); + } + }; + + const isDateInRange = (date: string) => { + if (startDate && endDate) { + return date >= startDate && date <= endDate; + } + return false; + }; + + const getPlaces = () => { + return destinations.map((destination, index) => ({ + latitude: '35.129', // Fixed value + longitude: '129.129', // Fixed value + name: destination, + seq: String(index + 1) + })); + }; + + const handleSubmit = async () => { + const guideDto = { + ...formData, + startAt: startDate ? new Date(startDate).toISOString().split('T')[0] : '', + endAt: endDate ? new Date(endDate).toISOString().split('T')[0] : '', + places: getPlaces(), + }; + + try { + const response = await fetch('http://localhost:8080/guide', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(guideDto), + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + console.log('Guide successfully created'); + // Handle successful submission here + } catch (error) { + console.error('Error creating guide:', error); + // Handle error here + } + }; + + + const [isToggleCalendar, setToggleCalendar] = useState(false) + return ( - - - - - {destinations.map((destination, index) => ( - - {index > 0 && } - - {index + 1} - handleDestinationChange(index, e.target.value)} - /> - removeDestination(index)}> - - - - - ))} - - - - + - - - 추가하기 - - - - - - - - 최대 수용인원 - decrementCount('capacity')}>- - - incrementCount('capacity')}>+ - - - - 침대 개수 - decrementCount('beds')}>- - - incrementCount('beds')}>+ - - - - 화장실 개수 - decrementCount('bathrooms')}>- - - incrementCount('bathrooms')}>+ - - - - 방 개수 - decrementCount('rooms')}>- - - incrementCount('rooms')}>+ - - - - - 사진 등록 - - - - {options.map(option => ( - toggleOption(option.label)} - > - - {option.label} - + + + + + {destinations.map((destination, index) => ( + + {index > 0 && } + + {index + 1} + handleDestinationChange(index, e.target.value)} + /> + removeDestination(index)}> + + + + ))} - - - 등록 - + + + + + + + + 추가하기 + + + + + + + + {setIndexSelector(1)}}> +
+ {"sle"} + 음식 +
+ + {setIndexSelector(2)}}> +
+ {"sle"} + 자연 +
+ + {setIndexSelector(3)}}> +
+ {"sle"} + 휴식 +
+ + {setIndexSelector(4)}}> +
+ {"sle"} + 체험 +
+ + + + {setFormData({...formData, price: Number(e.target.value)})}} + /> + + + + 최대 수용인원 + setFormData({ ...formData, limitPeople: formData.limitPeople - 1 })}>- + + setFormData({ ...formData, limitPeople: formData.limitPeople + 1 })}>+ + + + + 침대 개수 + setFormData({ ...formData, bedCnt: formData.bedCnt - 1 })}>- + + setFormData({ ...formData, bedCnt: formData.bedCnt + 1 })}>+ + + + + 화장실 개수 + setFormData({ ...formData, bathroomCnt: formData.bathroomCnt - 1 })}>- + + setFormData({ ...formData, bathroomCnt: formData.bathroomCnt + 1 })}>+ + + + + 방 개수 + setFormData({ ...formData, roomCnt: formData.roomCnt - 1 })}>- + + setFormData({ ...formData, roomCnt: formData.roomCnt + 1 })}>+ + + + + {setToggleCalendar(prev => !prev)}}>행사 기간 선택 +
+ { isToggleCalendar && <> + + + changeYear(-1)}>{"⏴"} + changeMonth(-1)}>{"⏴"} + {`${currentYear}.${String(currentMonth + 1).padStart(2, '0')}`} + changeMonth(1)}>{"⏵"} + changeYear(1)}> {"⏵"} + + + {["일", "월", "화", "수", "목", "금", "토"].map((week, index) => ( + + {week} + + ))} + + + {days.map((day) => { + const dayOfMonth = day.getDate(); + const isCurrentMonth = day.getMonth() === currentMonth; + const isSunday = day.getDay() === 0; + const formattedDate = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(dayOfMonth).padStart(2, '0')}`; + + return ( + handleDateClick(formattedDate)} + $isCurrentMonth={isCurrentMonth} + $isSelectedDate={formattedDate === startDate || formattedDate === endDate} + $isInRange={isDateInRange(formattedDate)} + $isSunday={isSunday} + > + {dayOfMonth} + + ); + })} + + + + 선택된 날짜 : {startDate} {endDate && `~ ${endDate}`} + } +
+ + + + 사진 등록 + + + + {options.map(option => ( + toggleOption(option.label)} + > + + {option.label} + + ))} + + + 등록 + ); } -export default HostMake \ No newline at end of file +export default HostMake; diff --git a/web/src/page/search/index.tsx b/web/src/page/search/index.tsx index 4d8dee0..5b8ee42 100644 --- a/web/src/page/search/index.tsx +++ b/web/src/page/search/index.tsx @@ -1,15 +1,263 @@ import SearchBar from "../../components/searchbar"; import Icon2 from "../../assets/Group 2.svg" +import {useState, useEffect} from "react"; +import {GuideType} from "../../types/GuideType"; +import {atom, useAtom} from "jotai"; +import {isRender} from "../../store/authtype/authtype.atom"; +import {useNavigate, useNavigation} from "react-router-dom"; const Search = () => { + + const [renderList, setRenderList] = useState([]); + + const [isRend, setIsRend] = useAtom(isRender); + + useEffect(() => { + console.log(isRend); + isRend && + setRenderList([ + { + title: "산속 휴양지", + startAt: new Date("2024-09-01T15:00:00"), + endAt: new Date("2024-09-10T11:00:00"), + limitPeople: 8, + price: 500000, + description: "자연과 함께하는 평온한 휴식을 위한 산속 휴양지입니다.", + wifi: true, + tv: true, + kitchen: true, + washingMachine: true, + airConditioner: false, + parking: true, + bedCnt: 4, + bathroomCnt: 2, + roomCnt: 3, + address: "강원도 춘천시 산길로 123", + guideKind: "자연", + places: [ + { latitude: "37.8813", longitude: "127.7298", name: "소양강댐", seq: "1" }, + { latitude: "37.6830", longitude: "127.7236", name: "남이섬", seq: "2" }, + ], + files: { path: "/images/mountain_retreat.jpg" }, + userId: "user123", + }, + { + title: "도심 아파트", + startAt: new Date("2024-10-05T14:00:00"), + endAt: new Date("2024-10-12T10:00:00"), + limitPeople: 4, + price: 300000, + description: "모든 편의시설이 가까운 도심 속 현대적인 아파트입니다.", + wifi: true, + tv: true, + kitchen: true, + washingMachine: true, + airConditioner: true, + parking: false, + bedCnt: 2, + bathroomCnt: 1, + roomCnt: 2, + address: "서울특별시 강남구 도산대로 456", + guideKind: "도심", + places: [ + { latitude: "37.5665", longitude: "126.9780", name: "명동", seq: "1" }, + { latitude: "37.5796", longitude: "126.9770", name: "경복궁", seq: "2" }, + ], + files: { path: "/images/city_apartment.jpg" }, + userId: "user456", + }, + { + title: "해변가 빌라", + startAt: new Date("2024-07-15T12:00:00"), + endAt: new Date("2024-07-25T10:00:00"), + limitPeople: 10, + price: 1000000, + description: "바로 앞에 바다가 보이는 고급스러운 해변가 빌라입니다.", + wifi: true, + tv: true, + kitchen: true, + washingMachine: true, + airConditioner: true, + parking: true, + bedCnt: 5, + bathroomCnt: 3, + roomCnt: 4, + address: "부산광역시 해운대구 해운대해변로 789", + guideKind: "럭셔리", + places: [ + { latitude: "35.1587", longitude: "129.1603", name: "해운대 해수욕장", seq: "1" }, + { latitude: "35.1531", longitude: "129.1183", name: "광안리 해수욕장", seq: "2" }, + ], + files: { path: "/images/beachside_villa.jpg" }, + userId: "user789", + }, + { + title: "전원 주택", + startAt: new Date("2024-11-20T14:00:00"), + endAt: new Date("2024-11-30T11:00:00"), + limitPeople: 6, + price: 400000, + description: "조용하고 평화로운 전원에서의 휴식을 즐길 수 있는 주택입니다.", + wifi: true, + tv: false, + kitchen: true, + washingMachine: true, + airConditioner: false, + parking: true, + bedCnt: 3, + bathroomCnt: 2, + roomCnt: 3, + address: "경기도 가평군 청평면 전원로 101", + guideKind: "농촌", + places: [ + { latitude: "37.8194", longitude: "127.5498", name: "청평호", seq: "1" }, + { latitude: "37.6915", longitude: "127.4917", name: "아침고요수목원", seq: "2" }, + ], + files: { path: "/images/countryside_cottage.jpg" }, + userId: "user101", + }, + { + title: "스키 롯지", + startAt: new Date("2024-12-15T16:00:00"), + endAt: new Date("2024-12-22T10:00:00"), + limitPeople: 12, + price: 800000, + description: "스키와 스노우보드를 즐기기에 최적의 위치에 있는 아늑한 스키 롯지입니다.", + wifi: true, + tv: true, + kitchen: true, + washingMachine: true, + airConditioner: false, + parking: true, + bedCnt: 6, + bathroomCnt: 4, + roomCnt: 5, + address: "강원도 평창군 대관령면 스키장로 202", + guideKind: "모험", + places: [ + { latitude: "37.6318", longitude: "128.6823", name: "용평리조트", seq: "1" }, + { latitude: "37.6455", longitude: "128.7006", name: "알펜시아리조트", seq: "2" }, + ], + files: { path: "/images/ski_lodge.jpg" }, + userId: "user202", + }, + { + title: "사막 오아시스", + startAt: new Date("2024-08-10T13:00:00"), + endAt: new Date("2024-08-18T11:00:00"), + limitPeople: 5, + price: 600000, + description: "아름다운 석양과 평화로운 환경을 갖춘 사막 속의 오아시스입니다.", + wifi: true, + tv: false, + kitchen: true, + washingMachine: false, + airConditioner: true, + parking: true, + bedCnt: 3, + bathroomCnt: 2, + roomCnt: 2, + address: "제주특별자치도 서귀포시 오아시스로 303", + guideKind: "독특한 경험", + places: [ + { latitude: "33.4648", longitude: "126.5312", name: "성산일출봉", seq: "1" }, + { latitude: "33.3868", longitude: "126.5600", name: "섭지코지", seq: "2" }, + ], + files: { path: "/images/desert_oasis.jpg" }, + userId: "user303", + }, + { + title: "호숫가 집", + startAt: new Date("2024-06-01T15:00:00"), + endAt: new Date("2024-06-08T11:00:00"), + limitPeople: 7, + price: 700000, + description: "개인 선착장을 갖춘 아름다운 호숫가 집으로, 다양한 수상활동을 즐길 수 있습니다.", + wifi: true, + tv: true, + kitchen: true, + washingMachine: true, + airConditioner: true, + parking: true, + bedCnt: 4, + bathroomCnt: 3, + roomCnt: 4, + address: "경기도 양평군 강변로 404", + guideKind: "휴식", + places: [ + { latitude: "36.5482", longitude: "128.2122", name: "양평 강상산", seq: "1" }, + { latitude: "36.5150", longitude: "128.3042", name: "두물머리", seq: "2" }, + ], + files: { path: "/images/lake_house.jpg" }, + userId: "user404", + }] + ); + }, []) + + const navigate= useNavigate(); + return (
- -
- {"icon"} - 검색된 여행이 없어요 ㅜㅜ - 올바른 검색어인지 확인해주세요 + +
+
+ { + !renderList.length ? +
+ {"icon"} + 검색된 여행이 없어요 ㅜㅜ + 올바른 검색어인지 확인해주세요 +
: renderList.map((item, index) => ( +
{navigate("/subscribe")}} style={{display: 'flex', width: 330, height: 377, flexDirection: 'column', marginBottom: 10, marginTop: index == 0 ? -60 : 0}}> +
+
+ +
+
+
+
+ {item.title} + ★ 4.8 +
+
+ {`${item.places.map((item) => (`${item.name} ➡`))}`.slice(0, -1)} + {`${index == 2 ? "이해준" : index == 4 ? "배채희" : index == 5 ? "김의현" : index == 7 ? "김동찬" : "의성군시"} - ${index != 0 ? Math.floor((((index + 10 - index * 2) * 1000) ^ 2)/index * 100) : 15000}원`} +
+
+
+ )) + }
) } diff --git a/web/src/page/search/question/index.tsx b/web/src/page/search/question/index.tsx index b20c767..67165fe 100644 --- a/web/src/page/search/question/index.tsx +++ b/web/src/page/search/question/index.tsx @@ -8,7 +8,8 @@ import selectorImg3 from "../../../assets/Group 43.svg"; import selectorImg4 from "../../../assets/Group 44.svg"; import plusIcon from "../../../assets/Group 45 (1).svg"; import minusIcon from "../../../assets/Group 46 (1).svg"; -import Number from "../../../components/auth/number"; +import {useAtom} from "jotai"; +import {isRender} from "../../../store/authtype/authtype.atom"; const SearchQuestion = () => { const getDaysInMonth = (year: number, month: number) => { @@ -43,6 +44,8 @@ const SearchQuestion = () => { days.push(new Date(d)); } + const [isRend, setIsRend] = useAtom(isRender); + const [adults, setAdults] = useState(0); const [children, setChildren] = useState(0); const [baby, setBaby] = useState(0); @@ -83,6 +86,14 @@ const SearchQuestion = () => { } }; + const [rr, sr] = useState(false); + + + useEffect(() => { + rr && navigate("/search") + sr(false) + }, [rr]) + const isDateInRange = (date: string) => { if (startDate && endDate) { return date >= startDate && date <= endDate; @@ -377,7 +388,10 @@ const SearchQuestion = () => { setEndDate(null); setIndexSelector(0) }}>전체 초기화 -
{console.log(adults, children, baby, pet, startDate, endDate, indexSelectorNum)}}> +
{ + setIsRend(true) + sr(true) + }}> 검색하기
diff --git a/web/src/page/subscription/index.tsx b/web/src/page/subscription/index.tsx new file mode 100644 index 0000000..0a3857d --- /dev/null +++ b/web/src/page/subscription/index.tsx @@ -0,0 +1,37 @@ +import bicon from "../../assets/Group 51.svg" +import dismoss from "../../assets/Group 53.svg" +import gongu from "../../assets/Group 54.svg" +import ao from "../../assets/Group 55.svg" +import userIcon from "../../assets/Group 56.svg" +import {useNavigate} from "react-router-dom"; + +const Subscription = () => { + + const navigate = useNavigate() + + return ( +
+ + + {navigate("/search")}} + style={{position: 'absolute', top: 37.5, left: 20, width: 24, height: 24, opacity: 0.9}}/> + +
+ 산속 휴양지 + {`${[ + { latitude: "33.4648", longitude: "126.5312", name: "빙계 계곡 야영장", seq: "1" }, + { latitude: "33.3868", longitude: "126.5600", name: "산운마을", seq: "2" }, + { latitude: "33.3868", longitude: "126.5600", name: "군청", seq: "3" }, + { latitude: "33.3868", longitude: "126.5600", name: "숙소", seq: "4" } + ].map((item) => (`${item.name} ➡`))}`.slice(0, -1)}` +
+ + +
+ ) +} + +export default Subscription \ No newline at end of file diff --git a/web/src/store/authtype/authtype.atom.ts b/web/src/store/authtype/authtype.atom.ts index 3e3c207..0844b08 100644 --- a/web/src/store/authtype/authtype.atom.ts +++ b/web/src/store/authtype/authtype.atom.ts @@ -1,2 +1,3 @@ import { atom } from 'jotai' -export const authType = atom(false); \ No newline at end of file +export const authType = atom(false); +export const isRender = atom(false); \ No newline at end of file diff --git a/web/src/types/GuideType.ts b/web/src/types/GuideType.ts new file mode 100644 index 0000000..e8356f0 --- /dev/null +++ b/web/src/types/GuideType.ts @@ -0,0 +1,22 @@ +export interface GuideType { + title : string + startAt : Date + endAt : Date + limitPeople : number + price : number + description : string + wifi : boolean + tv : boolean + kitchen : boolean + washingMachine : boolean + airConditioner : boolean + parking : boolean + bedCnt : number + bathroomCnt : number + roomCnt : number + address : string + guideKind : any + places : {latitude :String , longitude :String , name :String , seq :String }[] + files : {path : string} + userId : string +} \ No newline at end of file