Refacotr: 가정예배 리스트 앨범형식으로 변경 (#251)

* refacotr: 가정예배 앨범리스트로 변경

* chore: 가정예배는 8개씩 가져오도록 설정

Author: wannabeing

apps/client/src/components/discipleship/homeworship/list.tsx

@@ -11,7 +11,7 @@ const HomeworshipListSection = ({ data }: IHomeworshipListSectionProps) => {
   const { push } = useRouter();
 
   return (
-    <div className="flex flex-col gap-3 px-4 sm:gap-4 sm:px-6 md:px-12 lg:px-16">
+    <div className="grid grid-cols-2 gap-2 px-3 sm:gap-4 sm:px-6 md:grid-cols-3 md:px-12 lg:grid-cols-4 lg:px-16">
       {data?.homeworships.map((worship: IHomeWorship) => {
         return (
           <HomeworshipListItem

apps/client/src/components/discipleship/homeworship/listItem.tsx

@@ -1,5 +1,4 @@
 import { format } from "date-fns";
-import { it } from "node:test";
 import { IHomeWorship } from "type";
 
 interface IHomeworshipListItemProps {
@@ -8,37 +7,42 @@ interface IHomeworshipListItemProps {
 }
 const HomeworshipListItem = ({ item, onClick }: IHomeworshipListItemProps) => {
   const imageUrl = item.imageUrls?.[0] ?? "/images/home/homeworship.png";
-  const date = item.date ? format(new Date(item.date), "yyyy.MM.dd") : format(new Date(item.createdAt), "yyyy.MM.dd");
+  const date = item.date
+    ? format(new Date(item.date), "yyyy.MM.dd")
+    : format(new Date(item.createdAt), "yyyy.MM.dd");
 
   return (
     <div
       onClick={onClick}
-      className="flex cursor-pointer flex-col gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md sm:gap-4 sm:p-4"
+      className="group cursor-pointer overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm transition-shadow hover:shadow-md"
     >
-      {/* 날짜 및 작성자 */}
-      <div className="flex items-center justify-between text-xs text-gray-500 sm:text-sm">
-        <span>{date}</span>
-        <span className="text-blue-900">{item.userName}</span>
-      </div>
-
-      {/* 썸네일 및 제목 */}
-      <div className="flex gap-3 sm:gap-4">
-        {imageUrl && (
-          <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded bg-gray-100 sm:h-20 sm:w-20 md:h-24 md:w-24">
-            <img src={imageUrl} alt={item.title || "가정예배 이미지"} className="h-full w-full object-cover" />
+      {/* 썸네일 */}
+      <div className="relative aspect-square w-full overflow-hidden bg-gray-100">
+        <img
+          src={imageUrl}
+          alt={item.title || "가정예배 이미지"}
+          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+        />
+        {item.comments?.length > 0 && (
+          <div className="absolute bottom-1.5 right-1.5 flex items-center gap-0.5 rounded-full bg-black/60 px-1.5 py-0.5 text-white sm:bottom-2 sm:right-2 sm:gap-1 sm:px-3 sm:py-1">
+            <svg className="size-3.5 sm:size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            </svg>
+            <span className="text-xs font-bold sm:text-sm">{item.comments.length}</span>
           </div>
         )}
-        <div className="flex flex-1 flex-col justify-center">
-          <h3 className="line-clamp-2 break-keep text-sm font-medium text-gray-800 sm:text-base md:text-lg">
-            {item.title || "예배 갤러리_맞있는 가정예배 인증해주셔서 감사합니다"}
-          </h3>
-        </div>
       </div>
 
-      {/* 자세히 보기 버튼 */}
-      <button className="w-full rounded border border-gray-300 bg-white py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-[#2d4a6f] hover:text-white sm:py-2.5 sm:text-sm">
-        자세히 보기
-      </button>
+      {/* 정보 */}
+      <div className="p-2 sm:p-3">
+        <h3 className="line-clamp-2 break-keep text-xs font-medium text-gray-800 sm:text-sm">
+          {item.title || "가정예배 갤러리"}
+        </h3>
+        <div className="mt-1 flex items-center justify-between text-[10px] text-gray-400 sm:text-xs">
+          <span className="text-blue-900">{item.userName}</span>
+          <span>{date}</span>
+        </div>
+      </div>
     </div>
   );
 };

apps/client/src/query/homeWorship/index.ts

@@ -13,7 +13,8 @@ import homeWorshipKeys from "./keys";
 import usePagination from "@/hooks/usePagination";
 
 const useGetHomeWorships = () => {
-  const { page, size } = usePagination();
+  const { page } = usePagination();
+  const size = 8;
 
   return useQuery({
     placeholderData: (previousData) => previousData,