프로젝트를 생성하면서 메인 색상으로 쓸 색을 사용자가 고르도록 하는 팔레트를 만들었다.
- 색상을 map으로 뿌려준 후 한개만 선택
- 선택이 되었을때는 선택 되었다는 표시
- 선택된 색상을 string으로 받을 value 필요
- 라이브러리 사용하지 않고 구현하고 싶음
UI는 디자이너님이 만들어주신 figma 그대로 아래와 같이 구현하였다.
state값 선언
메인컴포넌트에서 useState로 선언한다.
projectNew.container.tsx
const [color, setColor] = useState()
메인이 되는 presenter에서 props로 받은 변수를 colorPick.tsx 컴포넌트로 내려주기
projectNew.presenter.tsx
<ColorPick
color={props.color} setColor={props.setColor}/>
팔레트 체크박스 만들기
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>
)
}
여기서 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에 대한 공부는 더 필요할 것 같다....!!