From a96c4e5dc0689c462961d4ff01c89c7e4c6c358b Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 3 Oct 2024 11:39:42 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Feature]#27=20-=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/performance/PerformancePage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/performance/PerformancePage.jsx b/src/pages/performance/PerformancePage.jsx index 7ce2d07..fce0412 100644 --- a/src/pages/performance/PerformancePage.jsx +++ b/src/pages/performance/PerformancePage.jsx @@ -1,7 +1,7 @@ //공연페이지 - 이쪽에서 각자 만든거 합치면 될거같아요 import * as S from "./PerformancePage.styled"; import { useState } from "react"; -import { PerformanceSlide } from "./performanceslide/PerformanceSlide"; +import { PerformanceSlide } from "../../components/performanceP/performanceslide/PerformanceSlide"; import { TimeTable } from "@components/performanceP/timeTable/TimeTable"; import { StarDetail } from "@components/performanceP/StarDetail/StarDetail"; export const PerformancePage = () => { From 0e2f76457119d9ed42914478a86c8f74bd5a4358 Mon Sep 17 00:00:00 2001 From: chaem03 Date: Thu, 3 Oct 2024 12:43:37 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Feature]#27=20-=20API=20=EC=97=B0=EA=B2=B0?= =?UTF-8?q?=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 91 +++++++++++ package.json | 1 + src/apis/booth.js | 18 +++ src/apis/boothDetail.js | 10 ++ src/apis/instance.js | 28 ++++ src/hook/useBooth.js | 32 ++++ src/hook/useBoothDetail.js | 26 ++++ src/pages/booth/BoothPage.jsx | 286 +++++++++++++++++++++++----------- src/router.jsx | 12 +- 9 files changed, 409 insertions(+), 95 deletions(-) create mode 100644 src/apis/booth.js create mode 100644 src/apis/boothDetail.js create mode 100644 src/apis/instance.js create mode 100644 src/hook/useBooth.js create mode 100644 src/hook/useBoothDetail.js diff --git a/package-lock.json b/package-lock.json index b15195f..81db6c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "vite-project", "version": "0.0.0", "dependencies": { + "axios": "^1.7.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", @@ -1557,6 +1558,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -1573,6 +1579,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1721,6 +1737,17 @@ "dev": true, "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1891,6 +1918,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -2527,6 +2562,25 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2537,6 +2591,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3398,6 +3465,25 @@ "yallist": "^3.0.2" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3715,6 +3801,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 2e995e8..fdbdfde 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.7.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", diff --git a/src/apis/booth.js b/src/apis/booth.js new file mode 100644 index 0000000..3932b85 --- /dev/null +++ b/src/apis/booth.js @@ -0,0 +1,18 @@ +import { instance } from "./instance"; +export const getBoothList = async ({ + day, + category, + location, + is_night, + is_reservable, +}) => { + try { + const res = await instance.get( + `api/v1/booth/?day=${day}&category=${category}&location=${location}&is_night=${is_night}&is_reservable=${is_reservable}` + ); + return res; + } catch (err) { + console.log(err); + throw err; + } +}; diff --git a/src/apis/boothDetail.js b/src/apis/boothDetail.js new file mode 100644 index 0000000..49dc800 --- /dev/null +++ b/src/apis/boothDetail.js @@ -0,0 +1,10 @@ +import { instance } from "./instance"; +export const getBoothDetail = async ({ booth_id }) => { + try { + const res = await instance.get(`api/v1/booth/detail/${booth_id}`); + return res; + } catch (err) { + console.log(err); + throw err; + } +}; diff --git a/src/apis/instance.js b/src/apis/instance.js new file mode 100644 index 0000000..85a15fc --- /dev/null +++ b/src/apis/instance.js @@ -0,0 +1,28 @@ +import axios from "axios"; + +// Axios 인스턴스 생성 +export const instance = axios.create({ + baseURL: import.meta.env.VITE_BASE_URL, + withCredentials: true, + headers: { + "Content-Type": "application/json", + }, + timeout: 10000, // 10초 타임아웃 설정 +}); + +// 요청 인터셉터 추가 +instance.interceptors.request.use( + (config) => config, + (error) => Promise.reject(error) +); + +// 응답 인터셉터 추가 +instance.interceptors.response.use( + (response) => response, + (error) => { + if (error.code === "ECONNABORTED") { + console.log("Request timeout"); + } + return Promise.reject(error); + } +); diff --git a/src/hook/useBooth.js b/src/hook/useBooth.js new file mode 100644 index 0000000..c81678c --- /dev/null +++ b/src/hook/useBooth.js @@ -0,0 +1,32 @@ +// src/hooks/useMain.js +import { useState, useEffect } from "react"; +import { getBoothList } from "../apis/booth"; +import { useParams } from "react-router-dom"; + +export const useBoothData = () => { + const [boothData, setBoothData] = useState(null); + const { day, category, location, is_night, is_reservable } = useParams(); + const fetchBoothData = async () => { + try { + const res = await getBoothList( + day, + category, + location, + is_night, + is_reservable + ); + console.log("response:", res); + const resData = res.data; + console.log("resData:", resData); + setBoothData(resData); + } catch (error) { + // console.error("error:", error); + } + }; + + useEffect(() => { + fetchBoothData(); + }, []); + + return { boothData }; +}; diff --git a/src/hook/useBoothDetail.js b/src/hook/useBoothDetail.js new file mode 100644 index 0000000..c75305c --- /dev/null +++ b/src/hook/useBoothDetail.js @@ -0,0 +1,26 @@ +// src/hooks/useMain.js +import { useState, useEffect } from "react"; +import { getBoothDetail } from "../apis/boothDetail"; +import { useParams } from "react-router-dom"; + +export const useBoothDetailData = () => { + const [boothDetailData, setBoothDetailData] = useState(null); + const { booth_id } = useParams(); + const fetchBoothDetailData = async () => { + try { + const res = await getBoothDetail(booth_id); + console.log("response:", res); + const resData = res.data; + console.log("resData:", resData); + setBoothDetailData(resData); + } catch (error) { + // console.error("error:", error); + } + }; + + useEffect(() => { + fetchBoothDetailData(); + }, []); + + return { boothDetailData }; +}; diff --git a/src/pages/booth/BoothPage.jsx b/src/pages/booth/BoothPage.jsx index 961fc18..0ef0868 100644 --- a/src/pages/booth/BoothPage.jsx +++ b/src/pages/booth/BoothPage.jsx @@ -1,26 +1,28 @@ -import React, { useState, useEffect, useRef } from 'react'; -import * as S from './Styled'; +import React, { useState, useEffect, useRef } from "react"; +import * as S from "./Styled"; import { RxDoubleArrowDown, RxDoubleArrowUp } from "react-icons/rx"; -import { TopBar } from '@components/topBar/TopBar'; - -import BoothData from '../../../src/boothdata/Boothdata'; -import LinenowLogo from '../../assets/images/LinenowLogo.png' -import nonselect_GI from '../../assets/images/nonselect_GI.png' -import nonselect_JU from '../../assets/images/nonselect_JU.png' -import select_GI from '../../assets/images/select_GI.png' -import select_JU from '../../assets/images/select_JU.png' +import { TopBar } from "@components/topBar/TopBar"; +import { useBoothData } from "../../hook/useBooth"; +import BoothData from "../../../src/boothdata/Boothdata"; +import LinenowLogo from "../../assets/images/LinenowLogo.png"; +import nonselect_GI from "../../assets/images/nonselect_GI.png"; +import nonselect_JU from "../../assets/images/nonselect_JU.png"; +import select_GI from "../../assets/images/select_GI.png"; +import select_JU from "../../assets/images/select_JU.png"; export const BoothPage = () => { + const { boothData } = useBoothData(); + console.log("boothData:", boothData); // 초기 날짜 선택 용 - const [selectedDate, setSelectedDate] = useState('10/7(월)'); + const [selectedDate, setSelectedDate] = useState("10/7(월)"); // 부스 리스트를 띄울 지 말지 const [isBoothListOpen, setIsBoothListOpen] = useState(true); // 부스 필터링 용 - const [selectedTime, setSelectedTime] = useState('시간'); - const [selectedType, setSelectedType] = useState('유형'); - const [selectedLocation, setSelectedLocation] = useState('위치'); + const [selectedTime, setSelectedTime] = useState("시간"); + const [selectedType, setSelectedType] = useState("유형"); + const [selectedLocation, setSelectedLocation] = useState("위치"); const [isDropdownOpen, setIsDropdownOpen] = useState({ time: false, type: false, @@ -46,29 +48,29 @@ export const BoothPage = () => { }; const handleSelect = (type, value) => { - if (type === 'time') setSelectedTime(value); - if (type === 'type') setSelectedType(value); - if (type === 'location') setSelectedLocation(value); + if (type === "time") setSelectedTime(value); + if (type === "type") setSelectedType(value); + if (type === "location") setSelectedLocation(value); setIsDropdownOpen((prevState) => ({ ...prevState, - [type]: prevState[type], // 선택 후 필터를 닫는 겁니다아 + [type]: prevState[type], // 선택 후 필터를 닫는 겁니다아 })); }; const resetFilters = (e) => { - setSelectedTime('시간'); - setSelectedType('유형'); - setSelectedLocation('위치'); + setSelectedTime("시간"); + setSelectedType("유형"); + setSelectedLocation("위치"); const button = e.currentTarget; - button.style.transform = 'rotate(0deg)'; - button.style.transition = 'none'; - + button.style.transform = "rotate(0deg)"; + button.style.transition = "none"; + setTimeout(() => { - button.style.transition = 'transform 1s ease'; - button.style.transform = 'rotate(-360deg)'; + button.style.transition = "transform 1s ease"; + button.style.transform = "rotate(-360deg)"; }, 10); }; @@ -76,7 +78,7 @@ export const BoothPage = () => { const handleBoothLocation = (boothId) => { const booth = BoothData.find((booth) => booth.id === boothId); setHighlightedBooth(booth); - } + }; // 날짜 선택 용 const handleDateChange = (date) => { @@ -95,9 +97,13 @@ export const BoothPage = () => { }; const filteredBooths = BoothData.filter((booth) => { - const timeMatch = selectedTime === '시간' || booth.filters.time === selectedTime; - const typeMatch = selectedType === '유형' || booth.filters.type === selectedType; - const locationMatch = selectedLocation === '위치' || booth.filters.location === selectedLocation; + const timeMatch = + selectedTime === "시간" || booth.filters.time === selectedTime; + const typeMatch = + selectedType === "유형" || booth.filters.type === selectedType; + const locationMatch = + selectedLocation === "위치" || + booth.filters.location === selectedLocation; // 모든 필터 조건을 만족하는 부스만 반환 return timeMatch && typeMatch && locationMatch; @@ -105,21 +111,25 @@ export const BoothPage = () => { // 부스 유형에 따른 초기 마커 이미지 설정 함수 const getInitialMarkerImage = (booth) => { - let markerImage = booth.filters.type === '주점' ? nonselect_JU : nonselect_GI; + let markerImage = + booth.filters.type === "주점" ? nonselect_JU : nonselect_GI; - return new window.kakao.maps.MarkerImage(markerImage, new window.kakao.maps.Size(30, 36)); + return new window.kakao.maps.MarkerImage( + markerImage, + new window.kakao.maps.Size(30, 36) + ); }; // 카카오맵 마커 생성 useEffect(() => { - const script = document.createElement('script'); + const script = document.createElement("script"); script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=972351b156b1bdfe825cb095c12d1e56&autoload=false`; script.async = true; document.head.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { - const container = document.getElementById('map'); + const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(37.5567, 127.0003), level: 3, @@ -128,7 +138,10 @@ export const BoothPage = () => { // 초기 마커 생성 filteredBooths.forEach((booth) => { - const markerPosition = new window.kakao.maps.LatLng(booth.latitude, booth.longitude); + const markerPosition = new window.kakao.maps.LatLng( + booth.latitude, + booth.longitude + ); const markerImage = getInitialMarkerImage(booth); // 유형에 따라 초기 마커 이미지 설정 const marker = new window.kakao.maps.Marker({ position: markerPosition, @@ -137,7 +150,7 @@ export const BoothPage = () => { }); // 마커 클릭 이벤트 설정 - window.kakao.maps.event.addListener(marker, 'click', () => { + window.kakao.maps.event.addListener(marker, "click", () => { handleBoothLocation(booth.id); // 부스 선택 }); @@ -152,13 +165,12 @@ export const BoothPage = () => { }; }, []); - // 선택된 부스에 따라 마커 이미지 변경 useEffect(() => { // 선택된 부스가 없으면 모든 마커를 초기화 if (!highlightedBooth) { markersRef.current.forEach(({ marker, boothId }) => { - const booth = BoothData.find(b => b.id === boothId); // 해당 부스 데이터 찾기 + const booth = BoothData.find((b) => b.id === boothId); // 해당 부스 데이터 찾기 if (booth) { // 초기 마커 이미지로 변경 const initialImage = getInitialMarkerImage(booth); @@ -170,28 +182,35 @@ export const BoothPage = () => { if (highlightedBooth && mapRef.current) { // 선택된 부스의 위치 좌표로 맵의 중심 이동 - const newCenter = new window.kakao.maps.LatLng(highlightedBooth.latitude-0.0017, highlightedBooth.longitude); + const newCenter = new window.kakao.maps.LatLng( + highlightedBooth.latitude - 0.0017, + highlightedBooth.longitude + ); mapRef.current.setCenter(newCenter); } - + // 선택된 부스가 있을 경우, 해당 마커만 업데이트 markersRef.current.forEach(({ boothId, marker }) => { const isHighlighted = highlightedBooth && highlightedBooth.id === boothId; - + // 선택된 부스의 마커를 변경 if (isHighlighted) { let markerImage; - if (highlightedBooth.filters.type === '주점') { + if (highlightedBooth.filters.type === "주점") { markerImage = select_JU; // 선택된 주점일 경우 - } else if (highlightedBooth.filters.type === '기타') { + } else if (highlightedBooth.filters.type === "기타") { markerImage = select_GI; // 선택된 기타일 경우 } else { - } - marker.setImage(new window.kakao.maps.MarkerImage(markerImage, new window.kakao.maps.Size(32, 40))); + marker.setImage( + new window.kakao.maps.MarkerImage( + markerImage, + new window.kakao.maps.Size(32, 40) + ) + ); } else { // 선택되지 않은 부스는 초기 이미지로 유지 - const booth = BoothData.find(b => b.id === boothId); // 해당 부스 데이터 찾기 + const booth = BoothData.find((b) => b.id === boothId); // 해당 부스 데이터 찾기 if (booth) { const initialImage = getInitialMarkerImage(booth); marker.setImage(initialImage); @@ -199,7 +218,6 @@ export const BoothPage = () => { } }); }, [highlightedBooth]); - return ( <> @@ -209,14 +227,14 @@ export const BoothPage = () => { handleDateChange('10/7(월)')} + $active={selectedDate === "10/7(월)"} + onClick={() => handleDateChange("10/7(월)")} > 10/7(월) handleDateChange('10/8(화)')} + $active={selectedDate === "10/8(화)"} + onClick={() => handleDateChange("10/8(화)")} > 10/8(화) @@ -224,50 +242,108 @@ export const BoothPage = () => { {/* 카카오맵 자리 */} - 여기에 카카오맵이 들어갑니다. + + 여기에 카카오맵이 들어갑니다. + {/* 부스 리스트 */} - {isBoothListOpen ? : } + + {isBoothListOpen ? : } + {/* 필터 섹션 (부스 리스트 안에) */} - toggleDropdown('time')}> + toggleDropdown("time")} + > {selectedTime} - + + + {isDropdownOpen.time && ( - handleSelect('time', '시간')}>전체 - handleSelect('time', '낮')}>낮 - handleSelect('time', '밤')}>밤 + handleSelect("time", "시간")} + > + 전체 + + handleSelect("time", "낮")}> + 낮 + + handleSelect("time", "밤")}> + 밤 + )} - toggleDropdown('type')}> + toggleDropdown("type")} + > {selectedType} - + + + {isDropdownOpen.type && ( - handleSelect('type', '유형')}>전체 - handleSelect('type', '푸드트럭')}>푸드트럭 - handleSelect('type', '주점')}>주점 - handleSelect('type', '기타')}>기타 + handleSelect("type", "유형")} + > + 전체 + + handleSelect("type", "푸드트럭")} + > + 푸드트럭 + + handleSelect("type", "주점")} + > + 주점 + + handleSelect("type", "기타")} + > + 기타 + )} - toggleDropdown('location')}> + toggleDropdown("location")} + > {selectedLocation} - + + + {isDropdownOpen.location && ( - handleSelect('location', '위치')}>전체 - handleSelect('location', '팔정도')}>팔정도 - handleSelect('location', '만해광장')}>만해광장 + handleSelect("location", "위치")} + > + 전체 + + handleSelect("location", "팔정도")} + > + 팔정도 + + handleSelect("location", "만해광장")} + > + 만해광장 + )} @@ -279,12 +355,16 @@ export const BoothPage = () => { {/* 부스 리스트 */} - 부스 클릭 시 테이블링 예약 링크로 이동 가능합니다. + + 부스 클릭 시 테이블링 예약 링크로 이동 가능합니다. + {filteredBooths.length > 0 ? ( filteredBooths.map((booth) => ( handleSelectBooth(booth)} > {/* 나중에 좋아요순으로 수정 */} @@ -295,19 +375,19 @@ export const BoothPage = () => { {booth.owner} - { - e.stopPropagation(); - handleBoothLocation(booth.id) - }}> + { + e.stopPropagation(); + handleBoothLocation(booth.id); + }} + > 위치 보기 )) ) : ( - - 현재 운영중인 부스가 없어요! - + 현재 운영중인 부스가 없어요! )} @@ -318,27 +398,49 @@ export const BoothPage = () => { {/* setSelectBooth(null)} /> */} - setSelectBooth(null)}>X + setSelectBooth(null)}> + X + - {selectBooth.boothName} + + {selectBooth.boothName} + {selectBooth.filters.time}부스 - {selectBooth.filters.type} - {selectBooth.filters.location} + $bgColor={ + selectBooth.filters.time === "낮" + ? "#FFF2AD" + : "#D4EAFF" + } + $FontColor={ + selectBooth.filters.time === "낮" + ? "#6D5C00" + : "#00326D" + } + > + {selectBooth.filters.time}부스 + + + {selectBooth.filters.type} + + + {selectBooth.filters.location} + - + - {selectBooth.description && ( 한줄소개 - {selectBooth.description} + + {selectBooth.description} + )} {selectBooth.owner && ( @@ -350,14 +452,18 @@ export const BoothPage = () => { {selectBooth.operationTime && ( 운영시간 - {selectBooth.operationTime} + + {selectBooth.operationTime} + )} {selectBooth.entranceFee && ( 입장료 - {selectBooth.entranceFee} + + {selectBooth.entranceFee} + )} {selectBooth.menu && ( diff --git a/src/router.jsx b/src/router.jsx index db42afc..a52ee43 100644 --- a/src/router.jsx +++ b/src/router.jsx @@ -2,10 +2,9 @@ import { createBrowserRouter } from "react-router-dom"; import { DefaultLayout } from "@layout/DefaultLayout"; import { MainPage } from "@pages/main/MainPage"; import { PerformancePage } from "@pages/performance/PerformancePage"; -import { NoticePage } from "@pages/notice/NoticePage"; +import { NoticePage } from "@pages/notice/NoticePage"; import { BoothPage } from "@pages/booth/BoothPage"; -import { AboutPage } from "@pages/about/AboutPage" - +import { AboutPage } from "@pages/about/AboutPage"; export const router = createBrowserRouter([ { @@ -18,9 +17,12 @@ export const router = createBrowserRouter([ // 공지 페이지 { path: "/notice", element: }, // named import 적용 //부스페이지 - { path: "/booth", element: }, + { + path: "/:booth_id/:day/:category/:location/:is_night/:is_reservable", + element: , + }, //개발자페이지 - { path: "/about", element: }, + { path: "/about", element: }, ], }, ]);