7장 · UI 컴포넌트

<div className="flex gap-2 p-4 rounded-lg bg-white">...</div>
//        └ flex 배치  └ 간격 8px └ 여백 16px └ 둥근 모서리 └ 흰 배경

// 가로 배치 (기본)
<div className="flex items-center gap-4">
  <Button>저장</Button>
  <Button>취소</Button>
</div>

// 세로 배치
<div className="flex flex-col gap-2">
  <Input />
  <Input />
</div>

// 양쪽 끝 정렬 (제목 왼쪽, 버튼 오른쪽)
<div className="flex justify-between items-center">
  <h1>제목</h1>
  <Button>액션</Button>
</div>

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-6">절반 차지</div>
  <div className="col-span-3">1/4 차지</div>
  <div className="col-span-3">1/4 차지</div>
</div>

<div className="p-4">      {/* padding 전체 16px */}
<div className="px-6">     {/* 좌우 24px */}
<div className="py-2">     {/* 상하 8px */}
<div className="mt-2">     {/* margin 위 8px */}
<div className="ml-auto">  {/* 왼쪽 자동 → 오른쪽으로 밀기 */}
<div className="space-y-4"> {/* 자식들 세로 간격 16px */}

// 모바일: 1열, 태블릿: 2열, 데스크탑: 3열
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

// 모바일에서 숨김, 데스크탑에서 표시
<div className="hidden lg:block">데스크탑에서만 보임</div>

import { cn } from "@/lib/utils"

<div className={cn(
  "flex h-16 px-4",
  muted && "bg-muted/50",        // muted=true 일 때만
  bordered && "border shadow-xs" // bordered=true 일 때만
)}>

import { Button } from "@/components/ui/button"

<Button>저장</Button>
<Button variant="outline">취소</Button>      {/* 테두리만 */}
<Button variant="destructive">삭제</Button>   {/* 빨간색 */}
<Button variant="ghost">더보기</Button>       {/* 배경 없음 */}
<Button size="sm">작은 버튼</Button>
<Button size="icon"><SearchIcon /></Button>   {/* 아이콘 전용 */}
<Button disabled>저장 불가</Button>

import { Input } from "@/components/ui/input"

<Input
  placeholder="검색어 입력"
  value={keyword}
  onChange={(e) => setKeyword(e.target.value)}
/>

// 자동 높이 조절 textarea
import { AutosizeTextarea } from "@/components/ui/autosize-textarea"
<AutosizeTextarea placeholder="비고" rows={3} />

import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue
} from "@/components/ui/select"

<Select value={status} onValueChange={setStatus}>
  <SelectTrigger className="w-full">
    <SelectValue placeholder="상태 선택" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="ACTIVE">사용중</SelectItem>
    <SelectItem value="INACTIVE">미사용</SelectItem>
  </SelectContent>
</Select>

import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription
} from "@/components/ui/dialog"

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>장비 등록</DialogTitle>
      <DialogDescription>새 장비를 등록합니다.</DialogDescription>
    </DialogHeader>
    <EquipmentCreateForm onSuccess={() => setIsOpen(false)} />
  </DialogContent>
</Dialog>

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="equipment" onValueChange={setSelectedTab}>
  <TabsList>
    <TabsTrigger value="equipment">장비</TabsTrigger>
    <TabsTrigger value="methods">실험방법</TabsTrigger>
  </TabsList>

  <TabsContent value="equipment"><EquipmentTab /></TabsContent>
  <TabsContent value="methods"><MethodsTab /></TabsContent>
</Tabs>

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"

<Form {...form}>
  <FormField
    control={form.control}
    name="name"
    render={({ field }) => (
      <FormItem>
        <FormLabel>장비명</FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
        <FormMessage />  {/* 유효성 에러 메시지 자동 표시 */}
      </FormItem>
    )}
  />
</Form>

import { Page, PageHeader, PageBody, PageTitle, PageActions } from "@/components/page"

<Page padding menuCode="masters.equipments">
  {/* 상단 고정 헤더 (높이 64px) */}
  <PageHeader>
    <PageTitle desc="보조 설명">실험장비</PageTitle>
    <PageActions>
      <Button>등록</Button>
    </PageActions>
  </PageHeader>

  {/* 스크롤 가능한 본문 */}
  <PageBody padding>
    <ListView />
  </PageBody>
</Page>

┌── Page ──────────────────────────────┐
│ ┌── PageHeader ────────────────────┐ │  ← 고정, h-16, border-b
│ │ PageTitle      │   PageActions    │ │
│ └──────────────────────────────────┘ │
│ ┌── PageBody ──────────────────────┐ │  ← overflow-auto, flex-1
│ │  (스크롤 가능 컨텐츠)              │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘

import { DataTable } from "@/components/data-table"

<DataTable
  data={items}                         // 데이터 배열
  columns={columns}                    // 컬럼 정의
  loading={isLoading}                  // 로딩 스피너
  emptyMessage="데이터가 없습니다"
  activeItem={activeItem}              // 현재 선택 행
  onActiveItemChanged={setActiveItem}  // 행 클릭 시
  sorting={sorting}
  onSortChange={onSortChange}
