React v18 마이그레이션

package.json

@@ -74,30 +74,30 @@
     "@channel.io/stylelint-config": "^1.2.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
+    "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-url": "^6.0.0",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-backgrounds": "^6.4.18",
-    "@storybook/addon-controls": "^6.4.18",
-    "@storybook/addon-docs": "^6.4.18",
-    "@storybook/addon-toolbars": "^6.4.18",
-    "@storybook/react": "^6.4.18",
-    "@storybook/storybook-deployer": "^2.8.10",
+    "@storybook/addon-a11y": "^6.5.0-beta.1",
+    "@storybook/addon-actions": "^6.5.0-beta.1",
+    "@storybook/addon-backgrounds": "^6.5.0-beta.1",
+    "@storybook/addon-controls": "^6.5.0-beta.1",
+    "@storybook/addon-docs": "^6.5.0-beta.1",
+    "@storybook/addon-toolbars": "^6.5.0-beta.1",
+    "@storybook/react": "^6.5.0-beta.1",
+    "@storybook/storybook-deployer": "^2.8.11",
     "@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
     "@svgr/cli": "^6.2.1",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
     "@types/jest": "^25.2.3",
     "@types/lodash-es": "^4.17.4",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "@types/styled-components": "^5.1.5",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -119,22 +119,22 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-storybook": "^0.5.11",
     "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.4",
     "lint-staged": "^11.0.0",
     "paths.macro": "^3.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.50.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "semantic-release": "^17.4.3",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.5",
     "stylelint": "^13.8.0",
     "ts-node": "^8.10.2",
     "ts-prune": "^0.9.1",
