MY
-
-
-
- {myPopup[0].popupView}
-
+
- 회
+ {myPopup[0].popupView} 회
diff --git a/src/components/business/FloatingButton/FloatingButton.css b/src/components/business/FloatingButton/FloatingButton.css
new file mode 100644
index 0000000..ed98fe7
--- /dev/null
+++ b/src/components/business/FloatingButton/FloatingButton.css
@@ -0,0 +1,33 @@
+.floating-button {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: #49675a;
+ color: #fff;
+ font-size: 24px;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+ transition: background-color 0.3s ease;
+}
+
+.floating-button:hover {
+ background-color: #96b2a4;
+}
+
+.floating-button-modal {
+ position: fixed;
+ top: calc(64%); /* 버튼 바로 위에 위치하도록 수정 */
+ right: 20px; /* 화면 오른쪽에 위치하도록 수정 */
+ transform: translate(0, -50%);
+ overflow: auto;
+ outline: none;
+ border-radius: 25px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+ background-color: #fff; /* 배경 색상 추가 */
+ /* 추가적인 스타일 설정 */
+}
diff --git a/src/components/business/FloatingButton/FloatingButton.jsx b/src/components/business/FloatingButton/FloatingButton.jsx
new file mode 100644
index 0000000..89bd0f3
--- /dev/null
+++ b/src/components/business/FloatingButton/FloatingButton.jsx
@@ -0,0 +1,79 @@
+import React, {useState} from 'react';
+import './FloatingButton.css'; // 스타일 파일을 추가합니다.
+import Modal from 'react-modal';
+import ChatApi from "../../../api/chatApi";
+import ChatRoom from "../../business/Chat/ChatRoom";
+import ChatList from "../../business/Chat/ChatList";
+
+/**
+ * FloatingButton 컴포넌트
+ *
+ * @since 2024.03.04
+ * @author 이상민
+ */
+const FloatingButton = () => {
+ const [modalIsOpen, setModalIsOpen] = useState(false);
+ // const [buttonPosition, setButtonPosition] = useState({ top: 0, left: 0 });
+ const [selectedChatRoom, setSelectedChatRoom] = useState(null);
+
+ const openModal = () => {
+ const button = document.querySelector('.floating-button');
+ if (button) {
+ const rect = button.getBoundingClientRect();
+ // setButtonPosition({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX });
+ }
+ setModalIsOpen(true);
+ document.body.style.overflow = 'hidden';
+ };
+
+ /**
+ * 모달 닫을 때 사용
+ *
+ * @since 2024.03.04
+ * @author 이상민
+ */
+ const closeModal = () => {
+ setModalIsOpen(false);
+ // 모달이 닫힐 때 선택된 채팅방 정보 초기화
+ document.body.style.overflow = 'auto';
+ setSelectedChatRoom(null);
+ };
+
+ const handleChatRoomClick = (chatRoom) => {
+ console.log("chat room id : " + chatRoom)
+ setSelectedChatRoom(chatRoom);
+ };
+
+ return (
+ <>
+
+
+
+ {/* 선택된 채팅방이 없을 때에만 ChatList를 모달 안에 렌더링 */}
+ {!selectedChatRoom && }
+
+ {/* 선택된 채팅방이 있을 때 ChatRoomDetail을 표시 */}
+ {selectedChatRoom && }
+
+
+ );
+};
+
+export default FloatingButton;
diff --git a/src/components/common/Chat/ChatApp.css b/src/components/common/Chat/ChatApp.css
new file mode 100644
index 0000000..827a4dc
--- /dev/null
+++ b/src/components/common/Chat/ChatApp.css
@@ -0,0 +1,62 @@
+
+.rounded-rectangle {
+ position: relative;
+ width: 350px;
+ height: 600px;
+ border-radius: 20px;
+ overflow: hidden;
+ background-color: #ffffff;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+
+.content {
+ padding: 20px;
+ overflow-y: auto;
+}
+
+.bottom-nav {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background-color: #f0f0f0;
+ padding: 10px;
+}
+
+.bottom-nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: space-around;
+}
+
+.close-button {
+ position: absolute;
+ top: 17px;
+ right: 10px;
+ padding: 8px 12px;
+ border: none;
+ cursor: pointer;
+ font-size: 15px;
+}
+
+.chat-room:hover {
+ background-color: #f0f0f0; /* 호버 시 바뀔 배경색을 지정하세요 */
+ cursor: pointer;
+}
+
+/* 스크롤바의 너비를 조절합니다. */
+#messagesContainer::-webkit-scrollbar {
+ width: 8px; /* 웹킷 브라우저에서 스크롤바의 너비를 설정합니다. */
+}
+
+/* 스크롤바의 색상을 설정합니다. */
+#messagesContainer::-webkit-scrollbar-thumb {
+ background-color: #3498db; /* 스크롤바 색상 설정 */
+ border-radius: 4px; /* 스크롤바의 둥근 모서리를 설정합니다. */
+}
+
+/* 스크롤바 트랙의 색상을 설정합니다. */
+#messagesContainer::-webkit-scrollbar-track {
+ background-color: #f1f1f1; /* 스크롤바 트랙 색상 설정 */
+}
diff --git a/src/components/common/Chat/FormattedTime.jsx b/src/components/common/Chat/FormattedTime.jsx
new file mode 100644
index 0000000..1e9bf1c
--- /dev/null
+++ b/src/components/common/Chat/FormattedTime.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * 시간
+ *
+ * @since 2024.03.04
+ * @author 이상민
+ */
+const FormattedTime = ({ time }) => {
+ const dateObject = new Date(time);
+ const formattedTime = `${(dateObject.getMonth() + 1).toString().padStart(2, '0')}.${dateObject.getDate().toString().padStart(2, '0')} ${dateObject.getHours().toString().padStart(2, '0')}:${dateObject.getMinutes().toString().padStart(2, '0')}`;
+
+ return (
+
{formattedTime}
+ );
+};
+
+export default FormattedTime;
+
diff --git a/src/components/common/Chat/MeChatMessage.jsx b/src/components/common/Chat/MeChatMessage.jsx
index 0172786..2958c12 100644
--- a/src/components/common/Chat/MeChatMessage.jsx
+++ b/src/components/common/Chat/MeChatMessage.jsx
@@ -1,4 +1,5 @@
import React from "react";
+import FormattedTime from "./FormattedTime";
/**
* 나의 채팅 메시지 컴포넌트
@@ -7,16 +8,16 @@ import React from "react";
* @author 이상민
*/
const MeChatMessage = ({ nickname, time, text }) => {
+
return (
+ className="flex flex-col w-full max-w-[240px]
+ leading-1.5 p-4 border-gray-200 rounded-tl-xl rounded-bl-xl rounded-br-xl bg-gray-700"
+ style={{ height: 'auto' }} >
{nickname}
- {time}
+
{text}
diff --git a/src/components/common/Chat/OtherChatMessage.jsx b/src/components/common/Chat/OtherChatMessage.jsx
index b56b8b2..33dc0e2 100644
--- a/src/components/common/Chat/OtherChatMessage.jsx
+++ b/src/components/common/Chat/OtherChatMessage.jsx
@@ -1,4 +1,5 @@
import React from "react";
+import FormattedTime from "./FormattedTime";
/**
* 나 이외의 채팅 메시지 컴포넌트
@@ -10,13 +11,14 @@ const OtherChatMessage = ({ nickname, time, text }) => {
return (
+ className="flex flex-col w-full max-w-[240px]
+ leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl"
+ style={{ height: 'auto' }} >
{nickname}
- {time}
+
{text}
-
Delivered
);
diff --git a/src/components/common/InfoList/RankingList.js b/src/components/common/InfoList/RankingList.js
index 025fe64..bd038e8 100644
--- a/src/components/common/InfoList/RankingList.js
+++ b/src/components/common/InfoList/RankingList.js
@@ -9,16 +9,16 @@ export default RankingList;
function RankingList(props) {
return (
-
+
-
+
{props.id}위
-
-
+
{formatNumberWithCommas(props.content)} 회
diff --git a/src/components/common/Table/ChatTable.jsx b/src/components/common/Table/ChatTable.jsx
deleted file mode 100644
index 99ded25..0000000
--- a/src/components/common/Table/ChatTable.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import TableHeader from "./TableHeader";
-import TableRow from "./TableRow";
-
-/**
- * Table 컴포넌트 생성
- *
- * @since 2024.02.25
- * @author 이상민
- */
-const ChatTable = ({ headerTitles, sampleData }) => {
-
- const handleRowClick = (id) => {
- const currentUrl = window.location.pathname;
- const newUrl = `${currentUrl}/${id}`;
- // 팝업으로 새로운 페이지 열기
- window.open(newUrl, '_blank', 'width=400,height=700,toolbar=no,scrollbars=yes,resizable=yes');
-
- // const currentUrl = window.location.pathname;
- // window.location.href = `${currentUrl}/${id}`;
- };
-
- const renderTableBody = (sampleData) => (
-
- {sampleData.map((rowData, index) => (
- handleRowClick(rowData[0])} />
- ))}
-
- );
-
- return (
-
-
-
- {renderTableBody(sampleData)}
-
-
- );
- };
-
- export default ChatTable;
-
diff --git a/src/components/common/Table/MyPostListTable.js b/src/components/common/Table/MyPostListTable.js
index 7aae700..0ad9088 100644
--- a/src/components/common/Table/MyPostListTable.js
+++ b/src/components/common/Table/MyPostListTable.js
@@ -23,17 +23,16 @@ function MyPostListTable({ posts }) {
<>
- {displayedData.map((post, index) => (
-
- |
- {index + 1}
- |
-
- {post.title}
- |
- {post.pulledDate} |
-
- ))}
+ {displayedData.map((post, index) => (
+
+ |
+ {index + 1}
+ |
+
+ {post.title}
+ |
+
+ ))}
diff --git a/src/components/common/Table/Table.jsx b/src/components/common/Table/Table.jsx
index 4b320c7..c3b0869 100644
--- a/src/components/common/Table/Table.jsx
+++ b/src/components/common/Table/Table.jsx
@@ -22,16 +22,15 @@ const Table = ({ headerTitles, sampleData }) => {
))}
);
-
+
return (
-
-
- {renderTableBody(sampleData)}
-
+
+
+ {renderTableBody(sampleData)}
+
- );
- };
-
- export default Table;
-
+ );
+};
+
+export default Table;
diff --git a/src/components/common/Table/TableRow.jsx b/src/components/common/Table/TableRow.jsx
index 2064ca0..1546687 100644
--- a/src/components/common/Table/TableRow.jsx
+++ b/src/components/common/Table/TableRow.jsx
@@ -26,4 +26,4 @@ const TableRow = ({ rowData, onRowClick }) => {
}
};
-export default TableRow;
\ No newline at end of file
+export default TableRow;
diff --git a/src/pages/administrator/adminChat.jsx b/src/pages/administrator/adminChat.jsx
index 405e121..43ec963 100644
--- a/src/pages/administrator/adminChat.jsx
+++ b/src/pages/administrator/adminChat.jsx
@@ -1,6 +1,6 @@
import React from "react";
import AdminChatApi from "../../api/administrator/adminChatApi";
-import ChatPage from "../../components/common/Chat/ChatPage";
+import ChatPage from "../../components/administrator/ChatPage";
/**
* 채팅 페이지 제작
diff --git a/src/pages/administrator/adminChatRoom.jsx b/src/pages/administrator/adminChatRoom.jsx
deleted file mode 100644
index f1c7b87..0000000
--- a/src/pages/administrator/adminChatRoom.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import ChatRoom from "../../components/common/Chat/ChatRoom";
-
-/**
- * 관리자 채팅방
- *
- * @since 2024.03.03
- * @author 이상민
- */
-const AdminChatRoom = () => {
- return (
-
- );
-};
-
-export default AdminChatRoom;
diff --git a/src/pages/business/ad.jsx b/src/pages/business/ad.jsx
index b96fd39..083acab 100644
--- a/src/pages/business/ad.jsx
+++ b/src/pages/business/ad.jsx
@@ -13,6 +13,7 @@ import MyCommunityApi from "../../api/business/createAd/myCommunityApi";
import FileUpload from "../../components/common/Input/FileUpload";
import MyPopupApi from "../../api/business/createAd/myPopupApi";
import Button from "../../components/common/Button/Button";
+import FloatingButton from "../../components/business/FloatingButton/FloatingButton";
/**
* Ad 페이지 제작
@@ -103,6 +104,7 @@ const Ad = () => {
diff --git a/src/pages/business/businessChatRoom.jsx b/src/pages/business/businessChatRoom.jsx
deleted file mode 100644
index 75bf8a7..0000000
--- a/src/pages/business/businessChatRoom.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import ChatRoom from "../../components/common/Chat/ChatRoom";
-
-/**
- * 사업체 채팅방
- *
- * @since 2024.03.03
- * @author 이상민
- */
-const BusinessChatRoom = () => {
- return (
-
- );
-};
-
-export default BusinessChatRoom;
diff --git a/src/pages/business/chat.jsx b/src/pages/business/chat.jsx
deleted file mode 100644
index e6b872f..0000000
--- a/src/pages/business/chat.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import ChatApi from "../../api/chatApi";
-import ChatPage from "../../components/common/Chat/ChatPage";
-
-/**
- * 채팅 페이지 제작
- *
- * @since 2024.03.02
- * @author 이상민
- */
-const Chat = () => {
- return (
-
- );
-};
-
-export default Chat;
diff --git a/src/pages/business/createPlan.jsx b/src/pages/business/createPlan.jsx
index 4eff523..b6876db 100644
--- a/src/pages/business/createPlan.jsx
+++ b/src/pages/business/createPlan.jsx
@@ -7,7 +7,8 @@ import DepartmentDropdown from "../../components/business/DepartmentDropdown/Dep
import FloorDropdown from "../../components/business/FloorDropdown/FloorDropdown";
import Button from "../../components/common/Button/Button";
import PlanApi from "../../api/business/createPlan/planApi";
-import {useRef, useState} from "react";
+import React, {useRef, useState} from "react";
+import FloatingButton from "../../components/business/FloatingButton/FloatingButton";
/**
* CreatePlan 페이지 제작
@@ -86,6 +87,7 @@ const PlanContentBox = ({onOpenDateChange, onCloseDateChange, onPhoneNumberChang
secondInput={
}/>
+
)
}
diff --git a/src/pages/business/dashboard.jsx b/src/pages/business/dashboard.jsx
index 5c3cacc..48c8899 100644
--- a/src/pages/business/dashboard.jsx
+++ b/src/pages/business/dashboard.jsx
@@ -5,6 +5,7 @@ import PopupCurrent from "../../components/business/DashBoard/PopupCurrent";
import PopupRanking from "../../components/business/DashBoard/PopupRanking";
import PopupStatistics from "../../components/business/DashBoard/PopupStatistics";
import PopupPostList from "../../components/business/DashBoard/PopupPostList";
+import FloatingButton from "../../components/business/FloatingButton/FloatingButton";
/**
* DashBoard 페이지 제작
@@ -13,6 +14,7 @@ import PopupPostList from "../../components/business/DashBoard/PopupPostList";
* @author 이승민
*/
const DashBoard = () => {
+
return (
@@ -32,6 +34,7 @@ const DashBoard = () => {
}/>
+
)
}
diff --git a/src/pages/business/plan.jsx b/src/pages/business/plan.jsx
index 5b07d5e..e97bcf1 100644
--- a/src/pages/business/plan.jsx
+++ b/src/pages/business/plan.jsx
@@ -14,6 +14,7 @@ import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import './planViewer.css';
+import FloatingButton from "../../components/business/FloatingButton/FloatingButton";
/**
* Plan 페이지 제작
@@ -102,6 +103,7 @@ const Plan = () => {
}/>
}/>
+
);
};
diff --git a/src/pages/business/plans.jsx b/src/pages/business/plans.jsx
index 3aef05d..cd529bf 100644
--- a/src/pages/business/plans.jsx
+++ b/src/pages/business/plans.jsx
@@ -2,9 +2,10 @@ import ContentBox from "../../components/common/ContentBox/ContentBox";
import CategoryDropdown from "../../components/business/CategoryDropdown/CategoryDropdown";
import EntranceStatusDropdown from "../../components/business/EntranceStatusDropdown/EntranceStatusDropdown";
import MyPlanTable from "../../components/business/MyPlanTable/MyPlanTable";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
import MyPlansApi from "../../api/business/plans/myPlansApi";
import SearchButton from "../../components/common/Button/SearchButton";
+import FloatingButton from "../../components/business/FloatingButton/FloatingButton";
/**
* Plans 페이지 제작
@@ -38,6 +39,7 @@ function Plans() {
onClick={getPlans(category, entranceStatus, page, limit, setTotal, setPlans)}/>
+
}/>