Refactor: 모달 및 내브바 컬러시스템 적용

Author: gustn99

src/components/Modal/styles.tsx

@@ -26,7 +26,7 @@ export const ModalContainer = styled.div<{ $isCloseButtonVisible: boolean }>`
 	max-height: 30%;
 	padding: 2rem 1.5rem 1.5rem 1.5rem;
 	${({ $isCloseButtonVisible }) => ($isCloseButtonVisible ? 'padding-top: 2.5rem' : '')};
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	border-radius: 0.625rem;
 	box-shadow: 0 -0.125rem 0.625rem rgba(0, 0, 0, 0.1);
 	z-index: 999;
@@ -49,7 +49,7 @@ export const ConfirmButton = styled.button`
 	padding: 0.625rem 0.875rem;
 	justify-content: center;
 	align-items: center;
-	background: ${({ theme }) => theme.colors.gradient};
+	background: ${({ theme }) => theme.colors.brand.gradient};
 	border-radius: 0.5rem;
 	color: white;
 	${({ theme }) => theme.fontStyles['body1-medium']}

src/components/NavBar/index.tsx

@@ -22,6 +22,7 @@ import { StyledText } from '@components/Text/StyledText';
 import Modal from '@components/Modal';
 import type { ModalProps } from '@components/Modal/dto';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
+import theme from '@styles/theme';
 
 const NavBar: React.FC = () => {
 	const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
@@ -120,7 +121,7 @@ const NavBar: React.FC = () => {
 								<StyledText
 									className="styled-text"
 									$textTheme={{ style: selectedTab === tab.name ? `heading2-bold` : 'heading2-medium' }}
-									color="#1d1d1d"
+									color={theme.colors.text.primary}
 								>
 									{tab.name}
 								</StyledText>

src/components/NavBar/styles.tsx

@@ -1,19 +1,17 @@
 import styled from 'styled-components';
 
 export const NavBarContainer = styled.nav`
-	// fixed 포지션에 breakPoint를 적용하는 방법
 	position: fixed;
-	${({ theme }) => theme.visibleOnMobileTablet}; // breakPoint 미디어쿼리
-	bottom: 0; // 경우에 따라 top 0 등으로 작성
-	left: 50%; // 수직 중앙에 위치
-	transform: translateX(-50%); // width에 따른 수직 중앙 조정
-	width: 100%; // brakePoint에 따른 width에 따르도록 설정
+	${({ theme }) => theme.visibleOnMobileTablet};
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 100%;
 
-	// 이후로 자기 코드에 맞춰서 작성
 	height: 5.5rem;
 	justify-content: center;
 	align-items: center;
-	background: ${({ theme }) => theme.colors.gradient}; // 여기서 그래디언트 색상 사용
+	background: ${({ theme }) => theme.colors.brand.gradient};
 	margin: 0;
 	border-radius: 1.25rem 1.25rem 0 0;
 	filter: drop-shadow(0rem 0rem 0.25rem rgba(0, 0, 0, 0.25));
@@ -66,7 +64,7 @@ export const SideNavBarContainer = styled.nav`
 	padding: 2.5rem 1.5rem;
 	border-radius: 0 3rem 3rem 0;
 	position: fixed;
-	background: white;
+	background: ${({ theme }) => theme.colors.background.primary};
 	filter: drop-shadow(0rem 0rem 0.25rem rgba(0, 0, 0, 0.25));
 `;
 
@@ -90,7 +88,7 @@ export const SideNavBarHeader = styled.header`
 	}
 
 	button:hover {
-		background: rgba(0, 0, 0, 0.1);
+		background: ${({ theme }) => theme.colors.gray[200]};
 	}
 `;
 
@@ -110,7 +108,7 @@ export const SideNavBarButton = styled.label`
 		align-items: center;
 		border-radius: 50%;
 		padding: 0.6rem;
-		background: white;
+		background: ${({ theme }) => theme.colors.background.primary};
 		transition: background 0.2s;
 
 		box-shadow:
@@ -120,7 +118,7 @@ export const SideNavBarButton = styled.label`
 	}
 
 	button:hover {
-		background: rgba(0, 0, 0, 0.1);
+		background: ${({ theme }) => theme.colors.gray[200]};
 	}
 
 	img {