[민우] - 발자취 페이지 : 내 발자취 탭 구현

package.json

@@ -23,6 +23,7 @@
     "react-form-stepper": "^2.0.3",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroller": "^1.2.6",
+    "react-intersection-observer": "^9.8.2",
     "react-spinners": "^0.13.8",
     "recoil": "^0.7.7"
   },

src/apis/client/getMyFootPrints.ts

@@ -0,0 +1,19 @@
+import { DOMAIN } from '@/constants/api';
+import {
+  GetAllPlansRequestQuery,
+  GetAllPlansResponse,
+} from '@/types/apis/plan/GetAllPlans';
+import { axiosInstanceClient } from '../axiosInstanceClient';
+
+export const getMyFootPrints = async (query: GetAllPlansRequestQuery) => {
+  const { data } = await axiosInstanceClient.get<GetAllPlansResponse>(
+    DOMAIN.GET_PLANS_ALL,
+    {
+      authorization: false,
+      params: {
+        ...query,
+      },
+    },
+  );
+  return data;
+};

src/app/footprint/_Components/AllFootPrints/AllFootPrints.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function AllFootPrints() {
+  return <div></div>;
+}

src/app/footprint/_Components/FootPrintFilter/FootPrintFilter.tsx

@@ -0,0 +1,87 @@
+import { Dropdown, Icon } from '@/components';
+import { FOOTPRINT_PLAN } from '@/constants';
+import { useGetMyPlansForFootprintQuery } from '@/hooks/apis';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import { planType } from '../MyFootPrints/MyFootPrints';
+import './index.scss';
+
+interface FootPrintFilterProps {
+  setYear: (year: number) => void;
+  setPlan: (plan: planType) => void;
+}
+
+const yearOptions = [{ value: 2024, name: '2024년' }];
+
+export default function FootPrintFilter({
+  setYear,
+  setPlan,
+}: FootPrintFilterProps) {
+  const [selectedYear, setSelectedYear] = useState(2024);
+  const [selectedPlan, setSelectedPlan] = useState<planType>(
+    FOOTPRINT_PLAN.ALL_PLAN,
+  );
+
+  const handleSelectedPlan = (newSelectedPlanId: number) => {
+    const newSelectedPlan = planOptions.find(
+      (plan) => plan.value === newSelectedPlanId,
+    );
+    setSelectedPlan({
+      planId: newSelectedPlan!.value,
+      planTitle: newSelectedPlan!.name,
+    });
+  };
+
+  const { yearPlans } = useGetMyPlansForFootprintQuery(selectedYear);
+
+  const planOptions = useMemo(() => {
+    // 서버로부터 받아온 yearPlans가 변경되지 않는 이상 변하지 않는 변수
+    return yearPlans.map((plan) => ({
+      value: plan.planId,
+      name: plan.planTitle,
+    }));
+  }, [yearPlans]);
+
+  useEffect(() => {
+    // selectedYear이 바뀔 때마다, yearPlans의 값이 바뀔테니
+    // selectedPlan의 값은 "모든 계획"으로 변경해주기
+    setSelectedPlan(FOOTPRINT_PLAN.ALL_PLAN);
+  }, [selectedYear]);
+
+  const handleClickSearchBtn = () => {
+    // 현재 dropdown에서 선택되어있는 year, plan 값으로 부모의 year, plan을 변경
+    if (selectedPlan.planId !== FOOTPRINT_PLAN.EMPTY.planId) {
+      // "계획 없음"이 선택되지 않았을 때만 변경 가능하도록
+      setYear(selectedYear);
+      setPlan(selectedPlan);
+    }
+  };
+
+  return (
+    <div className={classNames('footprint-filter')}>
+      <Dropdown
+        dropdownId="year-filter"
+        options={yearOptions}
+        selectedValue={selectedYear}
+        setSelectedValue={(newSelectedYear: number) => {
+          setSelectedYear(newSelectedYear);
+        }}
+        classNameList={['footprint-filter__dropdown--year']}
+      />
+
+      <Dropdown
+        dropdownId="plan-filter"
+        options={planOptions}
+        selectedValue={selectedPlan.planId}
+        setSelectedValue={handleSelectedPlan}
+        classNameList={['footprint-filter__dropdown--filter']}
+      />
+
+      <button
+        className={classNames('footprint-filter__search-btn')}
+        onClick={handleClickSearchBtn}>
+        <Icon name={'SEARCH'} color={'white-100'} size="lg" />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+.footprint-filter {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+
+  &__search-btn {
+    &:hover {
+      cursor: pointer;
+    }
+    display: flex;
+    justify-content: center;
+    padding: 0.25rem;
+    align-items: center;
+    border-radius: 10px;
+    background-color: var(--origin-primary);
+  }
+}

src/app/footprint/_Components/FootPrintList/FootPrintList.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { COLOR } from '@/constants';
+import { useMyFootPrintsQuery } from '@/hooks/apis/useMyFootPrintsQuery';
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { FadeLoader } from 'react-spinners';
+import FootprintItem from '../FootprintItem/FootprintItem';
+import { planType } from '../MyFootPrints/MyFootPrints';
+import './index.scss';
+
+interface FootPrintListProps {
+  year: number;
+  plan: planType;
+}
+
+export default function FootPrintList({ year, plan }: FootPrintListProps) {
+  // TODO: prop으로 받은 year과 plan에 해당하는 발자취 list들을 서버로부터 받아온다.
+  // - plan.planId === -1 => 모든 계획일 것
+  // - plan.planId === -2 => 해당 year에 해당하는 계획이 없는 것
+  console.log(`${year}과 ${plan}에 해당하는 발자취 List로 변경 필요`);
+
+  const { tempFootPrintList, fetchNextPage, isFetchingNextPage } =
+    useMyFootPrintsQuery({
+      sort: 'latest',
+      current: true,
+    });
+
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    // ref로 참조하고 있는 div 요소가 viewPort에 보여진다면 다음 페이지 fetch
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [inView]);
+
+  return (
+    <ul className={classNames('footprint-list')}>
+      {tempFootPrintList.map((item) => {
+        return (
+          <FootprintItem
+            key={item.id}
+            id={item.id}
+            iconNumber={item.iconNumber}
+            title={item.title}
+            createdAt={item.createdAt}
+            ajajas={item.ajajas}
+            tags={item.tags}
+          />
+        );
+      })}
+
+      <div className="footprint-list__loading-wrapper">
+        {isFetchingNextPage ? (
+          <FadeLoader color={COLOR.PRIMARY} speedMultiplier={1.3} />
+        ) : (
+          <div className="footprint-list__end" ref={ref} />
+        )}
+      </div>
+    </ul>
+
+    // TODO: ${year}와 ${plan.planTitle}에 해당하는 FootPrintList 출력
+    // -> 지금은 임시로 "계획 전체조회 api(계획 둘러보기)"를 사용하고 있음
+  );
+}

src/app/footprint/_Components/FootPrintList/index.scss

@@ -0,0 +1,19 @@
+.footprint-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: scroll;
+
+  &__loading-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__end {
+    &:before {
+      content: '';
+      display: block;
+      height: 12px;
+    }
+  }
+}

