Segmented Text Input

import { Box } from "@seed-design/react";
import { ResidentNumberField } from "seed-design/ui/resident-number-field";

export default function SegmentedTextInputPreview() {
  return (
    <Box width="358px" maxWidth="100%">
      <ResidentNumberField label="주민등록번호" />
    </Box>
  );
}

import { VStack } from "@seed-design/react";
import { ResidentNumberField } from "seed-design/ui/resident-number-field";

export default function SegmentedTextInputResidentNumberDigits() {
  return (
    <VStack width="358px" maxWidth="100%" gap="spacingY.componentDefault">
      <ResidentNumberField label="주민등록번호" description="digits=6" digits={6} />
      <ResidentNumberField label="주민등록번호" description="digits=7 (default)" digits={7} />
      <ResidentNumberField label="주민등록번호" description="digits=13" digits={13} />
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { CardNumberField } from "seed-design/ui/card-number-field";

export default function SegmentedTextInputCardNumber() {
  return (
    <VStack width="358px" maxWidth="100%" gap="spacingY.componentDefault">
      <CardNumberField label="카드번호" description="maskedDigits=8 (default)" />
      <CardNumberField
        label="카드번호"
        description="maskedDigits=4, suffix"
        maskedDigits={4}
        suffix={<CardLogo />}
      />
    </VStack>
  );
}

// 예시용 카드사 로고입니다. 실제 서비스에서는 카드사 로고 자산을 크기와 함께 넣습니다.
function CardLogo() {
  return (
    <svg width="30" height="20" viewBox="0 0 30 20" role="img" aria-label="카드사">
      <rect width="30" height="20" rx="4" fill="#00a05b" />
      <rect x="5" y="7" width="8" height="6" rx="1.5" fill="#ffffff" fillOpacity="0.85" />
    </svg>
  );
}

import { VStack } from "@seed-design/react";
import { ResidentNumberField } from "seed-design/ui/resident-number-field";

export default function SegmentedTextInputState() {
  return (
    <VStack width="358px" maxWidth="100%" gap="spacingY.componentDefault">
      <ResidentNumberField label="Enabled" description="설명을 써주세요" />
      <ResidentNumberField
        label="Invalid"
        defaultValue={["931305", "1"]}
        invalid
        errorMessage="생년월일을 다시 확인해주세요"
      />
      <ResidentNumberField label="Disabled" defaultValue={["931205", "1"]} disabled />
      <ResidentNumberField label="Read Only" defaultValue={["931205", "1"]} readOnly />
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import { CardNumberField } from "seed-design/ui/card-number-field";

export default function SegmentedTextInputSize() {
  return (
    <VStack width="358px" maxWidth="100%" gap="spacingY.componentDefault">
      <CardNumberField label="카드번호" description="size=large (default)" size="large" />
      <CardNumberField label="카드번호" description="size=medium" size="medium" />
    </VStack>
  );
}

import { useState } from "react";
import { Text, VStack } from "@seed-design/react";
import { ResidentNumberField } from "seed-design/ui/resident-number-field";

export default function SegmentedTextInputControlled() {
  const [value, setValue] = useState<string[]>(["", ""]);

  return (
    <VStack width="358px" maxWidth="100%" gap="x3">
      <ResidentNumberField label="주민등록번호" value={value} onValueChange={setValue} />
      <Text textStyle="t4Regular" color="fg.neutralMuted">
        value: {JSON.stringify(value)}
      </Text>
    </VStack>
  );
}

import { HStack, VStack } from "@seed-design/react";
import { useCallback, type FormEvent } from "react";
import { useController, useForm } from "react-hook-form";
import { ActionButton } from "seed-design/ui/action-button";
import { CardNumberField } from "seed-design/ui/card-number-field";
import { ResidentNumberField } from "seed-design/ui/resident-number-field";

interface FormValues {
  residentNumber: string[];
  cardNumber: string[];
}

export default function SegmentedTextInputReactHookForm() {
  const { handleSubmit, reset, control } = useForm<FormValues>({
    reValidateMode: "onSubmit",
    defaultValues: {
      residentNumber: ["", ""],
      cardNumber: ["", "", "", ""],
    },
  });

  const { field: residentNumberField, fieldState: residentNumberFieldState } = useController({
    name: "residentNumber",
    control,
    rules: {
      validate: ([birth = "", back = ""]) =>
        (birth.length === 6 && back.length === 1) || "주민등록번호 앞 7자리를 모두 입력해주세요",
    },
  });

  const { field: cardNumberField, fieldState: cardNumberFieldState } = useController({
    name: "cardNumber",
    control,
    rules: {
      validate: (value) =>
        value.every((segment) => segment.length === 4) || "카드번호 16자리를 모두 입력해주세요",
    },
  });

  const onValid = useCallback((data: FormValues) => {
    window.alert(JSON.stringify(data, null, 2));
  }, []);

  const onReset = useCallback(
    (event: FormEvent) => {
      event.preventDefault();
      reset();
    },
    [reset],
  );

  return (
    <VStack
      gap="x3"
      width="358px"
      maxWidth="100%"
      as="form"
      onSubmit={handleSubmit(onValid)}
      onReset={onReset}
    >
      <ResidentNumberField
        label="주민등록번호"
        invalid={residentNumberFieldState.invalid}
        errorMessage={residentNumberFieldState.error?.message}
        value={residentNumberField.value}
        onValueChange={residentNumberField.onChange}
        onBlur={residentNumberField.onBlur}
        required
        showRequiredIndicator
      />
      <CardNumberField
        label="카드번호"
        invalid={cardNumberFieldState.invalid}
        errorMessage={cardNumberFieldState.error?.message}
        value={cardNumberField.value}
        onValueChange={cardNumberField.onChange}
        onBlur={cardNumberField.onBlur}
        required
        showRequiredIndicator
      />
      <HStack gap="x2">
        <ActionButton type="reset" variant="neutralWeak">
          초기화
        </ActionButton>
        <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
          제출
        </ActionButton>
      </HStack>
    </VStack>
  );
}

import { Fragment, useState } from "react";
import { HStack, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SegmentedTextField,
  SegmentedTextFieldSegment,
  SegmentedTextFieldSeparator,
} from "seed-design/ui/segmented-text-field";

const LABELS = ["1-4번째 자리", "5-8번째 자리", "9-12번째 자리", "13-16번째 자리"];
const KEYPAD_SEGMENTS = [2, 3];
const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

export default function SegmentedTextInputExternalKeypad() {
  const [value, setValue] = useState(["", "", "", ""]);
  const [keypadOpen, setKeypadOpen] = useState(false);

  const press = (key: string) =>
    setValue((prev) => {
      const index = KEYPAD_SEGMENTS.find((i) => prev[i].length < 4);
      if (index === undefined) return prev;
      return prev.map((segment, i) => (i === index ? segment + key : segment));
    });

  const erase = () =>
    setValue((prev) => {
      const index = KEYPAD_SEGMENTS.findLast((i) => prev[i].length > 0);
      if (index === undefined) return prev;
      return prev.map((segment, i) => (i === index ? segment.slice(0, -1) : segment));
    });

  return (
    <VStack width="358px" maxWidth="100%" gap="x4">
      <SegmentedTextField label="카드번호" value={value} onValueChange={setValue}>
        {LABELS.map((label, i) => {
          const usesKeypad = KEYPAD_SEGMENTS.includes(i);

          return (
            <Fragment key={label}>
              {i > 0 && <SegmentedTextFieldSeparator> - </SegmentedTextFieldSeparator>}
              <SegmentedTextFieldSegment
                aria-label={`카드번호 ${label}`}
                placeholder={usesKeypad ? undefined : "0000"}
                length={4}
                masked={usesKeypad}
                // 직접 입력을 막고 탭하면 외부 키패드를 연다.
                readOnly={usesKeypad}
                inputMode={usesKeypad ? "none" : "numeric"}
                onFocus={() => setKeypadOpen(usesKeypad)}
              />
            </Fragment>
          );
        })}
      </SegmentedTextField>
      {keypadOpen && (
        // 키패드를 눌러도 입력의 focus가 유지되도록 mousedown 기본 동작을 막는다.
        <HStack wrap gap="x2" onMouseDown={(event) => event.preventDefault()}>
          {KEYS.map((key) => (
            <ActionButton key={key} variant="neutralWeak" onClick={() => press(key)}>
              {key}
            </ActionButton>
          ))}
          <ActionButton variant="neutralWeak" onClick={erase}>
            지우기
          </ActionButton>
        </HStack>
      )}
    </VStack>
  );
}