diff --git a/src/frontend/package.json b/src/frontend/package.json
index ad42a1bd..bddbf83e 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -8,6 +8,7 @@
     "dev": "vite dev",
     "start": "vite",
     "typecheck": "tsc",
+    "test": "vitest",
     "check": "yarn formatter && yarn lint:fix",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint --fix \"src/**/*.{ts,tsx}\"",
@@ -52,6 +53,7 @@
     "@storybook/react-vite": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@tanstack/eslint-plugin-query": "^5.66.1",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^20",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
@@ -65,6 +67,7 @@
     "eslint-plugin-storybook": "^0.11.2",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.14.0",
+    "jsdom": "^26.0.0",
     "msw": "^2.7.1",
     "prettier": "^3.4.2",
     "sharp": "^0.33.5",
diff --git a/src/frontend/src/components/auth-input/auth-input.spec.tsx b/src/frontend/src/components/auth-input/auth-input.spec.tsx
new file mode 100644
index 00000000..580df71c
--- /dev/null
+++ b/src/frontend/src/components/auth-input/auth-input.spec.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import AuthInput from './index'
+
+describe('AuthInput', () => {
+  it('should render', () => {
+    render(<AuthInput label='Email' />)
+
+    const label = screen.getByText('Email')
+    expect(label).not.toBeNull()
+  })
+
+  it('should render error message', () => {
+    render(
+      <AuthInput
+        label='Email'
+        error='Invalid email'
+      />
+    )
+
+    const error = screen.getByText('Invalid email')
+    expect(error).not.toBeNull()
+  })
+
+  it('should render required message', () => {
+    render(
+      <AuthInput
+        label='Email'
+        required
+      />
+    )
+
+    const required = screen.getByText('*')
+    expect(required).not.toBeNull()
+  })
+
+  it('should render input', () => {
+    render(<AuthInput label='Email' />)
+
+    const input = screen.getByRole('textbox')
+    expect(input).not.toBeNull()
+  })
+})
diff --git a/src/frontend/src/components/avatar/avatar.spec.tsx b/src/frontend/src/components/avatar/avatar.spec.tsx
new file mode 100644
index 00000000..3def9ab7
--- /dev/null
+++ b/src/frontend/src/components/avatar/avatar.spec.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Avatar from './index'
+
+describe('Avatar', () => {
+  it('should render without avatar url', () => {
+    render(
+      <Avatar
+        name='John Doe'
+        avatarUrl={null}
+        statusColor='red'
+        size='md'
+      />
+    )
+    const img = screen.getByRole('img')
+    expect(img.getAttribute('src')).toBe('/image/common/default-avatar.png')
+  })
+
+  it('should render with avatar url', () => {
+    render(
+      <Avatar
+        name='John Doe'
+        avatarUrl='/homepage/hero-character.png'
+        statusColor='red'
+        size='md'
+      />
+    )
+    const img = screen.getByRole('img')
+    expect(img.getAttribute('src')).toBe('/homepage/hero-character.png')
+  })
+})
diff --git a/src/frontend/src/components/check-box/check-box.spec.tsx b/src/frontend/src/components/check-box/check-box.spec.tsx
new file mode 100644
index 00000000..fde68871
--- /dev/null
+++ b/src/frontend/src/components/check-box/check-box.spec.tsx
@@ -0,0 +1,62 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import CheckBox from './index'
+
+describe('CheckBox', () => {
+  const onChange = vi.fn()
+  it('should render', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    expect(checkBox).not.toBeNull()
+  })
+
+  it('should render checked', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={true}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    expect(checkBox).not.toBeNull()
+  })
+
+  it('should render label', () => {
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const label = screen.getByText('Checkbox')
+    expect(label).not.toBeNull()
+  })
+
+  it('should call onChange', () => {
+    const onChange = vi.fn()
+    render(
+      <CheckBox
+        label='Checkbox'
+        isChecked={false}
+        onChange={onChange}
+      />
+    )
+
+    const checkBox = screen.getByRole('checkbox')
+    fireEvent.click(checkBox)
+
+    expect(onChange).toHaveBeenCalled()
+  })
+})
diff --git a/src/frontend/src/components/date-input/dete-input.spec.tsx b/src/frontend/src/components/date-input/dete-input.spec.tsx
new file mode 100644
index 00000000..08722121
--- /dev/null
+++ b/src/frontend/src/components/date-input/dete-input.spec.tsx
@@ -0,0 +1,74 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DateInput from './index'
+
+describe('DateInput', () => {
+  const setDate = vi.fn()
+  it('should render', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+      />
+    )
+
+    const label = screen.getByText('Date')
+    expect(label).not.toBeNull()
+  })
+
+  it('should call setDate', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+      />
+    )
+
+    const selectBoxYear = screen.getAllByRole('combobox')[0]
+    fireEvent.click(selectBoxYear)
+
+    const option1 = screen.getByText('2025')
+    fireEvent.click(option1)
+
+    const selectBoxMonth = screen.getAllByRole('combobox')[1]
+    fireEvent.click(selectBoxMonth)
+
+    const option2 = screen.getByText('1월')
+    fireEvent.click(option2)
+
+    const selectBoxDay = screen.getAllByRole('combobox')[2]
+    fireEvent.click(selectBoxDay)
+
+    const option3 = screen.getByText('30')
+    fireEvent.click(option3)
+
+    expect(setDate).toHaveBeenCalledWith('2025-01-30')
+  })
+
+  it('should render error', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+        error='Error'
+      />
+    )
+
+    const error = screen.getByText('Error')
+    expect(error).not.toBeNull()
+  })
+
+  it('should render required', () => {
+    render(
+      <DateInput
+        label='Date'
+        setDate={setDate}
+        required
+      />
+    )
+
+    const required = screen.getByText('*')
+    expect(required).not.toBeNull()
+  })
+})
diff --git a/src/frontend/src/components/select-box/index.tsx b/src/frontend/src/components/select-box/index.tsx
index 6225f117..e1b2e7b2 100644
--- a/src/frontend/src/components/select-box/index.tsx
+++ b/src/frontend/src/components/select-box/index.tsx
@@ -91,10 +91,13 @@ const SelectBox = <T,>({
         </div>
       ) : null}
       <div className='py-2 px-2 flex justify-between'>
