roll back

package.json

@@ -18,9 +18,8 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.18.0",
     "react-script": "^2.0.5",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -49,8 +48,11 @@
   },
   "devDependencies": {
     "@types/jquery": "^3.5.27",
+    "@types/react-modal": "^3.16.3",
     "gulp": "^4.0.2",
-    "gulp-sass": "^5.1.0"
+    "gulp-sass": "^5.1.0",
+    "typescript": "^5.2.2",
+    "webpack": "^4.29.6"
   },
   "description": "2023 메이커톤",
   "main": "index.js",

src/component/Button.tsx

@@ -1,36 +1,21 @@
-// Button.tsx
-import React, { useState } from 'react';
-import '../App.scss';
+// Caution_Button.tsx
+import React from 'react';
 
-interface btn_type {
-    is_error: boolean;
-    is_activated: boolean;
-}
-
-interface btn_props {
+interface CautionButtonProps {
     title: string;
-    type: btn_type;
+    type: { is_error: boolean; is_activated: boolean };
+    isButtonActivated: boolean;
+    onClick: () => void;
 }
 
-
-function Button({ title, type }: btn_props): JSX.Element {
-    const [isActivated, setIsActivated] = useState(type.is_activated);
-    const handleClick = () => {
-        setIsActivated(!isActivated);
-    };
-    let btn_style: object = {};
-
-    if (type.is_error == true) {
-        btn_style = { "backgroundColor": "#F01111", "color": "white" }
-    }
-
+const Caution_Button: React.FC<CautionButtonProps> = ({ title, type, isButtonActivated, onClick }) => {
     return (
         <div className="comp_btn">
-            <button style={btn_style} className={`btn_txt ${isActivated ? 'pressed' : ''}`} onClick={handleClick}>
+            <button className={`btn ${isButtonActivated ? 'pressed' : ''}`} onClick={onClick}>
                 {title}
             </button>
         </div>
     );
-}
+};
 
-export default Button;
+export default Caution_Button;

src/view/Caution.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import '../App.scss';
 import Icon_X from '../images/icon_x.svg';
 import Nav from '../component/Nav';
-import Caution_Button from '../component/Caution_Button';
+import Caution_Button from '../component/Button';
 import CheckList from '../component/CheckList';
 import Tag from '../component/Tag'
 import CircleButton from '../component/CircleButton';

src/view/Home.tsx

@@ -7,8 +7,8 @@ import Nav from '../component/Nav';
 import { useNavigate } from "react-router-dom";
 import $ from "jquery";
 import { useLocation } from 'react-router-dom';
-import Caution_Button from "../component/Caution_Button";
-import Modal from 'react-modal';
+import Caution_Button from "../component/Button";
+// import Modal from 'react-modal';
 
 
 interface jquery_node { };
@@ -86,12 +86,9 @@ function Home(): JSX.Element {
     }, [agree_height]);
 
     const handleCautionButtonClick = () => {
-        if (buttonState === true) {
-            window.location.href = "/Riding";
-        }
-        else {
-            window.alert("주의사항을 확인해 주세요.");
-        }
+        // if (buttonState === true) {
+        //     window.location.href = "/Riding";
+        // }
     };
 
 
@@ -140,7 +137,7 @@ function Home(): JSX.Element {
                     </div>
                 </div>
             </div>
-        </div >
+        </div>
     );
 }
 

src/view/Riding.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import '../App.scss'
 import Nav from '../component/Nav';
 import Body from '../component/Body';
-import Button from '../component/Button';
-import Caution_Button from '../component/Caution_Button';
+import Caution_Button from '../component/Button';
 
 const Riding: React.FC = () => {
     // Define your timer properties

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"