develp branch 작업내용 머지 : develop -> main

src/api/roomPosts/postRoomPostLike.ts

@@ -0,0 +1,64 @@
+import { apiClient } from '../index';
+import type { RoomPostLikeRequest, RoomPostLikeResponse } from '@/types/roomPostLike';
+
+// 방 게시물(기록,투표) 좋아요 상태변경 API 함수
+export const postRoomPostLike = async (
+  postId: number,
+  requestData: RoomPostLikeRequest,
+): Promise<RoomPostLikeResponse> => {
+  try {
+    const response = await apiClient.post<RoomPostLikeResponse>(
+      `/room-posts/${postId}/likes`,
+      requestData,
+    );
+    return response.data;
+  } catch (error) {
+    console.error('방 게시물 좋아요 API 오류:', error);
+    throw error;
+  }
+};
+
+/*
+사용 예시:
+
+// 기록 게시물 좋아요
+const likeRecordPost = async (postId: number, isLiked: boolean) => {
+  try {
+    const result = await postRoomPostLike(postId, {
+      type: !isLiked, // 현재 상태 반대로 전송
+      roomPostType: 'RECORD'
+    });
+
+    if (result.isSuccess) {
+      console.log('좋아요 상태 변경 성공:', result.data.isLiked);
+      console.log('게시물 ID:', result.data.postId);
+      // UI 업데이트 로직
+    } else {
+      console.error('좋아요 상태 변경 실패:', result.message);
+      // 에러 처리 로직
+    }
+  } catch (error) {
+    console.error('API 호출 오류:', error);
+    // 네트워크 에러 처리 로직
+  }
+};
+
+// 투표 게시물 좋아요
+const likeVotePost = async (postId: number, isLiked: boolean) => {
+  try {
+    const result = await postRoomPostLike(postId, {
+      type: !isLiked, // 현재 상태 반대로 전송
+      roomPostType: 'VOTE'
+    });
+
+    if (result.isSuccess) {
+      console.log('좋아요 상태 변경 성공:', result.data.isLiked);
+      // UI 업데이트 로직
+    } else {
+      console.error('좋아요 상태 변경 실패:', result.message);
+    }
+  } catch (error) {
+    console.error('API 호출 오류:', error);
+  }
+};
+*/

src/api/rooms/getBookPage.ts

@@ -0,0 +1,48 @@
+import { apiClient } from '../index';
+
+// 책 페이지 정보 응답 데이터 타입
+export interface BookPageData {
+  totalBookPage: number; // 책 전체 페이지 수
+  recentBookPage: number; // 최근 기록한 페이지 번호
+  isOverviewPossible: boolean; // 총평 작성 가능 여부
+  roomId: number; // 방 ID
+}
+
+// API 응답 타입
+export interface BookPageResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: BookPageData;
+}
+
+// 책 전체 페이지수 및 총평 작성 가능 여부 조회 API 함수
+export const getBookPage = async (roomId: number): Promise<BookPageResponse> => {
+  try {
+    const response = await apiClient.get<BookPageResponse>(`/rooms/${roomId}/book-page`);
+    return response.data;
+  } catch (error) {
+    console.error('책 페이지 정보 조회 API 오류:', error);
+    throw error;
+  }
+};
+
+/*
+사용 예시:
+try {
+  const result = await getBookPage(1);
+  if (result.isSuccess) {
+    console.log("책 전체 페이지 수:", result.data.totalBookPage);
+    console.log("최근 기록한 페이지:", result.data.recentBookPage);
+    console.log("총평 작성 가능:", result.data.isOverviewPossible);
+    console.log("방 ID:", result.data.roomId);
+    // 성공 처리 로직
+  } else {
+    console.error("책 페이지 정보 조회 실패:", result.message);
+    // 실패 처리 로직
+  }
+} catch (error) {
+  console.error("API 호출 오류:", error);
+  // 에러 처리 로직 (400: 파라미터 잘못, 403: 접근 권한 없음, 404: 방 없음)
+}
+*/

