From 77f31ec0a7552ba2ab0e2bc7e8f76b53ffa8e1fb Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 02:23:00 +0900 Subject: [PATCH 1/6] style: home page --- src/pages/Home.tsx | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 59439be..a218cd2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,22 +1,20 @@ -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'; export default function Home() { - return ( -
-
-
- -
- -
- - -
- ); + return ( +
+
+
+ +
+ +
+ + +
+ ); } - From ad269c598f4ea81501e34c2526f38dd84b05f737 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 02:36:41 +0900 Subject: [PATCH 2/6] fix: change search page --- src/pages/SearchPlace.tsx | 26 +++---- src/pages/component/CategoryChoice.tsx | 8 +-- src/pages/component/SearchBar.tsx | 95 +++++++++++++++----------- 3 files changed, 71 insertions(+), 58 deletions(-) diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx index 9cfcad6..fac337c 100644 --- a/src/pages/SearchPlace.tsx +++ b/src/pages/SearchPlace.tsx @@ -1,15 +1,14 @@ -import React from 'react'; -import SearchBar from './component/SearchBar'; +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'; export default function SearchPlace() { return ( -
+
-
+

검색하기 막막하시나요?

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

} + icon={} title="지역을 선택해주세요" not={true} category={['동구', '대덕구', '유성구', '중구', '서구']} className="w-[50%]" /> } + icon={} not={true} title="누구와 함께 가나요?" category={['혼자', '가족', '친구', '단체 모임', '연인', '부모님']} @@ -46,11 +45,12 @@ export default function SearchPlace() { ]} className="w-[80%]" /> - +
+ + 적합한 장소 검색하기! + +
-
+ ); } diff --git a/src/pages/component/CategoryChoice.tsx b/src/pages/component/CategoryChoice.tsx index 0c19694..f8e78d4 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'; type CategoryChoice = { title: string; @@ -39,10 +37,8 @@ const CategoryChoice: React.FC = ({ }; return ( -
-
+
+
{icon}

{title}

