[React] Color Picker 그라데이션 칩 만들기 (No Library)

완성 결과물

완성 캡쳐

결과물 GIF

1.기본 & 커스텀 모드를 선택할 수 있다.

2. 커스텀 모드일 경우 1번 색상과 2번 색상을 지정해 그라이데션을 설정할 수 있다.

 

 

3. 색상 설청창 외부 클릭시 닫힌다.

설계 및 주요 함수

위 결과물은 별도 라이브러리를 사용하지 않았다.

 

input 태그에서 type="color"로 지정하면 색상 그라데이션을 설정할 수 있다.

            <BtnColor1>
              {defaultSetting ? null : (
                <input
                  id="style1"
                  type="color"
                  defaultValue={color1}
                  onChange={(e) => setColor1(e.target.value)}
                />
              )}
            </BtnColor1>

input 태그는 색상을 HEX 코드로만 인식할 수 있기 때문에 아래 단계를 거쳤다.

 

1) 2가지 색상을 HEX 코드 입력

2) 2가지 색상을 RGB 코드로 변환 후 중간 값들을 계산

3) 결과 값들을 HEX 코드로 반환

 

 

RGB → HEX 변환 함수

const rgbToHex = (r, g, b) => {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length === 1) r = "0" + r;
  if (g.length === 1) g = "0" + g;
  if (b.length === 1) b = "0" + b;

  return "#" + r + g + b;
};

 

HEX → RGB 변환 함수

const hexToRgb = (hex, alpha) => {
  let r = parseInt(hex.slice(1, 3), 16),
    g = parseInt(hex.slice(3, 5), 16),
    b = parseInt(hex.slice(5, 7), 16);

  /* Original Code */
  // if (0 <= alpha && alpha <= 1) {
  //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  // } else {
  //   return `rgb(${r}, ${g}, ${b})`;
  // }
  if (0 <= alpha && alpha <= 1) {
    return [r, g, b, alpha];
  } else {
    return [r, g, b];
  }
};

 

Generate Gradient Color 함수

※ n = 생성할 컬러칩 개수

 

1, 2번째 선택한 색상(HEX)를 RGB로 변환, 중간 값들을 n개의 수만큼 비율로 계산 후 Return한다.

const gradientPalette = (color1, color2, n) => {
  // HEX 코드를 → RGB 변환
  const rgbColor1 = hexToRgb(color1);
  const rgbColor2 = hexToRgb(color2);
  // 1번째로 선택한 색상 추가
  const result = [color1];
  // 1번과 2번 색상의 RGB값을 n개만큼 비율로 나누어 계산하여 추가
  for (let i = 1; i < n - 1; i++) {
    const midValue = [];
    for (let j = 0; j < 3; j++) {
      if (rgbColor1[j] > rgbColor2[j]) {
        midValue.push(
          rgbColor1[j] -
            parseInt(Math.abs(rgbColor1[j] - rgbColor2[j]) / (n - 1)) * i
        );
      } else if (rgbColor1[j] === rgbColor2[j]) {
        midValue.push(rgbColor1[j]);
      } else if (rgbColor1[j] < rgbColor2[j]) {
        midValue.push(
          rgbColor1[j] +
            parseInt(Math.abs(rgbColor1[j] - rgbColor2[j]) / (n - 1)) * i
        );
      }
    }
    result.push(rgbToHex(midValue[0], midValue[1], midValue[2]));
  }
  // 마지막으로 끝에 2번째로 선택한 색상 추가
  result.push(color2);
  return result;
};

 

외부 DOM 클릭시 닫힘

