diff --git a/src/components/icon/CategoryMenu.icon.tsx b/src/components/icon/CategoryMenu.icon.tsx
index 616dcad..6f1cbba 100644
--- a/src/components/icon/CategoryMenu.icon.tsx
+++ b/src/components/icon/CategoryMenu.icon.tsx
@@ -1,4 +1,12 @@
-function CategoryMenuIcon() {
+import { useMemo } from "react";
+import theme from "@src/styles/theme";
+
+function CategoryMenuIcon({ selected }) {
+ const color = useMemo(
+ () => (selected ? theme.color.point : theme.color.black),
+ [selected],
+ );
+
return (
);
}
diff --git a/src/components/icon/Home.icon.tsx b/src/components/icon/Home.icon.tsx
index 43c9b9e..942c4a2 100644
--- a/src/components/icon/Home.icon.tsx
+++ b/src/components/icon/Home.icon.tsx
@@ -1,4 +1,15 @@
-function HomeIcon() {
+import { useMemo } from "react";
+import theme from "@src/styles/theme";
+
+function HomeIcon({ selected }) {
+ const color = useMemo(
+ () => (selected ? theme.color.point : theme.color.black),
+ [selected],
+ );
+ const fill = useMemo(
+ () => (selected ? theme.color.point : "none"),
+ [selected],
+ );
return (
);
diff --git a/src/components/icon/MyPage.icon.tsx b/src/components/icon/MyPage.icon.tsx
index 0dde740..7692289 100644
--- a/src/components/icon/MyPage.icon.tsx
+++ b/src/components/icon/MyPage.icon.tsx
@@ -1,4 +1,12 @@
-function MyPageIcon() {
+import { useMemo } from "react";
+import theme from "@src/styles/theme";
+
+function MyPageIcon({ selected }) {
+ const color = useMemo(
+ () => (selected ? theme.color.point : theme.color.black),
+ [selected],
+ );
+
return (
diff --git a/src/components/icon/StudyManage.icon.tsx b/src/components/icon/StudyManage.icon.tsx
index a62e569..26af183 100644
--- a/src/components/icon/StudyManage.icon.tsx
+++ b/src/components/icon/StudyManage.icon.tsx
@@ -1,4 +1,12 @@
-function StudyManageIcon() {
+import { useMemo } from "react";
+import theme from "@src/styles/theme";
+
+function StudyManageIcon({ selected }) {
+ const color = useMemo(
+ () => (selected ? theme.color.point : theme.color.black),
+ [selected],
+ );
+
return (
@@ -40,7 +48,7 @@ function StudyManageIcon() {
/>
diff --git a/src/components/organs/BottomNavigation.component.tsx b/src/components/organs/BottomNavigation.component.tsx
index 3ea4c32..7af0ed5 100644
--- a/src/components/organs/BottomNavigation.component.tsx
+++ b/src/components/organs/BottomNavigation.component.tsx
@@ -10,7 +10,8 @@ import MyPageIcon from "@src/components/icon/MyPage.icon";
// styles
import styled from "styled-components";
import { BaseButton, ButtonStyleProps } from "@src/components/atoms/Button";
-import { FontSize } from "@src/styles/theme";
+import theme, { FontSize } from "@src/styles/theme";
+import { NaviType } from "@src/constant/enum.constant";
const NavWrapper = styled.div`
display: flex;
@@ -26,32 +27,47 @@ const NavButton = styled.a`
font-size: ${FontSize.Small};
}
`;
-function BottomNavigationComponent() {
+interface DesType {
+ selected: boolean;
+}
+const Description = styled.p`
+ color: ${({ selected }) =>
+ selected ? theme.color.point : theme.color.black};
+`;
+function BottomNavigationComponent({ selected = NaviType.MAIN }) {
return (
-
- 메인
+
+
+ 메인
+
-
- 카테고리
+
+
+ 카테고리
+
-
- 스터디 관리
+
+
+ 스터디 관리
+
-
- 마이페이지
+
+
+ 마이페이지
+
diff --git a/src/constant/enum.constant.ts b/src/constant/enum.constant.ts
index f8d6e67..d181747 100644
--- a/src/constant/enum.constant.ts
+++ b/src/constant/enum.constant.ts
@@ -71,3 +71,10 @@ export const StudyManageTypeToLabel = {
[StudyManageType.MINE]: "내가 연 스터디",
[StudyManageType.OTHER]: "참여한 스터디",
};
+
+export const NaviType = {
+ MAIN: "MAIN",
+ FILTER: "FILTER",
+ STUDY: "STUDY",
+ PROFILE: "PROFILE",
+};
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index ae5ec33..98215b7 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,6 +1,7 @@
import BottomNavigationComponent from "@src/components/organs/BottomNavigation.component";
import { Button } from "@src/components/atoms/Button";
import Link from "next/link";
+import { NaviType } from "@src/constant/enum.constant";
function ProfilePage() {
return (
@@ -11,7 +12,7 @@ function ProfilePage() {
-
+
);
}
diff --git a/src/templates/MyStudyList.template.tsx b/src/templates/MyStudyList.template.tsx
index 564f0c5..562e566 100644
--- a/src/templates/MyStudyList.template.tsx
+++ b/src/templates/MyStudyList.template.tsx
@@ -1,5 +1,6 @@
// lib
import {
+ NaviType,
StudyManageType,
StudyManageTypeToLabel,
} from "@src/constant/enum.constant";
@@ -83,7 +84,7 @@ function MyStudyListTemplate({ studyList = [] }) {
{studyListDOM}
-
+
);
}
diff --git a/src/templates/StudyDetail.template.tsx b/src/templates/StudyDetail.template.tsx
index 571bae3..ecd1c3e 100644
--- a/src/templates/StudyDetail.template.tsx
+++ b/src/templates/StudyDetail.template.tsx
@@ -101,7 +101,7 @@ function StudyDetailTemplate({ study }) {
{/* Thumbnail */}
-
+
{/* Profile */}
diff --git a/src/templates/UserMain.template.tsx b/src/templates/UserMain.template.tsx
index f3d1a2a..4992b56 100644
--- a/src/templates/UserMain.template.tsx
+++ b/src/templates/UserMain.template.tsx
@@ -18,6 +18,7 @@ import { NoScroll } from "@src/styles/common";
import FloatingButtonComponent from "@src/components/molecules/FloatingButton.component";
import PencilIcon from "@src/components/icon/Pencil.icon";
import { useRouter } from "next/router";
+import { NaviType } from "@src/constant/enum.constant";
const MainContainer = styled.div`
${NoScroll};
@@ -165,7 +166,7 @@ function UserMainTemplate({
icon={}
onClick={onClickCreateStudy}
/>
-
+
);
}