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

refactor: simplify stream handling and ensure zip closure in renderComicPage function
2025-10-08 00:11:33 +09:00 · 2025-10-04 03:35:30 +09:00
9 changed files with 333 additions and 365 deletions
--- a/packages/client/src/components/gallery/GalleryCard.tsx
+++ b/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">
--- a/packages/client/src/components/layout/layout.tsx
+++ b/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 toggleSidebar = () => {
-        setIsSidebarOpen(!isSidebarOpen);
-    };
-
+    const sidebarState = useAtomValue(sidebarAtom);
+    const isSidebarOpen = !sidebarState.isCollapsed;
+    
    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
-                        isOpen={isSidebarOpen}
-                        onToggle={toggleSidebar}
-                    />
+                    <SidebarToggle />
                </div>
                <div className="flex-1 overflow-y-auto">
-                    <SidebarNav isCollapsed={!isSidebarOpen} />
+                    <SidebarNav />
                </div>
            </aside>

--- a/packages/client/src/components/layout/nav.tsx
+++ b/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({
-    icon,
-    to,
-    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>
-}
+function useNavItemsData() {
+    const loginInfo = useLogin();
+    const isLoggedIn = Boolean(loginInfo);

-interface NavItemButtonProps {
-    icon: React.ReactNode;
-    onClick: () => void;
-    name: string;
-    className?: string;
-}
+    return useMemo(() => {
+        const accountItem: NavItemData = {
+            key: "account",
+            icon: <UserIcon className={NAV_ICON_CLASS} />,
+            to: isLoggedIn ? "/profile" : "/login",
+            name: isLoggedIn ? "Profiles" : "Login",
+        };

-export function NavItemButton({
-    icon,
-    onClick,
-    name,
-    className
-}: NavItemButtonProps) {
-    return <Tooltip>
-        <TooltipTrigger asChild>
-            <Button
-                onClick={onClick}
-                variant="ghost"
-                className={className}
-            >
-                {icon}
-                <span className="sr-only">{name}</span>
-            </Button>
-        </TooltipTrigger>
-        <TooltipContent side="right">{name}</TooltipContent>
-    </Tooltip>
+        return ({
+            main: [
+                createNavItem("search", "Search"),
+                createNavItem("tags", "Tags"),
+                createNavItem("difference", "Difference"),
+            ],
+            footer: [
+                accountItem,
+                createNavItem("settings", "Settings")
+            ],
+            bottomNav: (useCustomItems: boolean) => useCustomItems ? [] : [
+                createNavItem("tags", "Tags"),
+                createNavItem("difference", "Diff"),
+                { ...accountItem, name: isLoggedIn ? "Profile" : "Login" },
+                createNavItem("settings", "Settings")
+            ]
+        })
+    }, [isLoggedIn]);
 }

 export function NavList() {
-    const loginInfo = useLogin();
-    const navItems = useNavItems();
+    const customNavItems = useNavItems();
+    const { main, footer } = useNavItemsData();

-    return <aside className="h-dvh flex flex-col">
-        <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
-            {navItems && <>{navItems} <Separator /> </>}
-            <NavItem icon={<SearchIcon className="h-5 w-5" />} to="/search" name="Search" />
-            <NavItem icon={<TagsIcon className="h-5 w-5" />} to="/tags" name="Tags" />
-            <NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
-        </nav>
-        <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" />
-        </nav>
-    </aside>
+    return (
+        <aside className="h-dvh flex flex-col">
+            <nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
+                {customNavItems && (
+                    <>
+                        {customNavItems()}
+                        <Separator />
+                    </>
+                )}
+                {main.map(({ key, icon, to, name, className }) => (
+                    <SidebarNavItem key={key} name={name} to={to} className={className}>
+                        {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
-                    variant="ghost"
-                    size="sm"
-                    onClick={onToggle}
-                    className="h-8 w-8 p-0"
-                >
-                    {isOpen ? (
-                        <PanelLeftCloseIcon className="h-4 w-4" />
-                    ) : (
-                        <PanelLeftIcon className="h-4 w-4" />
-                    )}
+                <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
+                    {isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-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
-            variant="ghost"
-            size="sm"
-            onClick={onToggle}
-            className="h-8 w-8 p-0"
-        >
-            {isOpen ? (
-                <XIcon className="h-5 w-5" />
-            ) : (
-                <MenuIcon className="h-5 w-5" />
-            )}
+        <Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
+            {isOpen ? <XIcon className="size-5" /> : <MenuIcon className="size-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;
-    to: string;
+    children: React.ReactNode;
    name: string;
-    isCollapsed: boolean;
-    onNavigate?: () => void;
+    to?: string;
+    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>
-                    <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>
+                <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
                <TooltipContent side="right">{name}</TooltipContent>
            </Tooltip>
        );
    }

+    return linkContent;
+}
+
+// 데스크탑용 사이드바 네비게이션
+export function SidebarNav() {
+    const customNavItems = useNavItems();
+    const { main, footer } = useNavItemsData();
+
    return (
-        <Link
-            href={to}
-            className={cn(
-                buttonVariants({ variant: "ghost", size: "sm" }),
-                "justify-start gap-3 h-10 px-3"
-            )}
-            onClick={onNavigate}
-        >
-            {icon}
-            <span>{name}</span>
-        </Link>
+        <div className="flex flex-col h-full">
+            <nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
+                {customNavItems && (
+                    <>
+                        <div className={cn("flex flex-col gap-2")}>
+                            {customNavItems()}
+                        </div>
+                        <Separator className="my-3" />
+                    </>
+                )}
+                <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 navItems = useNavItems();
+    const customNavItems = 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
-            overflow-hidden
-            bg-background/50 backdrop-blur-md border rounded-full">
-                <BottomNavItem
-                    icon={<SearchIcon className="h-5 w-5" />}
-                    to="/search"
-                    name="Search"
-                    className="flex-1"
-                />
-                {navItems ? navItems : <>
-                    <BottomNavItem
-                        icon={<TagsIcon className="h-5 w-5" />}
-                        to="/tags"
-                        name="Tags"
-                        className="flex-1"
-                    />
-                    <BottomNavItem
-                        icon={<ArchiveIcon className="h-5 w-5" />}
-                        to="/difference"
-                        name="Diff"
-                        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 className="flex justify-around items-center max-w-md mx-auto overflow-hidden bg-background/50 backdrop-blur-md border rounded-full">
+                <SidebarNavItem
+                    name={searchItem.name}
+                    to={searchItem.to}
+                    className={searchItem.className}
+                >
+                    {searchItem.icon}
+                </SidebarNavItem>
+                {customNavItems ? (
+                    customNavItems()
+                ) : (
+                    items.map(({ key, icon, to, name, className }) =>
+                        <SidebarNavItem
+                            key={key}
+                            name={name}
+                            to={to}
+                            className={className}
+                        >
+                            {icon}
+                        </SidebarNavItem>
+                    )
+                )}
            </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>
-    );
 }
--- a/packages/client/src/components/layout/navAtom.tsx
+++ b/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}) {
-    const currentNavItems = useAtomValue(NavItems);
+export function PageNavItem({navRender, children}:{navRender: () => React.ReactNode, children: React.ReactNode}) {
    const setNavItems = useSetAtom(NavItems);
-    const prevValueRef = useRef<React.ReactNode>(null);
    
    useLayoutEffect(() => {
-        // Store current value before setting new one
-        prevValueRef.current = currentNavItems;
-        setNavItems(items);
+        setNavItems(() => navRender);
        
        return () => {
-            setNavItems(prevValueRef.current);
+            setNavItems(null);
        };
-    }, [items, currentNavItems, setNavItems]);
+    }, [ setNavItems, navRender]);

    return children;
 }
--- a/packages/client/src/components/layout/sidebarAtom.tsx
+++ b/packages/client/src/components/layout/sidebarAtom.tsx
@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const sidebarAtom = atom({ isCollapsed: false });
--- a/packages/client/src/components/ui/chart.tsx
+++ b/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) {
--- a/packages/client/src/page/galleryPage.tsx
+++ b/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) => {
--- a/packages/client/src/page/reader/comicPage.tsx
+++ b/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) {
-                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
-            };
+        if (curPage < 0 || curPage >= totalPage) {
+            return;
        }
+        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" />
-            <div className="absolute right-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageUp(1)} />
+                src={src}
+                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={<>
-            <NavItem
-                className="flex-1"
-                to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />} />
-            <NavItemButton
-                className="flex-1"
-                name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-                icon={isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
-                onClick={() => {
-                    toggleFullScreen();
-                }} />
-            <Popover>
-                <PopoverTrigger
-                    className="flex-1"
+        <PageNavItem navRender={() =>
+            <>
+                <SidebarNavItem
+                    name="Back"
+                    to={`/doc/${params.id}`}
                >
-                    <span className="text-sm text-ellipsis" >{curPage + 1}/{data.additional.page as number}</span>
-                </PopoverTrigger>
-                <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>
-        </>}>
+                    <ExitIcon />
+                </SidebarNavItem>
+                <SidebarNavItem
+                    name={isFullScreen ? "Exit FS" : "Enter FS"}
+                    onClick={toggleFullScreen}
+                >
+                    {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
+                </SidebarNavItem>
+                <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}
--- a/packages/server/src/route/comic.ts
+++ b/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;
Author	SHA1	Message	Date
monoid	25231b5e88	feat: refactor navigation components to use Jotai for sidebar state management and improve rendering logic	2025-10-08 00:11:33 +09:00
monoid	d6dae83f20	refactor: simplify stream handling and ensure zip closure in renderComicPage function	2025-10-04 03:35:30 +09:00