검색 공통 컴포넌트입니다.

interface SearchProps {
  explaination?: string;
  placeholder?: string;
  onSearch?: (query: string) => void; // 검색 버튼 클릭 시 호출되는 함수
  buttonText?: string;
}

• onSearch 함수 부분이 메인 props가 될 거에요. search 버튼을 눌렀을 때 e.target.value 값으로 추적된 값으로 특정 제품을 선택하는 로직을 넘겨줍니다.

   const handleSearch = (query: string) => {
    console.log('검색어:', query);
    // 여기서 실제 검색 로직이나 API 호출 넣어야 해요..!
  };

  return (
    <div>
      <Search onSearch={handleSearch} />
    </div>
  );
/>

기존에 만들어진 공통 컴포넌트를 최대한 활용 하면서 불필요한 props 전달이 없게끔 많은 생각을 하면서 만들었는데, 점점 심하게 복잡해지더라구요. 사이즈가 다른 걸 일일이 className props로 확장해서 받아오자니 너무 리턴 대비 과한 리소스를 투자하는 느낌이 들었습니다. 근데 시안을 보니까 사이즈를 props로 받지 않고, 반응형으로 사이즈가 달라지는 부분을 충분히 해결할 수 있을 것 같더라구요. 그래서 페이지에서 요소를 제작 하듯이 만들었습니다.. 여러분들의 도움이 필요해요 흑흑흑 😭

지금 돋보기 아이콘이랑 검색하기 버튼을 input 안에 넣어야 하는데, input 안에 요소를 넣으려면 absolute를 이용해서 부모 요소의 상대적 위치로 넣어야 하더라구요. 머리를 굴려가며 생각을 해보았지만 최종적으론 실패해서 이 방법을 선택했는데, 이 방향성이 맞는지 확신이 들지 않습니다 ㅠㅠ 이것도 도움을 주셨으면 합니다 😭