From de86e94eb2f7f24350e59870ecaa9896d6feabc4 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Fri, 10 May 2024 13:30:58 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[#4]=20=EA=B8=B0=EB=B3=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C?= =?UTF-8?q?=EB=B0=9C=20=EB=B0=8F=20jsdoc=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 221 ++++++++++++++++++++++++- package.json | 3 +- src/components/common/button/.gitkeep | 0 src/components/common/button/index.tsx | 45 +++++ src/styles/theme.ts | 3 + src/types/button.ts | 5 + 6 files changed, 273 insertions(+), 4 deletions(-) delete mode 100644 src/components/common/button/.gitkeep create mode 100644 src/components/common/button/index.tsx create mode 100644 src/types/button.ts diff --git a/package-lock.json b/package-lock.json index adf7401..e26ef39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "dayjs": "^1.11.11", "framer-motion": "^11.1.7", "jotai": "^2.8.0", + "jsdoc": "^4.0.3", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -43,6 +44,17 @@ "typescript": "^5" } }, + "node_modules/@babel/parser": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz", + "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@babel/runtime": { "version": "7.24.5", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", @@ -313,6 +325,17 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/@jsdoc/salty": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.8.tgz", + "integrity": "sha512-5e+SFVavj1ORKlKaKr2BmTOekmXbelU7dC0cDkQLqag7xfuTPuGMUFx7KWJuv4bYZrTsoL2Z18VVCOKYxzoHcg==", + "dependencies": { + "lodash": "^4.17.21" + }, + "engines": { + "node": ">=v12.0.0" + } + }, "node_modules/@mswjs/cookies": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.1.0.tgz", @@ -739,6 +762,25 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz", + "integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==" + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", @@ -1168,8 +1210,7 @@ "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "node_modules/aria-query": { "version": "5.3.0", @@ -1414,6 +1455,11 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==" + }, "node_modules/body-parser": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", @@ -1550,6 +1596,17 @@ } ] }, + "node_modules/catharsis": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz", + "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==", + "dependencies": { + "lodash": "^4.17.15" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -2080,6 +2137,17 @@ "node": ">=10.13.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/es-abstract": { "version": "1.23.3", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", @@ -4138,6 +4206,50 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/js2xmlparser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz", + "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==", + "dependencies": { + "xmlcreate": "^2.0.4" + } + }, + "node_modules/jsdoc": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.3.tgz", + "integrity": "sha512-Nu7Sf35kXJ1MWDZIMAuATRQTg1iIPdzh7tqJ6jjvaU/GfDf+qi5UV8zJR3Mo+/pYFvm8mzay4+6O5EWigaQBQw==", + "dependencies": { + "@babel/parser": "^7.20.15", + "@jsdoc/salty": "^0.2.1", + "@types/markdown-it": "^14.1.1", + "bluebird": "^3.7.2", + "catharsis": "^0.9.0", + "escape-string-regexp": "^2.0.0", + "js2xmlparser": "^4.0.2", + "klaw": "^3.0.0", + "markdown-it": "^14.1.0", + "markdown-it-anchor": "^8.6.7", + "marked": "^4.0.10", + "mkdirp": "^1.0.4", + "requizzle": "^0.2.3", + "strip-json-comments": "^3.1.0", + "underscore": "~1.13.2" + }, + "bin": { + "jsdoc": "jsdoc.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/jsdoc/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "engines": { + "node": ">=8" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -4192,6 +4304,14 @@ "json-buffer": "3.0.1" } }, + "node_modules/klaw": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "dependencies": { + "graceful-fs": "^4.1.9" + } + }, "node_modules/language-subtag-registry": { "version": "0.3.22", "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", @@ -4232,6 +4352,14 @@ "node": ">=14" } }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/lint-staged": { "version": "15.2.2", "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.2.tgz", @@ -4382,6 +4510,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4549,6 +4682,47 @@ "node": "14 || >=16.14" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/markdown-it-anchor": { + "version": "8.6.7", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz", + "integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==", + "peerDependencies": { + "@types/markdown-it": "*", + "markdown-it": "*" + } + }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -4674,6 +4848,17 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -5295,6 +5480,14 @@ "node": ">=6" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "engines": { + "node": ">=6" + } + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", @@ -5452,6 +5645,14 @@ "node": ">=0.10.0" } }, + "node_modules/requizzle": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz", + "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==", + "dependencies": { + "lodash": "^4.17.21" + } + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -6136,7 +6337,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true, "engines": { "node": ">=8" }, @@ -6436,6 +6636,11 @@ "node": ">=14.17" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==" + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -6451,6 +6656,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/underscore": { + "version": "1.13.6", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz", + "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==" + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", @@ -6696,6 +6906,11 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xmlcreate": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz", + "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==" + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 8c185b6..02a201a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dayjs": "^1.11.11", "framer-motion": "^11.1.7", "jotai": "^2.8.0", + "jsdoc": "^4.0.3", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -55,4 +56,4 @@ "public" ] } -} \ No newline at end of file +} diff --git a/src/components/common/button/.gitkeep b/src/components/common/button/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/common/button/index.tsx b/src/components/common/button/index.tsx new file mode 100644 index 0000000..77a1134 --- /dev/null +++ b/src/components/common/button/index.tsx @@ -0,0 +1,45 @@ +'use client' + +import { theme } from '@/styles/theme' +import { ButtonAttributes, Status } from '@/types/button' +import { Ref, forwardRef } from 'react' +import styled from 'styled-components' + +/** + * @description 기본 버튼입니다. + * @description status를 통해 활성화 버튼 (보라색 배경), 비활성화 버튼 (회색 배경)을 설정할 수 있습니다. + */ + +interface ButtonProps extends ButtonAttributes { + name: string + status?: Status +} + +const Button = forwardRef(function Button( + { name, type = 'button', status = 'Enabled', ...rest }: ButtonProps, + forwardedRef: Ref, +) { + return ( + + {name} + + ) +}) + +export default Button + +const StyledWrapper = styled.button>` + display: flex; + justify-content: center; + align-items: center; + + background-color: ${({ status }) => + status === 'Disabled' ? theme.color.grey500 : theme.color.purple700}; + color: ${theme.color.white}; + width: 353px; + height: 40px; + border-radius: 12px; + + font-size: 0.9rem; + font-weight: ${theme.fontWeight.bold}; +` diff --git a/src/styles/theme.ts b/src/styles/theme.ts index aa7a505..272de81 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -6,6 +6,9 @@ export const theme = { purple100: '#f3f4ff', purple700: '#6c76f4', grey100: '#fbfbfb', + grey300: '#ECECEC', + grey500: '#D9D9D9', + grey700: '#989898', }, fontWeight: { light: 300, diff --git a/src/types/button.ts b/src/types/button.ts new file mode 100644 index 0000000..dc250b6 --- /dev/null +++ b/src/types/button.ts @@ -0,0 +1,5 @@ +import { ButtonHTMLAttributes } from 'react' + +export type ButtonAttributes = ButtonHTMLAttributes + +export type Status = 'Enabled' | 'Disabled' From 0405f37a0913daee27f372fa9b57b16dd87df065 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Fri, 10 May 2024 14:17:13 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[#4]=20=EC=B6=94=EA=B0=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C?= =?UTF-8?q?=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/AddButton.tsx | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/common/button/AddButton.tsx diff --git a/src/components/common/button/AddButton.tsx b/src/components/common/button/AddButton.tsx new file mode 100644 index 0000000..b267da8 --- /dev/null +++ b/src/components/common/button/AddButton.tsx @@ -0,0 +1,39 @@ +'use client' + +import { theme } from '@/styles/theme' +import { ButtonAttributes } from '@/types/button' +import styled from 'styled-components' + +/** + * @description 추가 버튼입니다. + */ + +interface ButtonProps extends ButtonAttributes { + onClick?: () => void +} + +const AddButton = ({ onClick }: ButtonProps) => { + return ( + + {`+`}추가하기 + + ) +} + +export default AddButton + +const StyledWrapper = styled.button` + display: flex; + justify-content: center; + align-items: center; + + background-color: ${theme.color.purple700}; + color: ${theme.color.white}; + width: 350px; + height: 35px; + border-radius: 15px; + + font-size: 0.95rem; + font-weight: ${theme.fontWeight.bold}; + cursor: pointer; +` From c850dbb79a38d444585aff872e7c6fc4e8d251cc Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Fri, 10 May 2024 14:18:36 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[#4]=20split=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/SplitButton.tsx | 51 ++++++++++++++++++++ src/components/common/button/index.tsx | 31 +++++++++--- src/types/button.ts | 2 + 3 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 src/components/common/button/SplitButton.tsx diff --git a/src/components/common/button/SplitButton.tsx b/src/components/common/button/SplitButton.tsx new file mode 100644 index 0000000..6370fde --- /dev/null +++ b/src/components/common/button/SplitButton.tsx @@ -0,0 +1,51 @@ +'use client' + +import { theme } from '@/styles/theme' +import { BgColor, ButtonAttributes } from '@/types/button' +import { Ref, forwardRef } from 'react' +import styled from 'styled-components' + +/** + * @description 기본 버튼의 절반 크기의 버튼입니다. + * @description background를 통해 보라색 테마, 회색 테마를 설정할 수 있습니다. + */ + +interface ButtonProps extends ButtonAttributes { + background: BgColor +} + +const SplitButton = forwardRef(function Button( + { children, type = 'button', background, ...rest }: ButtonProps, + forwardedRef: Ref, +) { + return ( + + {children} + + ) +}) + +export default SplitButton + +const StyledWrapper = styled.button` + display: flex; + justify-content: center; + align-items: center; + + background-color: ${({ background }) => + background === 'grey' ? theme.color.grey300 : theme.color.purple700}; + color: ${({ background }) => + background === 'grey' ? theme.color.grey700 : theme.color.white}; + width: 180px; + height: 49px; + border-radius: 5px; + + font-size: 0.95rem; + font-weight: ${theme.fontWeight.bold}; + cursor: pointer; +` diff --git a/src/components/common/button/index.tsx b/src/components/common/button/index.tsx index 77a1134..06747bc 100644 --- a/src/components/common/button/index.tsx +++ b/src/components/common/button/index.tsx @@ -8,27 +8,40 @@ import styled from 'styled-components' /** * @description 기본 버튼입니다. * @description status를 통해 활성화 버튼 (보라색 배경), 비활성화 버튼 (회색 배경)을 설정할 수 있습니다. + * @description modal에 사용될 경우 modal을 작성하면 border-radius 스타일이 변경됩니다. */ interface ButtonProps extends ButtonAttributes { - name: string status?: Status + modal?: true | false } const Button = forwardRef(function Button( - { name, type = 'button', status = 'Enabled', ...rest }: ButtonProps, + { + children, + type = 'button', + status = 'Enabled', + modal = false, + ...rest + }: ButtonProps, forwardedRef: Ref, ) { return ( - - {name} + + {children} ) }) export default Button -const StyledWrapper = styled.button>` +const StyledWrapper = styled.button` display: flex; justify-content: center; align-items: center; @@ -36,10 +49,12 @@ const StyledWrapper = styled.button>` background-color: ${({ status }) => status === 'Disabled' ? theme.color.grey500 : theme.color.purple700}; color: ${theme.color.white}; - width: 353px; - height: 40px; - border-radius: 12px; + width: 350px; + height: 43px; + + border-radius: ${({ modal }) => (modal ? '0px' : '12px')}; font-size: 0.9rem; font-weight: ${theme.fontWeight.bold}; + cursor: pointer; ` diff --git a/src/types/button.ts b/src/types/button.ts index dc250b6..fee7be5 100644 --- a/src/types/button.ts +++ b/src/types/button.ts @@ -3,3 +3,5 @@ import { ButtonHTMLAttributes } from 'react' export type ButtonAttributes = ButtonHTMLAttributes export type Status = 'Enabled' | 'Disabled' + +export type BgColor = 'grey' | 'purple' From 590041ed8bf12b639a3f9cb55dd947929eafe9f7 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Fri, 10 May 2024 17:53:34 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[#4]=20extraBold=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/AddButton.tsx | 2 +- src/styles/theme.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/button/AddButton.tsx b/src/components/common/button/AddButton.tsx index b267da8..deb0642 100644 --- a/src/components/common/button/AddButton.tsx +++ b/src/components/common/button/AddButton.tsx @@ -34,6 +34,6 @@ const StyledWrapper = styled.button` border-radius: 15px; font-size: 0.95rem; - font-weight: ${theme.fontWeight.bold}; + font-weight: ${theme.fontWeight.extraBold}; cursor: pointer; ` diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 272de81..67273de 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -14,6 +14,7 @@ export const theme = { light: 300, normal: 500, bold: 700, + extraBold: 900, }, } as const From de368dcc6ed36f7d916ddf56b57a461def238a54 Mon Sep 17 00:00:00 2001 From: hanseulhee <3021062@gmail.com> Date: Fri, 10 May 2024 19:13:58 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[#4]=20button=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B4=80=EB=A0=A8=20=ED=8C=8C=EC=9D=BC=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/{index.tsx => Button.tsx} | 0 src/components/common/button/index.ts | 5 +++++ 2 files changed, 5 insertions(+) rename src/components/common/button/{index.tsx => Button.tsx} (100%) create mode 100644 src/components/common/button/index.ts diff --git a/src/components/common/button/index.tsx b/src/components/common/button/Button.tsx similarity index 100% rename from src/components/common/button/index.tsx rename to src/components/common/button/Button.tsx diff --git a/src/components/common/button/index.ts b/src/components/common/button/index.ts new file mode 100644 index 0000000..9ce738a --- /dev/null +++ b/src/components/common/button/index.ts @@ -0,0 +1,5 @@ +import AddButton from '@/components/common/button/AddButton' +import Button from '@/components/common/button/Button' +import SplitButton from '@/components/common/button/SplitButton' + +export { AddButton, Button, SplitButton }