✨ : #492 - FootPrintFilter 컴포넌트 내 useGetMyPlansForFootprintQuery 훅 사용…

… 로직 구현

src/app/footprints/_Components/FootPrintFilter/FootPrintFilter.tsx

@@ -1,6 +1,7 @@
 import { Dropdown } from '@/components';
+import { useGetMyPlansForFootprintQuery } from '@/hooks/apis';
 import classNames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { planType } from '../MyFootPrints/MyFootPrints';
 import './index.scss';
 
@@ -15,14 +16,6 @@ export default function FootPrintFilter({
   setYear,
   setPlan,
 }: FootPrintFilterProps) {
-  // TODO:
-  // 1. props로 받은 year값을 기본값으로 year-DropDown의 selectedValue로 설정
-  // 2. year에 해당하는 모든 계획 리스트 state를 보유한다.
-  // 3. 모든 계획 리스트 state를 plan-DropDown의 options로 넣어준다.
-  // 4. 검색 버튼을 클릭 시,
-  // year-DropDown의 selectedValue 값으로 setYear() 호출
-  // plan-DropDown의 selectedValue 값으로 setPlan() 호출
-
   const [selectedYear, setSelectedYear] = useState(2024);
   const [selectedPlan, setSelectedPlan] = useState<planType>({
     planId: -1,
@@ -39,23 +32,26 @@ export default function FootPrintFilter({
     });
   };
 
-  // TODO: props으로 받은 year에 해당하는 모든 계획들을 return 하는 useQuery 정의하고 여기서로부터 data return
-  // 서버로부터 현재 year에 해당하는 계획들을 받아 planDropdown에 넣어줄 planOptions 만들기
-  const planOptions = [
-    { value: -1, name: '모든 계획' },
-    { value: 52, name: '1일 1커밋하기' },
-    { value: 53, name: '매일 운동하기' },
-  ];
+  const { yearPlans } = useGetMyPlansForFootprintQuery(selectedYear);
+
+  const planOptions = useMemo(() => {
+    // 서버로부터 받아온 yearPlans가 변경되지 않는 이상 변하지 않는 변수
+    return yearPlans.map((plan) => ({
+      value: plan.planId,
+      name: plan.planTitle,
+    }));
+  }, [yearPlans]);
 
   useEffect(() => {
-    // useEffect로 selectedYear이 바뀔 때마다, selectedPlan의 값은 "모든 계획"으로 변경해주기
+    // selectedYear이 바뀔 때마다, selectedPlan의 값은 "모든 계획"으로 변경해주기
     setSelectedPlan({
       planId: -1,
       planTitle: '모든 계획',
     });
   }, [selectedYear]);
 
   const handleClickSearchBtn = () => {
+    // 현재 dropdown에서 선택되어있는 year, plan 값으로 부모의 year, plan을 변경
     setYear(selectedYear);
     setPlan(selectedPlan);
   };

src/app/footprints/_Components/FootPrintFilter/index.scss

@@ -1,6 +1,7 @@
 .footprint-filter {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   &__search-btn {
   }