refactor: '사료 선택 도움말 배너'를 닫으면 리액트 내부 페이지 이동 시 안 보이도록 수정 (#486)

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;
 

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('수정');
 

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) {

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 };
+};