Merge branch 'feat/#104' into dev

MoneyMakersClub · Nov 26, 2024 · 5fbb232 · 5fbb232
2 parents dddd645 + a05d33a
commit 5fbb232
Show file tree

Hide file tree

Showing 20 changed files with 362 additions and 276 deletions.
diff --git a/bookduck/package.json b/bookduck/package.json
@@ -14,7 +14,7 @@
     "@react-spring/web": "^9.7.5",
     "@react-three/drei": "^9.115.0",
     "@react-three/fiber": "^8.17.10",
-    "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query": "^5.61.3",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "html2canvas": "^1.4.1",

diff --git a/bookduck/src/App.jsx b/bookduck/src/App.jsx
@@ -33,17 +33,29 @@ import SettingPage from "./pages/SettingPage/SettingPage";
 import FriendListPage from "./pages/FriendPage/FriendListPage";
 import OAuthRedierctPage from "./pages/LoginPage/OAuthRedierctPage";
 import OtherMainPage from "./pages/OtherUserPage/OtherMainPage";
+import handleFcmToken from "./components/NotificationPage/handleFcmToken";
+import { getUserId } from "./api/oauth";
 
 function App() {
   useEffect(() => {
-    const fetchFcmToken = async () => {
-      const token = await requestFcmToken();
-      if (token) {
-        console.log("FCM 토큰을 서버로 전송하거나 저장:", token);
+    const fetchandSendFCM = async () => {
+      try {
+        const id = await getUserId();
+        const accessToken = localStorage.getItem("token");
+
+        if (!id || !accessToken) {
+          console.error("사용자 ID 또는 액세스 토큰이 없습니다.");
+          return;
+        }
+        await handleFcmToken(id);
+      } catch (error) {
+        console.error("FCM 처리 중 오류 발생:", error.message);
       }
     };
-    fetchFcmToken();
+
+    fetchandSendFCM();
   }, []);
+
   useEffect(() => {
     // 포그라운드 메시지 수신 처리
     onMessage(messaging, (payload) => {

diff --git a/bookduck/src/api/fcm.js b/bookduck/src/api/fcm.js
@@ -18,7 +18,6 @@ export const requestFcmToken = async () => {
       });
 
       if (fcmToken) {
-        console.log("FCM 토큰:", fcmToken);
         return fcmToken;
       } else {
         console.error("FCM 토큰을 가져오지 못했습니다.");

diff --git a/bookduck/src/api/fcmApi.js b/bookduck/src/api/fcmApi.js
@@ -1,12 +1,14 @@
 import { post } from "./example";
-export const sendFcmToken = async (userId, fcmToken) => {
+import { postAccessTokenIssue } from "./oauth";
+export const postFcmToken = async (userId, fcmToken) => {
   try {
     // POST 요청으로 FCM 토큰 전송
-    const response = await post(`/fcm/${userId}/token`, { fcmToken });
+    const response = await post(`/fcm/${userId}/token`, {
+      fcmToken: fcmToken,
+    });
     console.log("FCM 토큰 전송 성공:", response);
     return response;
   } catch (error) {
     console.error("FCM 토큰 전송 실패:", error);
-    throw error;
   }
 };
diff --git a/bookduck/src/assets/otherUserPage/readingspace-duck.svg b/bookduck/src/assets/otherUserPage/readingspace-duck.svg
diff --git a/bookduck/src/components/MainPage/ReadingSpaceComponent.jsx b/bookduck/src/components/MainPage/ReadingSpaceComponent.jsx
@@ -11,13 +11,13 @@ import goEdit from "../../assets/mainPage/go-edit.svg";
 import goRight from "../../assets/mainPage/go-right.svg";
 import cancel from "../../assets/mainPage/cancel.svg";
 import menu from "../../assets/mainPage/menu-vertical.svg";
-import recordCircleIcon from "../../assets/recordingPage/record-circle-icon.svg";
 import editIcon from "../../assets/bookinfoPage/edit.svg";
 import deleteIcon from "../../assets/bookinfoPage/trash.svg";
 import plusIcon from "../../assets/mainPage/plus.svg";
 import helpCircle from "../../assets/mainPage/help-circle.svg";
 import DraggableList from "./DraggableList";
 import { getUserId } from "../../api/oauth";
+import ReadingSpaceDuck from "../../assets/otherUserPage/readingspace-duck.svg";
 
 const ReadingSpaceComponent = ({
   setColor,
@@ -56,9 +56,8 @@ const ReadingSpaceComponent = ({
     try {
       const id = isMine ? await getUserId() : otherUserId;
       setUserId(id);
-
       const response = await get(`/users/${id}/readingspace`);
-      console.log(response);
+      // console.log(response);
       setCards(response.cardList);
     } catch (error) {
       console.error("리딩스페이스 조회 오류", error);
@@ -101,14 +100,6 @@ const ReadingSpaceComponent = ({
     getCards();
   }, []);
 
-  useEffect(() => {
-    console.log(cards);
-  }, [cards]);
-
-  useEffect(() => {
-    console.log("otehruseif", otherUserId);
-  }, [otherUserId]);
-
   useEffect(() => {
     if (isAllDelete) {
       patchCards([]).then(() => {
@@ -135,8 +126,10 @@ const ReadingSpaceComponent = ({
   const handleMenuClick = () => {
     if (height.get() < expandedHeight) {
       api.start({ height: expandedHeight });
+      setBottomSheetShow(true);
+    } else {
+      setBottomSheetShow(true);
     }
-    setBottomSheetShow(true);
   };
 
   const handleEditClick = () => {
@@ -287,7 +280,12 @@ const ReadingSpaceComponent = ({
                   </div>
                   <div className="flex flex-row items-center gap-2 flex-nowrap">
                     {isMine && (
-                      <img src={menu} alt="menu" onClick={handleMenuClick} />
+                      <div
+                        className="w-[2rem] flex justify-end"
+                        onClick={handleMenuClick}
+                      >
+                        <img src={menu} alt="menu" />
+                      </div>
                     )}
                   </div>
                 </div>
@@ -305,22 +303,31 @@ const ReadingSpaceComponent = ({
                       className="flex flex-col gap-1"
                     >
                       {cards.length === 0 ? (
-                        // 카드가 없을 때 렌더링
-                        <div className="m-[5rem] flex flex-col items-center w-[14rem]">
-                          <div className=" text-gray-500 text-c1 mb-[0.38rem]">
-                            리딩 스페이스가 텅 비어있네요!
+                        isMine ? (
+                          // 카드가 없을 때 렌더링
+                          <div className="m-[5rem] flex flex-col items-center w-[14rem]">
+                            <div className=" text-gray-500 text-c1 mb-[0.38rem]">
+                              리딩 스페이스가 텅 비어있네요!
+                            </div>
+                            <div className="text-b1 text-gray-500 font-semibold mb-4">
+                              나만의 리딩 스페이스를 꾸며보세요
+                            </div>
+                            <ButtonComponent
+                              text="추가하기"
+                              type="secondary"
+                              color="orange"
+                              size="small"
+                              onClick={() => navigate("selectcard")}
+                            />
                           </div>
-                          <div className="text-b1 text-gray-500 font-semibold mb-4">
-                            나만의 리딩 스페이스를 꾸며보세요
+                        ) : (
+                          <div className="flex flex-col items-center justify-center m-[5rem]">
+                            <p className=" text-gray-500 text-c1 mb-[2rem]">
+                              리딩스페이스가 텅 비어있어요.
+                            </p>
+                            <img src={ReadingSpaceDuck} />
                           </div>
-                          <ButtonComponent
-                            text="추가하기"
-                            type="secondary"
-                            color="orange"
-                            size="small"
-                            onClick={() => navigate("selectcard")}
-                          />
-                        </div>
+                        )
                       ) : (
                         // 카드가 있을 때 렌더링
                         <DraggableList
@@ -351,7 +358,7 @@ const ReadingSpaceComponent = ({
                 </div>
               )}
 
-              {isFloatingVisible && (
+              {/* {isFloatingVisible && (
                 <div className="absolute right-1 bottom-[-4rem] z-[100]">
                   <img
                     onClick={() => navigate("/selectbook")}
@@ -360,7 +367,7 @@ const ReadingSpaceComponent = ({
                     alt="record_circle_icon"
                   />
                 </div>
-              )}
+              )} */}
             </div>
           </animated.div>
         </DragDropContext>