switch toggle filter 적용

현재 데이터 기준(브리더 14명, 인증 2명) 2page에서 토글을 on 할 경우 2page에 해당하는 data가 없어서 오류 남.

src/components/common/toggle/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from 'react';
+import React from 'react';
 import { styled } from 'styled-components';
 
 const StyledLabel = styled.label<{ checked: boolean }>`
@@ -25,14 +25,15 @@ const StyledLabel = styled.label<{ checked: boolean }>`
   }
 `;
 
-const Switch = () => {
-  const [switchState, setSwitchState] = useState(true);
-  function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
-    setSwitchState(!switchState);
-  }
+interface Props {
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const Switch = ({ checked, onChange }: Props) => {
   return (
-    <StyledLabel htmlFor="checkbox" checked={switchState}>
-      <input id="checkbox" type="checkbox" checked={switchState} onChange={handleOnChange} />
+    <StyledLabel htmlFor="checkbox" checked={checked}>
+      <input id="checkbox" type="checkbox" checked={checked} onChange={onChange} />
     </StyledLabel>
   );
 };

src/pages/mypage/breeders/index.tsx

@@ -48,22 +48,23 @@ const Title = styled.p`
 export default function Breeders() {
   const SIZE = 8 as const;
   const [page, setPage] = useState(1);
+  const [verification, setVerification] = useState(true);
   const [breeders, setBreeders] = useState<IBreeder[]>([]);
   const [pageInfo, setPageInfo] = useState<Page>({
     totalPages: 0,
     first: false,
     last: false,
     number: 0,
   });
-
-  const fetchBreeders = async ({ keyword = '', page = 0 }) => {
+  const fetchBreeders = async ({ keyword = '', page = 0, verification = true }) => {
     try {
       const { data: res } = await axios.get<AxiosResponse<Pageable<IBreeder[]>>>('/breeders', {
         params: {
           page,
           keyword,
           size: SIZE,
           sort: 'string',
+          verification: verification ? 'yes' : '',
         },
       });
 
@@ -80,18 +81,21 @@ export default function Breeders() {
   };
 
   const onSearch = async (keyword: string) => {
-    fetchBreeders({ keyword });
+    fetchBreeders({ keyword, verification });
+  };
+  const handleSwitchChange = () => {
+    setVerification(!verification);
   };
 
   useEffect(() => {
-    fetchBreeders({ page: page - 1 });
-  }, [page]);
+    fetchBreeders({ page: page - 1, verification });
+  }, [page, verification]);
 
   return (
     <Layout style={{ marginTop: '10rem' }}>
       <Title>브리더 모아보기</Title>
       <div style={{ display: 'flex' }}>
-        <Switch />
+        <Switch checked={verification} onChange={handleSwitchChange} />
         <Text>인증 브리더만 보기</Text>
         <SearchInput placeholder="원하시는 견종을 입력해주세요." onSearch={onSearch} />
       </div>