✨ : #492 - 발자취 페이지 상단 탭 FootPrintTab 컴포넌트 기능 및 디자인 구현

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

@@ -21,14 +21,22 @@ export default function FootPrintFilter({
   // plan-DropDown의 selectedValue 값으로 setPlan() 호출
 
   // 자체 state
-  // year에 해당하는 모든 계획 리스트 state
+  // TODO: props으로 받은 year에 해당하는 모든 계획들을 return 하는 useQuery 정의하고 여기서로부터 data return
+  // 이를 plan-dropdown의 options로 넣어주기
   // const [selectedYear, setSelectedYear] = useState(2024);
   // const [selectedPlan, setSelectedPlan] = useState<planType>({
   //   planId: -1,
   //   planTitle: '모든 계획',
   // });
 
-  // useEffect로 year이 바뀔 때마다, selectedPlan의 값은 "모든 계획"
+  // TODO: useEffect로 year이 바뀔 때마다, selectedPlan의 값은 "모든 계획"으로 변경해주기
+  // useEffect(() => {
+  //   setSelectedPlan({
+  //     planId: -1,
+  //     planTitle: '모든 계획',
+  //   });
+  // }, [year]);
+
   return (
     <div
       onClick={() => {

src/app/footprints/_Components/FootPrintTab/FootPrintTab.tsx

@@ -1,11 +1,71 @@
+import classNames from 'classnames';
 import React from 'react';
+import './index.scss';
 
 interface FootPrintTabProps {
   isMyFootPrintsTab: boolean;
   setMyFootPrintsTab: () => void;
   setAllFootPrintsTab: () => void;
 }
 
-export default function FootPrintTab({}: FootPrintTabProps) {
-  return <div></div>;
+const TAB_MENU = {
+  MY: '내 발자취',
+  ALL: '둘러보기',
+};
+
+export default function FootPrintTab({
+  isMyFootPrintsTab,
+  setMyFootPrintsTab,
+  setAllFootPrintsTab,
+}: FootPrintTabProps) {
+  // TODO: isMyFootPrintsTab이 true => 내 발자취, false => 둘러보기 표시
+
+  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/footprints/_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);
+  }
+}

src/app/footprints/index.scss

@@ -0,0 +1,7 @@
+.footprint-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  height: 100%;
+}

src/app/footprints/page.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import classNames from 'classnames';
 import { useState } from 'react';
 import AllFootPrints from './_Components/AllFootPrints/AllFootPrints';
 import FootPrintTab from './_Components/FootPrintTab/FootPrintTab';
 import MyFootPrints from './_Components/MyFootPrints/MyFootPrints';
+import './index.scss';
 
 export default function FootPrintsPage() {
   const [isMyFootPrintsTab, setIsMyFootPrintsTab] = useState(true);
@@ -16,13 +18,13 @@ export default function FootPrintsPage() {
   };
 
   return (
-    <>
+    <div className={classNames('footprint-page')}>
       <FootPrintTab
         isMyFootPrintsTab={isMyFootPrintsTab}
         setMyFootPrintsTab={setMyFootPrintsTab}
         setAllFootPrintsTab={setAllFootPrintsTab}
       />
       {isMyFootPrintsTab ? <MyFootPrints /> : <AllFootPrints />}
-    </>
+    </div>
   );
 }