🚨 문제 상황

• 상품 상세 페이지에서 카테고리를 눌러 목록 페이지로 이동하려는 상황
• 같은 상위 카테고리에서 다른 하위 카테고리를 누를 땐 문제 없음

내가 생각했던 상황: 로딩 → 리스트 렌더링

문제: 로딩 → 이전 리스트 렌더링 → 최신 리스트 렌더링

상황 순서

상세 상품의 카테고리는 음료, 청량/탄산음료 라고 가정(상위,하위)
눌린 카테고리는 스낵 카테고리(상위)

1. 청량/탄산에서 특정 상품 상세 페이지에 있는 상태
2. 스낵 카테고리를 누름
3. 파라미터가 parentId=스낵&categoryId=청량/탄산 로 먼저 이동
4. 청량/탄산 먼저 렌더링됨
5. 이후에 parentId=스낵&categoryId=쿠키로 변경
6. 최신 파라미터 기준 렌더링

---

🧐 분석

분석에 앞서

• 상위 = parentId, 하위 = categoryId
• 상위, 하위 카테고리에 대한 컴포넌트, api 각각 존재
  -> 상위 카테고리가 정해져야 하위 카테고리 렌더링됨
• 상위 카테고리 변동시, 처음에 하위 카테고리 리스트 첫 요소를 디폴트값 초기화

분석 과정

• 상위 변경 시 하위 카테고리 초기화(하위 첫 번째)까지 시간이 걸림
• 그 사이 parentId 변화 replace로 기존 하위 카테고리에 따라 렌더링(상황3번)
• 카테고리 변화를 담당하는 함수(handleCategory)에서 해결하기로 생각

---

🧩 해결

해결해야 할 부분

	// 기존 handleCategory
const handleCategory = (level: 'parentId' | 'categoryId', value: string) => {

  const newParams = new URLSearchParams(searchParams.toString());
    newParams.set(level, value);

    if (pathName.includes('detail')) {		// 요놈이 문제다
      router.push(`/productList?${newParams.toString()}`);
    } else {
      router.replace(`?${newParams.toString()}`);
    }
  };

if(detail) 부분을 바꾸자

리팩토링

	// 리팩토링 코드
const handleCategory = async (
   level: 'parentId' | 'categoryId',
   value: string,
 ) => {
   const newParams = new URLSearchParams(searchParams.toString());
   newParams.set(level, value);


   if (pathName.includes('detail')) {		// 상세 페이지일 때
     if (level === 'parentId') {		// categoryId일때는 문제가 없기에 parentId 일때만 추가
       const sub: Category[] = await fetchApi(`/categories/parents/${value}`, {
         method: 'GET',
       });						// sub: 하위 카테고리 리스트
       const initCategoryuId = sub[0].id;	// 변수 네이밍 오탈자 양해 부탁드립니다
       newParams.set('categoryId', initCategoryuId);
     }
     router.push(`/productList?${newParams.toString()}`);
   } else {
     router.replace(`?${newParams.toString()}`);

replace 전에 하위 카테고리를 패칭해주고, 거기서 첫 번째를 파라미터에 넘기기.
하위 카테고리까지 newParams에 담고 replace해주기.

기존: 상위 클릭 -> replace(상위만) -> 하위 api 패칭 -> 문제 상황 -> 하위 첫 번째 카테고리 초기화 -> replace(하위만) -> 최신 렌더링

리팩토링: 상위 클릭 -> 하위를 먼저 api 호출 -> replace(상위,하위 모두) -> 최신 렌더링

---

➕ 추가

더보기 버튼을 누른 상태에서 다른 상위 카테고리를 눌렀을 때도 같은 문제 발생

why?

정렬, 카테고리는 파라미터로 관리하면서, page는 상태로 관리했던 게 문제

how

page도 파라미터로 넘겨주기

서버 컴포넌트도 아닌데 fetch만 사용했던게 패착
그냥 react-query 사용할 걸 그랬다..
설계를 잘 합시다