THIP-TextHip · heeeeyong · Aug 6, 2025 · Aug 3, 2025 · Aug 3, 2025 · Aug 3, 2025
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href=".assets/custom_favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>THIP, 독서를 기록하는 가장 힙한 방법</title>
+    <meta property="og:title" content="THIP, 독서를 기록하는 가장 힙한 방법" />
+    <meta property="og:description" content="커뮤니티형 독서 기록 플랫폼. 띱. THIP." />
+    <meta property="og:image" content="https://thip.co.kr/assets/thumbnail.png" />
+    <meta property="og:url" content="https://thip.co.kr" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/assets/custom_favicon.svg b/public/assets/custom_favicon.svg
diff --git a/public/assets/thumbnail.png b/public/assets/thumbnail.png
diff --git a/src/api/comments/postReply.ts b/src/api/comments/postReply.ts
@@ -0,0 +1,22 @@
+import { apiClient } from '../index';
+
+export interface PostReplyRequest {
+  content: string;
+  isReplyRequest: boolean;
+  parentId: number | null;
+  postType: 'FEED' | 'RECORD' | 'VOTE';
+}
+
+export interface PostReplyResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    commentId: number;
+  };
+}
+
+export const postReply = async (postId: number, request: PostReplyRequest) => {
+  const response = await apiClient.post<PostReplyResponse>(`/comments/${postId}`, request);
+  return response.data;
+};
diff --git a/src/api/feeds/getFeedDetail.ts b/src/api/feeds/getFeedDetail.ts
@@ -0,0 +1,43 @@
+import { apiClient } from '../index';
+
+// 피드 상세 정보 타입 (PostData + 추가 필드들)
+export interface FeedDetailData {
+  feedId: number;
+  creatorId: number;
+  creatorNickname: string;
+  creatorProfileImageUrl: string;
+  alias: string;
+  aliasColor: string;
+  postDate: string;
+  isbn: string;
+  bookTitle: string;
+  bookAuthor: string;
+  contentBody: string;
+  contentsUrl: string[];
+  likeCount: number;
+  commentCount: number;
+  isSaved: boolean;
+  isLiked: boolean;
+  tagList: string[];
+}
+
+// API 응답 타입
+export interface FeedDetailResponse {
+  success: boolean;
+  code: number;
+  message: string;
+  data: FeedDetailData;
+}
+
+// 피드 상세 조회 API 함수
+export const getFeedDetail = async (feedId: number) => {
+  const response = await apiClient.get<FeedDetailResponse>(`/feeds/${feedId}`);
+  return response.data;
+};
+
+/*
+// 피드 상세 정보 조회
+const feedDetail = await getFeedDetail(123);
+console.log(feedDetail.data.feedId); // 123
+console.log(feedDetail.data.tagList); // ["태그1", "태그2"]
+*/
diff --git a/src/api/feeds/getMyFeed.ts b/src/api/feeds/getMyFeed.ts
@@ -22,7 +22,7 @@ export interface GetMyFeedParams {
 }
 
 // 내 피드 조회 API 함수
