feat: refactor navigation components to use Jotai for sidebar state management and improve rendering logic

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

@@ -1,5 +1,5 @@
 import type { Document } from "dbtype";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
 import TagBadge, { toPrettyTagname } from "@/components/gallery/TagBadge.tsx";
 import { Fragment, useLayoutEffect, useRef, useState } from "react";
 import { LazyImage } from "./LazyImage.tsx";
@@ -106,10 +106,10 @@ function GalleryCardImpl({
                             {x.title}
                         </StyledLink>
                     </CardTitle>
-                    <CardDescription className="flex flex-wrap items-center gap-x-3">
+                    <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="h-3.5 w-3.5 text-primary/70" />
+                                <Palette className="size-3.5 text-primary/70" />
                                 <span className="flex flex-wrap items-center">
                                     {artists.map((x, i) => (
                                         <Fragment key={`artist:${x}`}>
@@ -128,7 +128,7 @@ function GalleryCardImpl({
                         
                         {groups.length > 0 && (
                             <div className="flex items-center gap-1.5">
-                                <Users className="h-3.5 w-3.5 text-primary/70" />
+                                <Users className="size-3.5 text-primary/70" />
                                 <span className="flex flex-wrap items-center">
                                     {groups.map((x, i) => (
                                         <Fragment key={`group:${x}`}>
@@ -146,10 +146,10 @@ function GalleryCardImpl({
                         )}
                         
                         <div className="flex items-center gap-1.5 text-muted-foreground">
-                            <Clock className="h-3.5 w-3.5" />
+                            <Clock className="size-3.5" />
                             <span className="text-xs">{new Date(x.created_at).toLocaleDateString()}</span>
                         </div>
-                    </CardDescription>
+                    </div>
                 </CardHeader>
                 
                 <CardContent className="flex-1 overflow-hidden">

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

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useAtomValue } from "jotai";
 import { SidebarNav, BottomNav, SidebarToggle } from "./nav";
+import { sidebarAtom } from "./sidebarAtom";
 import { cn } from "@/lib/utils";
 
 interface LayoutProps {
@@ -7,12 +8,9 @@ interface LayoutProps {
 }
 
 export default function Layout({ children }: LayoutProps) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const sidebarState = useAtomValue(sidebarAtom);
-
+    const isSidebarOpen = !sidebarState.isCollapsed;
-    const toggleSidebar = () => {
+    
-        setIsSidebarOpen(!isSidebarOpen);
-    };
-
     return (
         <div className="flex flex-col md:flex-row relative">
             {/* Desktop Sidebar - 데스크탑에서만 보이는 사이드바 */}
@@ -24,13 +22,10 @@ export default function Layout({ children }: LayoutProps) {
                     {isSidebarOpen && (
                         <h2 className="text-lg font-semibold">Ionian</h2>
                     )}
-                    <SidebarToggle
+                    <SidebarToggle />
-                        isOpen={isSidebarOpen}
-                        onToggle={toggleSidebar}
-                    />
                 </div>
                 <div className="flex-1 overflow-y-auto">
-                    <SidebarNav isCollapsed={!isSidebarOpen} />
+                    <SidebarNav />
                 </div>
             </aside>
 

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

@@ -1,101 +1,118 @@
 import { Link } from "wouter"
-import { SearchIcon, SettingsIcon, TagsIcon, ArchiveIcon, UserIcon, LayoutListIcon, PanelLeftIcon, PanelLeftCloseIcon, MenuIcon, XIcon } from "lucide-react"
+import { SearchIcon, SettingsIcon, TagsIcon, ArchiveIcon, UserIcon, LayoutListIcon, PanelLeftIcon, PanelLeftCloseIcon, MenuIcon, XIcon, type LucideIcon } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button.tsx"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx"
 import { useLogin } from "@/state/user.ts";
 import { useNavItems } from "./navAtom";
 import { Separator } from "../ui/separator";
 import { cn } from "@/lib/utils";
+import { useMemo } from "react";
+import { useAtom, useAtomValue } from "jotai";
+import { sidebarAtom } from "./sidebarAtom";
 
-interface NavItemProps {
+const NAV_ICON_CLASS = "size-4";
+
+const NAV_LINKS = {
+    search: { to: "/search", Icon: SearchIcon },
+    tags: { to: "/tags", Icon: TagsIcon },
+    difference: { to: "/difference", Icon: ArchiveIcon },
+    queue: { to: "/queue", Icon: LayoutListIcon },
+    settings: { to: "/setting", Icon: SettingsIcon }
+} satisfies Record<string, { to: string; Icon: LucideIcon }>;
+
+type NavLinkKey = keyof typeof NAV_LINKS;
+
+type NavItemData = {
+    key: string;
     icon: React.ReactNode;
-    to: string;
+    to?: string;
     name: string;
     className?: string;
 }
+const createNavItem = (key: NavLinkKey, name: string, className?: string): NavItemData => {
+    const { Icon, to } = NAV_LINKS[key];
+    return {
+        key,
+        icon: <Icon className={NAV_ICON_CLASS} />,
+        to,
+        name,
+        className
+    };
+};
 
-export function NavItem({
+function useNavItemsData() {
-    icon,
+    const loginInfo = useLogin();
-    to,
+    const isLoggedIn = Boolean(loginInfo);
-    name,
-    className
-}: NavItemProps) {
-    return <Tooltip>
-        <TooltipTrigger asChild>
-            <Link
-                href={to}
-                className={buttonVariants({ variant: "ghost", className })}
-            >
-                {icon}
-                <span className="sr-only">{name}</span>
-            </Link>
-        </TooltipTrigger>
-        <TooltipContent side="right">{name}</TooltipContent>
-    </Tooltip>
-}
 
-interface NavItemButtonProps {
+    return useMemo(() => {
-    icon: React.ReactNode;
+        const accountItem: NavItemData = {
-    onClick: () => void;
+            key: "account",
-    name: string;
+            icon: <UserIcon className={NAV_ICON_CLASS} />,
-    className?: string;
+            to: isLoggedIn ? "/profile" : "/login",
-}
+            name: isLoggedIn ? "Profiles" : "Login",
+        };
 
-export function NavItemButton({
+        return ({
-    icon,
+            main: [
-    onClick,
+                createNavItem("search", "Search"),
-    name,
+                createNavItem("tags", "Tags"),
-    className
+                createNavItem("difference", "Difference"),
-}: NavItemButtonProps) {
+            ],
-    return <Tooltip>
+            footer: [
-        <TooltipTrigger asChild>
+                accountItem,
-            <Button
+                createNavItem("settings", "Settings")
-                onClick={onClick}
+            ],
-                variant="ghost"
+            bottomNav: (useCustomItems: boolean) => useCustomItems ? [] : [
-                className={className}
+                createNavItem("tags", "Tags"),
-            >
+                createNavItem("difference", "Diff"),
-                {icon}
+                { ...accountItem, name: isLoggedIn ? "Profile" : "Login" },
-                <span className="sr-only">{name}</span>
+                createNavItem("settings", "Settings")
-            </Button>
+            ]
-        </TooltipTrigger>
+        })
-        <TooltipContent side="right">{name}</TooltipContent>
+    }, [isLoggedIn]);
-    </Tooltip>
 }
 
 export function NavList() {
-    const loginInfo = useLogin();
+    const customNavItems = useNavItems();
-    const navItems = useNavItems();
+    const { main, footer } = useNavItemsData();
 
-    return <aside className="h-dvh flex flex-col">
+    return (
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
+        <aside className="h-dvh flex flex-col">
-            {navItems && <>{navItems} <Separator /> </>}
+            <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
-            <NavItem icon={<SearchIcon className="h-5 w-5" />} to="/search" name="Search" />
+                {customNavItems && (
-            <NavItem icon={<TagsIcon className="h-5 w-5" />} to="/tags" name="Tags" />
+                    <>
-            <NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
+                        {customNavItems()}
-        </nav>
+                        <Separator />
-        <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
+                    </>
-            <NavItem icon={<UserIcon className="h-5 w-5" />} to={loginInfo ? "/profile" : "/login"} name={loginInfo ? "Profiles" : "Login"} />
+                )}
-            <NavItem icon={<SettingsIcon className="h-5 w-5" />} to="/setting" name="Settings" />
+                {main.map(({ key, icon, to, name, className }) => (
-        </nav>
+                    <SidebarNavItem key={key} name={name} to={to} className={className}>
-    </aside>
+                        {icon}
+                    </SidebarNavItem>
+                ))}
+            </nav>
+            <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
+                {footer.map(({ key, icon, to, name, className }) => (
+                    <SidebarNavItem key={key} name={name} to={to} className={className}>
+                        {icon}
+                    </SidebarNavItem>
+                ))}
+            </nav>
+        </aside>
+    );
 }
 
 // 사이드바 토글 버튼
-export function SidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle: () => void }) {
+export function SidebarToggle() {
+    const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
+    const isOpen = sidebarState.isCollapsed;
+    const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
+
     return (
         <Tooltip>
             <TooltipTrigger asChild>
-                <Button
+                <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
-                    variant="ghost"
+                    {isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-4" />}
-                    size="sm"
-                    onClick={onToggle}
-                    className="h-8 w-8 p-0"
-                >
-                    {isOpen ? (
-                        <PanelLeftCloseIcon className="h-4 w-4" />
-                    ) : (
-                        <PanelLeftIcon className="h-4 w-4" />
-                    )}
                     <span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
                 </Button>
             </TooltipTrigger>
@@ -107,202 +124,158 @@ export function SidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle:
 }
 
 // 모바일용 사이드바 토글 버튼
-export function MobileSidebarToggle({ isOpen, onToggle }: { isOpen: boolean; onToggle: () => void }) {
+export function MobileSidebarToggle() {
+    const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
+    const isOpen = sidebarState.isCollapsed;
+    const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
+
     return (
-        <Button
+        <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
-            variant="ghost"
+            {isOpen ? <XIcon className="size-5" /> : <MenuIcon className="size-5" />}
-            size="sm"
-            onClick={onToggle}
-            className="h-8 w-8 p-0"
-        >
-            {isOpen ? (
-                <XIcon className="h-5 w-5" />
-            ) : (
-                <MenuIcon className="h-5 w-5" />
-            )}
             <span className="sr-only">{isOpen ? "Close menu" : "Open menu"}</span>
         </Button>
     );
 }
 
-// 데스크탑용 사이드바 네비게이션
-export function SidebarNav({ isCollapsed, onNavigate }: { isCollapsed: boolean; onNavigate?: () => void }) {
-    const loginInfo = useLogin();
-    const navItems = useNavItems();
-
-    return (
-        <div className="flex flex-col h-full">
-            <nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
-                {navItems && (
-                    <>
-                        <div className={cn("space-y-2", isCollapsed && "items-center")}>
-                            {navItems}
-                        </div>
-                        <Separator className="my-3" />
-                    </>
-                )}
-
-                <div className="flex flex-col gap-2">
-                    <SidebarNavItem
-                        icon={<SearchIcon className="h-5 w-5" />}
-                        to="/search"
-                        name="Search"
-                        isCollapsed={isCollapsed}
-                        onNavigate={onNavigate}
-                    />
-                    <SidebarNavItem
-                        icon={<TagsIcon className="h-5 w-5" />}
-                        to="/tags"
-                        name="Tags"
-                        isCollapsed={isCollapsed}
-                        onNavigate={onNavigate}
-                    />
-                    <SidebarNavItem
-                        icon={<ArchiveIcon className="h-5 w-5" />}
-                        to="/difference"
-                        name="Difference"
-                        isCollapsed={isCollapsed}
-                        onNavigate={onNavigate}
-                    />
-                    <SidebarNavItem
-                        icon={<LayoutListIcon className="h-5 w-5" />}
-                        to="/queue"
-                        name="Task Queue"
-                        isCollapsed={isCollapsed}
-                        onNavigate={onNavigate}
-                    />
-                </div>
-            </nav>
-
-            <div className="border-t p-3 flex flex-col gap-2 flex-shrink-0">
-                <SidebarNavItem
-                    icon={<UserIcon className="h-5 w-5" />}
-                    to={loginInfo ? "/profile" : "/login"}
-                    name={loginInfo ? "Profiles" : "Login"}
-                    isCollapsed={isCollapsed}
-                    onNavigate={onNavigate}
-                />
-                <SidebarNavItem
-                    icon={<SettingsIcon className="h-5 w-5" />}
-                    to="/setting"
-                    name="Settings"
-                    isCollapsed={isCollapsed}
-                    onNavigate={onNavigate}
-                />
-            </div>
-        </div>
-    );
-}
-
 // 사이드바 네비게이션 아이템
 interface SidebarNavItemProps {
-    icon: React.ReactNode;
+    children: React.ReactNode;
-    to: string;
     name: string;
-    isCollapsed: boolean;
+    to?: string;
-    onNavigate?: () => void;
+    className?: string;
+    onClick?: () => void;
 }
 
-function SidebarNavItem({ icon, to, name, isCollapsed, onNavigate }: SidebarNavItemProps) {
+export function SidebarNavItem({ children, name, to, className, onClick }: SidebarNavItemProps) {
+    const sidebarState = useAtomValue(sidebarAtom);
+    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",
+        className
+    );
+
+    const Container = to ? ({ children, ref }: { children: React.ReactNode,
+        ref?: React.Ref<HTMLAnchorElement>
+     }) => (
+        <Link
+            ref={ref}
+            href={to} className={buttonClass}
+            onClick={onClick}
+        >
+            {children}
+        </Link>
+    ) : ({ children, ref }: { children: React.ReactNode,
+        ref?: React.Ref<HTMLButtonElement>
+     }) => (
+        <button className={buttonClass} onClick={onClick} ref={ref}>
+            {children}
+        </button>
+    );
+
+    const linkContent = (
+        <Container>
+            {children}
+            <span className={cn(
+                "sr-only",
+                !isCollapsed && "text-sm truncate leading-normal md:not-sr-only"
+            )
+            }>{name}</span>
+        </Container>
+    );
+
     if (isCollapsed) {
         return (
             <Tooltip>
-                <TooltipTrigger asChild>
+                <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
-                    <Link
-                        href={to}
-                        className={cn(
-                            buttonVariants({ variant: "ghost", size: "sm" }),
-                            "justify-center h-10 w-10 p-0"
-                        )}
-                        onClick={onNavigate}
-                    >
-                        {icon}
-                        <span className="sr-only">{name}</span>
-                    </Link>
-                </TooltipTrigger>
                 <TooltipContent side="right">{name}</TooltipContent>
             </Tooltip>
         );
     }
 
+    return linkContent;
+}
+
+// 데스크탑용 사이드바 네비게이션
+export function SidebarNav() {
+    const customNavItems = useNavItems();
+    const { main, footer } = useNavItemsData();
+
     return (
-        <Link
+        <div className="flex flex-col h-full">
-            href={to}
+            <nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
-            className={cn(
+                {customNavItems && (
-                buttonVariants({ variant: "ghost", size: "sm" }),
+                    <>
-                "justify-start gap-3 h-10 px-3"
+                        <div className={cn("flex flex-col gap-2")}>
-            )}
+                            {customNavItems()}
-            onClick={onNavigate}
+                        </div>
-        >
+                        <Separator className="my-3" />
-            {icon}
+                    </>
-            <span>{name}</span>
+                )}
-        </Link>
+                <div className="flex flex-col gap-2">
+                    {main.map(({ key, icon, to, name, className }) => (
+                        <SidebarNavItem
+                            key={key}
+                            name={name}
+                            to={to}
+                            className={className}
+                        >
+                            {icon}
+                        </SidebarNavItem>
+                    ))}
+                </div>
+            </nav>
+
+            <div className="border-t p-3 flex flex-col gap-2 flex-shrink-0">
+                {footer.map(({ key, icon, to, name, className }) => (
+                    <SidebarNavItem
+                        key={key}
+                        name={name}
+                        to={to}
+                        className={className}
+                    >
+                        {icon}
+                    </SidebarNavItem>
+                ))}
+            </div>
+        </div>
     );
 }
 
 // 모바일용 하단 네비게이션
 export function BottomNav() {
-    const loginInfo = useLogin();
+    const customNavItems = useNavItems();
-    const navItems = useNavItems();
+    const { main, bottomNav } = useNavItemsData();
+    const searchItem = { ...main[0] }; // Search item
+    const items = bottomNav(Boolean(customNavItems));
 
     return (
         <nav className="mb-1">
-            <div className="flex justify-around items-center max-w-md mx-auto
+            <div className="flex justify-around items-center max-w-md mx-auto overflow-hidden bg-background/50 backdrop-blur-md border rounded-full">
-            overflow-hidden
+                <SidebarNavItem
-            bg-background/50 backdrop-blur-md border rounded-full">
+                    name={searchItem.name}
-                <BottomNavItem
+                    to={searchItem.to}
-                    icon={<SearchIcon className="h-5 w-5" />}
+                    className={searchItem.className}
-                    to="/search"
+                >
-                    name="Search"
+                    {searchItem.icon}
-                    className="flex-1"
+                </SidebarNavItem>
-                />
+                {customNavItems ? (
-                {navItems ? navItems : <>
+                    customNavItems()
-                    <BottomNavItem
+                ) : (
-                        icon={<TagsIcon className="h-5 w-5" />}
+                    items.map(({ key, icon, to, name, className }) =>
-                        to="/tags"
+                        <SidebarNavItem
-                        name="Tags"
+                            key={key}
-                        className="flex-1"
+                            name={name}
-                    />
+                            to={to}
-                    <BottomNavItem
+                            className={className}
-                        icon={<ArchiveIcon className="h-5 w-5" />}
+                        >
-                        to="/difference"
+                            {icon}
-                        name="Diff"
+                        </SidebarNavItem>
-                        className="flex-1"
+                    )
-                    />
+                )}
-                    <BottomNavItem
-                        icon={<UserIcon className="h-5 w-5" />}
-                        to={loginInfo ? "/profile" : "/login"}
-                        name={loginInfo ? "Profile" : "Login"}
-                        className="flex-1"
-                    />
-                    <BottomNavItem
-                        icon={<SettingsIcon className="h-5 w-5" />}
-                        to="/setting"
-                        name="Settings"
-                        className="flex-1"
-                    />
-                </>}
             </div>
         </nav>
     );
-}
-
-// 하단 네비게이션 아이템
-interface BottomNavItemProps {
-    icon: React.ReactNode;
-    to: string;
-    name: string;
-    className?: string;
-}
-
-function BottomNavItem({ icon, to, name, className }: BottomNavItemProps) {
-    return (
-        <Link
-            href={to}
-            className={cn("flex flex-col items-center gap-1 p-2 hover:bg-accent text-xs min-w-0", className)}
-        >
-            {icon}
-            <span className="text-xs truncate leading-normal">{name}</span>
-        </Link>
-    );
 }

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

@@ -1,27 +1,23 @@
 import { atom, useAtomValue, useSetAtom } from "@/lib/atom";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect } from "react";
 
-const NavItems = atom<React.ReactNode>(null);
+const NavItems = atom<(() => React.ReactNode) | null>(null);
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useNavItems() {
     return useAtomValue(NavItems);
 }
 
-export function PageNavItem({items, children}:{items: React.ReactNode, children: React.ReactNode}) {
+export function PageNavItem({navRender, children}:{navRender: () => React.ReactNode, children: React.ReactNode}) {
-    const currentNavItems = useAtomValue(NavItems);
     const setNavItems = useSetAtom(NavItems);
-    const prevValueRef = useRef<React.ReactNode>(null);
     
     useLayoutEffect(() => {
-        // Store current value before setting new one
+        setNavItems(() => navRender);
-        prevValueRef.current = currentNavItems;
-        setNavItems(items);
         
         return () => {
-            setNavItems(prevValueRef.current);
+            setNavItems(null);
         };
-    }, [items, currentNavItems, setNavItems]);
+    }, [ setNavItems, navRender]);
 
     return children;
 }

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

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const sidebarAtom = atom({ isCollapsed: false });

packages/client/src/components/ui/chart.tsx

@@ -67,7 +67,7 @@ ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([, itemConfig]) => itemConfig.theme || itemConfig.color
   )
 
   if (!colorConfig.length) {

packages/client/src/page/galleryPage.tsx

@@ -67,7 +67,7 @@ export default function Gallery() {
             </div>
         }
         else {
-            return <div className="w-full relative overflow-auto h-full"
+            return <div className="w-full relative"
                 style={{ height: virtualizer.getTotalSize() }}>
                 {// TODO: date based grouping
                     virtualItems.map((item) => {

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

@@ -1,4 +1,3 @@
-import { NavItem, NavItemButton } from "@/components/layout/nav";
 import { PageNavItem } from "@/components/layout/navAtom";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -9,6 +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";
 
 interface ComicPageProps {
     params: {
@@ -30,7 +30,8 @@ function ComicViewer({
     const [fade, setFade] = useState(false);
     const pageDown = useCallback((step: number) => setCurPage(Math.max(curPage - step, 0)), [curPage, setCurPage]);
     const pageUp = useCallback((step: number) => setCurPage(Math.min(curPage + step, totalPage - 1)), [curPage, setCurPage, totalPage]);
-    const currentImageRef = useRef<HTMLImageElement>(null);
+    const makeSrc = useCallback((page: number) => `/api/doc/${doc.id}/comic/${page}`, [doc.id]);
+    const [src, setSrc] = useState(() => makeSrc(curPage));
 
     useEffect(() => {
         const onKeyUp = (e: KeyboardEvent) => {
@@ -48,46 +49,44 @@ function ComicViewer({
     }, [pageDown, pageUp]);
 
     useEffect(() => {
-        if (currentImageRef.current) {
+        if (curPage < 0 || curPage >= totalPage) {
-            if (curPage < 0 || curPage >= totalPage) {
+            return;
-                return;
-            }
-            const img = new Image();
-            img.src = `/api/doc/${doc.id}/comic/${curPage}`;
-            if (img.complete) {
-                currentImageRef.current.src = img.src;
-                setFade(false);
-                return;
-            }
-            setFade(true);
-            const listener = () => {
-                // biome-ignore lint/style/noNonNullAssertion: <explanation>
-                const currentImage = currentImageRef.current!;
-                currentImage.src = img.src;
-                setFade(false);
-            };
-            img.addEventListener("load", listener);
-            return () => {
-                img.removeEventListener("load", listener);
-                // abort loading
-                img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-                // TODO: use web worker to abort loading image in the future
-            };
         }
+        const preloadImg = new Image();
+        preloadImg.src = `/api/doc/${doc.id}/comic/${curPage}`;
+        if (preloadImg.complete) {
+            setSrc(preloadImg.src);
+            setFade(false);
+            return;
+        }
+        setFade(true);
+        const listener = () => {
+            setSrc(preloadImg.src);
+            setFade(false);
+        };
+        preloadImg.addEventListener("load", listener);
+        return () => {
+            preloadImg.removeEventListener("load", listener);
+            // abort loading
+            preloadImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+            // img 객체가 GC 되도록 함
+        };
+
     }, [curPage, doc.id, totalPage]);
 
     return (
         <div className="overflow-hidden w-full h-dvh relative">
-            <div className="absolute left-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageDown(1)} />
+            <div className="absolute left-0 w-1/2 h-full z-10 select-none" onPointerDown={() => pageDown(1)} />
             <img
-                ref={currentImageRef}
                 className={cn("max-w-full max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute",
                     fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100"
                 )}
-                alt="main content" />
+                src={src}
-            <div className="absolute right-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageUp(1)} />
+                alt="main content"
+            />
+            <div className="absolute right-0 w-1/2 h-full z-10 select-none" onPointerDown={() => pageUp(1)} />
             {curPage + 1 < totalPage && (
-                <img src={`/api/doc/${doc.id}/comic/${curPage + 1}`} alt="next page" className="sr-only" />
+                <img src={makeSrc(curPage + 1)} alt="next page" className="sr-only" />
             )}
         </div>
     );
@@ -145,31 +144,46 @@ export default function ComicPage({
     }
 
     return (
-        <PageNavItem items={<>
+        <PageNavItem navRender={() =>
-            <NavItem
+            <>
-                className="flex-1"
+                <SidebarNavItem
-                to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />} />
+                    name="Back"
-            <NavItemButton
+                    to={`/doc/${params.id}`}
-                className="flex-1"
-                name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-                icon={isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
-                onClick={() => {
-                    toggleFullScreen();
-                }} />
-            <Popover>
-                <PopoverTrigger
-                    className="flex-1"
                 >
-                    <span className="text-sm text-ellipsis" >{curPage + 1}/{data.additional.page as number}</span>
+                    <ExitIcon />
-                </PopoverTrigger>
+                </SidebarNavItem>
-                <PopoverContent className="w-28">
+                <SidebarNavItem
-                    <Input type="number" value={curPage + 1} onChange={(e) =>
+                    name={isFullScreen ? "Exit FS" : "Enter FS"}
-                        setCurPage(clip(Number.parseInt(e.target.value) - 1,
+                    onClick={toggleFullScreen}
-                            0,
+                >
-                            (data.additional.page as number) - 1))} />
+                    {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
-                </PopoverContent>
+                </SidebarNavItem>
-            </Popover>
+                <Popover>
-        </>}>
+                    <SidebarNavItem
+                        name="Page"
+                    >
+                        <PopoverTrigger asChild>
+                            <span className="text-xs truncate leading-normal">
+                                {curPage + 1}/{data.additional.page as number}
+                            </span>
+                        </PopoverTrigger>
+                    </SidebarNavItem>
+                    <PopoverContent className="w-28">
+                        <Input
+                            type="number"
+                            value={curPage + 1}
+                            onChange={(e) =>
+                                setCurPage(clip(
+                                    Number.parseInt(e.target.value) - 1,
+                                    0,
+                                    (data.additional.page as number) - 1
+                                ))
+                            }
+                        />
+                    </PopoverContent>
+                </Popover>
+            </>
+        }>
             <ComicViewer
                 curPage={curPage}
                 onChangePage={setCurPage}

packages/server/src/route/comic.ts

@@ -51,44 +51,7 @@ export async function renderComicPage({ path, page, reqHeaders, set }: RenderOpt
 		}
 
 		const readStream = await createReadableStreamFromZip(zip.reader, entry);
-		const nodeReadable = new Readable({
+		
-			read() {
-				// noop
-			},
-		});
-
-		let zipClosed = false;
-		const closeZip = async () => {
-			if (!zipClosed) {
-				zipClosed = true;
-				await zip.reader.close();
-			}
-		};
-
-		readStream.pipeTo(new WritableStream({
-			write(chunk) {
-				nodeReadable.push(chunk);
-			},
-			close() {
-				nodeReadable.push(null);
-			},
-			abort(err) {
-				nodeReadable.destroy(err);
-			},
-		})).catch((err) => {
-			nodeReadable.destroy(err);
-		});
-
-		nodeReadable.on("close", () => {
-			closeZip().catch(console.error);
-		});
-		nodeReadable.on("error", () => {
-			closeZip().catch(console.error);
-		});
-		nodeReadable.on("end", () => {
-			closeZip().catch(console.error);
-		});
-
 		const ext = entry.filename.split(".").pop()?.toLowerCase() ?? "jpeg";
 		headers["Content-Type"] = extensionToMime(ext);
 		if (typeof entry.uncompressedSize === "number") {
@@ -96,7 +59,31 @@ export async function renderComicPage({ path, page, reqHeaders, set }: RenderOpt
 		}
 
 		set.status = 200;
-		return nodeReadable;
+		
+		// Ensure zip file is closed after stream ends
+		const streamWithCleanup = new ReadableStream({
+			async start(controller) {
+				try {
+					const reader = readStream.getReader();
+					while (true) {
+						const { done, value } = await reader.read();
+						if (done) break;
+						controller.enqueue(value);
+					}
+					controller.close();
+				} catch (error) {
+					controller.error(error);
+					throw error;
+				} finally {
+					await zip.reader.close();
+				}
+			},
+			cancel: async () => {
+				await zip.reader.close();
+			}
+		});
+		
+		return streamWithCleanup
 	} catch (error) {
 		await zip.reader.close();
 		throw error;