refactor(toks-main): server component 역할 분리와 메인 Skeleton UI 추가 #390

minsgy · 2024-01-14T02:45:37Z

💡 왜 PR을 올렸나요?

server component 구조를 위해 패러렐 라우팅을 적용하여 bottomsheet + toast를 따로 관리합니다.
QuizList 컴포넌트에 Skeleton UI를 추가합니다.
react-query v5 devtools 설치
QA 처리
- Categories BottomSheet Tab 초기화 안되는 이슈 fix
- Categories BottomSheet 선택했던 탭 데이터 적용안되는 이슈 fix

💁 무엇이 어떻게 바뀌나요?

Skeleton UI 추가
dev tools

💬 리뷰어분들께

devtools에 loading + error 분기 생겨서 관리하기 좋아졌습니다.
QuizList Suspense로 만들어서 streaming 할 수 있게 하고 싶은데 http > uuid 의존성을 전부 담고있어서 이거 fetch 공통화 함수를 하나 만들어야할 것 같다는 생각입니다

minsgy · 2024-01-14T02:46:00Z

@chaaerim 드래프트 풀면 자동머지되서 막아놨어요 cicd 수정되면 그때 풀겠습니다

chaaerim · 2024-01-14T04:40:22Z

@minsgy 브랜치 규칙 release에도 적용해뒀습니다~!

codecov-commenter · 2024-01-14T05:51:53Z

Codecov Report

Attention: 275 lines in your changes are missing coverage. Please review.

Comparison is base (7d2a3ba) 0.08% compared to head (393943c) 0.08%.

Files	Patch %	Lines
...pBarHeader)/toks-main/_components/SkeletonCard.tsx	0.00%	56 Missing ⚠️
src/common/utils/reactQuery.ts	0.00%	55 Missing ⚠️
src/common/utils/isEqual.ts	0.00%	45 Missing ⚠️
src/app/(AppBarHeader)/toks-main/@toast/page.tsx	0.00%	32 Missing ⚠️
...app/(AppBarHeader)/toks-main/@bottomSheet/page.tsx	0.00%	27 Missing ⚠️
src/app/(AppBarHeader)/toks-main/layout.tsx	0.00%	20 Missing ⚠️
src/common/components/Skeleton.tsx	0.00%	13 Missing ⚠️
...der)/toks-main/_components/CategoryBottomSheet.tsx	0.00%	9 Missing ⚠️
src/app/(AppBarHeader)/toks-main/page.tsx	0.00%	5 Missing ⚠️
src/common/providers/index.tsx	0.00%	4 Missing ⚠️
... and 5 more

Additional details and impacted files

@@                Coverage Diff                 @@
##           release/routing    #390      +/-   ##
==================================================
- Coverage             0.08%   0.08%   -0.01%     
==================================================
  Files                  164     171       +7     
  Lines                 5934    6166     +232     
  Branches               164     171       +7     
==================================================
  Hits                     5       5              
- Misses                5929    6161     +232

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

dengoyoon · 2024-01-14T08:10:50Z

src/app/(AppBarHeader)/toks-main/page.tsx

+      <Suspense fallback={<SkeletonCardList />}>
+        <CardList />
+      </Suspense>


말씀하신 로딩 상태 처리를 그냥 이렇게 Suspense만 둘러싸면 되는걸까요?
아니면 useQuery를 통해 호출할때 변경해야 하는 부분이 있을까요?

useSuspenseQuery를 써주시면 될 것 같습니다~! 그거말곤 없어요

useSuspenseQuery를 써야하는 경우가 어떤 상황일까요?? react suspense같은 경우는 ui상의 로딩처리가 필요할 때 쓰는게 맞죠..??

말씀하신거처럼 UI상 로딩처리가 필요할 때 사용 할 수있는 케이스가 맞고,
prefetch 제외하고 streaming으로 UI를 나누어서 보여줘야하는 상황이 맞을 것 같아요! @chaaerim

참고로.. 로딩처리는 3가지로 나뉘어서 볼 수 있을것 같습니당

page.tsx -> loading.tsx

server suspense -> fallback

react-query -> isPending

dengoyoon · 2024-01-14T08:11:48Z

src/common/utils/reactQuery.ts

이 파일에서 export해주고 있는 함수들은 우선 만들어두기만 하신건가요?

아 그리고 혹시 참고하신 레퍼런스가 있으셨는지 궁금합니다..!!

요거 슬랙에 올렸었는데 쓸까하다가 queryKey, queryFn 전부 분리해서 쓰더라고요..? 근데그렇게까진 오버스펙같아서 안쓰긴했습니다 https://soobing.github.io/react/next-app-router-react-query/

dengoyoon · 2024-01-14T08:14:47Z

src/app/(AppBarHeader)/toks-main/layout.tsx

+      {children}
+      {toast}
+      {bottomSheet}


요거는 혹시 RootLayout에서 하는건 좀 별로일까요?

