diff --git a/package.json b/package.json
index 148206e..39a2b13 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.css b/src/App.css
index b5c61c9..012088a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.deco {
+  border: 1px solid #000;
+  padding: 8px;
+}
diff --git a/src/Routes.tsx b/src/Routes.tsx
index b063fbd..14ddad3 100644
--- a/src/Routes.tsx
+++ b/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} />;
diff --git a/src/pages/ReproducedPage.tsx b/src/pages/ReproducedPage.tsx
new file mode 100644
index 0000000..67c2abf
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/vite.config.ts b/vite.config.ts
index 4e7004e..189dcd9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,7 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 4000,
+  },
 });
diff --git a/yarn.lock b/yarn.lock
index ef81729..b3c6d29 100644
--- a/yarn.lock
+++ b/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"