✨ feat: 주식 상세페이지의 정보 컴포넌트에 반응형 구현

boostcampwm-2024 · Dec 4, 2024 · 99018b3 · 99018b3
1 parent 627b7e1
commit 99018b3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
@@ -60,7 +60,7 @@ export const StockMetricsPanel = ({
       {Object.values(metricsData).map((section) => (
         <section className="flex flex-col gap-5" key={section.id}>
           <Title>{section.title}</Title>
-          <section className="grid w-9/12 grid-cols-4 items-center gap-5">
+          <section className="grid items-center gap-5 lg:grid-cols-2 lg:grid-rows-2 2xl:w-9/12">
             {section.metrics.map((metric) => (
               <MetricItem
                 key={metric.name}

diff --git a/packages/frontend/src/pages/stock-detail/components/MetricItem.tsx b/packages/frontend/src/pages/stock-detail/components/MetricItem.tsx
@@ -8,14 +8,14 @@ export interface MetricItemProps {
 
 export const MetricItem = ({ label, tooltip, value }: MetricItemProps) => {
   return (
-    <>
+    <div className="flex items-center gap-5">
       <div className="group relative">
         <Tooltip className="absolute bottom-full mb-6">{tooltip}</Tooltip>
         <span className="display-medium14 text-gray cursor-pointer font-bold">
           {label}
         </span>
       </div>
       <span className="display-medium14 text-dark-gray">{value}</span>
-    </>
+    </div>
   );
 };