[feat/#110] 로딩 스피너, 경로 예외, 검색결과 없음, 깜빡임 현상 수정 by heesunee · Pull Request #111 · SOPT-all/36-COLLABORATION-WEB-TEMU

heesunee · 2025-05-23T03:07:19Z

📌 Related Issues

close [fix] 페이지 이동시 깜빡임현상 & 로딩중 & 에러페이지 #110

✅ 체크 리스트

PR 제목의 형식을 잘 작성했나요? e.g. [Feat/#이슈번호] PR 템플릿 작성
빌드가 성공했나요? (pnpm build)
컨벤션을 지켰나요?
이슈는 등록했나요?
리뷰어와 라벨을 지정했나요?

📄 Tasks

route에 지정하지 않은 경로로갔을때는 NotFound로 가게했습니다.
route에 전체를 suspense로 감싸 로딩시 로딩중 스피너가 뜨게했습니다.
검색 리스트 페이지에서 검색 결과없을때 컴포넌트 적용
서버 응답코드 401,40400. 이런 상태 코드에 따라 에러바운더리를 설정해보려했는데 실패했어요. 혹시 해보실분 ..~~?? ㅎㅎ

⭐ PR Point (To Reviewer)

검색 리스트 화면 검색하면서 계속 깜빡임 현상
검색 리스트는 전체 러프한 단어에서 더 좁아지면서 상세한 결과가 나와요. 예를들어 수납 이라는 글자를 쳤을때 10개가 나오면 수납장을 치면 7개, 5개 이런식으로 더 좁아져요
여기서 문제넌, 10개에서 5개로 좁아지면서 새롭게 데이터를 받아오면서 계속깜빡였던거에요, 사실상 그냥 기존에 있는 데이터를 활용하면 되는데

export const useGetSearchedProductList = (keyword: string) => {
  return useQuery({
    queryKey: [QUERY_KEYS.PRODUCTS_SEARCH, keyword],
    queryFn: () => getSearchedProductList(keyword),
    enabled: !!keyword,
    placeholderData: keepPreviousData,
  });

따라서 기존데이터를 유지할 수 있는 place holderData 옵션을 넣어서 개선했습니다.

제품 상세결과 페이지
여기도 마찬가지로 썸네일을 클릭할때마다 새롭게 refetch가 되면서 깜빡이더라구요, 여기도 똑같이

export const useGetProductDetail = (productId: number) => {
  return useQuery({
    queryKey: [QUERY_KEYS.PRODUCTS_DETAIL, productId],
    queryFn: () => getProductDetail(productId),
    placeholderData: keepPreviousData,
  });
};

적용했습니다.

페이지 이동간 main 영역이 작아지면서 푸터가 올라오는거때문에 깜빡임이 발생했는데, 사이에 loading .스피너를 걸어줬거든요? 근데 이거도 좀 지저분하거 같기도하고... 우선 해두겠습니다!

📷 Screenshot

Tab-2025.5.23._11_57.mp4

🔔 ETC

github-actions · 2025-05-23T03:07:45Z

✅ 빌드에 성공했습니다! 🎉

hamxxn

스터디에서 배운거 바로바로 적용 머싯다...

hamxxn · 2025-05-23T03:17:18Z

src/api/queries.ts

  return useQuery({
    queryKey: [QUERY_KEYS.PRODUCTS_DETAIL, productId],
    queryFn: () => getProductDetail(productId),
+    placeholderData: keepPreviousData,


이런 것도 있었네요..
배워갑니다!

hamxxn · 2025-05-23T03:20:29Z

src/router/Router.tsx

 import Layout from '@router/Layout';
+import NotFound from '@shared/components/NotFound/NotFound';
+
+const Home = lazy(() => import('@pages/home/Home'));


성심스다..
저도 이 부분이 궁금해서 찾아봤는데, 작은 규모의 프로젝트에서는 오히려 이렇게 번들 파일을 따로 분리하는 것이 성능 면에서 불리할 수도 있다고 하더라고요..
그 이유는 파일이 분리되면서 HTTP 요청이 늘어나고, 그로 인해 오버헤드가 증가할 수 있기 때문이라고 합니다!

일단은 적용할게요 !!

hamxxn · 2025-05-23T03:20:43Z

src/router/Router.tsx

        path: ROUTES.PRODUCT_DETAIL,
        element: <ProductDetail />,
      },
+      {


not found 처리 굳굳

1jiwoo27

이것저것 많이 해주셨네요 ㅎㅎ 테무가 점점 완성되고 있는 거 같아요 🤩

1jiwoo27 · 2025-05-23T03:54:38Z

src/shared/components/Error/ErrorSearch.tsx

+  return (
+    <div className={styles.container}>
+      <Head level="h2" tag="head_sb_20">
+        😞 오류 발생


검색 결과가 없는 경우는 오류 발생 대신에
head: 검색 결과가 없습니다, text: 다른 검색어를 입력해보세요! 이런 식으로 적는 거 어떨까요?

검색 결과가 없는 게 오류는 아니라고 생각해서요!

좋습닌다!!

1jiwoo27 · 2025-05-23T03:55:56Z

src/pages/productList/ProductList.tsx

-          productList.length === 0 &&
-          renderMessage('검색 결과가 없습니다.')}
+      {isLoading && <Loading />}
+      {!isLoading && !isError && productList.length === 0 && <ErrorSearch />}


검색 결과 없을 때랑 에러 발생 했을 때를 나눠서 하면 좋을 것 같아요 🤓

이거 에러핸들링도 하면 좋은데 ㅠㅠ 아직 설정을 못해서 일단 같이 처리할게요 !!

jeonghoon11

덕분에 lazy와 Suspense에 대해 알게 되었어요!
청크 가져오는 동안 로딩상태일 때 fallback으로 보여주는 화면을 Loading으로 지정하여 스핀이 돌게 한거군요! 배워갑니다!!

jeonghoon11 · 2025-05-23T08:16:30Z

src/shared/components/Loading/Loading.css.ts

하 로딩 너무 이쁘네요
나중에 복붙좀 할게요..

github-actions · 2025-05-23T10:39:16Z

✅ 빌드에 성공했습니다! 🎉

heesunee added 9 commits May 23, 2025 10:39

refactor: placeholdData 추가 (#110)

6b2542d

feat: 로딩 스피너 (#110)

6421e1a

[feat] suspense loading (#110)

77f297e

feat: 에러 페이지 (#110)

43796b0

[feat] 404 Not Found 컴포넌트 (#110)

e313d16

[feat] 잘못된 경로로 갔을때 설정 (#110)

7886578

[feat] 오류 상황 예외 처리 (#110)

1e2a130

[fix] 에러바운더리 삭제 (#110)

a3c21c9

[fix] lint error (#110)

51eafd0

heesunee self-assigned this May 23, 2025

heesunee requested review from 1jiwoo27, hamxxn and jeonghoon11 as code owners May 23, 2025 03:07

heesunee added ⭐Feat 🐰희선 labels May 23, 2025

hamxxn approved these changes May 23, 2025

View reviewed changes

1jiwoo27 requested changes May 23, 2025

View reviewed changes

jeonghoon11 approved these changes May 23, 2025

View reviewed changes

src/shared/components/Loading/Loading.css.ts

Copy link

Member

jeonghoon11 May 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하 로딩 너무 이쁘네요
나중에 복붙좀 할게요..

[code review] 코드 리뷰 반영 (#110)

1140830

heesunee merged commit 394672d into develop May 23, 2025
1 check passed

Conversation

heesunee commented May 23, 2025

📌 Related Issues

✅ 체크 리스트

📄 Tasks

⭐ PR Point (To Reviewer)

📷 Screenshot

🔔 ETC

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

hamxxn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

1jiwoo27 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeonghoon11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants