[Bugfix Repro] 차트 높이 무한 늘어남 버그 수정

package.json

@@ -27,6 +27,7 @@
     "@typescript-eslint/parser": "^5.59.2",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.15",
+    "clsx": "^2.1.1",
     "daisyui": "^3.5.1",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^9.1.0",

src/App.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.deco {
+  border: 1px solid #000;
+  padding: 8px;
+}

src/Routes.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import { DailySummaryPage } from './pages/DailySummaryPage';
 import { LogWriterPage } from './pages/LogWriterPage';
+import { ReproducedPage } from './pages/ReproducedPage';
 
 const router = createBrowserRouter([
   {
@@ -13,6 +14,10 @@ const router = createBrowserRouter([
     path: '/summary',
     element: <DailySummaryPage />,
   },
+  {
+    path: '/reproduced',
+    element: <ReproducedPage />,
+  },
 ]);
 
 export const Routes = () => <RouterProvider router={router} />;

src/pages/ReproducedPage.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { AreaChart, ResponsiveContainer } from 'recharts';
+
+export const ReproducedPage = () => {
+  const [minHeightZero, setMinHeightZero] = useState(true);
+
+  return (
+    <div className="flex h-screen w-screen flex-col p-4">
+      <label>
+        <input
+          type="checkbox"
+          onChange={() => setMinHeightZero(!minHeightZero)}
+          checked={minHeightZero}
+        />
+        min-h-0 적용
+      </label>
+      flex container
+      <div className="deco flex">something (flex)</div>
+      <div
+        className={clsx(
+          'deco grid flex-1 grid-cols-1 grid-rows-2',
+          minHeightZero ? 'min-h-0' : '',
+        )}
+      >
+        grid item (flex-1, flex container)
+        <div className="deco flex flex-col gap-2">
+          grid item (flex-1, flex container)
+          <div className="deco h-20">something (block)</div>
+          <ResponsiveContainer
+            className={clsx('deco', minHeightZero ? 'min-h-0' : '')}
+          >
+            <AreaChart data={[]}></AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+};

vite.config.ts

@@ -4,4 +4,7 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 4000,
+  },
 });

yarn.lock

@@ -2002,6 +2002,11 @@ classnames@^2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"