diff --git a/FE/src/App.tsx b/FE/src/App.tsx index fd68bddd..d3d0e74d 100644 --- a/FE/src/App.tsx +++ b/FE/src/App.tsx @@ -9,6 +9,7 @@ import Home from 'page/Home'; import StocksDetail from 'page/StocksDetail'; import Header from 'components/Header'; import Login from 'components/Login'; +import SearchModal from './components/Search'; function App() { return ( @@ -33,6 +34,7 @@ function Layout() { + ); } diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx index 182f0991..9ec8dc7a 100644 --- 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 (
@@ -26,6 +28,7 @@ export default function Header() { diff --git a/FE/src/components/Search/SearchCard.tsx b/FE/src/components/Search/SearchCard.tsx new file mode 100644 index 00000000..d48733f6 --- /dev/null +++ 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 ( +
  • +
    +
    +

    + {companyName} +

    +
    + +
    +

    + {previousClose.toLocaleString()} +

    + +

    + +{Math.abs(priceChange).toFixed(2)}% +

    +
    +
    +
    • + ); +} diff --git a/FE/src/components/Search/SearchHistoryList.tsx b/FE/src/components/Search/SearchHistoryList.tsx index 666504bd..53c67759 100644 --- a/FE/src/components/Search/SearchHistoryList.tsx +++ b/FE/src/components/Search/SearchHistoryList.tsx @@ -10,7 +10,7 @@ export function SearchHistoryList({ onDeleteItem, }: SearchHistoryListProps) { return ( -
    +
    최근 검색
    diff --git a/FE/src/components/Search/SearchInput.tsx b/FE/src/components/Search/SearchInput.tsx index 1f3bb6fa..3d698f9d 100644 --- a/FE/src/components/Search/SearchInput.tsx +++ b/FE/src/components/Search/SearchInput.tsx @@ -1,4 +1,5 @@ import { MagnifyingGlassIcon } from '@heroicons/react/16/solid'; +import { useEffect, useRef } from 'react'; interface SearchInputProps { value: string; @@ -6,6 +7,12 @@ interface SearchInputProps { } export function SearchInput({ value, onChange }: SearchInputProps) { + const inputRef = useRef(null); + + useEffect(() => { + inputRef.current?.focus(); + }, []); + return (
    +
    +
    검색 결과
    +
    +
      + {Array.from({ length: 30 }, (_, index) => { + return ; + })} +
    + + ); +} diff --git a/FE/src/components/Search/index.tsx b/FE/src/components/Search/index.tsx index 69ddd642..68aa7377 100644 --- 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 '../../utils/ModalOveray'; 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([]); useEffect(() => { @@ -22,13 +24,26 @@ export default function SearchModal() { return ( <> toggleSearchModal()} /> -
    -
    - - +
    +
    +
    + +
    +
    + + {searchInput === '' ? ( + <> + ) : ( +
    + +
    + )} +
    diff --git a/FE/src/components/TopFive/Nav.tsx b/FE/src/components/TopFive/Nav.tsx index 941c8249..5fc2bef3 100644 --- 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} diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx index d79f6fce..3ae5da96 100644 --- 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 new file mode 100644 index 00000000..b6fe6451 --- /dev/null +++ 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((set) => ({ + searchInput: '', + + setSearchInput: (input: string) => { + set({ searchInput: input }); + }, + + resetSearchInput: () => { + set({ searchInput: '' }); + }, +})); + +export default useSearchInputStore;