checkbox를 이용한 color 선택 구현

OwlSuri·2022년 5월 21일
0

프로젝트를 생성하면서 메인 색상으로 쓸 색을 사용자가 고르도록 하는 팔레트를 만들었다.

  • 색상을 map으로 뿌려준 후 한개만 선택
  • 선택이 되었을때는 선택 되었다는 표시
  • 선택된 색상을 string으로 받을 value 필요
  • 라이브러리 사용하지 않고 구현하고 싶음

UI는 디자이너님이 만들어주신 figma 그대로 아래와 같이 구현하였다.

구현방법

  1. state값 선언
    메인컴포넌트에서 useState로 선언한다.

    projectNew.container.tsx

const [color, setColor] = useState()
  1. 메인이 되는 presenter에서 props로 받은 변수를 colorPick.tsx 컴포넌트로 내려주기

    projectNew.presenter.tsx

<ColorPick 
	color={props.color} setColor={props.setColor}/>
  1. 팔레트 체크박스 만들기

    • 체크박스는 숨김
    • setColor에 선택된 색상의 value값 담기
    • 이 value를 backgroundColor의 값으로 넣을 것!
    • 체크된 것(checked:true)과 체크된 값(value)으로 상태를 변경하기

    colorPick.tsx

import { useState } from 'react'
import * as S from './colorPick.styles'

export default function ColorPick(props){
    const [isSelect, setIsSelect] = useState([
        { key: "0", value:"#FF8B8B", checked: false},
        { key: "1", value:"#FFCA8B", checked: false},
        { key: "2", value:"#FFEC8B", checked: false},
        { key: "3", value:"#D3FF8B", checked: false},
        { key: "4", value:"#9BFF8B", checked: false},
        { key: "5", value:"#8BFFCE", checked: false},
        { key: "6", value:"#8BFFFF", checked: false},
        { key: "7", value:"#8BB2FF", checked: false},
        { key: "8", value:"#8B90FF", checked: false},
        { key: "9", value:"#D38BFF", checked: false},
        { key: "10", value:"#FD8BFF", checked: false},
        { key: "11", value:"#FF8BB5", checked: false},
    ])

    const onChangeCheck = (el) => (event) => {
        const temp = isSelect.map((el, idx) =>{
            return { ...el, checked: idx === Number(event?.target.id)}
        })
        setIsSelect(temp)
        props.setColor(el.value)
    }

    return(
        <S.Wrapper>
        {isSelect.map((el, idx)=>(
            <label className='checkbox' key={el.key}>
                <input type="checkbox" key={el.key}
                    id={idx}
                    onChange={onChangeCheck(el)}
                    checked={Boolean(el.checked)}
                />
                <S.Circle className='checkbox_color' style={{ backgroundColor: el.value }}></S.Circle>
            </label>
        ))}        
        </S.Wrapper>
        )
}
  • 선택할 값들을 JSON 형식으로 만들기
  • checked의 초기값은 false로 두고, event가 발생했을때 그 idx값을 받아서 checked를 활성화하는 temp를 만든다.
  • checked가 활성화된 그 object(temp)의 value를 setColor에 담아 color값을 바꾼다.

여기서 console에 props.color를 찍어보면 선택한 색상 값이 찍히는 것을 확인할 수 있다.

스타일 변경

colorPick.styles.ts

import styled from "@emotion/styled";

export const Wrapper=styled.div`
    display: flex;
    
    /* 체크박스 인풋 숨김 */
    .checkbox input {
        display: none;
    }
    
	/* 원 사이 간격 */
    .checkbox {
        margin-right: 2.5rem;
    }

    /* 체크 되었을때 */
    .checkbox input:checked + .checkbox_color {
     border: 3px solid #FFFFFF;
     box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, .12);;
   }

`

export const Circle=styled.div`
    width: 4.8rem; 
    height:4.8rem;
    border-radius: 3rem;
`

선택된 색깔에 border와 shadow를 주었다.

잘 모르겠어서 검색하고 질문하면서 구현한 결과 잘 잘동한다!!!
하지만, HOF에 대한 공부는 더 필요할 것 같다....!!

profile
기억이 안되면, 기록을 -

0개의 댓글