refactor: adjust styling and class names in GalleryCard, TagInput, layout, nav, and comicPage components

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

@@ -77,7 +77,8 @@ function GalleryCardImpl({
         };
     }, [originalTags]);
 
-    return <Card className="flex h-[200px] overflow-hidden transition-all duration-200 hover:shadow-lg hover:shadow-primary/20 group">
+    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">
@@ -93,7 +94,7 @@ function GalleryCardImpl({
                         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" />
+                        <LayersIcon className="size-3" />
                         <span>{x.pagenum}</span>
                     </div>
                 </div>
@@ -180,7 +181,7 @@ export function GalleryCardSkeleton({
 }: {
     tagCount?: number;
 }) {
-    return <Card className="flex h-[200px]">
+    return <Card className="flex h-[200px] flex-col md:flex-row">
         <Skeleton className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none" />
         <div className="flex-1 flex flex-col">
             <CardHeader className="flex-none">

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">
                 {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">
+                <Button variant="ghost" size="sm" onClick={onToggle} className={className}>
-                    {isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-4" />}
+                    {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" }),
+        buttonVariants({ variant: "ghost", size: "lg" }),
-        "rounded-none md:rounded-md",
+        "rounded-none md:rounded-md flex-1 md:min-h-10 min-h-12 touch-manipulation justify-center",
-        isCollapsed ? "justify-center size-10 p-0" : "justify-start gap-3 h-10 px-3",
+        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/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