/>

import { ColumnDef } from "@tanstack/react-table"
import { SortableHeader } from "@/components/data-table"

const columns: ColumnDef<EquipmentListItem>[] = [
  { accessorKey: "name", header: "장비명" },
  {
    accessorKey: "id",
    header: ({ column }) => <SortableHeader column={column}>ID</SortableHeader>,
    meta: { width: 80, align: "center" },
  },
  {
    accessorKey: "status",
    header: "상태",
    cell: ({ row }) => (
      <StatusBadge status={row.original.active ? "success" : "error"} />
    ),
  },
]

import {
  Sheet, SheetContent, SheetHeader, SheetBody,
  SheetToolbar, SheetToolbarSpacer, SheetTitle
} from "@/components/sheet"

<Sheet open={!!activeItem} onOpenChange={(open) => { if (!open) clearActiveItem() }}>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>장비 상세</SheetTitle>
    </SheetHeader>

    <SheetBody>
      <EquipmentEditForm detail={detail} />
    </SheetBody>

    <SheetToolbar>
      <DeleteButton />
      <SheetToolbarSpacer />  {/* 왼쪽: 삭제, 오른쪽: 저장 */}
      <SaveButton />
    </SheetToolbar>
  </SheetContent>
</Sheet>

import { TextField, TextArea, SelectField, DateField, CheckboxField } from "@/components/form-fields"

<TextField control={form.control} name="name" label="장비명" required />
<TextArea control={form.control} name="note" label="비고" rows={3} />

<SelectField
  control={form.control} name="status" label="상태"
  items={[
    { label: "사용중", value: "ACTIVE" },
    { label: "미사용", value: "INACTIVE" },
  ]}
/>

<DateField
  control={form.control} name="purchaseDate" label="구매일" required
  disabledDate={(date) => date > new Date()}  // 미래 날짜 금지
/>

<CheckboxField control={form.control} name="active" label="사용여부" fieldLabel="상태" />

import { SearchForm, useSearchForm } from "@/components/form/SearchForm"

const { filter, submit, reset, setValue, setValueAndSubmit, touched } =
  useSearchForm<EquipmentFilter>(
    onSubmit,         // 검색 실행 콜백
    { keyword: "" },  // 기본값 (reset 시 돌아갈 값)
    initialFilter     // 초기값 (URL 복원 등)
  )

<SearchForm onSubmit={submit} onReset={touched ? reset : undefined}>
  <Input
    placeholder="장비명, 시리얼번호"
    value={filter.keyword || ""}
    onChange={(e) => setValue("keyword", e.target.value)}
  />
</SearchForm>

import { Pagination, initialPageable } from "@/components/pagination"

const pageable = useSignal<Pageable>(initialPageable())  // { page: 0, size: 20 }

<Pagination
  page={data?.pageInfo}     // { number, totalPages, totalElements, ... }
  onChange={(n) => { pageable.value = { ...pageable.value, page: n } }}        // zero-based
  onPageSizeChange={(size) => { pageable.value = { ...pageable.value, size } }}
/>

전체 1,234건   [<<] [<] [>] [>>]   [1 ▼] / 10 Pages   [20 ▼] Rows / Page

// 삭제 확인 다이얼로그 포함 버튼
<DeleteButton onConfirm={async () => { await EquipmentEndpoint.delete(id) }} />

// 상태 점 배지
<StatusBadge status="success" />   {/* 초록 */}
<StatusBadge status="error" />     {/* 빨강 */}

// 검색어 하이라이트
<HighlightKeyword keyword={keyword}>{row.getValue("name")}</HighlightKeyword>

// 엑셀 다운로드
<DownloadButton onClick={() => downloadTable("table-id", "파일명.xlsx")} />

<Page padding menuCode="masters.equipments">
  <PageHeader>
    <PageTitle>실험장비</PageTitle>
    <PageActions><AddEquipmentDialog /></PageActions>
  </PageHeader>
  <PageBody padding>
    <SearchForm onSubmit={submit} onReset={reset}>...</SearchForm>
    <DataTable data={data?.content} columns={columns}
      activeItem={activeItem} onActiveItemChanged={setActiveItem} />
    <Pagination page={data?.pageInfo} onChange={handlePageChange} />
  </PageBody>

  <Sheet open={!!activeItem}>
    <SheetContent>
      <SheetHeader><SheetTitle>장비 상세</SheetTitle></SheetHeader>
      <SheetBody>
        <TextField control={form.control} name="name" label="장비명" />
        <DateField control={form.control} name="purchaseDate" label="구매일" />
      </SheetBody>
      <SheetToolbar>
        <DeleteButton onConfirm={handleDelete} />
        <SheetToolbarSpacer />
        <SaveButton onClick={handleSave} />
      </SheetToolbar>
    </SheetContent>
  </Sheet>
</Page>