<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />

const WHITE_HEX = '#ffffff'
const pallete = [
  '#e6e6e6',
  '#d2b48c',
  '#800000',
  '#7e181e',
  '#29f9ff',
  '#a8a8f8',
  '#5050f1',
  '#ffb3ba',
  '#ccff00',
  '#ff7f50',
  '#fa8072',
  '#bada55',
]

;<div id="pallete" className="flex flex-row flex-wrap">
  {/* 4번 - pallete도 값이 여러 개이므로 map을 사용한다. */}
  {pallete.map((hex) => (
    <button
      onClick={() => addSelected(hex)}
      className="roundButton"
      style={{ backgroundColor: hex }}
    >
      {hex}
    </button>
  ))}
</div>

Scenario: 선택된 색깔 목록이 박스에 보인다

# Given - before, 주어진 상황

Given 선택된 색깔들로 문제를 렌더하고

# When - 사용자의 동작 (클릭, 키보드, 스크롤, 탭, 지우기, 복붙)

# Then - after, 결과

Then 선택된 색깔 목록이 보인다

const colors = ['red', 'green', 'blue']

{
  colors.map((color) => (
    <td
      style={{
        backgroundColor: color,
      }}
    >
      {color}
    </td>
  ))
}

<td
    style={{
            backgroundColor: color,
          }}
 >

function App() {
  //1번- 선택된 색이 여러개인 배열을 만든다
  const colors = ['red', 'green', 'blue']
  return (
    <div className="App">
      <article>
        <table className="selectedContainer flex flex-row">
          <tr>
            {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
            {colors.map((color) => (
              <td
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
              </td>
            ))}
          </tr>
        </table>
        <div id="pallete" className="flex flex-row flex-wrap"></div>
      </article>
    </div>
  )
}

function App() {
  //선택된 색이 여러개인 배열을 만든다 - BOX_COUNT 개인 배열을 만들어서 흰색으로 채운다
  const [colors, setColors] = React.useState(Array(BOX_COUNT).fill(WHITE_HEX)) //문자열
  //addSelected 함수를 만들어
  function addSelected(hex: string) {
    setColors((old) => {
      // findIndex는 배열의 값 중에서 조건에 맞는 값이 있는 첫 번째 index를 찾는다!
      // hex 중에서 hex의 색이 white인 첫번째 index를 찾아낸다.
      const firstWhiteIndex = old.findIndex((hex) => hex === WHITE_HEX)
      if (firstWhiteIndex === -1) {
        // 인덱스를 못 찾으면! -1을 반환
        return old // 원래 colors를 그대로 반환... 더 채울 하얀칸이 없으므로!
      }
      // 이미 바뀐 색은 old대로 놔두고
      const copy = [...old]
      // 찾아낸 첫 번째 인덱스에 hex값을 넣는다.
      copy[firstWhiteIndex] = hex
      return copy // newState !!!
    })
  }
  return (
    <div className="App">
      <article>
        <table className="selectedContainer flex flex-row">
          {/* map을 써서 배열의 값을 화면에 뿌려준다. */}
          <tr>
            {colors.map((color) => (
              //스타일에 map으로 받아온 color 문자열 값을 backgroundColor로 지정해준다.
              <td
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
                {/* text node */}
              </td>
            ))}
          </tr>
        </table>
        <div id="pallete" className="flex flex-row flex-wrap">
          {/* pallete도 값이 여러 개이므로 map을 사용한다. */}
          {pallete.map((hex) => (
            <button
              onClick={() => addSelected(hex)}
              className="roundButton"
              style={{ backgroundColor: hex }}
            >
              {hex}
            </button>
          ))}
        </div>
      </article>
    </div>
  )
}

Scenario: 박스의 칸을 클릭하면 선택한 칸이 흰색으로 변한다
Given 선택된 색깔들로 문제를 렌더하고
When 박스의 칸을 클릭하면
Then 선택한 칸이 흰색으로 변한다

function deleteSelected(targetIndex: number) {
  setColors((old) => {
    const copy = [...old]
    // targetIndex의 값을 흰색 헥스를 넣는다.
    copy[targetIndex] = WHITE_HEX
    return copy // newState !!!
  })
}

Scenario: 주보강에 값을 입력할 수 있다
Given 비어있는 칸을 렌더하고
When 값을 입력하면
Then 값이 입력된다

const [colors, setColors] = React.useState(Array(BOX_COUNT).fill(WHITE_HEX)) // 문자열

function addSelected(hex: string) {
  setColors((old) => {
    // findIndex는 배열의 값 중에서 조건에 맞는 값이 있는 첫 번째 index를 찾는다!
    // hex 중에서 hex의 색이 white인 첫번째 index를 찾아낸다.
    const firstWhiteIndex = old.findIndex((hex) => hex === WHITE_HEX)
    if (firstWhiteIndex === -1) {
      // 인덱스를 못 찾으면! -1을 반환
      return old // 원래 colors를 그대로 반환... 더 채울 하얀칸이 없으므로!
    }
    // 이미 바뀐 색은 old대로 놔두고
    const copy = [...old]
    // 찾아낸 첫 번째 인덱스에 hex값을 넣는다.
    copy[firstWhiteIndex] = hex
    return copy // newState !!!
  })
}