Feature/#325 - 그래프 크기가 즉각적으로 변화하지 않는 문제 수정, 반응형 적용 (#352)

boostcampwm-2024 · Dec 4, 2024 · 9fd33ff · 9fd33ff
2 parents 01f1c5d + 6d95ca7
commit 9fd33ff
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 30 deletions.
diff --git a/packages/frontend/src/pages/my-page/MyPage.tsx b/packages/frontend/src/pages/my-page/MyPage.tsx
@@ -12,7 +12,7 @@ export const MyPage = () => {
   return (
     <div>
       <h1 className="display-bold24 mb-16">마이페이지</h1>
-      <article className="grid h-[40rem] grid-cols-[1.5fr_2.5fr] gap-5">
+      <article className="grid gap-5 lg:h-[40rem] lg:grid-cols-[1.5fr_2.5fr]">
         <section className="grid grid-rows-[1fr_2fr] gap-5">
           <section className="rounded-md bg-white p-7">
             {loginStatus?.message === 'Authenticated' ? (

diff --git a/packages/frontend/src/pages/my-page/StockInfo.tsx b/packages/frontend/src/pages/my-page/StockInfo.tsx
@@ -29,10 +29,10 @@ export const StockInfo = ({ loginStatus }: StockInfoProps) => {
             소유한 주식이 없습니다.
           </p>
         ) : (
-          <article className="grid grid-cols-2 gap-5">
+          <article className="grid gap-5 xl:grid-cols-2">
             {data?.userStocks.map((stock) => (
               <section
-                className="display-bold14 text-dark-gray bg-extra-light-gray flex cursor-pointer justify-between rounded p-10 transition-all duration-300 hover:scale-105"
+                className="display-bold14 text-dark-gray bg-extra-light-gray flex cursor-pointer items-center justify-between rounded px-4 py-2 transition-all duration-300 hover:scale-105 xl:p-8"
                 onClick={() => navigate(`/stocks/${stock.stockId}`)}
               >
                 <p>{stock.name}</p>

diff --git a/packages/frontend/src/pages/my-page/UserInfo.tsx b/packages/frontend/src/pages/my-page/UserInfo.tsx
@@ -19,7 +19,7 @@ export const UserInfo = () => {
 
   return (
     <div className="flex flex-col gap-5">
-      <section className="flex justify-between">
+      <section className="flex flex-col md:flex-row md:justify-between">
         <div className="display-medium14 text-gray flex gap-3">
           <h2 className="display-bold20 text-black">내정보</h2>
           {isEdit ? (

diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx
@@ -36,9 +36,7 @@ export const StockDetail = () => {
       />
       <article className="grid flex-1 grid-cols-1 gap-5 xl:grid-cols-[2fr_1fr] 2xl:grid-cols-[2.5fr_1fr_1fr] [&>section]:gap-5">
         <section className="flex flex-col">
-          <div className="relative h-full">
-            <TradingChart />
-          </div>
+          <TradingChart />
           <StockMetricsPanel
             eps={eps}
             high52w={high52w}
@@ -51,7 +49,7 @@ export const StockDetail = () => {
           loginStatus={loginStatus}
           isOwnerStock={userOwnerStock.isOwner}
         />
-        <section className="flex flex-wrap gap-5 2xl:flex-col 2xl:flex-nowrap">
+        <section className="flex flex-col flex-wrap gap-5 lg:flex-row 2xl:flex-col 2xl:flex-nowrap">
           <div className="flex-1">
             <NotificationPanel className="h-full w-full" />
           </div>

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/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx
@@ -61,7 +61,7 @@ export const TradingChart = () => {
   useChartResize({ containerRef, chart });
 
   return (
-    <div className="flex h-[30rem] flex-col xl:h-full">
+    <div className="flex min-h-[30rem] flex-col">
       <section className="flex justify-end gap-5">
         {TIME_UNIT.map((option) => (
           <RadioButton
@@ -75,7 +75,7 @@ export const TradingChart = () => {
           </RadioButton>
         ))}
       </section>
-      <div ref={containerRef} className="h-0 w-full flex-grow" />
+      <div ref={containerRef} className="min-h-0 w-full flex-1" />
     </div>
   );
 };
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>
   );
 };
diff --git a/packages/frontend/src/pages/stock-detail/hooks/useChart.ts b/packages/frontend/src/pages/stock-detail/hooks/useChart.ts
@@ -52,6 +52,7 @@ export const useChart = ({
     chart.current = createChart(containerInstance, {
       width: containerInstance.clientWidth,
       height: containerInstance.clientHeight,
+      autoSize: true,
       ...createChartOptions(graphTheme),
     });
 

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()}원