chore: refactor to styled-components

Author: ugogo

package.json

@@ -39,20 +39,20 @@
     "lint": "eslint . --ext .js,.ts,.tsx"
   },
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=16.0.0",
+    "styled-components": ">=5.0.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx-self": "^7.16.7",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.0.4",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.24",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "babel-eslint": "^10.0.3",

src/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Global, css } from '@emotion/react';
 import * as S from './styles';
 
 const KEY_CODE = {
@@ -178,15 +177,7 @@ const ReactInputVerificationCode = ({
 
   return (
     <React.Fragment>
-      <Global
-        styles={css`
-          :root {
-            --ReactInputVerificationCode-itemWidth: 4.5rem;
-            --ReactInputVerificationCode-itemHeight: 5rem;
-            --ReactInputVerificationCode-itemSpacing: 1rem;
-          }
-        `}
-      />
+      <S.GlobalStyle />
 
       <S.Container
         className='ReactInputVerificationCode__container'

src/styles.ts

@@ -1,4 +1,12 @@
-import styled from '@emotion/styled';
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  :root {
+    --ReactInputVerificationCode-itemWidth: 4.5rem;
+    --ReactInputVerificationCode-itemHeight: 5rem;
+    --ReactInputVerificationCode-itemSpacing: 1rem;
+  }
+`;
 
 interface ContainerProps {
   itemsCount: number;