[API] axios API 클라이언트 및 토큰 관리 유틸 추가

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env.local
 
 # Editor directories and files
 .vscode/*

src/api/feeds/getMyFeed.ts

@@ -0,0 +1,52 @@
+import { apiClient } from '../index';
+import type { PostData } from '@/types/post';
+
+// API 응답 데이터 타입
+export interface MyFeedData {
+  feedList: PostData[];
+  nextCursor: string;
+  isLast: boolean;
+}
+
+// API 응답 타입
+export interface MyFeedResponse {
+  success: boolean;
+  code: number;
+  message: string;
+  data: MyFeedData;
+}
+
+// 요청 파라미터 타입
+export interface GetMyFeedParams {
+  cursor?: string; // 첫 페이지는 null 또는 없음, 다음 페이지부터는 nextCursor 값 사용
+}
+
+// 내 피드 조회 API 함수
+export const getMyFeeds = async (params?: GetMyFeedParams): Promise<MyFeedResponse> => {
+  const queryParams = new URLSearchParams();
+
+  // cursor가 있을 때만 쿼리 파라미터에 추가
+  if (params?.cursor) {
+    queryParams.append('cursor', params.cursor);
+  }
+
+  const url = `/feeds/mine${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
+
+  const response = await apiClient.get<MyFeedResponse>(url);
+  return response.data;
+};
+
+/*
+// 첫 페이지 조회
+const firstPage = await getMyFeeds();
+
+// 다음 페이지 조회 (nextCursor 사용)
+const nextPage = await getMyFeeds({ 
+  cursor: firstPage.data.nextCursor 
+});
+
+// 마지막 페이지인지 확인
+if (firstPage.data.isLast) {
+  console.log('더 이상 불러올 데이터가 없습니다.');
+}
+*/

src/api/feeds/getTotalFeed.ts

