refactor: 개선된 GalleryCard 및 Gallery 컴포넌트 스타일링과 레이아웃 조정

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

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

@@ -7,6 +7,7 @@ import StyledLink from "./StyledLink.tsx";
 import React from "react";
 import { Skeleton } from "../ui/skeleton.tsx";
 import { Palette, Users, Trash2, Clock, LayersIcon } from "lucide-react";
+import { cn } from "@/lib/utils.ts";
 
 function clipTagsWhenOverflow(tags: string[], limit: number) {
     let l = 0;
@@ -22,8 +23,12 @@ function clipTagsWhenOverflow(tags: string[], limit: number) {
 
 
 function GalleryCardImpl({
-    doc: x
-}: { doc: Document; }) {
+    doc: x,
+    className,
+}: {
+    doc: Document;
+    className?: string;
+}) {
     const ref = useRef<HTMLUListElement>(null);
     const [clipCharCount, setClipCharCount] = useState(200);
     const isDeleted = x.deleted_at !== null;
@@ -77,102 +82,108 @@ function GalleryCardImpl({
         };
     }, [originalTags]);
 
-    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>
+    return <Card className={cn("flex flex-col sm:flex-row overflow-hidden",
+        "transition-all duration-200 hover:shadow-lg hover:shadow-primary/20 group",
+        className
+    )}>
+        {isDeleted ? (
+            <div className="h-[240px] sm:h-[200px] w-full sm:w-[142px]
+                bg-gradient-to-br from-red-500/20 to-red-800/30 
+                flex items-center justify-center">
+                <div className="flex flex-col items-center gap-2 text-primary-foreground">
+                    <Trash2 className="size-8 opacity-80" />
+                    <span className="text-sm font-medium">Deleted</span>
                 </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>
-                    <div className="flex flex-wrap items-center gap-x-3 leading-tight text-sm">
-                        {artists.length > 0 && (
-                            <div className="flex items-center gap-1.5">
-                                <Palette className="size-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="size-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="size-3.5" />
-                            <span className="text-xs">{new Date(x.created_at).toLocaleDateString()}</span>
-                        </div>
-                    </div>
-                </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>
+        ) : (
+            <div className="h-[240px] sm:h-[200px] w-full sm:w-[142px]
+                relative overflow-hidden 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="size-3" />
+                    <span>{x.pagenum}</span>
+                </div>
+            </div>
+        )}
+
+        <div className="flex-1 flex flex-col min-h-0">
+            <CardHeader className="flex-none pb-2 sm:pb-4">
+                <CardTitle className="group-hover:text-primary transition-colors duration-200">
+                    <StyledLink className="line-clamp-1 font-bold sm:line-clamp-2" to={`/doc/${x.id}`}>
+                        {x.title}
+                    </StyledLink>
+                </CardTitle>
+                <div className="flex flex-wrap items-center gap-x-2 sm:gap-x-3 gap-y-1 leading-tight text-sm">
+                    {artists.length > 0 && (
+                        <div className="flex items-center gap-1 sm:gap-1.5">
+                            <Palette className="size-3 sm:size-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 sm:gap-1.5">
+                            <Users className="size-3 sm:size-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 sm:gap-1.5 text-muted-foreground">
+                        <Clock className="size-3 sm:size-3.5" />
+                        <span className="text-xs">{new Date(x.created_at).toLocaleDateString()}</span>
+                    </div>
+                </div>
+            </CardHeader>
+
+            <CardContent className="flex-1 overflow-hidden pt-0">
+                <ul ref={ref} className="flex flex-wrap gap-1 sm: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({
@@ -180,18 +191,19 @@ export function GalleryCardSkeleton({
 }: {
     tagCount?: number;
 }) {
-    return <Card className="flex h-[200px]">
-        <Skeleton className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none" />
+    return <Card className="flex flex-col sm:flex-row">
+        <Skeleton className="h-[240px] sm:h-[200px] w-full sm:w-[142px] 
+        rounded-xl overflow-hidden flex-none" />
         <div className="flex-1 flex flex-col">
-            <CardHeader className="flex-none">
-                <Skeleton className="line-clamp-2 w-1/2 h-4" />
-                <Skeleton className="w-1/4 h-3" />
+            <CardHeader className="flex-none pb-2 sm:pb-4">
+                <Skeleton className="line-clamp-2 w-3/4 sm:w-1/2 h-4 sm:h-5" />
+                <Skeleton className="w-1/2 sm:w-1/4 h-3 mt-2" />
             </CardHeader>
-            <CardContent className="flex-1 overflow-hidden">
-                <ul className="flex flex-wrap gap-2 items-baseline content-start">
+            <CardContent className="flex-1 overflow-hidden pt-0">
+                <ul className="flex flex-wrap gap-1 sm: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" />)}
+                        style={{ width: `${Math.random() * 80 + 40}px` }}
+                        className="h-3 sm:h-4" />)}
                 </ul>
             </CardContent>
         </div>

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

@@ -112,7 +112,7 @@ export default function TagInput({
         )}
             onClick={() => inputRef.current?.focus()}
         >
-            <ul className="flex gap-1 flex-none">
+            <ul className="flex gap-1 flex-grow-0">
                 {tags.map((tag) => <li className={cn(
                     tagBadgeVariants({ variant: getTagKind(tag) }),
                     "cursor-pointer"
@@ -121,7 +121,7 @@ export default function TagInput({
                 }}>{tag}</li>)}
             </ul>
             <input ref={inputRef} type="text" className="flex-1 border-0 ml-2 focus:border-0 focus:outline-none
-            bg-transparent text-sm" placeholder="Add tag"
+            bg-transparent text-sm w-0" placeholder="Add tag"
                 onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)}
                 value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => {
                     if (e.key === "Enter") {
@@ -172,7 +172,7 @@ export default function TagInput({
                 </div>
             }
             {
-                tags.length > 0 && <Button variant="ghost" className="flex-none" onClick={() => {
+                tags.length > 0 && <Button variant="ghost" className="flex-grow-0" onClick={() => {
                     setTags([]);
                     setOpenInfo(null);
                 }}>Clear</Button>

packages/client/src/components/layout/layout.tsx

@@ -18,11 +18,11 @@ export default function Layout({ children }: LayoutProps) {
                 "transition-all duration-300 ease-in-out",
                 "border-r bg-background sticky top-0 h-screen",
                 isSidebarOpen ? 'w-64' : 'w-16')}>
-                <div className="flex items-center justify-between p-4 border-b">
+                <div className="flex items-center justify-between p-2 border-b">
                     {isSidebarOpen && (
-                        <h2 className="text-lg font-semibold">Ionian</h2>
+                        <h2 className="text-lg font-semibold ml-4">Ionian</h2>
                     )}
-                    <SidebarToggle />
+                    <SidebarToggle className="size-10 p-2 ml-1" />
                 </div>
                 <div className="flex-1 overflow-y-auto">
                     <SidebarNav />
@@ -30,7 +30,7 @@ export default function Layout({ children }: LayoutProps) {
             </aside>
 
             {/* Main Content */}
-            <main className="flex-1 flex flex-col min-h-0 pb-16 md:pb-0 pt-0 md:pt-0">
+            <main className="flex-1 flex flex-col min-h-0 p-0 md:pb-0 pb-14">
                 {children}
             </main>
 

packages/client/src/components/layout/nav.tsx

@@ -10,7 +10,7 @@ import { useMemo } from "react";
 import { useAtom, useAtomValue } from "jotai";
 import { sidebarAtom } from "./sidebarAtom";
 
-const NAV_ICON_CLASS = "size-4";
+export const NAV_ICON_CLASS = "size-4";
 
 const NAV_LINKS = {
     search: { to: "/search", Icon: SearchIcon },
@@ -103,16 +103,20 @@ export function NavList() {
 }
 
 // 사이드바 토글 버튼
-export function SidebarToggle() {
+export function SidebarToggle({
+    className,
+}: {
+    className?: string;
+}) {
     const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
-    const isOpen = sidebarState.isCollapsed;
+    const isOpen = !sidebarState.isCollapsed;
     const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
 
     return (
         <Tooltip>
             <TooltipTrigger asChild>
-                <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
-                    {isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-4" />}
+                <Button variant="ghost" size="sm" onClick={onToggle} className={className}>
+                    {isOpen ? <PanelLeftCloseIcon className={NAV_ICON_CLASS} /> : <PanelLeftIcon className={NAV_ICON_CLASS} />}
                     <span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
                 </Button>
             </TooltipTrigger>
@@ -131,7 +135,7 @@ export function MobileSidebarToggle() {
 
     return (
         <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
-            {isOpen ? <XIcon className="size-5" /> : <MenuIcon className="size-5" />}
+            {isOpen ? <XIcon className={NAV_ICON_CLASS} /> : <MenuIcon className={NAV_ICON_CLASS} />}
             <span className="sr-only">{isOpen ? "Close menu" : "Open menu"}</span>
         </Button>
     );
@@ -151,9 +155,9 @@ export function SidebarNavItem({ children, name, to, className, onClick }: Sideb
     const isCollapsed = sidebarState.isCollapsed;
 
     const buttonClass = cn(
-        buttonVariants({ variant: "ghost", size: "sm" }),
-        "rounded-none md:rounded-md",
-        isCollapsed ? "justify-center size-10 p-0" : "justify-start gap-3 h-10 px-3",
+        buttonVariants({ variant: "ghost", size: "lg" }),
+        "rounded-none md:rounded-md flex-1 md:min-h-10 min-h-12 touch-manipulation justify-center",
+        isCollapsed ? "p-0" : "md:justify-start gap-3 px-3",
         className
     );
 
@@ -205,7 +209,7 @@ export function SidebarNav() {
 
     return (
         <div className="flex flex-col h-full">
-            <nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
+            <nav className="flex flex-col gap-2 p-2 flex-1 min-h-0">
                 {customNavItems && (
                     <>
                         <div className={cn("flex flex-col gap-2")}>

packages/client/src/page/galleryPage.tsx

@@ -6,8 +6,9 @@ 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 { useVirtualizer } from "@tanstack/react-virtual";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import { SearchIcon, TagIcon, AlertCircle, ImageIcon } from "lucide-react";
+import { useMediaQuery } from "usehooks-ts";
 
 export default function Gallery() {
     const search = useSearch();
@@ -16,21 +17,24 @@ export default function Gallery() {
     const tags = searchParams.getAll("allow_tag") ?? undefined;
     const limit = searchParams.get("limit");
     const cursor = searchParams.get("cursor");
+    const isSmallScreen = useMediaQuery('(max-width: 640px)');
     const { data, error, isLoading, size, setSize } = useSearchGalleryInfinite({
         word, tags,
         limit: limit ? Number.parseInt(limit) : undefined,
         cursor: cursor ? Number.parseInt(cursor) : undefined
     });
     const parentRef = useRef<HTMLDivElement>(null);
-    const virtualizer = useVirtualizer({
+    const virtualizer = useWindowVirtualizer({
         count: size,
-        // biome-ignore lint/style/noNonNullAssertion: could not be null
-        getScrollElement: () => parentRef.current!,
+        scrollMargin: parentRef.current?.offsetTop ?? 0,
         estimateSize: (index) => {
             if (!data) return 8;
             const docs = data?.[index];
             if (!docs) return 8;
-            return docs.data.length * (200 + 8) + 32 + 8 + 8 * 2; // 200px for image, 8px for gap, 32px for title, 8px for padding
+            const cardHeight = isSmallScreen ? 409.5 : 200;
+            const gap = 8;
+            const headerHeight = docs.startCursor ? (isSmallScreen ? 44 : 56) : 0;
+            return docs.data.length * (cardHeight + gap) + headerHeight + gap * 2;
         },
         overscan: 1,
     });
@@ -60,44 +64,56 @@ export default function Gallery() {
         const NoResult = data.reduce((acc, x) => acc + x.data.length, 0) === 0;
 
         if (NoResult) {
-            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>
+            return <div className="flex flex-col items-center justify-center p-8 sm:p-12 text-center">
+                <ImageIcon className="w-12 h-12 sm:w-16 sm:h-16 text-muted-foreground mb-3 sm:mb-4 opacity-50" />
+                <h3 className="text-xl sm:text-3xl font-semibold text-muted-foreground mb-2">검색 결과가 없습니다</h3>
+                <p className="text-sm sm:text-base text-muted-foreground">다른 검색어나 태그로 시도해보세요</p>
             </div>
         }
         else {
             return <div className="w-full relative"
-                style={{ height: virtualizer.getTotalSize() }}>
+                style={{
+                    height: `${virtualizer.getTotalSize()}px`
+                }}
+            >
                 {// TODO: date based grouping
                     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 p-8"
+                                className="w-full flex justify-center top-0 left-0 absolute p-4 sm:p-8"
                                 style={{
                                     height: `${item.size}px`,
-                                    transform: `translateY(${item.start}px)`
-                                }}>
-                                <span className="text-muted-foreground"><Spinner />컨텐츠를 불러오는 중...</span>
+                                    transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+                                }}
+                                data-index={item.index}
+                                >
+                                <span className="text-sm sm:text-base text-muted-foreground flex items-center gap-2">
+                                    <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-4" key={item.index}
+                        return <div className="w-full grid gap-2 content-start top-0 left-0 absolute" key={item.index}
                             style={{
-                                height: `${item.size}px`,
+                                // height: `${item.size}px`,
                                 transform: `translateY(${item.start}px)`
-                            }}>
+                            }}
+                            data-index={item.index}
+                            ref={virtualizer.measureElement}
+                            >
                             {docs.startCursor && (
-                                <div className="bg-muted/50 rounded-lg p-2">
-                                    <h3 className="text-2xl font-medium flex items-center gap-2">
+                                <div className="bg-muted/50 rounded-lg p-2 sm:p-3">
+                                    <h3 className="text-lg sm: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} />
+                                <GalleryCard doc={x} key={x.id} 
+                                    className="h-[409.5px] sm:h-[200px]"
+                                />
                             ))}
                         </div>
                     })
@@ -106,20 +122,20 @@ export default function Gallery() {
         }
     }
 
-    return (<div className="p-4 grid gap-2 h-dvh overflow-auto items-start content-start" ref={parentRef}>
+    return (<div className="p-2 sm:p-4 grid gap-2 items-start content-start" ref={parentRef}>
         <Search />
 
         {((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">
+            <div className="bg-primary rounded-full p-2 mt-2 sm:mt-3 shadow-lg flex flex-wrap items-center gap-1.5 sm: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" />
+                    <div className="flex items-center bg-primary-foreground/20 rounded-full px-2.5 sm:px-3 py-1 text-primary-foreground">
+                        <SearchIcon className="size-3.5 sm:size-4 mr-1.5 sm: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" />
+                        <TagIcon className="size-3.5 sm:size-4 text-primary-foreground ml-1 sm:ml-2" />
                         <ul className="inline-flex flex-wrap gap-1 ml-1">
                             {tags.map(x => <TagBadge tagname={x} key={x} />)}
                         </ul>
@@ -129,8 +145,8 @@ export default function Gallery() {
         }
 
         {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="p-4 sm:p-6 bg-destructive/10 rounded-lg flex items-center">
+                <AlertCircle className="size-5 sm:size-6 text-destructive mr-2 flex-shrink-0" />
                 <div className="text-destructive font-medium">{String(error)}</div>
             </div>
         )}
@@ -154,7 +170,7 @@ 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 flex-col sm:flex-row gap-3">
+    return <div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
         <TagInput
             className="flex-1 shadow-sm"
             input={word}
@@ -177,7 +193,7 @@ function Search() {
                 navigate(`/search?${params.toString()}`);
             }}
         >
-            <SearchIcon className="w-4 h-4" />
+            <SearchIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
             검색
         </Button>
     </div>

packages/client/src/page/reader/comicPage.tsx

@@ -8,7 +8,7 @@ import { useEventListener } from "usehooks-ts";
 import type { Document } from "dbtype";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Loader2 } from "lucide-react";
-import { SidebarNavItem } from "@/components/layout/nav";
+import { NAV_ICON_CLASS, SidebarNavItem } from "@/components/layout/nav";
 
 interface ComicPageProps {
     params: {
@@ -150,13 +150,14 @@ export default function ComicPage({
                     name="Back"
                     to={`/doc/${params.id}`}
                 >
-                    <ExitIcon />
+                    <ExitIcon className={NAV_ICON_CLASS} />
                 </SidebarNavItem>
                 <SidebarNavItem
                     name={isFullScreen ? "Exit FS" : "Enter FS"}
                     onClick={toggleFullScreen}
                 >
-                    {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
+                    {isFullScreen ? <ExitFullScreenIcon className={NAV_ICON_CLASS} /> :
+                        <EnterFullScreenIcon className={NAV_ICON_CLASS} />}
                 </SidebarNavItem>
                 <Popover>
                     <SidebarNavItem