[v0.6.6] - cmdk 검색 UX 개선 및 인기순 정렬 로직 최적화

content/posts/INSIGHT/git-merge.mdx

@@ -6,7 +6,7 @@ category: "Insight"
 series: "git/github"
 tags: ["git", "github"]
 summary: "Git Flow를 전제로 merge, squash, rebase의 차이와 협업에서 rebase를 조심해야 하는 이유를 정리한 글"
-thumbnail: "https://res.cloudinary.com/dvapam1ks/image/upload/v1770430277/git_github%E1%84%8A%E1%85%A5%E1%86%B7%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AF_sfk61p.png"
+thumbnail: "https://res.cloudinary.com/dvapam1ks/image/upload/v1770451051/git-1%E1%84%8A%E1%85%A5%E1%86%B7%E1%84%82%E1%85%A6%E1%84%8B%E1%85%B5%E1%86%AF_zilex3.png"
 draft: false
 ---
 

src/app/(layout)/(shell)/(category)/[category]/layout.tsx

@@ -4,7 +4,7 @@ export default function SiteLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="flex-1 -mt-5 pt-16 px-5 md:px-20 lg:px-40 xl:px-70 xl2:px-80  max-w-[1560px] w-full">
+    <main className="flex-1 -mt-5 pt-16 px-5 md:px-20 lg:px-40 xl:px-70 3xl:px-80  max-w-[1560px] w-full">
       {children}
     </main>
   );

src/app/(layout)/(shell)/_components/posts/PostListGrid.tsx

