[BBEB] 인기투표

올챙이·2023년 10월 14일

봉봉이봉

목록 보기

4/8

Intro 😄

다음으로 구현한 페이지는 바로 인기투표 페이지입니다.
이봉이 가족들을 각각 투표할 수 있습니다.
투표는 하루에 1번만 가능하며 최대 3명까지만 투표가 가능하도록 했습니다.
투표 대상은 일봉이, 이봉이, 삼봉이, 오봉이, 육봉이, 칠봉이, 팔봉이로 총 7명입니다!

인기 투표 😊

인기투표는 다음과 같이 구성되어있습니다.
저는 코드를 하나하나 구현하는 하드 코딩을 하고 있었습니다.
코드가 너무 길어지고, 틀은 같은 코드에 핵심만 다른데 이 코드를 간편하게 할 수 있는 방법이 없을까? 하는 의문이 드는데 팀원 중 한명이 map 함수를 써보는 게 어떻겠냐고 제안해주셨습니다. 당시 map 함수를 처음 들어보았기에 저한테는 생소한 개념이었지만 막상 사용해보니 코드가 너무 간결해졌습니다!

//다른 핵심

const candidateItems = [
  { name: "일봉이", image: bong1, id: 1 },
  { name: "이봉이", image: bong2, id: 2 },
  { name: "삼봉이", image: bong3, id: 3 },
  { name: "오봉이", image: bong5, id: 5 },
  { name: "육봉이", image: bong6, id: 6 },
  { name: "칠봉이", image: bong7, id: 7 },
  { name: "팔봉이", image: bong8, id: 8 },
]; 


//같은 틀

       <Stack
          direction="row"
          spacing={-10}
          justifyContent="center"
          marginTop="6%"
        >
          {candidateItems.map((candidate) => {
            return (
              <Stack key={candidate.name} alignItems="center" spacing={2} height="100%" width="100%">
                <Stack fontSize="32px">{candidate.name}</Stack>
                <img
                  src={candidate.image}
                  alt={`${candidate.name} 사진`}
                  width="60%"
                  height="100%"
                  border= "1px solid #FF8181"
                />

                <Checkbox
                  checked={selectedCheckboxes.some(
                    (item) => item.name === candidate.name
                  )}
                  onChange={() => handleCheckboxChange(candidate)}
                />
              </Stack>
            );
          })}
        </Stack>