category.tsx//search.tsx

---

들어가기

1. Client 메인 페이지에서
   한식/일식/중식등 카테고리를 클릭하면, 해당, 카테고리
   식당으로 이동하면 나오는 페이지.

2. Client 메인 페이지에서
   식당을 이름으로 검색했을떄, 나오는 페이지

---

1. src/pages/client/category.tsx

import { gql, useQuery } from '@apollo/client'
import React from 'react'
import { useParams } from 'react-router-dom'
import { CATEGORY_FRAGMENT, RESTAURANT_FRAGMENT } from '../../fragments'
import {
  CagtegotyQuery,
  CagtegotyQueryVariables,
} from '../../graphql/__generated__'

const CATEGORY_QUERY = gql`
  query cagtegoty($input: CategoryInput!) {
    category(input: $input) {
      ok
      error
      totalPages
      totalResults
      restaurants {
        ...RestaurantParts
      }
      category {
        ...CategoryParts
      }
    }
  }
  ${RESTAURANT_FRAGMENT}
  ${CATEGORY_FRAGMENT}
`

type Params = {
  slug: string
}

const Category = () => {
  const params = useParams<Params>()
  ///router/logged-in-router.tsx의
  ///  { path: '/category/:slug', element: <Category /> },
  /// 에서 보낸 :slug 를
  /// useParams로 받아옴.
  
  const { data, loading } = useQuery<CagtegotyQuery, CagtegotyQueryVariables>(
    CATEGORY_QUERY,
    {
      variables: {
        input: {
          page: 1,
          slug: params.slug + '',
        },
      },
    }
  )
  ///useParam로 받아온 slug로 category db에서 restaurant검색해서
  ///data를 받아옴.
  
  console.log(data)
  return <div>Category</div>
}
///받아온 restaurant를 나열하는건 생략.

export default Category

1-1.restaurants.tsx

Client home에서 클릭하는 코딩

        <div className="px-5 mt-8 pb-20 max-w-screen-2xl mx-auto">
          <div className="flex justify-around max-w-sm mx-auto">
            {data?.allCategories.categories?.map((category) => (
              <Link key={category.id} to={`category/${category.slug}`}>
              ///key, to에 뭐가 들어가는지 유심히 본다.!!!
                <div>
                  <div
                    className="w-16 h-16 bg-cover group-hover:bg-gray-200 rounded-full"
                    style={{ backgroundImage: `url(${category.coverImg})` }}
                  ></div>
                  <span className="mt-1 text-sm text-center font-bold">
                    {category.name}
                  </span>
                </div>
              </Link>
            ))}

2. src/pages/client/search.tsx

import { gql, useLazyQuery } from '@apollo/client'
import React, { useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { RESTAURANT_FRAGMENT } from '../../fragments'
import {
  SearchRestaurantQuery,
  SearchRestaurantQueryVariables,
} from '../../graphql/__generated__'

const SEARCH_RESTAURANT = gql`
  query searchRestaurant($input: SearchRestaurantInput!) {
    searchRestaurant(input: $input) {
      ok
      error
      totalPages
      totalResults
      restaurants {
        ...RestaurantParts
      }
    }
  }
  ${RESTAURANT_FRAGMENT}
`
///server에서 searchRestaurant query를 실행해서
///data를 불러옴.

const Search = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const [queryReadyToStart, { loading, data, called }] = useLazyQuery<
    SearchRestaurantQuery,
    SearchRestaurantQueryVariables
  >(SEARCH_RESTAURANT)
  
  useEffect(() => {
    const [_, query] = location.search.split('?term=')
    ///location으로(useLocation) 홈에서 보내온 
    ///search keyword를 받음.
    ///https://localhost:3000/search?term=chicken에서
    ///chicken을 뽑아냄.
    
    ///const aaa = location.search.split('?term=')
    ///해서 console.log(aaa)하면,
    ///['','chicken'] 이 나옴. chicken은 
    ///홈에서 입력한 search 단어.
    
    ///그래서 const [_, query] = location.search.split('?term=')로
    ///받으면, query에 chicken이 저장됨.
    ///그 다음, query(chicken)을 searchInput으로 사용.
    
    if (!query) {
      return navigate('/', { replace: true })
    }
    ///query가 없으면, 홈('/')으로 redirect함.
    ///{replace:true}하면, 메모리에 웹페이지 이동 기록을 남기지않음.
    ///useLazyQuery는 위의 query가 있을떄에만, 아래의
    ///qyeryReadyToStart가 실행됨.
    queryReadyToStart({
      variables: {
        input: {
          page: 1,
          query,
        },
      },
    })
  }, [navigate, location])
  
  console.log('data', data)
  console.log('called', called)
  console.log('loading', loading)
  ///useLazyQurey에서 실행되는 prop을 console로 찍어본다.
  ///뭔지 확인 해 보기 위해서~

  return (
    <div>
      <h1>Search Page</h1>
    </div>
  )
}
///불러온 data를 design하는것은 생략~

export default Search

2-1.restaurants.tsx

홈에서 search 페이지에서 keyword입력해서
keyword를 주소에 query로 날리는 로직.

  const onSearchSubmit = () => {
    console.log(getValues())
    const search = getValues().search
    navigate({
      pathname: '/search',
      search: `?term=${search}`,
    })
  }