From 110b91039b6aba689afb99d3fdc1207f4ae8cf8f Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Thu, 11 Jul 2024 02:03:44 +0900
Subject: [PATCH 1/3] Feat: Add Modal Component

---
 .storybook/main.ts                     |  18 ++
 .storybook/preview-body.html           |   1 +
 package-lock.json                      | 289 +++++++++++--------------
 package.json                           |   1 +
 public/icons/bottom_modal.svg          |  14 ++
 public/icons/modal.svg                 |  10 +
 src/components/Modal/Modal.stories.tsx | 152 +++++++++++++
 src/components/Modal/index.tsx         | 233 ++++++++++++++++++++
 8 files changed, 553 insertions(+), 165 deletions(-)
 create mode 100644 .storybook/preview-body.html
 create mode 100644 public/icons/bottom_modal.svg
 create mode 100644 public/icons/modal.svg
 create mode 100644 src/components/Modal/Modal.stories.tsx
 create mode 100644 src/components/Modal/index.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index d98b990..5f559f5 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -14,5 +14,23 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+    const imageRule = config.module.rules.find((rule) =>
+      // @ts-ignore
+      rule?.['test']?.test('.svg'),
+    )
+    if (imageRule) {
+      // @ts-ignore
+      imageRule['exclude'] = /\.svg$/
+    }
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+
+    return config
+  },
 }
 export default config
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 0000000..0288277
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1 @@
+<div id="modal-root"/>
diff --git a/package-lock.json b/package-lock.json
index f7b572e..9f0d7fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2681,7 +2681,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
       "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-      "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
       },
@@ -2693,10 +2692,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
-      "dev": true,
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
+      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -2705,7 +2703,6 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -2750,7 +2747,6 @@
       "version": "8.57.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
-      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -2766,7 +2762,6 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
       "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "deprecated": "Use @eslint/config-array instead",
-      "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.2",
         "debug": "^4.3.1",
@@ -2802,7 +2797,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -2815,8 +2809,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
-      "dev": true
+      "deprecated": "Use @eslint/object-schema instead"
     },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.4",
@@ -3098,160 +3091,6 @@
         "@img/sharp-libvips-linux-arm64": "1.0.2"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-      "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@fal-works/esbuild-plugin-global-externals": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz",
-      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
-      "dev": true
-    },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
-      "deprecated": "Use @eslint/config-array instead",
-      "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
-      },
-      "engines": {
-        "node": ">=10.10.0"
-      }
-    },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead"
-    },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
-      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "glibc": ">=2.26",
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
-        "npm": ">=9.6.5",
-        "pnpm": ">=7.1.0",
-        "yarn": ">=3.2.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.2"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
-      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "macos": ">=11",
-        "npm": ">=9.6.5",
-        "pnpm": ">=7.1.0",
-        "yarn": ">=3.2.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -21969,6 +21808,126 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 58dfa96..3c9ab23 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@storybook/preview-api": "^8.1.11",
     "eslint-import-resolver-typescript": "^3.6.1",
     "next": "14.2.4",
     "react": "^18",
