From dc6e2f0504fd0c57664480e8d33378060c9f6cff Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Wed, 15 Apr 2026 14:22:20 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Production=20Workflow=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=81=AC=EA=B8=B0=C2=B7=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EA=B7=A0=EC=9D=BC=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Flexbox + items-center → CSS Grid 전환 (모든 컬럼 동일 너비)
- 카드 h-full + flex flex-col 로 높이 균등 (description 길이 무관)
- description flex-1 + 태그 mt-auto 로 하단 칩 정렬 통일
- 화살표 absolute -right-3 분리 (카드 너비에 영향 없음)
- step 수 4·5·6·7·8 모두 grid-cols 명시 (Tailwind purge 안전)

7개 데모 (view/banobagi/grand/wonjin/ts/irum/o2o) 모두 적용
- step 4: irum  / step 5: view  / step 6: 나머지 5개

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/plan/ContentStrategy.tsx | 86 ++++++++++++++-----------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/plan/ContentStrategy.tsx b/src/components/plan/ContentStrategy.tsx
index 0ec04c5..f15f7fe 100644
--- a/src/components/plan/ContentStrategy.tsx
+++ b/src/components/plan/ContentStrategy.tsx
@@ -144,43 +144,55 @@ export default function ContentStrategy({ data }: ContentStrategyProps) {
       )}
 
       {/* Tab 3: Production Workflow */}
-      {activeTab === 'workflow' && (
-        <motion.div
-          className="flex md:flex-row flex-col gap-4 items-stretch"
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.4 }}
-        >
-          {data.workflow.map((step, i) => (
-            <div key={step.step} className="flex md:flex-row flex-col items-center gap-4 flex-1">
-              <motion.div
-                className="flex-1 w-full rounded-2xl border border-slate-100 bg-white shadow-sm p-5"
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4, delay: i * 0.1 }}
-              >
-                <div className="w-10 h-10 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white font-bold flex items-center justify-center mb-3">
-                  {step.step}
-                </div>
-                <h4 className="font-semibold text-[#0A1128] mb-1">{step.name}</h4>
-                <p className="text-sm text-slate-600 mb-3">{step.description}</p>
-                <div className="flex flex-wrap gap-2">
-                  <span className="rounded-full bg-[#F3F0FF] text-[#4A3A7C] px-2 py-1 text-xs">
-                    {step.owner}
-                  </span>
-                  <span className="rounded-full bg-slate-100 text-slate-600 px-2 py-1 text-xs">
-                    {step.duration}
-                  </span>
-                </div>
-              </motion.div>
-              {i < data.workflow.length - 1 && (
-                <ArrowRight
-                  size={20}
-                  className="text-slate-300 shrink-0 hidden md:block"
-                />
-              )}
-            </div>
-          ))}
-        </motion.div>
-      )}
+      {activeTab === 'workflow' && (() => {
+        // step 수에 따라 동일 너비 grid 컬럼 매핑 (Tailwind purge 안전)
+        const cols = data.workflow.length;
+        const gridColsClass =
+          cols <= 3 ? 'md:grid-cols-3'
+          : cols === 4 ? 'md:grid-cols-4'
+          : cols === 5 ? 'md:grid-cols-5'
+          : cols === 6 ? 'md:grid-cols-6'
+          : cols === 7 ? 'md:grid-cols-7'
+          : 'md:grid-cols-8';
+
+        return (
+          <motion.div
+            className={`grid grid-cols-1 ${gridColsClass} gap-4`}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.4 }}
+          >
+            {data.workflow.map((step, i) => (
+              <div key={step.step} className="relative">
+                <motion.div
+                  className="h-full w-full rounded-2xl border border-slate-100 bg-white shadow-sm p-5 flex flex-col"
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4, delay: i * 0.1 }}
+                >
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white font-bold flex items-center justify-center mb-3 shrink-0">
+                    {step.step}
+                  </div>
+                  <h4 className="font-semibold text-[#0A1128] mb-1">{step.name}</h4>
+                  <p className="text-sm text-slate-600 mb-3 flex-1">{step.description}</p>
+                  <div className="flex flex-wrap gap-2 mt-auto">
+                    <span className="rounded-full bg-[#F3F0FF] text-[#4A3A7C] px-2 py-1 text-xs">
+                      {step.owner}
+                    </span>
+                    <span className="rounded-full bg-slate-100 text-slate-600 px-2 py-1 text-xs">
+                      {step.duration}
+                    </span>
+                  </div>
+                </motion.div>
+                {i < data.workflow.length - 1 && (
+                  <ArrowRight
+                    size={20}
+                    className="text-slate-300 absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block z-10"
+                  />
+                )}
+              </div>
+            ))}
+          </motion.div>
+        );
+      })()}
 
       {/* Tab 4: Repurposing */}
       {activeTab === 'repurposing' && (