[RELEASE] v1.4 (#45)

* 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> * [FIX] 광고 팝업스토어 게시글 조회 시 잘못된 아이디 매핑 수정 (#35) * [FEATURE] 채팅 UI 수정 (#36) * [FEAT] 채팅방 리스트 보여주기 * [FEAT] 채팅방 디테일 수정 * [FEAT] 채팅방 제목 CSS 수정 * [FEAT] css 변경 * [CHORE] 파일 위치 및 css 변경 * [CHORE] 머지 해결 * [REFACTOR] Ranking y축 간격 오류 수정 * [FEAT] 사업체 플로팅 버튼 추가 * [FEAT] 사업체 채팅 ui 변경 * [CHORE] 오타 수정 --------- Co-authored-by: LSMJJAng <127660101+LSMJJAng@users.noreply.github.com> * [FEAT] 채팅리스트 조회 ui 변경 (#37) * [FEAT] 채팅방 리스트 보여주기 * [FEAT] 채팅방 디테일 수정 * [FEAT] 채팅방 제목 CSS 수정 * [FEAT] css 변경 * [CHORE] 파일 위치 및 css 변경 * [CHORE] 머지 해결 * [REFACTOR] Ranking y축 간격 오류 수정 * [FEAT] 사업체 플로팅 버튼 추가 * [FEAT] 사업체 채팅 ui 변경 * [CHORE] 오타 수정 --------- Co-authored-by: LSMJJAng <127660101+LSMJJAng@users.noreply.github.com> * [REFACTOR] 환경변수값 설정 (#39) * [CHORE] CICD 에 환경변수 파일 추가 * [CHORE] 하드코딩 값 환경변수로 수정 * [CHORE] 환경변수 저장 경로 수정 (#41) * [CHORE] 환경변수 파일 경로 수정 * [CHORE] 환경변수 저장 경로 수정 * [REFACTOR] 자잘한 버그 해결 (#43) * [REFACTOR] 팝업스토어 광고 금액 수정 * [REFACTOR] 관리자 로그인 후 경로 수정 * [REFACTOR] 사업계획서 제안 시 상세정보 페이지로 이동 * [REFACTOR] 팝업스토어 작성 시 리프레시 * [REFACTOR] 사업계획서 상세정보 조회 시 오픈 일정 추가 * [REFACTOR] 사업계획서 상태 변화 시 리프레시 * [REFACTOR] 사업계획서 단계에 따른 팝업스토어 게시글 작성 여부 판단 * [FEAT] 사업계획서 철회 API 연동 * [FEATURE] 알람 추가 (#44) * [FEAT] 채팅방 리스트 보여주기 * [FEAT] 채팅방 디테일 수정 * [FEAT] 채팅방 제목 CSS 수정 * [FEAT] css 변경 * [CHORE] 파일 위치 및 css 변경 * [CHORE] 머지 해결 * [REFACTOR] Ranking y축 간격 오류 수정 * [FEAT] 사업체 플로팅 버튼 추가 * [FEAT] 사업체 채팅 ui 변경 * [CHORE] 오타 수정 * [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 11, 2024 · 39c6e89 · 39c6e89
1 parent f0298cc
commit 39c6e89
Show file tree

Hide file tree

Showing 15 changed files with 908 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@uiw/react-md-editor": "^4.0.3",
     "axios": "^1.6.7",
     "chart.js": "^4.4.2",
+    "firebase": "^8.10.0",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "http-proxy-middleware": "^2.0.6",
@@ -43,7 +44,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "start:mac": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem npm run start",
+    "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=localhost.pem&&set SSL_KEY_FILE=localhost-key.pem&&npm run start"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -0,0 +1,31 @@
+import firebase from "firebase/app";
+
+importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js");
+
+const firebaseConfig = {
+    apiKey: "AIzaSyBVEo-5nnfPpRvDW69oS1DnCgSmtzzlj1g",
+    projectId: "thepop-18582",
+    messagingSenderId: "23824278236",
+    appId: "1:23824278236:web:841437d42a805d7af50a19",
+};
+
+firebase.initializeApp(firebaseConfig);
+const messaging = firebase.messaging();
+
+self.addEventListener("push", function (e) {
+    if (!e.data.json()) return;
+
+    const resultData = e.data.json().notification;
+    const notificationTitle = resultData.title;
+
+    const notificationOptions = {
+        body: resultData.body,
+    };
+
+    console.log(resultData.title, {
+        body: resultData.body,
+    });
+
+    e.waitUntil(self.registration.showNotification(notificationTitle, notificationOptions));
+});
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,7 @@
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 import React from "react";
+import './firebase-messaging-sw.js'
 
 import './index.css';
 
@@ -42,7 +43,7 @@ function App() {
     ];
 
     const businessHomeUrl = "/dashboard"
-    const adminHomeUrl = "/admin/plan"
+    const adminHomeUrl = "/admin/business"
 
     return (
         <BrowserRouter>
@@ -72,7 +73,6 @@ function App() {
     );
 }
 
-
 const generateRoute = (color, sideBarColor, sideBarList, homeUrl, path, Component) => (
     <Route
         key={path}

diff --git a/src/api/Common/notificationApi.js b/src/api/Common/notificationApi.js
@@ -0,0 +1,31 @@
+import userBaseApi from "../userBaseApi";
+import adminBaseApi from "../adminBaseApi";
+
+
+/**
+ * @since 2024.03.08
+ * @author 이상민
+ */
+const NotificationApi = {
+    /**
+     * 토큰 저장 알림
+     *
+     * @since 2024.03.08
+     * @author 이상민
+     */
+    saveNotification: async (token) => {
+        return await userBaseApi.post(`/notification/new`, { token });
+    },
+
+    /**
+     * 토큰 저장 알림
+     *
+     * @since 2024.03.08
+     * @author 이상민
+     */
+    saveAdminNotification: async (token) => {
+        return await adminBaseApi.post(`/notification/new`, { token });
+    },
+}
+
+export default NotificationApi;
diff --git a/src/api/business/planDetail/withdrawPlan.js b/src/api/business/planDetail/withdrawPlan.js
@@ -0,0 +1,20 @@
+import userInstance from "../../userBaseApi";
+
+/**
+ * @since 2024.03.10
+ * @author 김유빈
+ */
+const WithdrawPlan = {
+
+    /**
+     * 사업계획서 철회
+     *
+     * @since 2024.03.10
+     * @author 김유빈
+     */
+    withdraw: async (planId) => {
+        return await  userInstance.post(`/plans/${planId}/withdraw`)
+    }
+}
+
+export default WithdrawPlan;
diff --git a/src/api/chatApi.js b/src/api/chatApi.js
@@ -1,7 +1,7 @@
 import userBaseApi from "./userBaseApi";
 
 /**
- * @since 2024.03.52
+ * @since 2024.03.02
  * @author 이상민
  */
 const ChatApi = {

diff --git a/src/components/Plan/AdminPlanDetail.jsx b/src/components/Plan/AdminPlanDetail.jsx
@@ -58,7 +58,7 @@ const AdminPlanDetail = ( {planId, onChangeStatus}) => {
     return (
         <>
             <TwoInput
-                firstInput={<InputDate title="오픈 일정" placeholder={planData ? planData.openDate : ''} />}
+                firstInput={<InputDate title="오픈 일정" value={planData ? planData.openDate.replaceAll(".", "-") : ''} />}
                 secondInput={<InputText title="진행단계" value={planData ? planData.entranceStatus : ''} />}
             />
             <TwoInput

diff --git a/src/components/Plan/PlanDetail.jsx b/src/components/Plan/PlanDetail.jsx
@@ -1,45 +1,20 @@
-import {useEffect, useState} from "react";
 import TwoInput from "../common/Input/TwoInput";
 import InputDate from "../common/Input/InputDate";
 import InputText from "../common/Input/InputText";
-import MyPlanDetailApi from "../../api/business/planDetail/myPlanDetailApi";
+import WithdrawPlan from "../../api/business/planDetail/withdrawPlan";
 
 /**
  * PlanDetail 컴포넌트 생성
  *
  * @since 2024.02.25
  * @author 김유빈
  */
-const PlanDetail = ( {planId, onChangeStatus}) => {
-    /**
-     * PlanDetail 컴포넌트 Plan으로 분리 및 API 연결
-     *
-     * @since 2024.02.29
-     * @author 이상민
-     */
-    const [planData, setPlanData] = useState(null);
-    const [planDetailStatus, setPlanDetailStatus] = useState('');
-    useEffect(() => {
-        const fetchPlanData = async () => {
-            try {
-                const response = await MyPlanDetailApi.getPlan(planId);
-                console.log(response);
-                setPlanData(response.data.data);
-
-                setPlanDetailStatus(response.data.data.entranceStatus);
-            } catch (error) {
-                console.error('Error fetching plan data:', error);
-            }
-        };
-        fetchPlanData();
-    }, [planId]);
+const PlanDetail = ({planData}) => {
 
     if (!planData) {
         return <p>Loading...</p>;
     }
 
-    onChangeStatus(planDetailStatus);
-
     /**
      * 파일 다운로드
      *
@@ -55,19 +30,36 @@ const PlanDetail = ( {planId, onChangeStatus}) => {
         document.body.removeChild(link);
     };
 
+    /**
+     * 입점 철회 api 연동
+     *
+     * @since 2024.03.10
+     * @author 김유빈
+     */
+    const handleWithdraw = async () => {
+        try {
+            const response = await WithdrawPlan.withdraw(planData.planId);
+            if (response.status === 200) {
+                window.location.href = `/plans/${planData.planId}`
+            }
+        } catch (error) {
+            console.error('Error approving plan:', error);
+        }
+    };
+
     return (
         <>
             <TwoInput
-                firstInput={<InputDate title="오픈 일정" placeholder={planData ? planData.openDate : ''} />}
-                secondInput={<InputText title="진행단계" value={planData ? planData.entranceStatus : ''} />}
+                firstInput={<InputDate title="오픈 일정" value={planData.openDate} />}
+                secondInput={<InputText title="진행단계" value={planData.entranceStatus} />}
             />
             <TwoInput
-                firstInput={<InputText title="오픈 지점" value={`${planData ? planData.office : ''} ${planData ? planData.floor : ''}`} />}
-                secondInput={<InputText title="카테고리" value={planData ? planData.category : ''} />}
+                firstInput={<InputText title="오픈 지점" value={`${planData.office} ${planData.floor}`} />}
+                secondInput={<InputText title="카테고리" value={planData.category} />}
             />
             <TwoInput
-                firstInput={<InputText title="연락처" value={planData ? planData.contactInformation : ''} />}
-                secondInput={<InputText title="작성일" value={planData ? planData.createdDate : ''} />}
+                firstInput={<InputText title="연락처" value={planData.contactInformation} />}
+                secondInput={<InputText title="작성일" value={planData.createdDate} />}
             />
 
             <div className="flex-auto mr-5">
@@ -81,6 +73,27 @@ const PlanDetail = ( {planId, onChangeStatus}) => {
                     파일 다운로드
                 </button>
             </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <div style={{ display: 'flex', marginTop: '20px' }}>
+                    {
+                        planData.entranceStatus === '입점 요청' && (
+                            <button
+                                style={{
+                                    padding: '10px 20px',
+                                    backgroundColor: 'LightSkyBlue',
+                                    color: 'white',
+                                    borderRadius: '5px',
+                                    margin: '0 5px',
+                                    cursor: 'pointer',
+                                }}
+                                onClick={handleWithdraw}
+                                disabled={false}>
+                                입점 철회
+                            </button>
+                        )
+                    }
+                </div>
+            </div>
         </>
     )
 }

diff --git a/src/components/common/Input/InputDate.js b/src/components/common/Input/InputDate.js
@@ -7,7 +7,7 @@ import 'flowbite/dist/datepicker.turbo.js';
  * @since 2024.02.25
  * @author 김유빈
  */
-function InputDate({title, placeholder, onChange}) {
+function InputDate({title, placeholder, value, onChange}) {
     return (
         <div className="relative mb-6">
             <label htmlFor="default-input"
@@ -18,6 +18,7 @@ function InputDate({title, placeholder, onChange}) {
                    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={placeholder}
+                   value={value}
                    onChange={onChange}/>
         </div>
     )

diff --git a/src/firebase-messaging-sw.js b/src/firebase-messaging-sw.js
@@ -0,0 +1,70 @@
+import firebase from 'firebase/app'
+import 'firebase/messaging'
+import NotificationApi from "./api/Common/notificationApi";
+
+const firebaseConfig = {
+    apiKey: `${process.env.REACT_APP_API_KEY}`,
+    authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
+    projectId: `${process.env.REACT_APP_PROJECT_ID}`,
+    storageBucket: `${process.env.REACT_APP_STORAGE_BUCKET}`,
+    messagingSenderId: `${process.env.REACT_APP_MESSAGING_SENDER_ID}`,
+    appId: `${process.env.REACT_APP_APP_ID}`,
+    measurementId: `${process.env.REACT_APP_MEASUREMENT_ID}`
+};
+
+firebase.initializeApp(firebaseConfig)
+const messaging = firebase.messaging()
+
+function requestPermission() {
+    console.log('Requesting permission...');
+
+    void Notification.requestPermission().then((permission) => {
+        if (permission === 'granted') {
+            console.log('Notification permission granted.');
+            console.log(`${process.env.REACT_APP_VAPID_KEY}`);
+            messaging.getToken({vapidKey: `${process.env.REACT_APP_VAPID_KEY}`})
+                .then(async (currentToken) => {
+                    if (currentToken) {
+                        console.log('currenToken : ' + currentToken);
+                        try {
+                            const currentPagePath = window.location.pathname;
+                            let response;
+                            if (currentPagePath.startsWith('/admin/')) {
+                                response = await NotificationApi.saveAdminNotification(currentToken);
+                            } else {
+                                response = await NotificationApi.saveNotification(currentToken);
+                            }
+                            try {
+                                console.log("FCM 토큰 보내기 성공!", response);
+                            } catch (error) {
+                                console.log("FCM 토큰 보내기 실패!", error);
+                                // 여기서 추가적인 에러 처리 또는 다른 작업을 수행할 수 있습니다.
+                            }
+                        } catch (error) {
+                            console.error("token 저장 실패", error);
+                        }
+
+                    } else {
+                        console.log('Can not get token');
+                    }
+                });
+
+        }else{
+            console.log('Do not have permission.');
+        }
+    });
+}
+
+requestPermission();
+
+messaging.onMessage((payload) => {
+    console.log(payload.notification.title);
+    console.log(payload.notification.body);
+});
+
+messaging.onMessage((payload) => {
+    console.log(payload.notification.title);
+    console.log(payload.notification.body);
+});
+
+export default firebase;
diff --git a/src/pages/administrator/adminPlanDetail.jsx b/src/pages/administrator/adminPlanDetail.jsx
@@ -27,9 +27,11 @@ const AdminPlainDetail = () => {
         console.log(longPlanId);
         try {
             alert("정말 입점 대기 시키실 건가요?")
-            await AdminPlanApi.postWait(longPlanId);
+            const response = await AdminPlanApi.postWait(longPlanId);
             alert("입정 대기 완료되었습니다.")
-            navigate("/admin/plan"); // 페이지 이동
+            if (response.status === 200) {
+                window.location.href = `/admin/plan/${longPlanId}`
+            }
         } catch (error) {
             console.error('Error approving plan:', error);
         }
@@ -40,7 +42,9 @@ const AdminPlainDetail = () => {
             alert("정말 입정 승인 시키실 건가요?")
             const response = await AdminPlanApi.postApprove(longPlanId);
             alert('입점이 승인되었습니다.');
-            navigate('/admin/plan'); // 페이지 이동
+            if (response.status === 200) {
+                window.location.href = `/admin/plan/${longPlanId}`
+            }
         } catch (error) {
             console.error('Error approving plan:', error);
         }
@@ -51,7 +55,9 @@ const AdminPlainDetail = () => {
             alert("정말 입정 거절 시키실 건가요?")
             const response = await AdminPlanApi.postDeny(longPlanId);
             alert('입점이 거절되었습니다.');
-            navigate('/admin/plan'); // 페이지 이동
+            if (response.status === 200) {
+                window.location.href = `/admin/plan/${longPlanId}`
+            }
         } catch (error) {
             console.error('Error rejecting plan:', error);
         }

diff --git a/src/pages/business/ad.jsx b/src/pages/business/ad.jsx
@@ -123,7 +123,7 @@ function convertAboutPost(setPrice, setPostType, setMainImage, setPosts, onChang
         let data = null
         let mainImage = <></>
         if (value === "popup") {
-            price = 1_000_000
+            price = 500_000
             const response = await MyPopupApi.getMyPopups(0, 5)
             data = response.data.data.popups.map(popup => {
                 const createdDate = popup.pulledDate.split(" ")[0];