1. 프로젝트 생성

• react 프로젝트 생성 : npx create-react-app 04_TODOLIST

2. 배경색 설정

2-1) App.js

// App.js
import Color from './Components/Color.js';
import { useState } from 'react';
import AppStyle from './Css/App.module.css';

function App(){
  // color의 기본값을 #fff로 설정 
  const [bgColor, setBgColor] = useState('#fff');
  return(
    <>
      <div className={AppStyle.container} style={{backgroundColor: `${bgColor}`}}>
        <Color setBgColor={setBgColor} />
      </div>
    </>
  )
};
export default App;

2-2) Color.js

// Color.js
import colorStyle from '../Css/Color.module.css';

function Color({bgColor, setBgColor}){
  return(
    <>
      <div className={colorStyle.container}>
        <button 
          type='button'
          className={`${colorStyle.button} ${colorStyle.beigeBtn}`}
          onClick={() => {
            setBgColor('#f2eee5');
          }}
        />
        <button 
          type='button'
          className={`${colorStyle.button} ${colorStyle.pinkBtn}`}
          onClick={() => {
            setBgColor('#eeafaf');
          }}
        />
        <button 
          type='button'
          className={`${colorStyle.button} ${colorStyle.blueBtn}`}
          onClick={() => {
            setBgColor('#afc4e7');
          }}
        />
        <button 
          type='button'
          className={`${colorStyle.button} ${colorStyle.greenBtn}`}
          onClick={() => {
            setBgColor('#bae7af');
          }}
        />
        <button 
          type='button'
          className={`${colorStyle.button} ${colorStyle.grayBtn}`}
          onClick={() => {
            setBgColor('#d3c0d3');
          }}
        />
      </div>
    </>
  )
}
export default Color;

2-3) CSS

// App.module.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 90vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #eee;
}

// Color.module.css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 100px;
}
.button {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border: none;
  border-radius: 50%;
  outline: none;
}
.button:hover {
  cursor: pointer;
}

.beigeBtn {
  background-color: #f2eee5;
}
.pinkBtn {
  background-color: #eeafaf;
}
.blueBtn {
  background-color: #afc4e7;
}
.greenBtn {
  background-color: #bae7af;
}
.grayBtn {
  background-color: #d3c0d3;
}

3. 결과