From a1d9bb8028773ee3ce462605cbac4852069d05b0 Mon Sep 17 00:00:00 2001
From: joanShim <joanjeongahshim@gmail.com>
Date: Fri, 29 Dec 2023 23:37:39 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B2=80=EC=83=89=EA=B0=92=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/DeleteInput.svg        |  5 +++
 src/components/search/ResultCategory.tsx | 15 +++++++++
 src/components/search/ResultItem.tsx     | 17 ++++++++++
 src/components/search/SearchInput.tsx    | 42 ++++++++++++++++++++++--
 src/components/search/SearchResult.tsx   | 11 +++++++
 src/pages/search/search.page.tsx         | 22 +++++++++++--
 6 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/DeleteInput.svg
 create mode 100644 src/components/search/ResultCategory.tsx
 create mode 100644 src/components/search/ResultItem.tsx
 create mode 100644 src/components/search/SearchResult.tsx

diff --git a/src/assets/images/DeleteInput.svg b/src/assets/images/DeleteInput.svg
new file mode 100644
index 00000000..b1020d4f
--- /dev/null
+++ b/src/assets/images/DeleteInput.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.59119" cy="8" r="8" fill="#888888"/>
+<path d="M5.6248 5.03398L11.5576 10.9668" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5576 5.03398L5.62476 10.9668" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/search/ResultCategory.tsx b/src/components/search/ResultCategory.tsx
new file mode 100644
index 00000000..0ceddfa0
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/src/components/search/ResultItem.tsx b/src/components/search/ResultItem.tsx
new file mode 100644
index 00000000..711268e7
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
index a667d5bc..613b94c9 100644
--- a/src/components/search/SearchInput.tsx
+++ b/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>
     </>
   );
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
new file mode 100644
index 00000000..ee298c70
--- /dev/null
+++ b/src/components/search/SearchResult.tsx
@@ -0,0 +1,11 @@
+import { ResultCategory } from './ResultCategory';
+
+export const SearchResult = () => {
+  return (
+    <>
+      <div className="tabs">전체 숙소 식당 관광지</div>
+      <ResultCategory />
+      <ResultCategory />
+    </>
+  );
+};
diff --git a/src/pages/search/search.page.tsx b/src/pages/search/search.page.tsx
index 715b134f..f05ff288 100644
--- a/src/pages/search/search.page.tsx
+++ b/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} />
+      )}
     </>
   );
 };