diff --git a/package-lock.json b/package-lock.json index cdbeb01..572a40e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "concept-be-design-system", - "version": "0.5.3", + "version": "0.5.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "concept-be-design-system", - "version": "0.5.3", + "version": "0.5.6", "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", @@ -35,7 +35,6 @@ "eslint": "^8.45.0", "eslint-import-resolver-typescript": "^3.6.0", "eslint-import-resolver-webpack": "^0.13.7", - "eslint-plugin-import": "^2.28.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "prettier": "^3.0.3", @@ -6875,7 +6874,8 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/lodash": { "version": "4.14.202", @@ -7936,6 +7936,7 @@ "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -7982,6 +7983,7 @@ "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -8002,6 +8004,7 @@ "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -8021,6 +8024,7 @@ "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -9622,6 +9626,7 @@ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "esutils": "^2.0.2" }, @@ -10182,6 +10187,7 @@ "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "debug": "^3.2.7", "is-core-module": "^2.13.0", @@ -10194,6 +10200,7 @@ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ms": "^2.1.1" } @@ -10347,6 +10354,7 @@ "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "array-includes": "^3.1.6", "array.prototype.findlastindex": "^1.2.2", @@ -10379,6 +10387,7 @@ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ms": "^2.1.1" } @@ -14421,6 +14430,7 @@ "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "minimist": "^1.2.0" }, @@ -15524,6 +15534,7 @@ "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -15542,6 +15553,7 @@ "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -15555,6 +15567,7 @@ "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", @@ -17775,6 +17788,7 @@ "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=4" } @@ -18229,6 +18243,7 @@ "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/json5": "^0.0.29", "json5": "^1.0.2", diff --git a/package.json b/package.json index 439eadb..4d8d25e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "concept-be-design-system", "description": "컨셉비 디자인 시스템", - "version": "0.5.3", + "version": "0.5.13", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/src/App.tsx b/src/App.tsx index c0706d6..15ac052 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Alert, BottomSheet, Button, Confirm } from '.'; +import { Alert, BottomSheet, Button, Confirm, Text } from '.'; const App = () => { const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); @@ -10,7 +10,7 @@ const App = () => { return ( <> - + 피드 setIsBottomSheetOpen(false)} diff --git a/src/assets/svg/write_pencil.svg b/src/assets/svg/write_pencil.svg new file mode 100644 index 0000000..bb65022 --- /dev/null +++ b/src/assets/svg/write_pencil.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 74a5467..26488d1 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -25,7 +25,7 @@ const Badge = ({ children, backgroundColor = 'bg1', fontColor = 'b9', - radius = 4, + radius = 50, ...attributes }: Props) => { return ( diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx index 866271c..f1c707d 100644 --- a/src/components/BottomSheet/BottomSheet.tsx +++ b/src/components/BottomSheet/BottomSheet.tsx @@ -36,7 +36,7 @@ const BottomSheetWrapper = styled.div<{ isOpen: boolean }>` margin: 0 auto; width: auto; max-width: 420px; - max-height: 90%; + max-height: 70%; min-height: 70%; background-color: #fff; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index 4b09ebf..1d091ec 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/src/components/Navigation/Navigation.tsx @@ -36,6 +36,5 @@ const NavWrapper = styled.nav` position: absolute; bottom: 8%; display: flex; - justify-content: space-between; - gap: 20%; + justify-content: space-around; `; diff --git a/src/components/Navigation/NavigationItem.tsx b/src/components/Navigation/NavigationItem.tsx index b17a2d6..f600175 100644 --- a/src/components/Navigation/NavigationItem.tsx +++ b/src/components/Navigation/NavigationItem.tsx @@ -1,10 +1,10 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { ReactNode } from 'react'; +import { HtmlHTMLAttributes, ReactNode } from 'react'; type PositionType = 'normal' | 'center'; -export interface Props { +export interface Props extends HtmlHTMLAttributes { onClick?: () => void; position?: PositionType; children: ReactNode; diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 6196e39..4420cd3 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; +import { HTMLAttributes } from 'react'; import { ReactComponent as SVGCancel } from '../../assets/svg/cancel.svg'; import Spacer from '../Spacer/Spacer'; import Text from '../Text/Text'; -interface TagProps { +interface TagProps extends HTMLAttributes { children: string; onDelete: (name: string) => void; } diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 7d7ba33..ee4c1e8 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -1,9 +1,10 @@ import styled from '@emotion/styled'; import { - ReactNode, - ElementType, ComponentPropsWithoutRef, CSSProperties, + ElementType, + HTMLAttributes, + ReactNode, } from 'react'; import { ReactComponent as SVGTextRequired } from '../../assets/svg/text_required.svg'; @@ -16,7 +17,8 @@ type Props = { color?: ColorKeyType; required?: boolean; wordBreak?: CSSProperties['wordBreak']; -} & ComponentPropsWithoutRef; +} & ComponentPropsWithoutRef & + HTMLAttributes; const Text = ({ as, diff --git a/src/index.ts b/src/index.ts index 198ebe6..e1f3a12 100644 --- a/src/index.ts +++ b/src/index.ts @@ -60,6 +60,7 @@ export { ReactComponent as SVGScrap24 } from './assets/svg/scrap_24.svg'; export { ReactComponent as SVGScrapFilled24 } from './assets/svg/scrap_filled_24.svg'; export { ReactComponent as SVGTextRequired } from './assets/svg/text_required.svg'; export { ReactComponent as SVGTripleDots } from './assets/svg/triple_dots.svg'; +export { ReactComponent as SVGWritePencil } from './assets/svg/write_pencil.svg'; export { ReactComponent as SVGHeaderBack24B } from './assets/svg/header/back_24_B.svg'; export { ReactComponent as SVGHeaderBack24W } from './assets/svg/header/back_24_W.svg'; diff --git a/src/stories/SVGCommon.stories.tsx b/src/stories/SVGCommon.stories.tsx index 509c3d0..92d916f 100644 --- a/src/stories/SVGCommon.stories.tsx +++ b/src/stories/SVGCommon.stories.tsx @@ -4,18 +4,20 @@ import { SVGAdd24, SVGCancel, SVGCheckFilled24, + SVGDropdownArrow, SVGFeed24, SVGFeedFilled24, + SVGGoldBell, SVGProfile24, SVGProfileFilled24, + SVGRadioCheck24, + SVGRadioFilled24, + SVGRadioUncheck24, SVGScrap24, SVGScrapFilled24, - SVGRadioUncheck24, - SVGRadioFilled24, - SVGRadioCheck24, SVGTextRequired, SVGTripleDots, - SVGDropdownArrow, + SVGWritePencil, } from '../.'; const meta = { @@ -44,6 +46,8 @@ export const Default: Story = { + + ), }; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 3c2b963..b5ad123 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -19,6 +19,10 @@ const color = { } as const; const font = { + suit10eb: { + fontSize: 10, + fontWeight: 800, + }, suit12r: { fontSize: 12, fontWeight: 400, @@ -47,15 +51,15 @@ const font = { fontSize: 14, fontWeight: 600, }, + suit14sb: { + fontSize: 14, + fontWeight: 600, + }, suit14b: { fontSize: 14, fontWeight: 700, }, - suit15ra: { - fontSize: 15, - fontWeight: 400, - }, - suit15rb: { + suit15r: { fontSize: 15, fontWeight: 400, }, @@ -67,6 +71,10 @@ const font = { fontSize: 15, fontWeight: 600, }, + suit16r: { + fontSize: 16, + fontWeight: 400, + }, suit16m: { fontSize: 16, fontWeight: 500, diff --git a/yarn.lock b/yarn.lock index 492c95f..444a0c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5268,7 +5268,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0: dependencies: debug "^3.2.7" -eslint-plugin-import@*, eslint-plugin-import@^2.28.1, eslint-plugin-import@>=1.4.0: +eslint-plugin-import@*, eslint-plugin-import@>=1.4.0: version "2.28.1" resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz" integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==