modified: frontend/src/components/common/Navbar.tsx

frontend/src/api/bookMarkApi.ts

@@ -0,0 +1,38 @@
+import { jsonAxios } from "./axios.config.ts";
+
+// 북마크 추가
+export const postBookmark = async (resumeId: number) => {
+  try {
+    console.log("아이디", resumeId);
+    const response = await jsonAxios.post(`/bookmarks/${resumeId}`);
+    // 응답에서 bookmark_id를 받아옵니다
+    const bookmarkId = response.data.result.bookmark_id;
+    return bookmarkId;
+  } catch (error) {
+    console.error("북마크 추가 오류:", error);
+    throw error;
+  }
+};
+
+// 북마크 조회
+export const getBookmarkById = async (userId: number) => {
+  try {
+    const response = await jsonAxios.get(`/bookmarks/users/${userId}`);
+    return response.data;
+  } catch (error) {
+    console.error("북마크 조회 오류:", error);
+    throw error;
+  }
+};
+
+// 북마크 삭제
+export const deleteBookmarkById = async (bookmarkId: number) => {
+  try {
+    const response = await jsonAxios.delete(`/bookmarks/${bookmarkId}`);
+    console.log("북마크 삭제 성공:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error("북마크 삭제 오류:", error);
+    throw error;
+  }
+};

frontend/src/components/common/Navbar.tsx

@@ -25,7 +25,7 @@ function Navbar() {
         });
 
         // 응답이 성공적일 경우 사용자 정보와 상태 설정
-        if (response.data?.message === "USER_200") {
+        if (response.data?.code === "USER_200") {
           setLoginStatus(1); // 로그인 상태 업데이트
           setUserName(response.data?.result.username); // 사용자 이름 설정
         } else {

frontend/src/pages/ResumeFeedbackPage.tsx

@@ -14,6 +14,8 @@ import {
 import { AddFeedbackPoint, FeedbackPoint, ResumeData } from "../types.ts";
 import useResumeStore from "../store/ResumeStore.ts";
 import { useParams } from "react-router-dom";
+import { Bookmark, BookmarkMinus } from "lucide-react";
+import { postBookmark, deleteBookmarkById } from "../api/bookMarkApi.ts";
 
 function ResumeFeedbackPage() {
   const [resumeData, setResumeData] = useState<ResumeData | null>(null); //이력서 데이터를 관리
@@ -23,6 +25,8 @@ function ResumeFeedbackPage() {
   const [error, setError] = useState<string | null>(null); //에러 상태를 관리
   const { resumeId, setResumeUrl } = useResumeStore(); //이력서 아이디와 이력서 URL을 관리 -> 이게 왜 필요한지 모르겠음
   const { id } = useParams(); // useParams로 URL의 id 파라미터 가져오기
+  const [isBookmarked, setIsBookmarked] = useState<boolean>(false); // 북마크 상태
+  const [bookmarkId, setBookmarkId] = useState<number | null>(null); // 북마크 ID 저장
 
   useEffect(() => {
     const fetchData = async () => {
@@ -31,7 +35,15 @@ function ResumeFeedbackPage() {
         setError(null);
         const data = await getResumeApi(Number(id)); //여기서 레쥬메 아이디로 관리를 해서 데이터를 불러옴
         setResumeData(data);
-        console.log(data);
+        // 북마크 상태 초기화
+        const bookmarkResponse = await postBookmark(Number(id)); // userId 제거, resumeId만 사용
+        if (bookmarkResponse) {
+          setIsBookmarked(true);
+          setBookmarkId(bookmarkResponse);
+        }
+        setResumeUrl(data.fileUrl);
+        console.log("id:", id);
+        setResumeData(data);
         setResumeUrl(data.fileUrl);
         setFeedbackPoints(data.feedbackResponses || []); // 관련된 설정들
       } catch (error) {
@@ -43,6 +55,34 @@ function ResumeFeedbackPage() {
     };
     fetchData();
   }, [id]);
+  // 북마크 토글 기능
+  const toggleBookmark = async () => {
+    if (!id) {
+      setError("Resume ID is missing.");
+      return;
+    }
+
+    try {
+      if (isBookmarked) {
+        // 북마크 해제
+        if (bookmarkId !== null) {
+          await deleteBookmarkById(bookmarkId);
+        }
+        setIsBookmarked(false);
+        setBookmarkId(null);
+      } else {
+        // 북마크 추가
+        const response = await postBookmark(Number(id)); // userId 제거, resumeId만 사용
+        console.log("포스트북마크 값", response);
+        setIsBookmarked(true);
+        setBookmarkId(response); // 서버로부터 받은 북마크 ID 저장
+        console.log("북마크 아이디 생성", response);
+      }
+    } catch (error) {
+      console.error("Failed to toggle bookmark", error);
+      alert("북마크 상태를 변경할 수 없습니다. 다시 시도해주세요.");
+    }
+  };
 
   const handleAiFeedback = async () => {
     setLoading(true);
@@ -132,6 +172,28 @@ function ResumeFeedbackPage() {
       <Layout
         sidebar={
           <div className="flex flex-col justify-between bg-white p-2 mt-10">
+            {/* 북마크 버튼 */}
+            <button
+              onClick={toggleBookmark}
+              className={`flex items-center px-6 py-3 rounded-lg ${
+                isBookmarked
+                  ? "bg-yellow-100 text-yellow-900"
+                  : "text-gray-500 hover:bg-gray-50"
+              }`}
+            >
+              {isBookmarked ? (
+                <>
+                  <BookmarkMinus className="w-5 h-5 mr-2" />
+                  북마크 제거
+                </>
+              ) : (
+                <>
+                  <Bookmark className="w-5 h-5 mr-2" />
+                  북마크 추가
+                </>
+              )}
+            </button>
+
             <ResumeOverview
               userName={resumeData.userName}
               position={resumeData.position}

frontend/src/types.ts

@@ -10,6 +10,7 @@ export type FeedbackPoint = {
 };
 
 export type ResumeData = {
+  feedbacks(feedbacks: any): unknown;
   resumeId: number;
   userName: string;
   position: string;

frontend/src/utils/Token.tsx

@@ -17,12 +17,12 @@ function ProtectedRoute() {
         });
 
         // 응답 코드가 USER_200일 경우 인증 성공
-        if (response.data?.message === "USER_200") {
-          console.log("성공: ", response.data?.message);
+        if (response.data?.code === "USER_200") {
+          console.log("성공: ", response.data?.code);
           setIsAuthenticated(true);
           setLoginStatus(1);
         } else {
-          console.log("실패: ", response.data?.message);
+          console.log("실패: ", response.data?.code);
           setIsAuthenticated(false);
           setLoginStatus(0);
         }