style: improve gallery card

packages/client/src/components/gallery/GalleryCard.tsx

@@ -1,11 +1,12 @@
 import type { Document } from "dbtype";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
-import TagBadge from "@/components/gallery/TagBadge.tsx";
+import TagBadge, { toPrettyTagname } from "@/components/gallery/TagBadge.tsx";
 import { Fragment, useLayoutEffect, useRef, useState } from "react";
 import { LazyImage } from "./LazyImage.tsx";
 import StyledLink from "./StyledLink.tsx";
 import React from "react";
 import { Skeleton } from "../ui/skeleton.tsx";
+import { Palette, Users, Trash2, Clock, LayersIcon } from "lucide-react";
 
 function clipTagsWhenOverflow(tags: string[], limit: number) {
     let l = 0;
@@ -19,6 +20,7 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
     return tags;
 }
 
+
 function GalleryCardImpl({
     doc: x
 }: { doc: Document; }) {
@@ -36,9 +38,36 @@ function GalleryCardImpl({
         const listener = () => {
             if (ref.current) {
                 const { width } = ref.current.getBoundingClientRect();
-                const charWidth = 7; // rough estimate
-                const newClipCharCount = Math.floor(width / charWidth) * 3;
-                setClipCharCount(newClipCharCount);
+                const canvas = document.createElement("canvas");
+                const context = canvas.getContext("2d");
+                if (context) {
+                    // 스타일에 맞는 폰트 설정 (Tailwind의 기본 폰트 스타일에 맞게 설정)
+                    context.font = getComputedStyle(ref.current).font || "16px sans-serif";
+
+                    let totalWidth = 0;
+                    let charCount = 0;
+
+                    for (const tag of originalTags) {
+                        // prefix와 패딩을 고려한 너비 계산
+                        const prettyTag = toPrettyTagname(tag); // prefix가 포함된 태그 이름
+                        const tagWidth =
+                            context.measureText(prettyTag).width + 8; // 양쪽 패딩 4px씩 추가
+                        const spaceWidth = context.measureText(" ").width; // 공백 너비
+
+                        if (totalWidth + tagWidth + spaceWidth > width * 3) { // 3줄 제한
+                            break;
+                        }
+                        totalWidth += tagWidth + spaceWidth;
+                        charCount += tag.length + 1; // 태그 길이 + 공백
+                    }
+
+                    setClipCharCount(charCount);
+                }
+                else {
+                    const charWidth = 7; // rough estimate
+                    const newClipCharCount = Math.floor(width / charWidth) * 3;
+                    setClipCharCount(newClipCharCount);
+                }
             }
         };
         listener();
@@ -46,46 +75,104 @@ function GalleryCardImpl({
         return () => {
             window.removeEventListener("resize", listener);
         };
-    }, []);
+    }, [originalTags]);
 
-    return <Card className="flex h-[200px]">
-        {isDeleted ? <div className="bg-primary border flex items-center justify-center h-[200px] w-[142px] rounded-xl">
-            <span className="text-primary-foreground text-lg font-bold">Deleted</span>
-        </div> : <div className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none bg-[#272733] flex items-center justify-center">
-            <LazyImage src={`/api/doc/${x.id}/comic/thumbnail`}
-                alt={x.title}
-                className="max-h-full max-w-full object-cover object-center"
-            />
-        </div>
-        }
-        <div className="flex-1 flex flex-col">
-            <CardHeader className="flex-none">
-                <CardTitle>
-                    <StyledLink className="line-clamp-2" to={`/doc/${x.id}`}>
-                        {x.title}
-                    </StyledLink>
-                </CardTitle>
-                <CardDescription>
-                    {artists.map((x, i) => <Fragment key={`artist:${x}`}>
-                        <StyledLink to={`/search?allow_tag=artist:${x}`}>{x}</StyledLink>
-                        {i + 1 < artists.length && <span className="opacity-50">, </span>}
-                    </Fragment>)}
-                    {groups.length > 0 && <span key={"sep"}>{" | "}</span>}
-                    {groups.map((x, i) => <Fragment key={`group:${x}`}>
-                        <StyledLink to={`/search?allow_tag=group:${x}`}>{x}</StyledLink>
-                        {i + 1 < groups.length && <span className="opacity-50">, </span>}
-                    </Fragment>
-                    )}
-                </CardDescription>
-            </CardHeader>
-            <CardContent className="flex-1 overflow-hidden">
-                <ul ref={ref} className="flex flex-wrap gap-2 items-baseline content-start">
-                    {clippedTags.map(tag => <TagBadge key={tag} tagname={tag} className="" />)}
-                    {clippedTags.length < originalTags.length && <TagBadge key={"..."} tagname="..." className="inline-block" disabled />}
-                </ul>
-            </CardContent>
-        </div>
-    </Card>;
+    return <Card className="flex h-[200px] overflow-hidden transition-all duration-200 hover:shadow-lg hover:shadow-primary/20 group">
+            {isDeleted ? (
+                <div className="bg-gradient-to-br from-red-500/20 to-red-800/30 flex items-center justify-center h-[200px] w-[142px] rounded-l-xl border-r border-border/50">
+                    <div className="flex flex-col items-center gap-2 text-primary-foreground">
+                        <Trash2 className="h-8 w-8 opacity-80" />
+                        <span className="text-sm font-medium">Deleted</span>
+                    </div>
+                </div>
+            ) : (
+                <div className="relative rounded-l-xl overflow-hidden h-[200px] w-[142px] flex-none bg-gradient-to-br from-primary/5 to-primary/10 flex items-center justify-center group-hover:from-primary/10 group-hover:to-primary/20 transition-all duration-300">
+                    <LazyImage 
+                        src={`/api/doc/${x.id}/comic/thumbnail`}
+                        alt={x.title}
+                        className="max-h-full max-w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+                    />
+                    <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1 opacity-80">
+                        <LayersIcon className="h-3 w-3" />
+                        <span>{x.pagenum}</span>
+                    </div>
+                </div>
+            )}
+            
+            <div className="flex-1 flex flex-col">
+                <CardHeader className="flex-none">
+                    <CardTitle className="group-hover:text-primary transition-colors duration-200">
+                        <StyledLink className="line-clamp-2 font-bold" to={`/doc/${x.id}`}>
+                            {x.title}
+                        </StyledLink>
+                    </CardTitle>
+                    <CardDescription className="flex flex-wrap items-center gap-x-3">
+                        {artists.length > 0 && (
+                            <div className="flex items-center gap-1.5">
+                                <Palette className="h-3.5 w-3.5 text-primary/70" />
+                                <span className="flex flex-wrap items-center">
+                                    {artists.map((x, i) => (
+                                        <Fragment key={`artist:${x}`}>
+                                            <StyledLink 
+                                                to={`/search?allow_tag=artist:${x}`}
+                                                className="hover:text-primary hover:underline transition-colors"
+                                            >
+                                                {x}
+                                            </StyledLink>
+                                            {i + 1 < artists.length && <span className="opacity-50 mx-1">,</span>}
+                                        </Fragment>
+                                    ))}
+                                </span>
+                            </div>
+                        )}
+                        
+                        {groups.length > 0 && (
+                            <div className="flex items-center gap-1.5">
+                                <Users className="h-3.5 w-3.5 text-primary/70" />
+                                <span className="flex flex-wrap items-center">
+                                    {groups.map((x, i) => (
+                                        <Fragment key={`group:${x}`}>
+                                            <StyledLink 
+                                                to={`/search?allow_tag=group:${x}`}
+                                                className="hover:text-primary hover:underline transition-colors"
+                                            >
+                                                {x}
+                                            </StyledLink>
+                                            {i + 1 < groups.length && <span className="opacity-50 mx-1">,</span>}
+                                        </Fragment>
+                                    ))}
+                                </span>
+                            </div>
+                        )}
+                        
+                        <div className="flex items-center gap-1.5 text-muted-foreground">
+                            <Clock className="h-3.5 w-3.5" />
+                            <span className="text-xs">{new Date(x.created_at).toLocaleDateString()}</span>
+                        </div>
+                    </CardDescription>
+                </CardHeader>
+                
+                <CardContent className="flex-1 overflow-hidden">
+                    <ul ref={ref} className="flex flex-wrap gap-1.5 items-baseline content-start">
+                        {clippedTags.map(tag => (
+                            <TagBadge 
+                                key={tag} 
+                                tagname={tag} 
+                                className="transition-all duration-200 hover:shadow-sm hover:scale-105" 
+                            />
+                        ))}
+                        {clippedTags.length < originalTags.length && (
+                            <TagBadge 
+                                key={"..."} 
+                                tagname="..." 
+                                className="inline-block opacity-70" 
+                                disabled 
+                            />
+                        )}
+                    </ul>
+                </CardContent>
+            </div>
+        </Card>
 }
 
 export function GalleryCardSkeleton({
@@ -104,7 +191,7 @@ export function GalleryCardSkeleton({
                 <ul className="flex flex-wrap gap-2 items-baseline content-start">
                     {Array.from({ length: tagCount }).map((_, i) => <Skeleton key={i}
                         style={{ width: `${Math.random() * 100 + 50}px` }}
-                    className="h-4" />)}
+                        className="h-4" />)}
                 </ul>
             </CardContent>
         </div>

packages/client/src/components/gallery/LazyImage.tsx

@@ -9,13 +9,26 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
             const observer = new IntersectionObserver((entries) => {
                 if (entries.some(x => x.isIntersecting)) {
                     setLoaded(true);
-                    ref.current?.animate([
-                        { opacity: 0 },
-                        { opacity: 1 }
-                    ], {
-                        duration: 300,
-                        easing: "ease-in-out"
-                    });
+                    if (ref.current?.complete) {
+                        ref.current?.animate([
+                            { opacity: 0 },
+                            { opacity: 1 }
+                        ], {
+                            duration: 300,
+                            easing: "ease-in-out"
+                        });
+                    }
+                    else {
+                        ref.current?.addEventListener("load", () => {
+                            ref.current?.animate([
+                                { opacity: 0 },
+                                { opacity: 1 }
+                            ], {
+                                duration: 300,
+                                easing: "ease-in-out"
+                            });
+                        });
+                    }
                     observer.disconnect();
                 }
             }, {
@@ -34,5 +47,7 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
         src={loaded ? src : undefined}
         alt={alt}
         className={className}
-        loading="lazy" />;
+        loading="lazy" 
+        
+        />;
 }

packages/client/src/page/galleryPage.tsx

@@ -6,8 +6,8 @@ import { useSearchGalleryInfinite } from "../hook/useSearchGallery.ts";
 import { Spinner } from "../components/Spinner.tsx";
 import TagInput from "@/components/gallery/TagInput.tsx";
 import { useEffect, useRef, useState } from "react";
-import { Separator } from "@/components/ui/separator.tsx";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { SearchIcon, TagIcon, AlertCircle, ImageIcon } from "lucide-react";
 
 export default function Gallery() {
     const search = useSearch();
@@ -24,13 +24,13 @@ export default function Gallery() {
     const parentRef = useRef<HTMLDivElement>(null);
     const virtualizer = useVirtualizer({
         count: size,
-        // biome-ignore lint/style/noNonNullAssertion: <explanation>
+        // biome-ignore lint/style/noNonNullAssertion: could not be null
         getScrollElement: () => parentRef.current!,
         estimateSize: (index) => {
             if (!data) return 8;
             const docs = data?.[index];
             if (!docs) return 8;
-            return docs.data.length * (200 + 8) + 37 + 8;
+            return docs.data.length * (200 + 8) + 32 + 8 + 8 * 2; // 200px for image, 8px for gap, 32px for title, 8px for padding
         },
         overscan: 1,
     });
@@ -51,16 +51,20 @@ export default function Gallery() {
         virtualizer.measure();
     }, [virtualizer, data]);
 
-    
+
     const renderContent = () => {
         if (!data) {
             return null;
         }
         const isLoadingMore = data && size > 0 && (data[size - 1] === undefined);
         const NoResult = data.reduce((acc, x) => acc + x.data.length, 0) === 0;
-        
+
         if (NoResult) {
-            return <div className="p-4 text-3xl">No results</div>
+            return <div className="flex flex-col items-center justify-center p-12 text-center">
+                <ImageIcon className="w-16 h-16 text-muted-foreground mb-4 opacity-50" />
+                <h3 className="text-3xl font-semibold text-muted-foreground mb-2">검색 결과가 없습니다</h3>
+                <p className="text-muted-foreground">다른 검색어나 태그로 시도해보세요</p>
+            </div>
         }
         else {
             return <div className="w-full relative overflow-auto h-full"
@@ -69,30 +73,32 @@ export default function Gallery() {
                     virtualItems.map((item) => {
                         const isLoaderRow = item.index === size - 1 && isLoadingMore;
                         if (isLoaderRow) {
-                            return <div key={item.index} className="w-full flex justify-center top-0 left-0 absolute"
+                            return <div key={item.index}
+                                className="w-full flex justify-center top-0 left-0 absolute p-8"
                                 style={{
                                     height: `${item.size}px`,
                                     transform: `translateY(${item.start}px)`
                                 }}>
-                                <Spinner />
+                                <span className="text-muted-foreground"><Spinner />컨텐츠를 불러오는 중...</span>
                             </div>;
                         }
                         const docs = data[item.index];
                         if (!docs) return null;
-                        return <div className="w-full grid gap-2 content-start top-0 left-0 absolute mb-2" key={item.index}
+                        return <div className="w-full grid gap-2 content-start top-0 left-0 absolute mb-4" key={item.index}
                             style={{
                                 height: `${item.size}px`,
                                 transform: `translateY(${item.start}px)`
                             }}>
-                            {docs.startCursor && <div>
-                                <h3 className="text-3xl">Start with {docs.startCursor}</h3>
-                                <Separator />
-                            </div>}
-                            {docs?.data?.map((x) => {
-                                return (
-                                    <GalleryCard doc={x} key={x.id} />
-                                );
-                            })}
+                            {docs.startCursor && (
+                                <div className="bg-muted/50 rounded-lg p-2">
+                                    <h3 className="text-2xl font-medium flex items-center gap-2">
+                                        ID <span className="text-primary">{docs.startCursor}</span>이하
+                                    </h3>
+                                </div>
+                            )}
+                            {docs?.data?.map((x) => (
+                                <GalleryCard doc={x} key={x.id} />
+                            ))}
                         </div>
                     })
                 }
@@ -102,20 +108,41 @@ export default function Gallery() {
 
     return (<div className="p-4 grid gap-2 h-dvh overflow-auto items-start content-start" ref={parentRef}>
         <Search />
-        {(word || tags) &&
-            <div className="bg-primary rounded-full p-1 sticky top-0 shadow-md z-10">
-                {word && <span className="text-primary-foreground ml-4">Search: {word}</span>}
-                {tags && <span className="text-primary-foreground ml-4">Tags: <ul className="inline-flex gap-1">{
-                    tags.map(x => <TagBadge tagname={x} key={x} />)}
-                </ul></span>}
+
+        {((word ?? "").length > 0 || tags.length > 0) &&
+            <div className="bg-primary rounded-full p-2 mt-3 shadow-lg flex flex-wrap items-center gap-2">
+                {word && (
+                    <div className="flex items-center bg-primary-foreground/20 rounded-full px-3 py-1 text-primary-foreground">
+                        <SearchIcon className="w-4 h-4 mr-2" />
+                        <span className="font-medium">{word}</span>
+                    </div>
+                )}
+                {tags && tags.length > 0 && (
+                    <div className="flex items-center flex-wrap gap-1">
+                        <TagIcon className="w-4 h-4 text-primary-foreground ml-2" />
+                        <ul className="inline-flex flex-wrap gap-1 ml-1">
+                            {tags.map(x => <TagBadge tagname={x} key={x} />)}
+                        </ul>
+                    </div>
+                )}
             </div>
         }
-        {error && <div className="p-4">Error: {String(error)}</div>}
-        {isLoading && <>
-            <GalleryCardSkeleton />
-            <GalleryCardSkeleton />
-            <GalleryCardSkeleton />
-        </>}
+
+        {error && (
+            <div className="p-6 bg-destructive/10 rounded-lg flex items-center">
+                <AlertCircle className="w-6 h-6 text-destructive mr-2" />
+                <div className="text-destructive font-medium">{String(error)}</div>
+            </div>
+        )}
+
+        {isLoading && (
+            <div className="grid gap-2">
+                <GalleryCardSkeleton />
+                <GalleryCardSkeleton />
+                <GalleryCardSkeleton />
+                <GalleryCardSkeleton />
+            </div>
+        )}
         {renderContent()}
     </div>
     );
@@ -127,22 +154,32 @@ function Search() {
     const searchParams = new URLSearchParams(search);
     const [tags, setTags] = useState(searchParams.get("allow_tag")?.split(",") ?? []);
     const [word, setWord] = useState(searchParams.get("word") ?? "");
-    return <div className="flex space-x-2">
-        <TagInput className="flex-1" input={word} onInputChange={setWord}
-            tags={tags} onTagsChange={setTags}
+    return <div className="flex flex-col sm:flex-row gap-3">
+        <TagInput
+            className="flex-1 shadow-sm"
+            input={word}
+            onInputChange={setWord}
+            tags={tags}
+            onTagsChange={setTags}
         />
-        <Button className="flex-none" onClick={() => {
-            const params = new URLSearchParams();
-            if (tags.length > 0) {
-                for (const tag of tags) {
-                    params.append("allow_tag", tag);
+        <Button
+            className="flex-none gap-2 px-4 shadow-md hover:shadow-lg transition-all"
+            onClick={() => {
+                const params = new URLSearchParams();
+                if (tags.length > 0) {
+                    for (const tag of tags) {
+                        params.append("allow_tag", tag);
+                    }
                 }
-            }
-            if (word) {
-                params.set("word", word);
-            }
-            navigate(`/search?${params.toString()}`);
-        }}>Search</Button>
-    </div>;
+                if (word) {
+                    params.set("word", word);
+                }
+                navigate(`/search?${params.toString()}`);
+            }}
+        >
+            <SearchIcon className="w-4 h-4" />
+            검색
+        </Button>
+    </div>
 }