주석추가 (#46)

* [FEAT] 채팅방 리스트 보여주기 * [FEAT] 채팅방 디테일 수정 * [FEAT] 채팅방 제목 CSS 수정 * [FEAT] css 변경 * [CHORE] 파일 위치 및 css 변경 * [CHORE] 머지 해결 * [REFACTOR] Ranking y축 간격 오류 수정 * [FEAT] 사업체 플로팅 버튼 추가 * [FEAT] 사업체 채팅 ui 변경 * [CHORE] 오타 수정 * [FEAT] 알람 추가 * [FEAT] 주석 추가 * 주석추가 * [FEAT] 채팅 방 생성 추가 * [CHORE] 채팅 방 생성 제목 수정 * [REFACTOR] 결제 방법 제거 --------- Co-authored-by: sangminee <lsmlee99@gmail.com>
Team-OYA · Mar 13, 2024 · ded181f · ded181f
1 parent 3eafaa8
commit ded181f
Show file tree

Hide file tree

Showing 17 changed files with 149 additions and 46 deletions.
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -1,5 +1,10 @@
 import firebase from "firebase/app";
 
+/**
+ * @since 2024.03.08
+ * @author 이상민
+ */
+
 importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
 importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js");
 

diff --git a/src/api/chatApi.js b/src/api/chatApi.js
@@ -24,6 +24,16 @@ const ChatApi = {
     getMessages: async (roomId = 0) => {
         return await userBaseApi.get(`/chat/rooms/${roomId}`);
     },
+
+    /**
+     * 나의 채팅방 생성하기
+     *
+     * @since 2024.03.12
+     * @author 이상민
+     */
+    createChatRoom: async (roomName) => {
+        return await userBaseApi.post(`/chat/room`, { roomName });
+    },
 }
 
 export default ChatApi;
diff --git a/src/api/popupApi.js b/src/api/popupApi.js
@@ -23,7 +23,6 @@ const PopupApi = {
      * @author 이상민
      */
     savePopup: async (popupData) => {
-        console.log(popupData)
         const formData = new FormData();
         formData.append('data', new Blob([JSON.stringify(popupData)], { type: 'application/json' }));
         const response = await userInstance.post(`/popups`, formData);

diff --git a/src/components/administrator/ChatPage.jsx b/src/components/administrator/ChatPage.jsx
@@ -3,6 +3,10 @@ import ContentBox from "../../components/common/ContentBox/ContentBox";
 import Pagination from "../../components/common/Pagination/Pagination";
 import ChatTable from "./ChatTable";
 
+/**
+ * @since 2024.03.05
+ * @author 이상민
+ */
 const ChatPage = ({ api, title }) => {
     const [data, setData] = useState(null);
     const [limit, setLimit] = useState(10);

diff --git a/src/components/business/Chat/ChatList.jsx b/src/components/business/Chat/ChatList.jsx
@@ -2,14 +2,15 @@ import React, {useEffect, useState} from 'react';
 import '../../common/Chat/ChatApp.css';
 import Button from "../../common/Button/Button";
 import FormattedTime from "../../common/Chat/FormattedTime";
+import CreateRoomForm from '../../business/Chat/CreateRoomForm';
 
 /**
  * 채팅 리스트 컴포넌트
  *
  * @since 2024.03.02
  * @author 이상민
  */
-const ChatList = ({api, onChatRoomClick, closeModal}) => {
+const ChatList = ({api, onChatRoomClick, onCreateRoomClick, closeModal}) => {
 
     const [data, setData] = useState([]);
     const [limit, setLimit] = useState(10);
@@ -19,6 +20,10 @@ const ChatList = ({api, onChatRoomClick, closeModal}) => {
         onChatRoomClick(chatRoom[0]);
     };
 
+    const handleCreateRoomButtonClick = () => {
+        onCreateRoomClick(true);
+    };
+
     useEffect(() => {
         const fetchData = async () => {
             try {
@@ -77,7 +82,8 @@ const ChatList = ({api, onChatRoomClick, closeModal}) => {
                                             d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                     </svg>
                                 </span>
-                            </span>} />
+                            </span>}
+                        onClick={handleCreateRoomButtonClick}/>
             </div>
 
             <button className="close-button" onClick={closeModal}>

diff --git a/src/components/business/Chat/CreateRoomForm.jsx b/src/components/business/Chat/CreateRoomForm.jsx
@@ -0,0 +1,74 @@
+import React, {useState} from 'react';
+import Button from "../../common/Button/Button";
+import ChatApi from "../../../api/chatApi";
+
+/**
+ * 채팅방 생성하기 컴포넌트
+ *
+ * @since 2024.03.12
+ * @author 이상민
+ */
+const CreateRoomForm = ({ onClose }) => {
+
+    const [roomName, setRoomName] = useState('');
+
+    const createChatRoom = async (roomName) => {
+        try {
+            console.log("채팅방 생성 요청:", roomName);
+            const response = await ChatApi.createChatRoom(roomName);
+            console.log(response.data.data)
+            console.log("채팅방 생성 성공:", roomName);
+            onClose();
+        } catch (error) {
+            console.error("채팅방 생성 오류:", error);
+        }
+    };
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        createChatRoom(roomName);
+    };
+
+    return (
+        <div className="rounded-rectangle">
+            <form className="max-w-sm mx-auto p-4" onSubmit={handleSubmit}
+                  style={{
+                      marginLeft: '20px',
+                      marginRight: '20px',
+                      marginTop: '215px',
+                      textAlign: 'center',
+                      justifyContent: 'center'
+                  }}>
+                <label htmlFor="roomName" className="block mb-2 font-medium text-gray-900">문의사항이 있으신가요? </label>
+                <input
+                    type="text"
+                    id="roomName"
+                    aria-describedby="helper-text-explanation"
+                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                    placeholder="ex) 더현대 서울 팝업 문의 드립니다."
+                    value={roomName}
+                    onChange={(e) => setRoomName(e.target.value)} // onChange 이벤트 핸들러를 올바르게 바인딩했는지 확인합니다.
+                />
+                <div style={{
+                    marginTop: '10px',
+                    textAlign: 'center',
+                    justifyContent: 'center'
+                }}>
+                    {/* Button 컴포넌트의 onClick prop을 전달합니다. */}
+                    <Button text={<span className="flex items-center justify-center">채팅방 생성하기</span>}
+                            onClick={handleSubmit}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleSubmit(e);
+                                }
+                            }}/>
+                </div>
+            </form>
+            <button className="close-button" onClick={onClose}>
+                뒤로가기
+            </button>
+        </div>
+    );
+};
+
+export default CreateRoomForm;
diff --git a/src/components/business/DashBoard/PopupCurrent.js b/src/components/business/DashBoard/PopupCurrent.js
@@ -5,10 +5,11 @@ import InfoList from '../../common/InfoList/InfoList';
 import PopupCurrentApi from '../../../api/business/dashBoard/popupCurrnetApi';
 import React, { useEffect, useState } from 'react';
 
+
 /**
  * 대시보드 현재 팝업
  *
- * @since 2024.02.27
+ * @since 2024.02.28
  * @author 이승민
  */
 

diff --git a/src/components/business/DashBoard/PopupPostList.js b/src/components/business/DashBoard/PopupPostList.js
@@ -6,7 +6,7 @@ import PopupMyApi from "../../../api/business/dashBoard/popupMyApi";
 /**
  * 대시보드 팝업 리스트
  *
- * @since 2024.02.27
+ * @since 2024.02.28
  * @author 이승민
  */
 

diff --git a/src/components/business/DashBoard/PopupRanking.js b/src/components/business/DashBoard/PopupRanking.js
@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import RankingList from '../../common/InfoList/RankingList';
 import PopupRankingApi from '../../../api/business/dashBoard/popupRankingApi';
 
+
 /**
  * 대시보드 팝업 랭킹
  *
- * @since 2024.02.27
+ * @since 2024.02.28
  * @author 이승민
  */
 
@@ -39,7 +40,7 @@ function PopupRanking() {
                             MY
                         </div>
                         <div className='title flex'>
-                            {myPopup[0].popupName}
+                            {myPopup[0].popupName.length > 30 ? `${myPopup[0].popupName.slice(0, 25)}...` : myPopup[0].popupName}
                         </div>
                     </div>
                     <div className='views flex w-12'>
@@ -50,7 +51,7 @@ function PopupRanking() {
                 </div>
             )}
             {popupData.map(item => (
-                <RankingList key={item.lank} id={item.lank} title={item.popupName} content={item.popupView} />
+                <RankingList key={item.lank} id={item.lank} title={item.popupName.length > 20 ? `${item.popupName.slice(0, 20)}...` : item.popupName} content={item.popupView} />
             ))}
         </div>
       );

diff --git a/src/components/business/DashBoard/PopupStatistics.js b/src/components/business/DashBoard/PopupStatistics.js
@@ -5,14 +5,14 @@ import UserStatisticsApi from '../../../api/business/dashBoard/userStatisticsApi
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
+
 /**
- * 대시보드 팝업 통계
+ * 대시보드 팝업 그래프
  *
  * @since 2024.02.28
  * @author 이승민
  */
 
-
 const PopupStatistics = () => {
     const [chartData, setChartData] = useState({
         labels: [],

diff --git a/src/components/business/FloatingButton/FloatingButton.jsx b/src/components/business/FloatingButton/FloatingButton.jsx
@@ -4,6 +4,7 @@ import Modal from 'react-modal';
 import ChatApi from "../../../api/chatApi";
 import ChatRoom from "../../business/Chat/ChatRoom";
 import ChatList from "../../business/Chat/ChatList";
+import CreateRoomForm from "../Chat/CreateRoomForm";
 
 /**
  * FloatingButton 컴포넌트
@@ -14,6 +15,7 @@ import ChatList from "../../business/Chat/ChatList";
 const FloatingButton = () => {
     const [modalIsOpen, setModalIsOpen] = useState(false);
     const [selectedChatRoom, setSelectedChatRoom] = useState(null);
+    const [isCreatingRoom, setIsCreatingRoom] = useState(false);
 
     const openModal = () => {
         const button = document.querySelector('.floating-button');
@@ -41,6 +43,14 @@ const FloatingButton = () => {
         setSelectedChatRoom(chatRoom);
     };
 
+    const handleCreateRoomButtonClick = () => {
+        setIsCreatingRoom(true);
+    };
+
+    const handleCloseCreateRoom = () => {
+        setIsCreatingRoom(false);
+    };
+
     return (
         <>
             <div className="fixed bottom-0 right-0 mb-4 mr-8">
@@ -63,11 +73,23 @@ const FloatingButton = () => {
                 shouldCloseOnOverlayClick={true} // 모달 이외의 영역 클릭시 모달 닫힘 설정
                 shouldCloseOnEsc={true}
             >
-                {/* 선택된 채팅방이 없을 때에만 ChatList를 모달 안에 렌더링 */}
-                {!selectedChatRoom && <ChatList api={ChatApi} url="/chat" role="user" onChatRoomClick={handleChatRoomClick} closeModal={closeModal}/>}
+                {/* 선택된 채팅방이 없고, 새 방 생성 폼이 열리지 않은 경우에만 ChatList를 모달 안에 렌더링 */}
+                {!selectedChatRoom && !isCreatingRoom && (
+                    <ChatList
+                        api={ChatApi}
+                        url="/chat"
+                        role="user"
+                        onChatRoomClick={handleChatRoomClick}
+                        onCreateRoomClick={handleCreateRoomButtonClick}
+                        closeModal={closeModal}
+                    />
+                )}
 
                 {/* 선택된 채팅방이 있을 때 ChatRoomDetail을 표시 */}
                 {selectedChatRoom && <ChatRoom selectedChatRoom={selectedChatRoom} setSelectedChatRoom={setSelectedChatRoom}/>}
+
+                {/* 새 방 생성 폼 */}
+                {isCreatingRoom && <CreateRoomForm onClose={handleCloseCreateRoom} />}
             </Modal>
         </>
     );

diff --git a/src/components/common/InfoList/InfoList.js b/src/components/common/InfoList/InfoList.js
@@ -6,6 +6,7 @@ export default InfoList;
  * @since 2024.03.01
  * @author 이승민
  */
+
 function InfoList(props) {
     return (
         <div className="info-list flex w-68 text-gray-text-color-700 text-sm">

diff --git a/src/components/common/InfoList/RankingList.js b/src/components/common/InfoList/RankingList.js
@@ -6,6 +6,7 @@ export default RankingList;
  * @since 2024.03.01
  * @author 이승민
  */
+
 function RankingList(props) {
     return (
         <div className="popup-ranking flex py-1">

diff --git a/src/firebase-messaging-sw.js b/src/firebase-messaging-sw.js
@@ -2,6 +2,10 @@ import firebase from 'firebase/app'
 import 'firebase/messaging'
 import NotificationApi from "./api/Common/notificationApi";
 
+/**
+ * @since 2024.03.08
+ * @author 이상민
+ */
 const firebaseConfig = {
     apiKey: `${process.env.REACT_APP_API_KEY}`,
     authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,

diff --git a/src/pages/business/ad.jsx b/src/pages/business/ad.jsx
@@ -66,36 +66,13 @@ const Ad = () => {
                 </div>
                 <div className="flex-auto">
                     <BuyerContentBox/>
-                    <ContentBox
-                        title="결제 방법"
-                        content={
-                            <>
-                                <div className="flex items-center">
-                                    <PaymentButton
-                                        url={TossPayImage}
-                                        value="toss"
-                                        onClick={handleSelectedPaymentItem}
-                                        selectedItem={selectedPayment}/>
-                                    <PaymentButton
-                                        url={KakaoPayImage}
-                                        value="kakao"
-                                        onClick={handleSelectedPaymentItem}
-                                        selectedItem={selectedPayment}/>
-                                    <PaymentButton
-                                        url={NaverPayImage}
-                                        value="naver"
-                                        onClick={handleSelectedPaymentItem}
-                                        selectedItem={selectedPayment}/>
-                                    {isOpen && (
-                                        <TossPayModal
-                                            postId={postId}
-                                            postType={postType}
-                                            price={price}
-                                            file={mainImageFile}/>
-                                    )}
-                                </div>
-                            </>
-                        }/>
+                    {isOpen && (
+                        <TossPayModal
+                            postId={postId}
+                            postType={postType}
+                            price={price}
+                            file={mainImageFile}/>
+                    )}
                     <ContentBox
                         title="최종 결제금액"
                         content={

diff --git a/src/pages/business/dashboard.jsx b/src/pages/business/dashboard.jsx
@@ -13,6 +13,7 @@ import FloatingButton from "../../components/business/FloatingButton/FloatingBut
  * @since 2024.02.28
  * @author 이승민
  */
+
 const DashBoard = () => {
 
     return (

diff --git a/src/pages/business/plan.jsx b/src/pages/business/plan.jsx
@@ -107,16 +107,13 @@ const Plan = () => {
                 description: popupDescription,
             };
             const result = await PopupApi.savePopup(popupDataToSave);
-            if (result.data.message) {
-                alert(result.data.message);
-            }
             if (result.status === 200) {
                 window.location.href = `/plans/${planId}`
             }
             const response = await PopupApi.findByPlanId(planId);
             setPopupData(response.data.data);
         } catch (error) {
-            console.error("로그인 오류:", error);
+            console.error(error);
         }
     };