항목 입력 추가 UI - 2023년 12월 13일 오전 10:00 (GMT+9)

Preview

기존에 만든 투표 컴포넌트를 토대로 진행했다.

항목마다 컬러가 지정되어 있고, 기본 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)}
                      />
...

돌림판 UI - 2023년 12월 13일 오후 2:00 (GMT+9)

가운데 방식이 이등변 삼각형 8개로 제일 깔끔하게 모양이 나온다.

그렇다면 삼각형을 어떻게 구현할 것인가?

border를 통한 삼각형 만들기