✨ feat: 주식 메인페이지 반응형 적용

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

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx
@@ -24,11 +24,11 @@ export const StockRankingTable = () => {
     <div className="rounded-md bg-white px-6 shadow">
       <table className="w-full border-collapse">
         <colgroup>
-          <col className="w-4/12" />
-          <col className="w-2/12" />
-          <col className="w-2/12" />
-          <col className="w-2/12" />
-          <col className="w-2/12" />
+          <col className="w-3/5 lg:w-4/12" />
+          <col className="w-1/5 lg:w-2/12" />
+          <col className="w-1/5 lg:w-2/12" />
+          <col className="hidden lg:table-cell lg:w-2/12" />
+          <col className="hidden lg:table-cell lg:w-2/12" />
         </colgroup>
         <thead>
           <tr className="display-medium12 text-dark-gray border-light-gray border-b text-left [&>*]:p-4 [&>*]:py-3">
@@ -44,8 +44,8 @@ export const StockRankingTable = () => {
                 onClick={handleSortType}
               />
             </th>
-            <th className="text-right">거래대금</th>
-            <th className="text-right">거래량</th>
+            <th className="hidden lg:table-cell lg:text-right">거래대금</th>
+            <th className="hidden lg:table-cell lg:text-right">거래량</th>
           </tr>
         </thead>
         <tbody>
@@ -76,8 +76,12 @@ export const StockRankingTable = () => {
                 >
                   {stock.changeRate}%
                 </td>
-                <td>{stock.volume?.toLocaleString()}원</td>
-                <td>{stock.marketCap?.toLocaleString()}주</td>
+                <td className="hidden lg:table-cell">
+                  {stock.volume?.toLocaleString()}원
+                </td>
+                <td className="hidden lg:table-cell">
+                  {stock.marketCap?.toLocaleString()}주
+                </td>
               </tr>
             ))
           ) : (

diff --git a/packages/frontend/src/pages/stocks/Stocks.tsx b/packages/frontend/src/pages/stocks/Stocks.tsx
@@ -23,7 +23,7 @@ export const Stocks = () => {
           지금 시장, 이렇게 움직이고 있어요.
         </h2>
         {stockIndex ? (
-          <div className="grid w-fit grid-cols-3 gap-5">
+          <div className="flex flex-col gap-5 lg:grid lg:w-fit lg:grid-cols-3">
             {stockIndex?.map((info) => (
               <StockIndexCard
                 key={info.name}
@@ -44,7 +44,7 @@ export const Stocks = () => {
         <h2 className="display-bold16 text-dark-gray mb-5">
           이 종목은 어떠신가요?
         </h2>
-        <div className="grid w-fit grid-cols-5 gap-5">
+        <div className="flex flex-col gap-5 lg:grid lg:w-fit lg:grid-cols-5">
           {topViews ? (
             topViews.map((stock, index) => (
               <StockInfoCard

diff --git a/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx b/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx
@@ -10,7 +10,7 @@ export const StockIndexCard = ({
   open,
 }: Partial<StockIndexResponse>) => {
   return (
-    <div className="flex w-full cursor-pointer flex-col gap-2 rounded-md bg-white py-4 pl-5 pr-20 shadow transition-all duration-300 hover:scale-105">
+    <div className="flex w-full cursor-pointer flex-col gap-2 rounded-md bg-white py-4 pl-5 shadow transition-all duration-300 hover:scale-105 lg:pr-6 2xl:pr-20">
       <p className="display-bold16 text-dark-gray">{name}</p>
       <div className="flex items-center gap-3">
         <span className="display-bold20 text-dark-gray">{currentPrice}</span>
@@ -23,7 +23,7 @@ export const StockIndexCard = ({
           {changeRate}%
         </span>
       </div>
-      <div className="text-gray grid grid-cols-2 grid-rows-2 gap-3 [&_div]:flex [&_div]:gap-4">
+      <div className="text-gray flex flex-col gap-3 xl:grid xl:grid-cols-2 xl:grid-rows-2 [&_div]:flex [&_div]:gap-4">
         <div>
           <span className="display-bold14">시가</span>
           <span className="display-medium14">{open?.toLocaleString()}원</span>

diff --git a/packages/frontend/src/pages/stocks/components/StockInfoCard.tsx b/packages/frontend/src/pages/stocks/components/StockInfoCard.tsx
@@ -16,14 +16,14 @@ export const StockInfoCard = ({
   return (
     <div
       className={cn(
-        'flex cursor-pointer flex-col gap-2 rounded-md p-2 shadow transition-all duration-300 hover:scale-105 lg:py-4 lg:pl-5 lg:pr-16',
+        'flex cursor-pointer flex-col gap-2 rounded-md p-5 shadow transition-all duration-300 hover:scale-105 2xl:py-4 2xl:pl-5 2xl:pr-16',
         index === 0 ? 'bg-light-yellow' : 'bg-white',
       )}
       onClick={onClick}
     >
       <p className="display-bold16 text-dark-gray mb-3">{name}</p>
-      <section className="flex flex-row gap-2 xl:flex-col">
-        <div className="flex flex-col items-start gap-2 xl:flex-row xl:items-center xl:gap-5">
+      <section className="flex flex-col gap-2">
+        <div className="flex items-center gap-5">
           <span className="display-bold12 text-dark-gray">등락률</span>
           <span
             className={cn(
@@ -34,7 +34,7 @@ export const StockInfoCard = ({
             {changeRate}%
           </span>
         </div>
-        <div className="flex flex-col items-start gap-2 xl:flex-row xl:items-center xl:gap-5">
+        <div className="flex items-center gap-5">
           <span className="display-bold12 text-dark-gray">현재가</span>
           <span className="display-medium12 text-dark-gray">
             {currentPrice?.toLocaleString()}원