11.06航海55日目TIL

// TabMenu.js
const TabMenu = ({ content }) => {
  const { contentItem, contentChange } = useTabs(0, content);

  return (
    <Wrapper>
      <div>
        {content.map((val, idx) => {
          return (
              <TabButton
                id={val.id}
                val={val}
                check={contentItem.id}  // contentItem.id를 props로 넘겨줌
                click={() => {
                  contentChange(idx);
                }}
              />
          );
        })}
      </div>
      <div>
        {contentItem.content}
      </div>
    </Wrapper>
  );
};

// TabButton.js
// check, id 두개로 현재 클릭 한 버튼 감시 
const TabButton = ({ val, id, check, click }) => {
  return (
    <BtnWrapper>
      <Button
        style={
          check === id
            ? { backgroundColor: '#141422' }
            : { backgroundColor: '#0f0a1a' }
        }
        type="button"
        onClick={click}
      >
        <p style={check === id ? { color: '#50FFB8' } : { color: '#a09bac' }}>
          {val.tab}
        </p>
      </Button>
    </BtnWrapper>
  );
};