From 9cbc55ce9bb733bcde31125cc5aa547f3886fe0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=ED=98=9C=EB=A0=B9?= Date: Sun, 15 Oct 2023 17:47:49 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20'=EC=82=AC=EB=A3=8C=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EB=8F=84=EC=9B=80=EB=A7=90=20=EB=B0=B0=EB=84=88'?= =?UTF-8?q?=EB=A5=BC=20=EB=8B=AB=EC=9C=BC=EB=A9=B4=20=EB=A6=AC=EC=95=A1?= =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=8B=9C=20=EC=95=88=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20(#486)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FoodSelectionGuideBanner.tsx | 4 +-- .../PetProfileEditionForm.stories.tsx | 27 +++++++++---------- .../Review/ReviewForm/ReviewForm.stories.tsx | 19 +++++++------ .../hooks/food/useFoodSelectionGuideBanner.ts | 14 ++++++++++ 4 files changed, 38 insertions(+), 26 deletions(-) create mode 100644 frontend/src/hooks/food/useFoodSelectionGuideBanner.ts diff --git a/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx b/frontend/src/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner.tsx index 91d63eb51..566b07308 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 501583614..aa01689d2 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 b702a9fb3..bf1725e05 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 000000000..71a33076c --- /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 }; +};