Merge pull request #164 from boostcampwm-2024/feature/layout/detail/c…

…hart-#123

[FE] 차트 리펙토링 & 차트 사이즈 조절 기능 구현

FE/src/App.tsx

@@ -10,6 +10,7 @@ import StocksDetail from 'page/StocksDetail';
 import Header from 'components/Header';
 import Login from 'components/Login';
 import SearchModal from './components/Search';
+import Rank from './page/Rank.tsx';
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
         <Route path='/' element={<Layout />}>
           <Route index element={<Home />} />
           <Route path='stocks/:id' element={<StocksDetail />} />
+          <Route path='rank' element={<Rank />} />
         </Route>
       </Routes>
     </Router>

FE/src/components/Header.tsx

@@ -21,8 +21,12 @@ export default function Header() {
 
         <div className='flex items-center gap-8'>
           <nav className='flex items-center gap-6 text-sm font-bold text-juga-grayscale-500'>
-            <button className='px-0.5 py-2'>홈</button>
-            <button className='px-0.5 py-2'>랭킹</button>
+            <Link to={'/'}>
+              <button className='px-0.5 py-2'>홈</button>
+            </Link>
+            <Link to={'/rank'}>
+              <button className='px-0.5 py-2'>랭킹</button>
+            </Link>
             <button className='px-0.5 py-2'>마이페이지</button>
           </nav>
           <div className='relative'>

FE/src/components/Search/SearchCard.tsx

@@ -1,7 +1,7 @@
 import { SearchDataType } from './searchDataType.ts';
 import { useNavigate } from 'react-router-dom';
-import useSearchModalStore from '../../store/useSearchModalStore.ts';
-import useSearchInputStore from '../../store/useSearchInputStore.ts';
+import useSearchModalStore from 'store/useSearchModalStore.ts';
+import useSearchInputStore from 'store/useSearchInputStore.ts';
 import { SearchCardHighLight } from './SearchCardHighlight.tsx';
 
 type SearchCardProps = {

FE/src/components/Search/SearchHistoryItem.tsx

@@ -1,5 +1,5 @@
 import { XMarkIcon } from '@heroicons/react/16/solid';
-import useSearchInputStore from '../../store/useSearchInputStore.ts';
+import useSearchInputStore from 'store/useSearchInputStore.ts';
 
 type SearchHistoryItemProps = {
   item: string;