ColorBox도 마찬가지로 ColorContext.Consumer를 ColorConsumer로 변경하세요. 또한, 사용할 value의 형태도 바뀌었으니 이에 따른 변화를 다음과 같이 반영시켜 보세요.

components/ColorBox.js

import React from 'react';
import { ColorConsumer } from '../contexts/color';
 
const ColorBox = () => {
  return (
    <ColorConsumer>
      {value => (
        <>
          <div
            style={{
              width: '64px',
              height: '64px',
              background: value.state.color
            }}
          />
          <div
            style={{
              width: '32px',
              height: '32px',
              background: value.state.subcolor
            }}
          />
        </>
      )}
    </ColorConsumer>
  );
};
 
export default ColorBox;

---