From 627b7e17e375656ee3fcffcdc72ee651ca8c61ca Mon Sep 17 00:00:00 2001
From: baegyeong <beth0929@naver.com>
Date: Wed, 4 Dec 2024 13:26:46 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/stocks/StockRankingTable.tsx    | 22 +++++++++++--------
 packages/frontend/src/pages/stocks/Stocks.tsx |  4 ++--
 .../stocks/components/StockIndexCard.tsx      |  4 ++--
 .../pages/stocks/components/StockInfoCard.tsx |  8 +++----
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx
index 87ca0c52..2d61aa1a 100644
--- 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
index d0902146..064b5889 100644
--- 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
index 4b321b7c..e644e0bc 100644
--- 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
index d13043f9..1a6aaabb 100644
--- 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()}원