refactor: import React -> tree shaking

client/src/components/Design/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import type {Meta, StoryObj} from '@storybook/react';
 
 import Button from './Button';

client/src/components/Design/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import React, {forwardRef} from 'react';
+import {forwardRef} from 'react';
 
 import {useTheme} from '@theme/HDesignProvider';
 

client/src/components/Design/components/Input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import React, {useEffect, useState} from 'react';
+import {useState} from 'react';
 
 import Input from '@HDcomponents/Input/Input';
 import Flex from '@HDcomponents/Flex/Flex';

client/src/components/Design/components/Input/Input.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 import IconButton from '@HDcomponents/IconButton/IconButton';
 import {InputProps} from '@HDcomponents/Input/Input.type';

client/src/components/Design/components/ListButton/ListButton.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {forwardRef} from 'react';
+import {forwardRef} from 'react';
 
 import Text from '@HDcomponents/Text/Text';
 import IconButton from '@HDcomponents/IconButton/IconButton';

client/src/components/Design/components/Tabs/Tabs.stories.tsx

@@ -1,7 +1,6 @@
+/** @jsxImportSource @emotion/react */
 import type {Meta, StoryObj} from '@storybook/react';
 
-import React from 'react';
-
 import Tabs from '@HDcomponents/Tabs/Tabs';
 
 import Tab from './Tab';

client/src/components/Design/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import React, {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 import {useTheme} from '@theme/HDesignProvider';
 

client/src/components/Design/components/Text/Text.tsx

@@ -1,8 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type {TextProps} from '@HDcomponents/Text/Text.type';
 
-import React from 'react';
-
 import {useTheme} from '@theme/HDesignProvider';
 
 import {getSizeStyling} from './Text.style';

client/src/components/Design/components/Top/Top.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import {css} from '@emotion/react';
-import React from 'react';
+import {Children, isValidElement} from 'react';
 
 import Line from './Line';
 import EditableLine from './EditableLine';
@@ -10,8 +10,8 @@ Top.EditableLine = EditableLine;
 
 export default function Top({children}: React.PropsWithChildren) {
   const childrenTexts: string[] = [];
-  React.Children.forEach(children, child => {
-    if (React.isValidElement(child) && child.type === Top.Line) {
+  Children.forEach(children, child => {
+    if (isValidElement(child) && child.type === Top.Line) {
       childrenTexts.push(child.props.text);
     }
   });

client/src/components/Design/theme/HDesignProvider.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useContext, useState, ReactNode} from 'react';
+import {createContext, useContext, useState, ReactNode} from 'react';
 import {Global} from '@emotion/react';
 
 import {Theme} from '@theme/theme.type';

client/src/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
 import {RouterProvider} from 'react-router-dom';
 import * as Sentry from '@sentry/react';
 
@@ -24,9 +24,9 @@ Sentry.init({
 // }
 
 // enableMocking().then(() => {
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <RouterProvider router={router} />
-  </React.StrictMode>,
+  </StrictMode>,
 );
 // });