-        <div className='text-gray-10 flex max-w-[calc(100%-8px)] items-center mx-1 h-7'>
+        <label
+          htmlFor={label}
+          className='text-gray-10 flex max-w-[calc(100%-8px)] items-center mx-1 h-7'>
           {search ? '' : value ? (value as Option<T>).label : label}
-        </div>
+        </label>
         <input
+          id={label}
           type='text'
           value={search}
           onChange={handleSearch}
@@ -103,6 +106,7 @@ const SelectBox = <T,>({
           {...props}
         />
         <button
+          role='combobox'
           type='button'
           onClick={() => setIsOpen((prev) => !prev)}
           className={cn(
diff --git a/src/frontend/src/components/select-box/select-box.spec.tsx b/src/frontend/src/components/select-box/select-box.spec.tsx
new file mode 100644
index 00000000..71e303ca
--- /dev/null
+++ b/src/frontend/src/components/select-box/select-box.spec.tsx
@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import SelectBox from './index'
+
+describe('SelectBox', () => {
+  it('should select option when clicked', async () => {
+    const options = [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' }
+    ]
+    const onChange = vi.fn()
+
+    render(
+      <SelectBox
+        label='Select an option'
+        options={options}
+        value={null}
+        onChange={onChange}
+      />
+    )
+
+    const selectBox = screen.getByRole('combobox')
+    fireEvent.click(selectBox)
+
+    const option1 = screen.getByText('Option 1')
+    fireEvent.click(option1)
+
+    expect(onChange).toHaveBeenCalledWith(options[0])
+  })
+
+  it('should render label', () => {
+    const onChange = vi.fn()
+    render(
+      <SelectBox
+        label='Select an option'
+        options={[]}
+        value={null}
+        onChange={onChange}
+      />
+    )
+
+    const label = screen.getByText('Select an option')
+    expect(label).not.toBeNull()
+  })
+})
diff --git a/src/frontend/src/components/volume-slider/volume-slider.spec.tsx b/src/frontend/src/components/volume-slider/volume-slider.spec.tsx
new file mode 100644
index 00000000..ed3d48c6
--- /dev/null
+++ b/src/frontend/src/components/volume-slider/volume-slider.spec.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import VolumeSlider from './index'
+
+describe('VolumeSlider', () => {
+  it('should render', () => {
+    render(<VolumeSlider />)
+
+    const volumeSlider = screen.getByRole('slider')
+    expect(volumeSlider).not.toBeNull()
+  })
+
+  it('should render label', () => {
+    render(<VolumeSlider label='Volume' />)
+
+    const label = screen.getByLabelText('Volume')
+    expect(label).not.toBeNull()
+  })
+})
diff --git a/src/frontend/src/hooks/use-singaling.ts b/src/frontend/src/hooks/use-singaling.ts
index 97643034..fb49ca40 100644
--- a/src/frontend/src/hooks/use-singaling.ts
+++ b/src/frontend/src/hooks/use-singaling.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 import { TURN_SERVER_URL } from '@/constants/env'
-import { useSignalingSocket } from '@/stores/use-signaling-socket'
+import { useSignalingSocket } from '@/stores/use-signaling-store'
 import { useUserStatus } from '@/stores/use-user-status-store'
 
 import useGetSelfUser from './queries/user/useGetSelfUser'
diff --git a/src/frontend/src/layouts/main-layout/index.tsx b/src/frontend/src/layouts/main-layout/index.tsx
index a6492e5b..c6a029a1 100644
--- a/src/frontend/src/layouts/main-layout/index.tsx
+++ b/src/frontend/src/layouts/main-layout/index.tsx
@@ -12,7 +12,7 @@ import useGetSelfUser from '@/hooks/queries/user/useGetSelfUser'
 import { useChattingStomp } from '@/hooks/use-chatting-stomp'
 import { useMediaSettingsStore } from '@/stores/use-media-setting.store'
 import { useServerUnreadStore } from '@/stores/use-server-unread-store'
-import { useSignalingSocket } from '@/stores/use-signaling-socket'
+import { useSignalingSocket } from '@/stores/use-signaling-store'
 
 import ProfileCard from './components/profile-card'
 import ProfileStatusButton from './components/profile-status-button'
diff --git a/src/frontend/src/stores/use-signaling-stomp-store.ts b/src/frontend/src/stores/use-signaling-stomp-store.ts
deleted file mode 100644
index d2739cba..00000000
--- a/src/frontend/src/stores/use-signaling-stomp-store.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Client, IMessage } from '@stomp/stompjs'
-import { create } from 'zustand'
-
-import { SIGNALING_SERVER_URL } from '@/constants/env'
-import { StompState } from '@/types/stomp'
-
-export const useSignalingStomp = create<StompState>((set, get) => ({
-  client: null,
-  // 연결
-  connect: () => {
-    const client = new Client({
-      brokerURL: SIGNALING_SERVER_URL,
-      reconnectDelay: 5000,
-      heartbeatIncoming: 4000,
-      heartbeatOutgoing: 4000
-    })
-
-    client.onConnect = () => {
-      set({ client: client })
-    }
-
-    client.onDisconnect = () => {
-      set({ client: null })
-    }
-
-    client.activate()
-    set({ client: client })
-  },
-
-  // 연결 종료
-  disconnect: () => {
-    const client = get().client
-    if (!client) throw new Error('Client is not connected')
-
-    client.deactivate()
-    set({ client: null })
-  },
-
-  // 메시지 구독
-  subscribe: (subscriptionId, destination, callback) => {
-    const client = get().client
-    if (!client) throw new Error('Client is not connected')
-
-    client.subscribe(
-      destination,
-      (message: IMessage) => {
-        callback(JSON.parse(message.body))
-      },
-      {
-        id: subscriptionId
-      }
-    )
-  },
-
-  // 메시지 발행
-  send: (destination, body) => {
-    const client = get().client
-    if (!client) throw new Error('Client is not connected')
-
-    client.publish({
-      destination,
-      body: JSON.stringify(body)
-    })
-  },
-
-  // 메시지 구독 취소
-  unsubscribe: (subscriptionId, destination) => {
-    const client = get().client
-    if (!client) throw new Error('Client is not connected')
-
-    client.unsubscribe(destination, {
-      id: subscriptionId
-    })
-  }
-}))
diff --git a/src/frontend/src/stores/use-signaling-socket.ts b/src/frontend/src/stores/use-signaling-store.ts
similarity index 100%
rename from src/frontend/src/stores/use-signaling-socket.ts
rename to src/frontend/src/stores/use-signaling-store.ts
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 34333945..d28dc3e9 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -69,6 +69,10 @@ export default defineConfig(({ mode }) => {
           '@': resolve(__dirname, './src')
         }
       }
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom'
     }
   }
 })
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index f672593e..7379a99d 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -29,6 +29,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@asamuzakjp/css-color@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@asamuzakjp/css-color@npm:3.1.1"
+  dependencies:
+    "@csstools/css-calc": "npm:^2.1.2"
+    "@csstools/css-color-parser": "npm:^3.0.8"
+    "@csstools/css-parser-algorithms": "npm:^3.0.4"
+    "@csstools/css-tokenizer": "npm:^3.0.3"
+    lru-cache: "npm:^10.4.3"
+  checksum: 10c0/4abb010fd29de8acae8571eba738468c22cb45a1f77647df3c59a80f1c83d83d728cae3ebbf99e5c73f2517761abaaffbe5e4176fc46b5f9bf60f1478463b51e
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
@@ -440,6 +453,52 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/color-helpers@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@csstools/color-helpers@npm:5.0.2"
+  checksum: 10c0/bebaddb28b9eb58b0449edd5d0c0318fa88f3cb079602ee27e88c9118070d666dcc4e09a5aa936aba2fde6ba419922ade07b7b506af97dd7051abd08dfb2959b
+  languageName: node
+  linkType: hard
+
+"@csstools/css-calc@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@csstools/css-calc@npm:2.1.2"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^3.0.4
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10c0/34ced30553968ef5d5f9e00e3b90b48c47480cf130e282e99d57ec9b09f803aab8bc06325683e72a1518b5e7180a3da8b533f1b462062757c21989a53b482e1a
+  languageName: node
+  linkType: hard
+
+"@csstools/css-color-parser@npm:^3.0.8":
+  version: 3.0.8
+  resolution: "@csstools/css-color-parser@npm:3.0.8"
+  dependencies:
+    "@csstools/color-helpers": "npm:^5.0.2"
+    "@csstools/css-calc": "npm:^2.1.2"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^3.0.4
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10c0/90722c5a62ca94e9d578ddf59be604a76400b932bd3d4bd23cb1ae9b7ace8fcf83c06995d2b31f96f4afef24a7cefba79beb11ed7ee4999d7ecfec3869368359
+  languageName: node
+  linkType: hard
+
+"@csstools/css-parser-algorithms@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@csstools/css-parser-algorithms@npm:3.0.4"
+  peerDependencies:
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10c0/d411f07765e14eede17bccc6bd4f90ff303694df09aabfede3fd104b2dfacfd4fe3697cd25ddad14684c850328f3f9420ebfa9f78380892492974db24ae47dbd
+  languageName: node
+  linkType: hard
+
+"@csstools/css-tokenizer@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@csstools/css-tokenizer@npm:3.0.3"
+  checksum: 10c0/c31bf410e1244b942e71798e37c54639d040cb59e0121b21712b40015fced2b0fb1ffe588434c5f8923c9cd0017cfc1c1c8f3921abc94c96edf471aac2eba5e5
+  languageName: node
+  linkType: hard
+
 "@emnapi/runtime@npm:^1.2.0":
   version: 1.3.1
   resolution: "@emnapi/runtime@npm:1.3.1"
