[혜수] - 비즈니스 로직 분리

src/app/(header)/explore/_components/ExplorePlans.tsx

@@ -2,30 +2,22 @@
 
 import { ToTopFloatingButton } from '@/components';
 import { COLOR } from '@/constants';
-import { useAllPlansQuery } from '@/hooks/apis/useAllPlansQuery';
-import { SortType } from '@/types/apis/plan/GetAllPlans';
 import classNames from 'classnames';
-import { useMemo, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 import { FadeLoader } from 'react-spinners';
 import Plans from './Plans/Plans';
 import Tab from './Tab/Tab';
+import { useExplorePlans } from './hooks';
 import './index.scss';
 
 export default function ExplorePlans() {
-  const [sort, setSort] = useState<SortType>('latest');
-  const [current, setCurrent] = useState(true);
-  const { loadedPlans, fetchNextPage, hasNextPage } = useAllPlansQuery({
-    sort,
-    current,
-  });
-  const flatLoadedPlans = useMemo(() => loadedPlans.flat(), [loadedPlans]);
-  const handleSort = (condition: SortType) => {
-    setSort(condition);
-  };
-  const handleYear = (isNewYear: boolean) => {
-    setCurrent(isNewYear);
-  };
+  const {
+    fetchNextPage,
+    flatLoadedPlans,
+    handleSort,
+    handleYear,
+    hasNextPage,
+  } = useExplorePlans();
   return (
     <div className={classNames('explore-plans')}>
       <div className={classNames('explore-plans__wrapper')}>

src/app/(header)/explore/_components/Tab/Tab.tsx

@@ -1,19 +1,18 @@
 'use client';
 
-import { SortType } from '@/types/apis/plan/GetAllPlans';
+import { TabProps } from '@/types';
 import classNames from 'classnames';
-import { useState } from 'react';
 import React from 'react';
+import { useTab } from '../hooks/useTab';
 import './index.scss';
 
-type TabProps = {
-  handleSort: (condition: SortType) => void;
-  handleYear: (isNewYear: boolean) => void;
-};
-
 export default function Tab({ handleSort, handleYear }: TabProps) {
-  const [currentYearTab, setCurrentYearTab] = useState(0);
-  const [currentSortTab, setCurrentSortTab] = useState(0);
+  const {
+    currentSortTab,
+    currentYearTab,
+    selectSortMenuHandler,
+    selectYearMenuHandler,
+  } = useTab({ handleSort, handleYear });
 
   const yearMenu = [
     { name: '새해' },
@@ -23,14 +22,6 @@ export default function Tab({ handleSort, handleYear }: TabProps) {
   ];
   const sortMenu = [{ name: '최신순' }, { name: '인기순' }];
 
-  const selectYearMenuHandler = (index: number) => {
-    setCurrentYearTab(index);
-    handleYear(index === 0 ? true : false);
-  };
-  const selectSortMenuHandler = (index: number) => {
-    setCurrentSortTab(index);
-    handleSort(index === 0 ? 'latest' : 'ajaja');
-  };
   return (
     <div className={classNames('tab__wrapper')}>
       <div className={classNames('tab__wrapper-year')}>

src/app/(header)/explore/_components/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useTab } from './useTab';
+export { default as useExplorePlans } from './useExplorePlans';

src/app/(header)/explore/_components/hooks/useExplorePlans.ts

@@ -0,0 +1,31 @@
+import { useAllPlansQuery } from '@/hooks/apis/useAllPlansQuery';
+import { SortType } from '@/types/apis/plan/GetAllPlans';
+import { useMemo, useState } from 'react';
+
+export default function useExplorePlans() {
+  const [sort, setSort] = useState<SortType>('latest');
+  const [current, setCurrent] = useState(true);
+  const { loadedPlans, fetchNextPage, hasNextPage } = useAllPlansQuery({
+    sort,
+    current,
+  });
+  const flatLoadedPlans = useMemo(() => loadedPlans.flat(), [loadedPlans]);
+  const handleSort = (condition: SortType) => {
+    setSort(condition);
+  };
+  const handleYear = (isNewYear: boolean) => {
+    setCurrent(isNewYear);
+  };
+  return {
+    sort,
+    setSort,
+    current,
+    setCurrent,
+    loadedPlans,
+    fetchNextPage,
+    hasNextPage,
+    flatLoadedPlans,
+    handleSort,
+    handleYear,
+  };
+}

src/app/(header)/explore/_components/hooks/useTab.ts

@@ -0,0 +1,23 @@
+import { TabProps } from '@/types/Tab';
+import { useState } from 'react';
+
+export default function useTab({ handleSort, handleYear }: TabProps) {
+  const [currentYearTab, setCurrentYearTab] = useState(0);
+  const [currentSortTab, setCurrentSortTab] = useState(0);
+  const selectYearMenuHandler = (index: number) => {
+    setCurrentYearTab(index);
+    handleYear(index === 0 ? true : false);
+  };
+  const selectSortMenuHandler = (index: number) => {
+    setCurrentSortTab(index);
+    handleSort(index === 0 ? 'latest' : 'ajaja');
+  };
+  return {
+    currentYearTab,
+    setCurrentYearTab,
+    currentSortTab,
+    setCurrentSortTab,
+    selectYearMenuHandler,
+    selectSortMenuHandler,
+  };
+}

src/app/(header)/home/_components/MyPlan.tsx

@@ -3,41 +3,19 @@
 import { Dropdown } from '@/components';
 import { maxPlan } from '@/constants/plan';
 import { planIcons } from '@/constants/planIcons';
-import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore';
 import { GetMyPlansResponse } from '@/types/apis/plan/GetMyPlans';
 import { checkThisYear } from '@/utils/checkThisYear';
 import classNames from 'classnames';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
 import NewPlan from './NewPlan/NewPlan';
 import Plan from './Plan/Plan';
 import ProgressBar from './ProgressBar/ProgressBar';
+import { useMyPlan } from './hooks';
 
-type MyPlanProps = {
-  myPlans: GetMyPlansResponse;
-};
-
-export default function MyPlan({ myPlans }: MyPlanProps) {
-  const { data: myPlansData } = myPlans;
-  const yearList = myPlansData.map((x) => x.year);
-  const setCanMakeNewPlan = useSetRecoilState(canMakeNewPlanStore);
-  const [year, setYear] = useState(yearList[0]);
-  const [yearData, setYearData] = useState(myPlansData[0]);
-  const [yearDataLength, setYearDataLength] = useState(
-    myPlansData[0].getPlanList.length,
+export default function MyPlan({ myPlans }: { myPlans: GetMyPlansResponse }) {
+  const { PERIOD_OPTIONS, setYear, year, yearData, yearDataLength } = useMyPlan(
+    { myPlans },
   );
-
-  const PERIOD_OPTIONS = yearList.map((x) => {
-    return { value: x, name: `${x}년 계획` };
-  });
-
-  useEffect(() => {
-    const chosenYearData = myPlansData.find((x) => x.year === year)!;
-    setYearData(chosenYearData);
-    setYearDataLength(chosenYearData.getPlanList.length);
-    setCanMakeNewPlan(!!(maxPlan - chosenYearData.getPlanList.length));
-  }, [year, myPlansData, setYearDataLength, setCanMakeNewPlan]);
   return (
     <>
       <div className={classNames('home__header')}>

src/app/(header)/home/_components/NewPlan/NewPlan.tsx

@@ -1,14 +1,12 @@
 import { Icon } from '@/components';
-import { canMakeNewPlanStore } from '@/stores/canMakeNewPlanStore';
 import { checkIsSeason } from '@/utils/checkIsSeason';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { useRecoilState } from 'recoil';
+import { useNewPlan } from '../hooks';
 import './index.scss';
 
 export default function NewPlan() {
-  const [canMakeNewPlan] = useRecoilState(canMakeNewPlanStore);
-
+  const { canMakeNewPlan } = useNewPlan();
   return (
     <>
       <div className={classNames('new-plan__servey')}>