🎯 문제 상황: 기능/UI 분리로 인한 Props Drilling 증가

📌 문제 요약

• 컴포넌트 분리 심화로 인한 깊은 계층 구조 형성
• 상태 전달을 위한 불필요한 중간 컴포넌트 증가
• useChecklistStore 구현 시 잘못된 상태 업데이트 방식 사용
• React Hooks 규칙 위반 가능성 (Hook 호출 위치 문제)

🕵️ 근본 원인 분석

1. 과도한 컴포넌트 분리

// CharChecklistData.tsx
const [activeTab, setActiveTab] = useState('daily')
// 3단계 이상 하위 컴포넌트에서 이 상태 필요 시 문제 발생

1. Zustand 스토어 설계 오류

// 잘못된 상태 업데이트 예시
setChecklistDailyData: (newData) => ({daily: newData})
// 기존 state를 덮어쓰는 문제

1. Hook 사용 위치 문제

// Zustand 스토어 내부에서 Hook 직접 사용 시도
const useChecklistStore = create(...)
// React Hooks 규칙 위반 가능성

🛠 해결 방법

1. Zustand 스토어 구조 개선

interface ChecklistStore {
  daily: ChecklistData
  custom: ChecklistData
  activeTab: TabType
  actions: {
    setData: (type: TabType, data: ChecklistResTypes[]) => void
    setProgress: (type: TabType, percent: number) => void
    setActiveTab: (tab: TabType) => void
  }
}

const useChecklistStore = create((set) => ({
  daily: { data: [], progress: 0 },
  custom: { data: [], progress: 0 },
  activeTab: 'daily',
  actions: {
    setData: (type, newData) =>
      set(state => ({
        [type]: { ...state[type], data: newData }
      })),
    setProgress: (type, percent) =>
      set(state => ({
        [type]: { ...state[type], progress: percent }
      })),
    setActiveTab: (tab) => set({ activeTab: tab })
  }
}))

2. 선택적 상태 사용

// 컴포넌트에서 필요한 데이터만 선택
const dailyData = useChecklistStore(state => state.daily.data)
const activeTab = useChecklistStore(state => state.activeTab)

3. Hook 규칙 준수

// 기존 문제 코드 대신 컴포넌트 레벨에서 처리
const CharChecklistData = () => {
  const { data } = useChecklist()
  const { setData } = useChecklistStore(state => state.actions)

  useEffect(() => {
    if(data) {
      setData('daily', data.checklists.daily.checklist)
      setData('custom', data.checklists.custom.checklist)
    }
  }, [data, setData])
}