230202

input을 따로 컴포넌트를 만들었었는데

가독성이 떨어지는것 같아 조금 고민이다.

Input 컴포넌트 고작 이것뿐인데

const Input = ({ type, name, label, options }: { type: string; name: string; label: string; options: {} }) => {
  return (

    <Label htmlFor={name}>
      {label}
      <InputEl id={name} type={type} name={name} {...options} />
    </Label>
  );
};

너무 많은 prop때문에 더 복잡해진게 아닌가 싶기도 하고...

모달 컴포넌트가 너무나 더러워졌다... 근데 label과 input을 분리하지 않더라도 저렇게 복잡하게 attribute가 붙을텐데, 

 <ModalContainer>
      <CloseBar modalTitle={mode === 'edit' ? 'Edit a card' : 'Add a card'} />
      <Form onSubmit={submitHandler}>
        <Input
          type="text"
          name="title"
          label="제목"
          options={{ defaultValue: data?.item.title, placeholder: '제목을 입력해 주세요', required: true }}
        ></Input>
        <label htmlFor="status">상태</label>
        <select defaultValue={state ? state : ''} name="status" id="status" required>
          {stateSelect?.map((option) => (
            <option value={option} key={option}>
              {option}
            </option>
          ))}
        </select>
        <label htmlFor="content">내용</label>
        <Textarea name="content" defaultValue={data?.item.content} required />
        <Input
          type="datetime-local"
          name="endDate"
          label="마감일"
          options={{ min: new Date().toISOString().slice(0, -8), defaultValue: data?.item.endDate }}
        ></Input>
        <SearchManager defaultValue={data?.item.manager} />
        <ModalBtns>
          <Button color={'#a8edea'} type="submit">
            저장
          </Button>
          <Button color={'#fed6e3'} type="button" onClick={() => navigate('/')}>
            취소
          </Button>
        </ModalBtns>
      </Form>
    </ModalContainer>

우선 모달쪽 완성 후  수정을 좀 해야겠다