diff --git a/src/pages/component/SearchBar.tsx b/src/pages/component/SearchBar.tsx index 6bbde0a..c95318e 100644 --- a/src/pages/component/SearchBar.tsx +++ b/src/pages/component/SearchBar.tsx @@ -2,45 +2,62 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; type SearchBarProps = { - type: string; -} - - - -const SearchBar: React.FC = ({ type}) => { - let navigate = useNavigate(); - - const [value, setValue] = useState(''); - - const handleChange = (event: React.ChangeEvent) => { - const newValue = event.target.value; - setValue(newValue); - } - - const toBackClick = () => { - navigate(-1); - } - - return ( -
- -
-
- -
- -
- -
-
+ type: string; +}; + +const SearchBar: React.FC = ({ type }) => { + const navigate = useNavigate(); + + const [value, setValue] = useState(''); + + const handleChange = (event: React.ChangeEvent) => { + const newValue = event.target.value; + setValue(newValue); + }; + + const toBackClick = () => { + navigate(-1); + }; + + return ( +
+
+
+
- - ); -} + +
+ +
+
+
+ ); +}; export default SearchBar; From 9528fb4cc2ff460d181414b9e5239c1006a71576 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 02:42:40 +0900 Subject: [PATCH 3/6] fix: block render until user loaded --- src/api/auth.ts | 8 ++++++-- src/routes/Router.tsx | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) 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/routes/Router.tsx b/src/routes/Router.tsx index ed4b6d1..f719407 100644 --- a/src/routes/Router.tsx +++ b/src/routes/Router.tsx @@ -12,6 +12,7 @@ import { useAuth } from '../api/auth'; const Router = () => { const { user } = useAuth(); + if (user === undefined) return null; return ( From fabbcfe81bbb556b9b000faee5d0314728a2a4fe Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 02:53:18 +0900 Subject: [PATCH 4/6] feat: navigate to map page from search place --- src/pages/SearchPlace.tsx | 34 +++++++-- src/pages/component/CategoryChoice.tsx | 14 +++- src/pages/component/SearchBar.tsx | 101 +++++++++++++------------ 3 files changed, 92 insertions(+), 57 deletions(-) diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx index fac337c..5473d88 100644 --- a/src/pages/SearchPlace.tsx +++ b/src/pages/SearchPlace.tsx @@ -1,13 +1,34 @@ +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 SearchBar from './component/SearchBar'; +import { useNavigate } from 'react-router-dom'; + +interface SearchPlaceProps { + query: string; + places: string[]; + withs: string[]; + regions: string[]; +} export default function SearchPlace() { + const { register, setValue, handleSubmit } = useForm(); + const navigate = useNavigate(); + + const search: SubmitHandler = (data) => { + navigate( + `/map?query=${data.query}&places=${data.places}&withs=${data.withs}®ions=${data.regions}`, + ); + }; + return ( -
- + +

검색하기 막막하시나요? @@ -18,20 +39,22 @@ export default function SearchPlace() { } title="지역을 선택해주세요" - not={true} + not category={['동구', '대덕구', '유성구', '중구', '서구']} className="w-[50%]" + onChange={(v) => setValue('regions', v)} /> } - not={true} + not title="누구와 함께 가나요?" category={['혼자', '가족', '친구', '단체 모임', '연인', '부모님']} className="w-[70%]" + onChange={(v) => setValue('withs', v)} /> setValue('regions', v)} />
diff --git a/src/pages/component/CategoryChoice.tsx b/src/pages/component/CategoryChoice.tsx index f8e78d4..abc49f0 100644 --- a/src/pages/component/CategoryChoice.tsx +++ b/src/pages/component/CategoryChoice.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; type CategoryChoice = { title: string; @@ -6,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) => { @@ -36,6 +38,10 @@ const CategoryChoice: React.FC = ({ setSelectedNot(true); }; + useEffect(() => { + onChange && onChange(selectedCategories); + }, [onChange, selectedCategories]); + return (
@@ -47,6 +53,7 @@ const CategoryChoice: React.FC = ({ > {not && ( -
- -
- + return ( +
+
+
+ +
+ +
+ +
-
- ); -}; + ); + }, +); export default SearchBar; From 419f37d82efb9bb3762a7e555d48809b8c460955 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 03:02:21 +0900 Subject: [PATCH 5/6] feat: home page category menu --- src/pages/SearchPlace.tsx | 15 ++- src/pages/component/CategoryMenu.tsx | 158 ++++++++++++++++++--------- 2 files changed, 118 insertions(+), 55 deletions(-) diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx index 5473d88..a03ee35 100644 --- a/src/pages/SearchPlace.tsx +++ b/src/pages/SearchPlace.tsx @@ -8,9 +8,9 @@ import { useNavigate } from 'react-router-dom'; interface SearchPlaceProps { query: string; - places: string[]; - withs: string[]; regions: string[]; + withs: string[]; + tags: string[]; } export default function SearchPlace() { @@ -19,7 +19,7 @@ export default function SearchPlace() { const search: SubmitHandler = (data) => { navigate( - `/map?query=${data.query}&places=${data.places}&withs=${data.withs}®ions=${data.regions}`, + `/map?query=${data.query}&withs=${data.withs}®ions=${data.regions}&tags=${data.tags}`, ); }; @@ -50,7 +50,12 @@ export default function SearchPlace() { title="누구와 함께 가나요?" category={['혼자', '가족', '친구', '단체 모임', '연인', '부모님']} className="w-[70%]" - onChange={(v) => setValue('withs', v)} + onChange={(v) => + setValue( + 'withs', + v.map((v) => v.split(' ').reverse()[0]), + ) + } /> setValue('regions', v)} + onChange={(v) => setValue('tags', v)} />
diff --git a/src/pages/component/CategoryMenu.tsx b/src/pages/component/CategoryMenu.tsx index 6da3b1f..3e96673 100644 --- a/src/pages/component/CategoryMenu.tsx +++ b/src/pages/component/CategoryMenu.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; -import { FiHome } from "react-icons/fi"; -import { GrMap } from "react-icons/gr"; -import { LuPlayCircle } from "react-icons/lu"; -import { GoPerson } from "react-icons/go"; +import { FiHome } from 'react-icons/fi'; +import { GrMap } from 'react-icons/gr'; +import { LuPlayCircle } from 'react-icons/lu'; +import { GoPerson } from 'react-icons/go'; // type CategoryMenuProps = { // home?: boolean; @@ -12,51 +12,109 @@ import { GoPerson } from "react-icons/go"; // mypage?: boolean; // } -const CategoryMenu: React.FC = () => { - - - return ( -
-

누구와 함께하는 일정인가요?

-
- - person -

가족

- - - person -

친구

- - - person -

부모님

- - - person -

연인

- -
-

대전, 이런 곳은 어때요?

-
- - place -

맛집

- - - place -

디저트

- - - place -

여가

- - - place -

과학

- -
-
- ); -} +const CategoryMenu = () => { + return ( +
+

+ 누구와 함께하는 일정인가요? +

+
+ + person +

가족

+ + + person +

친구

+ + + person +

부모님

+ + + person +

연인

+ +
+

+ 대전, 이런 곳은 어때요? +

+
+ + place +

맛집

+ + + place +

디저트

+ + + place +

여가

+ + + place +

과학

+ +
+
+ ); +}; export default CategoryMenu; From 2c106cb49851c5953fa22e1c2ef9f0153285665c Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Fri, 16 Feb 2024 03:06:15 +0900 Subject: [PATCH 6/6] fix: play video inline --- src/pages/component/Video.tsx | 1 + 1 file changed, 1 insertion(+) 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 }) => {