feat: 8주차 첫번째 미션

[kimdoyeon1234]

📌 작업 내용

검색 최적화를 위한 useDebounce 커스텀 훅 구현 및 무한 스크롤 검색 기능 연동

✨ 상세 작업 내용

• useDebounce(value, delay) 커스텀 훅 직접 구현 — useEffect 내부에서 setTimeout으로 지연값을 상태에 반영하고, 의존성(value, delay) 변경 시 clearTimeout으로 이전 타이머를 정리해 메모리 누수 방지
• LpListPage와 SearchPage의 검색 인풋에 useDebounce(searchQuery, 300) 적용 — 입력 중에는 API 요청이 발생하지 않고, 300ms 동안 추가 입력이 없을 때만 debouncedQuery가 변경되어 요청 전송
• useInfiniteQuery의 queryKey에 debouncedQuery를 포함시켜, 지연된 검색어 기준으로만 쿼리가 실행되도록 처리
• 검색 타입(title / tag) 분기 처리 — debouncedQuery가 있을 때만 params.search 또는 params.tag를 주입하고, 없으면 전체 목록을 조회
• 최근 검색어 기능 구현 — debouncedQuery 기준으로 로컬스토리지에 최대 5개 저장, 개별/전체 삭제 지원
• LpListPage의 검색 UI는 사이드바 "찾기" 클릭 시 쿼리스트링(?searchMode=true) 감지로만 활성화되도록 처리 — 검색 모드 비활성화 시 입력값 초기화

---

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

8주차 미션 1 수고하셨습니다 ! useDebounce 훅을 직접 만드실 때 queryKey에 포함해 불필요한 호출 방지 등 잘 처리해주셨습니다 👍 아래 코멘트 확인 부탁드립니다 !

---

1. SearchPage.tsx — App.tsx에 라우트 미등록

// 현재 (week8/client/src/App.tsx) — SearchPage 누락
import SearchPage from './pages/SearchPage'; // import는 없음

const router = createBrowserRouter([
  {
    element: <LayoutWrapper />,
    children: [
      { path: "/", element: <LpListPage /> },
      // { path: "/search", element: <SearchPage /> }  ← 없음
    ],
  },
]);

// 수정 
import SearchPage from './pages/SearchPage';

{ path: "/search", element: <SearchPage /> },

SearchPage.tsx 파일이 생성되어 있지만 App.tsx의 라우터에 등록되지 않아서 실제로는 접근이 불가능합니다! LpListPage에 검색 기능을 통합한 구조라면 이 파일은 삭제하거나, 별도 페이지로 쓸 거라면 라우트에 추가해주세요 !

---

2. MyPage.tsx — fetchNextPage() 를 useEffect 없이 렌더 바디에서 직접 호출

// 현재 (week8/client/src/pages/MyPage.tsx)
// 스크롤 감지
if (inView && hasNextPage) fetchNextPage(); // useEffect 없이 직접 호출

// 수정
useEffect(() => {
  if (inView && hasNextPage) fetchNextPage();
}, [inView, hasNextPage, fetchNextPage]);

무한스크롤 감지 로직이 useEffect 없이 컴포넌트 렌더에 있어서, inView가 true인 동안 렌더링될 때마다 fetchNextPage가 계속 호출되는 구조입니다 ! useEffect를 사용해서 inView 변화 시점에만 호출되도록 분리하면 조금 더 안정적으로 동작할 것 같아요👍