From 2dbdd33783df319bc4faff348a3c73d3666e18f8 Mon Sep 17 00:00:00 2001
From: sh981013s <sh981013s@gmail.com>
Date: Tue, 2 May 2023 20:16:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20valinall=20CSS=20?=
 =?UTF-8?q?=3D>=20styled-components=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                            |  2 +-
 package.json                          |  4 ++--
 src/App.css                           |  0
 src/App.tsx                           |  7 +++++--
 src/index.tsx                         | 15 ++++++--------
 src/lib/components/MyModal.styles.tsx | 24 +++++++++++++++++++++++
 src/lib/components/MyModal.tsx        | 12 ++++++------
 src/lib/components/styles.css         | 28 ---------------------------
 8 files changed, 44 insertions(+), 48 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/lib/components/MyModal.styles.tsx
 delete mode 100644 src/lib/components/styles.css

diff --git a/.gitignore b/.gitignore
index c50e5c4..619c806 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
diff --git a/package.json b/package.json
index a426c81..1456b91 100644
--- a/package.json
+++ b/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": [
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App.tsx b/src/App.tsx
index fcf9ddf..f6226d3 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index 1fd12b7..2f8dfed 100644
--- a/src/index.tsx
+++ b/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')
 );
diff --git a/src/lib/components/MyModal.styles.tsx b/src/lib/components/MyModal.styles.tsx
new file mode 100644
index 0000000..18013f8
--- /dev/null
+++ b/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;
+`;
diff --git a/src/lib/components/MyModal.tsx b/src/lib/components/MyModal.tsx
index 8fe569e..68008d2 100644
--- a/src/lib/components/MyModal.tsx
+++ b/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>
             )}
         </>
     );
diff --git a/src/lib/components/styles.css b/src/lib/components/styles.css
deleted file mode 100644
index def3d5d..0000000
--- a/src/lib/components/styles.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: white;
-    border-radius: 10px;
-    padding: 20px;
-    width: 500px;
-    height: 500px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}