Merge pull request #90 from boostcampwm-2024/feature/layout/search-#62

[FE] 검색 리스트 컴포넌트 구현.
boostcampwm-2024 · Nov 12, 2024 · 22fb650 · 22fb650
2 parents 01db4dc + ba1bd74
commit 22fb650
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 11 deletions.
diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
@@ -2,11 +2,13 @@ import { Link } from 'react-router-dom';
 import useAuthStore from 'store/authStore';
 import useLoginModalStore from 'store/useLoginModalStore';
 import useSearchModalStore from '../store/useSearchModalStore.ts';
+import useSearchInputStore from '../store/useSearchInputStore.ts';
 
 export default function Header() {
   const { toggleModal } = useLoginModalStore();
   const { isLogin, resetToken } = useAuthStore();
   const { toggleSearchModal } = useSearchModalStore();
+  const { searchInput } = useSearchInputStore();
 
   return (
     <header className='fixed left-0 top-0 h-[60px] w-full'>
@@ -26,6 +28,7 @@ export default function Header() {
             <input
               type='text'
               placeholder='Search...'
+              value={searchInput}
               className='h-[36px] w-[280px] rounded-lg bg-juga-grayscale-50 px-4 py-2'
               onClick={toggleSearchModal}
             />

diff --git a/FE/src/components/Search/SearchCard.tsx b/FE/src/components/Search/SearchCard.tsx
@@ -0,0 +1,27 @@
+export default function SearchCard() {
+  const companyName = '회사명';
+  const previousClose = 50000;
+  const priceChange = 2.5;
+
+  return (
+    <li className='h-[52px] w-full rounded-xl hover:cursor-pointer hover:bg-gray-50'>
+      <div className='my-2 flex w-full items-center justify-between px-4'>
+        <div className='flex-1'>
+          <p className='text-left font-medium text-juga-grayscale-black'>
+            {companyName}
+          </p>
+        </div>
+
+        <div className='flex flex-col items-end justify-center gap-0.5'>
+          <p className='text-right text-sm font-medium text-gray-900'>
+            {previousClose.toLocaleString()}
+          </p>
+
+          <p className={'text-right text-xs font-medium text-red-500'}>
+            +{Math.abs(priceChange).toFixed(2)}%
+          </p>
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/FE/src/components/Search/SearchHistoryList.tsx b/FE/src/components/Search/SearchHistoryList.tsx
@@ -10,7 +10,7 @@ export function SearchHistoryList({
   onDeleteItem,
 }: SearchHistoryListProps) {
   return (
-    <div className={'flex w-full flex-col'}>
+    <div className={'flex w-full flex-col pb-2'}>
       <div className={'mb-2 flex items-center justify-between'}>
         <div className={'text-start text-sm font-bold'}>최근 검색</div>
       </div>

diff --git a/FE/src/components/Search/SearchInput.tsx b/FE/src/components/Search/SearchInput.tsx
@@ -1,11 +1,18 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
+import { useEffect, useRef } from 'react';
 
 type SearchInputProps = {
   value: string;
   onChange: (value: string) => void;
 };
 
 export function SearchInput({ value, onChange }: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <div
       className={
@@ -14,6 +21,7 @@ export function SearchInput({ value, onChange }: SearchInputProps) {
     >
       <MagnifyingGlassIcon className={'ml-3 h-4 w-4 fill-juga-grayscale-200'} />
       <input
+        ref={inputRef}
         className={
           'h-[36px] w-full rounded-lg bg-juga-grayscale-50 py-2 pl-[10px] pr-10 text-sm font-normal focus:outline-none'
         }

diff --git a/FE/src/components/Search/SearchList.tsx b/FE/src/components/Search/SearchList.tsx
@@ -0,0 +1,16 @@
+import SearchCard from './SearchCard.tsx';
+
+export default function SearchList() {
+  return (
+    <>
+      <div className={'my-4 flex items-center justify-between'}>
+        <div className={'text-start text-sm font-bold'}>검색 결과</div>
+      </div>
+      <ul className='flex h-full w-full flex-col items-center justify-between overflow-y-auto'>
+        {Array.from({ length: 30 }, (_, index) => {
+          return <SearchCard key={index} />;
+        })}
+      </ul>
+    </>
+  );
+}
diff --git a/FE/src/components/Search/index.tsx b/FE/src/components/Search/index.tsx
@@ -3,10 +3,12 @@ import useSearchModalStore from 'store/useSearchModalStore';
 import Overlay from '../ModalOveray.tsx';
 import { SearchInput } from './SearchInput';
 import { SearchHistoryList } from './SearchHistoryList';
+import SearchList from './SearchList.tsx';
+import useSearchInputStore from '../../store/useSearchInputStore.ts';
 
 export default function SearchModal() {
   const { isOpen, toggleSearchModal } = useSearchModalStore();
-  const [searchTerm, setSearchTerm] = useState('');
+  const { searchInput, setSearchInput } = useSearchInputStore();
   const [searchHistory, setSearchHistory] = useState<string[]>([]);
 
   useEffect(() => {
@@ -22,13 +24,26 @@ export default function SearchModal() {
   return (
     <>
       <Overlay onClick={() => toggleSearchModal()} />
-      <section className='fixed left-1/2 top-3 flex w-[640px] -translate-x-1/2 flex-col rounded-2xl bg-white shadow-lg'>
-        <div className={'flex flex-col gap-5 p-3'}>
-          <SearchInput value={searchTerm} onChange={setSearchTerm} />
-          <SearchHistoryList
-            searchHistory={searchHistory}
-            onDeleteItem={handleDeleteHistoryItem}
-          />
+      <section
+        className={`${searchInput === '' ? '' : 'h-[520px]'} fixed left-1/2 top-3 flex w-[640px] -translate-x-1/2 flex-col rounded-2xl bg-white shadow-lg`}
+      >
+        <div className='flex h-full flex-col p-3'>
+          <div className='mb-5'>
+            <SearchInput value={searchInput} onChange={setSearchInput} />
+          </div>
+          <div className='flex-1 overflow-hidden'>
+            <SearchHistoryList
+              searchHistory={searchHistory}
+              onDeleteItem={handleDeleteHistoryItem}
+            />
+            {searchInput === '' ? (
+              <></>
+            ) : (
+              <div className='h-full overflow-y-auto'>
+                <SearchList />
+              </div>
+            )}
+          </div>
         </div>
       </section>
     </>

diff --git a/FE/src/components/TopFive/Nav.tsx b/FE/src/components/TopFive/Nav.tsx
@@ -43,7 +43,7 @@ export default function Nav() {
           key={market}
           ref={(el) => (buttonRefs.current[index] = el)}
           onClick={() => handleMarketChange(market)}
-          className={`relative px-2 py-2`}
+          className={'relative px-2 py-2'}
         >
           {market}
         </button>

diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx
@@ -1,6 +1,5 @@
 import TopFive from 'components/TopFive/TopFive';
 import StockIndex from 'components/StockIndex/index.tsx';
-import SearchModal from '../components/Search';
 
 export default function Home() {
   return (

diff --git a/FE/src/store/useSearchInputStore.ts b/FE/src/store/useSearchInputStore.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+interface SearchInputStore {
+  searchInput: string;
+  setSearchInput: (input: string) => void;
+  resetSearchInput: () => void;
+}
+
+const useSearchInputStore = create<SearchInputStore>((set) => ({
+  searchInput: '',
+
+  setSearchInput: (input: string) => {
+    set({ searchInput: input });
+  },
+
+  resetSearchInput: () => {
+    set({ searchInput: '' });
+  },
+}));
+
+export default useSearchInputStore;