diff --git a/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx b/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx index 91d63eb5..566b0730 100644 --- a/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx +++ b/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx @@ -2,10 +2,10 @@ import styled from 'styled-components'; import CloseSquareIcon from '@/assets/svg/close_square_icon_light.svg'; import WidthPetIcon from '@/assets/webp/with_pet_icon.webp'; -import useBoolean from '@/hooks/@common/useBoolean'; +import { useFoodSelectionGuideBanner } from '@/hooks/food/useFoodSelectionGuideBanner'; const FoodSelectionGuideBanner = () => { - const [isOpen, , closeBanner] = useBoolean(true); + const { isOpen, closeBanner } = useFoodSelectionGuideBanner(); if (!isOpen) return null; diff --git a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.stories.tsx b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.stories.tsx index 50158361..aa01689d 100644 --- a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.stories.tsx +++ b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.stories.tsx @@ -1,7 +1,6 @@ import { expect } from '@storybook/jest'; import type { Meta, StoryObj } from '@storybook/react'; -import { screen, waitFor, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, userEvent, waitFor, within } from '@storybook/testing-library'; import React from 'react'; import { reactRouterParameters } from 'storybook-addon-react-router-v6'; @@ -48,8 +47,8 @@ export const InvalidPetName: Story = { }); const petNameInput = canvas.getByLabelText('이름 입력'); - await userEvent.type(petNameInput, '{backspace}{backspace}', { delay: 100 }); - await userEvent.type(petNameInput, '@@', { delay: 100 }); + await userEvent.type(petNameInput, '{backspace}{backspace}'); + await userEvent.type(petNameInput, '@@'); const nameErrorMessage = canvas.getByText( '아이의 이름은 1~10글자 사이의 한글, 영어, 숫자만 입력 가능합니다.', @@ -71,8 +70,8 @@ export const InvalidWeight: Story = { }); const petWeightInput = canvas.getByLabelText('몸무게 입력'); - await userEvent.type(petWeightInput, '{backspace}', { delay: 100 }); - await userEvent.type(petWeightInput, '200', { delay: 100 }); + await userEvent.type(petWeightInput, '{backspace}'); + await userEvent.type(petWeightInput, '200'); const weightErrorMessage = canvas.getByText( '몸무게는 0kg초과, 100kg이하 소수점 첫째짜리까지 입력이 가능합니다.', @@ -94,12 +93,12 @@ export const ValidForm: Story = { }); const petNameInput = canvas.getByLabelText('이름 입력'); - await userEvent.type(petNameInput, '{backspace}{backspace}', { delay: 100 }); - await userEvent.type(petNameInput, '멍멍이', { delay: 100 }); + await userEvent.type(petNameInput, '{backspace}{backspace}'); + await userEvent.type(petNameInput, '멍멍이'); const petWeightInput = canvas.getByLabelText('몸무게 입력'); - await userEvent.type(petWeightInput, '{backspace}{backspace}{backspace}', { delay: 100 }); - await userEvent.type(petWeightInput, '35.5', { delay: 100 }); + await userEvent.type(petWeightInput, '{backspace}{backspace}{backspace}'); + await userEvent.type(petWeightInput, '35.5'); const editButton = canvas.getByText('수정'); @@ -119,12 +118,12 @@ export const InvalidForm: Story = { }); const petNameInput = canvas.getByLabelText('이름 입력'); - await userEvent.type(petNameInput, '{backspace}{backspace}', { delay: 100 }); - await userEvent.type(petNameInput, '멍멍이🐾', { delay: 100 }); + await userEvent.type(petNameInput, '{backspace}{backspace}'); + await userEvent.type(petNameInput, '멍멍이🐾'); const petWeightInput = canvas.getByLabelText('몸무게 입력'); - await userEvent.type(petWeightInput, '{backspace}{backspace}{backspace}', { delay: 100 }); - await userEvent.type(petWeightInput, '107', { delay: 100 }); + await userEvent.type(petWeightInput, '{backspace}{backspace}{backspace}'); + await userEvent.type(petWeightInput, '107'); const editButton = canvas.getByText('수정'); diff --git a/frontend/src/components/Review/ReviewForm/ReviewForm.stories.tsx b/frontend/src/components/Review/ReviewForm/ReviewForm.stories.tsx index b702a9fb..bf1725e0 100644 --- a/frontend/src/components/Review/ReviewForm/ReviewForm.stories.tsx +++ b/frontend/src/components/Review/ReviewForm/ReviewForm.stories.tsx @@ -1,7 +1,6 @@ import { expect } from '@storybook/jest'; import type { Meta, StoryObj } from '@storybook/react'; -import { screen, waitFor, within } from '@testing-library/dom'; -import userEvent from '@testing-library/user-event'; +import { screen, userEvent, waitFor, within } from '@storybook/testing-library'; import React from 'react'; import { COMMENT_LIMIT } from '../../../constants/review'; @@ -56,7 +55,7 @@ export const ValidForm: Story = { const commentTextarea = canvas.getByRole('textbox'); const validText = '저희집 에디가 너무 잘먹어요^^'; - await userEvent.type(commentTextarea, validText, { delay: 100 }); + await userEvent.type(commentTextarea, validText); const completeButton = canvas.getByText('작성 완료'); @@ -88,7 +87,7 @@ export const InvalidForm: Story = { const commentTextarea = canvas.getByRole('textbox'); const longText = new Array(COMMENT_LIMIT + 1).fill(1).join(''); - await userEvent.type(commentTextarea, longText, { delay: 5 }); + await userEvent.type(commentTextarea, longText); const completeButton = canvas.getByText('작성 완료'); @@ -121,7 +120,7 @@ export const SingleSelectionTestForTastePreference: Story = { const tastePreferences = canvas.getAllByTestId('tastePreference'); const checkedTastePreference = tastePreferences[1]; - await userEvent.click(checkedTastePreference, { delay: 100 }); + await userEvent.click(checkedTastePreference); expect(checkedTastePreference).toHaveAttribute('aria-checked', 'true'); @@ -158,7 +157,7 @@ export const SingleSelectionTestForStoolCondition: Story = { const stoolConditions = canvas.getAllByTestId('stoolCondition'); const checkedStoolCondition = stoolConditions[1]; - await userEvent.click(checkedStoolCondition, { delay: 100 }); + await userEvent.click(checkedStoolCondition); expect(checkedStoolCondition).toHaveAttribute('aria-checked', 'true'); @@ -194,8 +193,8 @@ export const MultipleSelectionTestForAdverseReaction: Story = { const adverseReactions = canvas.getAllByTestId('adverseReaction'); - await userEvent.click(adverseReactions[1], { delay: 100 }); - await userEvent.click(adverseReactions[2], { delay: 100 }); + await userEvent.click(adverseReactions[1]); + await userEvent.click(adverseReactions[2]); const checkedAdverseReactions = [adverseReactions[1], adverseReactions[2]]; @@ -236,8 +235,8 @@ export const NoneButtonDeselectOthersTestForAdverseReaction: Story = { const adverseReactions = canvas.getAllByTestId('adverseReaction'); const noneAdverseReaction = adverseReactions[0]; - await userEvent.click(adverseReactions[1], { delay: 100 }); - await userEvent.click(noneAdverseReaction, { delay: 100 }); + await userEvent.click(adverseReactions[1]); + await userEvent.click(noneAdverseReaction); adverseReactions.forEach(adverseReaction => { if (noneAdverseReaction === adverseReaction) { diff --git a/frontend/src/hooks/food/useFoodSelectionGuideBanner.ts b/frontend/src/hooks/food/useFoodSelectionGuideBanner.ts new file mode 100644 index 00000000..71a33076 --- /dev/null +++ b/frontend/src/hooks/food/useFoodSelectionGuideBanner.ts @@ -0,0 +1,14 @@ +import useBoolean from '../@common/useBoolean'; + +let isOpenGlobally = true; + +export const useFoodSelectionGuideBanner = () => { + const [isOpen, , close] = useBoolean(isOpenGlobally); + + const closeBanner = () => { + close(); + isOpenGlobally = false; + }; + + return { isOpen, closeBanner }; +};