Merge pull request #4 from SPARCS-Service-Hackathon-2024/feature/chat

Feat: 채팅 구현

src/components/FifthModal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Modal from 'react-modal';
+import './FourthModal.css';
+
+const FirstModal = ({ isOpen, onRequestClose, onSelectNumChild }) => {
+    return (
+        <Modal
+            isOpen={isOpen}
+            onRequestClose={onRequestClose}
+            contentLabel="Fifth Modal"
+            className="Modal"
+            overlayClassName="Overlay"
+            ariaHideApp={false}
+        >
+            <div className="modal-content">
+                <div className="button-container">
+                    <button onClick={() => onSelectNumChild('그렇다')} className="modal-button">그렇다</button>
+                    <button onClick={() => onSelectNumChild('아니다')} className="modal-button">아니다</button>
+                </div>
+            </div>
+        </Modal>
+    );
+}
+
+export default FirstModal;

src/components/FirstModal.css

@@ -1,13 +1,10 @@
 .Modal {
-    position: absolute;
-    top: 40px;
-    left: 40px;
-    right: 40px;
-    bottom: 40px;
+    width: 100%;
+    height: auto;
     background: #fff;
     overflow: auto;
     outline: none;
-    padding: '20px';
+    padding: '30px';
 }
 
 .Overlay {
@@ -19,20 +16,22 @@
 }
 
 .modal-content {
+    display: block;
     text-align: center;
 }
 
 .button-container {
-    margin-top: 20px;
+    display: block;
 }
 
 .modal-button {
-    background-color: #A883D8;
+    background-color: #EAE3FC;
+    width: 168px;
     color: black;
     border: none;
     padding: 10px 20px;
     margin: 10px;
-    border-radius: 20px;
+    border-radius: 44px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;

src/components/FirstModal.js

@@ -2,21 +2,22 @@ import React from 'react';
 import Modal from 'react-modal';
 import './FirstModal.css';
 
-const FirstModal = ({ isOpen, onRequestClose }) => {
+const FirstModal = ({ isOpen, onRequestClose, onSelectNumberOfPeople }) => {
     return (
         <Modal
             isOpen={isOpen}
             onRequestClose={onRequestClose}
-            contentLabel="Example Modal"
+            contentLabel="First Modal"
             className="Modal"
             overlayClassName="Overlay"
+            ariaHideApp={false}
         >
             <div className="modal-content">
                 <div className="button-container">
-                    <button onClick={onRequestClose} className="modal-button">1명</button>
-                    <button onClick={onRequestClose} className="modal-button">2명</button>
-                    <button onClick={onRequestClose} className="modal-button">3명</button>
-                    <button onClick={onRequestClose} className="modal-button">4명 이상</button>
+                    <button onClick={() => onSelectNumberOfPeople('1명')} className="modal-button">1명</button>
+                    <button onClick={() => onSelectNumberOfPeople('2명')} className="modal-button">2명</button>
+                    <button onClick={() => onSelectNumberOfPeople('3명')} className="modal-button">3명</button>
+                    <button onClick={() => onSelectNumberOfPeople('4명 이상')} className="modal-button">4명 이상</button>
                 </div>
             </div>
         </Modal>

src/components/FourthModal.css

@@ -0,0 +1,43 @@
+.Modal {
+    width: 110px;
+    height: auto;
+    position: absolute;
+    background: #fff;
+    overflow: auto;
+    outline: none;
+    padding: '30px';
+}
+
+.Overlay {
+    position: 'fixed';
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.modal-content {
+    text-align: center;
+}
+
+.button-container {
+    align-items: center;
+}
+
+.modal-button {
+    background-color: #EAE3FC;
+    width: 173px;
+    height: 44px;
+    color: black;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px;
+    border-radius: 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.modal-button.selected {
+    background-color: #9A8CFF;
+}

src/components/FourthModal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Modal from 'react-modal';
+import './FourthModal.css';
+
+const FirstModal = ({ isOpen, onRequestClose, onSelectCar }) => {
+    return (
+        <Modal
+            isOpen={isOpen}
+            onRequestClose={onRequestClose}
+            contentLabel="Fourth Modal"
+            className="Modal"
+            overlayClassName="Overlay"
+            ariaHideApp={false}
+        >
+            <div className="modal-content">
+                <div className="button-container">
+                    <button onClick={() => onSelectCar('있다')} className="modal-button">있다</button>
+                    <button onClick={() => onSelectCar('없다')} className="modal-button">없다</button>
+                </div>
+            </div>
+        </Modal>
+    );
+}
+
+export default FirstModal;

src/components/SecondModal.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Modal from 'react-modal';
+import './FirstModal.css';
+
+const FirstModal = ({ isOpen, onRequestClose, onSelectNumberOfWeek }) => {
+    return (
+        <Modal
+            isOpen={isOpen}
+            onRequestClose={onRequestClose}
+            contentLabel="Second Modal"
+            className="Modal"
+            overlayClassName="Overlay"
+            ariaHideApp={false}
+        >
+            <div className="modal-content">
+                <div className="button-container">
+                    <button onClick={() => onSelectNumberOfWeek('1주')} className="modal-button">1주</button>
+                    <button onClick={() => onSelectNumberOfWeek('2주')} className="modal-button">2주</button>
+                    <button onClick={() => onSelectNumberOfWeek('3주')} className="modal-button">3주</button>
+                    <button onClick={() => onSelectNumberOfWeek('4주')} className="modal-button">4주</button>
+                </div>
+            </div>
+        </Modal>
+    );
+}
+
+export default FirstModal;

src/components/ThirdModal.css

@@ -0,0 +1,42 @@
+.Modal {
+    width: 110px;
+    height: auto;
+    position: absolute;
+    background: #fff;
+    overflow: auto;
+    outline: none;
+    padding: '30px';
+}
+
+.Overlay {
+    position: 'fixed';
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.modal-content {
+    text-align: center;
+}
+
+.button-container {
+    align-items: center;
+}
+
+.modal-button {
+    background-color: #EAE3FC;
+    width: 107px;
+    color: black;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px;
+    border-radius: 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.modal-button.selected {
+    background-color: #9A8CFF;
+}

src/components/ThirdModal.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'react-modal';
+import './ThirdModal.css';
+
+const FirstModal = ({ isOpen, onRequestClose, onSelectStatus }) => {
+    return (
+        <Modal
+            isOpen={isOpen}
+            onRequestClose={onRequestClose}
+            contentLabel="Third Modal"
+            className="Modal"
+            overlayClassName="Overlay"
+            ariaHideApp={false}
+        >
+            <div className="modal-content">
+                <div className="button-container">
+                    <button onClick={() => onSelectStatus('학생')} className="modal-button">학생</button>
+                    <button onClick={() => onSelectStatus('직장인')} className="modal-button">직장인</button>
+                    <button onClick={() => onSelectStatus('기타')} className="modal-button">기타</button>
+                </div>
+            </div>
+        </Modal>
+    );
+}
+
+export default FirstModal;