✨ feat: 주가지수, top5 반응형 추가

boostcampwm-2024 · Dec 4, 2024 · 1eef1cf · 1eef1cf
1 parent 8f58092
commit 1eef1cf
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/FE/src/components/StockIndex/Card.tsx b/FE/src/components/StockIndex/Card.tsx
@@ -48,7 +48,7 @@ export function Card({ name, id, initialData }: StockIndexChartProps) {
   }, [prices]);
 
   return (
-    <div className='flex h-[100px] w-full items-center justify-between rounded-lg bg-juga-grayscale-50 p-3'>
+    <div className='flex h-[100px] w-full flex-1 items-center justify-between rounded-lg bg-juga-grayscale-50 p-3'>
       <div className='flex h-full w-[108px] flex-1 flex-col items-start justify-center text-sm'>
         <p className='font-semibold'>{name}</p>
         <p className='text-lg font-bold'>{stockIndexValue.curr_value}</p>

diff --git a/FE/src/components/StockIndex/index.tsx b/FE/src/components/StockIndex/index.tsx
@@ -14,7 +14,7 @@ export default function StockIndex() {
   const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data;
 
   return (
-    <div className='flex items-center justify-between w-full gap-2 my-2'>
+    <div className='grid w-full grid-cols-1 gap-2 my-2 sm:grid-cols-2 lg:grid-cols-4'>
       <Card name='코스피' id='KOSPI' initialData={KOSPI} />
       <Card name='코스닥' id='KOSDAQ' initialData={KOSDAQ} />
       <Card name='코스피200' id='KOSPI200' initialData={KOSPI200} />

diff --git a/FE/src/components/TopFive/index.tsx b/FE/src/components/TopFive/index.tsx
@@ -21,7 +21,9 @@ export default function TopFive() {
   return (
     <div className='flex flex-col gap-4'>
       <Nav />
-      <div className={'flex flex-row justify-between gap-[64px]'}>
+      <div
+        className={'grid grid-cols-1 justify-between gap-[64px] sm:grid-cols-2'}
+      >
         <List listTitle={'급상승 Top 5'} data={data?.high} />
         <List listTitle={'급하락 Top 5'} data={data?.low} />
       </div>