@team-monolith/cds 0.1.0

package/src/cds/components/Pagination.tsx

@@ -0,0 +1,99 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { Pagination as MuiPagination } from "@mui/material";
+import { HOVER } from "../utils/hover";
+
+export interface PaginationProps {
+  className?: string;
+  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
+  /** 시작과 끝에 오는 페이지의 수 */
+  boundaryCount?: number;
+  /** 전체 페이지의 수 */
+  count?: number;
+  /** 기본 페이지 (UnControlled) */
+  defaultPage?: number;
+  /** 비활성화 여부 */
+  disabled?: boolean;
+  /** 다음 페이지로 이동하는 버튼 숨김여부 */
+  hideNextButton?: boolean;
+  /** 이전 페이지로 이동하는 버튼 숨김여부 */
+  hidePrevButton?: boolean;
+  /** 페이지가 변경되었을 때 콜백함수 */
+  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
+  /** 현재 페이지 전후로 나타나는 페이지의 수 */
+  siblingCount?: number;
+  /** 현재 페이지 */
+  page: number;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=35-798&t=6OdVgm0hiYaq5PFw-0)
+ */
+const Pagination = React.forwardRef<any, PaginationProps>(
+  (props, ref): React.ReactElement => (
+    <StyledPagination siblingCount={2} shape="rounded" {...props} ref={ref} />
+));
+
+const StyledPagination = styled(MuiPagination)(
+  ({ theme }) => css`
+    &.MuiPagination-root {
+      & .MuiPagination-ul {
+        li {
+          width: 32px;
+          height: 32px;
+          margin-left: 4px;
+          margin-right: 4px;
+          button {
+            padding: 0;
+            margin: 0;
+          }
+        }
+      }
+      & .MuiPaginationItem-root {
+        ${HOVER(css`
+          background-color: ${theme.color.background.neutralAlt};
+        `)}
+      }
+      & .MuiPaginationItem-text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        border-radius: 8px;
+        color: ${theme.color.foreground.neutralBase};
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        padding: 1px 7px;
+        margin: 0;
+      }
+      & .Mui-selected {
+        border: 2px solid ${theme.color.background.primary};
+        background-color: transparent;
+        color: ${theme.color.background.primary};
+        font-weight: 700;
+        ${HOVER(css`
+          background-color: transparent;
+        `)}
+      }
+      & .Mui-disabled {
+        background-color: transparent;
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+      & .Mui-disabled.Mui-selected {
+        border: 2px solid ${theme.color.background.primaryDisabled};
+        background-color: transparent;
+        color: ${theme.color.background.primaryDisabled};
+      }
+      & .MuiPaginationItem-ellipsis {
+        ${HOVER(css`
+          background-color: transparent;
+        `)}
+      }
+    }
+  `
+);
+
+export default Pagination;

package/src/cds/components/PinInput.tsx