src/app/footprint/_Components/FootPrintTab/FootPrintTab.tsx

@@ -0,0 +1,69 @@
+import classNames from 'classnames';
+import React from 'react';
+import './index.scss';
+
+interface FootPrintTabProps {
+  isMyFootPrintsTab: boolean;
+  setMyFootPrintsTab: () => void;
+  setAllFootPrintsTab: () => void;
+}
+
+const TAB_MENU = {
+  MY: '내 발자취',
+  ALL: '둘러보기',
+};
+
+export default function FootPrintTab({
+  isMyFootPrintsTab,
+  setMyFootPrintsTab,
+  setAllFootPrintsTab,
+}: FootPrintTabProps) {
+  const handleClickMyFootPrintsTab = () => {
+    if (!isMyFootPrintsTab) {
+      setMyFootPrintsTab();
+    }
+  };
+
+  const handleClickAllFootPrintsTab = () => {
+    if (isMyFootPrintsTab) {
+      setAllFootPrintsTab();
+    }
+  };
+
+  return (
+    <div className={classNames('footprint-tab')}>
+      <div
+        className={classNames(
+          'footprint-tab__menu',
+          'font-size-base',
+          isMyFootPrintsTab
+            ? 'footprint-tab--focused'
+            : 'footprint-tab--normal',
+        )}
+        onClick={handleClickMyFootPrintsTab}>
+        {TAB_MENU.MY}
+        <div
+          className={classNames('footprint-tab__underline', {
+            'footprint-tab__underline--focused': isMyFootPrintsTab,
+          })}
+        />
+      </div>
+      <div
+        className={classNames(
+          'footprint-tab__menu',
+          'font-size-base',
+          !isMyFootPrintsTab
+            ? 'footprint-tab--focused'
+            : 'footprint-tab--normal',
+        )}
+        onClick={handleClickAllFootPrintsTab}>
+        {TAB_MENU.ALL}
+        <div
+          className={classNames('footprint-tab__underline', {
+            'footprint-tab__underline--focused': !isMyFootPrintsTab,
+          })}
+        />
+      </div>
+    </div>
+  );
+}

src/app/footprint/_Components/FootPrintTab/index.scss

@@ -0,0 +1,34 @@
+.footprint-tab {
+  margin-top: 2rem;
+  display: flex;
+  gap: 0rem;
+  &:hover {
+    cursor: pointer;
+  }
+
+  &__menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 6rem;
+  }
+
+  &__underline {
+    background-color: var(--origin-secondary);
+    height: 0.125rem;
+    width: 100%;
+
+    &--focused {
+      background-color: var(--origin-primary);
+    }
+  }
+
+  &--normal {
+    color: var(--origin-secondary);
+  }
+
+  &--focused {
+    color: var(--origin-primary);
+  }
+}