Merge pull request #288 from DguFarmSystem/fix/#287

[Feat] 블로그/프로젝트 페이지네이션 및 반응형 style 구현

Author: dongmin0204

apps/website/src/assets/Icons/pagenation_1.png

@@ -54,8 +54,8 @@ export default function Header() {
               <S.NavItem 
                 $isTablet={isTablet} 
                 $isMobile={isMobile} 
-                onClick={() => navigate('/blog')} 
-                isActive={location.pathname === '/blog'}
+                onClick={() => navigate('/project')} 
+                isActive={location.pathname === '/project'}
               >
                 블로그 / 프로젝트
               </S.NavItem>

apps/website/src/assets/Icons/pagenation_2.png

@@ -1,7 +1,7 @@
-// useBlog.tsx
+// useBlog.ts
 import { useState, useEffect } from "react";
-import { BlogGETResponse, BlogPOSTRequest, BlogPOSTResponse } from "@/models/blog";
-import { getBlogList, postBlog, getApprovedBlogList } from "@/services/blog";
+import { BlogGETResponse, BlogPOSTRequest, BlogPOSTResponse, BlogPage, PageableMeta, SortMeta } from "@/models/blog";
+import { getBlogList, postBlog, getApprovedBlogList, getBlogPageList } from "@/services/blog";
 import { handleApiError } from "@/utils/handleApiError";
 
 /**
@@ -72,11 +72,94 @@ export const useApprovedBlogList = () => {
       .then((response) => {
         setData(response);
       })
-      .catch((err) => { setError(handleApiError(err)); })
+      .catch((err) => setError(handleApiError(err)))
       .finally(() => {
         setLoading(false);
       });
   }, []);
 
   return { data, loading, error };
 };
+
+/**
+ * 페이지 단위 블로그 조회를 위한 커스텀 훅 (페이지네이션 지원)
+ * @param page  페이지 번호 (0부터 시작)
+ * @param size  페이지 크기
+ */
+interface BlogPageQuery {
+  page: number;
+  size: number;
+}
+
+// 페이지 정보 인터페이스
+interface BlogPageInfo {
+  // 기본 페이지 정보
+  currentPage: number;
+  totalPages: number;
+  totalElements: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  pageSize: number;
+  numberOfElements: number;
+  
+  // PageableMeta 정보
+  pageable: PageableMeta;
+  
+  // SortMeta 정보
+  sort: SortMeta;
+  
+  // 추가 플래그
+  isFirst: boolean;
+  isLast: boolean;
+  isEmpty: boolean;
+}
+
+export const useBlogPage = ({ page, size }: BlogPageQuery) => {
+  const [data, setData] = useState<BlogPage | null>(null);
+  const [pageInfo, setPageInfo] = useState<BlogPageInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const fetchBlogPage = async () => {
+      setLoading(true);
+      try {
+        const response = await getBlogPageList(page, size);
+        if (response) {
+          setData(response);
+          
+          // PageableMeta와 SortMeta를 포함한 완전한 페이지 정보 추출
+          setPageInfo({
+            // 기본 페이지 정보
+            currentPage: response.number,
+            totalPages: response.totalPages,
+            totalElements: response.totalElements,
+            hasNextPage: !response.last,
+            hasPreviousPage: !response.first,
+            pageSize: response.size,
+            numberOfElements: response.numberOfElements,
+            
+            // PageableMeta 정보
+            pageable: response.pageable,
+            
+            // SortMeta 정보
+            sort: response.sort,
+            
+            // 추가 플래그
+            isFirst: response.first,
+            isLast: response.last,
+            isEmpty: response.empty
+          });
+        }
+      } catch (err) {
+        setError(handleApiError(err));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBlogPage();
+  }, [page, size]);
+
+  return { data, pageInfo, loading, error };
+};

apps/website/src/components/Header/Header.tsx

@@ -26,7 +26,7 @@ export const isValidResponse = (res: APIResponse | null): boolean => {
 // 프록시 서버 URL (CORS 헤더가 추가되어야 합니다)
 // corsproxy.io 는 요청 URL을 쿼리스트링으로 전달합니다.
 // const proxyUrl = 'https://corsproxy.io/?key=****&url=';
-const proxyUrl = 'https://corsproxy.io/'; // localhost용 프록시
+const proxyUrl = 'https://corsproxy.io/?url='; // localhost용 프록시
 
 /**
  * extractMetaContent

apps/website/src/hooks/useBlog.ts

@@ -9,7 +9,7 @@ export const useProjectList = (
   generation?: number,
   track?: Track,
   page: number = 0,
-  size: number = 10
+  size: number = 12
 ) => {
   const [data, setData] = useState<Project[]>([]);
   const [pageInfo, setPageInfo] = useState<ProjectFilterResponse['pageInfo'] | null>(null);
@@ -21,6 +21,7 @@ export const useProjectList = (
       setLoading(true);
       try {
         const response: ProjectFilterApiResponse = await getFilteredProjects(generation, track, page, size);
+        console.log("pageInfo", response.data?.pageInfo);
         if (response.data) {
           setData(response.data.content);
           setPageInfo(response.data.pageInfo);

apps/website/src/hooks/useLinkPreview.ts

@@ -5,6 +5,7 @@ enum ApiErrorMessages {
   }
 
   export enum Track {
+    ALL = "",
     UNION = "UNION",
     GAMING_VIDEO = "GAMING_VIDEO",
     AI = "AI",
@@ -13,6 +14,22 @@ enum ApiErrorMessages {
     BIGDATA = "BIGDATA",
   }
 
+  export interface SortMeta {
+    unsorted: boolean;
+    sorted: boolean;
+    empty: boolean;
+  }
+  
+  export interface PageableMeta {
+    pageNumber: number;
+    pageSize: number;
+    sort: SortMeta;
+    offset: number;
+    unpaged: boolean;
+    paged: boolean;
+  }
+  
+
   interface ApiResponse<T = unknown> {
     status: number;
     message: ApiErrorMessages | "요청이 성공했습니다." | string;
@@ -27,13 +44,65 @@ enum ApiErrorMessages {
     link : string;
   }
 
-  interface BlogpageResquest {
-    track : string;
-    generation : number;
-    page : number; // 페이징
+  // 블로그 목록 조회 응답 데이터
+  export interface BlogItem {
+    blogId: number;
+    link: string;
+    category: string[];
+    approvalStatus: string;
+  }
+
+  interface BlogListResponse {
+    content: BlogItem[];
+    pageInfo: {
+      pageSize: number;
+      totalElements: number;
+      currentPageElements: number;
+      totalPages: number;
+      currentPage: number;
+      sortBy: string;
+      hasNextPage: boolean;
+      hasPreviousPage: boolean;
+    };
+  }
+
+  export interface BlogPage {
+    content: BlogItem[];
+    pageable: PageableMeta;
+  
+    last: boolean;
+    totalElements: number;
+    totalPages: number;
+  
+    sort: SortMeta;
+  
+    first: boolean;
+    number: number;
+    numberOfElements: number;
+    size: number;
+    empty: boolean;
+  }
+  
+  export interface BlogPageInfo {
+    currentPage: number;
+    totalPages: number;
+    totalElements: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+  
+    pageSize: number;
+    numberOfElements: number;
+  
+    pageable: PageableMeta;
+    sort: SortMeta;
+  
+    isFirst: boolean;
+    isLast: boolean;
+    isEmpty: boolean;
   }
 
   // blog에 POST 요청, POST 응답, GET요청 
   export type BlogPOSTRequest = ApiRequest;
-  export type BlogGETResponse = BlogpageResquest;
-  export type BlogPOSTResponse = ApiResponse<{ blogId: number }>;
+  export type BlogGETResponse = ApiResponse<BlogListResponse>;
+  export type BlogPOSTResponse = ApiResponse<{ blogId: number }>;
+  export type BlogPageResponse = ApiResponse<BlogPage>;

apps/website/src/hooks/useProject.ts

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 
 // 스타일 컴포넌트 (블로그랑 같지만, 다를 수 있으니께)
 // 요긴 대충 짜서 해결
-export const Card = styled.a`
-  width: 300px;
-  height: 335px;
+export const Card = styled.a<{$isMobile: boolean; $isTablet: boolean;}>`
+  width: ${(props) => (props.$isMobile ? '130px' : props.$isTablet ? '240px' : '300px')};
+  height: ${(props) => (props.$isMobile ? '205px' : props.$isTablet ? '260px' : '335px')};
 
-  border-radius: 8px;
+  border-radius: ${(props) => (props.$isMobile ? '10px' : '8px')};
   overflow: hidden;
 
   display: flex;
@@ -17,17 +17,16 @@ export const Card = styled.a`
   text-decoration: none; // 링크 밑줄 제거 등
 `;
 
-export const Image = styled.div`
+export const Image = styled.div<{$isMobile: boolean; $isTablet: boolean;}>`
   width: 100%;
 
   overflow: hidden;
   border-radius: 8px;
-  height: 200px;
+  height: ${(props) => (props.$isMobile ? '87px' : props.$isTablet ? '150px' : '200px')};
   background-color: var(--FarmSystem_LightGrey);
 
   img{
-    width: 100%;
-    height: 200px;
+    height: ${(props) => (props.$isMobile ? '87px' : props.$isTablet ? '150px' : '200px')};
     object-fit: cover;
 }
 `;
@@ -36,9 +35,9 @@ export const Content = styled.div`
   padding: 0px;
 `;
 
-export const Title = styled.h3`
+export const Title = styled.h3<{$isMobile: boolean; $isTablet: boolean;}>`
    margin: 0px;
-   font-size: 24px;
+   font-size: ${(props) => (props.$isMobile ? '12px' : props.$isTablet ? '16px' : '24px')};
    font-weight: 700;
 
   overflow: hidden;
@@ -47,8 +46,8 @@ export const Title = styled.h3`
 
 `;
 
-export const Description = styled.p`
-  font-size: 15px;
+export const Description = styled.p<{$isMobile: boolean; $isTablet: boolean;}>`
+  font-size: ${(props) => (props.$isMobile ? '10px' : props.$isTablet ? '15px' : '15px')};
   line-height: 20px;
   font-weight: 300;
 
@@ -57,6 +56,8 @@ export const Description = styled.p`
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+
+  height: ${(props) => (props.$isMobile ? '60px' : props.$isTablet ? '40px' : '40px')}; /* line-height * 2 */
 `;
 
 export const TagContainer = styled.div`
@@ -65,13 +66,14 @@ export const TagContainer = styled.div`
    gap: 10px;
 `;
 
-export const Tag = styled.span`
+export const Tag = styled.span<{$isMobile: boolean; $isTablet: boolean;}>`
    background-color: var(--FarmSystem_Green06);
    color: var(--FarmSystem_White);
 
    padding: 5px 10px;
    border-radius: 15px;
-   font-size: 14px;
+   font-size: ${(props) => (props.$isMobile ? '10px' : props.$isTablet ? '12px' : '14px')};
+
 
    font-weight: 300;
    line-height: 1.2;

apps/website/src/models/blog.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as S from './BlogItem.styles';
 import { useLinkPreview } from '@/hooks/useLinkPreview';
+import useMediaQueries from '@/hooks/useMediaQueries';
 import BlankImg from '../../../assets/Images/Blog_Project/blank_img.svg';
 
 export enum BlogCategory {
@@ -19,7 +20,7 @@ export interface BlogTag {
 
 export interface BlogItemProps {
   blogUrl: string;
-  tags: BlogTag[];
+  tags: BlogCategory[];
 }
 
 // 카테고리 enum을 텍스트로 매핑
@@ -47,6 +48,7 @@ const getCategoryName = (category: BlogCategory): string => {
 const BlogItem: React.FC<BlogItemProps> = ({ blogUrl, tags }) => {
   // blogUrl을 기반으로 메타데이터를 fetching
   const { metadata, loading} = useLinkPreview(blogUrl);
+  const { isMobile, isTablet } = useMediaQueries();
 
 
   // 메타데이터가 없는 경우 대비 기본값 설정
@@ -57,22 +59,22 @@ const BlogItem: React.FC<BlogItemProps> = ({ blogUrl, tags }) => {
     ? metadata.image
     : BlankImg;
   return (
-    <S.Card href={blogUrl} target="_blank">
-      <S.Image>
+    <S.Card href={blogUrl} target="_blank" $isMobile={isMobile} $isTablet={isTablet}>
+      <S.Image $isMobile={isMobile} $isTablet={isTablet}>
         {loading ? (
           <img src={BlankImg} alt="로딩중..." />
         ) : (
           <img src={previewImage} alt={title} />
         )}
       </S.Image>
       <S.Content>
-        <S.Title>{loading ? '로딩중...' : title}</S.Title>
-        <S.Description>
+        <S.Title $isMobile={isMobile} $isTablet={isTablet}>{loading ? '로딩중...' : title}</S.Title>
+        <S.Description $isMobile={isMobile} $isTablet={isTablet}>
           {loading ? '설명을 불러오는 중입니다...' : description}
         </S.Description>
         <S.TagContainer>
-          {tags.map((tag, index) => (
-            <S.Tag key={index}>{getCategoryName(tag.category)}</S.Tag>
+          {tags.map((category, index) => (
+            <S.Tag key={index} $isMobile={isMobile} $isTablet={isTablet}>{getCategoryName(category)}</S.Tag>
           ))}
         </S.TagContainer>
       </S.Content>