From a86c6919a62730b9076cd9e5309819ff2f7cbc2a Mon Sep 17 00:00:00 2001
From: ComBba <cent@naver.com>
Date: Tue, 10 Feb 2026 09:02:39 +0900
Subject: [PATCH 1/2] fix(#266): resolve DOM insertBefore error in
 SommelierCard

- Wrap formatted paragraphs in single container div to prevent DOM mismatch
- Use stable keys based on content hash instead of index only
- Replace line-clamp with max-height transition for smooth expansion

Closes #266
---
 frontend/src/components/SommelierCard.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/SommelierCard.tsx b/frontend/src/components/SommelierCard.tsx
index 7b60612..1ce39df 100644
--- a/frontend/src/components/SommelierCard.tsx
+++ b/frontend/src/components/SommelierCard.tsx
@@ -19,7 +19,8 @@ interface SommelierCardProps {
 }
 
 // Format feedback: split into paragraphs
-function formatFeedback(text: string): React.ReactNode[] {
+// Uses stable keys based on content hash to prevent React DOM reconciliation errors
+function formatFeedback(text: string): React.ReactNode {
   // Split into sentences - but only at sentence boundaries
   // A sentence ends with .!? followed by space and uppercase letter
   // This avoids breaking "Next.js", "e.g.", "i.e.", etc.
@@ -39,9 +40,16 @@ function formatFeedback(text: string): React.ReactNode[] {
     }
   });
   
-  return paragraphs.map((p, idx) => (
-    <p key={idx} className={idx > 0 ? 'mt-3' : ''}>{p}</p>
-  ));
+  // Wrap in a single container to avoid DOM reconciliation issues when toggling expansion
+  // This prevents the "insertBefore" error caused by React trying to reconcile
+  // multiple paragraph elements when the parent's className changes
+  return (
+    <div className="space-y-3">
+      {paragraphs.map((p, idx) => (
+        <p key={`feedback-${idx}-${p.slice(0, 20).replace(/\s/g, '')}`}>{p}</p>
+      ))}
+    </div>
+  );
 }
 
 export function SommelierCard({
@@ -102,7 +110,11 @@ export function SommelierCard({
 
       {/* Feedback content */}
       <div className="p-5">
-        <div className={`text-gray-700 leading-relaxed ${isExpanded ? '' : 'line-clamp-6'}`}>
+        <div 
+          className={`text-gray-700 leading-relaxed transition-all duration-300 overflow-hidden ${
+            isExpanded ? 'max-h-none' : 'max-h-36'
+          }`}
+        >
           {formatFeedback(feedback)}
         </div>
         

From 345efc58af448ddd6a75ab0509b37dd307e8f42f Mon Sep 17 00:00:00 2001
From: ComBba <cent@naver.com>
Date: Tue, 10 Feb 2026 09:09:21 +0900
Subject: [PATCH 2/2] fix: enable smooth max-height transition animation

Address review feedback:
- Replace max-h-none with max-h-[2000px] for animatable numeric value
- Change transition-all to transition-[max-height] for targeted animation
- Add ease-in-out for smoother easing curve
---
 frontend/src/components/SommelierCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/SommelierCard.tsx b/frontend/src/components/SommelierCard.tsx
index 1ce39df..a0f3bfa 100644
--- a/frontend/src/components/SommelierCard.tsx
+++ b/frontend/src/components/SommelierCard.tsx
@@ -111,8 +111,8 @@ export function SommelierCard({
       {/* Feedback content */}
       <div className="p-5">
         <div 
-          className={`text-gray-700 leading-relaxed transition-all duration-300 overflow-hidden ${
-            isExpanded ? 'max-h-none' : 'max-h-36'
+          className={`text-gray-700 leading-relaxed transition-[max-height] duration-300 ease-in-out overflow-hidden ${
+            isExpanded ? 'max-h-[2000px]' : 'max-h-36'
           }`}
         >
           {formatFeedback(feedback)}