기존에 만든 투표 컴포넌트를 토대로 진행했다.
항목마다 컬러가 지정되어 있고, 기본 2개 총 8개까지 추가가 가능하다.
항목 입력 Input과 돌림판 비율 Input 값이 필요하고, 항목 삭제가 가능하다.
항목 컬러는 color.js 파일에 rouletteTheme에 미리 지정을 해줬다.
color1 이런식으로 저장한 이유는 해당 index와 매핑시켜주려고 했다.
// theme/color.js
export const rouletteTheme = {
color1: '#7FE1FA', // 하늘
color2: '#FCE05C', // 노랑
color3: '#8AEBB3', // 연두
color4: '#FA6F73', // 빨강
color5: '#B48BEC', // 보라
color6: '#F684BB', // 핑크
color7: '#F7BD50', // 주황
color8: '#53BA7A', // 초록
deleteBtn: '#F2F2F2',
deleteBtnText: '#ACACAC',
};
그리고 items의 index에 따라 컬러값을 다음과 같이 고정시켜줬다.
// pages/creae-roulette.js
...
<CircleCheckBox
style={{
borderWidth: 0,
backgroundColor: rouletteTheme[`color${index + 1}`],
}}
/>
...
항목 삭제
// pages/creae-roulette.js
...
const handleDeleteItem = (itemIndex) => {
if (itemIndex === items.length - 1)
setItems(() => items.slice(0, itemIndex));
else
setItems(() =>
items.slice(0, itemIndex).concat(items.slice(itemIndex + 1)),
);
};
...
<Button
style={{
backgroundColor: rouletteTheme.deleteBtn,
borderRadius: 11,
justifyContent: 'center',
}}
color={{ color: rouletteTheme.deleteBtnText }}
text="삭제"
onPress={() => handleDeleteItem(index)}
/>
...
가운데 방식이 이등변 삼각형 8개로 제일 깔끔하게 모양이 나온다.
그렇다면 삼각형을 어떻게 구현할 것인가?