[Feat] 탐색 페이지 검색바 구현

[KIMGEONHWI]

📌 Related Issues

• close [Feat] 탐색 페이지 검색바 구현 #55

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 컨벤션을 지켰나요?
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📄 Tasks

• 검색바 컴포넌트 구현
• 헤더 공통 컴포넌트 뒤로가기 아이콘, X 아이콘 로직 추가

⭐ PR Point (To Reviewer)

search/index.tsx

import { useState } from 'react';
import SearchBar from '@/pages/search/components/SearchBar';
import Header from '@/components/Header';

const Search = () => {
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
  };

  const handleSearchIconClick = () => {
    console.log(searchValue);
  };

  return (
    <Header.Root>
      <Header.BackIcon />
      <SearchBar
        searchValue={searchValue}
        handleSearchChange={handleSearchChange}
        handleSearchIconClick={handleSearchIconClick}
      />
    </Header.Root>
  );
};

export default Search;

추후에 검색바 인풋 내용(searchValue)을 검색 아이콘을 클릭하면 api post 요청을 보내야하기 때문에 console.log(searchValue);로 임의로 작성해놓았습니다.

📷 Screenshot

🔔 ETC

[hansoojeongsj]

LGTM !!

[heesunee]

고생하셨습니당 ㅎㅎ 코멘트 한번만 확인 해주세요!

[heesunee]

여기 Flex에 margin="0 0 0 1.2rem" marginLeft 속성도 있어서 그냥 marginLeft="1.2rem" 으로 해도 될 것 같아요~

[KIMGEONHWI]

여기 Flex에 margin="0 0 0 1.2rem" marginLeft 속성도 있어서 그냥 marginLeft="1.2rem" 으로 해도 될 것 같아요~

해당 작업을 한 브랜치는 아직 Flex컴포넌트에서 marginLeft의 속성이 적용되기 전이여서 추후에 수정하겠습니다.

[heesunee]

여기 확인한번 해주세요!

[KIMGEONHWI]

여기 확인한번 해주세요!

불필요한 코드 삭제했습니다!

[rtttr1]

LGTM! 코멘트 하나만 확인해주세요~!

[rtttr1]

여기 top과 bottom이 동시에 있는 이유가 있나요?

[KIMGEONHWI]

여기 top과 bottom이 동시에 있는 이유가 있나요?

불필요한 코드 삭제했습니다!

[constantly-dev]

공통 Input에 Icon을 추가하는 것이 쉽지 않았을 것 같은데 이렇게 absolute로 추가하는 방법도 나쁘지 않은 것 같습니다! 사실 공통 컴포넌트에 Icon을 분기해야 하는지 고민이 되었는데 이렇게 하는 것도 좋은 것 같습니다!
이후에 확장이 더 된다면 다시 이 부분 생각해봐요!