버튼 정렬기능 수정

frontend/components/screen/widgets/FlowWidget.tsx

@@ -195,6 +195,32 @@ export function FlowWidget({
               setStepCounts(countsMap);
             }
           }
+
+          // 🆕 플로우 로드 후 첫 번째 스텝 자동 선택
+          if (sortedSteps.length > 0) {
+            const firstStep = sortedSteps[0];
+            setSelectedStepId(firstStep.id);
+            setSelectedStep(flowComponentId, firstStep.id);
+            console.log("✅ [FlowWidget] 첫 번째 단계 자동 선택:", {
+              flowComponentId,
+              stepId: firstStep.id,
+              stepName: firstStep.stepName,
+            });
+
+            // 첫 번째 스텝의 데이터 로드
+            try {
+              const response = await getStepDataList(flowId!, firstStep.id, 1, 100);
+              if (response.success) {
+                const rows = response.data?.records || [];
+                setStepData(rows);
+                if (rows.length > 0) {
+                  setStepDataColumns(Object.keys(rows[0]));
+                }
+              }
+            } catch (err) {
+              console.error("첫 번째 스텝 데이터 로드 실패:", err);
+            }
+          }
         }
       } catch (err: any) {
         console.error("Failed to load flow data:", err);
@@ -732,12 +758,12 @@ export function FlowWidget({
               </div>
 
               {/* 데스크톱: 테이블 뷰 - 고정 높이 + 스크롤 */}
-              <div className="hidden overflow-auto @sm:block" style={{ height: "450px" }}>
-                <Table>
+              <div className="relative hidden overflow-auto @sm:block" style={{ height: "450px" }}>
+                <Table noWrapper>
                   <TableHeader>
-                    <TableRow className="bg-muted/50 hover:bg-muted/50">
+                    <TableRow className="hover:bg-muted/50">
                       {allowDataMove && (
-                        <TableHead className="bg-muted/50 sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-sm">
+                        <TableHead className="bg-background sticky top-0 left-0 z-20 w-12 border-b px-3 py-2 text-center shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
                           <Checkbox
                             checked={selectedRows.size === stepData.length && stepData.length > 0}
                             onCheckedChange={toggleAllRows}
@@ -747,7 +773,7 @@ export function FlowWidget({
                       {stepDataColumns.map((col) => (
                         <TableHead
                           key={col}
-                          className="bg-muted/50 sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap sm:text-sm"
+                          className="bg-background sticky top-0 z-10 border-b px-3 py-2 text-xs font-semibold whitespace-nowrap shadow-[0_1px_0_0_rgb(0,0,0,0.1)] sm:text-sm"
                         >
                           {col}
                         </TableHead>