@@ -0,0 +1,322 @@
+/** @jsxImportSource @emotion/react */
+import { Theme, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import React, { useRef, useState } from "react";
+import { InputBase } from "./InputBase";
+
+export type PinInputColor =
+  | "default"
+  | "activePrimary"
+  | "activeDanger"
+  | "activeSuccess";
+
+export type PinInputSize = "large" | "medium" | "small";
+
+export interface PinInputProps {
+  className?: string;
+  // component?: React.ElementType; Input은 component를 받지 않습니다.
+
+  /** `true` 값일 때 첫번째 Input에 자동으로 포커싱합니다. */
+  autoFocus?: boolean;
+
+  /** 컴포넌트 크기 */
+  size: PinInputSize;
+
+  /** 입력되기 전 PinInput 컴포넌트에 노출될 문자열 */
+  placeholder?: string;
+
+  /** Input 컴포넌트 상단에 노출될 문자열 */
+  label?: string;
+
+  /** Input 컴포넌트 하단에 노출될 문자열 */
+  hintText?: string;
+
+  /** hint 영역 좌측에 노출될 아이콘 */
+  hintIcon?: React.ReactNode;
+
+  /** 비활성화 여부 */
+  disabled?: boolean;
+
+  /** 에러 상태 여부 */
+  error?: boolean;
+
+  /** 성공 상태 여부 */
+  positive?: boolean;
+
+  /** 값이 변경될때 호출될 콜백 함수 */
+  onChange: (e: {
+    values: string[];
+    event: React.ChangeEvent<HTMLInputElement>;
+  }) => void;
+
+  /** PinInput의 value (Controlled Component) */
+  values: string[];
+}
+
+const SIZE_TO_STYLES = (size: PinInputSize) =>
+  ({
+    small: css`
+      width: 36px;
+    `,
+    medium: css`
+      width: 48px;
+    `,
+    large: css`
+      width: 56px;
+    `,
+  }[size]);
+
+const COLOR_TO_HINT_STYLES = (
+  theme: Theme,
+  color: PinInputColor,
+  disabled: boolean
+) =>
+  disabled
+    ? css`
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      `
+    : {
+        default: css`
+          color: ${theme.color.foreground.neutralBaseDisabled};
+        `,
+        activePrimary: css`
+          color: ${theme.color.foreground.neutralBaseDisabled};
+        `,
+        activeDanger: css`
+          color: ${theme.color.foreground.danger};
+        `,
+        activeSuccess: css`
+          color: ${theme.color.foreground.success};
+        `,
+      }[color];
+
+const SIZE_TO_FONT_STYLES = (size: PinInputSize) =>
+  ({
+    small: css`
+      font-size: 14px;
+      line-height: 20px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    `,
+    medium: css`
+      font-size: 16px;
+      line-height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    `,
+    large: css`
+      font-size: 18px;
+      line-height: 28px;
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    `,
+  }[size]);
+
+/** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
+function updateFocus(
+  value: boolean,
+  i: number,
+  setFocus: React.Dispatch<React.SetStateAction<boolean[]>>
+) {
+  setFocus((prevFocus) => {
+    const newFocus = prevFocus.slice();
+    newFocus[i] = value;
+    return newFocus;
+  });
+}
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=26-11031&t=n7a8XP4k8R2TGmiO-0)
+ */
+const PinInput = React.forwardRef<any, PinInputProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      autoFocus,
+      size,
+      placeholder,
+      label,
+      hintText,
+      hintIcon,
+      disabled = false,
+      error,
+      positive,
+      onChange,
+      values,
+      ...other
+    } = props;
+
+    return (
+      <PinInputWrapper className={className} size={size} ref={ref} {...other}>
+        {label ? (
+          <Label disabled={disabled}>
+            {label} <PinInputComponent {...props} />
+          </Label>
+        ) : (
+          <PinInputComponent {...props} />
+        )}
+        {hintText && (
+          <Hint
+            color={
+              error ? "activeDanger" : positive ? "activeSuccess" : "default"
+            }
+            disabled={disabled}
+          >
+            {hintIcon}
+            {hintText}
+          </Hint>
+        )}
+      </PinInputWrapper>
+    );
+  }
+);
+
+function PinInputComponent(props: PinInputProps) {
+  const {
+    autoFocus,
+    size,
+    placeholder,
+    disabled = false,
+    error,
+    positive,
+    onChange,
+    values,
+  } = props;
+
+  const [focus, setFocus] = useState<boolean[]>([]);
+  const refs = useRef<(HTMLInputElement | null)[]>([]);
+
+  return (
+    <PinInputContainer>
+      {values.map((value, i) => (
+        <SqaureInput
+          key={i}
+          color={
+            error
+              ? "activeDanger"
+              : positive
+              ? "activeSuccess"
+              : focus[i]
+              ? "activePrimary"
+              : "default"
+          }
+          inputRef={(element) => {
+            refs.current[i] = element;
+          }}
+          onChange={(event) => {
+            const eventValue = event.target.value;
+
+            if (eventValue.length > 2) {
+              // 복붙으로 입력을 입력한 경우
+              if (
+                eventValue.length === values.length &&
+                eventValue.match(/^[0-9]+$/)
+              ) {
+                onChange({ values: eventValue.split(""), event });
+              }
+              return;
+            }
+
+            // 값을 지웠을 때
+            if (eventValue === "") {
+              const newValues = values.slice();
+              newValues[i] = "";
+              onChange({ values: newValues, event });
+              return;
+            }
+
+            // 원래 값이 있었고, 새 값을 입력했을 때
+            // 입력 완료된 값(2자리)으로부터 새로 입력한 숫자를 추출한다.
+            const currentValue = values[i];
+            let newValue = eventValue;
+            if (currentValue[0] === eventValue[0]) {
+              // 예) 이전 값: '2', 입력된 상태: '23' 인 경우
+              newValue = eventValue[1]; // 뒷 자리가 새로 입력된 숫자
+            } else if (currentValue[0] === eventValue[1]) {
+              // 예) 이전 값: '2', 입력된 상태: '32' 인 경우
+              newValue = eventValue[0]; // 앞 자리가 새로 입력된 숫자
+            }
+
+            // 새로 입력된 값이 숫자일때만 onChange를 실행
+            if (newValue.match(/^[0-9]$/)) {
+              const newValues = values.slice();
+              newValues[i] = newValue;
+              onChange({ values: newValues, event });
+              // 자동으로 다음 input으로 포커스 이동시킴.
+              if (i < values.length - 1) {
+                refs.current[i + 1]?.focus();
+              }
+            }
+          }}
+          placeholder={focus[i] ? "" : placeholder}
+          disabled={disabled}
+          size={size}
+          inputProps={{
+            autoFocus: autoFocus ? i === 0 : false,
+            onBlur: () => updateFocus(false, i, setFocus),
+            onFocus: () => updateFocus(true, i, setFocus),
+            onKeyDown: (e) => {
+              // Backspace 키로 이전 input으로의 포커스 이동
+              if (e.key === "Backspace" && values[i] === "" && i > 0) {
+                refs.current[i - 1]?.focus();
+              }
+            },
+          }}
+          fullWidth={true}
+          value={value}
+        />
+      ))}
+    </PinInputContainer>
+  );
+}
+
+const PinInputWrapper = styled.span<{ size: PinInputSize }>`
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
+`;
+
+const PinInputContainer = styled.span`
+  display: inline-flex;
+  gap: 8px;
+`;
+
+const SqaureInput = styled(InputBase)<{ size: PinInputSize }>`
+  ${({ size }) => SIZE_TO_STYLES(size)}
+  padding: 0;
+  input {
+    text-align: center;
+  }
+`;
+
+const Hint = styled.div<{
+  color: PinInputColor;
+  disabled: boolean;
+}>(
+  ({ theme, color, disabled }) => css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
+  `
+);
+
+const Label = styled.label<{ disabled: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  ${({ theme, disabled }) =>
+    disabled &&
+    css`
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    `}
+`;
+
+export default PinInput;

package/src/cds/components/RadioInput.tsx

@@ -0,0 +1,226 @@
+/** @jsxImportSource @emotion/react */
+import { SerializedStyles, css, Theme, useTheme } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { ZINDEX } from "../utils/zIndex";
+import { InputHTMLAttributes } from "react";
+
+export type RadioInputType = "default" | "selected";
+
+const TYPE_TO_ICON_STYLE = (
+  theme: Theme,
+  type: RadioInputType,
+  disabled: boolean
+): SerializedStyles => {
+  return {
+    default: css`
+      path {
+        stroke: ${theme.color.background.neutralAltActive};
+        fill: ${theme.color.background.neutralBase};
+      }
+      ${disabled
+        ? css`
+            cursor: default;
+            path {
+              stroke: ${theme.color.background.primaryDisabled};
+              fill: ${theme.color.background.neutralAlt};
+            }
+          `
+        : css`
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primary};
+              }
+            }
+          `}
+    `,
+    selected: css`
+      path {
+        stroke: ${theme.color.background.primary};
+        fill: ${theme.color.background.neutralBase};
+      }
+      rect {
+        fill: ${theme.color.background.primary};
+      }
+      ${disabled
+        ? css`
+            cursor: default;
+            path {
+              stroke: ${theme.color.background.primaryDisabled};
+              fill: ${theme.color.background.neutralAlt};
+            }
+            rect {
+              fill: ${theme.color.background.primaryDisabled};
+            }
+          `
+        : css`
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect {
+                fill: ${theme.color.background.primaryActive};
+              }
+            }
+          `}
+    `,
+  }[type];
+};
+
+export interface RadioInputProps {
+  className?: string;
+  // component: React.ElementType; // 불필요한 dom 중첩을 막기 위해 사용하지 않습니다.
+
+  /** 라디오 버튼의 선택 여부(Controlled) */
+  checked: boolean;
+  /** 라디오 버튼의 라벨 */
+  label?: string;
+  /** 라디오 버튼의 하단 마진(8px) 여부 */
+  spacer?: boolean;
+  /** 라디오 버튼의 비활성화 여부 */
+  disabled?: boolean;
+  /** 라디오 버튼 선택값 변경시 호출되는 함수 */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** HTML input 태그에 전달될 props */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=420-3704&t=lvpbJKdtz7Lb8wIQ-0)
+ */
+const RadioInput = React.forwardRef<any, RadioInputProps>((props, ref) => {
+  const {
+    className,
+    checked,
+    label,
+    spacer,
+    disabled,
+    onChange,
+    inputProps,
+    ...other
+  } = props;
+
+  if (!label) {
+    return <RadioButton {...props} ref={ref} />;
+  }
+
+  const radioProps = {
+    checked,
+    spacer,
+    disabled,
+    onChange,
+    inputProps,
+  };
+
+  return (
+    <Label className={className} ref={ref} {...other}>
+      <RadioButton {...radioProps} />
+      <span
+        css={css`
+          margin-left: 8px;
+        `}
+      >
+        {label}
+      </span>
+    </Label>
+  );
+});
+
+const RadioButton = React.forwardRef<any, RadioInputProps>((props, ref) => {
+  const {
+    className,
+    checked,
+    label,
+    spacer = false,
+    disabled = false,
+    onChange,
+    inputProps,
+    ...other
+  } = props;
+  const type: RadioInputType = props.checked ? "selected" : "default";
+
+  return (
+    <RadioButtonContainer
+      className={className}
+      spacer={spacer}
+      ref={ref}
+      {...other}
+    >
+      <StyledInput
+        type="radio"
+        {...inputProps}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+      />
+      <RadioButtonIcon type={type} disabled={disabled} />
+    </RadioButtonContainer>
+  );
+});
+
+const Label = styled.label`
+  display: flex;
+  position: relative;
+  width: fit-content;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  align-self: center;
+`;
+
+const RadioButtonContainer = styled.span<{
+  spacer: boolean;
+}>(
+  ({ spacer }) => css`
+    display: inline-flex;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    margin-bottom: ${spacer ? "8px" : "0"};
+  `
+);
+
+const StyledInput = styled.input`
+  cursor: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
+  z-index: ${ZINDEX.inputBase};
+`;
+
+// default와 selected 구조가 유사하여 하나의 컴포넌트로 표현합니다.
+const RadioButtonIcon = (props: {
+  type: RadioInputType;
+  disabled: boolean;
+}) => {
+  const theme = useTheme();
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      css={TYPE_TO_ICON_STYLE(theme, props.type, props.disabled)}
+    >
+      <path
+        d="M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z"
+        fill="currentColor"
+        stroke="currentColor"
+      />
+      {props.type === "selected" && (
+        <rect x="4" y="4" width="8" height="8" rx="4" fill="currentColor" />
+      )}
+    </svg>
+  );
+};
+
+export default RadioInput;