fix: auctiion history 결과 카드 ui 에러 해결

Author: dev-ant

src/components/navigation/ThreeTierNav.tsx

@@ -254,8 +254,8 @@ export default function ThreeTierNav() {
     return "아이템 이름을 검색하세요";
   }, [pathname]);
 
-  // Search input component (reusable for both layouts)
-  const SearchInput = ({ className = "" }: { className?: string }) => (
+  // Render search input JSX (not a component to avoid remounting)
+  const renderSearchInput = (className = "") => (
     <div className={clsx("relative", className)}>
       <Input
         ref={searchInputRef}
@@ -425,7 +425,7 @@ export default function ThreeTierNav() {
             </Link>
 
             {/* Search - Flexible center area */}
-            <SearchInput className="flex-1 max-w-2xl mx-auto" />
+            {renderSearchInput("flex-1 max-w-2xl mx-auto")}
 
             {/* Right Icons - Fixed width */}
             <div className="flex items-center gap-1 flex-shrink-0">
@@ -498,7 +498,7 @@ export default function ThreeTierNav() {
         {/* Tier 2: Search Bar */}
         <div className="h-12 border-b border-gray-100">
           <div className="max-w-7xl mx-auto px-4 h-full flex items-center">
-            <SearchInput className="w-full" />
+            {renderSearchInput("w-full")}
           </div>
         </div>
 

src/components/page/auction-history/ItemOptionPopover.tsx

@@ -37,8 +37,8 @@ export default function ItemOptionPopover({
         {itemDisplayName}
       </div>
 
-      {/* 옵션 그룹 영역 (스크롤 가능) */}
-      <div className="flex-1 overflow-y-auto max-h-[calc(70vh-120px)] space-y-3 pr-1">
+      {/* 옵션 그룹 영역 (스크롤 가능, 스크롤바 숨김) */}
+      <div className="flex-1 overflow-y-auto max-h-[calc(70vh-120px)] space-y-3 pr-1 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         {groupedOptions.map((group) => (
           <OptionGroup key={group.categoryId} group={group} />
         ))}
@@ -59,9 +59,9 @@ export default function ItemOptionPopover({
  */
 function OptionGroup({ group }: { group: GroupedOption }) {
   return (
-    <div className="relative border border-white/30 rounded-sm pt-4 pb-2 px-2.5">
+    <div className="relative border border-white/30 rounded-sm pt-5 pb-2 px-2.5 mt-1">
       {/* 카테고리 라벨 (테두리에 겹치는 스타일) */}
-      <span className="absolute -top-2 left-2 px-1.5 bg-[#1a1a1a] text-[#e8a854] text-xs font-semibold">
+      <span className="absolute -top-2.5 left-2 px-1.5 bg-[#1a1a1a] text-[#e8a854] text-xs font-semibold leading-normal">
         {group.categoryLabel}
       </span>
 
@@ -127,6 +127,15 @@ function EnchantItem({ option }: { option: ItemOption }) {
   const enchantType = formatEnchantType(option.optionSubType);
   const hasDesc = option.optionDesc && option.optionDesc.trim().length > 0;
 
+  // optionDesc의 ',' 문자를 개행으로 변환하고 각 줄 앞에 '-' 추가
+  const formatEnchantDesc = (desc: string): string[] => {
+    return desc
+      .split(/[,\n]/)
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0)
+      .map((line) => (line.startsWith("-") ? line : `- ${line}`));
+  };
+
   return (
     <div className="mb-1.5">
       {/* 인챈트 헤더 */}
@@ -139,7 +148,7 @@ function EnchantItem({ option }: { option: ItemOption }) {
       {/* 인챈트 효과 설명 */}
       {hasDesc && (
         <div className="ml-3 mt-0.5">
-          {option.optionDesc?.split("\n").map((line, idx) => (
+          {formatEnchantDesc(option.optionDesc!).map((line, idx) => (
             <EffectLine key={idx} text={line} />
           ))}
         </div>
@@ -219,13 +228,13 @@ function ArtisanOptions({ options }: { options: ItemOption[] }) {
     <>
       {options.map((option) => (
         <div key={option.id} className="mb-1.5 last:mb-0">
-          <div className="text-xs text-[#ccc]">
-            {option.optionSubType && (
-              <span className="text-[#b0b0b0]">{option.optionSubType}</span>
-            )}
-          </div>
-          <div className="text-xs ml-2">
-            <HighlightedValue value={option.optionValue} />
+          {option.optionSubType && (
+            <div className="text-xs text-[#b0b0b0] font-medium">
+              {option.optionSubType}
+            </div>
+          )}
+          <div className="text-xs text-[#ccc] ml-2">
+            {option.optionValue}
           </div>
           {option.optionDesc && (
             <div className="ml-3 mt-0.5">

src/lib/itemOptionUtils.ts

@@ -91,7 +91,12 @@ export interface ValueSegment {
   value: string;
 }
 
-export function parseOptionValue(value: string): ValueSegment[] {
+export function parseOptionValue(value: string | null | undefined): ValueSegment[] {
+  // null/undefined 처리
+  if (value == null) {
+    return [{ type: "text", value: "" }];
+  }
+
   const segments: ValueSegment[] = [];
   // 숫자, 퍼센트, 범위(~) 포함 패턴
   const regex = /([+-]?\d+(?:\.\d+)?%?(?:\s*~\s*[+-]?\d+(?:\.\d+)?%?)?)/g;