-export const getMyFeeds = async (params?: GetMyFeedParams): Promise<MyFeedResponse> => {
+export const getMyFeeds = async (params?: GetMyFeedParams) => {
   const queryParams = new URLSearchParams();
 
   // cursor가 있을 때만 쿼리 파라미터에 추가

diff --git a/src/api/feeds/getMyProfile.ts b/src/api/feeds/getMyProfile.ts
@@ -0,0 +1,23 @@
+import { apiClient } from '../index';
+import type { MyProfileData } from '@/types/profile';
+
+// API 응답 타입
+export interface MyProfileResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: MyProfileData;
+}
+
+// 내 프로필 조회 API 함수
+export const getMyProfile = async () => {
+  const response = await apiClient.get<MyProfileResponse>('/feeds/mine/info');
+  return response.data;
+};
+
+/*
+// 내 프로필 정보 조회
+const myProfile = await getMyProfile();
+console.log(myProfile.data.nickname); // 닉네임
+console.log(myProfile.data.followerCount); // 팔로워 수
+*/
diff --git a/src/api/feeds/getOtherFeed.ts b/src/api/feeds/getOtherFeed.ts
@@ -0,0 +1,40 @@
+import { apiClient } from '../index';
+
+// 다른 사용자의 피드 아이템 타입
+export interface OtherFeedItem {
+  feedId: number;
+  postDate: string;
+  isbn: string;
+  bookTitle: string;
+  bookAuthor: string;
+  contentBody: string;
+  contentsUrl: string[];
+  likeCount: number;
+  commentCount: number;
+  isSaved: boolean;
+}
+
+// API 응답 데이터 타입
+export interface OtherFeedData {
+  feedList: OtherFeedItem[];
+}
+
+// API 응답 타입
+export interface OtherFeedResponse {
+  success: boolean;
+  code: number;
+  message: string;
+  data: OtherFeedData;
+}
+
+// 다른 사용자 피드 조회 API 함수
+export const getOtherFeed = async (userId: number) => {
+  const response = await apiClient.get<OtherFeedResponse>(`/feeds/users/${userId}`);
+  return response.data;
+};
+
+/*
+다른 사용자의 피드 리스트 조회
+const otherUserFeed = await getOtherFeed(123);
+console.log(otherUserFeed.data.feedList); // OtherFeedItem[]
+*/
diff --git a/src/api/feeds/getTotalFeed.ts b/src/api/feeds/getTotalFeed.ts
@@ -21,7 +21,7 @@ export interface GetTotalFeedParams {
   cursor?: string; // 첫 페이지는 null 또는 없음, 다음 페이지부터는 nextCursor 값 사용
 }
 
-export const getTotalFeeds = async (params?: GetTotalFeedParams): Promise<TotalFeedResponse> => {
+export const getTotalFeeds = async (params?: GetTotalFeedParams) => {
   const queryParams = new URLSearchParams();
 
   // cursor가 있을 때만 쿼리 파라미터에 추가

diff --git a/src/api/feeds/postSave.ts b/src/api/feeds/postSave.ts
@@ -0,0 +1,50 @@
+import { apiClient } from '../index';
+
+// 요청 바디 타입
+export interface SaveFeedRequest {
+  type: boolean; // true: 저장, false: 저장 취소
+}
+
+// 응답 데이터 타입
+export interface SaveFeedData {
+  feedId: number;
+  isSaved: boolean;
+}
+
+// API 응답 타입
+export interface SaveFeedResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data?: SaveFeedData; // 성공 시에만 존재
+}
+
+// 피드 저장/저장 취소 API 함수
+export const postSaveFeed = async (feedId: number, isSaved: boolean) => {
+  const requestBody: SaveFeedRequest = {
+    type: isSaved, // 현재 저장 상태로 변경
+  };
+
+  const response = await apiClient.post<SaveFeedResponse>(`/feeds/${feedId}/saved`, requestBody);
+  return response.data;
+};
+
+/*
+사용 방법:
+
+// 피드 저장
+const saveResult = await postSaveFeed(123, true);
+if (saveResult.isSuccess) {
+  console.log('저장 성공:', saveResult.data?.isSaved);
+} else {
+  console.log('저장 실패:', saveResult.message);
+}
+
+// 피드 저장 취소
+const unsaveResult = await postSaveFeed(123, false);
+if (unsaveResult.isSuccess) {
+  console.log('저장 취소 성공:', unsaveResult.data?.isSaved);
+} else {
+  console.log('저장 취소 실패:', unsaveResult.message);
+}
+*/
diff --git a/src/api/users/getFollowerList.ts b/src/api/users/getFollowerList.ts
@@ -0,0 +1,36 @@
+import { apiClient } from '../index';
+import type { FollowData } from '@/types/follow';
+
+export interface FollowerListResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    followers: FollowData[];
+    nextCursor: string;
+    isLast: boolean;
+  };
+}
+
+export interface GetFollowerListParams {
+  size?: number; // 1~10 사이, default: 10
+  cursor?: string | null; // 첫 요청시 null, 이후 nextCursor 값
+}
+
+export const getFollowerList = async (userId: string, params?: GetFollowerListParams) => {
+  const queryParams = new URLSearchParams();
+
+  const size = params?.size || 10;
+  if (size >= 1 && size <= 10) {
+    queryParams.append('size', size.toString());
+  }
+
+  if (params?.cursor) {
+    queryParams.append('cursor', params.cursor);
+  }
+
+  const url = `/users/${userId}/followers${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
+
+  const response = await apiClient.get<FollowerListResponse>(url);
+  return response.data;
+};
diff --git a/src/api/users/getFollowingList.ts b/src/api/users/getFollowingList.ts
@@ -0,0 +1,36 @@
+import { apiClient } from '../index';
+import type { FollowData } from '@/types/follow';
+
+export interface FollowingListResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    followings: FollowData[];
+    nextCursor: string;
+    isLast: boolean;
+  };
+}
+
+export interface GetFollowingListParams {
+  size?: number; // 1~10 사이, default: 10
+  cursor?: string | null; // 첫 요청시 null, 이후 nextCursor 값
+}
+
+export const getFollowingList = async (params?: GetFollowingListParams) => {
+  const queryParams = new URLSearchParams();
+
+  const size = params?.size || 10;
+  if (size >= 1 && size <= 10) {
+    queryParams.append('size', size.toString());
+  }
+
+  if (params?.cursor) {
+    queryParams.append('cursor', params.cursor);
+  }
+
+  const url = `/users/my-followings${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
+
+  const response = await apiClient.get<FollowingListResponse>(url);
+  return response.data;
+};
diff --git a/src/api/users/getOtherProfile.ts b/src/api/users/getOtherProfile.ts
@@ -0,0 +1,22 @@
+import { apiClient } from '../index';
+import type { OtherProfileData } from '@/types/profile';
+// API 응답 타입
+export interface OtherProfileResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: OtherProfileData;
+}
+
+// 다른 사용자 프로필 조회 API 함수
+export const getOtherProfile = async (userId: number) => {
+  const response = await apiClient.get<OtherProfileResponse>(`/feeds/users/${userId}/info`);
+  return response.data;
+};
+
+/*
+// 다른 사용자의 프로필 정보 조회
+const otherProfile = await getOtherProfile(123);
+console.log(otherProfile.data.nickname); // 닉네임
+console.log(otherProfile.data.followerCount); // 팔로워 수
+*/
diff --git a/src/api/users/postFollow.ts b/src/api/users/postFollow.ts
@@ -0,0 +1,27 @@
+import { apiClient } from '../index';
+
+export interface FollowRequest {
+  type: boolean; // true: 팔로우, false: 언팔로우
+}
+
+export interface FollowResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    isFollowing: boolean; // 바뀐 팔로우 상태
+  };
+}
+
+export interface FollowErrorResponse {
+  isSuccess: false;
+  code: number;
+  message: string;
+}
+
+export const postFollow = async (followingUserId: number, type: boolean) => {
+  const response = await apiClient.post<FollowResponse>(`/users/following/${followingUserId}`, {
+    type,
+  });
+  return response.data;
+};
diff --git a/src/components/common/Post/PostFooter.tsx b/src/components/common/Post/PostFooter.tsx
@@ -7,6 +7,7 @@ import comment from '../../../assets/feed/comment.svg';
 import save from '../../../assets/feed/save.svg';
 import activeSave from '../../../assets/feed/activeSave.svg';
 import lockIcon from '../../../assets/feed/lockIcon.svg';
+import { postSaveFeed } from '@/api/feeds/postSave';
 
 const Container = styled.div<{ isDetail: boolean }>`
   width: 100%;
@@ -74,8 +75,20 @@ const PostFooter = ({
     setLikeCount(prev => (liked ? prev - 1 : prev + 1));
   };
 
-  const handleSave = () => {
-    setSaved(!saved);
+  const handleSave = async () => {
+    try {
+      const response = await postSaveFeed(feedId, !saved);
+
+      if (response.isSuccess) {
+        // 성공 시 상태 업데이트
+        setSaved(response.data?.isSaved ?? !saved);
+        console.log('저장 상태 변경 성공:', response.data?.isSaved);
+      } else {
+        console.error('저장 상태 변경 실패:', response.message);
+      }
+    } catch (error) {
+      console.error('저장 API 호출 실패:', error);
+    }
   };
 
   const handleComment = () => {