@@ -2171,6 +2230,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^16.2.0":
+  version: 16.2.0
+  resolution: "@testing-library/react@npm:16.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/7adaedaf237002b42e04a6261d2756074a19cbca0f0c79ba375660f618e123c0ee56256ced00aeb0bb7225ba1a8a81b92b692cca053521a21bb92a8cace1e4c6
+  languageName: node
+  linkType: hard
+
 "@testing-library/user-event@npm:14.5.2":
   version: 14.5.2
   resolution: "@testing-library/user-event@npm:14.5.2"
@@ -3343,6 +3422,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssstyle@npm:^4.2.1":
+  version: 4.3.0
+  resolution: "cssstyle@npm:4.3.0"
+  dependencies:
+    "@asamuzakjp/css-color": "npm:^3.1.1"
+    rrweb-cssom: "npm:^0.8.0"
+  checksum: 10c0/770ccb288a99257fd0d5b129e03878f848e922d3b017358acb02e8dd530e8f0c7c6f74e6ae5367d715e2da36a490a734b4177fc1b78f3f08eca25f204a56a692
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -3350,6 +3439,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-urls@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "data-urls@npm:5.0.0"
+  dependencies:
+    whatwg-mimetype: "npm:^4.0.0"
+    whatwg-url: "npm:^14.0.0"
+  checksum: 10c0/1b894d7d41c861f3a4ed2ae9b1c3f0909d4575ada02e36d3d3bc584bdd84278e20709070c79c3b3bff7ac98598cb191eb3e86a89a79ea4ee1ef360e1694f92ad
+  languageName: node
+  linkType: hard
+
 "data-view-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-buffer@npm:1.0.2"
