강아지정보 페이지

 

import {data} from "../assets/data/data";
import {Link} from "react-router-dom";

function Main() {
    return(
    <>
    <ul>
        {data.map(el => <li key={el.id}>            
            <Link to={`/detail/${el.id}`}>
            <img src={el.img}/>
            <div>{el.name}</div>
            </Link>
        </li>)}
    </ul>
    </>
    );
}

export default Main;

 

 

import { useParams } from "react-router-dom";
import {data} from "../assets/data/data";

function Detail() {
    const params = useParams();
    const animalData = data.find((el) => {
        return el.id === Number(params.id)
    });
    return(
    <>
        <section className="detail">
            <img src={animalData.img}/>
            <h2>{animalData.name}</h2>
            <div>{animalData.description}</div>
        </section>
    </>
    );
}

export default Detail;

 

 

import { Link, useSearchParams } from "react-router-dom";
import {data} from "../assets/data/data";
import {getRegExp} from "korean-regexp";

function Search() {
    const [searchParams] = useSearchParams();
    const param = searchParams.get('animal')
    const reg = getRegExp(param);
     
    const filterdData = data.filter((el)=>el.name.match(reg));

    return(
    <>
        <ul>
            {filterdData.map(el => <li key={el.id}>            
                <Link to={`/detail/${el.id}`}>
                <img src={el.img}/>
                <div>{el.name}</div>
                </Link>
            </li>)}
        </ul>
    </>
    );
}

export default Search;

 

 

 npm install korean-regexp