[기능구현] 보호자용 가이드라인 페이지

[Diwoni]

#️⃣ 연관된 이슈

ex) #100

📝 작업 내용

[기능구현] 보호자용 가이드라인 페이지 (가이드라인 추가, 수정, 조회)

이번 PR에서 작업한 내용을 간략히 설명해주세요.(이미지 첨부 가능)

가이드라인 조회, 추가, 수정 API 연동

• 가이드라인 조회 API 는 시니어 별로 특정 카테고리에 관한 모든 가이드라인을 불러올 때 seniorId 도 필요해서 이를 url 에서 추출해 사용하려고 했습니다.
• (가이드라인 4개 버튼 있는) 공통 컴포넌트 에 seniorId props 를 추가해서 navigate 를 조건부로 할 수 있도록 수정했습니다. (재사용성 고려)

보호자 홈의 헤더에 있는 시니어 선택 박스의 경우 첫 번째 인덱스의 시니어로 기본 설정을 해놓을까? 에 대한 생각도 했는데
-> 보호자 홈 페이지에서 시니어 정보 API를 다시 불러와서 기본 값으로 줘야하는 점 때문에 그냥 기본 값은 주지 않고 대신 시니어를 선택하지 않고 가이드라인 버튼을 눌렀을 때 props 로 seniorId 가 null로 전달되면서 alert 로 띄어주게 됩니다. (유나님께서 작업하신 시니또 페이지에서 콜백 상세보기 페이지에 사용할 때는 props 로 seniorId 를 넘겨줄 필요가 없는데 이때는 undefined 로 분기되기에 현재 설정하신대로 {locaation.pathname}/{id} 로 navigate 정상적으로 됩니다!)

차크라 UI 의 사용자 정의 props 에러

Warning: React does not recognize the isRotated prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isrotated instead. If you accidentally passed it from a parent component, remove it from the DOM element. Error Component Stack

중간 커밋에 보면 $isMore 로 쓴 부분이 있었는데 이는 위에 스타일 컴포넌트의 props 관련 에러가 발생해서 gpt 에 물어보니 앞에 $ 를 붙여보라 해서 붙였었습니다 (엉터리 해결방법이었음.. 계속 warning 이 뜸). 왜 그런 지 찾아봤는데 요약하자면, Chakra UI 에 있는 Image 컴포넌트를 스타일 컴포넌트로 정의했을 때 용자 정의 props를 전달하려고 해서 발생하는 문제였습니다. 그래서 차크라UI 컴포넌트 말고 div 로 사용해서 해결했습니다.

Merge 전 할 사항

• 삭제 API 연동 (백에서 추가되는대로 바로 진행 예정)
• console.log 제거 (삭제 API 연동 후 전체적으로 확인해보기 위해 아직 남겨두었습니다!)

스크린샷 (선택)

시니어 선택하지 않고(null) 가이드라인 버튼을 눌렀을 때

시니어를 선택했을 때 (null -> 31)

가이드라인 페이지에 전달되어, 조회,수정,추가 등의 API 에 사용합니다.

💬 리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

⏰ 현재 버그

✏ Git Close

close #100

[Dobbymin]

100번째 이슈 축하합니다~~🎉

[Dobbymin]

이거 이런식으로 path 설정해도 보호자 페이지랑 보호자 가이드라인 페이지 둘 다 정상적으로 들어갈 수 있나요¿¿¿¿¿¿¿¿¿¿

[Diwoni]

잘 되던데 지금 보니 코드 상 좀 이상하네요..? 한 번 확인해볼게요!

[Diwoni]

수정했습니다 :)

[Dobbymin]

이거 api가 있었군요! 몰랐넹...

[Dobbymin]

Id 오타인가요?? Id ? id ?

[Diwoni]

저건 백엔드 스웨거에 Id 로 올라와있어서 일단 Id로 해놓았고 말씀드렸습니다!

[Dobbymin]

일단 이번 이슈에서는 이대로 처리하고, 이슈 새로 파서 수정해야할것 같네요