import * as React from 'react'
import './Nav.css'

//Drawer을 여는 오픈 버튼을 따로 만들어줍니다.
//저는 이미지를 쓸 거라 label사이에 img를 넣어주었어요.
export function DrawerOpenButton() {
  return (
    <label role="button" htmlFor="my-drawer" className="drawer-button">
      <img src="src/img/icons8-menu.svg"></img>
    </label>
  )
}

//여기 Drawer()안에 들어있는 {children}이
//Drawer을 열었을 때 들어갈 내용들입니다.
function Drawer({ children }) {
  return (
    <div className="drawer">
      <input id="my-drawer" type="checkbox" className="drawer-toggle" />
      {/* drawer-content안에 children을 넣으면 된다. */}
      <div className="drawer-content">{children}</div>
      <div className="drawer-side">
        <label htmlFor="my-drawer" className="drawer-overlay"></label>

        <ul className="menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content mb-0">
          <li>
            <a>Sidebar Item 1</a>
          </li>
          <li>
            <a>Sidebar Item 2</a>
          </li>
        </ul>
      </div>
    </div>
  )
}

export default Drawer

import Drawer from './Drawer'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Drawer>
        <Nav />
        <Routes>
          <Route path="/" element={<TestForm />} />
          <Route path="/login/*" element={<Login />} />
          {/* 상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 */}
          <Route path="*" element={<Notfound />}></Route>
        </Routes>
      </Drawer>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

import React from 'react'
import * as Tabs from '@radix-ui/react-tabs'
import * as Tooltip from '@radix-ui/react-tooltip'
import allPallete from './pallete.json'

// ["base", "deep"]
const palleteTypes = Object.keys(allPallete)
const BOX_COUNT = 10
const WHITE_HEX = '#ffffff'

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

  //6번 - 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 !!!
    })
  }

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

  return (
    <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
      <input hidden type="text" name="colors" value={JSON.stringify(colors)} />
      <table className="selectedContainer flex flex-row">
        <tbody>
          {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
          {/* https://beta.reactjs.org/learn/rendering-lists */}
          <tr>
            {/* 7.2번 - targetIndex는 여기서 index를 받아온 값이다. */}
            {colors.map((color, index) => (
              // 3번 - 스타일에 map으로 받아온 color 문자열 값을 backgroundColor로 지정해준다.
              <td
                key={`${color}-${index}`}
                // 이게 선택한 칸의 index
                onClick={() => deleteSelected(index)}
                style={{
                  backgroundColor: color,
                }}
              >
                {color}
              </td>
            ))}
          </tr>
        </tbody>
      </table>
      <div id="pallete-box">
        <Tabs.Root defaultValue={Object.keys(allPallete)[0]} orientation="horizontal">
          <Tabs.List aria-label="select pallete type">
            {/* 팔레트의 타입마다 Tabs.Trigger를 만들어준다*/}
            {palleteTypes.map((value) => (
              <Tabs.Trigger key={value} value={value} className="bg-yellow-200">
                {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
                        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>
          ))}
        </Tabs.Root>
      </div>
    </Tooltip.Provider>
  )
}

export default Pallete