diff --git a/index.html b/index.html index 32bd1b1..ba851e1 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,22 @@ - - - - - - - Eatsfine - - - - - -
- - - + + + + + + + Eatsfine + + + + + +
+ + + diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx index f71661a..c397aad 100644 --- a/src/layouts/PublicLayout.tsx +++ b/src/layouts/PublicLayout.tsx @@ -1,36 +1,36 @@ -import { Link, Outlet } from "react-router-dom"; - -type PublicLayoutProps = { - title?: string; - subtitle?: string; -}; - -export default function PublicLayout({ - title = "잇츠파인", - subtitle, -}: PublicLayoutProps) { - return ( -
-
-
- - 잇츠파인 로고 - -
-

{title}

- {subtitle ? ( -

{subtitle}

- ) : null} -
-
-
-
- -
-
- ); -} +import { Link, Outlet } from "react-router-dom"; + +type PublicLayoutProps = { + title?: string; + subtitle?: string; +}; + +export default function PublicLayout({ + title = "잇츠파인", + subtitle, +}: PublicLayoutProps) { + return ( +
+
+
+ + 잇츠파인 로고 + +
+

{title}

+ {subtitle ? ( +

{subtitle}

+ ) : null} +
+
+
+
+ +
+
+ ); +} diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx index 007ba01..ee2e373 100644 --- a/src/pages/SearchPage.tsx +++ b/src/pages/SearchPage.tsx @@ -1,198 +1,198 @@ -import { useMemo, useState } from "react"; -import { Search } from "lucide-react"; -import RestaurantList from "@/components/restaurant/RestaurantList"; -import { type ReservationDraft, type Restaurant } from "@/types/restaurant"; -import RestaurantDetailModal from "@/components/restaurant/RestaurantDetailModal"; -import { MOCK_RESTAURANTS } from "@/mock/restaurants"; -import RestaurantMarker from "@/components/restaurant/RestaurantMarker"; -import ReservationModal from "@/components/reservation/ReservationModal"; -import ReservationConfirmMoodal from "@/components/reservation/ReservationConfirmModal"; -import ReservationCompleteModal from "@/components/reservation/ReservationCompleteModal"; -import PaymentModal from "@/components/reservation/PaymentModal"; - -export default function SearchPage() { - const [query, setQuery] = useState(""); - const [selected, setSelected] = useState(null); - - const [detailOpen, setDetailOpen] = useState(false); - const [reserveOpen, setReserveOpen] = useState(false); - const [confirmOpen, setConfirmOpen] = useState(false); - const [draft, setDraft] = useState(null); - const [completeOpen, setCompleteOpen] = useState(false); - const [paymentOpen, setPaymentOpen] = useState(false); - - const openDetail = (restaurant: Restaurant) => { - setSelected(restaurant); - setDraft(null); - setConfirmOpen(false); - setReserveOpen(false); - setDetailOpen(true); - }; - - const goReserve = () => { - setDraft(null); - setDetailOpen(false); - setReserveOpen(true); - }; - - const backToDetail = () => { - setReserveOpen(false); - setDetailOpen(true); - }; - - const goConfirm = (d: ReservationDraft) => { - setDraft(d); - setReserveOpen(false); - setConfirmOpen(true); - setPaymentOpen(false); - }; - - const backToReserve = () => { - setReserveOpen(true); - setConfirmOpen(false); - }; - - const goPayment = () => { - setConfirmOpen(false); - setPaymentOpen(true); - }; - - const closeAll = () => { - setDraft(null); - setDetailOpen(false); - setReserveOpen(false); - setConfirmOpen(false); - setSelected(null); - setCompleteOpen(false); - setPaymentOpen(false); - }; - - const results = useMemo(() => { - const q = query.trim().toLowerCase(); - - if (!q) return []; - return MOCK_RESTAURANTS.filter((r) => { - const name = r.name.toLowerCase(); - const category = (r.category ?? "").toLowerCase(); - const address = r.address.toLowerCase(); - return name.includes(q) || category.includes(q) || address.includes(q); - }); - }, [query]); - - const handleSelect = (restaurant: Restaurant) => { - openDetail(restaurant); - }; - - return ( - <> - {/* 검색창 */} -
-
- setQuery(e.target.value)} - /> - -
-
- - {/* 지도는 API연동을 위해 지금 비워둠 */} -
-
-
-
-

카카오맵 API 연동 영역

-
-
-
-
- {results.map((r) => ( - - ))} -
-
- -
- {query.trim() ? ( - - ) : null} -
- {/* 상세 페이지 모달 */} - {selected && ( - { - setDetailOpen(o); - if (!o) closeAll(); - }} - restaurant={selected} - onClickReserve={goReserve} - /> - )} - {/* 예약 페이지 모달 */} - {selected && ( - { - setReserveOpen(o); - if (!o) closeAll(); - }} - restaurant={selected} - initialDraft={draft ?? undefined} - onClickConfirm={goConfirm} - onBack={backToDetail} //X표시 누르면 상세페이지 모달로 이동 - /> - )} - {/* 예약확인 페이지 모달 */} - {selected && draft && ( - - )} - - {/* 결제 모달 */} - {selected && draft && ( - { - setCompleteOpen(true); //결제 성공 완료모달 - }} - onBack={() => setConfirmOpen(true)} - /> - )} - {/* 예약완료 페이지 모달 */} - {selected && draft && ( - - )} - - ); -} +import { useMemo, useState } from "react"; +import { Search } from "lucide-react"; +import RestaurantList from "@/components/restaurant/RestaurantList"; +import { type ReservationDraft, type Restaurant } from "@/types/restaurant"; +import RestaurantDetailModal from "@/components/restaurant/RestaurantDetailModal"; +import { MOCK_RESTAURANTS } from "@/mock/restaurants"; +import RestaurantMarker from "@/components/restaurant/RestaurantMarker"; +import ReservationModal from "@/components/reservation/ReservationModal"; +import ReservationConfirmMoodal from "@/components/reservation/ReservationConfirmModal"; +import ReservationCompleteModal from "@/components/reservation/ReservationCompleteModal"; +import PaymentModal from "@/components/reservation/PaymentModal"; + +export default function SearchPage() { + const [query, setQuery] = useState(""); + const [selected, setSelected] = useState(null); + + const [detailOpen, setDetailOpen] = useState(false); + const [reserveOpen, setReserveOpen] = useState(false); + const [confirmOpen, setConfirmOpen] = useState(false); + const [draft, setDraft] = useState(null); + const [completeOpen, setCompleteOpen] = useState(false); + const [paymentOpen, setPaymentOpen] = useState(false); + + const openDetail = (restaurant: Restaurant) => { + setSelected(restaurant); + setDraft(null); + setConfirmOpen(false); + setReserveOpen(false); + setDetailOpen(true); + }; + + const goReserve = () => { + setDraft(null); + setDetailOpen(false); + setReserveOpen(true); + }; + + const backToDetail = () => { + setReserveOpen(false); + setDetailOpen(true); + }; + + const goConfirm = (d: ReservationDraft) => { + setDraft(d); + setReserveOpen(false); + setConfirmOpen(true); + setPaymentOpen(false); + }; + + const backToReserve = () => { + setReserveOpen(true); + setConfirmOpen(false); + }; + + const goPayment = () => { + setConfirmOpen(false); + setPaymentOpen(true); + }; + + const closeAll = () => { + setDraft(null); + setDetailOpen(false); + setReserveOpen(false); + setConfirmOpen(false); + setSelected(null); + setCompleteOpen(false); + setPaymentOpen(false); + }; + + const results = useMemo(() => { + const q = query.trim().toLowerCase(); + + if (!q) return []; + return MOCK_RESTAURANTS.filter((r) => { + const name = r.name.toLowerCase(); + const category = (r.category ?? "").toLowerCase(); + const address = r.address.toLowerCase(); + return name.includes(q) || category.includes(q) || address.includes(q); + }); + }, [query]); + + const handleSelect = (restaurant: Restaurant) => { + openDetail(restaurant); + }; + + return ( + <> + {/* 검색창 */} +
+
+ setQuery(e.target.value)} + /> + +
+
+ + {/* 지도는 API연동을 위해 지금 비워둠 */} +
+
+
+
+

카카오맵 API 연동 영역

+
+
+
+
+ {results.map((r) => ( + + ))} +
+
+ +
+ {query.trim() ? ( + + ) : null} +
+ {/* 상세 페이지 모달 */} + {selected && ( + { + setDetailOpen(o); + if (!o) closeAll(); + }} + restaurant={selected} + onClickReserve={goReserve} + /> + )} + {/* 예약 페이지 모달 */} + {selected && ( + { + setReserveOpen(o); + if (!o) closeAll(); + }} + restaurant={selected} + initialDraft={draft ?? undefined} + onClickConfirm={goConfirm} + onBack={backToDetail} //X표시 누르면 상세페이지 모달로 이동 + /> + )} + {/* 예약확인 페이지 모달 */} + {selected && draft && ( + + )} + + {/* 결제 모달 */} + {selected && draft && ( + { + setCompleteOpen(true); //결제 성공 완료모달 + }} + onBack={() => setConfirmOpen(true)} + /> + )} + {/* 예약완료 페이지 모달 */} + {selected && draft && ( + + )} + + ); +}