10.4 화 - 메인프로젝트 데일리 회고

1. 양육환경 자가진단 테스트 컴포넌트 구현

네, 아니오 버튼 뿐만 아니라 이전, 다음 버튼으로 문항 자체만 이동도 할 수 있도록 구현하고자 했으나 이전 버튼 클릭 시 한번 다음 문항으로 갔다가 이전으로 가고, 다음 버튼 클릭시에도 한번 이전으로 갔다가 다음 문항으로 가는 문제가 어떻게 코드를 바꿔보더라도 해결이 되지 않아 제외시키고 어쩔 수 없이 네, 아니오 버튼 클릭 시 점수 최신화와 다음 문항으로만 이동만 되고 점수에 따라 화면에 표시될 결과가 달라지도록만 기능 구현을 시간상 마무리하였다.

1.1 체크리스트 컴포넌트

• start: 테스트 시작 전 커버이미지와 시작버튼을 보여주다 시작버튼 클릭 시 state가 false로 변하고 체크리스트 문항으로 화면에 보여질 내용을 조건부 렌더링 하기 위한 state.
• score: 점수의 state. 네 클릭 시 1점, 아니오 클릭 시 변동 없음.
• index: 화면에 표시될 문항을 변경하기 위한 state로 질문 문항 데이터의 index와 매핑된다.
• isResult: 모든 문항을 체크한 경우 문항 대신 결과창을 보여주도록 조건부 렌더링하기 위한 state.
• curr: 전체 질문 중 특정 index의 질문 문항을 나타내는 state. 화면에 표시될 질문 내용이다.

function CheckList() {
  const [start, setStart] = useState(true);
  const [score, setScore] = useState(0);
  const [index, setIndex] = useState(1);
  const [isResult, setIsResult] = useState(false);
  const [curr, setCurr] = useState(questions[0].question);

  const family = [1, 2, 3, 4];
  // const house = [7, 8];
  const puppy = [5, 6, 9, 10];

  useEffect(() => {
    const resultRenderer = function () {
      if (index === questions.length + 1) setIsResult(true);
    };
    return resultRenderer();
  }, [index]);

  const handleScoreBtn = (e) => {
    e.preventDefault();
    if (e.target.value === '+' && index <= questions.length + 1) {
      setIndex((prev) => prev + 1);
      setCurr(questions[index]?.question);
      return setScore((prev) => prev <= questions.length && prev + 1);
    }
    if (e.target.value === '-' && index <= questions.length) {
      setIndex((prev) => prev + 1);
      return setCurr(questions[index]?.question);
    }

    return console.log(`${score}`);
  };

  const iconRenderer = () => {
    if (family.includes(index)) return <MdFamilyRestroom />;
    if (puppy.includes(index)) return <FaDog />;
    return <GiHouse />;
  };

  return (
    <S.CheckListLayout>
      <S.CheckListContainer>
        {start ? (
          <TestStartCover setStart={setStart} />
        ) : (
          <div>
            {isResult ? (
              <CheckResult score={score} />
            ) : (
              <S.QuestionBox onClick={(e) => e.preventDefault()}>
                <S.QuestionIdx>
                  <img src={Paw} alt="" />
                  <span>Q{index}</span>
                </S.QuestionIdx>
                <S.QuestionText>{curr}</S.QuestionText>
                <S.QuestionDescIcon>{iconRenderer()}</S.QuestionDescIcon>
                <S.SelectBtnBox>
                  <S.SelectBtn
                    type="button"
                    className="yes"
                    value="+"
                    onClick={handleScoreBtn}
                  >
                    네
                  </S.SelectBtn>
                  <S.SelectBtn
                    type="button"
                    className="no"
                    value="-"
                    onClick={handleScoreBtn}
                  >
                    아니오
                  </S.SelectBtn>
                </S.SelectBtnBox>
                <S.CurrentScore>현재 점수: {score}</S.CurrentScore>
              </S.QuestionBox>
            )}
          </div>
        )}
      </S.CheckListContainer>
    </S.CheckListLayout>
  );
}

1.2 질문 데이터

export const questions = [
  {
    number: 1,
    question: `함께 거주중인 가족 구성원들 모두 반려견을 키우는 것에 동의하시나요?`,
  },
  {
    number: 2,
    question: `함께 거주중인 가족 구성원 중 '털 알레르기'가 있는 사람은 없나요?`,
  },
  {
    number: 3,
    question: `습관 훈련 전까지 반려견의 배변 또는 집안의 물건을 어지르더라도 참을 수 있나요?`,
  },
  {
    number: 4,
    question: `결혼, 이사, 출산 등 생활환경에 큰 변화가 생기더라도 끝까지 책임을 질 수 있나요?`,
  },
  {
    number: 5,
    question: `데려오려는 반려견의 견종에 따른 습성, 걸리기 쉬운 질병들에 대해 공부 하셨나요?`,
  },
  {
    number: 6,
    question: `다른 동물을 키우고 계신다면 동물들 간에 서로 잘 지낼 수 있나요?`,
  },
  {
    number: 7,
    question: `사료, 물품, 병원비 등 반려견 양육에 필요한 지원이 가능한가요?`,
  },
  {
    number: 8,
    question: `장기간 집을 비우는 경우 반려견을 맡길 곳이 있나요?`,
  },
  {
    number: 9,
    question: `자녀가 있다면 함께 책임감 있게 반려견을 돌볼 수 있나요?`,
  },
  {
    number: 10,
    question: `규칙적인 산책을 시켜줄 수 있나요?`,
  },
];

2. 공공api 활용

2.1 CORS 에러

~~adopt-pet:1 Access to XMLHttpRequest at '[<https://apis.data.go.kr/1543061/animalShelterSrvc/shelterInfo?numOfRows=30&pageNo=1&serviceKey=>](<https://apis.data.go.kr/1543061/animalShelterSrvc/shelterInfo?numOfRows=30&pageNo=1&serviceKey=OiIncyI4114LIa3yBSbgaTIRDLYBZ7mFvxCJUSePKJXXKRPKjRhIL%2FL1L8XXCJgP5Ja9xy%2BGK04sZFlJlE6JRA%3D%3D>)안알랴줌' from origin '[]()' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.~~

참고: https://www.hahwul.com/2019/04/10/why-failed-get-data-with-this-cors-policy/

→ 데이터 자체가 카카오 지도검색을 대체하는 만큼의 유용성이 없다 판단되어 카카오맵 api 사용으로 대체하였음.

2. 전국 유기견 보호소 위치, 상세정보 조회

기존 카카오맵 api를 사용하는 컴포넌트와 검색 키워드 지도에 입력하는 컴포넌트를 재사용하여 전국 범위로 ‘유기견 보호소’ 키워드로 검색한 결과와 상세정보가 iframe으로 팝업되도록 구현함.