@@ -3414,6 +3513,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decimal.js@npm:^10.4.3":
+  version: 10.5.0
+  resolution: "decimal.js@npm:10.5.0"
+  checksum: 10c0/785c35279df32762143914668df35948920b6c1c259b933e0519a69b7003fc0a5ed2a766b1e1dda02574450c566b21738a45f15e274b47c2ac02072c0d1f3ac3
+  languageName: node
+  linkType: hard
+
 "deep-eql@npm:^5.0.1":
   version: 5.0.2
   resolution: "deep-eql@npm:5.0.2"
@@ -3599,6 +3705,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -4361,6 +4474,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "form-data@npm:4.0.2"
+  dependencies:
+    asynckit: "npm:^0.4.0"
+    combined-stream: "npm:^1.0.8"
+    es-set-tostringtag: "npm:^2.1.0"
+    mime-types: "npm:^2.1.12"
+  checksum: 10c0/e534b0cf025c831a0929bf4b9bbe1a9a6b03e273a8161f9947286b9b13bf8fb279c6944aae0070c4c311100c6d6dbb815cd955dc217728caf73fad8dc5b8ee9c
+  languageName: node
+  linkType: hard
+
 "fraction.js@npm:^4.3.7":
   version: 4.3.7
   resolution: "fraction.js@npm:4.3.7"
