fix: align v2 publisher review with HMDesign stories and tokens

src/patterns/data-table.stories.tsx

@@ -122,19 +122,21 @@ function WithFilterBar({ extended = true }: { extended?: boolean }) {
     <PageHeader><PageHeaderContent><PageHeaderTitle>사용자 목록</PageHeaderTitle><PageHeaderDescription>조건을 입력한 뒤 조회합니다.</PageHeaderDescription></PageHeaderContent></PageHeader>
     <Card className="min-w-0"><CardContent>
       <div className="grid min-w-0 gap-4">
-        <form onSubmit={event => { event.preventDefault(); apply() }}>
-          <FilterBar className={extended ? "hm-list-search-extended" : "hm-list-search-basic"}>
-            <Select value={status} onValueChange={setStatus}>
-              <SelectTrigger size="medium" aria-label="상태"><SelectValue placeholder="상태" /></SelectTrigger>
-              <SelectContent><SelectItem value="all">전체 상태</SelectItem>{statusOptions.map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
-            </Select>
-            {extended && <><Combobox controlled size="medium" aria-label="부서" options={departmentOptions} value={department} placeholder="부서" onValueChange={setDepartment} />
-              <DatePicker controlled size="medium" aria-label="등록일" placeholder="등록일" value={date} onValueChange={setDate} /></>}
-            <FilterBarSearch value={search} onValueChange={setSearch} placeholder="이름·부서 검색" />
-            <FilterBarActions><Button type="submit" variant="primary" appearance="solid">조회</Button><Button type="button" variant="cancel" appearance="outline" onClick={reset}>초기화</Button></FilterBarActions>
-          </FilterBar>
-        </form>
-        <div className="flex justify-end"><DataTableViewOptions table={table} labels={columnLabels} /></div>
+        <div className="hm-data-table-tools">
+          <form className="hm-data-table-search" onSubmit={event => { event.preventDefault(); apply() }}>
+            <FilterBar className={extended ? "hm-list-search-extended" : "hm-list-search-basic"}>
+              <Select value={status} onValueChange={setStatus}>
+                <SelectTrigger size="medium" aria-label="상태"><SelectValue placeholder="상태" /></SelectTrigger>
+                <SelectContent><SelectItem value="all">전체 상태</SelectItem>{statusOptions.map(option => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}</SelectContent>
+              </Select>
+              {extended && <><Combobox controlled size="medium" aria-label="부서" options={departmentOptions} value={department} placeholder="부서" onValueChange={setDepartment} />
+                <DatePicker controlled size="medium" aria-label="등록일" placeholder="등록일" value={date} onValueChange={setDate} /></>}
+              <FilterBarSearch value={search} onValueChange={setSearch} placeholder="이름·부서 검색" />
+              <FilterBarActions><Button type="submit" variant="primary" appearance="solid">조회</Button><Button type="button" variant="cancel" appearance="outline" onClick={reset}>초기화</Button></FilterBarActions>
+            </FilterBar>
+          </form>
+          <div className="hm-data-table-view-options"><DataTableViewOptions table={table} labels={columnLabels} /></div>
+        </div>
         <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
       </div>
     </CardContent></Card>
@@ -159,8 +161,8 @@ export const All: Story = {
       <StorySection title="Overview" description="행 선택(헤더 혼합 상태), 정렬, 열 표시, 행 작업, 페이지 크기와 페이지 이동을 실제로 조작합니다.">
         <Basic />
       </StorySection>
-      <StorySection title="기본 목록 검색" description="조건·검색어·조회·초기화를 8px 간격으로 가운데 정렬합니다. 제목은 Card 밖에 배치합니다."><WithFilterBar extended={false} /></StorySection>
-      <StorySection title="추가 조건 목록 검색" description="부서·등록일을 제공하는 구성은 입력값과 관계없이 왼쪽 정렬합니다. 모바일 버튼 행은 우측 정렬합니다."><WithFilterBar /></StorySection>
+      <StorySection title="기본 목록 검색" description="조건·검색어·조회·초기화를 8px 간격으로 가운데 정렬합니다. 공간이 충분하면 열 버튼은 같은 행 우측, 부족할 때만 다음 행에 배치합니다. 제목은 Card 밖에 배치합니다."><WithFilterBar extended={false} /></StorySection>
+      <StorySection title="추가 조건 목록 검색" description="부서·등록일을 제공하는 구성은 입력값과 관계없이 왼쪽 정렬합니다. 열 버튼은 공간이 충분하면 같은 행 우측에 배치하며 모바일 버튼 행은 우측 정렬합니다."><WithFilterBar /></StorySection>
     </StoryPage>
   ),
 }