따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기
REACT-SHOP-KO 작성 코드

---

2. 랜딩 페이지 만들기

9. 라디오 박스 필터 만들기 #1

ant.design - radiobox

1. CheckBox 리스트 데이터 만들기

   client/src/components/views/LandingPage/section/Datas.js → ‘price’ list 만들기

2. checkbox를 위한 UI 만들기

   client/src/components/views/LandingPage/LandingPage.js

   <Row gutter = {[16,16]}>
                  <Col lg={12} xs = {24}>
                      {/* CheckBox */}
                      <CheckBox list = {continents} handleFilters = {filters => handleFilters(filters, "continents")} />
                  </Col>
                  <Col lg={12} xs = {24}>
                      {/* RadioBox */}
                      <RadioBox list = {price} handleFilters = {filters => handleFilters(filters, "price")}/>
                  </Col>
              </Row>

3. onChange Function 만들기

4. Checked State를 부모 컴포넌트로 업데이트 하기

   client/src/components/views/LandingPage/section/RadioBox.js → Radio 기능 function만들기

   ---

10. 라디오 박스 필터 만들기 #2

1. handleFilter Function만들기

2. Filter State만들기

   client/src/components/views/LandingPage/LandingPage.js

3. getProduct Route를 필터 기능에 맞게 바꾸기

   server/routes/product.js
   
   

---

11. 검색 기능 만들기 #1

1. searchFeature component만들기

   client/src/components/views/LandingPage/section/SearchFeature.js 만들고

   LandingPage.js에서 import 후 return에 넣어주기

2. Search기능을 위한 UI 만들기

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

3. onChange Function만들기
   ant.design - input
   useState 만들기, searchHandler function만들기

4. search Data를 부모 컴포넌트에 업데이트 하기
   

---

12. 검색 기능 만들기 #2

1. 검색 값을 이용한 getProduct Function을 작동시키기

   client/src/components/views/LandingPage/LandingPage.js

   const updateSearchTerm = (newSearchTerm) => {
           let body = {
               skip : 0,
               limit : Limit,
               filters : Filters,
               searchTerm : newSearchTerm
           }
           setSkip(0)
           setSearchTerm(newSearchTerm)
           getProducts(body)
       }

2. Search 기능을 위해서 getProduct Route 수정하기
   server/routes/product.js

   router.post('/products', (req,res) => {
   ...
   if(term) {
           Product.find(findArgs)
           .find({$text : {$search : term}})
           .populate("writer")
                   ...
           })
   
       }else {

3. Search기능을 가능하게 하기 위해서 Product Model에 무엇을 추가 해주기
   server/models/Product.js
   search 기능에서 title에 가중치를 5, description에 가중치를 1로 준다

   productSchema.index({
       title : 'text', 
       description : 'text'
   }, {
       weight : {
           title : 5,
           description : 1
       }
   })