@@ -4387,6 +4512,7 @@ __metadata:
     "@storybook/test": "npm:^8.5.0"
     "@tanstack/eslint-plugin-query": "npm:^5.66.1"
     "@tanstack/react-query": "npm:^5.66.0"
+    "@testing-library/react": "npm:^16.2.0"
     "@types/node": "npm:^20"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.1"
@@ -4405,6 +4531,7 @@ __metadata:
     eslint-plugin-storybook: "npm:^0.11.2"
     eslint-plugin-unused-imports: "npm:^4.1.4"
     globals: "npm:^15.14.0"
+    jsdom: "npm:^26.0.0"
     lucide-react: "npm:^0.473.0"
     msw: "npm:^2.7.1"
     postcss: "npm:^8.5.1"
@@ -4768,6 +4895,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-encoding-sniffer@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "html-encoding-sniffer@npm:4.0.0"
+  dependencies:
+    whatwg-encoding: "npm:^3.1.1"
+  checksum: 10c0/523398055dc61ac9b34718a719cb4aa691e4166f29187e211e1607de63dc25ac7af52ca7c9aead0c4b3c0415ffecb17326396e1202e2e86ff4bca4c0ee4c6140
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -4775,7 +4911,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-agent@npm:^7.0.0":
+"http-proxy-agent@npm:^7.0.0, http-proxy-agent@npm:^7.0.2":
   version: 7.0.2
   resolution: "http-proxy-agent@npm:7.0.2"
   dependencies:
@@ -4795,7 +4931,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^7.0.1":
+"https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.6":
   version: 7.0.6
   resolution: "https-proxy-agent@npm:7.0.6"
   dependencies:
@@ -4805,7 +4941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -5063,6 +5199,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-potential-custom-element-name@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-potential-custom-element-name@npm:1.0.1"
+  checksum: 10c0/b73e2f22bc863b0939941d369486d308b43d7aef1f9439705e3582bfccaa4516406865e32c968a35f97a99396dac84e2624e67b0a16b0a15086a785e16ce7db9
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
@@ -5245,6 +5388,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsdom@npm:^26.0.0":
+  version: 26.0.0
+  resolution: "jsdom@npm:26.0.0"
+  dependencies:
+    cssstyle: "npm:^4.2.1"
+    data-urls: "npm:^5.0.0"
+    decimal.js: "npm:^10.4.3"
+    form-data: "npm:^4.0.1"
+    html-encoding-sniffer: "npm:^4.0.0"
+    http-proxy-agent: "npm:^7.0.2"
+    https-proxy-agent: "npm:^7.0.6"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    nwsapi: "npm:^2.2.16"
+    parse5: "npm:^7.2.1"
+    rrweb-cssom: "npm:^0.8.0"
+    saxes: "npm:^6.0.0"
+    symbol-tree: "npm:^3.2.4"
+    tough-cookie: "npm:^5.0.0"
+    w3c-xmlserializer: "npm:^5.0.0"
+    webidl-conversions: "npm:^7.0.0"
+    whatwg-encoding: "npm:^3.1.1"
+    whatwg-mimetype: "npm:^4.0.0"
+    whatwg-url: "npm:^14.1.0"
+    ws: "npm:^8.18.0"
+    xml-name-validator: "npm:^5.0.0"
+  peerDependencies:
+    canvas: ^3.0.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 10c0/e48725ba4027edcfc9bca5799eaec72c6561ecffe3675a8ff87fe9c3541ca4ff9f82b4eff5b3d9c527302da0d859b2f60e9364347a5d42b77f5c76c436c569dc
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:^3.0.2":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
@@ -5383,7 +5560,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^10.4.3":
   version: 10.4.3
   resolution: "lru-cache@npm:10.4.3"
   checksum: 10c0/ebd04fbca961e6c1d6c0af3799adcc966a1babe798f685bb84e6599266599cd95d94630b10262f5424539bc4640107e8a33aa28585374abf561d30d16f4b39fb