@@ -18,7 +18,7 @@ export default function PostListGrid({
       className={clsx(
         "md:mt-10",
         isSmall ? "gap-5" : "gap-8",
-        "grid  grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        "grid  grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4",
         "items-stretch justify-items-center"
       )}
     >

src/app/globals.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
-@config "../../tailwind.config.ts"; 
+@config "../../tailwind.config.ts";
 
 /* 디자인 토큰 & 다크모드 */
 @import "../styles/tokens.css";
@@ -22,6 +22,7 @@
 /* 백그라운드 애니메이션 우주 배경 */
 @import "../styles/components/background.css";
 
+
 .heading-anchor {
   text-decoration: none;
 }

src/components/common/CommandPalette.tsx

@@ -2,6 +2,7 @@
 
 import useCommandPaletteInternal from "@/hooks/useCommandPaletteInternal";
 import * as Dialog from "@radix-ui/react-dialog";
+import clsx from "clsx";
 import { Command } from "cmdk";
 import { Search } from "lucide-react";
 import { createContext, useContext, type ReactNode } from "react";
@@ -25,14 +26,14 @@ interface CommandPaletteProviderProps {
 }
 
 const CommandPaletteContext = createContext<CommandPaletteContextValue | null>(
-  null
+  null,
 );
 
 export function useCommandPalette() {
   const ctx = useContext(CommandPaletteContext);
   if (!ctx) {
     throw new Error(
-      "useCommandPalette must be used within CommandPaletteProvider"
+      "useCommandPalette must be used within CommandPaletteProvider",
     );
   }
   return ctx;
@@ -44,7 +45,7 @@ export function CommandPaletteProvider({
   const {
     open,
     query,
-    filteredItems,
+    displayItems,
     openPalette,
     closePalette,
     togglePalette,
@@ -62,12 +63,12 @@ export function CommandPaletteProvider({
           <Dialog.Overlay className="fixed inset-0 z-60 bg-black/40 backdrop-blur-sm" />
 
           <Dialog.Content
-            className={[
+            className={clsx(
               "fixed inset-x-3 top-[18%] z-70 w-auto rounded-2xl border border-white/10",
               "bg-foreground/80 text-background shadow-2xl dark:bg-foreground",
               "max-h-[70vh]",
               "sm:left-1/2 sm:top-50 sm:w-full sm:max-w-xl sm:-translate-x-1/2 sm:inset-x-auto",
-            ].join(" ")}
+            )}
           >
             <Dialog.Title className="sr-only">사이트 검색</Dialog.Title>
 
@@ -86,13 +87,19 @@ export function CommandPaletteProvider({
                 </span>
               </div>
 
-              <Command.List className="max-h-[60vh] overflow-y-auto py-2">
+              <Command.List
+                className={clsx(
+                  "max-h-[60vh] overflow-y-auto py-2",
+                  "scrollbar-thin scrollbar-thumb scrollbar-track-transparent",
+                  "hover:scrollbar-thumb-hover",
+                )}
+              >
                 <Command.Empty className="px-4 py-3 text-xs text-background/70">
                   검색 결과가 없습니다.
                 </Command.Empty>
 
                 <Command.Group className="px-2 pt-1">
-                  {filteredItems.map((item) => (
+                  {displayItems.map((item) => (
                     <Command.Item
                       key={item.id}
                       value={item.label}

src/components/common/controls/sort/SortSelect.tsx

@@ -7,6 +7,7 @@ export type PostSortValue = "latest" | "popular";
 interface Props {
   value?: PostSortValue;
   onChange?: (value: PostSortValue) => void;
+  onPrefetch?: (value: PostSortValue) => void;
   className?: string;
 }
 
@@ -15,7 +16,7 @@ const SORT_OPTIONS: { value: PostSortValue; label: string }[] = [
   { value: "popular", label: "인기순" },
 ];
 
-export default function SortSelect({ value, onChange, className }: Props) {
+export default function SortSelect({ value, onChange, onPrefetch, className }: Props) {
   const [internalValue, setInternalValue] = useState<PostSortValue>("latest");
   const currentValue = value ?? internalValue;
 
@@ -42,6 +43,7 @@ export default function SortSelect({ value, onChange, className }: Props) {
               key={option.value}
               type="button"
               onClick={() => handleChange(option.value)}
+              onPointerEnter={() => onPrefetch?.(option.value)}
               aria-pressed={isActive}
               className={clsx(
                 "inline-flex items-center justify-center rounded-full px-1 py-1",

src/components/common/controls/sort/SortSelectClient.tsx

@@ -13,14 +13,27 @@ export default function SortSelectClient({ value }: SortSelectClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const handleChange = (next: PostSortValue) => {
+  const buildUrl = (next: PostSortValue) => {
     const params = new URLSearchParams(searchParams.toString());
-
     params.set("sort", next);
     params.set("page", "1");
+    return `?${params.toString()}`;
+  };
+
+  const handleChange = (next: PostSortValue) => {
+    router.push(buildUrl(next), { scroll: false });
+  };
 
-    router.push(`?${params.toString()}`, { scroll: false });
+  const handlePrefetch = (next: PostSortValue) => {
+    if (next === value) return;
+    router.prefetch(buildUrl(next));
   };
 
-  return <SortSelect value={value} onChange={handleChange} />;
+  return (
+    <SortSelect
+      value={value}
+      onChange={handleChange}
+      onPrefetch={handlePrefetch}
+    />
+  );
 }

src/components/common/icons/FolderIcon.tsx

@@ -6,11 +6,11 @@ import { CSSProperties } from "react";
 export type FolderTone = "gray" | "blue" | "pink" | "purple" | "orange" | "darkblue";
 
 const TONE_COLOR: Record<FolderTone, string> = {
-  gray: "#9c9fa9",
-  blue: "#0ea5e9",
-  darkblue: "#357fff",
+  gray: "#6c6c6c",
+  blue: "#0da1e6",
+  darkblue: "#2371f8",
   pink: "#ff66b2",
-  purple: "#8679ec",
+  purple: "#6454de",
   orange: "#f1842a",
 };
 

src/hooks/useCommandPaletteInternal.ts

@@ -6,8 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 type UseCommandPaletteResult = {
   open: boolean;
   query: string;
-  items: CommandItem[];
-  filteredItems: CommandItem[];
+  displayItems: CommandItem[];
   openPalette: () => void;
   closePalette: () => void;
   togglePalette: () => void;
@@ -38,6 +37,12 @@ const STATIC_ITEMS: CommandItem[] = [
   },
 ];
 
+function isPostItem(item: CommandItem) {
+  return (
+    item.id.startsWith("post-") || (item.href?.startsWith("/posts/") ?? false)
+  );
+}
+
 function buildPostItems(): CommandItem[] {
   const posts = getAllPosts({ includeDrafts: false });
 
@@ -72,19 +77,53 @@ function buildPostItems(): CommandItem[] {
   });
 }
 
+const RECENT_KEY = "b_log_cmdk_recent";
+const RECENT_LIMIT = 3;
+
+function readRecent(): CommandItem[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = sessionStorage.getItem(RECENT_KEY);
+    const parsed = raw ? (JSON.parse(raw) as CommandItem[]) : [];
+    return Array.isArray(parsed) ? parsed.slice(0, RECENT_LIMIT) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeRecent(items: CommandItem[]) {
+  sessionStorage.setItem(
+    RECENT_KEY,
+    JSON.stringify(items.slice(0, RECENT_LIMIT)),
+  );
+}
+
+function pushRecent(item: CommandItem): CommandItem[] {
+  const current = readRecent();
+  const next = [item, ...current.filter((x) => x.id !== item.id)].slice(
+    0,
+    RECENT_LIMIT,
+  );
+  writeRecent(next);
+  return next;
+}
+
 export default function useCommandPaletteInternal(): UseCommandPaletteResult {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
+  const [recentItems, setRecentItems] = useState<CommandItem[]>(() =>
+    readRecent(),
+  );
 
   const items = useMemo<CommandItem[]>(() => {
     const postItems = buildPostItems();
     return [...STATIC_ITEMS, ...postItems];
   }, []);
 
-  const filteredItems = useMemo(() => {
+  const searchResults = useMemo(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return items;
+    if (!q) return [];
 
     return items.filter((item) => {
       const target = (
@@ -101,6 +140,14 @@ export default function useCommandPaletteInternal(): UseCommandPaletteResult {
     });
   }, [items, query]);
 
+  const displayItems = useMemo<CommandItem[]>(() => {
+    const q = query.trim();
+    if (q.length > 0) return searchResults;
+
+    if (recentItems.length === 0) return STATIC_ITEMS;
+    return [...STATIC_ITEMS, ...recentItems];
+  }, [query, recentItems, searchResults]);
+
   const openPalette = useCallback(() => {
     setQuery("");
     setOpen(true);
@@ -123,13 +170,16 @@ export default function useCommandPaletteInternal(): UseCommandPaletteResult {
 
   const handleSelect = useCallback(
     (item: CommandItem) => {
+      if (isPostItem(item)) {
+        setRecentItems(pushRecent(item));
+      }
       if (item.href) {
         router.push(item.href);
       }
       setOpen(false);
       setQuery("");
     },
-    [router]
+    [router],
   );
 
   const handleOpenChange = useCallback((next: boolean) => {
@@ -157,13 +207,12 @@ export default function useCommandPaletteInternal(): UseCommandPaletteResult {
   return {
     open,
     query,
-    items,
-    filteredItems,
+    displayItems,
     openPalette,
     closePalette,
     togglePalette,
     setQuery,
     handleSelect,
     handleOpenChange,
   };
-}
+}

src/hooks/usePostLike.ts

@@ -22,7 +22,7 @@ export function usePostLike(postId: string): UsePostLikeResult {
   const [liked, setLiked] = useState(false);
   const [loading, setLoading] = useState(true);
 
-  const viewerIdRef = useRef<string | null>(null);
+  const viewerIdRef = useRef<string>("");
 
   useEffect(() => {
     viewerIdRef.current = getOrCreateViewerId();
@@ -32,7 +32,7 @@ export function usePostLike(postId: string): UsePostLikeResult {
     if (!postId) return;
 
     const run = async () => {
-      const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
+      const viewerId = viewerIdRef.current;
       const { count, liked } = await fetchPostLikeState(postId, viewerId);
 
       setCount(count);
@@ -44,7 +44,7 @@ export function usePostLike(postId: string): UsePostLikeResult {
   }, [postId]);
 
   const toggleLike = async () => {
-    const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
+    const viewerId = viewerIdRef.current;
     if (!viewerId || !postId) return;
 
     if (liked) {
@@ -60,6 +60,9 @@ export function usePostLike(postId: string): UsePostLikeResult {
     }
 
     const { error } = await addPostLike(postId, viewerId);
+    if (error) {
+  console.error("add like error:", error.code, error.message, error.details, error.hint);
+}
 
     if (error) {
       if (isDuplicateKeyError(error)) {