@@ -146,14 +146,15 @@
     "typescript-transform-paths": "^3.3.1"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": ">=5"
   },
   "dependencies": {
     "@babel/runtime": "^7.12.13",
     "lodash-es": "^4.17.15",
     "react-resize-detector": "^6.7.4",
+    "react-textarea-autosize": "^8.3.3",
     "ssr-window": "^3.0.0",
     "typesafe-actions": "^5.1.0",
     "uuid": "^8.3.2"

src/components/Avatars/Avatar/useProgressiveImage.test.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import { renderHook } from '@testing-library/react-hooks'
-
 /* Internal dependencies */
+import { renderHook } from 'Utils/testUtils'
 import useProgressiveImage, { CachedImage } from './useProgressiveImage'
 
 describe('useProgressiveImage >', () => {

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1621,9 +1621,7 @@ exports[`Button Test > Size Test > without text > Size L 1`] = `
   <div
     class="c1"
     data-testid="bezier-react-button-inner-content"
-  >
-
-  </div>
+  />
 </button>
 `;
 
@@ -1693,9 +1691,7 @@ exports[`Button Test > Size Test > without text > Size M 1`] = `
   <div
     class="c1"
     data-testid="bezier-react-button-inner-content"
-  >
-
-  </div>
+  />
 </button>
 `;
 
@@ -1765,9 +1761,7 @@ exports[`Button Test > Size Test > without text > Size S 1`] = `
   <div
     class="c1"
     data-testid="bezier-react-button-inner-content"
-  >
-
-  </div>
+  />
 </button>
 `;
 
@@ -1837,9 +1831,7 @@ exports[`Button Test > Size Test > without text > Size XL 1`] = `
   <div
     class="c1"
     data-testid="bezier-react-button-inner-content"
-  >
-
-  </div>
+  />
 </button>
 `;
 
@@ -1909,9 +1901,7 @@ exports[`Button Test > Size Test > without text > Size XS 1`] = `
   <div
     class="c1"
     data-testid="bezier-react-button-inner-content"
-  >
-
-  </div>
+  />
 </button>
 `;
 

src/components/Forms/FormControl/FormControl.types.ts

@@ -15,7 +15,7 @@ export interface FormControlAriaProps {
 }
 
 interface WrapperProps {
-  Wrapper: React.FunctionComponent
+  Wrapper: React.FunctionComponent<ChildrenProps>
 }
 
 interface SetRenderedProps {

src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -206,8 +206,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="c2 c3"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-1"
-            id="field-1-label"
+            for="field-:r3:"
+            id="field-:r3:-label"
           >
             First Inner Label
           </label>
@@ -220,7 +220,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
           <input
             autocomplete="off"
             class="c6"
-            id="field-1"
+            id="field-:r3:"
             size="36"
             value=""
           />
@@ -237,8 +237,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="c2 c3"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-2"
-            id="field-2-label"
+            for="field-:r4:"
+            id="field-:r4:-label"
           >
             Second Inner Label
           </label>
@@ -252,7 +252,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             aria-invalid="true"
             autocomplete="off"
             class="c6"
-            id="field-2"
+            id="field-:r4:"
             size="36"
             value=""
           />
@@ -532,8 +532,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="c7 c4"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-3"
-            id="field-3-label"
+            for="field-:r6:"
+            id="field-:r6:-label"
           >
             First Inner Label
           </label>
@@ -546,7 +546,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
           <input
             autocomplete="off"
             class="c9"
-            id="field-3"
+            id="field-:r6:"
             size="36"
             value=""
           />
@@ -563,8 +563,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="c7 c4"
             color="txt-black-darkest"
             data-testid="bezier-react-form-label"
-            for="field-4"
-            id="field-4-label"
+            for="field-:r7:"
+            id="field-:r7:-label"
           >
             Second Inner Label
           </label>
@@ -578,7 +578,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             aria-invalid="true"
             autocomplete="off"
             class="c9"
-            id="field-4"
+            id="field-:r7:"
             size="36"
             value=""
           />

src/components/Forms/Inputs/Select/Select.test.tsx

@@ -80,11 +80,12 @@ describe('Select Test >', () => {
       expect(defaultSelectTrigger).toHaveStyle('cursor: pointer;')
     })
 
-    it('Dropdown >', () => {
+    it('Dropdown >', async () => {
+      const user = userEvent.setup()
       const { getByTestId } = renderSelect()
 
       const defaultSelectTrigger = getByTestId(SELECT_TRIGGER_TEST_ID)
-      userEvent.click(defaultSelectTrigger)
+      await user.click(defaultSelectTrigger)
 
       const defaultSelectDropdown = getByTestId(SELECT_DROPDOWN_TEST_ID)
 
@@ -96,7 +97,8 @@ describe('Select Test >', () => {
   })
 
   describe('SelectSize >', () => {
-    it('Size only effects to trigger style >', () => {
+    it('Size only effects to trigger style >', async () => {
+      const user = userEvent.setup()
       const XL_CONTAINER_TEST_ID = `${SELECT_CONTAINER_TEST_ID}_XL`
       const XL_TRIGGER_TEST_ID = `${SELECT_TRIGGER_TEST_ID}_XL`
       const XL_DROPDOWN_TEST_ID = `${SELECT_DROPDOWN_TEST_ID}_XL`
@@ -121,21 +123,21 @@ describe('Select Test >', () => {
       const xlSelectContainer = getByTestIdForXL(XL_CONTAINER_TEST_ID)
       const xlSelectTrigger = getByTestIdForXL(XL_TRIGGER_TEST_ID)
       // Open Dropdown
-      userEvent.click(xlSelectTrigger)
+      await user.click(xlSelectTrigger)
       const xlSelectDropdown = getByTestIdForXL(XL_DROPDOWN_TEST_ID)
       // Close Dropdown
-      userEvent.click(xlSelectTrigger)
+      await user.click(xlSelectTrigger)
       const xlContainerStyle = window.getComputedStyle(xlSelectContainer)
       const xlDropdownStyle = window.getComputedStyle(xlSelectDropdown)
 
       // Select Size.L
       const lSelectContainer = getByTestIdForL(L_CONTAINER_TEST_ID)
       const lSelectTrigger = getByTestIdForL(L_TRIGGER_TEST_ID)
       // Open Dropdown
-      userEvent.click(lSelectTrigger)
+      await user.click(lSelectTrigger)
       const lSelectDropdown = getByTestIdForL(L_DROPDOWN_TEST_ID)
       // Close Dropdown
-      userEvent.click(lSelectTrigger)
+      await user.click(lSelectTrigger)
       const lContainerStyle = window.getComputedStyle(lSelectContainer)
       const lDropdownStyle = window.getComputedStyle(lSelectDropdown)
 
@@ -216,11 +218,12 @@ describe('Select Test >', () => {
       expect(trigger).toHaveStyle('cursor: not-allowed')
     })
 
-    it('should not show dropdown when clicked', () => {
+    it('should not show dropdown when clicked', async () => {
+      const user = userEvent.setup()
       const { getByTestId } = renderSelect({ disabled: true })
       const trigger = getByTestId(SELECT_TRIGGER_TEST_ID)
 
-      userEvent.click(trigger)
+      await user.click(trigger)
 
       expect(() => getByTestId(SELECT_DROPDOWN_TEST_ID)).toThrow() // element should not exist
     })
@@ -257,11 +260,12 @@ describe('Select Test >', () => {
       expect(trigger).toHaveStyle('cursor: initial')
     })
 
-    it('should not show dropdown when clicked', () => {
+    it('should not show dropdown when clicked', async () => {
+      const user = userEvent.setup()
       const { getByTestId } = renderSelect({ readOnly: true })
       const trigger = getByTestId(SELECT_TRIGGER_TEST_ID)
 
-      userEvent.click(trigger)
+      await user.click(trigger)
 
       expect(() => getByTestId(SELECT_DROPDOWN_TEST_ID)).toThrow() // element should not exist
     })
@@ -289,13 +293,14 @@ describe('Select Test >', () => {
       expect(dropdown).toBeVisible()
     })
 
-    it('should disappear dropdown when the other elements clicked >', () => {
+    it('should disappear dropdown when the other elements clicked >', async () => {
       const { body } = document
+      const user = userEvent.setup()
 
       const { getByTestId } = renderSelect({ defaultFocus: true })
       const dropdown = getByTestId(SELECT_DROPDOWN_TEST_ID)
 
-      userEvent.click(body)
+      await user.click(body)
 
       expect(dropdown).not.toBeVisible()
     })

src/components/Forms/Inputs/TextArea/TextArea.styled.ts

@@ -40,7 +40,7 @@ const Wrapper = styled.div<WrapperProps>`
   ${({ interpolation }) => interpolation}
 `
 
-interface TextAreaAutoSizeBaseProps extends InterpolationProps{
+interface TextAreaAutoSizeBaseProps extends InterpolationProps {
   disabled: boolean
   readOnly: boolean
 }