feat: 채팅 API 연결

SPARCS-Service-Hackathon-2024 · Feb 16, 2024 · 8a7e344 · 8a7e344
1 parent aeedd6f
commit 8a7e344
Show file tree

Hide file tree

Showing 10 changed files with 11,632 additions and 6,074 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.css b/src/App.css
@@ -13,7 +13,6 @@
     width: 100%;
     height: calc(100vh - env(safe-area-inset-bottom));
     background-color: #fff;
-    overflow-y: hidden;
     --v-scrollbar-offset: 0 !important;
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */

diff --git a/src/components/FirstModal.css b/src/components/FirstModal.css
@@ -1,18 +1,23 @@
-.Modal {
+.Modal-1 {
     width: 100%;
-    height: auto;
-    background: #fff;
-    overflow: auto;
-    outline: none;
-    padding: '30px';
+    height: 170px;
+    position: fixed;
+    bottom: 0;
+    /*bottom: env(safe-area-inset-bottom); !* 아이폰X 이상의 모델에서 하단에 위치하도록 설정 *!*/
+    background: #fff; /* 모달의 배경색 */
+    z-index: 1000;
+    transition: transform 0.3s ease; /* 모달이 나타나거나 사라질 때 부드럽게 나타나도록 설정 */
+    border-radius: 20px;
 }
 
 .Overlay {
-    position: 'fixed';
+    position: fixed; /* 오버레이를 화면에 고정 */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    bottom: env(safe-area-inset-bottom); /* 아이폰X 이상의 모델에서 하단에 위치하도록 설정 */
+    z-index: 999; /* 오버레이가 모달 바로 뒤에 위치하도록 z-index 설정 */
 }
 
 .modal-content {
@@ -29,8 +34,7 @@
     width: 168px;
     color: black;
     border: none;
-    padding: 10px 20px;
-    margin: 10px;
+
     border-radius: 44px;
     font-size: 16px;
     cursor: pointer;

diff --git a/src/components/FirstModal.js b/src/components/FirstModal.js
@@ -8,7 +8,7 @@ const FirstModal = ({ isOpen, onRequestClose, onSelectNumberOfPeople }) => {
             isOpen={isOpen}
             onRequestClose={onRequestClose}
             contentLabel="First Modal"
-            className="Modal"
+            className="Modal-1"
             overlayClassName="Overlay"
             ariaHideApp={false}
         >

diff --git a/src/components/FourthModal.css b/src/components/FourthModal.css
@@ -1,6 +1,6 @@
 .Modal {
     width: 100%;
-    height: 170px;
+    height: 110px;
     position: fixed;
     bottom: 0;
     /*bottom: env(safe-area-inset-bottom); !* 아이폰X 이상의 모델에서 하단에 위치하도록 설정 *!*/
@@ -27,7 +27,6 @@
 
 .button-container {
     align-items: center;
-    padding-top: 20px;
 }
 
 .modal-button {
@@ -37,6 +36,7 @@
     color: black;
     border: none;
     padding: 10px 20px;
+    margin: 15px 8px 5px 8px;
     border-radius: 20px;
     font-size: 16px;
     cursor: pointer;

diff --git a/src/components/SecondModal.js b/src/components/SecondModal.js
@@ -6,9 +6,8 @@ const FirstModal = ({ isOpen, onRequestClose, onSelectNumberOfWeek }) => {
     return (
         <Modal
             isOpen={isOpen}
-            onRequestClose={onRequestClose}
             contentLabel="Second Modal"
-            className="Modal"
+            className="Modal-1"
             overlayClassName="Overlay"
             ariaHideApp={false}
         >

diff --git a/src/components/ThirdModal.css b/src/components/ThirdModal.css
@@ -1,19 +1,22 @@
-.Modal {
-    width: 110px;
-    height: auto;
-    position: absolute;
-    background: #fff;
-    overflow: auto;
-    outline: none;
-    padding: '30px';
+.Modal-3 {
+    width: 100%;
+    height: 110px;
+    position: fixed;
+    bottom: 0;
+    /*bottom: env(safe-area-inset-bottom); !* 아이폰X 이상의 모델에서 하단에 위치하도록 설정 *!*/
+    background: #fff; /* 모달의 배경색 */
+    z-index: 1000;
+    transition: transform 0.3s ease; /* 모달이 나타나거나 사라질 때 부드럽게 나타나도록 설정 */
+    border-radius: 20px;
 }
 
 .Overlay {
-    position: 'fixed';
+    position: fixed; /* 오버레이를 화면에 고정 */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 999; /* 오버레이가 모달 바로 뒤에 위치하도록 z-index 설정 */
 }
 
 .modal-content {
@@ -24,14 +27,14 @@
     align-items: center;
 }
 
-.modal-button {
+.modal-button-3 {
     background-color: #EAE3FC;
     width: 107px;
     color: black;
     border: none;
     padding: 10px 20px;
-    margin: 10px;
     border-radius: 20px;
+    margin: 15px 8px 5px 8px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;

diff --git a/src/components/ThirdModal.js b/src/components/ThirdModal.js
@@ -8,15 +8,15 @@ const FirstModal = ({ isOpen, onRequestClose, onSelectStatus }) => {
             isOpen={isOpen}
             onRequestClose={onRequestClose}
             contentLabel="Third Modal"
-            className="Modal"
+            className="Modal-3"
             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>
+                    <button onClick={() => onSelectStatus('학생')} className="modal-button-3">학생</button>
+                    <button onClick={() => onSelectStatus('직장인')} className="modal-button-3">직장인</button>
+                    <button onClick={() => onSelectStatus('기타')} className="modal-button-3">기타</button>
                 </div>
             </div>
         </Modal>

diff --git a/src/css/chat.css b/src/css/chat.css
@@ -19,6 +19,7 @@
 .message-container {
     display: flex;
     align-items: flex-end;
+    overflow-x: hidden;
 }
 
 .chat-profile, .transparent-div {
@@ -47,7 +48,11 @@
 .text-input {
     flex-grow: 1;
     margin-right: 10px;
-    padding: 10px;
+    margin-left: 10px;
+    width: 317px;
+
+    padding: 10px 0 10px 16px;
+    height: 20px;
     border-radius: 20px;
     border: 1px solid #ddd;
 }
@@ -60,3 +65,41 @@
     color: #FFFFFF;
     cursor: pointer;
 }
+
+.my-input-container {
+
+    display: flex;
+    background-color: #FFFFFF;
+    height: calc(56px + env(safe-area-inset-bottom)); /* 아이폰X 이상의 모델에서 하단에 위치하도록 설정 */
+    padding: 8px 0 8px 16px;
+    bottom: 0;
+    position: fixed;
+    z-index: 999;
+    right: 0;
+    width: 100%; /* 컨테이너 너비를 최대로 설정 */
+}
+
+.padding-2 {
+    height: 100px;
+}
+
+.send-button {
+    padding-right: 16px;
+    margin-top: 10px;
+    width: 24px;
+    height: 24px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border-left-color: #09f;
+    animation: spin 1s linear infinite;
+}