From 7b29439f4b3e307edd52dd44b0af1f30c5a1907d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EB=AF=BC=EC=9A=B0?= <alsd20177@gmail.com>
Date: Wed, 27 Mar 2024 23:32:27 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20:=20#492=20-=20=EB=B0=9C=EC=9E=90?=
 =?UTF-8?q?=EC=B7=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=81=EB=8B=A8=20?=
 =?UTF-8?q?=ED=83=AD=20FootPrintTab=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FootPrintFilter/FootPrintFilter.tsx       | 12 +++-
 .../_Components/FootPrintTab/FootPrintTab.tsx | 64 ++++++++++++++++++-
 .../_Components/FootPrintTab/index.scss       | 34 ++++++++++
 src/app/footprints/index.scss                 |  7 ++
 src/app/footprints/page.tsx                   |  6 +-
 5 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/src/app/footprints/_Components/FootPrintFilter/FootPrintFilter.tsx b/src/app/footprints/_Components/FootPrintFilter/FootPrintFilter.tsx
index e7f0d61a..95ae8241 100644
--- a/src/app/footprints/_Components/FootPrintFilter/FootPrintFilter.tsx
+++ b/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={() => {
diff --git a/src/app/footprints/_Components/FootPrintTab/FootPrintTab.tsx b/src/app/footprints/_Components/FootPrintTab/FootPrintTab.tsx
index d46c6f4e..1e33d24d 100644
--- a/src/app/footprints/_Components/FootPrintTab/FootPrintTab.tsx
+++ b/src/app/footprints/_Components/FootPrintTab/FootPrintTab.tsx
@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import React from 'react';
+import './index.scss';
 
 interface FootPrintTabProps {
   isMyFootPrintsTab: boolean;
@@ -6,6 +8,64 @@ interface FootPrintTabProps {
   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>
+  );
 }
diff --git a/src/app/footprints/_Components/FootPrintTab/index.scss b/src/app/footprints/_Components/FootPrintTab/index.scss
index e69de29b..61c7b637 100644
--- a/src/app/footprints/_Components/FootPrintTab/index.scss
+++ b/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);
+  }
+}
diff --git a/src/app/footprints/index.scss b/src/app/footprints/index.scss
index e69de29b..133932ca 100644
--- a/src/app/footprints/index.scss
+++ b/src/app/footprints/index.scss
@@ -0,0 +1,7 @@
+.footprint-page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/app/footprints/page.tsx b/src/app/footprints/page.tsx
index 59d43faf..de12aba0 100644
--- a/src/app/footprints/page.tsx
+++ b/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>
   );
 }