배열 객체 형태

export const questionList = [
  {
    page: 1,
    question: '축사를 할 사람의\\n이름을 알려 주세요.',
    type: 'input',
    options: '이름을 작성해주세요.',
  },
  {
    page: 2,
    question: '축사를 받을 사람의\\n이름을 알려 주세요.',
    type: 'input',
    options: '이름을 작성해주세요.',
  },
  {
    page: 3,
    question: '축사를 받을 사람은\\n신랑인가요, 신부인가요?',
    type: 'image-card-button',
    options: ['신랑', '신부'],
  },
  {
    page: 4,
    question: '축사를 받는 사람을\\n뭐라고 부르면 좋을까요?',
    type: 'image-button',
    options: ['친구', '오빠', '언니', '동생', '형', '누나', '기타'],
  },
  {
    page: 5,
    question: '축사를 몇 분으로\\n하면 좋을까요?',
    type: 'primary-button',
    options: ['2분', '3분', '4분', '5분', '6분'],
  },
  {
    page: 6,
    question: '축사 말투는\\n어떻게 할까요?',
    type: 'primary-button',
    options: ['반말', '존댓말'],
  },
  {
    page: 7,
    question: '축사의 컨셉은\\n무엇인가요?',
    type: 'primary-button',
    options: ['감동', '행복', '재치', '차분', '눈물'],
  },
  {
    page: 8,
    question: '축사 중간에 들어갈 재밌는\\n에피소드가 있다면 알려 주세요.',
    type: 'textarea',
    options: 'ex. 오빠는 나에게 신부 언니와의 연애\\n고민 상담했다. (최대 500자)',
  },
  {
    page: 9,
    question: '축사에서 마지막으로 하고\\n싶은 말이 있다면 알려 주세요.',
    type: 'textarea',
    options: 'ex. 행복하게 잘 살아라! (최대 500자)',
  },
];

import Input from 'components/Input';
import ImageCardButton from 'components/Button/ImageCardButton';
import ImageButton from 'components/Button/ImageButton';
import PrimaryButton from 'components/Button/PrimaryButton';
import Textarea from 'components/Textarea';

type Props = {
  type: string;
  options: string | string[];
};

const SelectComponent = ({ type, options }: Props => {
  switch (type) {
    case 'input':
      return <Input placeholder={options} />;
    case 'image-card-button':
      return <ImageCardButton options={options} />;
    case 'image-button':
      return <ImageButton options={options} />;
    case 'primary-button':
      return <PrimaryButton options={options} />;
    case 'textarea':
      return <Textarea placeholder={options} />;
    default:
      return null;
  }
};

export default SelectComponent;

type Props = {
  placeholder: string;
};

const Input = ({ placeholder }: Props) => {
  return (
    <input
      className="text-gray600 h-11 w-[327px] rounded-[5px] bg-gray100 p-4 font-Pretendard text-[17px] font-medium placeholder-gray300 caret-indigo outline-indigo"
      placeholder={placeholder}
      maxLength={10}
    ></input>
  );
};

export default Input;

input에는 string으로했는데 selectComponent에는 배열 혹은 문자열이 올수있다고 지정해놔서 에러가남 반대로 input에다가 string | string[]을 해도 input jsx 형태 자체가 배열이 올수없는 형태라 에러가 남.

엄청난 삽질 후 제네릭도 시도해보고 인터페이스랑 섞어서도 해봤지만 실패

결론은 타입 단언으로 해결

import Input from 'components/Input';
import ImageCardButton from 'components/Button/ImageCardButton';
import ImageButton from 'components/Button/ImageButton';
import PrimaryButton from 'components/Button/PrimaryButton';
import Textarea from 'components/Textarea';

type Props = {
  type: string;
  options: string | string[];
};

const SelectComponent = ({ type, options }: Props): React.ReactNode => {
  switch (type) {
    case 'input':
      return <Input placeholder={options as string} />;
    case 'image-card-button':
      return <ImageCardButton options={options as string[]} />;
    case 'image-button':
      return <ImageButton options={options as string[]} />;
    case 'primary-button':
      return <PrimaryButton options={options as string[]} />;
    case 'textarea':
      return <Textarea placeholder={options as string} />;
    default:
      return null;
  }
};

export default SelectComponent;

해당 컴포넌트에는 무조건 이 타입이 들어간다고 선언해주는 것