diff --git a/public/icons/bottom_modal.svg b/public/icons/bottom_modal.svg
new file mode 100644
index 0000000..6d3911a
--- /dev/null
+++ b/public/icons/bottom_modal.svg
@@ -0,0 +1,14 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.8389 12.0485C56.4048 11.3617 58.0074 12.9369 57.3477 14.5144L52.9024 25.1447L53.8317 36.9943C53.8727 37.5159 53.483 37.9718 52.9614 38.0127C52.4399 38.0537 51.9839 37.664 51.943 37.1424L51.0136 25.2928C50.9901 24.9928 51.0384 24.6914 51.1545 24.4137L55.5998 13.7835L3.77218 36.5149C3.29307 36.7251 2.73432 36.507 2.52418 36.0279C2.31404 35.5488 2.53209 34.9901 3.0112 34.7799L54.8389 12.0485Z" fill="#0A0A0A"/>
+<path d="M23.545 40.1652C23.5828 39.6326 23.5504 38.9847 23.572 38.4136C23.626 37.6723 23.5342 36.9859 22.7729 37.0299C21.9899 37.0573 21.2394 37.2275 20.451 37.2879C19.7599 37.3483 18.9715 37.3813 18.68 36.964C17.4165 33.8945 16.7415 30.5889 16.1961 27.3108C15.3484 22.1767 14.2091 17.0535 14.3819 11.8371C14.3927 11.0574 14.992 10.5906 15.6778 10.4039C18.7664 9.44848 21.8333 8.4601 24.9867 7.70234C31.882 5.85187 33.3237 7.24659 34.2362 13.9127C34.3658 14.632 35.1002 14.8352 35.7373 14.7693C37.2276 14.6869 38.6801 14.5936 40.1488 15.0164C40.5268 15.1152 40.9102 15.225 41.2881 15.2745C41.7525 15.3458 42.2115 15.2964 42.6704 15.2799C44.4307 15.1976 46.2666 16.7021 46.0614 18.591C46.0182 21.7484 45.6132 24.8947 45.1164 28.0136C44.3227 32.7578 43.6802 37.535 42.5624 42.2134C42.2169 43.5642 41.2719 44.5306 39.868 44.4812C35.4296 44.591 31.0235 44.6514 26.5958 44.6788C23.4262 44.9699 23.4856 42.8778 23.5342 40.2146V40.1597L23.545 40.1652ZM19.9705 35.2288C20.1217 35.3112 20.3052 35.3222 20.505 35.3002C24.4413 34.6577 28.4749 34.0043 32.4328 33.3344C33.4317 33.1422 34.5602 32.9336 34.4306 31.6157C34.139 28.0356 33.6531 24.4829 33.2697 20.9137C32.9403 18.1188 32.6164 15.3294 32.2438 12.5399C32.0926 10.8597 31.5364 8.71818 29.5548 8.69622C28.95 8.6468 28.2049 8.77309 27.6001 8.8884C24.2848 9.54732 21.0234 10.1898 17.8214 11.3484C16.7901 11.7437 15.6508 11.9249 15.7966 13.3032C16.3149 18.8766 17.546 24.3676 18.2966 29.919C18.3776 31.6651 18.7124 33.1916 19.5601 34.7566C19.6519 34.9323 19.7707 35.1025 19.9273 35.2013L19.9705 35.2288ZM37.665 16.4989C36.5473 16.5099 34.679 16.1585 34.76 17.5093C34.7924 18.6569 34.922 19.7222 36.3259 19.7112C37.4706 19.7936 38.5829 19.8759 39.7276 20.0187C40.8886 20.0736 41.8389 20.8973 41.8605 22.1272C41.6229 26.1686 41.1531 30.1771 40.7536 34.1965C40.651 35.3716 40.3918 36.7773 39.0905 37.1012C38.5613 37.2605 37.9836 37.277 37.4436 37.277C35.1812 37.255 31.3042 37.6998 29.3496 37.0134C28.8258 36.8267 28.3399 36.4258 27.7675 36.3654C27.1951 36.327 26.6066 36.4643 26.0882 36.6839C25.6887 36.8761 25.5915 37.3428 25.5807 37.7657C25.5537 38.9956 25.5429 40.2256 25.5429 41.4611C25.5159 42.3726 25.9154 42.768 26.8334 42.7295C30.9047 42.7295 34.9436 42.5813 39.0257 42.5428C39.9922 42.5593 40.7104 42.2299 40.8832 41.1811C41.8929 36.0634 42.6434 30.9348 43.6586 25.8117C43.9663 23.8789 44.8735 19.1182 43.8853 17.5203C43.5938 17.1469 43.124 17.059 42.6812 17.0041C40.9587 16.7955 39.3497 16.6143 37.7406 16.4989H37.6704H37.665Z" fill="#0A0A0A"/>
+<path d="M20.0652 35.21C19.9068 35.1119 19.7866 34.9429 19.6937 34.7685C19.1639 33.6839 18.7379 32.7519 18.574 31.6074C17.9786 25.6503 16.5257 19.7695 15.903 13.8124C15.7009 12.1392 16.5912 12.0139 17.9404 11.5288C21.1794 10.3842 24.4786 9.74112 27.8323 9.08709C28.4386 8.96719 29.1978 8.84728 29.8096 8.89633C31.8142 8.92359 32.3768 11.0437 32.5297 12.7115C32.9066 15.4802 33.2344 18.2489 33.5675 21.0231C33.928 24.0479 34.2612 27.0783 34.6108 30.1086C34.7965 31.9834 35.1625 32.9754 32.8575 33.3242C28.81 34.0055 24.6807 34.654 20.6551 35.3026C20.453 35.3244 20.2673 35.3135 20.1143 35.2318L20.0706 35.2045L20.0652 35.21ZM17.6618 15.1041C18.1152 18.3143 18.9181 21.4918 19.5954 24.6638C19.7538 25.3124 20.1307 25.9174 20.6933 26.288C21.3433 26.7567 22.0861 26.7676 22.8181 26.5877C24.8554 26.1626 26.9037 25.7538 28.8756 25.0889C31.41 24.3313 32.1583 22.5164 31.7541 20.0257C31.4701 17.7039 31.197 15.4257 30.8638 13.1257C30.7655 12.379 30.5415 11.5669 29.9188 11.1037C28.7226 10.2807 27.0731 10.5423 25.7021 10.6459C22.6761 10.9184 18.4702 11.5778 17.6618 15.0333V15.0932V15.1041Z" fill="white"/>
+<path d="M37.9485 16.4728C39.5637 16.5888 41.1789 16.7656 42.9079 16.9811C43.3523 17.0364 43.8293 17.1248 44.1165 17.5005C45.1084 19.0974 44.1978 23.91 43.8889 25.8439C42.9024 30.85 42.1545 35.845 41.2005 40.8456C41.1138 41.3152 41.0054 41.8843 40.6965 42.2214C40.2358 42.7242 39.4119 42.6634 38.7778 42.6855C34.6476 42.669 30.5013 42.995 26.382 42.8016C25.737 42.6579 25.7045 42.028 25.7262 41.481C25.7912 40.1991 25.4823 37.8452 25.9809 36.9446C26.1164 36.7844 26.3332 36.7236 26.5283 36.6628C26.9945 36.5523 27.5527 36.3755 28.0622 36.4804C28.7126 36.6131 29.2547 37.1435 29.9051 37.2651C32.7777 37.6242 35.6775 37.4364 38.5718 37.3424C40.3658 37.2485 40.8699 35.8892 40.9729 34.2813C41.4011 30.5019 41.6883 26.7335 42.0732 22.9376C42.2683 21.6391 41.6775 20.1969 40.2737 20.0643C39.0217 19.8709 37.7859 19.7991 36.5284 19.7052C36.0731 19.6665 35.6178 19.6002 35.3794 19.2908C35.0216 18.7935 34.9783 18.0917 34.9566 17.495C34.8699 16.1357 36.7506 16.4728 37.8726 16.4728H37.9431H37.9485Z" fill="white"/>
+<path d="M17.3846 15.0277C18.2016 11.4729 22.4466 10.8011 25.5103 10.5212C26.8959 10.4148 28.563 10.1461 29.7719 10.9914C30.4012 11.4729 30.6275 12.3014 30.7269 13.0684C31.0636 15.4308 31.3341 17.7709 31.6266 20.1557C32.0351 22.7141 31.2789 24.5839 28.7175 25.3565C26.7247 26.0338 24.6602 26.4593 22.5956 26.896C21.8504 27.0807 21.0997 27.0695 20.4483 26.5881C19.8797 26.2018 19.4988 25.586 19.3387 24.9198C18.6542 21.656 17.8428 18.3923 17.3846 15.1005V15.0389V15.0277Z" fill="#0A0A0A"/>
+<path d="M23.9178 20.1497C22.7665 20.0128 21.7774 19.163 21.481 18.0471C21.4431 17.9022 21.4179 17.7491 21.4288 17.6011C21.447 17.3532 21.5751 17.1706 21.8393 17.1283C22.0918 17.0877 22.2923 17.1755 22.3978 17.4149C22.4683 17.575 22.5035 17.7527 22.5707 17.9145C23.1257 19.2446 24.8068 19.5249 25.7388 18.426C26.0461 18.0628 26.2723 17.6285 26.5327 17.2255C26.71 16.9515 26.9527 16.8486 27.2454 17C27.5028 17.1351 27.5954 17.4039 27.4755 17.6496C26.9106 18.8085 26.2578 19.8829 24.8211 20.1237C24.5172 20.1749 24.2194 20.1875 23.9161 20.1505L23.9178 20.1497Z" fill="#FEFEFE"/>
+<path d="M23.5591 15.0374C23.5171 15.3348 23.2714 15.5042 22.9564 15.4519C22.6699 15.4024 22.4587 15.1313 22.498 14.8624C22.5382 14.5994 22.8447 14.3834 23.1118 14.432C23.3865 14.4831 23.5968 14.7652 23.5591 15.0374Z" fill="#F1F1F1"/>
+<path d="M25.5369 14.3542C25.8056 14.423 25.9483 14.6146 25.9223 14.8979C25.8963 15.1937 25.6894 15.3355 25.4069 15.3322C25.1269 15.3298 24.9058 15.0216 24.9645 14.7495C25.0147 14.5068 25.2832 14.3157 25.5361 14.3525L25.5369 14.3542Z" fill="#EDEDED"/>
+<path d="M3.88871 35.5078L46.5616 33.5876C47.2788 33.5553 47.7698 34.3014 47.4565 34.9474L37.0016 56.4972C36.7577 57 36.1337 57.1834 35.6564 56.8927L3.43842 37.2631C2.63977 36.7765 2.95444 35.5499 3.88871 35.5078Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.519 32.6412C47.9534 32.5767 48.9355 34.069 48.3087 35.3609L37.8539 56.9107C37.366 57.9163 36.1181 58.2832 35.1636 57.7016L2.94556 38.0721C1.34827 37.0989 1.9776 34.6456 3.84614 34.5615L46.519 32.6412ZM46.6042 34.5339L3.93131 36.4542L36.1493 56.0837L46.6042 34.5339Z" fill="#0A0A0A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.3517 33.3385C46.5806 32.868 47.1475 32.6722 47.618 32.901L52.6822 35.3647C54.49 36.2442 53.8638 38.9629 51.8534 38.9629H46.0195C45.4963 38.9629 45.0722 38.5388 45.0722 38.0156C45.0722 37.4925 45.4963 37.0684 46.0195 37.0684H51.8534L46.7892 34.6047C46.3187 34.3758 46.1229 33.8089 46.3517 33.3385Z" fill="#0A0A0A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.8554 24.5096C52.9902 25.0151 52.6897 25.5342 52.1842 25.669L45.0795 27.5635C44.574 27.6983 44.0549 27.3978 43.9201 26.8923C43.7853 26.3868 44.0858 25.8677 44.5913 25.7329L51.696 23.8384C52.2015 23.7036 52.7206 24.0041 52.8554 24.5096Z" fill="#0A0A0A"/>
+</svg>
diff --git a/public/icons/modal.svg b/public/icons/modal.svg
new file mode 100644
index 0000000..15dde8e
--- /dev/null
+++ b/public/icons/modal.svg
@@ -0,0 +1,10 @@
+<svg width="43" height="41" viewBox="0 0 43 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M2.15422 19.7882C2.37843 18.613 2.73937 17.7044 3.13432 16.7889C3.85703 15.1127 4.92167 13.6477 5.9888 12.2115C7.26999 10.4862 8.75706 8.90865 10.2521 7.35084C11.5675 5.97967 12.8829 4.63956 14.4245 3.49182C17.5024 1.20309 19.8157 1.54577 22.7438 3.42865C24.4865 4.54866 25.9847 5.98166 27.4865 7.39822C29.5447 9.33916 31.613 11.2713 33.6867 13.1968C35.0766 14.4874 36.5056 15.7356 37.8698 17.0481C38.7652 17.91 39.5925 18.8478 40.4254 19.7741C41.0101 20.4227 41.131 21.1326 40.5744 21.8848C40.0123 22.646 39.5039 23.4546 38.8969 24.1788C37.2351 26.1538 35.5931 28.1494 33.8265 30.0276C32.42 31.5231 31.0692 33.0708 29.5886 34.5054C28.3203 35.7345 27.1441 37.0377 25.6317 37.9965C25.2291 38.2516 24.8202 38.4656 24.4 38.6715C23.7161 39.0072 23.1618 38.8511 22.479 38.4769C20.0817 37.169 17.9833 35.4352 15.7257 33.9328C15.0853 33.5045 14.522 32.9485 13.9454 32.4393C11.5924 30.3579 9.20257 28.3191 7.02266 26.0434C5.74163 24.7064 4.44523 23.3826 3.24917 21.9687C2.68077 21.2951 1.97783 20.63 2.15222 19.7832L2.15422 19.7882Z" fill="#060606"/>
+<path id="Vector_2" d="M3.67034 19.5087C3.74876 18.5754 4.27575 17.8042 4.67046 17.013C5.61348 15.1199 6.91099 13.4605 8.22588 11.7929C9.77714 9.82592 11.5407 8.07654 13.229 6.2519C14.1384 5.26942 15.2769 4.53452 16.4472 3.88101C17.9078 3.06393 19.4003 3.26536 20.7496 4.06986C22.6238 5.19068 24.3265 6.54658 25.9549 8.02571C27.7975 9.69864 29.6369 11.3809 31.4612 13.0739C33.976 15.4071 36.7198 17.5049 38.9183 20.1812C39.3698 20.7308 39.295 21.1026 39.0494 21.6402C38.6274 22.5656 37.7944 23.1548 37.2147 23.9577C36.1138 25.4893 34.8558 26.9199 33.5616 28.2952C31.6205 30.3557 29.764 32.4945 27.7221 34.4682C26.7906 35.3676 25.9096 36.2926 24.8003 36.9605C24.2306 37.3028 23.7423 37.3719 23.0407 36.9627C20.2043 35.3118 17.5667 33.4135 15.0135 31.3547C13.3682 30.0296 11.7776 28.6467 10.2467 27.2039C8.08629 25.1664 5.93446 23.1105 4.0974 20.7615C3.75136 20.3199 3.60827 19.9014 3.66815 19.5061L3.67034 19.5087Z" fill="white"/>
+<path id="Vector_3" d="M19.6272 31.1732C18.0245 30.944 16.7257 30.1052 15.493 29.1546C14.1276 28.1002 12.7542 27.0547 11.4494 25.9286C9.62525 24.3552 7.74553 22.7893 6.43352 20.7542C5.6476 19.5352 5.90904 18.1 6.60501 16.8234C7.4492 15.274 8.46188 13.8311 9.56947 12.4579C10.841 10.8848 12.0595 9.25737 13.63 7.95652C14.5865 7.16422 15.5081 6.33092 16.7317 5.9111C18.3189 5.36698 19.7379 5.62237 21.176 6.42193C23.2028 7.54762 24.8249 9.16729 26.4837 10.7158C27.9555 12.0893 29.3879 13.5673 30.492 15.268C32.2143 17.9211 32.4909 19.8984 30.2667 22.5773C28.6952 24.4685 27.1037 26.339 25.3285 28.054C24.0191 29.3181 22.5809 30.3377 20.9021 31.042C20.462 31.2272 20.0471 31.0319 19.6295 31.1734L19.6272 31.1732Z" fill="#060606"/>
+<path id="Vector_4" d="M20.1023 19.153C20.0209 19.8518 19.877 20.615 19.4115 21.2739C18.5095 22.5558 16.8882 22.5618 16.0952 21.2202C15.1966 19.7031 15.0933 18.1028 15.9895 16.5312C16.8412 15.0374 18.636 15.0141 19.5715 16.4577C20.0938 17.2615 20.1937 18.1467 20.1023 19.153Z" fill="#FEFEFE"/>
+<path id="Vector_5" d="M15.213 12.1339C15.7035 12.1583 16.1165 12.5901 16.1049 13.0697C16.0924 13.5922 15.7071 13.9299 15.1576 13.8961C14.6175 13.8631 14.2387 13.4842 14.2535 12.9929C14.2678 12.5088 14.7153 12.109 15.213 12.1339Z" fill="#F1F1F1"/>
+<path id="Vector_6" d="M19.1906 12.1033C19.6538 12.202 19.9343 12.4943 19.9558 12.9789C19.9767 13.4419 19.4584 13.891 19.0071 13.7933C18.537 13.6916 18.2465 13.3747 18.305 12.8749C18.3624 12.3894 18.6793 12.1299 19.1906 12.1033Z" fill="#EDEDED"/>
+</g>
+</svg>
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
new file mode 100644
index 0000000..7cd3a5a
--- /dev/null
+++ b/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,152 @@
+/* eslint-disable react-hooks/rules-of-hooks,@typescript-eslint/naming-convention */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable-next-line @typescript-eslint/naming-convention */
+
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useArgs } from '@storybook/preview-api'
+import BottomModalSvg from 'public/icons/bottom_modal.svg'
+import ModalSvg from 'public/icons/modal.svg'
+import Button from '@/components/Button'
+import Modal from './index'
+
+const meta: Meta<typeof Modal> = {
+  title: 'Modal',
+  component: Modal,
+  argTypes: {
+    isOpen: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Modal>
+
+export const Bottom_Modal_Confirm: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.BottomModal icon={<BottomModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirm confirmText="확인" />
+            </Modal.Footer>
+          </Modal.BottomModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Bottom_Modal_Confirm_Cancel: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.BottomModal icon={<BottomModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirmCancel
+                cancelText="돌아가기"
+                confirmText="확인"
+              />
+            </Modal.Footer>
+          </Modal.BottomModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Center_Modal_Confirm: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.CenterModal icon={<ModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirm confirmText="확인" />
+            </Modal.Footer>
+          </Modal.CenterModal>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const Center_Modal_Confirm_Cancel: Story = {
+  render: () => {
+    const [{ isOpen }, setIsOpen] = useArgs()
+
+    const onClose = () => {
+      setIsOpen({ isOpen: false })
+    }
+    return (
+      <div>
+        <Button type="button" onClick={() => setIsOpen({ isOpen: true })}>
+          Show Modal
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <Modal.CenterModal icon={<ModalSvg />}>
+            <Modal.Close />
+            <Modal.Body>
+              <Modal.BodyTitle>링크가 복사되었습니다!</Modal.BodyTitle>
+              <Modal.BodyContent>
+                {'POLABO를\n지인들에게도 알려주세요!'}
+              </Modal.BodyContent>
+            </Modal.Body>
+            <Modal.Footer>
+              <Modal.FooterConfirmCancel
+                cancelText="돌아가기"
+                confirmText="확인"
+              />
+            </Modal.Footer>
+          </Modal.CenterModal>
+        </Modal>
+      </div>
+    )
+  },
+}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
new file mode 100644
index 0000000..9343399
--- /dev/null
+++ b/src/components/Modal/index.tsx
@@ -0,0 +1,233 @@
+'use client'
+
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import ReactDOM from 'react-dom'
+import Close from 'public/icons/close.svg'
+import Button from '@/components/Button'
+
+interface ModalContextProps {
+  isVisible: boolean
+  onClose: () => void
+}
+
+const ModalContext = createContext<ModalContextProps>({
+  isVisible: false,
+  onClose: () => {},
+})
+
+const ModalOverlay = ({
+  children,
+  handleTransitionEnd,
+}: {
+  children: ReactNode
+  handleTransitionEnd: () => void
+}) => {
+  const { isVisible, onClose } = useContext(ModalContext)
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target === event.currentTarget) {
+      onClose()
+    }
+  }
+
+  return (
+    <div
+      className={`fixed inset-0 flex justify-center items-center bg-gray-900/60 transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+      onClick={handleClick}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+function Modal({ isOpen, onClose, children }: ModalProps) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    setIsVisible(isOpen)
+  }, [isOpen])
+
+  const handleTransitionEnd = () => {
+    if (!isVisible) {
+      onClose()
+    }
+  }
+
+  const context = useMemo(
+    () => ({
+      isVisible,
+      onClose: () => setIsVisible(false),
+    }),
+    [isVisible, setIsVisible],
+  )
+
+  return isOpen
+    ? ReactDOM.createPortal(
+        <ModalContext.Provider value={context}>
+          <ModalOverlay handleTransitionEnd={handleTransitionEnd}>
+            {children}
+          </ModalOverlay>
+        </ModalContext.Provider>,
+        document.getElementById('modal-root') as HTMLElement,
+      )
+    : null
+}
+
+const CenterModal = ({
+  icon,
+  children,
+}: {
+  icon: ReactNode
+  children: ReactNode
+}) => {
+  return (
+    <div className="fixed max-w-[300px] pt-10 w-4/5 bg-gray-0 rounded-lg flex flex-col justify-items-start items-start shadow-lg">
+      {icon && (
+        <div className="absolute -top-[0%] left-[50%] -translate-y-1/2 -translate-x-1/2">
+          {icon}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+const BottomModal = ({
+  icon,
+  children,
+}: {
+  icon: ReactNode
+  children: ReactNode
+}) => {
+  const { isVisible } = useContext(ModalContext)
+  return (
+    <div
+      className={`fixed w-full bg-gray-0 bottom-0 rounded-t-[20px] flex flex-col justify-items-start items-start shadow-lg transition-transform duration-300  ${isVisible ? 'translate-y-0' : 'translate-y-full'}`}
+    >
+      {icon && (
+        <div className="w-full flex justify-center mt-5 mb-3">{icon}</div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+const ModalClose = () => {
+  const { onClose } = useContext(ModalContext)
+  return (
+    <Close className="absolute right-0 top-0 mr-4 mt-4" onClick={onClose} />
+  )
+}
+
+const ModalBody = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="flex flex-col w-full justify-center items-center">
+      {children}
+    </div>
+  )
+}
+
+const ModalBodyTitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="font-semibold text-md font-semiBold leading-6">
+      {children}
+    </div>
+  )
+}
+
+const ModalBodyContent = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="w-32 text-center whitespace-pre text-gray-700 mt-2 text-xs leading-4">
+      {children}
+    </div>
+  )
+}
+
+const ModalFooter = ({ children }: { children: ReactNode }) => {
+  return <div className="my-4 mx-auto flex gap-1.5">{children}</div>
+}
+
+const ModalFooterConfirm = ({
+  confirmText,
+  onConfirm = () => {},
+}: {
+  confirmText: string
+  onConfirm?: () => void
+}) => {
+  const { onClose } = useContext(ModalContext)
+
+  const clickHandler = () => {
+    onClose()
+    onConfirm()
+  }
+
+  return (
+    <Button variant="primary" size="md" onClick={clickHandler}>
+      {confirmText}
+    </Button>
+  )
+}
+
+ModalFooterConfirm.defaultProps = {
+  onConfirm: () => {},
+}
+
+const ModalFooterConfirmCancel = ({
+  cancelText,
+  confirmText,
+  onConfirm = () => {},
+}: {
+  cancelText: string
+  confirmText: string
+  onConfirm?: () => void
+}) => {
+  const { onClose } = useContext(ModalContext)
+
+  const clickHandler = () => {
+    onClose()
+    onConfirm()
+  }
+
+  return (
+    <>
+      <Button variant="secondary" size="sm" onClick={onClose}>
+        {cancelText}
+      </Button>
+      <Button variant="primary" size="sm" onClick={clickHandler}>
+        {confirmText}
+      </Button>
+    </>
+  )
+}
+
+ModalFooterConfirmCancel.defaultProps = {
+  onConfirm: () => {},
+}
+
+Modal.CenterModal = CenterModal
+Modal.BottomModal = BottomModal
+Modal.Close = ModalClose
+Modal.Body = ModalBody
+Modal.BodyTitle = ModalBodyTitle
+Modal.BodyContent = ModalBodyContent
+Modal.Footer = ModalFooter
+Modal.FooterConfirm = ModalFooterConfirm
+Modal.FooterConfirmCancel = ModalFooterConfirmCancel
+
+export default Modal

From 82eeaa66dc3cf0c1f5972cf63615195f937ea6f4 Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Thu, 11 Jul 2024 02:05:26 +0900
Subject: [PATCH 2/3] Chore: Button size optional

---
 src/components/Button/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index f3515d6..e464733 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge'
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary'
-  size: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg'
   className?: string
   isSubmit?: boolean
 }
@@ -53,6 +53,7 @@ function Button({
 
 Button.defaultProps = {
   variant: 'primary',
+  size: 'md',
   className: '',
   isSubmit: false,
 }

From d21f2fb92c10905574d754a403016a385a802d4e Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Fri, 12 Jul 2024 23:30:25 +0900
Subject: [PATCH 3/3] feat: alter default props eslint rule

---
 .eslintrc.json                     |  5 +++++
 src/components/Button/index.tsx    | 15 ++++-----------
 src/components/Modal/index.tsx     |  8 --------
 src/components/TagButton/index.tsx |  9 ++-------
 4 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 7f56a58..bae8d23 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -48,6 +48,11 @@
       {
         "html": "ignore"
       }
+    ],
+    "react/require-default-props": [
+      "error", {
+        "functions" : "defaultArguments"
+      }
     ]
   }
 }
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index e464733..ae117fc 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -9,11 +9,11 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 function Button({
-  className,
-  size,
+  className = '',
+  size = 'md',
   children,
-  variant,
-  isSubmit,
+  variant = 'primary',
+  isSubmit = false,
   ...props
 }: ButtonProps) {
   const getSizeClass = () => {
@@ -51,11 +51,4 @@ function Button({
   )
 }
 
-Button.defaultProps = {
-  variant: 'primary',
-  size: 'md',
-  className: '',
-  isSubmit: false,
-}
-
 export default Button
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 9343399..6720404 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -184,10 +184,6 @@ const ModalFooterConfirm = ({
   )
 }
 
-ModalFooterConfirm.defaultProps = {
-  onConfirm: () => {},
-}
-
 const ModalFooterConfirmCancel = ({
   cancelText,
   confirmText,
@@ -216,10 +212,6 @@ const ModalFooterConfirmCancel = ({
   )
 }
 
-ModalFooterConfirmCancel.defaultProps = {
-  onConfirm: () => {},
-}
-
 Modal.CenterModal = CenterModal
 Modal.BottomModal = BottomModal
 Modal.Close = ModalClose
diff --git a/src/components/TagButton/index.tsx b/src/components/TagButton/index.tsx
index 7ae6202..3a5ce33 100644
--- a/src/components/TagButton/index.tsx
+++ b/src/components/TagButton/index.tsx
@@ -8,9 +8,9 @@ interface TagButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 function TagButton({
-  className,
   children,
-  isSubmit,
+  className = '',
+  isSubmit = false,
   disabled,
   size,
   ...props
@@ -43,9 +43,4 @@ function TagButton({
   )
 }
 
-TagButton.defaultProps = {
-  className: '',
-  isSubmit: false,
-}
-
 export default TagButton