색상설정 창 이외의 dom을 클릭했을 경우 색상설정창이 닫힌다.

  useEffect(() => {
    setColorPalette(gradientPalette(color1, color2, colorChipCount));

    // NOTE Dropdwon 박스 바깥쪽을 클릭시 옵션이 사라지는 기능
    function handleClickOutside(event) {
      if (
        colorPickRef.current &&
        !colorPickRef.current.contains(event.target)
      ) {
        // dom 바깥 클릭시 닫힘 상태 설정
        setTimeout(function () {
          setColorPickOpen(false);
        }, 100);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [color1, color2, colorPickRef]);

※ setTimeout을 사용한 이유 

dom 바깥(노란색 영역을 제외한 영역)을 클릭하면 false를 설정했는데 "색상설정" 버튼을 클릭시 onClick보다 먼저 동작하여 colorPickOpen이 false로 전환, 이어서 onClick 함수가 작동하며 다시 True로 상태가 색상설정 창이 무한으로 켜져있는 현상이 발생하여 이를 해결하고자 setTimeout을 사용했다.

<BtnButton type="button" onClick={() => setColorPickOpen(true)}>

전체 코드

import React, { useEffect, useState, useRef } from "react";
import styled from "styled-components";

const BtnButton = styled.button`
  position: relative;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 200px;
  align-items: center;
  border: 1px solid #11233f;
  border-radius: 10px;
  position: absolute;
  background-color: #ffffff;
  font-size: 14px;
  .flexColumnCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
`;

const Title = styled.div`
  width: 100%;
  height: 35px;
  background-color: #11233f;
  color: #ffffff;
  border-radius: 10px 10px 0px 0px;
`;

const OptionContainer = styled.div`
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  gap: 20px;
  .active {
    background-color: #11233f;
    background: #11233f;
    color: #eeeeee;
  }
  .nonActive {
    background-color: #e5e5e5;
  }
`;
const BtnOption = styled.div`
  width: 90px;
  height: 35px;
  border-radius: 5px;
  cursor: pointer;
`;

const ColorContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 35px;
    height: 36px;
    border: none;
  }
  // -webkit- : 크롬, 사파리 , 오페라
  // -moz- : firefox
  input::-webkit-color-swatch {
    border-radius: 50%;
    border: none;
  }
  input::-moz-color-swatch {
    border-radius: 50%;
    border: none;
  }
`;

const BtnColor1 = styled.div`
  input {
    cursor: pointer;
  }
`;
const BtnColor2 = styled.div`
  input {
    cursor: pointer;
  }
`;

const ColorChip = styled.div`
  width: 30px;
  height: 30px;
`;
const BtnSubmit = styled.div`
  width: 50px;
  height: 35px;
  color: #ffffff;
  font-size: 14px;
  background-color: #11233f;
  border-radius: 10px;
  cursor: pointer;
`;

/* NOTE - 원리
  input은 hex 코드만 인식할 수 있다.
  hex코드를 입력 받으면 rgb로 변환 후 useState에 저장 
  → 선택된 2개의 색상을 gradientPalette 함수에 넣는다.
  → 함수에서 중간 컬러 RGB 값들을 계산
  → 계산된 중간 값들을 useState colorPalette에 리스트로 저장하고 순차적으로 표출
*/

// RGB → HEX 함수
const rgbToHex = (r, g, b) => {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  if (r.length === 1) r = "0" + r;
  if (g.length === 1) g = "0" + g;
  if (b.length === 1) b = "0" + b;

  return "#" + r + g + b;
};

// HEX → RGB 함수
const hexToRgb = (hex, alpha) => {
  let r = parseInt(hex.slice(1, 3), 16),
    g = parseInt(hex.slice(3, 5), 16),
    b = parseInt(hex.slice(5, 7), 16);

  /* Original Code */
  // if (0 <= alpha && alpha <= 1) {
  //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  // } else {
  //   return `rgb(${r}, ${g}, ${b})`;
  // }
  if (0 <= alpha && alpha <= 1) {
    return [r, g, b, alpha];
  } else {
    return [r, g, b];
  }
};

// Generate Gradient Color 함수 (n = 생성할 컬러칩 개수)
// 과정 : HEX 코드를 입력 → RGB값으로 연산 → HEX 코드 return
const gradientPalette = (color1, color2, n) => {
  // HEX 코드를 → RGB 변환
  const rgbColor1 = hexToRgb(color1);
  const rgbColor2 = hexToRgb(color2);
  // 1번 선택한 색상 추가
  const result = [color1];
  // 1번과 2번 색상의 RGB값을 n개만큼 비율로 나누어 계산하여 추가
  for (let i = 1; i < n - 1; i++) {
    const midValue = [];
    for (let j = 0; j < 3; j++) {
      if (rgbColor1[j] > rgbColor2[j]) {
        midValue.push(
          rgbColor1[j] -
            parseInt(Math.abs(rgbColor1[j] - rgbColor2[j]) / (n - 1)) * i
        );
      } else if (rgbColor1[j] === rgbColor2[j]) {
        midValue.push(rgbColor1[j]);
      } else if (rgbColor1[j] < rgbColor2[j]) {
        midValue.push(
          rgbColor1[j] +
            parseInt(Math.abs(rgbColor1[j] - rgbColor2[j]) / (n - 1)) * i
        );
      }
    }
    result.push(rgbToHex(midValue[0], midValue[1], midValue[2]));
  }
  // 마지막으로 끝에 2번 선택한 색상 추가
  result.push(color2);
  return result;
};

export const ColorPicker = () => {
  const [defaultSetting, setDefaultSetting] = useState(true); // #c2c2c2
  const [colorPickOpen, setColorPickOpen] = useState(false);
  const [color1, setColor1] = useState("#f0f8ff"); // #c2c2c2
  const [color2, setColor2] = useState("#4f76d9"); // #c2c2c2
  const [defaultColorPalette, setDefaultColorPalette] = useState([]);
  const [colorPalette, setColorPalette] = useState([]);

  const colorPickRef = useRef();

  // 초기값
  const defaultColor1 = "#f0f8ff";
  const defaultColor2 = "#4f76d9";
  const colorChipCount = 7;

  const handleDefault = () => {
    setDefaultSetting(true);
  };

  const handleCustom = () => {
    setColorPalette(gradientPalette(color1, color2, colorChipCount));
    setDefaultSetting(false);
  };

  const handleSaveColor = () => {
    setColorPickOpen(false);
  };

  // 초기 랜더링시 defaultColorPalette 색상 저장
  useEffect(() => {
    setDefaultColorPalette(
      gradientPalette(defaultColor1, defaultColor2, colorChipCount)
    );
  }, []);

  useEffect(() => {
    setColorPalette(gradientPalette(color1, color2, colorChipCount));

    // NOTE Dropdwon 박스 바깥쪽을 클릭시 옵션이 사라지는 기능
    function handleClickOutside(event) {
      if (
        colorPickRef.current &&
        !colorPickRef.current.contains(event.target)
      ) {
        // dom 바깥 클릭시 닫힘 상태 설정
        setTimeout(function () {
          setColorPickOpen(false);
        }, 100);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [color1, color2, colorPickRef]);

  return (
    <>
      <BtnButton type="button" onClick={() => setColorPickOpen(true)}>
        색상 설정
      </BtnButton>
      {colorPickOpen && (
        <Container ref={colorPickRef}>
          <Title className="flexColumnCenter">색상 설정</Title>
          <OptionContainer>
            <BtnOption
              className={` ${"flexColumnCenter"} ${
                defaultSetting ? "active" : "nonActive"
              }`}
              onClick={() => handleDefault()}
            >
              기본 설정
            </BtnOption>
            <BtnOption
              className={`  ${"flexColumnCenter"} ${
                defaultSetting ? "nonActive" : "active"
              }`}
              onClick={() => handleCustom()}
            >
              사용자 설정
            </BtnOption>
          </OptionContainer>
          <ColorContainer>
            <BtnColor1>
              {defaultSetting ? null : (
                <input
                  id="style1"
                  type="color"
                  defaultValue={color1}
                  onChange={(e) => setColor1(e.target.value)}
                />
              )}
            </BtnColor1>

            {defaultSetting
              ? defaultColorPalette.map((color) => (
                  <ColorChip
                    key={color}
                    style={{
                      backgroundColor: color,
                    }}
                  />
                ))
              : colorPalette.map((color) => (
                  <ColorChip
                    key={color}
                    style={{
                      backgroundColor: color,
                    }}
                  />
                ))}
            <BtnColor2>
              {defaultSetting ? null : (
                <input
                  id="style2"
                  type="color"
                  defaultValue={color2}
                  onChange={(e) => setColor2(e.target.value)}
                />
              )}
            </BtnColor2>
          </ColorContainer>
          <BtnSubmit className="flexColumnCenter" onClick={handleSaveColor}>
            확인
          </BtnSubmit>
        </Container>
      )}
    </>
  );
};

 

참고 자료

https://ccusean.tistory.com/entry/JavaScript-%EC%83%89%EC%83%81%EA%B0%92-%EB%B3%80%EA%B2%BD-hex-rgb-rgba

JavaScript 색상값 변경 (hex -> rgb, rgba)