@@ -5800,6 +5977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nwsapi@npm:^2.2.16":
+  version: 2.2.19
+  resolution: "nwsapi@npm:2.2.19"
+  checksum: 10c0/5bd9da260b2b24a775103c835a93c79584a870307eb59270b43c6970b7ae9c0af3cfffd9df5292c24d2ca2c67f49672b4c9be9824c347d6083b90e002a12779a
+  languageName: node
+  linkType: hard
+
 "object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -5961,6 +6145,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^7.2.1":
+  version: 7.2.1
+  resolution: "parse5@npm:7.2.1"
+  dependencies:
+    entities: "npm:^4.5.0"
+  checksum: 10c0/829d37a0c709215a887e410a7118d754f8e1afd7edb529db95bc7bbf8045fb0266a7b67801331d8e8d9d073ea75793624ec27ce9ff3b96862c3b9008f4d68e80
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -6659,6 +6852,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rrweb-cssom@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "rrweb-cssom@npm:0.8.0"
+  checksum: 10c0/56f2bfd56733adb92c0b56e274c43f864b8dd48784d6fe946ef5ff8d438234015e59ad837fc2ad54714b6421384141c1add4eb569e72054e350d1f8a50b8ac7b
+  languageName: node
+  linkType: hard
+
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"
@@ -6709,6 +6909,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
+  dependencies:
+    xmlchars: "npm:^2.2.0"
+  checksum: 10c0/3847b839f060ef3476eb8623d099aa502ad658f5c40fd60c105ebce86d244389b0d76fcae30f4d0c728d7705ceb2f7e9b34bb54717b6a7dbedaf5dad2d9a4b74
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.23.2":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"
@@ -7237,6 +7446,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"symbol-tree@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "symbol-tree@npm:3.2.4"
+  checksum: 10c0/dfbe201ae09ac6053d163578778c53aa860a784147ecf95705de0cd23f42c851e1be7889241495e95c37cabb058edb1052f141387bef68f705afc8f9dd358509
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.9.1":
   version: 0.9.2
   resolution: "synckit@npm:0.9.2"
@@ -7377,6 +7593,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tldts-core@npm:^6.1.84":
+  version: 6.1.84
+  resolution: "tldts-core@npm:6.1.84"
+  checksum: 10c0/e64b2f1d13788dc67a8c9f61e1d227b20e83328565a1eb8aeb704d991dc9ae1a0b48665260a78927ba7809793e000bb3071a21a9686d9a02a9be17f8a527e6bb
+  languageName: node
+  linkType: hard
+
+"tldts@npm:^6.1.32":
+  version: 6.1.84
+  resolution: "tldts@npm:6.1.84"
+  dependencies:
+    tldts-core: "npm:^6.1.84"
+  bin:
+    tldts: bin/cli.js
+  checksum: 10c0/84c865197ff8eb83283e1c1b7bc45a7e7ff9a41922dad0348c586791df63d6605a5a8e8efb6d4962b63459b2f3c0096d683041f65e29b468ccaf53fe99d9a9e0
+  languageName: node
+  linkType: hard
+
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -7398,6 +7632,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tough-cookie@npm:^5.0.0":
+  version: 5.1.2
+  resolution: "tough-cookie@npm:5.1.2"
+  dependencies:
+    tldts: "npm:^6.1.32"
+  checksum: 10c0/5f95023a47de0f30a902bba951664b359725597d8adeabc66a0b93a931c3af801e1e697dae4b8c21a012056c0ea88bd2bf4dfe66b2adcf8e2f42cd9796fe0626
+  languageName: node
+  linkType: hard
+
+"tr46@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "tr46@npm:5.1.0"
+  dependencies:
+    punycode: "npm:^2.3.1"
+  checksum: 10c0/d761f7144e0cb296187674ef245c74f761e334d7cf25ca73ef60e4c72c097c75051031c093fa1a2fee04b904977b316716a7915854bcae8fb1a371746513cbe8
+  languageName: node
+  linkType: hard
+
 "tr46@npm:~0.0.3":
   version: 0.0.3
   resolution: "tr46@npm:0.0.3"
