Feat: 검색값 입력에 따른 컴포넌트 조건부 렌더 구현

src/components/search/ResultCategory.tsx

@@ -0,0 +1,15 @@
+import { ButtonWhite } from '@components/common/button/Button';
+import { ResultItem } from './ResultItem';
+
+export const ResultCategory = () => {
+  return (
+    <>
+      <h2 className="headline2 my-2.5">숙소</h2>
+      <ResultItem />
+      <ResultItem />
+      <ButtonWhite className="my-2" onClick={() => {}}>
+        숙소 더 보기
+      </ButtonWhite>
+    </>
+  );
+};

src/components/search/ResultItem.tsx

@@ -0,0 +1,17 @@
+export const ResultItem = () => {
+  return (
+    <div className="flex h-[52px] w-full py-1.5">
+      <div className="imgWrap mr-2.5 overflow-hidden rounded-lg">
+        <img
+          className="h-10 w-10 object-cover"
+          src="https://source.unsplash.com/random"
+          alt=""
+        />
+      </div>
+      <div className="textWrap flex flex-col justify-between py-0.5">
+        <div className="name body3">강릉 세인트존스 호텔</div>
+        <span className="address body6 text-gray4">강원 강릉시 창해로 307</span>
+      </div>
+    </div>
+  );
+};

src/components/search/SearchInput.tsx

@@ -1,22 +1,58 @@
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as LeftIcon } from '@assets/images/Left.svg';
 import { ReactComponent as SearchIcon } from '@assets/images/Search.svg';
+import { ReactComponent as CloseIcon } from '@assets/images/DeleteInput.svg';
+import { useEffect, useState } from 'react';
 
-export const SearchInput = () => {
+interface SearchInputProps {
+  onInputChange: (value: string) => void;
+  selectedRegion: string | number;
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({
+  onInputChange,
+  selectedRegion,
+}) => {
+  const [inputValue, setInputValue] = useState('');
   const navigate = useNavigate();
 
   const goBack = () => {
     navigate(-1);
   };
+
+  const clearInput = () => {
+    setInputValue('');
+    onInputChange('');
+  };
+
+  useEffect(() => {
+    setInputValue(selectedRegion.toString());
+  }, [selectedRegion]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    onInputChange(value);
+  };
+  console.log(inputValue);
   return (
     <>
-      <div className="relative flex items-center ">
+      <div className="relative mb-3 flex items-center">
         <LeftIcon className="cursor-pointer" onClick={goBack} />
         <SearchIcon className="absolute left-[36px] top-1/2  -translate-y-1/2 transform" />
         <input
           className="body1 ml-2.5 h-[40px] w-full items-center rounded-lg bg-gray1 pl-[32px] pr-2.5 focus:outline-none"
           onClick={() => {}}
-          placeholder="어디로 떠나세요?"></input>
+          placeholder="어디로 떠나세요?"
+          value={inputValue}
+          onChange={handleChange}
+        />
+        {inputValue && (
+          <CloseIcon
+            className="absolute right-2 top-1/2 -translate-y-1/2 transform cursor-pointer"
+            onClick={clearInput}
+          />
+        )}
       </div>
     </>
   );

src/components/search/SearchResult.tsx

@@ -0,0 +1,11 @@
+import { ResultCategory } from './ResultCategory';
+
+export const SearchResult = () => {
+  return (
+    <>
+      <div className="tabs">전체 숙소 식당 관광지</div>
+      <ResultCategory />
+      <ResultCategory />
+    </>
+  );
+};

src/pages/search/search.page.tsx

@@ -1,15 +1,33 @@
 import { RegionSelect } from '@components/search/RegionSelect';
 import { SearchInput } from '@components/search/SearchInput';
+import { SearchResult } from '@components/search/SearchResult';
+import { useState } from 'react';
 
 export const Search = () => {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedRegion, setSelectedRegion] = useState('');
+
   const handleRegionChange = (selectedRegion: string | number) => {
     console.log('선택한 지역:', selectedRegion);
+    setSelectedRegion(selectedRegion.toString());
+    setSearchValue(selectedRegion.toString());
+  };
+
+  const handleInputChange = (value: string) => {
+    setSearchValue(value);
   };
 
   return (
     <>
-      <SearchInput />
-      <RegionSelect onRegionChange={handleRegionChange} />
+      <SearchInput
+        onInputChange={handleInputChange}
+        selectedRegion={selectedRegion}
+      />
+      {searchValue ? (
+        <SearchResult />
+      ) : (
+        <RegionSelect onRegionChange={handleRegionChange} />
+      )}
     </>
   );
 };