[SCSS/JS/React] 검색창 만들기

 

검색창 만들기

 

우선 js 파일에서 만들어줬다. 그리고 리액트로 옮겨줄 생각.

 

카테고리에 있는 Search 글자를 누르면

검색창이 뜨고 검색창 프레임 밖 아무곳을 누르면 검색창이 사라지게끔 할 예정.

HTML

  <!-- 검색창 만들기 -->
      <div class="search-container">
        <div class="search-overlay"></div>
        <!-- 검색창 -->
        <div class="search">
          <input
            type="text"
            class="search-box"
            placeholder="Press Enter to Search"
          />
        </div>
      </div>

 <li class="search_button"><a href="#">SEARCH</a></li>

Wrapper 안 쪽 맨 위에 코드 짜줌.

예전에 맥도날드 만들었을 때 만든 코드 참고해줬다.

---

[CSS] 검색창 만들기 (tistory.com)

[CSS] 검색창 만들기

---

CSS

/*검색창*/
.search-container {
  display: none;

  .search-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 998;
  }

  .search {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .search-box {
      width: 400px;
      padding: 20px;
      border: none;
      font-size: 16px;
    }
  }
}

CSS 꾸며주고

JS

// 검색창 보여주고 닫기
$(".search_button").on("click", function () {
  $(".search-container").fadeIn();
});
$(".search-overlay").on("click", function () {
  $(".search-container").fadeOut();
});

JS 로 확인해주면 끝.

제이쿼리 사용

이제 이걸 리액트로 적용시켜줘야 한다.

---

React 로 옮겨주기

 

// 검색
.search-container {
  .search-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 998;
  }

  .search {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .search-box {
      width: 400px;
      padding: 20px;
      border: none;
      font-size: 16px;
    }
  }
}

html 똑같이 옮겨주고 ( 어차피 바꿔야하지만 우선 옮겨줬다 ) ,  

.search-container 안에 있던 display:none 은 없애줌.

= useState 사용할 거라서.

= onClick 사용해 줄 예정.

Search 확인.

( 클래스 떼준다. ) 

CSS 조정

// 검색
.search-container {
  .search-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 998;
  }

  .search {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .search-box {
      width: 40vw;
      padding: 1.5vw;
      border: none;
      font-size: 16px;
    }
  }
}

CSS 도 반응형 모양에 맞춰서 아까보다 조금 수정해줌

그리고 display:none 있던거 삭제해준다.

 

우선 첫 번째로 useState 를 생성해준다. = 리모컨 버튼 생성

  let [Search, setSearch] = useState(false);

Search 라고 useState 를 생성해줌.

false 라고 지정해줬다.

 

false 일 때 검색창이 안보이는거고

true 일 때 보여야함.

SEARCH 카테고리에 Onclick 달아주기

  <li onClick={function () {
                setSearch(true); }} >
              <a href="#">SEARCH</a>
            </li>

li 태그에다가

onClick 달아준다.

= onClick 써주고 함수 넣어주면 됨.

State 변경 함수를 사용해서 

SEARCH 를 누르면 Search state(버튼) 를 true 로 변경할거라고 지정.

검색창을 띄울 조건식을 만들기

   {/* <!-- 검색창 만들기 --> */}
      {Search == true ? (
        <div className="search-container">
          <div
            className="search-overlay"
            onClick={function () {
              setSearch(false);
            }}
          ></div>
          {/* <!-- 검색창 --> */}
          <div className="search">
            <input
              type="text"
              className="search-box"
              placeholder="Press Enter to Search"
            />
          </div>
        </div>
      ) : null}

검색창을 띄울 조건식을 만들어준다.

 

( 삼항연산자 사용) 

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드

 

어떤 조건일 때 버튼을 눌려서 보여지게 할 지 

= className 으로 변경하는 거 잊지않기.

 

search-overlay 를 누르면 다시 Search 를 false 로 변경해서

검색창을 꺼주도록 함