[CHORE] 채팅 기능 CSS 및 위치 수정 (#34)

* header color 구분 * sideBar Active 상태 useState 적용 및 색상 변경 * [FEAT] 관리자 웹 수정 (#13) * [FEAT] 관리자 사업계획서 리스트 띄우기 * [FIX] 로그인 페이지 UI 수정 * [FEAT] 사업계획서 상세 보기 API 연결 * [FEAT] 사업계획서 상세 보기 버튼 UI * [FEAT] 사업체 detail 버튼 디테일 수정 * [FEAT] alert 달기 * [FEAT] 사용자 목록 제목 수정, 페이지네이션 달기 * [CHORE] 유저 목록 추가 * [CHORE] 사용자 요소 값 수정 * [CHORE] 필요없는 파일 삭제 * [CHORE] 오류 수정 * 대시보드 기초 구조 생성 및 현황 view생성 * [FEAT] 로그인 기능 추가 (#14) * [FEAT] 관리자 사업계획서 리스트 띄우기 * [FIX] 로그인 페이지 UI 수정 * [FEAT] 사업계획서 상세 보기 API 연결 * [FEAT] 사업계획서 상세 보기 버튼 UI * [FEAT] 사업체 detail 버튼 디테일 수정 * [FEAT] alert 달기 * [FEAT] 사용자 목록 제목 수정, 페이지네이션 달기 * [CHORE] 유저 목록 추가 * [CHORE] 사용자 요소 값 수정 * [CHORE] 필요없는 파일 삭제 * [CHORE] 오류 수정 * [FEAT] 로그인 api 연결 * [FEAT] 팝업스토어 순위 적용 및 게시글 목록 기초 생성 * 내 팝업스토어 게시글 목록 생성 * [FEAT] Statistics Chart 적용 * [FEAT]axios baseApi 세팅 * [FEAT] user, admin Base Api 분리 * authApi 실제서버 기반 URL로 변경 * [FEAT] 디테일 변경 (#17) * [FEAT] 로그아웃 추가 * [FEAT] 사업계획서에 따른 팝업 게시글 정보 보기 api 연결 * [FEAT] 마크다운 형식으로 값 저장 (수정필요) * [FEAT] 관리자, 사업체 채팅 목록 보기 * [CHORE] 채팅 url 변경 * [CHORE] dev 머지 * [FEAT]BaseApi class명 수정 및 통계 수정 및 데이터 적용 * [FEAT] 대시보드 통신 구현 * [FEAT] 토스페이 결제 기능 구현 (#19) * [REFACTOR] develop 충돌 해결 * [REFACTOR] 중첩 try-catch 문 제거 * [REFACTOR] 토스페이 위젯 모달창으로 띄우기 * [FEAT] 구매자 정보 조회 API 연동 * [REFACTOR] 광고 분류 선택 시 결제 금액 변경 * [REFACTOR] develop 충돌 해결 * [REFACTOR] 광고 분류에 따라 게시글 리스트 전환 * [REFACTOR] 광고 게시글 체크박스 처리 * [FEAT] 팝업스토어 게시글 이미지 업로드 추가 * [REFACTOR] 사업계획서 제안 및 광고 신청 시 이미지 업로드 기능 구현 (#20) * [REFACTOR] 광고 결제 시 메인 이미지 업로드 기능 구현 * [REFACTOR] 광고 결제 시 게시글 아이디 추출 기능 구현 * [REFACTOR] API 호출 방식 변경 * [REFACTOR] 달력 컴포넌트 type date 로 변경 * [FEAT] 사업계획서 제안 API 연동 * [REFACTOR] 내비바 페이지 연결 및 디자인 일부 수정 (#21) * [REFACTOR] 사용자에 따라 홈 위치 변경 * [REFACTOR] 내비바 페이지 연결 * [REFACTOR] 관리자용 토큰 접근으로 수정 * [REFACTOR] 로그인 시 엔터 이벤트 추가 * [REFACTOR] 내비바 텍스트 및 배경색 변경 * [REFACTOR] 대시보드 텍스트 색상 변경 * [REFACTOR] 팝업스토어 게시글 상세정보 조회 * [FIX] 드롭다운 문제 해결 * [REFACTOR] 드롭다운 항목 선택 시 검색 조건 설정 * [REFACTOR] 조건 검색 버튼 변경 * [FEATURE] 채팅 기능 (#22) * [FEAT] 로그아웃 추가 * [FEAT] 사업계획서에 따른 팝업 게시글 정보 보기 api 연결 * [FEAT] 마크다운 형식으로 값 저장 (수정필요) * [FEAT] 관리자, 사업체 채팅 목록 보기 * [CHORE] 채팅 url 변경 * [CHORE] dev 머지 * [FEAT] 팝업 게시글 글+사진 서버에 저장 * [FEAT] 채팅 구현 * [CHORE] 머지해결 * [FEATURE] not defined 해결 (#24) * [FEAT] 로그아웃 추가 * [FEAT] 사업계획서에 따른 팝업 게시글 정보 보기 api 연결 * [FEAT] 마크다운 형식으로 값 저장 (수정필요) * [FEAT] 관리자, 사업체 채팅 목록 보기 * [CHORE] 채팅 url 변경 * [CHORE] dev 머지 * [FEAT] 팝업 게시글 글+사진 서버에 저장 * [FEAT] 채팅 구현 * [CHORE] 머지해결 * [CHORE] not defined 해결 * [REFACTOR] 각종 에러 수정 * [REFACTOR] 결제 수단 버튼 추가 및 디자인 세부 수정 (#28) * [REFACTOR] 결제 방법 추가 * [REFACTOR] 결제하기 버튼 추가 * [REFACTOR] 드롭다운 오른쪽 정렬 * [REFACTOR] 드롭다운 버튼 색상 변경 * [REFACTOR] Home 이미지 bg 추가 * [Refactor] 펭지ㅣ 이동 버튼 수정 * [Refactor] 로그인view수정, 표시 favicon 변경 * [FEAUTRE] 문의하기 수정 (#33) * [FEAT] 채팅방 리스트 보여주기 * [FEAT] 채팅방 디테일 수정 * [FEAT] 채팅방 제목 CSS 수정 * [FEAT] css 변경 * [CHORE] 파일 위치 및 css 변경 * [CHORE] 머지 해결 * [REFACTOR] Ranking y축 간격 오류 수정 * [FEAT] 사업체 플로팅 버튼 추가 --------- Co-authored-by: LSMJJAng <127660101+LSMJJAng@users.noreply.github.com> --------- Co-authored-by: LSMJJAng <127660101+LSMJJAng@users.noreply.github.com> Co-authored-by: kyukong <92148749+kyukong@users.noreply.github.com> Co-authored-by: yukong <kyb062666@gmail.com>
Team-OYA · Mar 5, 2024 · f443fd2 · f443fd2
1 parent e38bba7
commit f443fd2
Show file tree

Hide file tree

Showing 31 changed files with 807 additions and 208 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/react": "^2.1.1",
     "@material-tailwind/react": "^2.1.9",
     "@stomp/stompjs": "^7.0.0",
@@ -21,6 +24,7 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
+    "react-modal": "^3.16.1",
     "react-redux": "^7.2.9",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 import React from "react";
 
@@ -20,9 +20,6 @@ import Plans from "./pages/business/plans";
 import BusinessPlanDetail from "./pages/business/plan";
 import AdminPlainDetail from "./pages/administrator/adminPlanDetail";
 import AdminChat from "./pages/administrator/adminChat";
-import Chat from "./pages/business/chat";
-import BusinessChatRoom from "./pages/business/businessChatRoom";
-import AdminChatRoom from "./pages/administrator/adminChatRoom";
 
 /**
  * @since 2024.02.25
@@ -31,13 +28,13 @@ import AdminChatRoom from "./pages/administrator/adminChatRoom";
 function App() {
 
     const businessColor = "bg-main-color-600 border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700";
-    const businessSideBarColor = "bg-main-color-600 dark:bg-blue-600";
+    const businessSideBarColor = "bg-main-color-600 text-white dark:bg-blue-600";
 
     const adminColor = "bg-main-blue-600 border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700";
     const adminSideBarColor = "bg-main-blue-600 dark:bg-blue-600";
 
     const businessSideBarList = [
-        ['대시보드', '/dashboard'], ['나의 사업계획서 목록', '/plans'], ['팝업 스토어 제안', '/plan/create'], ['광고 신청', '/ad/create'], ['1:1 채팅상담', '/chat']
+        ['대시보드', '/dashboard'], ['나의 사업계획서 목록', '/plans'], ['팝업 스토어 제안', '/plan/create'], ['광고 신청', '/ad/create']
     ];
     const adminSideBarList = [
         ['사용자 관리', [['일반 사용자 관리', '/admin/users'], ['사업체 관리', '/admin/business']]],
@@ -61,32 +58,27 @@ function App() {
                     {generateRoute(businessColor, businessSideBarColor, businessSideBarList, businessHomeUrl, "/plans/:planId", BusinessPlanDetail)}
                     {generateRoute(businessColor, businessSideBarColor, businessSideBarList, businessHomeUrl, "/plan/create", CreatePlan)}
                     {generateRoute(businessColor, businessSideBarColor, businessSideBarList, businessHomeUrl, "/ad/create", Ad)}
-                    {generateRoute(businessColor, businessSideBarColor, businessSideBarList, businessHomeUrl, "/chat", Chat)}
-                    {generateRoute(businessColor, businessSideBarColor, businessSideBarList, businessHomeUrl, "/chat/:roomId", BusinessChatRoom)}
 
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/users', User)}
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/business', Business)}
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/plan', Plan)}
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/plan/:planId', AdminPlainDetail)}
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/community', Community)}
                     {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/chat', AdminChat)}
-                    {generateRoute(adminColor, adminSideBarColor, adminSideBarList, adminHomeUrl, '/admin/chat/:roomId', AdminChatRoom)}
                 </Routes>
             </Main>
         </BrowserRouter>
+
     );
 }
 
 
 const generateRoute = (color, sideBarColor, sideBarList, homeUrl, path, Component) => (
-
     <Route
         key={path}
         path={path}
         element={[
-
             <Sidebar key="sidebar" color={color} sideBarColor={sideBarColor} sideBarList={sideBarList} content={<Component />} homeUrl={homeUrl} />
-
         ]}
     />
 );

diff --git a/src/api/administrator/adminChatApi.js b/src/api/administrator/adminChatApi.js
@@ -1,14 +1,7 @@
-import axios from "axios";
-
-import GetTokenFromLocalStorage from "../Common/token";
-
-const Token = GetTokenFromLocalStorage('admin')
-if (Token) {
-    axios.defaults.headers.common['Authorization'] = `Bearer ${Token}`
-}
+import adminInstance from "../adminBaseApi";
 
 /**
- * @since 2024.03.52
+ * @since 2024.03.02
  * @author 이상민
  */
 const ChatApi = {
@@ -19,7 +12,17 @@ const ChatApi = {
      * @author 이상민
      */
     getChatRooms: async (pageNo = 0, amount = 10) => {
-        return await axios.get(`/api/v1/chat/rooms/admin?pageNo=${pageNo}&amount=${amount}`);
+        return await adminInstance.get(`/chat/rooms/admin?pageNo=${pageNo}&amount=${amount}`);
+    },
+
+    /**
+     * 나의 채팅방 메시지 리스트 조회
+     *
+     * @since 2024.03.02
+     * @author 이상민
+     */
+    getMessages: async (roomId = 0) => {
+        return await adminInstance.get(`/chat/rooms/${roomId}`);
     },
 }
 

diff --git a/src/api/chatApi.js b/src/api/chatApi.js
@@ -1,10 +1,4 @@
-import GetTokenFromLocalStorage from "./Common/token";
-import axios from "axios";
-
-const Token = GetTokenFromLocalStorage('user')
-if (Token) {
-    axios.defaults.headers.common['Authorization'] = `Bearer ${Token}`
-}
+import userBaseApi from "./userBaseApi";
 
 /**
  * @since 2024.03.52
@@ -18,7 +12,7 @@ const ChatApi = {
      * @author 이상민
      */
     getChatRooms: async (pageNo = 0, amount = 10) => {
-        return await axios.get(`/api/v1/chat/rooms?pageNo=${pageNo}&amount=${amount}`);
+        return await userBaseApi.get(`/chat/rooms?pageNo=${pageNo}&amount=${amount}`);
     },
 
     /**
@@ -28,7 +22,7 @@ const ChatApi = {
      * @author 이상민
      */
     getMessages: async (roomId = 0) => {
-        return await axios.get(`/api/v1/chat/rooms/${roomId}`);
+        return await userBaseApi.get(`/chat/rooms/${roomId}`);
     },
 }
 

diff --git a/src/components/common/Chat/ChatPage.jsx → src/components/administrator/ChatPage.jsx b/src/components/common/Chat/ChatPage.jsx → src/components/administrator/ChatPage.jsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
-import ContentBox from "../../common/ContentBox/ContentBox";
-import Pagination from "../../common/Pagination/Pagination";
-import Table from "../Table/Table";
-import ChatTable from "../Table/ChatTable";
+import ContentBox from "../../components/common/ContentBox/ContentBox";
+import Pagination from "../../components/common/Pagination/Pagination";
+import ChatTable from "./ChatTable";
 
 const ChatPage = ({ api, title }) => {
     const [data, setData] = useState(null);
@@ -63,4 +62,4 @@ const ChatPage = ({ api, title }) => {
     );
 };
 
-export default ChatPage;
+export default ChatPage;