From c992a7a944a3469c04cad8c1255a21541cfdf525 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 11:28:05 +0900 Subject: [PATCH 01/10] Fix select componenet --- packages/components/package.json | 3 +- .../src/__tests__/index.browser.test.ts | 3 +- .../src/components/Select/Select.stories.tsx | 42 ++++++-- .../__snapshots__/index.browser.test.tsx.snap | 2 +- .../Select/__tests__/index.browser.test.tsx | 14 ++- .../src/components/Select/index.tsx | 102 ++++++++++++------ packages/components/src/contexts/useSelect.ts | 21 ++++ packages/components/src/index.ts | 3 +- packages/components/src/types/select.ts | 4 + 9 files changed, 146 insertions(+), 48 deletions(-) create mode 100644 packages/components/src/contexts/useSelect.ts create mode 100644 packages/components/src/types/select.ts diff --git a/packages/components/package.json b/packages/components/package.json index 6c8f5ee0..6e4e1852 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -22,7 +22,8 @@ "lint": "eslint", "build": "tsc && vite build", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "package": "pnpm pack --pack-destination \"../../dist\"" }, "publishConfig": { "access": "public" diff --git a/packages/components/src/__tests__/index.browser.test.ts b/packages/components/src/__tests__/index.browser.test.ts index bb4d3eb7..8ffaca2b 100644 --- a/packages/components/src/__tests__/index.browser.test.ts +++ b/packages/components/src/__tests__/index.browser.test.ts @@ -14,8 +14,9 @@ describe('export', () => { StepperDecreaseButton: expect.any(Function), StepperIncreaseButton: expect.any(Function), StepperInput: expect.any(Function), - useSelect: expect.any(Function), useStepper: expect.any(Function), + SelectContext: expect.any(Object), + useSelect: expect.any(Function), }) }) }) diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx index fd8dfa1a..59c75b09 100644 --- a/packages/components/src/components/Select/Select.stories.tsx +++ b/packages/components/src/components/Select/Select.stories.tsx @@ -43,6 +43,11 @@ export const ControlledCheckboxStory: Story = { render: () => , } +export const SelectWithOptionsStory: Story = { + args: {}, + render: () => , +} + export default meta function DefaultComponent( @@ -50,8 +55,11 @@ function DefaultComponent( ) { return ( ) } + +function SelectWithOptions() { + return ( + <> + + + ) +} diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index bd4dae2f..1825c985 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Select > should render 1`] = `
`; + +exports[`Select > should render with x and y properties 1`] = ` +
+
+ +
+
+`; diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx index a0fd5fbd..7992e739 100644 --- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx +++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx @@ -383,4 +383,17 @@ describe('Select', () => { const option1 = container.querySelector('[data-value="Option 1"]') expect(option1).toBeInTheDocument() }) + + it('should render with x and y properties', () => { + const { container } = render( + , + ) + expect(container).toMatchSnapshot() + }) }) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index 466b7d45..1d1d0ba3 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -205,11 +205,15 @@ export function SelectTrigger({ interface SelectContainerProps extends ComponentProps<'div'> { showConfirmButton?: boolean confirmButtonText?: string + x?: number + y?: number } export function SelectContainer({ children, showConfirmButton, confirmButtonText = '완료', + x = 0, + y = 0, ...props }: SelectContainerProps) { const { open, setOpen, type, ref } = useSelect() @@ -223,14 +227,18 @@ export function SelectContainer({ // 요소가 움직일 때마다(스크롤, 리사이즈 등) 위치를 갱신하도록 이벤트를 등록합니다. const updatePosition = () => { - const { height, x, y } = combobox.getBoundingClientRect() + const { + height, + x: comboboxX, + y: comboboxY, + } = combobox.getBoundingClientRect() - if (el.offsetHeight + y > window.innerHeight) - el.style.bottom = `${window.innerHeight - y + 10}px` - else el.style.top = `${y + height + 10}px` - if (el.offsetWidth + x > window.innerWidth) - el.style.left = `${x - el.offsetWidth + combobox.offsetWidth}px` - else el.style.left = `${x}px` + if (el.offsetHeight + comboboxY + y > window.innerHeight) + el.style.bottom = `${window.innerHeight - comboboxY + 10}px` + else el.style.top = `${comboboxY + height + 10 + y}px` + if (el.offsetWidth + comboboxX + x > window.innerWidth) + el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px` + else el.style.left = `${comboboxX + x}px` } // 최초 위치 설정 From 269f678b37a8c710d24e8c125aa82961c6ee2955 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 11:45:49 +0900 Subject: [PATCH 04/10] Fix select componenet --- .../Select/__tests__/index.browser.test.tsx | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx index 7992e739..3c57be4e 100644 --- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx +++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx @@ -374,7 +374,12 @@ describe('Select', () => { it('should render with options properties', () => { const { container } = render( - Select , ) @@ -384,6 +389,27 @@ describe('Select', () => { expect(option1).toBeInTheDocument() }) + it('should call onChange function when it is provided to SelectOption', () => { + const onValueChange = vi.fn() + const { container } = render( + , + ) + const selectToggle = container.querySelector('[aria-label="Select toggle"]') + fireEvent.click(selectToggle!) + const option2 = container.querySelector('[data-value="Option 2"]') + expect(option2).toBeInTheDocument() + fireEvent.click(option2!) + expect(onValueChange).toHaveBeenCalledWith('Option 2') + }) + it('should render with x and y properties', () => { const { container } = render( {children} + , + ) + expect(container).toMatchSnapshot() + }) }) From 147a4876a86a3b6d7093e563aef6db5fcb4612f7 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 11:48:22 +0900 Subject: [PATCH 05/10] Fix select componenet --- .../__snapshots__/index.browser.test.tsx.snap | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index 39b22e93..43900477 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -25,6 +25,35 @@ exports[`Select > should render 1`] = ` `; +exports[`Select > should render with overflow screen 1`] = ` +
+
+
+ +
+
+
+`; + exports[`Select > should render with x and y properties 1`] = `
Date: Thu, 21 Aug 2025 12:01:33 +0900 Subject: [PATCH 06/10] Fix select componenet --- .../src/components/Select/Select.stories.tsx | 13 +++++++-- .../__snapshots__/index.browser.test.tsx.snap | 28 ++++++++----------- .../Select/__tests__/index.browser.test.tsx | 12 ++++++-- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx index dcb72fd1..3d65396f 100644 --- a/packages/components/src/components/Select/Select.stories.tsx +++ b/packages/components/src/components/Select/Select.stories.tsx @@ -54,9 +54,18 @@ function DefaultComponent( props: Omit, 'children'>, ) { return ( - {}} + > Select2 - + Option 1 diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index 43900477..8b87ab29 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -28,28 +28,24 @@ exports[`Select > should render 1`] = ` exports[`Select > should render with overflow screen 1`] = `
- +
+
`; diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx index 3c57be4e..d2b4d775 100644 --- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx +++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx @@ -425,9 +425,15 @@ describe('Select', () => { it('should render with overflow screen', () => { const { container } = render( - - - , + , ) expect(container).toMatchSnapshot() }) From a3199ff2eb7e39a9a6dba579b97267dd183674a5 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 12:12:39 +0900 Subject: [PATCH 07/10] Fix select componenet --- .../__snapshots__/index.browser.test.tsx.snap | 50 +++++++++++++++++++ .../Select/__tests__/index.browser.test.tsx | 26 ++++++++++ 2 files changed, 76 insertions(+) diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index 8b87ab29..4f9c60a8 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -50,6 +50,56 @@ exports[`Select > should render with overflow screen 1`] = `
`; +exports[`Select > should render with overflow screen 2`] = ` +
+
+ +
+
+`; + +exports[`Select > should render with overflow screen 3`] = ` +
+
+ +
+
+`; + exports[`Select > should render with x and y properties 1`] = `
{ ) expect(container).toMatchSnapshot() }) + it('should render with overflow screen', () => { + const { container } = render( + , + ) + expect(container).toMatchSnapshot() + }) + it('should render with overflow screen', () => { + const { container } = render( + , + ) + expect(container).toMatchSnapshot() + }) }) From e81cdafb2cd2f0e99e67a2176ef0b5cac53cafc2 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 14:40:31 +0900 Subject: [PATCH 08/10] Fix select componenet --- .../src/components/Select/Select.stories.tsx | 69 +++++++------ .../__snapshots__/index.browser.test.tsx.snap | 97 +++++++++++-------- .../Select/__tests__/index.browser.test.tsx | 56 ++++------- .../src/components/Select/index.tsx | 1 + 4 files changed, 108 insertions(+), 115 deletions(-) diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx index 3d65396f..a84e5a15 100644 --- a/packages/components/src/components/Select/Select.stories.tsx +++ b/packages/components/src/components/Select/Select.stories.tsx @@ -54,42 +54,39 @@ function DefaultComponent( props: Omit, 'children'>, ) { return ( - - - - - Option 5 - - - - - Option 6 - Option 7 - - - - + + + + + + Option 5 + + + + + Option 6 + Option 7 + + + + + ) } diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap index 4f9c60a8..af8b0ff9 100644 --- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap +++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap @@ -28,10 +28,10 @@ exports[`Select > should render 1`] = ` exports[`Select > should render with overflow screen 1`] = `
-
-
-`; - -exports[`Select > should render with overflow screen 2`] = ` -
-
- -
-
-`; - -exports[`Select > should render with overflow screen 3`] = ` -
-
- +
`; diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx index b6a52206..0c63a450 100644 --- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx +++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx @@ -424,43 +424,25 @@ describe('Select', () => { }) it('should render with overflow screen', () => { - const { container } = render( - , - ) - expect(container).toMatchSnapshot() - }) - it('should render with overflow screen', () => { - const { container } = render( - , - ) - expect(container).toMatchSnapshot() - }) - it('should render with overflow screen', () => { - const { container } = render( - , - ) + const { container, rerender } = render() + + // open selectContainer + const selectToggle = container.querySelector('[aria-label="Select toggle"]') + fireEvent.click(selectToggle!) + + const selectContainer = container.querySelector( + '[aria-label="Select container"]', + )! as HTMLDivElement + + // happy-dom defualt viewport 1024x768 + // offsetHeight > 768px + vi.spyOn(selectContainer, 'offsetHeight', 'get').mockReturnValue(800) + // offsetWidth > 1024px + vi.spyOn(selectContainer, 'offsetWidth', 'get').mockReturnValue(1100) + + // rerender + rerender() + expect(container).toMatchSnapshot() }) }) diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx index 1d1d0ba3..d1391900 100644 --- a/packages/components/src/components/Select/index.tsx +++ b/packages/components/src/components/Select/index.tsx @@ -236,6 +236,7 @@ export function SelectContainer({ if (el.offsetHeight + comboboxY + y > window.innerHeight) el.style.bottom = `${window.innerHeight - comboboxY + 10}px` else el.style.top = `${comboboxY + height + 10 + y}px` + if (el.offsetWidth + comboboxX + x > window.innerWidth) el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px` else el.style.left = `${comboboxX + x}px` From 4d39b863fc788f35c981d0de33cbf00ed55939c8 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 14:45:11 +0900 Subject: [PATCH 09/10] Fix select componenet --- .../src/components/Select/Select.stories.tsx | 60 +++++++++---------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx index a84e5a15..b912030a 100644 --- a/packages/components/src/components/Select/Select.stories.tsx +++ b/packages/components/src/components/Select/Select.stories.tsx @@ -54,39 +54,33 @@ function DefaultComponent( props: Omit, 'children'>, ) { return ( - - - - - - Option 5 - - - - - Option 6 - Option 7 - - - - - + + + + + Option 5 + + + + + Option 6 + Option 7 + + + + ) } From f7a1d7fa9c63e335e2dd9d5bc1ad5ebae8511522 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 21 Aug 2025 14:56:27 +0900 Subject: [PATCH 10/10] Fix select componenet --- packages/components/src/contexts/useSelect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/contexts/useSelect.ts b/packages/components/src/contexts/useSelect.ts index bab5cffd..da05b8aa 100644 --- a/packages/components/src/contexts/useSelect.ts +++ b/packages/components/src/contexts/useSelect.ts @@ -1,3 +1,4 @@ +'use client' import { createContext, useContext } from 'react' type SelectType = 'default' | 'radio' | 'checkbox'