[#115] Refactor: 메인페이지 관련 리팩토링

src/apis/postList.ts

@@ -29,6 +29,7 @@ interface PostListSort {
   unsorted: boolean;
   sorted: boolean;
 }
+
 export interface PostList {
   content: PostListContent[];
   pageable: PostListPageable;
@@ -43,36 +44,30 @@ export interface PostList {
   empty: boolean;
 }
 
-interface PostListInitialParams {
+interface GetPostListParams {
   page: string;
   size: string;
+  keyword: string | null;
+  categoryId: string | null;
 }
 
-interface PostListParamsWithCategoryId extends PostListInitialParams {
-  categoryId: string;
-  keyword: null;
-}
-
-interface PostListParamsWithKeyword extends PostListInitialParams {
-  keyword: string;
-  categoryId: null;
-}
-
-export type GetPostListParams =
-  | PostListParamsWithCategoryId
-  | PostListParamsWithKeyword
-  | PostListInitialParams;
-
 export const getPostList = async (params: GetPostListParams) =>
   await api.get<PostList>({
     url: '/posts/search',
     params,
   });
 
-export const useGetPostListAPI = (params: GetPostListParams) => {
+const PAGE_SIZE = '8';
+
+export const useGetPostListAPI = (
+  keyword: string | null,
+  categoryId: string | null,
+) => {
+  // TODO: 인피니티 스크롤 구현
   const { data } = useSuspenseQuery({
-    queryKey: ['postList', ...Object.values(params)],
-    queryFn: () => getPostList(params),
+    queryKey: ['postList', { page: '0', keyword, categoryId }],
+    queryFn: () =>
+      getPostList({ page: '0', size: PAGE_SIZE, keyword, categoryId }),
   });
 
   return data.body;

src/app/(main)/constants.ts

@@ -1,15 +1,7 @@
-interface CategoryMap {
-  all: null;
-  chatting: string;
-  sports: string;
-  entertaining: string;
-  study: string;
-}
-
 export const CATEGORY_MAP = {
   all: null,
   chatting: '1',
   sports: '2',
   entertaining: '3',
   study: '4',
-} satisfies CategoryMap;
+};

src/app/_components/Chip.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 const chipCSS = cva(
-  'flex w-fit items-center whitespace-nowrap rounded-[20px] border border-gray-accent2 px-4 py-2 text-sm font-semibold',
+  'text-title-1-md flex w-fit items-center whitespace-nowrap rounded-[30px] border border-gray-accent2 px-3 py-1.5',
   {
     variants: {
       variant: {

src/app/_components/ChipContainer.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import Link from 'next/link';
 
 import Chip from '@/src/app/_components/Chip';
@@ -24,23 +22,20 @@ interface ChipContainerProps {
 }
 
 const ChipContainer = ({ currentChannel = 'all' }: ChipContainerProps) => {
-  const [currentPath, setCurrentPath] = useState(currentChannel);
-
-  const handleChipClick = (path: ChannelType) => () => {
-    setCurrentPath(path);
-  };
-
   return (
-    <ul className='flex flex-nowrap gap-2 px-4 py-2'>
+    <ul className='flex items-center gap-2 px-4 py-2'>
       {channelData.map(({ name, path }, index) => {
-        const variant = path === currentPath ? 'selected' : 'default';
+        const variant = path === currentChannel ? 'selected' : 'default';
 
         return (
           <li key={`${index}-${name}`}>
-            <Link href={{ pathname: '/', query: { channel: path } }}>
-              <Chip variant={variant} onClick={handleChipClick(path)}>
-                {name}
-              </Chip>
+            <Link
+              href={{
+                pathname: '/',
+                query: path === 'all' ? {} : { channel: path },
+              }}
+            >
+              <Chip variant={variant}>{name}</Chip>
             </Link>
           </li>
         );

src/app/_components/PostItem.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 
 import { PostListContent } from '@/src/apis/postList';
-import { isValidImageUrl } from '@/src/app/(main)/utils';
 import Icon from '@/src/components/Icon';
+import { isValidImageUrl } from '@/src/utils/isValidImageUrl';
 
 interface PostItemProps {
   post: PostListContent;

src/app/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 import { useGetPostListAPI } from '@/src/apis/postList';
-import { searchParamsToGetPostListParams } from '@/src/app/(main)/utils';
+import { CATEGORY_MAP } from '@/src/app/(main)/constants';
 import ChipContainer, {
   ChannelType,
 } from '@/src/app/_components/ChipContainer';
@@ -17,14 +17,10 @@ import TopBar from '../components/Topbar';
 
 const Main = () => {
   const searchParams = useSearchParams();
-  const channel = searchParams.get('channel') as ChannelType;
-  const keyword = searchParams.get('keyword') as string;
+  const channel = (searchParams.get('channel') as ChannelType | null) ?? 'all';
+  const keyword = searchParams.get('keyword');
 
-  const { content: posts } = useGetPostListAPI({
-    page: '0',
-    size: '8',
-    ...searchParamsToGetPostListParams(channel, keyword),
-  });
+  const { content: posts } = useGetPostListAPI(keyword, CATEGORY_MAP[channel]);
 
   return (
     <>

src/utils/isValidImageUrl.ts

@@ -0,0 +1,7 @@
+export const isValidImageUrl = (url: string | null): url is string => {
+  if (!url) return false;
+  if (url.startsWith('data:')) return true;
+  if (url.startsWith('http://') || url.startsWith('https://')) return true;
+
+  return false;
+};