@@ -0,0 +1,53 @@
+import { apiClient } from '../index';
+import type { PostData } from '@/types/post';
+
+// API 응답 데이터 타입
+export interface TotalFeedData {
+  feedList: PostData[];
+  nextCursor: string;
+  isLast: boolean;
+}
+
+// API 응답 타입
+export interface TotalFeedResponse {
+  success: boolean;
+  code: number;
+  message: string;
+  data: TotalFeedData;
+}
+
+// 요청 파라미터 타입
+export interface GetTotalFeedParams {
+  cursor?: string; // 첫 페이지는 null 또는 없음, 다음 페이지부터는 nextCursor 값 사용
+}
+
+export const getTotalFeeds = async (params?: GetTotalFeedParams): Promise<TotalFeedResponse> => {
+  const queryParams = new URLSearchParams();
+
+  // cursor가 있을 때만 쿼리 파라미터에 추가
+  if (params?.cursor) {
+    queryParams.append('cursor', params.cursor);
+  }
+
+  const url = `/feeds${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
+
+  const response = await apiClient.get<TotalFeedResponse>(url);
+  return response.data;
+};
+
+/*
+사용 방법:
+
+// 첫 페이지 조회
+const firstPage = await getTotalFeeds();
+
+// 다음 페이지 조회 (nextCursor 사용)
+const nextPage = await getTotalFeeds({ 
+  cursor: firstPage.data.nextCursor 
+});
+
+// 마지막 페이지인지 확인
+if (firstPage.data.isLast) {
+  console.log('더 이상 불러올 데이터가 없습니다.');
+}
+*/

src/api/index.ts

@@ -0,0 +1,87 @@
+import axios, { type AxiosResponse, type AxiosError } from 'axios';
+
+// 하드코딩된 액세스 토큰
+const ACCESS_TOKEN =
+  'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsImlhdCI6MTc1NDIwMTY4OCwiZXhwIjoxNzU2NzkzNjg4fQ.oOyJ7JI_t2-Xq1-gfAv4ZaYNrbyplvqdxhCk76-Txe4';
+
+// 토큰 관리 유틸리티
+export const TokenManager = {
+  setAccessToken: (token: string) => localStorage.setItem('accessToken', token),
+  getAccessToken: (): string | null => localStorage.getItem('accessToken'),
+  // setRefreshToken: (token: string) => localStorage.setItem('refreshToken', token),
+  // getRefreshToken: (): string | null => localStorage.getItem('refreshToken'),
+  clearTokens: () => {
+    localStorage.removeItem('accessToken');
+    // localStorage.removeItem('refreshToken');
+  },
+  hasValidToken: (): boolean => !!localStorage.getItem('accessToken'),
+};
+
+// API 기본 설정
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+// 환경변수 확인용
+console.log('API_BASE_URL:', API_BASE_URL);
+
+// axios 인스턴스 생성
+export const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 요청 인터셉터
+apiClient.interceptors.request.use(
+  config => {
+    // 로컬스토리지에서 토큰 먼저 확인
+    const token = TokenManager.getAccessToken();
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    } else {
+      // 토큰이 없으면 하드코딩된 토큰 사용 (개발용)
+      config.headers.Authorization = ACCESS_TOKEN;
+    }
+    return config;
+  },
+  error => Promise.reject(error),
+);
+
+// 응답 인터셉터 - 토큰 만료 처리 및 에러 처리
+apiClient.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => {
+    const { status } = error.response || {};
+
+    // 에러 로깅
+    console.error('API Error:', status, error.message);
+
+    // 토큰 만료 또는 인증 실패 시 로그인 페이지로 리다이렉트
+    if (status === 401) {
+      // alert('토큰이 만료되었거나 유효하지 않습니다. 로그인 페이지로 이동합니다.');
+
+      // 현재 페이지가 로그인 페이지가 아닌 경우에만 리다이렉트
+      if (window.location.pathname !== '/') {
+        // alert('로그인이 필요합니다. 로그인 페이지로 이동합니다.');
+        window.location.href = '/';
+      }
+    }
+
+    // 권한 없음 (403) 에러 처리
+    if (status === 403) {
+      console.warn('접근 권한이 없습니다.');
+      alert('접근 권한이 없습니다.');
+    }
+
+    // 서버 에러 (500번대) 처리
+    if (status && status >= 500) {
+      console.error('서버 오류가 발생했습니다.');
+      alert('서버에 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default apiClient;

src/components/common/Post/PostBody.tsx

@@ -48,12 +48,12 @@ const PostBody = ({
   bookTitle,
   isbn,
   bookAuthor,
-  postContent,
+  contentBody,
   feedId,
-  images = [],
+  contentsUrl = [],
 }: PostBodyProps) => {
   const navigate = useNavigate();
-  const hasImage = images.length > 0;
+  const hasImage = contentsUrl.length > 0;
 
   const handlePostClick = (feedId: number) => {
     // if (!isClickable) return;
@@ -65,10 +65,10 @@ const PostBody = ({
     <Container>
       <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} isbn={isbn} />
       <PostContent hasImage={hasImage} onClick={() => handlePostClick(feedId)}>
-        <div className="content">{postContent}</div>
+        <div className="content">{contentBody}</div>
         {hasImage && (
           <div className="imgContainer">
-            {images.map((src, i) => (
+            {contentsUrl.map((src: string, i: number) => (
               <img key={i} src={src} />
             ))}
           </div>

src/components/common/Post/PostFooter.tsx

@@ -43,27 +43,31 @@ const Container = styled.div<{ isDetail: boolean }>`
 `;
 
 interface PostFooterProps {
-  initialLikeCount: number;
+  likeCount: number;
   commentCount: number;
   feedId: number;
   isMyFeed: boolean;
+  isSaved?: boolean;
+  isLiked?: boolean;
   isPublic?: boolean;
   isDetail?: boolean;
 }
 
 const PostFooter = ({
-  initialLikeCount,
+  likeCount: initialLikeCount,
   commentCount,
   feedId,
   isMyFeed,
-  isPublic,
+  isSaved = false,
+  isLiked = false,
+  isPublic = true,
   isDetail = false,
 }: PostFooterProps) => {
   const navigate = useNavigate();
 
-  const [liked, setLiked] = useState(false);
+  const [liked, setLiked] = useState(isLiked);
   const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
-  const [saved, setSaved] = useState(false);
+  const [saved, setSaved] = useState(isSaved);
 
   const handleLike = () => {
     setLiked(!liked);

src/components/common/Post/PostHeader.tsx

@@ -1,41 +1,44 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 interface PostHeaderProps {
-  profileImgUrl: string;
-  userName: string;
-  userTitle: string;
-  titleColor: string;
-  createdAt: string;
-  userId: number;
+  creatorProfileImageUrl?: string;
+  creatorNickname?: string;
+  alias?: string;
+  titleColor?: string;
+  postDate: string;
+  creatorId?: number;
   type?: 'post' | 'reply';
 }
 
 const PostHeader = ({
-  profileImgUrl,
-  userName,
-  userTitle,
-  titleColor,
-  createdAt,
-  userId,
+  creatorProfileImageUrl,
+  creatorNickname,
+  alias,
+  titleColor = '#FFFFFF', // 기본값 설정
+  postDate,
+  creatorId,
   type = 'post',
 }: PostHeaderProps) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/otherfeed/${userId}`);
