Merge pull request #101 from Devminjeong-eum/fix/DEV-157

[DEV-157] 모든 용어 보기 기본 노출 아이템 개수 수정

src/app/home/page.tsx

@@ -1,5 +1,4 @@
 import Header from '@/components/layout/Header';
-import HomeClientPage from '@/components/pages/home';
 import QUERY_KEYS from '@/constants/queryKey';
 import {
   HydrationBoundary,
@@ -12,6 +11,8 @@ import {
   getCurrentWeekTrendList,
 } from '@/fetcher/server.ts';
 import HomeSkeleton from '@/components/pages/home/HomeSkeleton';
+import type { MainItemType, MainResponse } from '@/types/main';
+import HomeClientPage from '@/components/pages/home';
 
 export default async function HomePage({
   searchParams: { page },
@@ -31,10 +32,15 @@ export default async function HomePage({
     }),
   ]);
 
+  const postsData: MainResponse<MainItemType> | undefined =
+    queryClient.getQueryData([QUERY_KEYS.HOME_KEY, Number(page)]);
+
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <Header />
-      <Suspense fallback={<HomeSkeleton />}>
+      <Suspense
+        fallback={<HomeSkeleton limit={Number(postsData?.data?.limit)} />}
+      >
         <HomeClientPage />
       </Suspense>
     </HydrationBoundary>

src/components/pages/home/HomeSkeleton.tsx

@@ -1,9 +1,9 @@
 import HeartSvg from '@/components/svg-component/HeartSvg';
 
-export default function HomeSkeleton() {
+export default function HomeSkeleton({ limit }: { limit: number }) {
   return (
     <div className="flex flex-col gap-2 mt-4 px-5">
-      {Array.from({ length: 10 }, (_, idx) => (
+      {Array.from({ length: limit }, (_, idx) => (
         <div
           key={idx}
           className="animate-pulse min-h-[98px] p-[18px] pb-[14px] w-full ring-1 bg-white ring-[#F2F4F9] rounded-2xl"
@@ -29,4 +29,4 @@ export default function HomeSkeleton() {
       ))}
     </div>
   );
-}
+}

src/components/pages/home/all-posts/index.tsx

@@ -20,8 +20,7 @@ export default function AllPosts({
   const [isOpenModal, setIsOpenModal] = useState(false);
 
   return (
-    // FIXME: 트렌딩 단어 오픈 후에는 아래 px-5 제거하기
-    <div className="flex flex-col gap-[7px] mt-[20px] px-5">
+    <div className="flex flex-col gap-[7px] mt-[20px]">
       {data.data.map((item) => (
         <WordItem key={item.id} {...item} setIsOpenModal={setIsOpenModal} />
       ))}

src/components/pages/home/index.tsx

@@ -22,10 +22,8 @@ const HomeClientPage = () => {
   );
 
   return (
-    <main className="py-5 rounded-[24px] bg-[#FBFCFE] min-h-screen -mt-[20px] z-50 flex flex-col gap-[8px]">
-      <div className="px-5">
-        <HomeToggleZone handleToggle={handleToggle} isTrending={isTrending} />
-      </div>
+    <main className="py-5 rounded-[24px] bg-[#FBFCFE] min-h-screen -mt-[20px] z-50 flex flex-col gap-[8px] px-5">
+      <HomeToggleZone handleToggle={handleToggle} isTrending={isTrending} />
 
       {isTrending === 'trend' ? (
         <TrendingPosts />

src/components/pages/home/trending-posts/index.tsx

@@ -11,10 +11,10 @@ export default function TrendingPosts() {
   const generalRankingList = currentWeekTrendList.slice(3);
 
   return (
-    <div className='px-5'>
+    <>
       <TrendingDescription />
       <TopRanking topRankingList={topRankingList} />
       <GeneralRanking generalRankingList={generalRankingList} />
-    </div>
+    </>
   );
 }

src/components/pages/search/index.tsx

@@ -21,7 +21,6 @@ export default function Search({ word }: Props) {
   } = useGetSearchWord(word.toLowerCase());
 
   return (
-    // FIXME: 트렌딩 단어 오픈 후에는 아래 px-5 제거하기
     <div className="flex flex-col gap-[7px] mt-[17px] px-5">
       {!totalCount && <NotFoundWord />}
       {data.map((item) => (

src/constants/home.constants.ts

@@ -0,0 +1 @@
+export const MAIN_PAGE_ITEM_LIMIT = 16;

src/fetcher/index.ts

@@ -14,6 +14,7 @@ import type {
 import { PaginationRes, MainItemType } from '@/types/main.ts';
 import { backendFetch } from '@/fetcher/backendFetch.ts';
 import { FetchRes } from './types.ts';
+import { MAIN_PAGE_ITEM_LIMIT } from '@/constants/home.constants.ts';
 
 export const getWordSearch = async (wordName: string) => {
   try {
@@ -79,7 +80,7 @@ export const getAllPostsClient = async (currentPage: number) => {
     >(`/word/list`, {
       params: {
         page: currentPage,
-        limit: 10,
+        limit: MAIN_PAGE_ITEM_LIMIT,
       },
     });
 

src/fetcher/server.ts

@@ -1,3 +1,4 @@
+import { MAIN_PAGE_ITEM_LIMIT } from '@/constants/home.constants';
 import { serverFetch } from '@/fetcher/serverFetch.ts';
 import {
   DefaultRes,
@@ -15,7 +16,7 @@ export const getAllPostsServer = async (currentPage: number) => {
     >(`/word/list`, {
       params: {
         page: currentPage,
-        limit: 10,
+        limit: MAIN_PAGE_ITEM_LIMIT,
       },
     });
 

src/hooks/useLoadKakaoScript.ts

@@ -24,7 +24,6 @@ export default function useLoadKakaoScript() {
   const title = `${userName}님의 개발 용어 점수는?`;
   const desc = `${userName}님의 개발 용어 점수는 몇 점일까요? 클릭해서 확인해보고, 함께 도전해보세요!`;
 
-  // FIXME: 나중에 엔드포인트가 quiz/quizID와 같이 바뀔텐데 아직 정해진게 없는것 같아서 추후 수정 예정
   const urlEndPoint = window.location.href.split('/').slice(3).join('/');
   const path = urlEndPoint;
 

src/types/main.ts

@@ -8,6 +8,17 @@ export type MainItemType = {
   likeCount?: number;
 };
 
+export type MainResponse<TData> = {
+  status: number;
+  data: {
+    data: TData[];
+    page: number;
+    limit: number;
+    isLast: boolean;
+    totalCount: number;
+  };
+};
+
 export type PaginationRes<TData> = {
   data: TData;
   page: number;