Result refactoring/#79

[yougyung]

📌 작업 내용

구현 내용 및 작업 했던 내역

• dialog.key에서 dialog-key.util로 파일 이름 변경
• drawer max-height 90vh로 설정 및 overflow-scroll속성 추가
• resultdetailcontent 기이수 미이수 스토리북 테스트 추가
• 저번 스프린트 회의때 말씀드린 구조로 변경하여 ResultCategoryDetailContainer query추가
• Suspense를 통한 data fetching loading시 스켈레톤 뷰 추가
• url 내 querystring유무에 따른 모달 제어
  • 쿼리스트링과 모달의 존재여부를 동일하게 유지
  1. 모달이 꺼지는 경우 query string도 제거
  2. 모달이 켜지는 경우 query string 생성
  3. 처음 페이지에 진입한 경우 query string에 따른 모달 유무 조작
  4. history 조작을 통한 result페이지가 하나의 route history를 차지하도록 구현

🔊 도움이 필요한 부분

• 개발자 도구의 유무에 따라 skeleton이 노출되는 문제를 경험하고 있는데, 캐시를 문제로 예상하고있으나 정확한 원인을 파악하지 못했습니다.

• 이전에 선배가 도메인 컴포넌트에 위치시키셨을때(지금은 한 파일 내로 이동) 근처에 위치시키고 싶은 의도가 있었다고 하셨는데 해당 이점에 대해 공감합니다. 컴포넌트와 스켈레톤이 한 컴포넌트에 위치되어져있는 것보다 분리되어져있는게 가독성에 좋을 것 같다는 생각이 들어 컴포넌트를 폴더로 생성해서 내부에 component.skeleton.tsx로 분리하는 것은 어떤가요?

  --component
   |__ component.tsx
   |__ component.skeleton.tsx
  
  

  • 폴더 구조가 깊어진다는 단점은 존재하지만, 응집성과 가독성차원에서 득이 될 것으로 예상됩니다

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-dzwzbbqigq.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-ubaxaursfo.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-yuudpyoyjk.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-ztpweezkjo.chromatic.com/

[gahyuun]

개발자 도구 유무에 따라 skeleton 노출이 달라진다고 하셨는데, 제가 실행을 했을 때는 skeleton이 아예 보이지 않았습니다. 해당 문제는 캐시 때문인 것으로 보입니다 !
fetch 함수를 실행될땐 first, handler가 실행될땐 second를 출력하도록 만들었습니다
로깅 사진을 확인해보면 second는 처음 result page가 렌더링될때만 출력이 됩니다 ( 과목 확인을 여러 번 클릭해도 first만 출력이 됩니다 )
result page에 진입했을 때 ResultCategoryDetailContainer 가 실행이 되고 data fetching을 진행합니다 ( 이때 category가 undefined이긴하나, mock에서 querystring을 할당해주지 않으셔서 category가 영향을 주지 않습니다)
이후 과목 확인을 클릭할때마다 data fetching을 진행하긴 하나 이미 캐싱이 되었기에 한 번도 skeleton이 보이지 않는 것 같습니다

말씀해 주신 문제가 정확히 이것인지는 더 확인해야겠으나 , 현재 캐시로 인해 skeleton이 영향을 주는 것 같습니다!

[gahyuun]

skeleton 폴더 위치에 관해서는 스타일 차이라고 생각이 들긴 합니다!
저는 skeleton이 한 파일에 위치하게 되었을 때 가독성이 안좋아지는 것보다 depth가 더 크게 느껴지는데 혹시 어떻게 생각하시나요?!

[yougyung]

skeleton 폴더 위치에 관해서는 스타일 차이라고 생각이 들긴 합니다!

저는 skeleton이 한 파일에 위치하게 되었을 때 가독성이 안좋아지는 것보다 depth가 더 크게 느껴지는데 혹시 어떻게 생각하시나요?!

스타일 차이라는 부분에 대해서는 동의합니다 ! 다만 skeleton이 길어지는 경우에 문제가 된다고 느껴 제안드렸던 부분인데, 팀원분들께서 depth가 깊어지는 것에 대해서 더 큰 불편을 느낀다면 이전 구조로 변경하겠습니당 😉

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-nyqyeujfhp.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-jdpnrdyoil.chromatic.com/

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-ujnslzkejf.chromatic.com/

[seonghunYang]

• 수고하셨습니다.
• suspense가 조건부로 동작하는 문제는 해결되었을까요?
• 그리고 가능하시다면, 제가 이전에 작성한 user-info-navigator skeleton도 현재 구조에 맞게 분리해주실 수 있을까요? 고맙습니다.

[yougyung]

• 수고하셨습니다.
• suspense가 조건부로 동작하는 문제는 해결되었을까요?
• 그리고 가능하시다면, 제가 이전에 작성한 user-info-navigator skeleton도 현재 구조에 맞게 분리해주실 수 있을까요? 고맙습니다.

user-info-navigator skeleton에 대한 변경은 진행했습니다. 5c7c293

suspense가 조건부로 동작하는 문제에 대해서는 개발자도구를 킨 상태에서는 delay(4000)이 작동하여 skeleton이 노출되지만, 개발자도구를 키지않는 경우에서는 delay(400)이 안먹는 문제를 여전히 경험하고 있습니다. 이 부분은 해결되는대로 다시 공유드리겠습니다.

--
조건부로 동작하는 원인은 개발자도구에서 캐시사용중지 옵션을 켜뒀기때문에 발생하는 것으로 보입니다. 개발자 도구의 캐시 사용중지를 해제하고 나니 전체적으로 캐싱이 되어져있는 것을 확인하였고 요청에 쿠키를 넣음으로 문제를 해결했습니다.

[github-actions]

🚀storybook: https://65ccb85d5afe55a024495bc0-niyayefurr.chromatic.com/