[Feat/#71] 반려동물 질병 유무 뷰 구현

[yarimu]

🔥 Related Issues

• close [ Feat ] 반려동물 질병 유무 뷰 구현 #71

⚠️ 뷰 변경됨!!!

pr 리뷰어에게 내용만 읽어주시고, File Changed에서 질병~증상 컴포넌트 렌더링하는 PetHealth 컴포넌트만 코드리뷰 해주세욥!

✅ 작업 리스트

• 뷰 퍼블리싱
• 버튼 선택에 따른 하단 버튼 활성화
• 선택에 따른 플로우 연결

🔧 작업 내용

• 피그마 뷰

📣 리뷰어에게 어떠신가요?

progressbar 추후 구현 예정입니다!

다들 아시겠지만..! 반려동물 질병 유무에 따라 이후 플로우가 달라집니다!(상세 질병 선택 뷰 스킵의 형식)
반려동물 등록 post할 때 이 부분에서 필요한 정보는 1) 질병아이디 배열(없는 경우 null) 2) 증상아이디 배열 입니다.(null일 수 없음)
3단계에 거쳐 2가지의 정보만 도출되다 보니 이 3단계를 렌더링 하는 껍데기 컴포넌트를 만들어 한 번에 질병 증상 정보를 보내고자 합니다.
현재 한 개의 껍데기로 묶어 분기 처리만 해두었고 추후 자식 컴포넌트 구현한 후 나머지 분기처리 및 로직 구현하고자 합니다.

  질병 유무 선택 -> 예 ->  질병 대분류 소분류 ->  증상 대분류 소분류
  질병 유무 선택 -> 아니오 -> 증상 대분류 소분류 

📸 스크린샷 / GIF / Link

• 구현화면

2025-01-17.2.mp4

[minjeoong]

고생하셨습니다!

[minjeoong]

p4) 짜기 나름이긴 한데, 이거 함수로 따로 빼서, switch 문으로 return 하는 것도 좋은 방법일 것 같아요 ~~

예를 들면 이렇게 입니다

const renderHealthStep = (healthStep: string, stepChange: () => void) => {
  switch (healthStep) {
    case "예":
      return <Disease />;
    case "아니오":
      return <Symptom />;
    default:
      return <PetHealthDualSelector stepChange={stepChange} />;
  }
};

const ParentComponent = ({ healthStep, stepChange }: { healthStep: string; stepChange: () => void }) => {
  return <div>{renderHealthStep(healthStep, stepChange)}</div>;
};

[yarimu]

평소 return문 내부가 깔끔한걸 더 선호하는데 이 방법이 더 깔끔하고 좋은거 같아요!!
이렇게 반영해보도록 하겠습니다! 알려주셔서 감사해요❤️

➡️ 조립해서 렌더링 최종 구현할 때 활용해보겠습니다!

[Leeyoonji23]

예림언니 PR 영상 보면 반응형 하나하나 고려해서 스타일 준게 너무 멋져요... 👍👍
고생하셨습니다 -!

[ocahs9]

고생하셨습니다~

다만 피그마를 보니 이거 회색처리 되어있고

대신 아래의 뷰가 추가된 거 같은데, 한번 확인해보는 게 좋을 거 같아요!

아마 이미 확인하신 것 같은데, 잊지 말고 구현 해주세요!! 👍👍