From cdaa039e32e9fb7d7c8e1d1c69867c3ce32d8114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=9A=B0=EC=B0=AC?= Date: Thu, 15 Feb 2024 23:17:21 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20Toggle=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=AC=EA=B5=AC=EC=B6=95=20=EB=B0=8F=20?= =?UTF-8?q?=EC=84=9C=EB=B9=84=EC=8A=A4=20=EC=BD=94=EB=93=9C=20=EB=B0=98?= =?UTF-8?q?=EC=98=81,=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=8B=9C=EC=8A=A4?= =?UTF-8?q?=ED=85=9C=20v1.3.10=20=EB=B0=B0=ED=8F=AC=20(#793)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: Toggle 컴포넌트 재구축 및 npm v1.3.9 배포 * refactor: toggle 변경 시 발생시킬 이벤트 코드 추가 * fix: cyprses CI 버전문제 개선을 위한 package.json 수정 * chore: Toggle style Radius 추가 * build: 디자인시스템 npm v1.3.10 배포 * chore: 불필요한 콘솔 제거 --- frontend-monorepo/package.json | 2 +- .../hang-log-design-system/package.json | 2 +- .../src/components/NewToggle/Item.tsx | 23 ++++++ .../src/components/NewToggle/List.tsx | 48 +++++++++++ .../src/components/NewToggle/NewToggle.tsx | 49 +++++++++++ .../src/components/NewToggle/Toggle.style.ts | 45 +++++++++++ .../hang-log-design-system/src/index.tsx | 2 + .../src/stories/NewToggle.stories.tsx | 49 +++++++++++ .../packages/hanglog-service/package.json | 2 +- .../public/mockServiceWorker.js | 2 +- .../trips/TripsItemList/TripsItemList.tsx | 81 ++++++++++--------- .../src/pages/MyTripsPage/MyTripsPage.tsx | 17 +--- .../stories/trips/TripsItemList.stories.tsx | 6 +- frontend-monorepo/yarn.lock | 8 +- 14 files changed, 268 insertions(+), 68 deletions(-) create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Toggle.style.ts create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx diff --git a/frontend-monorepo/package.json b/frontend-monorepo/package.json index 5148ecdde..22d489f59 100644 --- a/frontend-monorepo/package.json +++ b/frontend-monorepo/package.json @@ -38,7 +38,7 @@ "eslint-config-prettier": "^8.8.0", "eslint-config-standard-with-typescript": "^43.0.1", "eslint-plugin-import": "^2.29.1", - "eslint-plugin-n": "^16.6.2", + "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-prettier": "4.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", diff --git a/frontend-monorepo/packages/hang-log-design-system/package.json b/frontend-monorepo/packages/hang-log-design-system/package.json index 4c3bebf4c..d82825bba 100644 --- a/frontend-monorepo/packages/hang-log-design-system/package.json +++ b/frontend-monorepo/packages/hang-log-design-system/package.json @@ -1,6 +1,6 @@ { "name": "hang-log-design-system", - "version": "1.3.8", + "version": "1.3.10", "description": "행록 디자인 시스템", "homepage": "https://github.com/hang-log-design-system/design-system", "main": "dist/index.js", diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx new file mode 100644 index 000000000..715a745ea --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx @@ -0,0 +1,23 @@ +import type { ForwardedRef, PropsWithChildren } from 'react'; +import { useContext, forwardRef } from 'react'; +import { NewToggleContext } from '@components/NewToggle/NewToggle'; + +export interface ItemProps extends PropsWithChildren { + toggleKey: number | string; +} + +const ToggleItem = ({ children, toggleKey }: ItemProps, ref?: ForwardedRef) => { + const context = useContext(NewToggleContext); + + if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.'); + + const { selectKey } = context; + + return ( +
+ {children} +
+ ); +}; + +export default forwardRef(ToggleItem); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx new file mode 100644 index 000000000..ab8f8b266 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx @@ -0,0 +1,48 @@ +import type { ComponentPropsWithRef, ForwardedRef, KeyboardEvent } from 'react'; +import { useContext, forwardRef } from 'react'; + +import { getListStyling } from '@components/NewToggle/Toggle.style'; +import { NewToggleContext } from '@components/NewToggle/NewToggle'; + +export interface ToggleProps extends ComponentPropsWithRef<'li'> { + toggleKey: number | string; + text: string; +} + +const List = ( + { toggleKey, text, ...attributes }: ToggleProps, + ref?: ForwardedRef +) => { + const context = useContext(NewToggleContext); + + if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.'); + + const { selectKey, handleSelect } = context; + + const handleEnterKeyPress = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + handleSelect(toggleKey); + } + }; + + return ( +
  • handleSelect(toggleKey)} + onKeyDown={handleEnterKeyPress} + {...attributes} + > + {text} +
    • + ); +}; + +export default forwardRef(List); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx new file mode 100644 index 000000000..26fc6cdd5 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx @@ -0,0 +1,49 @@ +import type { PropsWithChildren } from 'react'; +import { useCallback, useState, useMemo, createContext } from 'react'; +import List from '@components/NewToggle/List'; +import Item from '@components/NewToggle/Item'; +import { flushSync } from 'react-dom'; +import { getToggleWrapperStyling } from '@components/NewToggle/Toggle.style'; + +interface ToggleContextType { + selectKey: number | string; + handleSelect: (selectedId: number | string) => void; +} + +export interface NewToggleProps extends PropsWithChildren { + initialSelect?: number | string; + additinalFunc?: (key: number | string) => void; +} + +export const NewToggleContext = createContext(null); + +const NewToggle = ({ initialSelect = 0, additinalFunc, children }: NewToggleProps) => { + const [selected, setSelected] = useState(initialSelect); + + const handleSelect = useCallback( + (select: number | string) => { + flushSync(() => setSelected(select)); + if (additinalFunc) additinalFunc(select); + }, + [additinalFunc] + ); + + const context = useMemo( + () => ({ + selectKey: selected, + handleSelect, + }), + [handleSelect, selected] + ); + + return ( + +
    {children}
    +     + ); +}; + +NewToggle.List = List; +NewToggle.Item = Item; + +export default NewToggle; diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Toggle.style.ts b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Toggle.style.ts new file mode 100644 index 000000000..4d2a794b7 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Toggle.style.ts @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; + +import { Theme } from '@styles/Theme'; + +export const getListStyling = (isSelected: boolean) => + css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + padding: '8px 12px', + border: `1px solid ${isSelected ? Theme.color.blue700 : Theme.color.gray200}`, + + backgroundColor: isSelected ? Theme.color.blue100 : Theme.color.white, + + fontSize: Theme.text.small.fontSize, + lineHeight: Theme.text.small.lineHeight, + color: isSelected ? Theme.color.blue700 : Theme.color.gray600, + + transition: `all .2s ease-in`, + + cursor: 'pointer', + + '&:hover': { + color: isSelected ? Theme.color.blue700 : Theme.color.gray700, + backgroundColor: isSelected ? Theme.color.blue200 : Theme.color.gray100, + }, + }); + +export const getToggleWrapperStyling = css({ + width: 'fit-content', + borderRadius: Theme.borderRadius.small, + + overflow: 'hidden', + + '& :first-of-type': { + borderTopLeftRadius: Theme.borderRadius.small, + borderBottomLeftRadius: Theme.borderRadius.small, + }, + + '& :last-of-type': { + borderTopRightRadius: Theme.borderRadius.small, + borderBottomRightRadius: Theme.borderRadius.small, + }, +}); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/index.tsx b/frontend-monorepo/packages/hang-log-design-system/src/index.tsx index e426fa87d..a5ee7cf0b 100644 --- a/frontend-monorepo/packages/hang-log-design-system/src/index.tsx +++ b/frontend-monorepo/packages/hang-log-design-system/src/index.tsx @@ -43,6 +43,7 @@ import Textarea from '@components/Textarea/Textarea'; import Toast from '@components/Toast/Toast'; import Toggle from '@components/Toggle/Toggle'; import ToggleGroup from '@components/ToggleGroup/ToggleGroup'; +import NewToggle from '@components/NewToggle/NewToggle'; import { Theme } from '@styles/Theme'; @@ -56,6 +57,7 @@ export { Badge, Box, SwitchToggle, + NewToggle, Button, Calendar, Carousel, diff --git a/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx b/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx new file mode 100644 index 000000000..66b2a3676 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx @@ -0,0 +1,49 @@ +import { containerStyle } from '@stories/styles'; +import type { Meta, StoryObj } from '@storybook/react'; + +import NewToggle from '@components/NewToggle/NewToggle'; + +const meta = { + title: 'NewToggle', + component: NewToggle, + args: { + initialSelect: 'toggle1', + }, + argTypes: { + initialSelect: { control: 'string' }, + }, + decorators: [ + (Story) => ( +
      + +
    + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: ({ ...args }) => ( + { + // eslint-disable-next-line no-console + console.log(id); + }} + > +
    NewToggle
    +
    + + + +
    +
    + 나는토글1 + 나는토글2 + 나는토글3 +
    +     + ), +}; diff --git a/frontend-monorepo/packages/hanglog-service/package.json b/frontend-monorepo/packages/hanglog-service/package.json index b9d7c4dbb..68e168d75 100644 --- a/frontend-monorepo/packages/hanglog-service/package.json +++ b/frontend-monorepo/packages/hanglog-service/package.json @@ -44,7 +44,7 @@ "axios": "^1.4.0", "browser-image-compression": "^2.0.2", "dotenv": "^16.3.1", - "hang-log-design-system": "^1.3.8", + "hang-log-design-system": "^1.3.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", diff --git a/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js b/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js index 51d85eeeb..36a992745 100644 --- a/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js +++ b/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js @@ -2,7 +2,7 @@ /* tslint:disable */ /** - * Mock Service Worker (1.3.2). + * Mock Service Worker (1.2.3). * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production. diff --git a/frontend-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx b/frontend-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx index 60de53d52..034be236d 100644 --- a/frontend-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx +++ b/frontend-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { Box, Button, Flex, Heading, Text, Toggle, ToggleGroup } from 'hang-log-design-system'; +import { Box, Button, Flex, Heading, Text, NewToggle as Toggle } from 'hang-log-design-system'; import TripsItem from '@components/trips/TripsItem/TripsItem'; import { @@ -19,54 +19,57 @@ import type { TripsData } from '@type/trips'; import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order'; import { PATH } from '@constants/path'; +import { sortByNewest, sortByStartDate } from '@utils/sort'; +import { queryClient } from '@/hooks/api/queryClient'; -interface TripsItemListProps { - trips: TripsData[]; - order: string | number; - changeSelect: (selectedId: string | number) => void; -} +const TripsItemList = () => { + const tripsData = queryClient.getQueryData(['trips']) as TripsData[]; + + const handleSort = (select: number | string) => { + const sortedTrips = + select === ORDER_BY_DATE + ? tripsData?.slice().sort(sortByStartDate) + : tripsData?.slice().sort(sortByNewest); + + queryClient.setQueryData(['trips'], sortedTrips); + }; -const TripsItemList = ({ trips, order, changeSelect }: TripsItemListProps) => { return (
    - - - + + - - - - - {trips.map((trip, index) => { - return ( - - ); - })} - + + + {tripsData.map((trip, index) => { + return ( + + ); + })} + +
    ); }; diff --git a/frontend-monorepo/packages/hanglog-service/src/pages/MyTripsPage/MyTripsPage.tsx b/frontend-monorepo/packages/hanglog-service/src/pages/MyTripsPage/MyTripsPage.tsx index 13b3ad625..9f4c1f2cf 100644 --- a/frontend-monorepo/packages/hanglog-service/src/pages/MyTripsPage/MyTripsPage.tsx +++ b/frontend-monorepo/packages/hanglog-service/src/pages/MyTripsPage/MyTripsPage.tsx @@ -17,26 +17,11 @@ import { PATH } from '@constants/path'; const TripsPage = () => { const navigate = useNavigate(); const { tripsData } = useTripsQuery(); - const { selected: sortSelected, handleSelectClick: handleSortSelectClick } = - useSelect(ORDER_BY_REGISTRATION); - - const sortedTrips = - sortSelected === ORDER_BY_DATE - ? tripsData?.slice().sort(sortByStartDate) - : tripsData?.slice().sort(sortByNewest); return ( <> - {sortedTrips.length > 0 ? ( - - ) : ( - - )} + {tripsData.length > 0 ? : } navigate(PATH.CREATE_TRIP)} /> ); diff --git a/frontend-monorepo/packages/hanglog-service/src/stories/trips/TripsItemList.stories.tsx b/frontend-monorepo/packages/hanglog-service/src/stories/trips/TripsItemList.stories.tsx index c3a2e9fec..f8d23b809 100644 --- a/frontend-monorepo/packages/hanglog-service/src/stories/trips/TripsItemList.stories.tsx +++ b/frontend-monorepo/packages/hanglog-service/src/stories/trips/TripsItemList.stories.tsx @@ -2,8 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import TripsItemList from '@components/trips/TripsItemList/TripsItemList'; -import { sortByStartDate } from '@utils/sort'; - import { trips } from '@mocks/data/myTrips'; const meta = { @@ -11,8 +9,6 @@ const meta = { component: TripsItemList, args: { trips, - order: '등록순', - changeSelect: () => {}, }, } satisfies Meta; @@ -23,6 +19,6 @@ export const SortByRegister: Story = {}; export const SortByDate: Story = { render: ({ ...args }) => { - return ; + return ; }, }; diff --git a/frontend-monorepo/yarn.lock b/frontend-monorepo/yarn.lock index dc4905b84..818dba8f4 100644 --- a/frontend-monorepo/yarn.lock +++ b/frontend-monorepo/yarn.lock @@ -9840,7 +9840,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-n@npm:^15.0.0 || ^16.0.0 , eslint-plugin-n@npm:^16.6.2": +"eslint-plugin-n@npm:^15.0.0 || ^16.0.0 ": version: 16.6.2 resolution: "eslint-plugin-n@npm:16.6.2" dependencies: @@ -10720,7 +10720,7 @@ __metadata: eslint-config-prettier: "npm:^8.8.0" eslint-config-standard-with-typescript: "npm:^43.0.1" eslint-plugin-import: "npm:^2.29.1" - eslint-plugin-n: "npm:^16.6.2" + eslint-plugin-n: "npm:^15.0.0 || ^16.0.0 " eslint-plugin-prettier: "npm:4.0.0" eslint-plugin-promise: "npm:^6.1.1" eslint-plugin-react: "npm:^7.33.2" @@ -11280,7 +11280,7 @@ __metadata: languageName: node linkType: hard -"hang-log-design-system@npm:^1.3.8, hang-log-design-system@workspace:packages/hang-log-design-system": +"hang-log-design-system@npm:^1.3.8, hang-log-design-system@npm:^1.3.9, hang-log-design-system@workspace:packages/hang-log-design-system": version: 0.0.0-use.local resolution: "hang-log-design-system@workspace:packages/hang-log-design-system" dependencies: @@ -11440,7 +11440,7 @@ __metadata: eslint-plugin-react-hooks: "npm:^4.6.0" eslint-plugin-storybook: "npm:^0.6.13" fork-ts-checker-webpack-plugin: "npm:^9.0.0" - hang-log-design-system: "npm:^1.3.8" + hang-log-design-system: "npm:^1.3.9" html-webpack-plugin: "npm:^5.5.3" msw: "npm:^1.2.3" msw-storybook-addon: "npm:^1.8.0"