//9번 - 기본 텍스트를 넣어주기 위해 기본 텍스트를 상태로 만들어준다.
const [mainColor, setMainColor] = React.useState('주조색:')

const [subColor, setSubColor] = React.useState('보조색:')

const [pointColor, setPointColor] = React.useState('강조색:')

const [explanation, setExplanation] = React.useState('컨셉:\n주조색:\n보조색:\n강조색:\n배색 기법:')

const rawData = new FormData(event.target as HTMLFormElement)

const colors = rawData.get('colors')

if (colors !== null) {
  // 전처리, preprocess
  const data = [
    {
      jubogang: {
        ju: rawData.get('ju'),
        bo: rawData.get('bo'),
        gang: rawData.get('gang'),
      },
      box: JSON.parse(colors as string),
      answer: rawData.get('answer'),
    },
  ]
  saveColors(data as MyColors[])
}

<input
  id="color-selection"
  placeholder="주조색:"
  value={mainColor}
  onChange={(event) => setMainColor(event.target.value)}
/>

    <form
        onSubmit={(event) => {
          event.preventDefault();
          const formData = new FormData(event.target as HTMLFormElement);

          const colors = formData.get("colors");
          const rawData = {
            box: JSON.parse(colors as string),
            ju: formData.getAll("ju"),
            bo: formData.getAll("bo"),
            gang: formData.getAll("gang"),
            answer: formData.getAll("answer"),
          };

          if (colors !== null) {
            // 전처리, preprocess
            const data = [
              //첫번째 선택칸은 0부터 9까지의 값을 잘라 가지고, 설명은 총 2개이므로 첫번째 값들만 가진다.
              {
                box: rawData.box.slice(0, 10),
                jubogang: {
                  ju: rawData.ju[0],
                  bo: rawData.bo[0],
                  gang: rawData.gang[0],
                },
                answer: rawData.answer[0],
              },
              //두번째 선택칸은 10부터 19까지의 값을 잘라 가지고, 설명의 2번째 값들을 가진다.
              {
                box: rawData.box.slice(10, 20),
                jubogang: {
                  ju: rawData.ju[1],
                  bo: rawData.bo[1],
                  gang: rawData.gang[1],
                },
                answer: rawData.answer[1],
              },
            ];
            alert(JSON.stringify(data));
            // saveColors(data as MyColors[]);
          }
        }}
      >

        <label className="color-label" htmlFor="main-color">
          주조색
        </label>
        <input
          id="color-selection"
          placeholder="주조색:"
          type="text"
          name="ju"
        />
        <label className="color-label" htmlFor="sub-color">
          보조색
        </label>
        <input
          id="color-selection"
          placeholder="보조색:"
          type="text"
          name="bo"
        />
        <label className="color-label" htmlFor="point-color">
          강조색
        </label>
        <input
          id="color-selection"
          placeholder="강조색:"
          type="text"
          name="gang"
        />
        <label className="color-label" htmlFor="explanation" id="explanation">
          배색 설명
        </label>
        <textarea
          id="explanation"
          name="answer"
          placeholder={"컨셉:\n주조색:\n보조색:\n강조색:\n배색 기법:"}
        />
        <p id="allColor">주보강 기입</p>
        <label className="color-label" htmlFor="main-color">
          주조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="ju"
          placeholder="주조색:"
        />
        <label className="color-label" htmlFor="sub-color">
          보조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="bo"
          placeholder="보조색:"
        />
        <label className="color-label" htmlFor="point-color">
          강조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="gang"
          placeholder="강조색:"
        />
        <label className="color-label" htmlFor="explanation" id="explanation">
          배색 설명
        </label>
        <textarea
          id="explanation"
          name="answer"
          placeholder={"컨셉:\n주조색:\n보조색:\n강조색:\n배색 기법:"}
        />