@@ -7880,6 +8132,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"w3c-xmlserializer@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "w3c-xmlserializer@npm:5.0.0"
+  dependencies:
+    xml-name-validator: "npm:^5.0.0"
+  checksum: 10c0/8712774c1aeb62dec22928bf1cdfd11426c2c9383a1a63f2bcae18db87ca574165a0fbe96b312b73652149167ac6c7f4cf5409f2eb101d9c805efe0e4bae798b
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -7887,6 +8148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webidl-conversions@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "webidl-conversions@npm:7.0.0"
+  checksum: 10c0/228d8cb6d270c23b0720cb2d95c579202db3aaf8f633b4e9dd94ec2000a04e7e6e43b76a94509cdb30479bd00ae253ab2371a2da9f81446cc313f89a4213a2c4
+  languageName: node
+  linkType: hard
+
 "webpack-sources@npm:^3.2.3":
   version: 3.2.3
   resolution: "webpack-sources@npm:3.2.3"
@@ -7908,6 +8176,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-encoding@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "whatwg-encoding@npm:3.1.1"
+  dependencies:
+    iconv-lite: "npm:0.6.3"
+  checksum: 10c0/273b5f441c2f7fda3368a496c3009edbaa5e43b71b09728f90425e7f487e5cef9eb2b846a31bd760dd8077739c26faf6b5ca43a5f24033172b003b72cf61a93e
+  languageName: node
+  linkType: hard
+
+"whatwg-mimetype@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "whatwg-mimetype@npm:4.0.0"
+  checksum: 10c0/a773cdc8126b514d790bdae7052e8bf242970cebd84af62fb2f35a33411e78e981f6c0ab9ed1fe6ec5071b09d5340ac9178e05b52d35a9c4bcf558ba1b1551df
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^14.0.0, whatwg-url@npm:^14.1.0":
+  version: 14.2.0
+  resolution: "whatwg-url@npm:14.2.0"
+  dependencies:
+    tr46: "npm:^5.1.0"
+    webidl-conversions: "npm:^7.0.0"
+  checksum: 10c0/f746fc2f4c906607d09537de1227b13f9494c171141e5427ed7d2c0dd0b6a48b43d8e71abaae57d368d0c06b673fd8ec63550b32ad5ed64990c7b0266c2b4272
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^5.0.0":
   version: 5.0.0
   resolution: "whatwg-url@npm:5.0.0"
@@ -8067,6 +8361,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.18.0":
+  version: 8.18.1
+  resolution: "ws@npm:8.18.1"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10c0/e498965d6938c63058c4310ffb6967f07d4fa06789d3364829028af380d299fe05762961742971c764973dce3d1f6a2633fe8b2d9410c9b52e534b4b882a99fa
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.2.3":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
@@ -8097,6 +8406,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xml-name-validator@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "xml-name-validator@npm:5.0.0"
+  checksum: 10c0/3fcf44e7b73fb18be917fdd4ccffff3639373c7cb83f8fc35df6001fecba7942f1dbead29d91ebb8315e2f2ff786b508f0c9dc0215b6353f9983c6b7d62cb1f5
+  languageName: node
+  linkType: hard
+
+"xmlchars@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "xmlchars@npm:2.2.0"
+  checksum: 10c0/b64b535861a6f310c5d9bfa10834cf49127c71922c297da9d4d1b45eeaae40bf9b4363275876088fbe2667e5db028d2cd4f8ee72eed9bede840a67d57dab7593
+  languageName: node
+  linkType: hard
+
 "xmlhttprequest-ssl@npm:~2.1.1":
   version: 2.1.2
   resolution: "xmlhttprequest-ssl@npm:2.1.2"