목차

이슈 #1: SWR과 Redux 간 데이터 동기화 문제

1. 이슈 상황

항목 내용
발생 환경 블로그 검색 결과를 다른 페이지에서 사용할 때
증상 SWR로 패칭한 데이터가 다른 컴포넌트에서 접근 불가
영향 범위 검색 결과 페이지, 블로그 상세 페이지

문제 상황:

// SearchBar.tsx에서 SWR로 검색
const { data: blogPostsSearch } = useSWR(categoryApi, fetcher);

// DetailPoster.tsx에서 데이터 접근 불가
// SWR 캐시는 동일 키로 호출해야만 공유됨

2. 해결 방안 후보

방안 장점 단점
A. SWR 키 통일 SWR 캐시 자동 공유 검색 조건이 다르면 캐시 미스
B. Redux로 동기화 전역에서 접근 가능, 검색 조건 무관 추가 dispatch 필요
C. Context API Redux 없이 전역 상태 이미 Redux 사용 중, 혼용 복잡

3. 선택한 해결법

선택: B안 (Redux로 동기화)

// SearchBar.tsx
useEffect(() => {
  if (blogPostsSearch && blogPostsSearch["body"]) {
    dispatch(postsAction({ data: blogPostsSearch.body }));
    navigate("/page");
  }
}, [blogPostsSearch, dispatch, navigate]);

// DetailPoster.tsx
const { posts } = useSelector((state: Rootstate) => state.posts);
const detailPosts = posts.filter((v: TPosts) => v.idx === Number(postId));

4. 선택 이유

관점 이유
일관성 이미 Redux를 사용 중이므로 상태 관리 일원화
유연성 검색 조건과 무관하게 전역 접근 가능
디버깅 Redux DevTools로 상태 변화 추적 용이

이슈 #2: 반응형 네비게이션 메뉴 토글 상태 관리

1. 이슈 상황

항목 내용
발생 환경 모바일에서 메뉴 열고 페이지 이동 시
증상 페이지 이동 후에도 메뉴가 열린 상태로 유지
영향 범위 모바일 사용자 경험

2. 해결 방안 후보

방안 장점 단점
A. useEffect로 라우트 변경 감지 자동 닫힘 추가 의존성 필요
B. Link 클릭 시 수동 닫기 명시적 제어 모든 Link에 핸들러 추가 필요
C. Navigation 외부 클릭 감지 직관적 UX 복잡한 이벤트 처리