feat: 기존 valinall CSS => styled-components 마이그레이션

.gitignore

@@ -12,7 +12,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

package.json

@@ -41,11 +41,11 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER='firefox' react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "prepare": "rm -rf dist && mkdir dist && tsc && cp src/lib/components/styles.css dist/components/styles.css"
+    "prepare": "rm -rf dist && mkdir dist && tsc && NODE_ENV=production babel src --out-dir dist --ignore '**/*.test.tsx'"
   },
   "eslintConfig": {
     "extends": [

src/App.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import './App.css';
+import MyModal from "./lib/components/MyModal";
 
 const App = () => {
   return (
-    <h1>Hello World</h1>
+      <MyModal trigger={<button>모달 열기</button>}>
+        <h2>제목</h2>
+        <p>내용</p>
+      </MyModal>
   );
 }
 

src/index.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom';
 import App from './App';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root')
 );

src/lib/components/MyModal.styles.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+export const ModalContent = styled.div`
+  position: relative;
+  background-color: #fff;
+  padding: 1rem;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 500px;
+  z-index: 1001;
+`;

src/lib/components/MyModal.tsx

@@ -1,5 +1,5 @@
-import React, {ReactElement, ReactNode, useState} from "react";
-import 'react-bottom-sheet-booungi/dist/components/styles.css';
+import React, { ReactElement, ReactNode, useState } from "react";
+import * as Styled from './MyModal.styles'
 
 interface MyModalProps {
     trigger: ReactElement;
@@ -21,11 +21,11 @@ const MyModal = ({ trigger, children }: MyModalProps) => {
         <>
             {React.cloneElement(trigger, { onClick: handleOpenModal })}
             {isModalOpen && (
-                <div className="modal-overlay" onClick={handleCloseModal}>
-                    <div className="modal" onClick={(e) => e.stopPropagation()}>
+                <Styled.ModalOverlay onClick={handleCloseModal}>
+                    <Styled.ModalContent onClick={(e) => e.stopPropagation()}>
                         {children}
-                    </div>
-                </div>
+                    </Styled.ModalContent>
+                </Styled.ModalOverlay>
             )}
         </>
     );