diff --git a/src/api/auth.ts b/src/api/auth.ts index a04130a..316de8b 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -29,7 +29,7 @@ export const useAuthProvider = () => { error: emailLoginError, data: loginResponse, } = useMutation({ mutationFn: loginByEmail }); - const { data, refetch } = useQuery({ queryKey: ['/user/me'] }); + const { data, refetch, error } = useQuery({ queryKey: ['/user/me'] }); useEffect(() => { if (loginResponse?.accessToken) { @@ -38,7 +38,11 @@ export const useAuthProvider = () => { refetch(); }, [loginResponse, refetch]); - return { loginByEmail: mutateByEmail, error: emailLoginError, user: data }; + return { + loginByEmail: mutateByEmail, + error: emailLoginError, + user: error ? null : data, + }; }; export const authContext = createContext< diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 069271f..756f96c 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,14 +1,13 @@ -import React from 'react'; +import BannerSlider from './component/BannerSlider'; +import CategoryMenu from './component/CategoryMenu'; import Header from './component/Header'; import Menu from './component/Menu'; -import BannerSlider from './component/BannerSlider'; import NowReviews from './component/NowReviews'; -import CategoryMenu from './component/CategoryMenu'; import SearchMenu from './component/SearchMenu'; export default function Home() { return ( -
+
diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx index 9cfcad6..a03ee35 100644 --- a/src/pages/SearchPlace.tsx +++ b/src/pages/SearchPlace.tsx @@ -1,15 +1,35 @@ -import React from 'react'; -import SearchBar from './component/SearchBar'; +import { SubmitHandler, useForm } from 'react-hook-form'; +import { GoPerson } from 'react-icons/go'; +import { GrMap } from 'react-icons/gr'; import Btn from './component/Btn'; import CategoryChoice from './component/CategoryChoice'; -import { GrMap } from 'react-icons/gr'; -import { GoPerson } from 'react-icons/go'; +import SearchBar from './component/SearchBar'; +import { useNavigate } from 'react-router-dom'; + +interface SearchPlaceProps { + query: string; + regions: string[]; + withs: string[]; + tags: string[]; +} export default function SearchPlace() { + const { register, setValue, handleSubmit } = useForm(); + const navigate = useNavigate(); + + const search: SubmitHandler = (data) => { + navigate( + `/map?query=${data.query}&withs=${data.withs}®ions=${data.regions}&tags=${data.tags}`, + ); + }; + return ( -
- -
+
+ +

검색하기 막막하시나요?

@@ -17,22 +37,29 @@ export default function SearchPlace() { 키워드 선택만 하시면 저희가 적합한 장소를 찾아드릴게요!

} + icon={} title="지역을 선택해주세요" - not={true} + not category={['동구', '대덕구', '유성구', '중구', '서구']} className="w-[50%]" + onChange={(v) => setValue('regions', v)} /> } - not={true} + icon={} + not title="누구와 함께 가나요?" category={['혼자', '가족', '친구', '단체 모임', '연인', '부모님']} className="w-[70%]" + onChange={(v) => + setValue( + 'withs', + v.map((v) => v.split(' ').reverse()[0]), + ) + } /> setValue('tags', v)} /> - +
+ + 적합한 장소 검색하기! + +
-
+ ); } diff --git a/src/pages/component/CategoryChoice.tsx b/src/pages/component/CategoryChoice.tsx index 0c19694..abc49f0 100644 --- a/src/pages/component/CategoryChoice.tsx +++ b/src/pages/component/CategoryChoice.tsx @@ -1,6 +1,4 @@ -import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; -import Category from './Category'; +import React, { useEffect, useState } from 'react'; type CategoryChoice = { title: string; @@ -8,15 +6,17 @@ type CategoryChoice = { icon?: React.ReactNode; className?: string; not?: boolean; + onChange?: (category: string[]) => void; }; -const CategoryChoice: React.FC = ({ +const CategoryChoice = ({ className, title, icon, category, not, -}) => { + onChange, +}: CategoryChoice) => { const [selectedCategories, setSelectedCategories] = useState([]); const handleCategoryClick = (category: string) => { @@ -38,11 +38,13 @@ const CategoryChoice: React.FC = ({ setSelectedNot(true); }; + useEffect(() => { + onChange && onChange(selectedCategories); + }, [onChange, selectedCategories]); + return ( -
-
+
+
{icon}

{title}

@@ -51,6 +53,7 @@ const CategoryChoice: React.FC = ({ > {not && ( -
- -
- -
-
+
+
+
+ +
+ +
+ +
- +
); -} + }, +); export default SearchBar; diff --git a/src/pages/component/Video.tsx b/src/pages/component/Video.tsx index 42713cb..30ba722 100644 --- a/src/pages/component/Video.tsx +++ b/src/pages/component/Video.tsx @@ -26,6 +26,7 @@ const Video: React.FC = ({ src, grade, name }) => { diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx index ae5cfd6..2e18b1e 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -13,6 +13,7 @@ import { useAuth } from '../api/auth'; const Router = () => { const { user } = useAuth(); + if (user === undefined) return null; return (