Quantity Picker

import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerPreview() {
  return (
    <QuantityPicker
      min={1}
      max={99}
      defaultValue={1}
      aria-label="상품 수량"
      getValueText={(value) => `${value}개`}
    />
  );
}

import { Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerControlled() {
  const [quantity, setQuantity] = useState(2);

  return (
    <VStack gap="x3" align="center">
      <QuantityPicker
        min={1}
        max={99}
        value={quantity}
        onValueChange={setQuantity}
        aria-label="상품 수량"
        getValueText={(value) => `${value}개`}
      />
      <Text textStyle="t4Regular">현재 수량: {quantity}개</Text>
    </VStack>
  );
}

import { Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerRemovable() {
  const [removed, setRemoved] = useState(false);

  if (removed) {
    return <Text textStyle="t4Regular">상품을 삭제했습니다.</Text>;
  }

  return (
    <VStack gap="x3" align="center">
      <QuantityPicker
        min={1}
        max={99}
        defaultValue={1}
        removable
        aria-label="상품 수량"
        removeAriaLabel="상품 삭제"
        onRemove={() => setRemoved(true)}
        getValueText={(value) => `${value}개`}
      />
      <Text textStyle="t4Regular">최소 수량에서 Decrement 버튼이 Remove 버튼으로 전환됩니다.</Text>
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerLoading() {
  const [loading, setLoading] = useState(false);

  function toggleLoading() {
    setLoading((current) => !current);
  }

  return (
    <VStack gap="x3" align="flex-start">
      <QuantityPicker
        min={1}
        max={99}
        defaultValue={2}
        loading={{ increment: loading }}
        aria-label="상품 수량"
        getValueText={(value) => `${value}개`}
      />
      <ActionButton variant="neutralWeak" onClick={toggleLoading}>
        Increment loading 전환
      </ActionButton>
    </VStack>
  );
}

import { HStack, Text, VStack } from "@seed-design/react";
import { useState, type FormEvent } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerForm() {
  const [submittedQuantity, setSubmittedQuantity] = useState<number | null>(null);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    setSubmittedQuantity(Number(formData.get("quantity")));
  }

  return (
    <VStack asChild gap="x3" align="flex-start">
      <form onSubmit={handleSubmit}>
        <QuantityPicker
          min={1}
          max={99}
          defaultValue={1}
          aria-label="상품 수량"
          inputProps={{ name: "quantity" }}
          getValueText={(value) => `${value}개`}
        />
        <HStack gap="x2">
          <ActionButton type="submit" variant="neutralSolid">
            제출
          </ActionButton>
          {submittedQuantity !== null && (
            <Text textStyle="t4Regular">제출한 수량: {submittedQuantity}개</Text>
          )}
        </HStack>
      </form>
    </VStack>
  );
}