+    if (creatorId) {
+      navigate(`/otherfeed/${creatorId}`);
+    }
   };
+
   return (
     <Container type={type} onClick={handleClick}>
       <div className="headerInfo">
-        <img src={profileImgUrl} alt="칭호 이미지" />
+        <img src={creatorProfileImageUrl} alt="칭호 이미지" />
         <div className="infoBox">
-          <div className="username">{userName}</div>
+          <div className="username">{creatorNickname}</div>
           <div className="usertitle" style={{ color: titleColor }}>
-            {userTitle}
+            {alias}
           </div>
         </div>
       </div>
-      <div className="timestamp">{createdAt}</div>
+      <div className="timestamp">{postDate}</div>
     </Container>
   );
 };

src/components/common/Post/Reply.tsx

@@ -36,12 +36,12 @@ const Reply = ({
   return (
     <Container>
       <PostHeader
-        profileImgUrl={imageUrl}
-        userName={nickName}
-        userTitle={userTitle}
+        creatorProfileImageUrl={imageUrl}
+        creatorNickname={nickName}
+        alias={userTitle}
         titleColor={titleColor}
-        createdAt={postDate}
-        userId={userId}
+        postDate={postDate}
+        creatorId={userId}
         type="reply"
       />
       <ReplySection>

src/components/common/Post/SubReply.tsx

@@ -41,12 +41,12 @@ const SubReply = ({
       </ReplyIcon>
       <Content>
         <PostHeader
-          profileImgUrl={replyCommentimgUrl}
-          userName={replyCommentUserName}
-          userTitle={replyCommentUserTitle}
+          creatorProfileImageUrl={replyCommentimgUrl}
+          creatorNickname={replyCommentUserName}
+          alias={replyCommentUserTitle}
           titleColor={titleColor}
-          createdAt={postDate}
-          userId={replyCommentUserId}
+          postDate={postDate}
+          creatorId={replyCommentUserId}
           type="reply"
         />
         <ReplySection>

src/components/feed/BookInfoCard.tsx

@@ -49,7 +49,7 @@ const BookContainer = styled.div`
 interface BookInfoCardProps {
   bookTitle: string;
   bookAuthor: string;
-  isbn: number;
+  isbn: string;
 }
 
 const BookInfoCard = ({ bookTitle, bookAuthor, isbn }: BookInfoCardProps) => {