?gender={gender}&size={size} gende... - 인프런

제로초님 안녕하세요 다름이 아니라

제가 신발 상세 페이지를 만들고 있는데,

신발 상세 페이지에서 신발 상세 목록 api 를 아래와 같이 useQuery (React-query) 라이브러리를 사용하여 api 를 받아오고 있습니다.

제가 지금은

http://api.제로초짱짱.com/product/brand/${id}?size=270&gender=men

이런 식으로 받아와서 270 신발 사이즈에 해당하는 상세 목록? (해당 신발 사이즈 몇 켤레 남았는지.. 남자 사이즈인지 여자 사이즈인지 구문이 잘 안가고)

제가 하고 싶은 것은 일단 상세 페이지에 들어오면 일단 성별과 size를 먼저 입력 하도록 받게 한 다음에

api 를 http://api.제로초짱짱.com/product/brand/${id}?size=${size}&gender=${gender}

이런 식으로 수정하고 남자 여자 사이즈에 따라 상세 목록을 달리 보여주도록 만들어 주고 싶습니다.

뭐 회원가입을 유도 한다음 로그인을 해서 로그인 회원정보에 따라 보여 줄 수도 있지만

저는 회원가입 뿐만 아니라 구글에서 검색 해서 들어온 사용자분들도 쉽게 볼 수 있도록 특정 사이즈에 따라 상세 정보, 특징들을 달리 보여주고 싶습니다.

${size} 랑 ${gender} 이것을 button 을 만든 뒤 -> button 을 클릭해서(특정 size 클릭, 성별 클릭) 한 다음

그 size 랑 성별에 따라 정보들을 달리 보여주고 싶습니다.

어떻게 만들어야 할 지 감이 잘 안잡히네요ㅠ ㅠㅠ 항상 정말 감사합니다 유튜브 라이브 하시면 꼭 후원 해드리겠습니다.

const fetchDetail = async () => {

        const res = await
        fetch(`http://api.제로초짱짱.com/product/brand/${id}?size=270&gender=men`, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
            withCredentials: true
        });
        return res.json();
    }

    const { data: ProductDetail, status, error, isFetching } = useQuery('productDetail', fetchDetail, {
        notifyOnChangeProps: ['data'],
        staleTime: 100000000,
    })
    console.log(ProductDetail);

제로초님 안녕하세요.

size, gender 모두 input 으로 입력 받도록 하고 useQuery 에서 (key) size, gender 모두 추가 시켜 주었습니다.

하지만 반응하지 않습니다.. 어떻게 코드를 수정 해야 동작 할까요

    const [inputs, setInputs] = useState({
      size: '250',
        gender: 'female',
    })
    const {size, gender} = inputs;

    const onChange = (e) =>{
        setInputs({ ...inputs })
    }

    const { data: ProductDetail, status, error, isFetching } = useQuery(['productDetail', id, age, size], fetchDetail, {
        notifyOnChangeProps: ['data'],
        staleTime: 100000000,
  })
   <input name="size" onChange={onChange} placeholder = "사이즈"/>
  <input name="gender" onChange={onChange} placeholder = "성별"/>
 
   

인프런 커뮤니티 질문&답변

?gender={gender}&size={size} gender와 size button을 클릭해서 입력 받기