From 184323516dc894ef28cd56b9735238f0e7296540 Mon Sep 17 00:00:00 2001 From: Pakxe <64801796+pakxe@users.noreply.github.com> Date: Thu, 17 Oct 2024 15:29:07 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EC=B6=9C=20=EB=82=B4=EC=97=AD?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=ED=94=8C=EB=A1=9C=EC=9A=B0=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=B0=B8=EC=97=AC=20=EC=9D=B8=EC=9B=90=EC=9D=98=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=EC=9D=98=20x=EB=B2=84=ED=8A=BC=EC=97=90=20?= =?UTF-8?q?=EB=82=AD=EB=8F=85=EA=B8=B0=20=EC=BB=A4=EC=84=9C=EA=B0=80=20?= =?UTF-8?q?=EA=B0=80=EB=8F=84=EB=A1=9D=20=ED=95=A8=20(#759)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: @sentry/webpack-plugin 라이브러리 2.22.0 -> 2.22.5로 업데이트 * feat: Icon 컴포넌트를 IconButton으로 감싸 버튼으로 인식되도록 함 * feat: ICON으로 사용되는 모든 이미지에 aria-label 부착 * feat: 하드코딩된 IconType의 타입을 ICON 객체의 프로퍼티 키 값으로 하도록 수정 * style: 코드 컨벤션에 맞도록 수정 * chore: 사용되지 않는 import 제거 * chore: 사용하지 않는 컴포넌트 제거 * feat: onClick을 Icon에서 IconButton으로 이동 * chore: 사용하지 않는 컴포넌트 제거 * chore: 사용하지 않는 컴포넌트 제거 * feat: ICON에 달아준 aria-label을 모두 제거 * feat: IconButton 컴포넌트를 사용하는 대부분의 위치에 aria-label 속성 추가 --- client/package-lock.json | 88 +++++++++--------- client/package.json | 2 +- .../Design/components/Banner/Banner.tsx | 7 +- .../components/ChipButton/ChipButton.tsx | 6 +- .../DragHandleItem/DragHandleItem.stories.tsx | 51 ----------- .../DragHandleItem/DragHandleItem.style.ts | 19 ---- .../DragHandleItem/DragHandleItem.tsx | 43 --------- .../DragHandleItem/DragHandleItem.type.ts | 18 ---- .../DragHandleItemContainer.stories.tsx | 90 ------------------- .../DragHandleItemContainer.style.ts | 33 ------- .../DragHandleItemContainer.tsx | 47 ---------- .../DragHandleItemContainer.type.ts | 20 ----- .../components/Dropdown/MeatballBase.tsx | 2 +- .../Design/components/Icon/Icon.style.ts | 1 - .../Design/components/Icon/Icon.tsx | 9 +- .../Design/components/Icon/Icon.type.ts | 20 +---- .../components/IconButton/IconButton.tsx | 1 + .../Design/components/Input/Input.tsx | 4 +- .../components/ListButton/ListButton.tsx | 1 + client/src/components/Design/index.tsx | 4 - client/src/hooks/useToast/useToast.test.tsx | 3 +- .../pages/EventPage/AdminPage/EventMember.tsx | 1 + client/src/pages/MainPage/Nav/Nav.tsx | 2 +- 23 files changed, 71 insertions(+), 401 deletions(-) delete mode 100644 client/src/components/Design/components/DragHandleItem/DragHandleItem.stories.tsx delete mode 100644 client/src/components/Design/components/DragHandleItem/DragHandleItem.style.ts delete mode 100644 client/src/components/Design/components/DragHandleItem/DragHandleItem.tsx delete mode 100644 client/src/components/Design/components/DragHandleItem/DragHandleItem.type.ts delete mode 100644 client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.stories.tsx delete mode 100644 client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.style.ts delete mode 100644 client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.tsx delete mode 100644 client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.type.ts diff --git a/client/package-lock.json b/client/package-lock.json index 9f54768f4..db19fe1bc 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -25,7 +25,7 @@ "@eslint/compat": "^1.1.0", "@eslint/js": "^9.6.0", "@jest/types": "^29.6.3", - "@sentry/webpack-plugin": "^2.22.0", + "@sentry/webpack-plugin": "^2.22.5", "@storybook/addon-essentials": "^8.2.2", "@storybook/addon-interactions": "^8.2.2", "@storybook/addon-links": "^8.2.2", @@ -4404,9 +4404,9 @@ } }, "node_modules/@sentry/babel-plugin-component-annotate": { - "version": "2.22.0", - "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.0.tgz", - "integrity": "sha512-UzH+NNhgnOo6UFku3C4TEz+pO/yDcIA5FKTJvLbJ7lQwAjsqLs3DZWm4cCA08skICb8mULArF6S/dn5/butVCA==", + "version": "2.22.5", + "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.5.tgz", + "integrity": "sha512-+93qwB9vTX1nj4hD8AMWowXZsZVkvmP9OwTqSh5d4kOeiJ+dZftUk4+FKeKkAX9lvY2reyHV8Gms5mo67c27RQ==", "dev": true, "engines": { "node": ">= 14" @@ -4430,14 +4430,14 @@ } }, "node_modules/@sentry/bundler-plugin-core": { - "version": "2.22.0", - "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.0.tgz", - "integrity": "sha512-/xXN8o7565WMsewBnQFfjm0E5wqhYsegg++HJ5RjrY/cTM4qcd/ven44GEMxqGFJitZizvkk3NHszaHylzcRUw==", + "version": "2.22.5", + "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.5.tgz", + "integrity": "sha512-nfvTthV0aNM9/MwgnCi1WjAlCtau1I4kw6+oZIDOwJRDqGNziz517mYRXSsvCUebtGxDZtPcF7hSEBMSHjpncA==", "dev": true, "dependencies": { "@babel/core": "^7.18.5", - "@sentry/babel-plugin-component-annotate": "2.22.0", - "@sentry/cli": "^2.33.1", + "@sentry/babel-plugin-component-annotate": "2.22.5", + "@sentry/cli": "^2.36.1", "dotenv": "^16.3.1", "find-up": "^5.0.0", "glob": "^9.3.2", @@ -4491,9 +4491,9 @@ } }, "node_modules/@sentry/cli": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.33.1.tgz", - "integrity": "sha512-dUlZ4EFh98VFRPJ+f6OW3JEYQ7VvqGNMa0AMcmvk07ePNeK/GicAWmSQE4ZfJTTl80ul6HZw1kY01fGQOQlVRA==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.37.0.tgz", + "integrity": "sha512-fM3V4gZRJR/s8lafc3O07hhOYRnvkySdPkvL/0e0XW0r+xRwqIAgQ5ECbsZO16A5weUiXVSf03ztDL1FcmbJCQ==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -4510,19 +4510,19 @@ "node": ">= 10" }, "optionalDependencies": { - "@sentry/cli-darwin": "2.33.1", - "@sentry/cli-linux-arm": "2.33.1", - "@sentry/cli-linux-arm64": "2.33.1", - "@sentry/cli-linux-i686": "2.33.1", - "@sentry/cli-linux-x64": "2.33.1", - "@sentry/cli-win32-i686": "2.33.1", - "@sentry/cli-win32-x64": "2.33.1" + "@sentry/cli-darwin": "2.37.0", + "@sentry/cli-linux-arm": "2.37.0", + "@sentry/cli-linux-arm64": "2.37.0", + "@sentry/cli-linux-i686": "2.37.0", + "@sentry/cli-linux-x64": "2.37.0", + "@sentry/cli-win32-i686": "2.37.0", + "@sentry/cli-win32-x64": "2.37.0" } }, "node_modules/@sentry/cli-darwin": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.33.1.tgz", - "integrity": "sha512-+4/VIx/E1L2hChj5nGf5MHyEPHUNHJ/HoG5RY+B+vyEutGily1c1+DM2bum7RbD0xs6wKLIyup5F02guzSzG8A==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.37.0.tgz", + "integrity": "sha512-CsusyMvO0eCPSN7H+sKHXS1pf637PWbS4rZak/7giz/z31/6qiXmeMlcL3f9lLZKtFPJmXVFO9uprn1wbBVF8A==", "dev": true, "optional": true, "os": [ @@ -4533,9 +4533,9 @@ } }, "node_modules/@sentry/cli-linux-arm": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.33.1.tgz", - "integrity": "sha512-zbxEvQju+tgNvzTOt635le4kS/Fbm2XC2RtYbCTs034Vb8xjrAxLnK0z1bQnStUV8BkeBHtsNVrG+NSQDym2wg==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.37.0.tgz", + "integrity": "sha512-Dz0qH4Yt+gGUgoVsqVt72oDj4VQynRF1QB1/Sr8g76Vbi+WxWZmUh0iFwivYVwWxdQGu/OQrE0tx946HToCRyA==", "cpu": [ "arm" ], @@ -4550,9 +4550,9 @@ } }, "node_modules/@sentry/cli-linux-arm64": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.33.1.tgz", - "integrity": "sha512-DbGV56PRKOLsAZJX27Jt2uZ11QfQEMmWB4cIvxkKcFVE+LJP4MVA+MGGRUL6p+Bs1R9ZUuGbpKGtj0JiG6CoXw==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.37.0.tgz", + "integrity": "sha512-2vzUWHLZ3Ct5gpcIlfd/2Qsha+y9M8LXvbZE26VxzYrIkRoLAWcnClBv8m4XsHLMURYvz3J9QSZHMZHSO7kAzw==", "cpu": [ "arm64" ], @@ -4567,9 +4567,9 @@ } }, "node_modules/@sentry/cli-linux-i686": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.33.1.tgz", - "integrity": "sha512-g2LS4oPXkPWOfKWukKzYp4FnXVRRSwBxhuQ9eSw2peeb58ZIObr4YKGOA/8HJRGkooBJIKGaAR2mH2Pk1TKaiA==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.37.0.tgz", + "integrity": "sha512-MHRLGs4t/CQE1pG+mZBQixyWL6xDZfNalCjO8GMcTTbZFm44S3XRHfYJZNVCgdtnUP7b6OHGcu1v3SWE10LcwQ==", "cpu": [ "x86", "ia32" @@ -4585,9 +4585,9 @@ } }, "node_modules/@sentry/cli-linux-x64": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.33.1.tgz", - "integrity": "sha512-IV3dcYV/ZcvO+VGu9U6kuxSdbsV2kzxaBwWUQxtzxJ+cOa7J8Hn1t0koKGtU53JVZNBa06qJWIcqgl4/pCuKIg==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.37.0.tgz", + "integrity": "sha512-k76ClefKZaDNJZU/H3mGeR8uAzAGPzDRG/A7grzKfBeyhP3JW09L7Nz9IQcSjCK+xr399qLhM2HFCaPWQ6dlMw==", "cpu": [ "x64" ], @@ -4602,9 +4602,9 @@ } }, "node_modules/@sentry/cli-win32-i686": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.33.1.tgz", - "integrity": "sha512-F7cJySvkpzIu7fnLKNHYwBzZYYwlhoDbAUnaFX0UZCN+5DNp/5LwTp37a5TWOsmCaHMZT4i9IO4SIsnNw16/zQ==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.37.0.tgz", + "integrity": "sha512-FFyi5RNYQQkEg4GkP2f3BJcgQn0F4fjFDMiWkjCkftNPXQG+HFUEtrGsWr6mnHPdFouwbYg3tEPUWNxAoypvTw==", "cpu": [ "x86", "ia32" @@ -4619,9 +4619,9 @@ } }, "node_modules/@sentry/cli-win32-x64": { - "version": "2.33.1", - "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.33.1.tgz", - "integrity": "sha512-8VyRoJqtb2uQ8/bFRKNuACYZt7r+Xx0k2wXRGTyH05lCjAiVIXn7DiS2BxHFty7M1QEWUCMNsb/UC/x/Cu2wuA==", + "version": "2.37.0", + "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.37.0.tgz", + "integrity": "sha512-nSMj4OcfQmyL+Tu/jWCJwhKCXFsCZW1MUk6wjjQlRt9SDLfgeapaMlK1ZvT1eZv5ZH6bj3qJfefwj4U8160uOA==", "cpu": [ "x64" ], @@ -4684,12 +4684,12 @@ } }, "node_modules/@sentry/webpack-plugin": { - "version": "2.22.0", - "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-2.22.0.tgz", - "integrity": "sha512-u2brctki0AMCoZksdAConQSYE6PokRVeZ4YYsbnJYkAi0KuaQnczsRwS9e2L0bK2CmZ7QdyYcrjaXHNlXaFDbQ==", + "version": "2.22.5", + "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-2.22.5.tgz", + "integrity": "sha512-D8irs8H0IuLZbCS0Te5zsYGu9sABmMJTfCCkRkf7fV8S0BQZQmxnQGf9cVxcTj07RWAgnhhUtsRQzkK7MLuIwg==", "dev": true, "dependencies": { - "@sentry/bundler-plugin-core": "2.22.0", + "@sentry/bundler-plugin-core": "2.22.5", "unplugin": "1.0.1", "uuid": "^9.0.0" }, diff --git a/client/package.json b/client/package.json index b10b7b9d0..059f75d8a 100644 --- a/client/package.json +++ b/client/package.json @@ -24,7 +24,7 @@ "@eslint/compat": "^1.1.0", "@eslint/js": "^9.6.0", "@jest/types": "^29.6.3", - "@sentry/webpack-plugin": "^2.22.0", + "@sentry/webpack-plugin": "^2.22.5", "@storybook/addon-essentials": "^8.2.2", "@storybook/addon-interactions": "^8.2.2", "@storybook/addon-links": "^8.2.2", diff --git a/client/src/components/Design/components/Banner/Banner.tsx b/client/src/components/Design/components/Banner/Banner.tsx index a7ac43c59..1b1960ae2 100644 --- a/client/src/components/Design/components/Banner/Banner.tsx +++ b/client/src/components/Design/components/Banner/Banner.tsx @@ -19,7 +19,12 @@ const Banner = ({title, description, buttonText, onDelete, ...buttonProps}: Bann cssProp={{borderRadius: '0.75rem'}} > - +
diff --git a/client/src/components/Design/components/ChipButton/ChipButton.tsx b/client/src/components/Design/components/ChipButton/ChipButton.tsx index 7b0e1aa50..6d335b6d3 100644 --- a/client/src/components/Design/components/ChipButton/ChipButton.tsx +++ b/client/src/components/Design/components/ChipButton/ChipButton.tsx @@ -5,6 +5,7 @@ import {useTheme} from '@components/Design/theme/HDesignProvider'; import Text from '../Text/Text'; import Icon from '../Icon/Icon'; +import IconButton from '../IconButton/IconButton'; import {chipButtonStyle} from './ChipButton.style'; @@ -16,10 +17,13 @@ interface Props { const ChipButton = ({color, text, onClick}: Props) => { const {theme} = useTheme(); + return (
{text} - + + +
); }; diff --git a/client/src/components/Design/components/DragHandleItem/DragHandleItem.stories.tsx b/client/src/components/Design/components/DragHandleItem/DragHandleItem.stories.tsx deleted file mode 100644 index 8043777b5..000000000 --- a/client/src/components/Design/components/DragHandleItem/DragHandleItem.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type {Meta, StoryObj} from '@storybook/react'; - -import DragHandleItem from '@HDcomponents/DragHandleItem/DragHandleItem'; - -const meta = { - title: 'Components/DragHandleItem', - component: DragHandleItem, - tags: ['autodocs'], - parameters: {}, - argTypes: { - backgroundColor: { - description: '', - control: {type: 'select'}, - options: ['white', 'gray', 'darkGray', 'black', 'primary', 'onPrimary', 'secondary', 'onSecondary'], - }, - hasDragHandler: { - description: '드래그할 수 있는 핸들러(불주사 자국)를 켜고 끌 수 있습니다.', - control: {type: 'boolean'}, - }, - prefix: { - description: '', - control: {type: 'text'}, - }, - suffix: { - description: '', - control: {type: 'text'}, - }, - isFixed: { - description: '컴포넌트가 고정되어 있는지 여부를 나타냅니다.', - control: {type: 'boolean'}, - }, - }, - args: { - backgroundColor: 'white', - hasDragHandler: true, - prefix: '뽕쟁이족발', - suffix: '398,000 원', - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Playground: Story = {}; - -export const FixedItem: Story = { - args: { - isFixed: true, - }, -}; diff --git a/client/src/components/Design/components/DragHandleItem/DragHandleItem.style.ts b/client/src/components/Design/components/DragHandleItem/DragHandleItem.style.ts deleted file mode 100644 index 7136e7b3c..000000000 --- a/client/src/components/Design/components/DragHandleItem/DragHandleItem.style.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {css} from '@emotion/react'; - -import {Theme} from '@theme/theme.type'; -import {ColorKeys} from '@token/colors'; - -export const dragHandleItemStyle = (theme: Theme, hasDragHandle: boolean, backgroundColor: ColorKeys) => - css({ - display: 'flex', - justifyContent: 'space-between', - padding: hasDragHandle ? '0.5rem 1rem 0.5rem 0.5rem' : '0.5rem 1rem', - borderRadius: '0.75rem', - backgroundColor: theme.colors[backgroundColor], - }); - -export const dragHandlerStyle = css({ - display: 'flex', - gap: '0.25rem', - width: '100%', -}); diff --git a/client/src/components/Design/components/DragHandleItem/DragHandleItem.tsx b/client/src/components/Design/components/DragHandleItem/DragHandleItem.tsx deleted file mode 100644 index 4cca73a4f..000000000 --- a/client/src/components/Design/components/DragHandleItem/DragHandleItem.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import Icon from '@HDcomponents/Icon/Icon'; -import Flex from '@HDcomponents/Flex/Flex'; -import Text from '@HDcomponents/Text/Text'; -import IsFixedIcon from '@HDcomponents/IsFixedIcon/IsFixedIcon'; -import {useTheme} from '@theme/HDesignProvider'; - -import IconButton from '../IconButton/IconButton'; - -import {dragHandleItemStyle, dragHandlerStyle} from './DragHandleItem.style'; -import {DragHandleItemProps} from './DragHandleItem.type'; - -export const DragHandleItem = ({ - hasDragHandler = false, - backgroundColor = 'white', - isFixed = false, - prefix, - suffix, - ...htmlProps -}: DragHandleItemProps) => { - const {theme} = useTheme(); - - // TODO: (@toari) : 사람 수 많을 때 UX writing 처리 - return ( -
-
- {hasDragHandler && ( - - - - )} - - {prefix} - - {isFixed && } - {suffix} - - -
-
- ); -}; -export default DragHandleItem; diff --git a/client/src/components/Design/components/DragHandleItem/DragHandleItem.type.ts b/client/src/components/Design/components/DragHandleItem/DragHandleItem.type.ts deleted file mode 100644 index 8b62dd374..000000000 --- a/client/src/components/Design/components/DragHandleItem/DragHandleItem.type.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {Theme} from '@theme/theme.type'; -import {ColorKeys} from '@token/colors'; - -export interface DragHandleItemStyleProps { - theme?: Theme; - backgroundColor?: ColorKeys; -} - -export interface DragHandleItemCustomProps { - hasDragHandler?: boolean; - prefix?: string; - suffix?: string; - isFixed?: boolean; -} - -export type DragHandleItemOptionProps = DragHandleItemStyleProps & DragHandleItemCustomProps; - -export type DragHandleItemProps = React.ComponentProps<'div'> & DragHandleItemOptionProps; diff --git a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.stories.tsx b/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.stories.tsx deleted file mode 100644 index 1e215ca9d..000000000 --- a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.stories.tsx +++ /dev/null @@ -1,90 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import type {Meta, StoryObj} from '@storybook/react'; - -import DragHandleItemContainer from '@HDcomponents/DragHandleItemContainer/DragHandleItemContainer'; -import DragHandleItem from '@HDcomponents/DragHandleItem/DragHandleItem'; - -const meta = { - title: 'Components/DragHandleItemContainer', - component: DragHandleItemContainer, - tags: ['autodocs'], - parameters: { - // layout: 'centered', - }, - argTypes: { - topLeftText: { - description: '', - control: {type: 'text'}, - }, - topRightText: { - description: '', - control: {type: 'text'}, - }, - bottomLeftText: { - description: '', - control: {type: 'text'}, - }, - bottomRightText: { - description: '', - control: {type: 'text'}, - }, - backgroundColor: { - description: '', - control: { - type: 'select', - options: [ - 'white', - 'black', - 'primary', - 'onPrimary', - 'secondary', - 'onSecondary', - 'tertiary', - 'onTertiary', - 'gray', - 'darkGray', - 'grayContainer', - 'lightGrayContainer', - 'error', - 'errorContainer', - 'onErrorContainer', - 'warn', - 'complete', - ], - }, - }, - }, - args: { - topLeftText: '으아니차', - topRightText: '8명', - bottomLeftText: '총액', - bottomRightText: '214,000 원', - onTopLeftTextClick: () => alert('왼쪽 위'), - onTopRightTextClick: () => alert('오른쪽 위'), - onBottomLeftTextClick: () => alert('왼쪽 아래'), - onBottomRightTextClick: () => alert('오른쪽 아래'), - backgroundColor: 'white', - children: ( - <> - - - - ), - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Playground: Story = {}; diff --git a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.style.ts b/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.style.ts deleted file mode 100644 index db2ada615..000000000 --- a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.style.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {css} from '@emotion/react'; - -import {Theme} from '@theme/theme.type'; -import {ColorKeys} from '@token/colors'; - -export const containerStyle = (theme: Theme, backgroundColor: ColorKeys) => - css({ - display: 'flex', - flexDirection: 'column', - gap: '0.5rem', - padding: '0.5rem', - borderRadius: '0.75rem', - backgroundColor: theme.colors[backgroundColor], - }); - -export const topRightTextStyle = (theme: Theme) => - css({ - position: 'relative', - cursor: 'pointer', - - '&::after': { - position: 'absolute', - bottom: '0.125rem', - left: 0, - - width: '100%', - height: '0.03125rem', - - backgroundColor: theme.colors.gray, - - content: "''", - }, - }); diff --git a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.tsx b/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.tsx deleted file mode 100644 index a95bfb5de..000000000 --- a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/** @jsxImportSource @emotion/react */ -import {useTheme} from '@theme/HDesignProvider'; - -import Text from '../Text/Text'; -import Flex from '../Flex/Flex'; - -import {containerStyle, topRightTextStyle} from './DragHandleItemContainer.style'; -import {DragHandleItemContainerProps} from './DragHandleItemContainer.type'; - -export const DragHandleItemContainer: React.FC = ({ - topLeftText, - bottomLeftText, - topRightText, - bottomRightText, - onTopLeftTextClick, - onBottomLeftTextClick, - onTopRightTextClick, - onBottomRightTextClick, - backgroundColor = 'white', - children, - ...htmlProps -}: DragHandleItemContainerProps) => { - const {theme} = useTheme(); - - return ( -
- - - {topLeftText} - - - {topRightText} - - - {children} - - - {bottomLeftText} - - - {bottomRightText} - - -
- ); -}; -export default DragHandleItemContainer; diff --git a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.type.ts b/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.type.ts deleted file mode 100644 index 1bf1129e4..000000000 --- a/client/src/components/Design/components/DragHandleItemContainer/DragHandleItemContainer.type.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {ColorKeys} from '@token/colors'; - -export interface DragHandleItemContainerStyleProps { - backgroundColor?: ColorKeys; -} - -export interface DragHandleItemContainerCustomProps { - topLeftText?: string; - onTopLeftTextClick?: () => void; - bottomLeftText?: string; - onBottomLeftTextClick?: () => void; - topRightText?: string; - onTopRightTextClick?: () => void; - bottomRightText?: string; - onBottomRightTextClick?: () => void; -} - -export type DragHandleItemContainerOptionProps = DragHandleItemContainerStyleProps & DragHandleItemContainerCustomProps; - -export type DragHandleItemContainerProps = React.ComponentProps<'div'> & DragHandleItemContainerOptionProps; diff --git a/client/src/components/Design/components/Dropdown/MeatballBase.tsx b/client/src/components/Design/components/Dropdown/MeatballBase.tsx index 77b7c6c0f..5159e2b7c 100644 --- a/client/src/components/Design/components/Dropdown/MeatballBase.tsx +++ b/client/src/components/Design/components/Dropdown/MeatballBase.tsx @@ -20,7 +20,7 @@ const MeatballBase = ({isOpen, setIsOpen, dropdownRef, children}: MeatballBasePr return ( <> - setIsOpen(true)}> + setIsOpen(true)} aria-label="더보기"> {isOpen && ( diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts index 5217c8295..7fd184029 100644 --- a/client/src/components/Design/components/Icon/Icon.style.ts +++ b/client/src/components/Design/components/Icon/Icon.style.ts @@ -6,7 +6,6 @@ import {IconColor, IconStylePropsWithTheme, IconType} from './Icon.type'; const ICON_DEFAULT_COLOR: Record = { inputDelete: 'gray', - buljusa: 'gray', rightChevron: 'gray', search: 'gray', confirm: 'complete', diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx index 8594472ca..0a7913548 100644 --- a/client/src/components/Design/components/Icon/Icon.tsx +++ b/client/src/components/Design/components/Icon/Icon.tsx @@ -2,7 +2,6 @@ import Toss from '@assets/image/Toss_Symbol_Primary.png'; import InputDelete from '@assets/image/inputDelete.svg'; -import Buljusa from '@assets/image/buljusa.svg'; import Error from '@assets/image/error.svg'; import Confirm from '@assets/image/confirm.svg'; import Trash from '@assets/image/trash.svg'; @@ -20,9 +19,8 @@ import {useTheme} from '@theme/HDesignProvider'; import {iconStyle} from './Icon.style'; -const ICON = { +export const ICON = { inputDelete: , - buljusa: , rightChevron: , search: , error: , @@ -37,10 +35,11 @@ const ICON = { editPencil: , heundeut: , photoButton: , -}; +} as const; -export const Icon: React.FC = ({iconColor, iconType, ...htmlProps}: IconProps) => { +export const Icon = ({iconColor, iconType, ...htmlProps}: IconProps) => { const {theme} = useTheme(); + return (
{ICON[iconType]} diff --git a/client/src/components/Design/components/Icon/Icon.type.ts b/client/src/components/Design/components/Icon/Icon.type.ts index 1658868df..210d4e515 100644 --- a/client/src/components/Design/components/Icon/Icon.type.ts +++ b/client/src/components/Design/components/Icon/Icon.type.ts @@ -1,23 +1,9 @@ import {Theme} from '@theme/theme.type'; import {ColorKeys} from '@token/colors'; -export type IconType = - | 'inputDelete' - | 'buljusa' - | 'rightChevron' - | 'search' - | 'error' - | 'confirm' - | 'trash' - | 'trashMini' - | 'check' - | 'x' - | 'pencilMini' - | 'toss' - | 'meatballs' - | 'editPencil' - | 'heundeut' - | 'photoButton'; +import {ICON} from './Icon'; + +export type IconType = keyof typeof ICON; export type IconColor = ColorKeys; diff --git a/client/src/components/Design/components/IconButton/IconButton.tsx b/client/src/components/Design/components/IconButton/IconButton.tsx index 084e920d6..a30cecb43 100644 --- a/client/src/components/Design/components/IconButton/IconButton.tsx +++ b/client/src/components/Design/components/IconButton/IconButton.tsx @@ -11,6 +11,7 @@ export const IconButton: React.FC = forwardRef {children} diff --git a/client/src/components/Design/components/Input/Input.tsx b/client/src/components/Design/components/Input/Input.tsx index 81f0a025b..5e567a84b 100644 --- a/client/src/components/Design/components/Input/Input.tsx +++ b/client/src/components/Design/components/Input/Input.tsx @@ -70,12 +70,12 @@ export const Input: React.FC = forwardRef {onDelete && value && hasFocus && ( - + )} {inputType === 'search' && ( - + )} diff --git a/client/src/components/Design/components/ListButton/ListButton.tsx b/client/src/components/Design/components/ListButton/ListButton.tsx index 7249a4aa7..b0fff4fc8 100644 --- a/client/src/components/Design/components/ListButton/ListButton.tsx +++ b/client/src/components/Design/components/ListButton/ListButton.tsx @@ -15,6 +15,7 @@ export const ListButton: React.FC = forwardRef diff --git a/client/src/components/Design/index.tsx b/client/src/components/Design/index.tsx index 4440029b8..ca69f1a14 100644 --- a/client/src/components/Design/index.tsx +++ b/client/src/components/Design/index.tsx @@ -4,8 +4,6 @@ import {HDesignProvider, useTheme} from './theme/HDesignProvider'; import BankSelect from './components/BankSelect/BankSelect'; import BottomSheet from './components/BottomSheet/BottomSheet'; import Button from './components/Button/Button'; -import DragHandleItem from './components/DragHandleItem/DragHandleItem'; -import DragHandleItemContainer from './components/DragHandleItemContainer/DragHandleItemContainer'; import EditableItem from './components/EditableItem/EditableItem'; import ExpenseList from './components/ExpenseList/ExpenseList'; import FixedButton from './components/FixedButton/FixedButton'; @@ -35,8 +33,6 @@ export { BankSelect, BottomSheet, Button, - DragHandleItem, - DragHandleItemContainer, EditableItem, ExpenseList, FixedButton, diff --git a/client/src/hooks/useToast/useToast.test.tsx b/client/src/hooks/useToast/useToast.test.tsx index e8c1bdd3d..ac34d4150 100644 --- a/client/src/hooks/useToast/useToast.test.tsx +++ b/client/src/hooks/useToast/useToast.test.tsx @@ -1,11 +1,10 @@ -import {render, renderHook, screen, waitFor} from '@testing-library/react'; +import {render, screen, waitFor} from '@testing-library/react'; import {act} from 'react'; import ToastContainer from '@components/Toast/ToastContainer'; import {HDesignProvider} from '@HDesign/index'; -import {useToast} from './useToast'; import toast from './toast'; const TOAST_MESSAGE = '테스트 메세지에요.'; diff --git a/client/src/pages/EventPage/AdminPage/EventMember.tsx b/client/src/pages/EventPage/AdminPage/EventMember.tsx index cfd790837..e25acda45 100644 --- a/client/src/pages/EventPage/AdminPage/EventMember.tsx +++ b/client/src/pages/EventPage/AdminPage/EventMember.tsx @@ -83,6 +83,7 @@ const Member = ({member, changeMemberName, handleDeleteMember, toggleDepositStat variants="tertiary" css={{width: '23px', height: '23px', borderRadius: '0.375rem'}} onClick={() => handleDeleteMember(member.memberId)} + aria-label="인원 삭제" > diff --git a/client/src/pages/MainPage/Nav/Nav.tsx b/client/src/pages/MainPage/Nav/Nav.tsx index eaf8e13ed..3eb02e5ed 100644 --- a/client/src/pages/MainPage/Nav/Nav.tsx +++ b/client/src/pages/MainPage/Nav/Nav.tsx @@ -20,7 +20,7 @@ const Nav = ({trackStartCreateEvent}: NavProps) => {
- +