Merge branch 'main' of https://github.com/SPARCS-Service-Hackathon-20…

…24/A16-web
SPARCS-Service-Hackathon-2024 · Feb 15, 2024 · 2afa61f · 2afa61f
2 parents 19d72a1 + 2c106cb
commit 2afa61f
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 112 deletions.
diff --git 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<User>({ queryKey: ['/user/me'] });
+  const { data, refetch, error } = useQuery<User>({ 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
@@ -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 (
-    <div className="h-[100%] pb-[70px] ">
+    <div className="h-screen">
       <Header alarm={true} review={true} />
       <SearchMenu />
       <div className="mx-[10%]">

diff --git a/src/pages/SearchPlace.tsx b/src/pages/SearchPlace.tsx
@@ -1,38 +1,65 @@
-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<SearchPlaceProps>();
+  const navigate = useNavigate();
+
+  const search: SubmitHandler<SearchPlaceProps> = (data) => {
+    navigate(
+      `/map?query=${data.query}&withs=${data.withs}&regions=${data.regions}&tags=${data.tags}`,
+    );
+  };
+
   return (
-    <div className="min-h-[100vh] ">
-      <SearchBar type="place" />
-      <div className="pt-[56px] h-[100%] relative bg-[#f5f5f5] text-center pb-[80px]">
+    <form
+      onSubmit={handleSubmit(search)}
+      className="min-h-[100vh] bg-[#f5f5f5]"
+    >
+      <SearchBar type="place" {...register('query')} />
+      <div className="h-[100%] text-center flex flex-col gap-4 px-5">
         <h1 className="text-2xl font-bold leading-[50px]">
           검색하기 막막하시나요?
         </h1>
         <p className="text-sm">
           키워드 선택만 하시면 저희가 적합한 장소를 찾아드릴게요!
         </p>
         <CategoryChoice
-          icon={<GrMap className="mr-[10px]" />}
+          icon={<GrMap />}
           title="지역을 선택해주세요"
-          not={true}
+          not
           category={['동구', '대덕구', '유성구', '중구', '서구']}
           className="w-[50%]"
+          onChange={(v) => setValue('regions', v)}
         />
         <CategoryChoice
-          icon={<GoPerson className="mr-[10px]" />}
-          not={true}
+          icon={<GoPerson />}
+          not
           title="누구와 함께 가나요?"
           category={['혼자', '가족', '친구', '단체 모임', '연인', '부모님']}
           className="w-[70%]"
+          onChange={(v) =>
+            setValue(
+              'withs',
+              v.map((v) => v.split(' ').reverse()[0]),
+            )
+          }
         />
         <CategoryChoice
           title="지역을 선택해주세요"
-          not={true}
+          not
           category={[
             '데이트 코스',
             '맛집',
@@ -45,12 +72,14 @@ export default function SearchPlace() {
             '가족적인',
           ]}
           className="w-[80%]"
+          onChange={(v) => setValue('tags', v)}
         />
-        <Btn
-          text="적합한 장소 검색하기!"
-          className="bg-primary text-[#ffffff] absolute bottom-[50px] left-[50%] translate-x-[-50%] w-[90%]"
-        />
+        <div className="w-full px-8 pb-4">
+          <Btn className="bg-primary text-white w-full">
+            적합한 장소 검색하기!
+          </Btn>
+        </div>
       </div>
-    </div>
+    </form>
   );
 }
diff --git a/src/pages/component/CategoryChoice.tsx b/src/pages/component/CategoryChoice.tsx
@@ -1,22 +1,22 @@
-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;
   category: string[];
   icon?: React.ReactNode;
   className?: string;
   not?: boolean;
+  onChange?: (category: string[]) => void;
 };
 
-const CategoryChoice: React.FC<CategoryChoice> = ({
+const CategoryChoice = ({
   className,
   title,
   icon,
   category,
   not,
-}) => {
+  onChange,
+}: CategoryChoice) => {
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
 
   const handleCategoryClick = (category: string) => {
@@ -38,11 +38,13 @@ const CategoryChoice: React.FC<CategoryChoice> = ({
     setSelectedNot(true);
   };
 
+  useEffect(() => {
+    onChange && onChange(selectedCategories);
+  }, [onChange, selectedCategories]);
+
   return (
-    <div
-      className={`w-[80%] min-h-[150px] pb-[10px] bg-white rounded-2xl mx-auto mt-[20px] mb-[50px]`}
-    >
-      <div className="flex items-center justify-center h-[50px] text-xl font-bold">
+    <div className={`min-h-[150px] pb-[10px] bg-white rounded-2xl mx-auto`}>
+      <div className="flex items-center justify-center h-[50px] text-xl font-bold gap-2">
         {icon}
         <h3>{title}</h3>
       </div>
@@ -51,6 +53,7 @@ const CategoryChoice: React.FC<CategoryChoice> = ({
       >
         {not && (
           <button
+            type="button"
             className={`py-2 px-3 m-2 rounded-xl ${
               selectedNot ? 'bg-primary text-white' : 'bg-[#D9D9D9]'
             }`}
@@ -61,6 +64,7 @@ const CategoryChoice: React.FC<CategoryChoice> = ({
         )}
         {category.map((e, index) => (
           <button
+            type="button"
             key={index}
             className={`py-2 px-3 m-2 rounded-xl ${
               selectedCategories.includes(e)

diff --git 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 (
-        <div className='mb-[80px]'>
-            <h3 className='text-md font-bold ml-[5%] leading-[50px] mb-[10px]'>누구와 함께하는 일정인가요?</h3>
-            <div className="mb-[20px] flex">
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto `}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/person1.png" alt="person" />
-                    <p>가족</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/person2.png" alt="person" />
-                    <p>친구</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/person3.png" alt="person" />
-                    <p>부모님</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/person4.png" alt="person" />
-                    <p>연인</p>
-                </Link>
-            </div>
-            <h3 className='text-md font-bold ml-[5%] leading-[50px] mb-[10px]'>대전, 이런 곳은 어때요?</h3>
-            <div className="mb-[20px] flex">
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto `}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/place1.png" alt="place" />
-                    <p>맛집</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/place2.png" alt="place" />
-                    <p>디저트</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/place3.png" alt="place" />
-                    <p>여가</p>
-                </Link>
-                <Link to="/" className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}>
-                    <img className='w-[48px] h-[48px]' src="/assets/category/place4.png" alt="place" />
-                    <p>과학</p>
-                </Link>
-            </div>
-        </div>
-    );
-}
+const CategoryMenu = () => {
+  return (
+    <div className="mb-[80px]">
+      <h3 className="text-md font-bold ml-[5%] leading-[50px] mb-[10px]">
+        누구와 함께하는 일정인가요?
+      </h3>
+      <div className="mb-[20px] flex">
+        <Link
+          to="/map?withs=가족"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto `}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/person1.png"
+            alt="person"
+          />
+          <p>가족</p>
+        </Link>
+        <Link
+          to="/map?withs=친구"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/person2.png"
+            alt="person"
+          />
+          <p>친구</p>
+        </Link>
+        <Link
+          to="/map?withs=부모님"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/person3.png"
+            alt="person"
+          />
+          <p>부모님</p>
+        </Link>
+        <Link
+          to="/map?withs=연인"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/person4.png"
+            alt="person"
+          />
+          <p>연인</p>
+        </Link>
+      </div>
+      <h3 className="text-md font-bold ml-[5%] leading-[50px] mb-[10px]">
+        대전, 이런 곳은 어때요?
+      </h3>
+      <div className="mb-[20px] flex">
+        <Link
+          to="/"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto `}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/place1.png"
+            alt="place"
+          />
+          <p>맛집</p>
+        </Link>
+        <Link
+          to="/"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/place2.png"
+            alt="place"
+          />
+          <p>디저트</p>
+        </Link>
+        <Link
+          to="/"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/place3.png"
+            alt="place"
+          />
+          <p>여가</p>
+        </Link>
+        <Link
+          to="/"
+          className={`flex flex-col items-center justify-center text-sm w-[48px] h-[60px] mx-auto`}
+        >
+          <img
+            className="w-[48px] h-[48px]"
+            src="/assets/category/place4.png"
+            alt="place"
+          />
+          <p>과학</p>
+        </Link>
+      </div>
+    </div>
+  );
+};
 
 export default CategoryMenu;