[WRFE-66](style): 이벤트 핸들러 외부화, 조건부 렌더링 개선(3항 연산자 분리)

Author: Ajeong-Im

apps/front/wraffle-webview/app/category/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import {useSearchParams} from 'next/navigation';
-import {useEffect, useState} from 'react';
+import {useEffect, useState, Suspense} from 'react';
 import {categories} from '@/entities/category';
 import type {CategoryItem} from '@/entities/category/type';
 import {Header} from '@/shared/ui';
@@ -73,7 +73,6 @@ const CategoryPage = () => {
   const categoryName = searchParams.get('view');
 
   const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
 
   const currentCategory = categoryName
     ? categories.find(category => category.name === categoryName)
@@ -97,7 +96,6 @@ const CategoryPage = () => {
     if (currentCategory) {
       setSelectedCategory(0);
     }
-    setTimeout(() => setIsLoading(false), 1000); // 로딩 시뮬레이션
   }, [currentCategory]);
 
   const filteredProducts =
@@ -154,11 +152,15 @@ const CategoryPage = () => {
           className='grid justify-center gap-[20px]'
           style={{gridTemplateColumns: 'repeat(auto-fit, 160px)'}}
         >
-          {isLoading ? (
-            <Typography size='h5' className='text-gray-500'>
-              로딩 중...
-            </Typography>
-          ) : filteredProducts.length > 0 ? (
+          <Suspense
+            fallback={
+              <Typography size='h5' className='text-gray-500'>
+                로딩 중...
+              </Typography>
+            }
+          ></Suspense>
+          {/*filteredProducts 배열이 비어 있지 않은 경우*/}
+          {filteredProducts.length > 0 &&
             filteredProducts.map(product => (
               <RaffleCard
                 key={product.id}
@@ -169,8 +171,9 @@ const CategoryPage = () => {
                 isBookmarked={product.isBookmarked}
                 hashtags={product.hashtags}
               />
-            ))
-          ) : (
+            ))}
+          {/*filteredProducts 배열이 비어 있는 경우*/}
+          {filteredProducts.length === 0 && (
             <Typography size='h5' className='text-gray-500'>
               상품 추가 예정입니다.
             </Typography>

apps/front/wraffle-webview/src/features/get-category/ui/CategoryButton.tsx

@@ -10,10 +10,15 @@ interface CategoryButtonProps {
 
 const CategoryButton = ({category}: CategoryButtonProps) => {
   const router = useRouter();
+
+  const goCategory = () => {
+    router.push(`/category/${category.id}`);
+  };
+
   return (
     <button
       className='h-[74px] w-[72px] rounded-full border border-[#F4F4F5] bg-[#FAFAFA] px-2 py-3'
-      onClick={() => router.push(`/category/${category.id}`)}
+      onClick={goCategory}
     >
       <Typography size='p2' className='break-keep text-center'>
         {category.name}