<form
        onSubmit={(event) => {
          event.preventDefault();
          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[]);
          }
        }}
      >

;<Tabs.List aria-label="select pallete type">
  {/* 팔레트의 타입마다 Tabs.Trigger를 만들어준다*/}
  {palleteTypes.map((value) => (
    <Tabs.Trigger key={value} value={value} className="bg-yellow-200" type="button">
      {value}
    </Tabs.Trigger>
  ))}
</Tabs.List>
{
  /* ["base", "deep"]*/
}
{
  /* 팔레트의 타입마다 Tabs.Content를 만들어준다*/
}
{
  palleteTypes.map((value) => (
    <Tabs.Content key={value} value={value}>
      <div id="pallete" className="flex flex-row flex-wrap">
        {/* 4번 - pallete도 값이 여러 개이므로 map을 사용한다. */}
        {allPallete[value].map(({ hex, colorName }, index) => (
          <Tooltip.Root>
            <Tooltip.Trigger asChild>
              <button
                type="button"
                key={index}
                onClick={() => addSelected(hex)}
                className="roundButton"
                style={{ backgroundColor: hex }}
              >
                {colorName}
              </button>
            </Tooltip.Trigger>
            <Tooltip.Content className="tooltip-content">
              {hex}
              <Tooltip.Arrow className="tooltip-arrow" width="20" height="10" />
            </Tooltip.Content>
          </Tooltip.Root>
        ))}
      </div>
    </Tabs.Content>
  ))
}

<p id="allColor">주보강 기입</p>
        <label className="color-label" htmlFor="main-color">
          주조색
        </label>
        <input
          id="color-selection"
          placeholder="주조색:"
          value={mainColor}
          // change event의 target인 textarea의 새로 변경된 값을
          // react의 mainColor 상태에 세팅
          // 값을 동기화해주는 거에요.
          // https://beta.reactjs.org/learn/reacting-to-input-with-state
          onChange={(event) => setMainColor(event.target.value)}
        />
        <label className="color-label" htmlFor="sub-color">
          보조색
        </label>
        <input
          id="color-selection"
          placeholder="보조색:"
          value={subColor}
          onChange={(event) => setSubColor(event.target.value)}
        />
        <label className="color-label" htmlFor="point-color">
          강조색
        </label>
        <input
          id="color-selection"
          placeholder="강조색:"
          value={pointColor}
          onChange={(event) => setPointColor(event.target.value)}
        />
        <label className="color-label" htmlFor="explanation" id="explanation">
          배색 설명
        </label>
        <textarea
          id="explanation"
          placeholder={"컨셉:\n주조색:\n보조색:\n강조색:\n배색 기법:"}
          value={explanation}
          onChange={(event) => setExplanation(event.target.value)}
        />
        <p id="allColor">주보강 기입</p>
        <label className="color-label" htmlFor="main-color">
          주조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="ju"
          placeholder="주조색:"
          value={mainColor}
          onChange={(event) => setMainColor(event.target.value)}
        />
        <label className="color-label" htmlFor="sub-color">
          보조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="bo"
          placeholder="보조색:"
          value={subColor}
          onChange={(event) => setSubColor(event.target.value)}
        />
        <label className="color-label" htmlFor="point-color">
          강조색
        </label>
        <input
          id="color-selection"
          type="text"
          name="gang"
          placeholder="강조색:"
          value={pointColor}
          onChange={(event) => setPointColor(event.target.value)}
        />
        <label className="color-label" htmlFor="explanation" id="explanation">
          배색 설명
        </label>
        <textarea
          id="explanation"
          name="answer"
          placeholder={"컨셉:\n주조색:\n보조색:\n강조색:\n배색 기법:"}
          value={explanation}
          onChange={(event) => setExplanation(event.target.value)}
        />

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[])
}

type MyColors = {
  jubogang: {
    ju: string
    bo: string
    gang: string
  }
  box: Array<{ color: string; width: number }>
  answer: string
}

const HOST = 'http://localhost:8000'

export function saveColors(data: MyColors[]) {
  return post('/colors', data)
}

function post<T>(path: string, data: T) {
  return fetch(HOST + path, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
}