DOM Attribute Mapping

// 이건 문법 에러다 — class는 JS 예약어
const props = { class: "container" };

// 이건 괜찮다
const props = { className: "container" };

const camelToKebab = (str) => {
  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
};

camelToKebab("tabIndex");      // "tab-index"
camelToKebab("maxLength");     // "max-length"
camelToKebab("cellPadding");   // "cell-padding"
camelToKebab("autoComplete");  // "auto-complete"

const specialCases = {
  className: "class",          // JS 예약어 회피
  htmlFor: "for",              // JS 예약어 회피
  acceptCharset: "accept-charset",
  httpEquiv: "http-equiv",
};

const xmlSpecialCases = {
  xlinkActuate: "xlink:actuate",
  xlinkArcrole: "xlink:arcrole",
  xlinkHref: "xlink:href",
  xlinkRole: "xlink:role",
  xlinkShow: "xlink:show",
  xlinkTitle: "xlink:title",
  xlinkType: "xlink:type",
  xmlBase: "xml:base",
  xmlLang: "xml:lang",
  xmlSpace: "xml:space",
};

const camelToKebab = (str) => {
  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
};

const specialCases = {
  acceptCharset: "accept-charset",
  httpEquiv: "http-equiv",
  className: "class",
  htmlFor: "for",
  xlinkHref: "xlink:href",
  // ... 기타 특수 케이스
};

const convertAttribute = (attr) => {
  // 1. 특수 케이스면 매핑 테이블에서 바로 반환
  if (attr in specialCases) {
    return specialCases[attr];
  }

  // 2. 전부 소문자면 변환 불필요
  if (attr === attr.toLowerCase()) {
    return attr;
  }

  // 3. 나머지는 camelCase → kebab-case
  return camelToKebab(attr);
};

const attributes = [
  "accept", "acceptCharset", "accessKey", "action",
  "allowFullScreen", "alt", "async", "autoComplete",
  "autoFocus", "autoPlay", "capture", "cellPadding",
  "cellSpacing", "checked", "className", "colSpan",
  "cols", "content", "contentEditable", "controls",
  // ... 수백 개의 속성
];

const attributeMap = Object.fromEntries(
  attributes.map((attr) => [attr, convertAttribute(attr)])
);

{
  accept: "accept",
  acceptCharset: "accept-charset",
  accessKey: "access-key",
  allowFullScreen: "allow-full-screen",
  className: "class",
  htmlFor: "for",
  tabIndex: "tab-index",
  // ...
}

// 방법 1: setAttribute (HTML attribute)
element.setAttribute("class", "container");
element.setAttribute("tabindex", "0");

// 방법 2: 프로퍼티 직접 할당 (DOM property)
element.className = "container";
element.tabIndex = 0;

const setDOMAttribute = (element, name, value) => {
  const htmlName = attributeMap[name] || name;

  if (value === null || value === undefined || value === false) {
    element.removeAttribute(htmlName);
    return;
  }

  if (value === true) {
    element.setAttribute(htmlName, "");
    return;
  }

  element.setAttribute(htmlName, String(value));
};

// React JSX
<div style={{ backgroundColor: "red", fontSize: "16px", marginTop: "10px" }} />

// 실제 HTML
<div style="background-color: red; font-size: 16px; margin-top: 10px;" />

const styleObjectToString = (styleObj) => {
  return Object.entries(styleObj)
    .map(([key, value]) => `${camelToKebab(key)}: ${value}`)
    .join("; ");
};

// { backgroundColor: "red", fontSize: "16px" }
// → "background-color: red; font-size: 16px"

const applyStyle = (element, styleObj) => {
  Object.entries(styleObj).forEach(([key, value]) => {
    element.style[key] = value;
  });
};

// element.style.backgroundColor = "red" — 이건 그냥 동작한다

const isEventProp = (name) => name.startsWith("on");

const applyProps = (element, props) => {
  Object.entries(props).forEach(([name, value]) => {
    if (name === "children") return;

    if (name === "style") {
      applyStyle(element, value);
      return;
    }

    if (isEventProp(name)) {
      const eventName = name.slice(2).toLowerCase(); // onClick → click
      element.addEventListener(eventName, value);
      return;
    }

    // 일반 속성
    setDOMAttribute(element, name, value);
  });
};