diff --git a/src/components/common/toggle/Switch.tsx b/src/components/common/toggle/Switch.tsx index 4376a5f3..1f96f6e7 100644 --- a/src/components/common/toggle/Switch.tsx +++ b/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) { - setSwitchState(!switchState); - } +interface Props { + checked: boolean; + onChange: (event: React.ChangeEvent) => void; +} + +const Switch = ({ checked, onChange }: Props) => { return ( - - + + ); }; diff --git a/src/pages/mypage/breeders/index.tsx b/src/pages/mypage/breeders/index.tsx index cec734a6..8e45610f 100644 --- a/src/pages/mypage/breeders/index.tsx +++ b/src/pages/mypage/breeders/index.tsx @@ -48,6 +48,7 @@ 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([]); const [pageInfo, setPageInfo] = useState({ totalPages: 0, @@ -55,8 +56,7 @@ export default function Breeders() { 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>>('/breeders', { params: { @@ -64,6 +64,7 @@ export default function Breeders() { 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 ( 브리더 모아보기
- + 인증 브리더만 보기