src/api/rooms/postPassword.ts

@@ -0,0 +1,23 @@
+import { apiClient } from '../index';
+
+export interface PostPasswordRequest {
+  password: string;
+}
+
+export interface PostPasswordResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    matched: boolean;
+    roomId: number;
+  };
+}
+
+export const postPassword = async (
+  roomId: number,
+  data: PostPasswordRequest,
+): Promise<PostPasswordResponse> => {
+  const response = await apiClient.post<PostPasswordResponse>(`/rooms/${roomId}/password`, data);
+  return response.data;
+};

src/api/users/getRecentFollowing.ts

@@ -13,7 +13,7 @@ export interface GetRecentFollowingResponse {
   code: number;
   message: string;
   data: {
-    recentWriters: RecentWriterData[];
+    myFollowingUsers: RecentWriterData[];
   };
 }
 

src/components/feed/FollowList.tsx

@@ -9,7 +9,7 @@ import { getRecentFollowing, type RecentWriterData } from '@/api/users/getRecent
 
 const FollowList = () => {
   const navigate = useNavigate();
-  const [recentWriters, setRecentWriters] = useState<RecentWriterData[]>([]);
+  const [myFollowings, setMyFollowings] = useState<RecentWriterData[]>([]);
   const [loading, setLoading] = useState(false);
 
   // API에서 최근 글 작성한 팔로우 리스트 조회
@@ -19,14 +19,14 @@ const FollowList = () => {
       const response = await getRecentFollowing();
 
       if (response.isSuccess) {
-        setRecentWriters(response.data.recentWriters);
+        setMyFollowings(response.data.myFollowingUsers);
       } else {
         console.error('최근 팔로우 작성자 조회 실패:', response.message);
-        setRecentWriters([]);
+        setMyFollowings([]);
       }
     } catch (error) {
       console.error('최근 팔로우 작성자 조회 중 오류:', error);
-      setRecentWriters([]);
+      setMyFollowings([]);
     } finally {
       setLoading(false);
     }
@@ -37,8 +37,8 @@ const FollowList = () => {
     fetchRecentFollowing();
   }, []);
 
-  const hasFollowers = recentWriters.length > 0;
-  const visible = hasFollowers ? recentWriters.slice(0, 10) : [];
+  const hasFollowers = myFollowings.length > 0;
+  const visible = hasFollowers ? myFollowings.slice(0, 10) : [];
 
   const handleFindClick = () => {
     navigate('/feed/search');

src/components/feed/TabBar.tsx

@@ -26,28 +26,41 @@ const TabButton = styled.div`
   padding: 8px 4px;
   font-size: var(--font-size-lg);
   cursor: pointer;
+  position: relative;
 
   &.active {
     color: var(--color-white);
-    border-bottom: 2px solid var(--color-white);
     font-weight: var(--font-weight-semibold);
     line-height: 24px;
   }
   &.inactive {
     color: var(--color-grey-300);
-    border-bottom: 2px solid transparent;
     font-weight: var(--font-weight-medium);
     line-height: 24px;
   }
 `;
 
+const ActiveIndicator = styled.div<{ activeIndex: number }>`
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  width: 60px;
+  height: 2px;
+  background-color: var(--color-white);
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(${props => props.activeIndex * 80}px);
+`;
+
 interface TabProps {
   tabs: string[];
   activeTab: string;
   onTabClick: (tab: string) => void;
 }
 
 const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => {
+  // 현재 활성 탭의 인덱스 계산
+  const activeIndex = tabs.findIndex(tab => tab === activeTab);
+
   return (
     <Container>
       {tabs.map(tab => (
@@ -59,6 +72,8 @@ const TabBar = ({ tabs, activeTab, onTabClick }: TabProps) => {
           {tab}
         </TabButton>
       ))}
+      {/* 슬라이드 애니메이션 밑줄 */}
+      <ActiveIndicator activeIndex={activeIndex} />
     </Container>
   );
 };