bottomSheet는 쓰이는 페이지마다 관리해주는게 좋아보이고 toast는 쓰이는 곳 추가로 생기면 써도 좋을 것 같네요~

chaaerim

고생하셨습니다~~!! 구조 참고해서 저도 리팩토링 해둘게요!! 👍

chaaerim · 2024-01-14T11:21:53Z

src/app/(AppBarHeader)/toks-main/page.tsx

+      <Suspense fallback={<SkeletonCardList />}>
+        <CardList />
+      </Suspense>


useSuspenseQuery를 써야하는 경우가 어떤 상황일까요?? react suspense같은 경우는 ui상의 로딩처리가 필요할 때 쓰는게 맞죠..??

chaaerim · 2024-01-14T11:24:00Z

src/common/components/Skeleton.tsx

+export const Skeleton = ({ className }: Props) => {
+  return (
+    <div
+      className={twMerge('h-[20px] w-full rounded-[8px] bg-gray-90', className)}


clsx 말고 twMerge 사용하신 이유가 있나요!?!?!?

@chaaerim 요거 height/width 값 수정해야하는데 clsx를 사용하면 css가 오버라이딩되서 적용이 안됩니당

LineGu assigned minsgy Jan 14, 2024

minsgy requested review from chaaerim and dengoyoon January 14, 2024 02:46

minsgy added 3 commits January 14, 2024 14:50

fix: test

4e665f9

refactor: bottomsheet, toast, page 단에서 컴포넌트 분리

c49f08f

refactor: skeleton quiz list 추가 및 client 컴포넌트 세팅

a421d63

socar-riaco force-pushed the refactor/toks-main branch from b9cc44c to a421d63 Compare January 14, 2024 05:50

minsgy marked this pull request as ready for review January 14, 2024 05:50

socar-riaco added 5 commits January 14, 2024 15:01

refactor: infiniteQuery -> SuspenseInfiniteQuery 변경

69683f8

remove: 안쓰는 remote 삭제

db2a006

fix: ci error fix

e4080c1

fix : error

8d7f77e

revert: ci 버전 수정

7e74bc0

minsgy marked this pull request as draft January 14, 2024 07:29

socar-riaco added 2 commits January 14, 2024 16:41

fix: 카테고리 바텀시트 관련 버그 fix (Tab 상태 통일시키기, categories 메뉴 업데이트 되도록 수정)

997b21b

fix: dev 환경여부 환경변수로 처리

393943c

minsgy marked this pull request as ready for review January 14, 2024 07:43

LineGu enabled auto-merge (squash) January 14, 2024 07:45

minsgy disabled auto-merge January 14, 2024 07:45

dengoyoon reviewed Jan 14, 2024

View reviewed changes

chaaerim reviewed Jan 14, 2024

View reviewed changes

minsgy requested review from chaaerim and dengoyoon January 14, 2024 11:36

chaaerim approved these changes Jan 14, 2024

View reviewed changes

minsgy merged commit b21ab65 into release/routing Jan 14, 2024
3 checks passed

minsgy deleted the refactor/toks-main branch January 14, 2024 12:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(toks-main): server component 역할 분리와 메인 Skeleton UI 추가 #390

refactor(toks-main): server component 역할 분리와 메인 Skeleton UI 추가 #390

minsgy commented Jan 14, 2024 •

edited

Loading

minsgy commented Jan 14, 2024 •

edited

Loading

chaaerim commented Jan 14, 2024

codecov-commenter commented Jan 14, 2024 •

edited

Loading

dengoyoon Jan 14, 2024

minsgy Jan 14, 2024

chaaerim Jan 14, 2024

minsgy Jan 14, 2024 •

edited

Loading

minsgy Jan 14, 2024 •

edited

Loading

dengoyoon Jan 14, 2024

dengoyoon Jan 14, 2024

minsgy Jan 14, 2024

dengoyoon Jan 14, 2024

minsgy Jan 14, 2024

chaaerim left a comment

chaaerim Jan 14, 2024

chaaerim Jan 14, 2024

minsgy Jan 14, 2024

refactor(toks-main): server component 역할 분리와 메인 Skeleton UI 추가 #390

refactor(toks-main): server component 역할 분리와 메인 Skeleton UI 추가 #390

Conversation

minsgy commented Jan 14, 2024 • edited Loading

💡 왜 PR을 올렸나요?

💁 무엇이 어떻게 바뀌나요?

💬 리뷰어분들께

minsgy commented Jan 14, 2024 • edited Loading

chaaerim commented Jan 14, 2024

codecov-commenter commented Jan 14, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minsgy Jan 14, 2024 • edited Loading

Choose a reason for hiding this comment

minsgy Jan 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaaerim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minsgy commented Jan 14, 2024 •

edited

Loading

minsgy commented Jan 14, 2024 •

edited

Loading

codecov-commenter commented Jan 14, 2024 •

edited

Loading

minsgy Jan 14, 2024 •

edited

Loading

minsgy Jan 14, 2024 •

edited

Loading