OnlineShop 만들기 - 7) Landing Page 만들기 4(Search feature 만들기)

검색해서 상품을 찾는 기능을 만든다.

 

순서

완성된 화면

 

searchFeature 컴포넌트를 먼저 만든다. 

 

src>components>views>LandingPage>Sections>SearchFeature.js파일을 만든다.

import React from 'react'

function SearchFeature() {
    return (
        <div>
            
        </div>
    )
}

export default SearchFeature

랜딩페이지에 포함시켜준다.

 

import SearchFeature from './Sections/SearchFeature';
{/* Search  */}
<SearchFeature/>

antd를 이용해서 템플릿을 만들어준다.

 

import React, { useState } from 'react'
import { Input } from 'antd';

const { Search } = Input;

function SearchFeature(props) {

   

    return (
        <div>
            <Search
                value
                onChange
                placeholder="Search By Typing..."
            />
        </div>
    )
}

export default SearchFeature

 

랜딩페이지에서 style을 준다.

            {/* Search  */}
            <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '1rem auto' }}>

                <SearchFeature
                />

            </div>

현재 화면

 

 

 onChangeFunction을 만들자.

function SearchFeature(props) {

    const [SearchTerms, setSearchTerms] = useState("")

    const onChangeSearch = (event) => {
        setSearchTerms(event.currentTarget.value)//입력하면 입력하는 내용이 뜨도록 설정

        props.refreshFunction(event.currentTarget.value)//부모에게 바뀐 내용을 알려주는 내용(searchdata를 알려준다)

    }

    return (
        <div>
            <Search
                value={SearchTerms}
                onChange={onChangeSearch}
                placeholder="Search By Typing..."
            />
        </div>
    )
}

export default SearchFeature

 

랜딩페이지에게 refreshFunction을 만들어주자.

(찾는 데이터 알려주는 function)

    const [SearchTerms, setSearchTerms] = useState("")


    const updateSearchTerms = (newSearchTerm) => {

        const variables = {
            skip: 0,
            limit: Limit,
            filters: Filters,
            searchTerm: newSearchTerm//새로운 조건을 (data필터) 준다.
        }

        setSkip(0)//찾아온 데이터는 처음부터 다시 보이도록 세팅
        setSearchTerms(newSearchTerm)//새로운 data로 변경(찾는)

        getProducts(variables)//데이터 필터링에 맞는 데이터 가지고 온다
    }

    
    
    
            {/* Search  */}
            <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '1rem auto' }}>

                <SearchFeature
                    refreshFunction={updateSearchTerms}
                />

            </div>

 

variable에 따라서 행동하는 router로 변경해줘야 한다. (getProducts route 수정)

router.post("/getProducts", (req, res) => {

    //variables가 있을때와 없을 때를 나눈다.
    let order = req.body.order ? req.body.order : "desc";
    let sortBy = req.body.sortBy ? req.body.sortBy : "_id";
    let limit = req.body.limit ? parseInt(req.body.limit) : 100;
    let skip = parseInt(req.body.skip);

    let findArgs = {};
    let term = req.body.searchTerm;//찾는 데이터 문장 조건

    for (let key in req.body.filters) { //필터에 따라서 

        if (req.body.filters[key].length > 0) {
            if (key === "price") {
                findArgs[key] = {
                    $gte: req.body.filters[key][0],//greater than equal
                    $lte: req.body.filters[key][1]//lower than equal
                }
            } else {//키가 price가 아니라면
                findArgs[key] = req.body.filters[key];//findArgs[continents] = [인덱스 배열]의 형태
            }
        }
    }

    console.log(findArgs)

    if (term) {//문장 조건이 있으면 
        Product.find(findArgs)
            .find({ $text: { $search: term } })//문장에 맞는 데이터를 먼저 찾는다.(찾는 데이터이름)(mongodb의 특징)
            .populate("writer")
            .sort([[sortBy, order]])
            .skip(skip)
            .limit(limit)
            .exec((err, products) => {
                if (err) return res.status(400).json({ success: false, err })
                res.status(200).json({ success: true, products, postSize: products.length })
            })
    } else {//문장조건이 없으면 
        Product.find(findArgs)
            .populate("writer")
            .sort([[sortBy, order]])
            .skip(skip)
            .limit(limit)
            .exec((err, products) => {
                if (err) return res.status(400).json({ success: false, err })
                res.status(200).json({ success: true, products, postSize: products.length })
            })
    }

});

   

  여기서 product모델에서 어떤순서대로(무엇을 우선순위로) data를 찾을 것인지를 지정해주자.

productSchema.index({ 
    title:'text',
    description: 'text',
}, {
    weights: {
        title: 5, //제일먼저 이름에서 찾고 
        description: 1,//그다음에 설명 란에서 찾는 순으로 진행
    }
})